Question

我已经使用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',
})

Answer 1

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

安装依赖项：

const sum = (ns) => ns.reduce ((a, b) => a + b, 0)

const countEmployees = async (id) => 
  1 + sum (await Promise.all (
    (await fetchEmployee (id)) .employees .map (countEmployees)
  ))

countEmployees (1) .then (console .log)

在 javascript 中导入：注意：我使用了一个名为 calendar.js 的单独文件并将其放在 <script>/* Dummy implementation */ const fetchEmployee = ((emps) => async (id, employees = emps [id]) => Promise .resolve ({id, employees}) )([[], [2, 3, 4], [5, 6], [7, 8], [9], [10, 11], [], [], [], [12], [], [], []])</script> 中，因此我已将其添加到 app.js

    npm install @fullcalendar/core @fullcalendar/daygrid @fullcalendar/timegrid @fullcalendar/list

编辑文件 calendar.js

resources/js/calendar.js

编辑文件添加（在导入部分之后）

require('./calendar');

在我的视图文件中：

    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

在我的页脚部分：

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();
});

运行 <div id="calendar"></div>（或 <script src="{{ asset('js/app.js') }}"></script> 或 npm run dev，视情况而定）

最后一点：我使用 prod 是因为我的 app.js 脚本在页脚中。如果放在 head 标签中，我不知道这是否也有效。

如何在Laravel Mix上使用FullCalendar

1 个答案: