完全日历未正常工作ReferenceError:日历不是构造函数

Question

我正在安装满压延机

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

安装成功后。

我在文件app.sass上导入css

//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运行监视

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

但是，这个错误

Uncaught :日历不是构造函数

我的代码

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安装完整日历。

我试着检查一下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;