我在stackoverflow上经历了几个类似的问题。但是，我无法得到他们的帮助。这是我的问题：
我需要在单页上有多个日历。但是，目前只有第一个渲染日历正常工作。例如，如果我有三个具有不同ID的日历：
#calendarug1, #calendarug2, #calendarug3
假设在html页面中声明它们的顺序是
#calendarug3 #calendarug2 #calendarug1 然后仅在#calendarug3事件上，例如拖放，选择正常工作。在其他日历上，我无法创建新事件或删除新事件。
这是我的代码
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 calendarbox">
<div class="row well calendar">
<h3 >UG3 Timetable</h3>
<div id='calendarug3'>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 calendarbox">
<div class="row well calendar">
<h3 >UG2 Timetable</h3>
<div id='calendarug2'>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 calendarbox">
<div class="row well calendar">
<h3 >UG1 Timetable</h3>
<div id='calendarug1'>
</div>
</div>
</div>
</div>
</div>
$('#calendarug3').fullCalendar({
// put your options and callbacks here
header: { // Display nothing at the top
left: '',
center: '',
right: ''
},
theme: true,
//aspectRatio: 2.44,
//eventSources: ['events.php'],
height: 520, // Fix height
columnFormat: 'dddd', // Display just full length of weekday, without dates
defaultView: 'agendaWeek', // display week view
hiddenDays: [0,], // hide Saturday and Sunday
weekNumbers: false, // don't show week numbers
minTime: '8:30:00', // display from 16 to
maxTime: '19:00:00', // 23
slotDuration: '00:30:00', // 15 minutes for each row
allDaySlot: false, // don't show "all day" at the top
selectable: true,
editable: true,
defaultDate: '2016-10-10',
droppable: true, // this allows things to be dropped onto the calendar
selectHelper: true,
select: function(start, end, jsEvent) {
var title = prompt('Event Title:');
var eventData;
if (title) {
eventData = {
title: title,
start: start,
end: end
};
$('#calendarug3').fullCalendar('renderEvent', eventData, true); // stick? = true
}
$('#calendarug3').fullCalendar('unselect');
},
//select: function(start, end, allDay) {
// Code for creating new events.
// alert("Create new event at " + start);
//},
eventResize: function( event, delta, revertFunc, jsEvent, ui, view ) {
// Code when you resize an event (for example make it two hours longer
alert("I just got resized!");
},
eventDrop: function( event, jsEvent, ui, view ) {
// Code when you drop an element somewhere else
alert("I'm somewhere else now");
},
drop: function() {
// is the "remove after drop" checkbox checked?
console.log('calendar 3 viewRender');
if ($('#drop-remove3').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
}
//defaultView : 'agendaSixDay'
});
////////////////////////////////////////////////////////////////
$('#calendarug2').fullCalendar({
// put your options and callbacks here
header: { // Display nothing at the top
left: '',
center: '',
right: ''
},
theme: true,
//aspectRatio: 2.44,
//eventSources: ['events.php'],
height: 520, // Fix height
columnFormat: 'dddd', // Display just full length of weekday, without dates
defaultView: 'agendaWeek', // display week view
hiddenDays: [0,], // hide Saturday and Sunday
weekNumbers: false, // don't show week numbers
minTime: '8:30:00', // display from 16 to
maxTime: '19:00:00', // 23
slotDuration: '00:30:00', // 15 minutes for each row
allDaySlot: false, // don't show "all day" at the top
selectable: true,
editable: true,
defaultDate: '2016-10-10',
droppable: true, // this allows things to be dropped onto the calendar
selectHelper: true,
select: function(start, end, jsEvent) {
var title = prompt('Event Title:');
var eventData;
if (title) {
eventData = {
title: title,
start: start,
end: end
};
$('#calendarug2').fullCalendar('renderEvent', eventData, true); // stick? = true
}
$('#calendarug2').fullCalendar('unselect');
},
//select: function(start, end, allDay) {
// Code for creating new events.
// alert("Create new event at " + start);
//},
eventResize: function( event, delta, revertFunc, jsEvent, ui, view ) {
// Code when you resize an event (for example make it two hours longer
alert("I just got resized!");
},
eventDrop: function( event, jsEvent, ui, view ) {
// Code when you drop an element somewhere else
alert("I'm somewhere else now");
},
drop: function() {
// is the "remove after drop" checkbox checked?
console.log('calendar 2 viewRender');
if ($('#drop-remove2').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
}
//defaultView : 'agendaSixDay'
});
$('#calendarug1').fullCalendar({
// put your options and callbacks here
header: { // Display nothing at the top
left: '',
center: '',
right: ''
},
theme: true,
//aspectRatio: 2.44,
//eventSources: ['events.php'],
height: 520, // Fix height
columnFormat: 'dddd', // Display just full length of weekday, without dates
defaultView: 'agendaWeek', // display week view
hiddenDays: [0,], // hide Saturday and Sunday
weekNumbers: false, // don't show week numbers
minTime: '8:30:00', // display from 16 to
maxTime: '19:00:00', // 23
slotDuration: '00:30:00', // 15 minutes for each row
allDaySlot: false, // don't show "all day" at the top
selectable: true,
editable: true,
defaultDate: '2016-10-10',
droppable: true, // this allows things to be dropped onto the calendar
selectHelper: true,
select: function(start, end, jsEvent) {
var title = prompt('Event Title:');
var eventData;
if (title) {
eventData = {
title: title,
start: start,
end: end
};
$('#calendarug1').fullCalendar('renderEvent', eventData, true); // stick? = true
}
$('#calendarug1').fullCalendar('unselect');
},
//select: function(start, end, allDay) {
// Code for creating new events.
// alert("Create new event at " + start);
//},
eventResize: function( event, delta, revertFunc, jsEvent, ui, view ) {
// Code when you resize an event (for example make it two hours longer
alert("I just got resized!");
},
eventDrop: function( event, jsEvent, ui, view ) {
// Code when you drop an element somewhere else
alert("I'm somewhere else now");
},
drop: function() {
// is the "remove after drop" checkbox checked?
console.log('calendar 1 viewRender');
if ($('#drop-remove1').is(':checked')) {
// if so, remove the element from the "Draggable Events" list`enter code here`
$(this).remove();
}
}
//defaultView : 'agendaSixDay'
});
///////////////////////////////////////////////////////////////////////