fullcalender not working Uncaught ReferenceError: Calendar is not constructor

Question

我正在安装 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 运行 watch

安装和导入后 运行 命令成功，我尝试使用 this

中的示例

但是，这个错误

Uncaught ReferenceError: Calendar is not constructor

我的代码

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

Answer 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;