Question

你好FullCalendar偷看。

我们在整合FullCalendar和FullCalendar Scheduler方面遇到了问题：

我们正在使用日历建立一个人们可以预订房间的预订系统。如果预订从过去开始，包括今天，然后结账将来，就会出现问题。

我们假设今天是2017年7月19日，预订时间为2017年7月16日至2017年7月22日。

当我们加载任何视图（timelineDay，timelineWeek，timeline2Week）时，如果今天（当天）它们“跨越”，我们就不会看到数据中存在的事件。

页面上的FullCalendar JS

$( 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;
    },
  });
});

来自事件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,
    }

如果预订的开始日期在当前视图上，则预订（事件）会正确显示。

然而，如果预订的开始日期在当前视图之前，则预订完全不显示。

由于我们的默认日历加载日期显示在日历的最左侧，因此我们没有看到当前的预订。

我确信我们错过了一些简单的设置或忽略了一些东西。然而，我们还没有深究其中。

在我创造一个小提琴之前，我想知道是否有人快速回答。

提前谢谢。

如果开始日期在今天之前，则不显示FullCalendar事件，但事件跨越到未来

0 个答案: