Recurring Events in FullCalendar

Question

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?

Answer 1

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