嗨FullCalendar偷看 .
我们在整合FullCalendar和FullCalendar Scheduler时遇到问题：
我们正在使用日历来 Build 一个人们可以预订房间的预订系统 . 如果有过去的预订，包括今天，然后结账将来，则会出现问题 .
假设今天是2017年7月19日，预订时间为2017年7月16日至7月22日 .
当我们加载任何视图（timelineDay，timelineWeek，timeline2Week）时，如果今天（当天）它们“跨越”，我们就不会看到数据中存在的事件 .
FullCalendar JS on page
$( document ).ready(function() {
$('#calendar').fullCalendar({
schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
///// Options
editable: true,
height: 'auto',
header: {
left: 'today prev,next',
center: 'title',
right: 'timelineDay,timelineWeek,timeline2Week,timelineMonth,timelineYear'
},
allDayDefault: true,
eventOverlap: false,
navLinks: true,
resourceAreaWidth: '15%',
resourceLabelText: 'Rooms',
///// Creates views to use.
views: {
timelineDay: {
slotDuration: {days: 1}
},
timelineWeek: {
slotDuration: {days: 1}
},
timeline2Week: {
type: 'timelineWeek',
duration: { days: 14 },
slotDuration: {days: 1}
}
},
defaultView: 'timeline2Week',
///// Collection of Rooms
resources: '{{route('api.rooms')}}',
///// Collection of Reservations
events: '{{route('api.calendar')}}',
///// Creates popover of reservation info.
eventRender: function(event,element) {
$(element).popover({
title: function() {
return "<strong>" + event.full_name + "</strong>";
},
placement: 'auto',
html: true,
trigger: 'hover',
animation: 'true',
content: function() {
return "<p># Guests: <strong>" + event.guest_count + "</strong><br>Total: <strong>" + event.total + "</strong><br>Paid: <strong class=\"at-lime\">" + event.paid + "</strong><br>Owes: <strong class=\"at-orange\">" + event.owes + "</strong><br>Check In: <strong>" + event.checkin + "</strong><br>Check Out: <strong>" + event.checkout + "</strong></p>"
},
container: 'body'
}).popover('show');
$('.popover.in').remove();
if(event.lock_room == 1){
element.find(".fc-title").prepend("<i class='fa fa-lock'></i> ");
}
},
///// Select a date range to start a new reservation.
selectable: true,
selectHelper: true,
selectOverlap: false,
select: function(start, end, jsEvent, view, resourceObj) {
// Set checkin date
var checkin = start.format();
// Set checkout date
var checkout = end.format();
// alert('Checkin: ' + checkin + ' :: Checkout: ' + checkout);
// Set room_id
var room_id = resourceObj.id;
// Create url to new reservatin page
var url = "{{ route('reservations.create') }}?room_id=" + room_id + "&checkin=" + checkin + "&checkout=" + checkout + "";
// Send to new reservation page
window.location.href = url;
},
});
});
Sample from Events Feed 此示例包含一个保留三个不同房间的预留（id：10）（resourceId：1，resourceId：8，resourceId：5） .
{
"id": 10,
"resourceId": 1,
"start": "2017-07-16",
"end": "2017-07-22",
"title": "Fulchiron, R",
"guest_count": 4,
"paid": "$2,655.00",
"total": "$5,734.80",
"owes": "$3,079.80",
"checkin": "Sun, Jul 16th",
"checkout": "Sat, Jul 22nd",
"full_name": "Richard Fulchiron",
"lock_room": 1,
},
{
"id": 10,
"resourceId": 8,
"start": "2017-07-16",
"end": "2017-07-22",
"title": "Fulchiron, R",
"guest_count": 4,
"paid": "$2,655.00",
"total": "$5,734.80",
"owes": "$3,079.80",
"checkin": "Sun, Jul 16th",
"checkout": "Sat, Jul 22nd",
"full_name": "Richard Fulchiron",
"lock_room": 1,
},
{
"id": 10,
"resourceId": 5,
"start": "2017-07-16",
"end": "2017-07-22",
"title": "Fulchiron, R",
"guest_count": 4,
"paid": "$2,655.00",
"total": "$5,734.80",
"owes": "$3,079.80",
"checkin": "Sun, Jul 16th",
"checkout": "Sat, Jul 22nd",
"full_name": "Richard Fulchiron",
"lock_room": 1,
}
如果预订的开始日期在当前视图上，则会正确显示预约（事件），如此处所示 .
然而，如果预订的开始日期在当前视图之前，则预约不会显示，如此处所示 .
由于我们的默认日历加载日期显示在日历的最左侧，因此我们没有看到当前的预订 .
我确信我们错过了一些简单的设置或忽略了一些东西 . 然而，我们还没有到底 .
在我创造一个小提琴之前，我想知道是否有人有一个快速回答 .
先感谢您 .