---
title: Plugin Index
---

<script>
import { variables } from '../../src/lib/utils/variable-injection.js';

const {site, latestReleases} = variables
</script>

<style>
  .plugin-table td:first-child strong { display: block; white-space: nowrap }
</style>

Aside from the [vanilla JS](initialize-es6) package `fullcalendar`, there are UI-library connectors:

<table class='plugin-table'>
  <thead>
    <tr>
      <th>Name</th>
      <th>Functionality / Views</th>
      <th>NPM</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <strong>@fullcalendar/react</strong>
      </td>
      <td>
        Offers a React component. <a href='react'>More info</a>
      </td>
      <td><a href='https://www.npmjs.com/package/@fullcalendar/react'>NPM</a></td>
    </tr>
    <tr>
      <td>
        <strong>@fullcalendar/preact</strong>
      </td>
      <td>
        Offers a Preact component. <a href='preact'>More info</a>
      </td>
      <td><a href='https://www.npmjs.com/package/@fullcalendar/preact'>NPM</a></td>
    </tr>
    <tr>
      <td>
        <strong>@fullcalendar/vue3</strong>
      </td>
      <td>
        Offers a Vue 3 component. <a href='vue'>More info</a>
      </td>
      <td><a href='https://www.npmjs.com/package/@fullcalendar/vue3'>NPM</a></td>
    </tr>
    <tr>
      <td>
        <strong>@fullcalendar/angular</strong>
      </td>
      <td>
        Offers an Angular component. <a href='angular'>More info</a>
      </td>
      <td><a href='https://www.npmjs.com/package/@fullcalendar/angular'>NPM</a></td>
    </tr>
    <tr>
      <td>
        <strong>@fullcalendar/web-component</strong>
      </td>
      <td>
        Offers an Web Component. <a href='web-component'>More info</a>
      </td>
      <td><a href='https://www.npmjs.com/package/@fullcalendar/web-component'>NPM</a></td>
    </tr>
  </tbody>
</table>

The following plugins are included in the standard package for whatever UI library integration you choose (`fullcalendar`, `@fullcalendar/react`, etc):

<table class='plugin-table'>
  <thead>
    <tr>
      <th>Name</th>
      <th>Functionality / Views</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <strong>/interaction</strong>
      </td>
      <td>
        Required to detect <a href='dateClick'>dateClick</a> actions,
        <a href='selectable'>selectable</a> actions, and
        <a href='editable'>event drag-n-drop &amp; resizing</a>.<br />
        <em>Not needed</em> for
        <a href='eventClick'>eventClick</a> or
        <a href='eventMouseEnter'>eventMouseEnter</a>/<a href='eventMouseLeave'>eventMouseLeave</a>.
      </td>
    </tr>
    <tr>
      <td>
        <strong>/daygrid</strong>
      </td>
      <td>
        Offers <a href='month-view'>Month</a> and <a href='daygrid-view'>DayGrid</a> views:<br />
        <code>dayGridYear</code>,
        <code>dayGridMonth</code>,
        <code>dayGridWeek</code>,
        <code>dayGridDay</code>,
        <code>dayGrid</code> (<a href='custom-view-with-settings'>generic</a>)
      </td>
    </tr>
    <tr>
      <td>
        <strong>/timegrid</strong>
      </td>
      <td>
        Offers <a href='timegrid-view'>TimeGrid</a> views:<br />
        <code>timeGridWeek</code>,
        <code>timeGridDay</code>,
        <code>timeGrid</code> (<a href='custom-view-with-settings'>generic</a>)
      </td>
    </tr>
    <tr>
      <td>
        <strong>/list</strong>
      </td>
      <td>
        Offers <a href='list-view'>Lists</a> views:<br />
        <code>listYear</code>,
        <code>listMonth</code>,
        <code>listWeek</code>,
        <code>listDay</code>,
        <code>list</code> (<a href='custom-view-with-settings'>generic</a>)
      </td>
    </tr>
    <tr>
      <td>
        <strong>/multimonth</strong>
      </td>
      <td>
        Offers <a href='multimonth-grid'>Multi-Month</a> views:<br />
        <code>multiMonthYear</code>,
        <code>multiMonth</code> (<a href='custom-view-with-settings'>generic</a>)
      </td>
    </tr>
  </tbody>
</table>

The following plugins are included in the standard package for whatever UI library integration you choose (`fullcalendar-scheduler`, `@fullcalendar/react-scheduler`, etc):

