fullCalendar多日活动开始和结束时间 [英] fullCalendar multi-day event start and end times
问题描述
多天事件很少有一个开始和一个结束时间。例如，伯明翰动漫公司可能会持续3天，但你不能在1上午！它对事件运行的三天中的每一天都有独立的开始和结束时间。我还没有找到关于每个事件的多次开始和结束时间的文档，还有其他人吗？
我如何做到这一点，以防万一任何人看到这一点，并在相同的功能之后，通过添加'eventlength'和'firstend'，'secondstart'，'secondend'，'thirdstart'作为JSON值。这适用于我，因为我的任何活动都不会超过三天。 'eventlength'只是一个数字（1,2或3），其余的是时间/日期。
在fullCalendars eventClick部分，我有一个if语句循环
$ startDf ='ddd Do H：mma';可能的事件长度并显示适当的值。
$ endDf ='H：mma'; （calEvent.eventlength == 2）{
$ this.find（'＃event__info .event-date'）。text（（calEvent.start）.format（$ startDf）
if +' - '+ moment（calEvent.firstend）.format（$ endDf）+'\\\
'+ moment（calEvent.seccondstart）.format（$ startDf）+' - '+（calEvent.end）.format（$ （calEvent.start）.format（$（））;}
else if（calEvent.eventlength == 3）{
$ this.find（'＃event__info .event-date'）。text（（calEvent.start）.format（$ startDf）+' - '+ moment（calEvent.firstend）.format（$ endDf）+'\ n'+ moment（calEvent.seccondstart）.format（$ startDf）+' - '+ moment（calEvent.seccondend）。格式（$ endDf）+'\\\
'+ moment（calEvent.thirdstart）.format（$ startDf）+' - '+（calEvent.end）.format（$ endDf））;}
else {
$ this.find（'＃event__info .event-date'）。text（（calEvent.start）.format（$ startDf）+' - '+（calEvent.end）.format（$ endDf））;}
这会在calander上显示一个三天事件作为一个事件，但会输出以下内容， k比拥有3个单独的一天活动更有意义，或者从第一天上午10点到第三天下午4点不断开放的活动。
第28天上午10:00 - 22:00 pm
周一上午10:00 - 下午16:00
周三上午10点 - 上午16点：00pm
如果相同的事件具有多倍的开始/结束时间，fullCalendar会将它们视为单独的事件。如果您有多天的活动，只需创建不同的活动并为其分配相同的ID即可。
Event.id文档：
$ b
字符串/整数。可选
唯一标识给定的事件。重复
事件的不同实例应该都具有相同的ID。
您的事件列表可能类似于： b>
var myEvents = {
title：Birmingham Comic Con，
start：new Date（'2014- （'2014-11-20T19：00'），
id：1
}，{
title：伯明翰Comic Con，
start：new Date（'2014-11-21T09：00'），
end：new Date（'2014-11-21T19：00'），
id： 1
}，
{
标题：伯明翰动漫节，
开始：新日期（'2014-11-22T09：00'），
结束：新日期（'2014-11-22T19：00'），
id：1
}
因此，如果您必须稍后更新您的多日事件，只需通过Id引用该事件即可。您可以检查这个运动员。
您的评论后更新：
如果您确实希望将事件维持为只有一个事件的多天事件，您可以将自己的属性添加到事件对象，但稍后你应该做额外的工作。对于eaxmple：
无论如何，你的活动可能是这样的：
var myEvent = {
title：Birmingham Comic Con'，
start：new Date（'2014-11-20T09：00'），
end：new Date（'2014-11-22T19：00'），
id：1 ，
isMultipleDay：true，
multipleDayEvents：[
{start：new Date（'2014-11-20T09：00'），
end：new Date（'2014-11 （'2014-11-21T09：00'），$ b'
' $ b结束：新日期（'2014-11-21T19：00'），
描述：'第2天'
}，
{
开始：新日期（'2014-11-22T09：00'），
结束：新日期（'2014-11-22T19：00'），
描述：'第3天'
}
]
}
Multiple day events rarely have one start and one end time. For example, Birmingham Comic Con may last for 3 days, but you can't turn up at 1 in the morning! It has separate start and end times for each of the three days the event runs. I haven't been able to find anything in the docs about multiple start and end times per event, has anyone else?
Edit:
How I've got this working, in case anyone sees this and is after the same functionality, is by adding 'eventlength' and 'firstend', 'secondstart', 'secondend', 'thirdstart' as JSON values. This works for me as none of my events will be longer than three days. 'eventlength' is just a number (1, 2 or 3), and the rest are times/dates.
In fullCalendars eventClick section I have an if statement that cycles through the various possible event lengths and displays the appropriate values.
$startDf = 'ddd Do H:mma';
$endDf = 'H:mma';
if(calEvent.eventlength == 2){
$this.find('#event__info .event-date').text((calEvent.start).format($startDf) + ' - ' + moment(calEvent.firstend).format($endDf) + '\n' + moment(calEvent.seccondstart).format($startDf) + ' - ' + (calEvent.end).format($endDf));}
else if(calEvent.eventlength == 3){
$this.find('#event__info .event-date').text((calEvent.start).format($startDf) + ' - ' + moment(calEvent.firstend).format($endDf) + '\n' + moment(calEvent.seccondstart).format($startDf) + ' - ' + moment(calEvent.seccondend).format($endDf) + '\n' + moment(calEvent.thirdstart).format($startDf) + ' - ' + (calEvent.end).format($endDf));}
else {
$this.find('#event__info .event-date').text((calEvent.start).format($startDf) + ' - ' + (calEvent.end).format($endDf));}
this displays a three day event as one event on the calander, but outputs the following, which I think makes more sense than having 3 seperate one day events, or an event that is continuously open from 10am on day one to 4pm of day three.
Sun 28th 10:00am - 22:00pm
Mon 29th 10:00am - 16:00pm
Tue 30th 10:00am - 16:00pm
If the same "event" has multiples start/end times, fullCalendar treats them as separate events. If you have an event with multiple days, just create different events and assign them the same Id.
String/Integer. Optional
Uniquely identifies the given event. Different instances of repeating events should all have the same id.
Your list of events could be something like:
var myEvents = {
title: "Birmingham Comic Con",
start: new Date('2014-11-20T09:00'),
end: new Date('2014-11-20T19:00'),
id: 1
}, {
title: "Birmingham Comic Con",
start: new Date('2014-11-21T09:00'),
end: new Date('2014-11-21T19:00'),
id: 1
},
{
title: "Birmingham Comic Con",
start: new Date('2014-11-22T09:00'),
end: new Date('2014-11-22T19:00'),
id: 1
}
So, if you have to update later your multiple day event, just refer the event by Id.
You can check this plunker.
Update after your comment: If you really want to maintain the event as just one event with multiple days with only one Event, you could add your own properties to the event object, but later you should do extra job. For eaxmple:
- Customize classes to display different when the Comic Con has its doors close.
- Handle event callbacks to change methods when the event is click during open or close time.
- ...
Anyway, your event could be like this:
var myEvent = {
title: "Birmingham Comic Con",
start: new Date('2014-11-20T09:00'),
end: new Date('2014-11-22T19:00'),
id: 1,
isMultipleDay: true,
multipleDayEvents: [
{start: new Date('2014-11-20T09:00'),
end: new Date('2014-11-20T19:00'),
description: 'Day 1'
},
{
start: new Date('2014-11-21T09:00'),
end: new Date('2014-11-21T19:00'),
description: 'Day 2'
},
{
start: new Date('2014-11-22T09:00'),
end: new Date('2014-11-22T19:00'),
description: 'Day 3'
}
]
}
这篇关于fullCalendar多日活动开始和结束时间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
