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

问题描述

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

在fullcalendar中是否有任何功能/方法/选项来处理我的重复事件天？例如，星期一只有上午7:00到上午9:00，星期四 - 下午4:00到9:00，类似这样？

解决方案

简单重复事件

要添加一个简单的替代方法，Fullcalendar现在（有些）支持每周重复事件。所以，如果你只需要像： [每周一和周四上午10:00到下午02:00] ，您可以使用以下：

事件：[{
title：我的重复事件，
开始：'10：00'，//开始时间在这个例子中为10am）
end：'14：00'，//结束时间（在这个例子中为2pm）
dow：[1,4] //重复星期一和星期四
} ]，


JSFiddle

这在背景事件，但它也适用于常规事件。

将此保存到数据库不会难。 p>

添加一些限制

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

所以，在数据库中：

• 加入表格示例：

ul>



  eventId timeStart timeEnd dow dateStart dateEnd 
 1 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，开始：10:00，结束：12:00，dow：[1,4]，
范围[{开始：2015/03/01，结束： 01}，
 {开始：2015/05/01，结束：2015/06/01}，
 {开始：2016/01/01，结束：2017 / 01/01}，] 
} 
  

而在客户端，请使用fullcalendar的 eventRender 仅在其中一个时间范围内呈现事件。这样的东西应该工作：

  eventRender：function（event）{
 return（event.ranges.filter （range）{//针对所有范围测试事件
 
 return（event.start.isBefore（range.end）&& 
 event.end.isAfter（range.start） ）; 
 
}）。length）> 0; //如果不在其中一个范围内，不要渲染它（通过返回false）
}，
  

这假设你的事件的结构是：

  var repeatingEvents = [{
 title ：我的重复事件，
 id：1，
开始：'10：00'，
结束：'14：00'，
 dow：[1,4] ，
 ranges：[{//重复事件只有在以下范围中的至少一个范围内才会显示。 
 start：moment（）。startOf（'week'），// next two weeks 
 end：moment（）。endOf（'week'）add（7，'d'），
}，{
 start：moment（'2015-02-01'，'YYYY-MM-DD'），//二月二月
 end：moment（'2015-02-01' ，'YYYY-MM-DD'）。endOf（'month'），
}，/ * ...其他范围* /]，
}，/ * ...其他重复事件* ]; 
  

JSFiddle





---





夜宿





如果您想要过夜重复活动（这里），请结束 24:00 。例如：

  {
 start：'10：00'，//从10开始在monday 
 end：'27：00'，// 24 + 3被正确处理。 
 dow：[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屋！