通过NPM安装FullCalendar到laravel项目

4ioopgfo 于 9个月前发布在其他

关注(0)|答案(3)|浏览(141)

我对Laravel和Web Packs还很陌生。
我正在尝试通过NPM将FullCalendar安装到我的Laravel项目中-以前我一直在使用cdnjs中的includes，但我想学习另一种方法。到目前为止，我所做的是：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，重新编译了很多次，改变了我的代码顺序..什么都不管用。我错过了什么？x1c 0d1x

npm

来源：https://stackoverflow.com/questions/67049555/install-fullcalendar-via-npm-to-laravel-project

3条答案

按热度按时间

rggaifut1#

我有类似的问题，让我的工作方式：

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

型

赞(0）回复(0）举报 9个月前

bn31dyow2#

如果这一行：

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

赞(0）回复(0）举报 9个月前

suzh9iv83#

在Laravel 10 with Vite中，这对我来说很有效，首先使用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

型

赞(0）回复(0）举报 9个月前

我来回答

通过NPM安装FullCalendar到laravel项目

3条答案

相关问题

热门标签

最新问答