未捕获的 ReferenceError：日历未在 laravel 中定义答案

【问题标题】：Uncaught ReferenceError:Calendar is not defined in laravel未捕获的 ReferenceError：日历未在 laravel 中定义
【发布时间】：2020-06-23 15:27:13
【问题描述】：

我正在开发 laravel 项目，我正在尝试在我的应用程序中安装 FullCalendar，起初它可以正常工作，但现在我收到此错误：未捕获的 ReferenceError：未定义日历

这是日历视图：

<script>
document.addEventListener('DOMContentLoaded', function () {
            var calendarEl = document.getElementById('calendar');
            var calendar = new Calendar(calendarEl, {
  headerToolbar: {
    center: 'dayGridMonth,timeGridFourDay' // buttons for switching between views
  },
  views: {
    timeGridFourDay: {
      type: 'timeGrid',
      duration: { days: 4 },
      buttonText: '4 day'
    }
  }
});
              console.log(new Date(info.event.start).toLocaleDateString());
                     calendar.render();
            @foreach($calendar->monday as $ja)
            calendar.addEvent({
                title:"{{$ja}}",
                daysOfWeek: [ '1' ]
            });
            @endforeach
            
            @foreach($calendar->tuesday as $ja)
            calendar.addEvent({
                title:"{{$ja}}",
                daysOfWeek: [ '2' ]
              });
            @endforeach
            @foreach($calendar->wednesday as $ja)
            calendar.addEvent({
                title:"{{$ja}}",
                daysOfWeek: [ '3' ]
            });
            @endforeach
            @foreach($calendar->thursday as $ja)
            calendar.addEvent({
                title:"{{$ja}}",
                daysOfWeek: [ '4' ]
            });
            @endforeach
            @foreach($calendar->friday as $ja)
            calendar.addEvent({
                title:"{{$ja}}",
                daysOfWeek: [ '5' ]
            });
            @endforeach
            @foreach($calendar->saturday as $ja)
            calendar.addEvent({
                title:"{{$ja}}",
                daysOfWeek: [ '6' ]
            });
            @endforeach
        }); 
      })

链接女巫包含完整的日历：

    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.0.0/main.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.0.0/main.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/fullcalendar@5.0.0/main.css" rel='stylesheet' />

【问题讨论】：

标签： javascript laravel fullcalendar

【解决方案1】：

如here 所述。 new Calendar 应该是 new FullCalendar.Calendar。

<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='utf-8' />
    <link href='fullcalendar/main.css' rel='stylesheet' />
    <script src='fullcalendar/main.js'></script>
    <script>

      document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
          initialView: 'dayGridMonth'
        });
        calendar.render();
      });

    </script>
  </head>
  <body>
    <div id='calendar'></div>
  </body>
</html>

【讨论】：