完整日历多日事件开始和结束时间



多日活动很少有一个开始时间和一个结束时间。 例如,伯明翰动漫展可能会持续 3 天,但你不能在凌晨 1 点出现! 它为活动运行的三天中的每一天都有单独的开始和结束时间。 我无法在文档中找到有关每个事件的多个开始和结束时间的任何内容,还有其他人吗?

编辑:

如果有人看到它并且追求相同的功能,我是如何让它工作的是通过添加"事件长度"和"第一端"、"第二开始"、"第二端"、"第三开始"作为 JSON 值。 这对我有用,因为我的所有活动都不会超过三天。 "事件长度"只是一个数字(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));}

这将一个为期三天的事件显示为日历上的一个事件,但输出以下内容,我认为这比有 3 个单独的一天事件更有意义,或者从第一天上午 10 点到第三天下午 4 点连续开放的事件。

週日(週日( 28日 上午10:00 - 晚上22:00

週一 29日 上午10:00 - 下午16:00

週二 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 引用事件即可。

你可以检查这个弹道。

评论后更新:如果您确实希望将事件维护为只有一个事件,其中包含多天只有一个事件,则可以将自己的属性添加到事件对象中,但稍后您应该执行额外的工作。对于 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-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'
          }
        ]
    }

相关内容

  • 没有找到相关文章

最新更新