fullcalendar not working Uncaught ReferenceError: Calendar is not constructor答案

【问题标题】：fullcalender not working Uncaught ReferenceError: Calendar is not constructorfullcalendar not working Uncaught ReferenceError: Calendar is not constructor
【发布时间】：2020-05-09 07:33:34
【问题描述】：

我正在安装Fullcalender

npm install --save @fullcalendar/core @fullcalendar/daygrid

安装成功后。

我在文件中导入 css app.sass

//Calender
@import '~@fullcalendar/core/main.css';
@import '~@fullcalendar/daygrid/main.css';
@import '~@fullcalendar/timegrid/main.css';
@import '~@fullcalendar/list/main.css';

在那之后。 app.js

window.Calendar = require('@fullcalendar/core');
window.dayGridPlugin = require('@fullcalendar/daygrid');
window.timeGridPlugin = require('@fullcalendar/timegrid');
window.listPlugin = require('@fullcalendar/list');

然后运行命令 npm run watch

安装并导入并运行命令成功后，我尝试使用this中的示例

但是，这个错误

未捕获的引用错误：日历不是构造函数

我的代码

var calendarEl = document.getElementById('calendar');

            var calendar = new Calendar(calendarEl, {
                plugins: [interactionPlugin, dayGridPlugin, timeGridPlugin, listPlugin],
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
                },
                defaultDate: '2018-01-12',
                navLinks: true, // can click day/week names to navigate views
                editable: true,
                eventLimit: true, // allow "more" link when too many events
                events: [
                    {
                        title: 'All Day Event',
                        start: '2018-01-01',
                    },
                    {
                        title: 'Long Event',
                        start: '2018-01-07',
                        end: '2018-01-10'
                    },
                    {
                        id: 999,
                        title: 'Repeating Event',
                        start: '2018-01-09T16:00:00'
                    },
                    {
                        id: 999,
                        title: 'Repeating Event',
                        start: '2018-01-16T16:00:00'
                    },
                    {
                        title: 'Conference',
                        start: '2018-01-11',
                        end: '2018-01-13'
                    },
                    {
                        title: 'Meeting',
                        start: '2018-01-12T10:30:00',
                        end: '2018-01-12T12:30:00'
                    },
                    {
                        title: 'Lunch',
                        start: '2018-01-12T12:00:00'
                    },
                    {
                        title: 'Meeting',
                        start: '2018-01-12T14:30:00'
                    },
                    {
                        title: 'Happy Hour',
                        start: '2018-01-12T17:30:00'
                    },
                    {
                        title: 'Dinner',
                        start: '2018-01-12T20:00:00'
                    },
                    {
                        title: 'Birthday Party',
                        start: '2018-01-13T07:00:00'
                    },
                    {
                        title: 'Click for Google',
                        url: 'http://google.com/',
                        start: '2018-01-28'
                    }
                ]
            });

            calendar.render();

所以，我尝试在很多网站上检查我的问题，但从未找到 Laravel 使用 npm install fullcalendar 的网站示例

我正在尝试检查 console.log

【问题讨论】：

根据fullcalendar.io/docs/initialize-es6，您是否在脚本开头写了import { Calendar } from '@fullcalendar/core';？如果没有，那么我认为你必须写var calendar = new FullCalendar.Calendar - 给出类的完整命名空间。
这个错误 Uncaught SyntaxError: Cannot use import statement outside a module
从'@fullcalendar/core'导入{日历}；从'@fullcalendar/daygrid'导入dayGridPlugin； document.addEventListener('DOMContentLoaded', function() { var calendarEl = document.getElementById('calendar'); var calendar = new Calendar(calendarEl, { plugins: [ dayGridPlugin ] }); calendar.render(); });
"不能在模块外使用 import 语句" ...好的，所以你必须尝试我的第二个建议。是你做的吗？下面是一个成功使用它的例子：codepen.io/ADyson82/pen/jOOzjXJ
根据完整的日历文档fullcalendar.io/docs/initialize-globals，您需要在
中添加HTML、Body

标签： jquery laravel npm fullcalendar fullcalendar-4

【解决方案1】：

为了我的回答

//Calender

import * as Calendar from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import listPlugin from '@fullcalendar/list';
import interactionPlugin from '@fullcalendar/interaction';

window.FullCalendar = Calendar;
window.dayGridPlugin = dayGridPlugin;
window.timeGridPlugin = timeGridPlugin;
window.listPlugin = listPlugin;
window.interactionPlugin = interactionPlugin;

【讨论】：