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 0 signifying Sunday, 1 signifying Monday, etc. For example, [ 2, 4 ] means an event repeats every Tuesday and Thursday. If omitted, the event is assumed to repeat every day.
startTime	The time of day this event starts. Something that will parse into a Duration. If defined, allDay:false will be assumed. Otherwise, allDay:true is assumed.
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 endRecur the day after you want your last recurrence.
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 interaction plugin.
rrule duration	these are RRule recurring event properties

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.

Read about the RRule plugin →

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:

const calendar = new Calendar(calendarEl, {
  plugins: [ dayGridPlugin, interactionPlugin ],
  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
});