如何将 FullCalendar 与 Laravel Mix 一起使用

How to use FullCalendar with Laravel Mix

我已经使用 npm 安装了 Fullcalendar 库包。

npm i --save @fullcalendar/core 
    @fullcalendar/interaction @fullcalendar/daygrid 
    @fullcalendar/timegrid @fullcalendar/list @fullcalendar/bootstrap

我也将其包含在 app.js 中。

require('@fullcalendar/core');
require('@fullcalendar/bootstrap');
require('@fullcalendar/list');
require('@fullcalendar/timegrid');
require('@fullcalendar/daygrid');
require('@fullcalendar/interaction');

然而,当尝试使用以下代码创建日历时:

var calendarEl = document.getElementById('calendar');
calendar = new Calendar(calendarEl, {
    plugins: [ 'interactionPlugin', 'bootstrapPlugin', 'dayGridPlugin', 'timeGridPlugin', 'listPlugin'],
});

我收到错误...

Uncaught ReferenceError: Calendar is not defined at HTMLDocument.<anonymous> on new Calendar

.

我做错了什么?

我的 webpack.mix.js 看起来像这样:

const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css').version();

编辑:

将我的 app.js 设置为:

window.FullCalendar = require('@fullcalendar/core');
window.bootstrapPlugin = require('@fullcalendar/bootstrap');
window.interactionPlugin = require('@fullcalendar/interaction');
window.listPlugin = require('@fullcalendar/list');
window.timeGridPlugin = require('@fullcalendar/timegrid');
window.dayGridPlugin = require('@fullcalendar/daygrid');

我现在收到这个错误: Uncaught TypeError: Cannot read property 'length' of undefined

calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [bootstrapPlugin, interactionPlugin, listPlugin, timeGridPlugin, dayGridPlugin],
locale : 'pt-br',
})

一段时间过去了,但我今天遇到了同样的问题,我已经解决了。

  1. 安装依赖项:
    npm install @fullcalendar/core @fullcalendar/daygrid @fullcalendar/timegrid @fullcalendar/list
  1. 在 javascript 中导入:注意:我使用了一个名为 calendar.js 的单独文件并将其放入 resources/js/calendar.js,因此我已将其添加到 app.js
require('./calendar');
  1. 编辑文件calendar.js
    import { Calendar } from '@fullcalendar/core';
    import dayGridPlugin from '@fullcalendar/daygrid';
    import timeGridPlugin from '@fullcalendar/timegrid';
    import listPlugin from '@fullcalendar/list';
    import itLocale from '@fullcalendar/core/locales/it'; //italian language and config
  1. 编辑文件添加(在导入部分之后)
document.addEventListener('DOMContentLoaded', function() {
    const calendarEl = document.getElementById("calendar");

    let calendar = new Calendar(calendarEl, {
        locale: itLocale,
        plugins: [ dayGridPlugin, timeGridPlugin, listPlugin ],
        initialView: 'dayGridMonth',
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,listWeek'
        },
        // go ahead with other parameters
    });

    calendar.render();
});
  1. 在我的视图文件中:
<div id="calendar"></div>
  1. 在我的页脚部分:
<script src="{{ asset('js/app.js') }}"></script>
  1. 运行 npm run dev(或prodwatch,视情况而定)

最后说明:我使用 DOMContentLoaded 因为我的 app.js 脚本在页脚中。如果放在 head 标签中,我不知道这是否也有效。

您可以包装实例化以使用默认选项,然后与新选项合并。

import { Calendar } from '@fullcalendar/core'
import allLocales from '@fullcalendar/core/locales-all'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'

(function (global) {
  global.FullCalendar = {
    Calendar: function (elt, options) {
      return new Calendar(elt, Object.assign({
        plugins: [ dayGridPlugin, timeGridPlugin ],
        locales: allLocales,
      }, options))
    }
  }
})(window)

那你就可以这样使用了


const calendarEl = document.getElementById("calendar")
    
let calendar = new FullCalendar.Calendar(calendarEl, {
                                locale: 'fr',
                                initialView: 'dayGridMonth',
                                headerToolbar: {
                                    left: 'prev,next today',
                                    center: 'title',
                                    right: 'dayGridMonth,timeGridWeek,listWeek'
                                }
                            })

calendar.render()
    

感谢 Bartheleway Github
Source