Fullcalendar：在 allDay 事件中显示多天事件？

Question

我正在使用全日历版本 3.6.2 处理一些事件。

$('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay,listWeek'
            },
            editable: true,
            eventLimit: true, // allow "more" link when too many events
            navLinks: true,
            nextDayThreshold: '00:00:00', // 9am
            events: [
               {
                    title: 'Tesst tesst',
                    allDay: false,
                    start: '2017-11-12T08:00:00',
        end: '2017-11-13T15:00:00'
                },
                {
        title: 'Birthday Party',
        start: '2017-11-19T10:00:00',
        end: '2017-11-21T06:00:00'
    },
                {
                    title: 'All Day Event',
                    allDay:true,
                    start: TOMORROW,
                    end: TOMORROW
                },
                {
                    title: 'Long Event',
                        start: '2017-11-07T10:00:00',
        end: '2017-11-10T06:00:00'
                },
                {
                    title: 'Conference',
                        start: '2017-11-26T10:00:00',
        end: '2017-11-28T04:00:00'
                },
                {
                    title: 'Meeting',
                    allDay: true,
                    start: TODAY + 'T10:30:00',
                    end: TODAY + 'T12:30:00'
                },
            ]
        });

我的笨蛋：demo

我想像 Allday 事件一样在议程周/agendaDay 的全天事件中显示长事件。

有什么办法吗？

非常感谢！

Answer 1

遇到类似问题，试试这个：

eventDataTransform 是这里的关键，它允许您在数据呈现到日历之前对其进行操作。

在我的示例中，因为在我们的日历上创建事件的其他人经常创建多天事件，然后占据agendaDay 视图中的大部分屏幕，所以我选择将这些事件重新分类为全天事件，将它们重新定位到视图的顶部。

我已选择将 >=5 小时的任何活动重新分类为全天活动。 抓住eventData.end == null 也很重要！

对于需要将结束日期重新定义为第二天早上午夜的事件，需要进一步确定多日事件。这在例如多日活动在最后一天的 1500 小时结束时很有用，这也将作为全天活动移至顶部。没有这项修正，最后一天将被切断。这里有更多信息：FullCalendar - Event spanning all day are one day too short

 $('#calendar').fullCalendar({
          header: {
                left: 'prev,next today',
                center: '',
                right: 'month,agendaWeek,agendaDay'
            },
          defaultView: 'month',
          editable: false,
          aspectRatio: 0.77,
        eventDataTransform: function (eventData) {

                var dur = eventData.end - eventData.start; //total event duration

                if(dur >= 18000000 || eventData.end == null){ // 5 hours

                        eventData.allDay = true;


                        //eventData.end needs ammending to 00:00:00 of the next morning
                        if (dur > 86400000) {


                        var m = moment(eventData.end);
                        var roundDown = m.startOf('day');
                        var day2 = moment(roundDown).add(1, 'days')

                        eventData.end = day2.toString();

                        }

                }

            return(eventData);  
        },

    });