<table class='plugin-table'>
  <thead>
    <tr>
      <th>Name</th>
      <th>Functionality / Views</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <strong>/scrollgrid</strong>
        <a href='/pricing' class='badge'>Premium</a>
      </td>
      <td>
        Provides advanced scrolling features such as horizontal scrolling to certain views
      </td>
    </tr>
    <tr>
      <td>
        <strong>/timeline</strong>
        <a href='/pricing' class='badge'>Premium</a>
      </td>
      <td>
        Offers <a href='timeline-view-no-resources'>Timeline views with <strong>no resource support</strong></a>:<br />
        <code>timelineYear</code>,
        <code>timelineMonth</code>,
        <code>timelineWeek</code>,
        <code>timelineDay</code>,
        <code>timeline</code> (<a href='custom-view-with-settings'>generic</a>)
      </td>
    </tr>
    <tr>
      <td>
        <strong>/adaptive</strong>
        <a href='/pricing' class='badge'>Premium</a>
      </td>
      <td>
        Offers <a href='print'>improved printing support</a>.
      </td>
    </tr>
    <tr>
      <td>
        <strong>/resource-daygrid</strong>
        <a href='/pricing' class='badge'>Premium</a>
      </td>
      <td>
        Offers <a href='resource-daygrid-view'>resource-enabled DayGrid</a> views:
        <code>resourceDayGridMonth</code>,
        <code>resourceDayGridWeek</code>,
        <code>resourceDayGridDay</code>,
        <code>resourceDayGrid</code> (<a href='custom-view-with-settings'>generic</a>)
      </td>
    </tr>
    <tr>
      <td>
        <strong>/resource-timegrid</strong>
        <a href='/pricing' class='badge'>Premium</a>
      </td>
      <td>
        Offers <a href='vertical-resource-view'>resource-enabled TimeGrid</a> views:
        <code>resourceTimeGridWeek</code>,
        <code>resourceTimeGridDay</code>,
        <code>resourceTimeGrid</code> (<a href='custom-view-with-settings'>generic</a>)
      </td>
    </tr>
    <tr>
      <td>
        <strong>/resource-timeline</strong>
        <a href='/pricing' class='badge'>Premium</a>
      </td>
      <td>
        Offers <a href='timeline-view'>resource-enabled Timeline</a> views:
        <code>resourceTimelineYear</code>,
        <code>resourceTimelineMonth</code>,
        <code>resourceTimelineWeek</code>,
        <code>resourceTimelineDay</code>,
        <code>resourceTimeline</code> (<a href='custom-view-with-settings'>generic</a>)
      </td>
    </tr>
  </tbody>
</table>

The following plugins are supplemental, and work with any UI library:

<table class='plugin-table'>
  <thead>
    <tr>
      <th>Name</th>
      <th>Functionality / Views</th>
      <th>NPM</th>
      <th>jsDelivr</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <strong>@fullcalendar/google-calendar</strong>
      </td>
      <td>
        For loading events from a public <a href='google-calendar'>Google Calendar feed</a>
      </td>
      <td><a href='https://www.npmjs.com/package/@fullcalendar/google-calendar'>NPM</a></td>
      <td><a href='https://www.jsdelivr.com/package/npm/@fullcalendar/google-calendar?version={latestReleases.v7}'>jsDelivr</a></td>
    </tr>
    <tr>
      <td>
        <strong>@fullcalendar/icalendar</strong>
      </td>
      <td>
        For loading events from an <a href='icalendar'>iCalendar feed</a>
      </td>
      <td><a href='https://www.npmjs.com/package/@fullcalendar/icalendar'>NPM</a></td>
      <td><a href='https://www.jsdelivr.com/package/npm/@fullcalendar/icalendar?version={latestReleases.v7}'>jsDelivr</a></td>
    </tr>
    <tr>
      <td>
        <strong>@fullcalendar/rrule</strong>
      </td>
      <td>
        For <a href='rrule-plugin'>leveraging the RRule library</a> for event recurrence
      </td>
      <td><a href='https://www.npmjs.com/package/@fullcalendar/rrule'>NPM</a></td>
      <td><a href='https://www.jsdelivr.com/package/npm/@fullcalendar/rrule?version={latestReleases.v7}'>jsDelivr</a></td>
    </tr>
    <tr>
      <td>
        <strong>@fullcalendar/format-moment</strong>
      </td>
      <td>
        Use <a href='format-moment'>Moment formatting strings</a>
      </td>
      <td><a href='https://www.npmjs.com/package/@fullcalendar/format-moment'>NPM</a></td>
      <td><a href='https://www.jsdelivr.com/package/npm/@fullcalendar/format-moment?version={latestReleases.v7}'>jsDelivr</a></td>
    </tr>
    <tr>
      <td>
        <strong>@fullcalendar/format-luxon3</strong>
      </td>
      <td>
        Use <a href='format-luxon3'>Luxon formatting strings</a>
      </td>
      <td><a href='https://www.npmjs.com/package/@fullcalendar/format-luxon3'>NPM</a></td>
      <td><a href='https://www.jsdelivr.com/package/npm/@fullcalendar/format-luxon3?version={latestReleases.v7}'>jsDelivr</a></td>
    </tr>
  </tbody>
</table>