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@6.1.15/index.global.min.js'></script>
<!-- the rrule-to-fullcalendar connector. must go AFTER the rrule lib -->
<script src='https://cdn.jsdelivr.net/npm/@fullcalendar/rrule@6.1.15/index.global.min.js'></script>
<script>
var calendarEl = document.getElementById('calendar')
var calendar = new FullCalendar.Calendar(calendarEl, {
events: [
// event data. see below
]
})
calendar.render()
</script>
Event Data
When using the RRule plugin, event parsing accepts these new properties:
| rrule |
Accepts whatever the rrule lib accepts for a |
|---|---|
| exdate |
A date input or array of date inputs. |
| exrule |
An object or array of objects. The object is whatever the |
| 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:00orT103000), 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.