我正在使用此模板AdminLte v3，并且正在尝试在Symfony项目上导入此calendar.html文件中使用的所有JS插件/库。我正在使用Webpack Encore，因此我所有的JS都位于1个文件上，并链接到用于视图的模板。
加载FullCalendar的JS代码是这样：
$(function () {
/* initialize the external events
-----------------------------------------------------------------*/
function ini_events(ele) {
ele.each(function () {
// create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
// it doesn't need to have a start or end
var eventObject = {
title: $.trim($(this).text()) // use the element's text as the event title
}
// store the Event Object in the DOM element so we can get to it later
$(this).data('eventObject', eventObject)
// make the event draggable using jQuery UI
$(this).draggable({
zIndex : 1070,
revert : true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
})
})
}
ini_events($('#external-events div.external-event'))
/* initialize the calendar
-----------------------------------------------------------------*/
//Date for the calendar events (dummy data)
var date = new Date()
var d = date.getDate(),
m = date.getMonth(),
y = date.getFullYear()
var Calendar = FullCalendar.Calendar;
var Draggable = FullCalendarInteraction.Draggable;
var containerEl = document.getElementById('external-events');
var checkbox = document.getElementById('drop-remove');
var calendarEl = document.getElementById('calendar');
// initialize the external events
// -----------------------------------------------------------------
new Draggable(containerEl, {
itemSelector: '.external-event',
eventData: function(eventEl) {
console.log(eventEl);
return {
title: eventEl.innerText,
backgroundColor: window.getComputedStyle( eventEl ,null).getPropertyValue('background-color'),
borderColor: window.getComputedStyle( eventEl ,null).getPropertyValue('background-color'),
textColor: window.getComputedStyle( eventEl ,null).getPropertyValue('color'),
};
}
});
var calendar = new Calendar(calendarEl, {
plugins: [ 'bootstrap', 'interaction', 'dayGrid', 'timeGrid' ],
header : {
left : 'prev,next today',
center: 'title',
right : 'dayGridMonth,timeGridWeek,timeGridDay'
},
'themeSystem': 'bootstrap',
//Random default events
events : [
{
title : 'All Day Event',
start : new Date(y, m, 1),
backgroundColor: '#f56954', //red
borderColor : '#f56954', //red
allDay : true
},
{
title : 'Long Event',
start : new Date(y, m, d - 5),
end : new Date(y, m, d - 2),
backgroundColor: '#f39c12', //yellow
borderColor : '#f39c12' //yellow
},
{
title : 'Meeting',
start : new Date(y, m, d, 10, 30),
allDay : false,
backgroundColor: '#0073b7', //Blue
borderColor : '#0073b7' //Blue
},
{
title : 'Lunch',
start : new Date(y, m, d, 12, 0),
end : new Date(y, m, d, 14, 0),
allDay : false,
backgroundColor: '#00c0ef', //Info (aqua)
borderColor : '#00c0ef' //Info (aqua)
},
{
title : 'Birthday Party',
start : new Date(y, m, d + 1, 19, 0),
end : new Date(y, m, d + 1, 22, 30),
allDay : false,
backgroundColor: '#00a65a', //Success (green)
borderColor : '#00a65a' //Success (green)
},
{
title : 'Click for Google',
start : new Date(y, m, 28),
end : new Date(y, m, 29),
url : 'http://google.com/',
backgroundColor: '#3c8dbc', //Primary (light-blue)
borderColor : '#3c8dbc' //Primary (light-blue)
}
],
editable : true,
droppable : true, // this allows things to be dropped onto the calendar !!!
drop : function(info) {
// is the "remove after drop" checkbox checked?
if (checkbox.checked) {
// if so, remove the element from the "Draggable Events" list
info.draggedEl.parentNode.removeChild(info.draggedEl);
}
}
});
calendar.render();
// $('#calendar').fullCalendar()
/* ADDING EVENTS */
var currColor = '#3c8dbc' //Red by default
//Color chooser button
var colorChooser = $('#color-chooser-btn')
$('#color-chooser > li > a').click(function (e) {
e.preventDefault()
//Save color
currColor = $(this).css('color')
//Add color effect to button
$('#add-new-event').css({
'background-color': currColor,
'border-color' : currColor
})
})
$('#add-new-event').click(function (e) {
e.preventDefault()
//Get value and make sure it is not null
var val = $('#new-event').val()
if (val.length == 0) {
return
}
//Create events
var event = $('<div />')
event.css({
'background-color': currColor,
'border-color' : currColor,
'color' : '#fff'
}).addClass('external-event')
event.html(val)
$('#external-events').prepend(event)
//Add draggable funtionality
ini_events(event)
//Remove event from text input
$('#new-event').val('')
})
})如您所见，它需要Jquery以及属于该插件的多个对象和方法，所以我这样导入了它们：
var $ = require('jquery');
import * as FullCalendar from 'admin-lte/plugins/fullcalendar/main.js';
import * as bootstrap from 'admin-lte/plugins/fullcalendar-bootstrap/main.js';
import * as interaction from 'admin-lte/plugins/fullcalendar-interaction/main.js';
import * as dayGrid from 'admin-lte/plugins/fullcalendar-daygrid/main.js';
import * as timeGrid from 'admin-lte/plugins/fullcalendar-timegrid/main.js';但是我收到此错误：error in browser console
我也这样尝试过，但仍然无法正常工作：
var $ = require('jquery');
var FullCalendar = require('admin-lte/plugins/fullcalendar/main');
var bootstrap = require('admin-lte/plugins/fullcalendar-bootstrap/main');
var interaction = require('admin-lte/plugins/fullcalendar-interaction/main');
var dayGrid = require('admin-lte/plugins/fullcalendar-daygrid/main');
var timeGrid = require('admin-lte/plugins/fullcalendar-timegrid/main');我想念什么吗？
我终于找到了答案。我的方法很糟糕，我不应该照原样复制该代码。
[有一个示例在official documentation和their official repo on github中做我想要的事情。
这里是一个示例：
import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new Calendar(calendarEl, {
plugins: [ dayGridPlugin ]
});
calendar.render();
});