fullCalendar多日活动开始和结束时间

多天事件很少有一个开始和一个结束时间。 例如,伯明翰动漫展可能会持续3天,但你不能在早上1点出现! 它为事件运行的三天中的每一天分别设置了开始和结束时间。 我还没有在文档中找到关于每个事件的多个开始和结束时间的任何内容,还有其他人吗?

编辑:

我是如何工作的,如果有人看到这个并且在相同的function之后,是通过添加’eventlength’和’firstend’,’secondstart’,’secondend’,’thirdstart’作为JSON值。 这对我有用,因为我的活动都不会超过三天。 ‘eventlength’只是一个数字(1,2或3),其余的是时间/日期。

在fullCalendars eventClick部分中,我有一个if语句,它循环遍历各种可能的事件长度并显示适当的值。

$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));} 

这显示了一个为期三天的事件作为一个关于calander的事件,但输出以下内容,我认为这比一天有3个单独的事件更有意义,或者是从第一天的第一天到下午4点连续开放的事件。

太阳28日上午10:00 – 晚上22:00

星期一上午10点到下午16点

星期二30日上午10:00 – 下午16:00

如果相同的“事件”具有倍数开始/结束时间,则fullCalendar会将它们视为单独的事件。 如果您有多天的活动,只需创建不同的活动并为其分配相同的ID。

Event.id文档 :

字符串/整型。 可选的

唯一标识给定事件。 不同的重复事件实例都应具有相同的ID。

您的活动列表可能类似于:

 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 } 

因此,如果您必须稍后更新您的多日活动,请按ID参考活动。

你可以检查这个plunker 。

评论后更新:如果您确实希望将事件维护为仅包含一个事件的多天的一个事件,则可以将自己的属性添加到事件对象,但稍后您应该执行额外的工作。 对于eaxmple:

  • 自定义类以在Comic Con关闭时显示不同的类。
  • 处理事件回调以在打开或关闭时单击事件时更改方法。

无论如何,你的活动可能是这样的:

  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' } ] }