These docs are for an old release. Info on upgrading to v6
edit doc

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.

Usage with NPM

First, install the @fullcalendar/rrule package along with any other packages you plan to use:

npm install --save @fullcalendar/rrule @fullcalendar/core @fullcalendar/daygrid

Then, create a new calendar and pass in the plugins:

import { Calendar } from '@fullcalendar/core'
import rrulePlugin from '@fullcalendar/rrule'
import dayGridPlugin from '@fullcalendar/daygrid'

let calendarEl = document.getElementById('calendar')
let calendar = new Calendar(calendarEl, {
  plugins: [ rrulePlugin, dayGridPlugin ],
  events: [
    // event data. see below
  ]
})

calendar.render()

Usage with Script Tags

You can also configure the rrule plugin with script tags. This example leverages CDN links:

<!-- rrule lib -->
<script src='https://cdn.jsdelivr.net/npm/rrule@2.6.4/dist/es5/rrule.min.js'></script>

<!-- fullcalendar bundle -->
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@5.11.5/main.min.js'></script>

<!-- the rrule-to-fullcalendar connector. must go AFTER the rrule lib -->
<script src='https://cdn.jsdelivr.net/npm/@fullcalendar/rrule@5.11.5/main.global.min.js'></script>

<script>
  var calendarEl = document.getElementById('calendar')
  var calendar = new FullCalendar.Calendar(calendarEl, {
    events: [
      // event data. see below
    ]
  })

  calendar.render()
</script>

View a live demo

Event Data

When using the RRule plugin, event parsing accepts these new properties:

rrule

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

exdate

A date input or array of date inputs.

exrule

An object or array of objects. The object is whatever the new RRule constructor takes. See the RRule docs.

duration

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.

The rrule property

You can specify the rrule property as an object:

var calendar = new FullCalendar.Calendar(calendarEl, {
  events: [
    {
      title: 'my recurring event',
      rrule: {
        freq: 'weekly',
        interval: 5,
        byweekday: [ 'mo', 'fr' ],
        dtstart: '2012-02-01T10:30:00', // will also accept '20120201T103000'
        until: '2012-06-01' // will also accept '20120201'
      }
    }
  ]
})

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 also specify rrule as a string:

var calendar = new FullCalendar.Calendar(calendarEl, {
  events: [
    {
      title: 'my recurring event',
      rrule: 'DTSTART:20120201T103000Z\nRRULE:FREQ=WEEKLY;INTERVAL=5;UNTIL=20120601;BYDAY=MO,FR'
    }
  ]
})

Exclusion Properties

As of version 5.5.0, you can supply properties that exclude certain dates generated by the previously supplied rrule. These only work if you’re defining rrule as an object. If you’re defining rrule as as string, you should write the exclusions within the string itself.

You can exclude one or more explicit dates using exdate:

var calendar = new FullCalendar.Calendar(calendarEl, {
  events: [
    {
      title: 'my recurring event',
      rrule: {
        freq: 'weekly',
        dtstart: '2012-02-01'
      },
      exdate: ['2012-02-08'] // will also accept a single string
    }
  ]
})

Or, you can use a separate rrule to define the dates you want excluded, using exrule:

var calendar = new FullCalendar.Calendar(calendarEl, {
  events: [
    {
      title: 'my recurring event',
      rrule: {
        freq: 'weekly',
        dtstart: '2012-02-01'
      },
      exrule: { // will also accept an array of these objects
        freq: 'weekly',
        dtstart: '2012-02-15',
        until: '2012-02-22'
      }
    }
  ]
})

Times and Time Zones

The dtstart and until dates (or DTSTART and UNTIL when specifying a string) will be parsed in this way:

  • If a time part is not specified (like T10:30:00 or T103000), the event is assumed to be all-day.
  • If a time zone part is not specified (like Z), the event will assume the timeZone of the calendar.