logo

FullCalendar

This release is in alpha and the docs are incomplete. Read the release notes

RRule Plugin

The RRule plugin is a connector to the rrule js library. It is powerful for specifying recurring events, moreso than FullCalendar’s built-in simple event recurrence.

It introduces some new event properties:

import { Calendar } from 'fullcalendar';
import 'fullcalendar/plugins/rrule'; // need this! or include <script> tag instead

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new Calendar(calendarEl, {
    events: [
      {
        // standard property
        title: 'my recurring event',

        rrule: 'DTSTART:20120201T103000Z\nRRULE:FREQ=WEEKLY;INTERVAL=5;UNTIL=20120601;BYDAY=MO,FR',
        // ...or, an object...
        rrule: {
          freq: 'weekly',
          interval: 5,
          byweekday: [ 'mo', 'fr' ],
          dtstart: '2012-02-01T10:30:00',
          until: '2012-06-01'
        },

        // for specifying the end time of each instance
        duration: '02:00'
      }
    ]
  });

  calendar.render();
});

If you are using <script> tags and browser globals, you must ensure the original non-plugin rrule.js dist file from the rrule site is included on your page first.

The rrule property accepts whatever the rrule lib accepts for a new RRule. See the docs. You can specify a string or an object.

If you’re specifying an object, you can write some of the properties in a way that’s more convenient than what rrule requires:

  • You don’t need to use the RRule constants like RRule.WEEKLY. You can just specify the string 'weekly'. This is better for JSON serialization.
  • You can specify dtstart as an ISO8601 string. If the string has a time part, the event will be all-day. The time part will determine each recurrence’s start time. If it doesn’t have a UTC offset, it will be parsed according to the current timeZone.
  • You can specify until as an ISO8601 string. If it doesn’t have a UTC offset, it will be parsed according to the current timeZone.

The duration property must be something that parses into a Duration. If not specified, each event will appear to have the default duration. See defaultAllDayEventDuration, defaultTimedEventDuration, and forceEventDuration for more info.