FullCalendar 将长事件重新定义为全天事件答案

【问题标题】：FullCalendar redefine a long event as an all day eventFullCalendar 将长事件重新定义为全天事件
【发布时间】：2018-07-22 23:44:21
【问题描述】：

我正在使用 FullCalendar 和 iCalendar2FullCalendar 从我们的各种 iCloud 帐户中输入 .ICS 文件。这非常适合渲染我们共享日历中的所有事件。

我正在制作一个小型显示器，并使用“agendaDay”视图。我喜欢将全天活动放在顶部，并且可以在下面看到任何日程安排冲突。

但是，我有一些活动会持续数天，例如从周五 1700 小时到周日 1900 小时，我的女儿会和我在一起。在agendaDay 视图中，这将在整个星期六的每个小时内显示为一个实心条，我想知道是否有办法将某个持续时间的事件呈现为全天事件？

我使用了 eventRender 回调，但是虽然我能够更改事件属性，但事件仍然呈现，就好像从未进行过更改一样。

这是我的代码，在这个版本中，我应用了一个固定的日期，希望它会作为一个全天的活动，但没有运气！：

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


            eventRender: function(event, element, view) { 

                var dur = event.end - event.start; //event duration
                var days = dur / 86400000;

                if(days > 1 || event.end == null){ // needs altering to show as all day event.

                    console.log('long event - all day?' + event.allDay);
                    event.allDay = true;
                    console.log(event.title + ' - all day?' + event.allDay);            

                            console.log(event.title + ' - starts:' + EpochToDate(event.start));         
                            console.log(event.title + ' - ends:' + EpochToDate(event.end)); 

                     event.start = '2018-07-23T10:00:00';   
                     event.end = '2018-07-24T10:00:00';
                     console.log (event);
                 }
             }    
            });
        })

【问题讨论】：

麻烦的是一天1700到另一天1900意味着第一天和最后一天不是“整天”。 fullCalendar 术语中的“全天”事件必须是一天或几天，其中事件在所有天中覆盖全天。所以...如果您很高兴失去 1700 和 1900 的细节，您可以简单地使用 allDay: true 标记事件并获得简化的显示。如果您需要显示这些时间，那么您别无选择，只能接受它将显示为简单的长时间运行的定时事件。
PS，您在 eventRender 中所做的更改失败，因为 eventRender 的目的是您从event 的属性中读取并写入到element，这是已经基于 event 数据构建的 HTML 元素，很快就会呈现到日历上。这个想法是允许您更新 HTML，而不是事件。 fullCalendar 已经使用了该事件，并且在此之后将忽略它。这只是您使用该事件和自定义 HTML 的机会。 fullcalendar.io/docs/eventRender 解释：“eventRender 回调函数可以修改element”
如果要自定义事件数据本身，请使用eventDataTransform，它在事件呈现之前运行。在为该事件创建 HTML 时，fullCalendar 将看到您在此处对事件数据所做的任何更改。见fullcalendar.io/docs/eventDataTransform
感谢 AD，今晚将给 eventDataTransform 一个机会。我能够更改element 的某些属性，例如innerText 然后被渲染。
当事件源为.ICS文件时eventDataTransform是否仍会触发，像$('#calendar').fullCalendar('addEventSource', fc_events(this.response, ics.event_properties))这样加载？

标签： fullcalendar

【解决方案1】：

感谢@ADyson，这是我最后使用的。

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

    });

【讨论】：