通过NPM将FullCalendar安装到laravel项目 [英] install FullCalendar via NPM to laravel project

问题描述

我对Laravel和Web Pack还是陌生的.

我正在尝试通过NPM将FullCalendar安装到我的Laravel项目中-以前我一直在使用cdnjs中的include，但是我想学习另一种方法.到目前为止，我所做的是:

解决方案

此行是否应如此:

  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

I am still new to Laravel and web packs.

I am trying to install FullCalendar via NPM into my Laravel project - Previously I have been working with includes from cdnjs, but I want to learn the other way. What I have done so far is: https://fullcalendar.io/docs/initialize-es6

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

Then I updates my app.js in Laravel to

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

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

I also updates app.css

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

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

Then I ran

npm run dev

In blade file, I re-use the code from when I was working with script file from cdnjs. I added the updated app.js file, which was compiled through 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>

The error I get is:

I don't understand why, and I have been playing around with app.js and re-compiling it a bunch of times and changing order of my code.. nothing works. What am I missing?

解决方案

Should this line:

var calendar = new FullCalendar.Calendar(calendarEl, {

Be changed to this:

var calendar = new Calendar(calendarEl, {

Thats what I gather from looking over https://fullcalendar.io/docs/initialize-es6

Here is a good example: https://github.com/fullcalendar/fullcalendar-example-projects/blob/master/webpack/src/main.js

这篇关于通过NPM将FullCalendar安装到laravel项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！