javascript - FullCalendar 中的重复事件

Question

我正在使用 jQuery FullCalendar 作为我在网站上用于可用性议程的日历。

fullcalendar 中是否有任何函数/方法/选项可以按天处理我的重复事件？例如，星期一只到早上 7:00 到上午 9:00，星期二到下午 4:00 到晚上 9:00，诸如此类？

Answer 1

简单的重复事件

为了向此处列出的事件添加一个简单的替代方案，Fullcalendar 现在(在一定程度上)支持每周重复发生的事件。因此，如果您只需要类似这样的内容:[每周一和周四上午 10:00 到下午 02:00]，您可以使用以下内容:

events: [{
    title:"My repeating event",
    start: '10:00', // a start time (10am in this example)
    end: '14:00', // an end time (2pm in this example)
    dow: [ 1, 4 ] // Repeat monday and thursday
}],

JSFiddle

这记录在 Background events 中但它也适用于常规事件。

将其保存到数据库并不难。

添加一些限制

如果您不希望它们无限重复，则需要添加一些开始和结束日期。

因此，在数据库中:

• 让上面显示的事件代表父记录
• 有另一个包含开始/结束日期的表格。
• 连接表示例:

eventId  timeStart  timeEnd   dow    dateStart      dateEnd
     1      10:00    12:00  [1,4]  2015/03/01   2015/04/01  // Month of March
     1      10:00    12:00  [1,4]  2015/05/01   2015/06/01  // Month of May
     1      10:00    12:00  [1,4]  2016/01/01   2017/01/01  // Year of 2017

将其作为 JSON 传递给客户端:

{ id:1, start:"10:00", end:"12:00", dow:[1,4],
  ranges[{start:"2015/03/01", end:"2015/04/01"},
         {start:"2015/05/01", end:"2015/06/01"},
         {start:"2016/01/01", end:"2017/01/01"},]
}

和客户端，使用全日历的eventRender仅在其中一个时间范围内呈现事件。这样的事情应该有效:

eventRender: function(event){
    return (event.ranges.filter(function(range){ // test event against all the ranges

        return (event.start.isBefore(range.end) &&
                event.end.isAfter(range.start));

    }).length)>0; //if it isn't in one of the ranges, don't render it (by returning false)
},

假设您的事件结构如下:

var repeatingEvents = [{
    title:"My repeating event",
    id: 1,
    start: '10:00', 
    end: '14:00', 
    dow: [ 1, 4 ], 
    ranges: [{ //repeating events are only displayed if they are within at least one of the following ranges.
        start: moment().startOf('week'), //next two weeks
        end: moment().endOf('week').add(7,'d'),
    },{
        start: moment('2015-02-01','YYYY-MM-DD'), //all of february
        end: moment('2015-02-01','YYYY-MM-DD').endOf('month'),
    },/*...other ranges*/],
},/*...other repeating events*/];

JSFiddle

---

隔夜

如果您想要通宵重复事件 ( like here )，只需将 24:00 作为结束时间。例如:

{
  start: '10:00', //starts at 10 on monday
  end:   '27:00', //24+3 is handled correctly.
  dow: [1]
}

JSFiddle