我正在尝试在fullcalendar中创建一个视图,以显示某些人何时下班 .

人们可能会离开例如 . 第二天上午10:00到09:00,我想在fullcalendar中的allDay-slot中显示该事件,并将该事件的开始和结束显示为 Headers 的一部分 .

如果我在事件上设置allDay属性,它将在allDay-slot中显示事件,但它将开头和结尾显示为'00:00'而不是'10:00'和'09:00' .

我尝试过的另一个选项是在名为isDayOff的事件对象上设置自定义属性,然后在eventRender-callback中设置渲染事件的标准allDay属性 . 这似乎有效,但事件不会在加载的allDay插槽中呈现,而是仅在向前或向后点击上一个/下一天然后返回时在allDay插槽中呈现 .

如何创建此视图?

我创造了一个小提琴来举例说明: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');
          }
        });
});