问题描述
我对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项目的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!