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()
You can also configure the rrule plugin with script tags. This example leverages CDN links:
<!-- rrule lib -->
<script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/es5/rrule.min.js'></script>
<!-- fullcalendar bundle -->
<script src='https://cdn.jsdelivr.net/npm/[email protected]/index.global.min.js'></script>
<!-- the rrule-to-fullcalendar connector. must go AFTER the rrule lib -->
<script src='https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/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>
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.
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.
