FullCalendar 中的重复事件 [英] Recurring Events in FullCalendar

问题描述

我使用 jQuery FullCalendar 作为我网站中用于可用性议程的日历.

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

解决方案

简单重复事件

为了给此处列出的事件添加一个简单的替代方案，Fullcalendar 现在(在某种程度上)支持每周重复事件.因此，如果您只需要类似:[Every Monday and Thursday from 10:00 am to 02:00pm]，您可以使用以下内容:

事件:[{title:我的重复事件",start: '10:00',//开始时间(本例中为上午 10 点)end: '14:00',//结束时间(本例中为下午 2 点)dow: [ 1, 4 ]//周一和周四重复}],

JSFiddle

这在背景事件中有记录，但它也适用于常规事件.>

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

添加一些限制

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

所以，在数据库中:

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

eventId timeStart timeEnd dow dateStart dateEnd1 10:00 12:00 [1,4] 2015/03/01 2015/04/01//三月1 10:00 12:00 [1,4] 2015/05/01 2015/06/01//五月1 10:00 12:00 [1,4] 2016/01/01 2017/01/01//2017年

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

{ id:1, start:"10:00", end:"12:00", dow:[1,4],范围[{开始:2015/03/01"，结束:2015/04/01"}，{开始:2015/05/01"，结束:2015/06/01"}，{开始:2016/01/01"，结束:2017/01/01"}，]}

和客户端，使用 fullcalendar 的 eventRender 仅在其中一个事件中呈现事件时间范围.这样的事情应该可以工作:

eventRender:函数(事件){return (event.ranges.filter(function(range){//针对所有范围测试事件返回 (event.start.isBefore(range.end) &&event.end.isAfter(range.start));}).长度)>0;//如果它不在一个范围内，不要渲染它(通过返回false)},

假设您的事件结构如下:

var repeatingEvents = [{title:我的重复事件",编号:1，开始:'10:00',结束: '14:00',道指: [ 1, 4 ],range: [{//重复事件仅在它们至少在以下范围之一内时才会显示.start: moment().startOf('week'),//接下来的两周结束:moment().endOf('week').add(7,'d'),},{开始:moment('2015-02-01','YYYY-MM-DD'),//整个二月结束:moment('2015-02-01','YYYY-MM-DD').endOf('month'),},/*...其他范围*/],},/*...其他重复事件*/];

JSFiddle

<小时>

过夜

如果您想要隔夜重复事件(像这里), 结束时间过 24:00 即可.例如:

<代码>{start: '10:00',//周一 10 点开始end: '27:00',//24+3 处理正确.道指:[1]}

JSFiddle

I am using jQuery FullCalendar as my calendar used in my website for availability agenda.

Is there any functions/methods/options in fullcalendar that handles my recurring events by Days? For example, Monday only to time 7:00AM to 9:00 AM, tuesdays - 4:00PM to 9:00PM, something like that?

解决方案

Simple Repeating Events

To add a simple alternative to those listed here, Fullcalendar now (somewhat) supports weekly recurring events. So if you only need something like: [Every Monday and Thursday from 10:00am to 02:00pm], you can use the following:

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

This is documented in Background events but it works for regular events as well.

Saving this to a database wouldn't be hard.

Add some restrictions

If you don't want them to repeat infinitely, you would need to add some start and end dates.

So, in the DB:

• Let the event shown above represent the parent record
• Have another table with start/end dates.
• Joined table example:

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

Pass this to the client as 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"},]
}

And client side, use fullcalendar's eventRender to only render events when there are within one of the time ranges. Something like this should work:

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)
},

That's assuming your events are structured as:

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

---

Overnight

In case you want overnight repeating events (like here), just go over 24:00 for the end time. For instance:

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

JSFiddle

这篇关于FullCalendar 中的重复事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！