Recurring Events
A recurring event is an event that happens more than once, on a repeating schedule. When a repeating event is turned into individual event instances with individual dates, it is called “expanding” the event.
In the most low-tech case, you can expand your recurring events on your server side before sending them down to a json feed event source. However, if you’d like to expand your recurring events on the client-side, there are two different techniques you can use.
Simple Recurrence
FullCalendar offers recurring event functionality out-of-the-box, but with a limited featureset. It allows for the following types of recurrence:
- every day, within an optional date range
- weekly, within an optional date range
To define recurrence, you specify additional properties when you define your events object:
| daysOfWeek |
The days of the week this event repeats. An array of integers. Each integer represents a day-of-week, with |
|---|---|
| startTime |
The time of day this event starts. Something that will parse into a Duration. If defined, |
| endTime |
The time of day this event ends. Something that will parse into a Duration. If omitted, your events will appear to have the default duration. See defaultAllDayEventDuration, defaultTimedEventDuration, and forceEventDuration for more info. |
| startRecur |
When recurrences of this event start. Something that will parse into a Date. If not specified, recurrences will extend infinitely into the past. |
| endRecur |
When recurrences of this event end. Something that will parse into a Date. If not specified, recurrences will extend infinitely into the future. Note: This value is exclusive. Just like every other end-date in the API. For all-day recurring events, make the |
| groupId |
String. An identifier for events to be handled together as a group for certain actions e.g. when dragging or resizing events with the |
If any of these properties are specified, the event is assumed to be recurring and there is no need to specify the normal start and end properties.
For a multi-day all-day event, specify the duration property (a duration input).
Recurrence with the RRule Plugin
If the built-in recurrence functionality is too limited for you, you can leverage the rrule library. FullCalendar has a connector plugin to make it easy to work with.
Recurrence with the Interaction Plugin
When using the Interaction plugin, for example to drag or resize events, if you want all the recurring events in a definition to move together, you need to specify a groupId. This is a string which will serve as the identifier for that group of events. It doesn’t matter whether you intend to use this ID for any other purpose. For example:
var calendar = new Calendar(calendarEl, {
plugins: [ 'dayGrid', 'interaction' ],
events: [
{
groupId: 'blueEvents', // recurrent events in this group move together
daysOfWeek: [ '4' ],
startTime: '10:45:00',
endTime: '12:45:00'
},
{
daysOfWeek: [ '3' ], // these recurrent events move separately
startTime: '11:00:00',
endTime: '11:30:00',
color: 'red'
}
],
editable: true
});