如何以全日历显示全天时段的小时和分钟

Question

我正在尝试创建一个全日历视图，以显示某些人何时下班。

人们可能与世隔绝。第二天从10:00 AM到09:00 AM，我想在allDay时段以全日历显示该事件，并以标题的形式显示该事件的开始和结束。

如果我在事件上设置allDay属性，它将在allDay插槽中显示该事件，但它将开始和结束显示为“ 00:00”，而不是“ 10:00”和“ 09:00”

我尝试过的另一个选项是在名为isDayOff的事件对象上设置自定义属性，然后在eventRender-callback中设置呈现事件的标准allDay属性。这似乎可行，但该事件不会在加载时显示在allDay-slot中，而仅在前后前后单击然后返回时才显示在allDay-slot中。

如何创建此视图？

我创建了一个小提琴来举例说明：http://jsfiddle.net/2ptqe5na/31

$(document).ready(function() {

        $('#calendar').fullCalendar({
            header: {
                left: '',
                center: 'title'
            },
            defaultDate: '2018-07-23',
            defaultView: 'agendaDay',
            events: [
                {
                    title: 'A',
                    start: '2018-07-23T10:00:00',
                    end: '2018-07-24T09:00:00',
                    allDay: true //standard property
                },
                {
                    title: 'B',
                    start: '2018-07-23T08:00:00',
                    end: '2018-07-23T08:30:00',
                    isDayOff: true //custom property
                }
            ],
            eventClick: function(calEvent, jsEvent, view) {
               alert('Event: ' + calEvent.title);
            },
            eventRender: function(event, element, view)
            {
              if(event.isDayOff==true)
              {
                event.allDay = event.isDayOff;
              }

              event.title = event.title+"\n "+event.start.format('MMM DD HH:mm')+" - "+event.end.format('MMM DD HH:mm');
          }
        });
});