通过 NPM 安装 FullCalendar 到 laravel 项目

Question

我对 Laravel 和 web packs 还很陌生。

我正在尝试通过 NPM 将 FullCalendar 安装到我的 Laravel 项目中 - 之前我一直在使用 cdnjs 中的 include，但我想学习其他方式。到目前为止我所做的是： https://fullcalendar.io/docs/initialize-es6

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

然后我将 Laravel 中的 app.js 更新为

require('./bootstrap');
require('fullcalendar');

import { Calendar }from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
import listPlugin from '@fullcalendar/list';

我还更新了app.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@fullcalendar/core/main.css;
@fullcalendar/daygrid/main.css;
@fullcalendar/timegrid/main.css;
@fullcalendar/list/main.css;

然后我就跑了

npm run dev

在blade文件中，我重新使用了使用cdnjs的脚本文件时的代码。我添加了更新的 app.js 文件，该文件是通过 npm run dev 编译的

<div id="calendar"></div>

    <script>
    $(document).ready(function() {

        // page is now ready, initialize the calendar...
            var calendarEl = document.getElementById('calendar');
            var calendar = new FullCalendar.Calendar(calendarEl, {

                plugins: [ 'dayGrid','List'],
                header: {
                    left: 'prev,next today',
                    right: 'dayGridWeek,listWeek'
                },
                defaultView: 'dayGridWeek',
                contentHeight: 'auto',
                events : [
                        @foreach($events as $event)
                        {
                            title : '{{ $event->title }}',
                            start : '{{ $event->start_event }}',
                        },
                        @endforeach
                    ]
        });
        calendar.render();
    });
    </script>
    <script src="{{ asset('js/app.js') }}"></script>

我得到的错误是：

我不明白为什么，我一直在玩 app.js 并重新编译它很多次并改变我的代码顺序..没有任何效果。我缺少什么？

Answer 1

我有类似的问题，让我这样工作：

//app.js

...
import { Calendar } from '@fullcalendar/core';
window.Calendar = Calendar;

import interaction from '@fullcalendar/interaction';
window.interaction = interaction;

import dayGridPlugin from '@fullcalendar/daygrid';
window.dayGridPlugin = dayGridPlugin;

import timeGridPlugin from '@fullcalendar/timegrid';
window.timeGridPlugin = timeGridPlugin;

import listPlugin from '@fullcalendar/list';
window.listPlugin = listPlugin;
...

然后，我在需要我渲染 fullcalendar 的页面上使用它，如下所示：

//somescript.js

...
var calendar = new window.Calendar($('#calendar').get(0), {
  plugins: [window.interaction, window.dayGridPlugin, window.timeGridPlugin, window.listPlugin],
  selectable: true,
  initialView: 'dayGridMonth',
  eventBorderColor: 'white',
  eventClick: info => { ... },
  dateClick: info => { ... },
  select: info => { ... }
  ...
});

calendar.render();

...

对于造型，

  //app.scss

  // Variables
  @import 'variables';

  // Fullcalendar
  @fullcalendar/core/main.css;
  @fullcalendar/daygrid/main.css;
  @fullcalendar/timegrid/main.css;
  @fullcalendar/list/main.css;

Answer 2

这行应该是：

var calendar = new FullCalendar.Calendar(calendarEl, {

改为这样：

var calendar = new Calendar(calendarEl, {

这就是我通过查看https://fullcalendar.io/docs/initialize-es6

收集到的信息

这是一个很好的例子： https://github.com/fullcalendar/fullcalendar-example-projects/blob/master/webpack/src/main.js

Answer 3

在带有 Vite 的 Laravel 10 中，这对我有用，首先使用 npm 安装 fullcalendar lib

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

然后在app.js中添加这个

import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import listPlugin from '@fullcalendar/list';

window.Calendar = Calendar;
window.dayGridPlugin = dayGridPlugin;
window.timeGridPlugin = timeGridPlugin;
window.listPlugin = listPlugin;

最终创建一个这样的页面

@extends('layouts.theme.app')

@section('content')
    <div class="row justify-content-center">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Calendar</h5>

                    <div id='calendar'></div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('JS')
    <script>
        document.addEventListener('DOMContentLoaded', function(){
            const calendarEl = document.getElementById('calendar')
            const calendar = new Calendar(calendarEl, {
                plugins: [dayGridPlugin],
                locale: esLocale,
                headerToolbar: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
                }
            })
            calendar.render()
        });
    </script>
@endpush