fullcalendar not working Uncaught ReferenceError: Calendar is not constructor

Posted 2023-03-14

【中文标题】fullcalendar not working Uncaught ReferenceError: Calendar is not constructor

【英文标题】：fullcalender 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

【参考方案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;