FullCalendar将长事件重新定义为全天事件
我正在使用FullCalendar和iCalendar2FullCalendar从我们的各种iCloud帐户输入.ICS文件。这非常适用于呈现我们共享日历中的所有事件 我正在做一个小显示,并使用“agenday”视图。我喜欢把全天的活动放在最上面,可以看到下面的任何日程冲突 然而,我有一些活动会持续好几天,例如从周五17点到周日19点,我的女儿会和我在一起。在Agenday视图中,这将在整个周六的每一个小时内显示为一个实心条,我想知道是否有一种方法可以将某个时间段内的事件渲染为全天事件 我已经使用了eventRender回调,但尽管我能够更改事件属性,但事件仍会呈现,就好像从未进行过更改一样 这是我的代码,在这次修订中,我应用了一个固定的日期,希望它能成为一个全天的活动,但没有运气FullCalendar将长事件重新定义为全天事件,fullcalendar,Fullcalendar,我正在使用FullCalendar和iCalendar2FullCalendar从我们的各种iCloud帐户输入.ICS文件。这非常适用于呈现我们共享日历中的所有事件 我正在做一个小显示,并使用“agenday”视图。我喜欢把全天的活动放在最上面,可以看到下面的任何日程冲突 然而,我有一些活动会持续好几天,例如从周五17点到周日19点,我的女儿会和我在一起。在Agenday视图中,这将在整个周六的每一个小时内显示为一个实心条,我想知道是否有一种方法可以将某个时间段内的事件渲染为全天事件 我已经使
$('#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);
}
}
});
})
这是我在最后使用的,多亏了@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);
},
});
麻烦的是,从一天的1700到另一天的1900,意味着第一天和最后一天并不是“全天”。根据fullCalendar的条款,“全天”活动必须是一天,或者是几天,其中活动涵盖所有日期的全天。因此,如果您很高兴丢失1700和1900的细节,您可以使用
allDay:true
标记事件,并获得简化的显示。如果您需要显示这些时间,那么除了接受它将仅显示为一个长时间运行的定时事件之外,您别无选择。另外,您在eventRender中所做的更改将失败,因为eventRender的目的是读取事件的属性并写入元素,它是已经基于事件
数据构建的HTML元素,很快将呈现在日历上。其思想是允许您更新HTML,而不是事件。fullCalendar已使用该事件,并将在此之后忽略它。这只是您使用事件和定制HTML的机会。解释:“调用eventRender
函数可以修改元素
”如果要自定义事件数据本身,请使用eventDataTransform
,该函数在呈现事件之前运行。fullCalendar在为该事件创建HTML时,将看到您对此处事件数据所做的任何更改。看感谢广告,今晚将试一试eventDataTransform
。我能够更改元素
的某些属性,例如随后呈现的innerText
。当事件源为.ICS文件时,eventDataTransform
是否仍会触发,加载方式如下:$(“#日历”).fullCalendar('addEventSource',fc_事件(this.response,ICS.event_属性))
?