我正在使用FullCalender 1.9 版本。那太旧了。但我受此约束。
现在的问题是，我正在输入超过 2000 个的完整数据。所以我的日历需要很长时间才能加载。所以我决定当我们点击 Today , Next , PREV , Month 按钮时，它会调用一个 ajax 请求，数据将从后端服务器加载。
我使用了很多解决方案，但没有任何解决方案适合我。我参考了这个jquery fullcalendar how to load events on next and previous button click 但无法理解。
请帮我。
我的 JS 代码是
$(function () { // document ready
$('#calendar').fullCalendar({
viewRender: function(view, element) { },
eventClick: function (calEvent, jsEvent, view) {
$(this).css('border-color', 'yellow');
url = '{{ route("boking-details", 'XXX') }}'.replace('XXX', calEvent.id);
$.fancybox.destroy();
element = '<a id="openFancybox" data-type="ajax" data-src="' + url + '" href="javascript:;"></a>'
$(".element").html(element);
$("#openFancybox").fancybox();
$("#openFancybox").click();
},
/*eventDrop: function (event, delta, revertFunc) {
if (confirm("Are you sure about this change?"+ " was dropped on " + event.start.format())) {
changeBooking(event, delta, revertFunc);
}
},*/
eventDrop: function(event, delta, revertFunc, jsEvent, ui, view) {
if (confirm("This booking has now been moved."+ " with booking time " + event.start.format() )) {
changeBooking(event, delta, revertFunc);
//savedrop(event.id,event.start,event.end);
} else {
$('.popover').popover('hide');
revertFunc();
}
},
eventRender: function(eventObj, $el) {
$el.popover({
title: eventObj.title,
content: eventObj.description,
trigger: 'hover',
placement: 'top',
container: 'body'
});
},
/*//latest
eventMouseover: function( event, jsEvent, view ) {
var item = $(this);
if(item.find('.nube').length == 0){
var info = '<span class="nube"><h2>'+event.title+'</h2> <p class="text">'+event.description+'</p></span>';
item.append(info);
}
if(parseInt(item.css('top')) <= 200){
item.find('.nube').css({'top': 20,'bottom':'auto'});
item.parent().find('.fc-event').addClass('z0');
}
item.find('.nube').stop(true,true).fadeIn();
},
eventMouseout: function( event, jsEvent, view ) {
var item = $(this);
item.find('.nube').stop(true,true).fadeOut();
},*/
/*eventMouseover: function (calEvent, jsEvent) {
var xOffset = 0;
var yOffset = 0;
var tiptext;
//var view = $('#calendar').fullCalendar('getView');
//tiptext = "<strong>" + calEvent.title + "</strong>" + "<br>" + tiptext;
$("body").append("<p class='btn btn-secondary' data-toggle='tooltip' data-placement='top' id='tooltip'> <strong>" + calEvent.title + "</strong>" + "<br>" + calEvent.description + "</p>");
$("#tooltip")
.css("z-index", 91000)
.css("position", "absolute")
.css("top", ($(this).offset().top + $(this).outerHeight() + yOffset) + "px")
.css("left", ($(this).offset().left + xOffset) + "px")
.fadeIn(400);
},
eventMouseout: function (calEvent, jsEvent) {
$("#tooltip").remove();
},*/
timeFormat : "H(:mm)",
//slotLabelFormat:"HH:mm",
displayEventTime: false,
// now: '2018-11-07',
editable: true, // enable draggable events
dragRevertDuration: 1000,
aspectRatio: 2.5,
scrollTime: '10:00', // undo default 6am scrollTime
//slotLabelFormat: 'h(:mm)a',
//minTime: '06:30:00',
//maxTime: '19:30:00',
slotDuration: '00:15:00',
slotLabelInterval: 15,
//lazyFetching: true,
header: {
left: 'today, prev,next',
center: 'title',
right: 'timelineMonth,timelineWeek,timelineDay'
},
defaultView: 'timelineMonth',
views: {
timelineThreeDays: {
type: 'timeline',
duration: {days: 3}
},
timelineWeek: {
type: 'timeline',
dayOfMonthFormat: 'ddd DD/MM',
//titleFormat: '(d MMMM yyyy)'
//titleFormat:"HH",
},
timelineDay: {
type: 'timeline',
//timeFormat: 'H:mm',
slotLabelFormat:"HH",
}
},
resourceLabelText: 'Drivers',
resources: <?= json_encode($resources) ?>,
events: <?= json_encode($events) ?>
});
});