events from an iCalendar feed

FullCalendar can display events from a public iCalendar feed. The @fullcalendar/icalendar plugin parses the feed with the ical.js library.

Usage with NPM#

First, install the @fullcalendar/icalendar and ical.js packages:

npm install --save @fullcalendar/icalendar ical.js

Then, initialize your calendar with the plugin. Use the events option to provide an event source that contains a url property and a format:'ics' property:

import { Calendar } from 'fullcalendar'
import dayGridPlugin from 'fullcalendar/daygrid'
import iCalendarPlugin from '@fullcalendar/icalendar'

const calendar = new Calendar(calendarEl, {
  plugins: [dayGridPlugin, iCalendarPlugin],
  events: {
    url: 'https://mywebsite/icalendar-feed.ics',
    format: 'ics'
  }
})

calendar.render()

Usage with Script Tags#

The plugin is not part of FullCalendar’s all/global.js bundle. If you are using script tags, add the ical.js library and the plugin’s own global.js:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <!-- ICAL.JS LIB -->
+   <script src="https://cdn.jsdelivr.net/npm/ical.js@2.2.1/dist/ical.es5.min.cjs"></script>

    <!-- STANDARD JS -->
    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@7.1.1/all/global.js"></script>

    <!-- ICALENDAR PLUGIN. must go AFTER the ical.js lib and the standard JS -->
+   <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/icalendar@7.1.1/global.js"></script>

    <!-- THEME JS -->
    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@7.1.1/themes/monarch/global.js"></script>

    <!-- STYLESHEETS -->
    <link href='https://cdn.jsdelivr.net/npm/fullcalendar@7.1.1/skeleton.css' rel='stylesheet' />
    <link href='https://cdn.jsdelivr.net/npm/fullcalendar@7.1.1/themes/monarch/theme.css' rel='stylesheet' />
    <link href='https://cdn.jsdelivr.net/npm/fullcalendar@7.1.1/themes/monarch/palettes/purple.css' rel='stylesheet' />

    <script>
      document.addEventListener("DOMContentLoaded", function () {
        const calendarEl = document.getElementById("calendar");
        const calendar = new FullCalendar.Calendar(calendarEl, {
+         events: {
+           url: "https://mywebsite/icalendar-feed.ics",
+           format: "ics"
+         }
        });
        calendar.render();
      });
    </script>
  </head>
  <body>
    <div id="calendar"></div>
  </body>
</html>

The ical.js script defines the ICAL browser global, which the plugin reads. The plugin’s global.js registers itself, so there is no plugins array to write. It works the same way alongside the Web Component’s all/global.js.

Fetching Behavior#

Your iCalendar feed will be queried upon calendar load and will not be queried after. Unlike a json feed, the URL will not be queried when the user navigates forward or backward in time.

The URL will be requeried when the refetchEvents or EventSource::refetch methods are called.