V6 Release Notes and Upgrade Guide

The primary goal of V6 is to solve bugs related to the installation of FullCalendar’s packages. Beyond installing some new packages and rewriting some import statements, there are very few breaking API changes.

Want the code? Read the instructions

Want the full docs in a non-changelog format? View the docs

Found a bug? Report it on the issue tracker

Bundlers & CSS

DX: FullCalendar no longer attempts to import .css files. Instead, FullCalendar’s JS is responsible for injecting its own CSS. This solves many issues with third-party bundlers:

• Webpack: no longer necessary to use css-loader (see v6 example project)
• Rollup: no longer necessary to use a css-processing plugin (like postcss) (see v6 example project)
• NextJS: no longer necessary to ignore and manually import .css files (see v6 example project, #6674)

DX: Overriding FullCalendar’s CSS variables no longer requires any build system configuration. You can simply write CSS variables anywhere you’d like:

--fc-border-color: black;
--fc-daygrid-event-dot-width: 5px;

Peer Dependencies

Using peerDependencies solves problems with deduplication (#6370, angular-404).

Breaking: The @fullcalendar/core package is now a peer-dependency of all other packages, meaning users of React, Angular, and Vue must install it alongside their connector. For example, with React:

npm install \
  @fullcalendar/core \   # always install core!
  @fullcalendar/react \  # the connector (react/angular/vue)
  @fullcalendar/daygrid  # any additional plugins

Breaking: The @fullcalendar/resource package (previously name @fullcalendar/resource-common) is now a peer-dependency of all other resource-related packages, meaning it must be installed manually, whether using a connector or not:

npm install \
  @fullcalendar/core \
  @fullcalendar/resource \  # always install when using resources!
  @fullcalendar/resource-timeline  # a plugin that uses resources

Import Statements

Bugfix: The @fullcalendar/core package no longer needs to be imported before all other packages (#6371, react-144, vue-152). Avoids the need for Vite workarounds.

Breaking: Many internal-only utilities have been moved from @fullcalendar/core to @fullcalendar/core/internal, which is not meant for public consumption. If you feel one of these utilities should be publicly exposed, please file a ticket.

- import { someInternalUtil } from '@fullcalendar/core'          // no longer works!
+ import { someInternalUtil } from '@fullcalendar/core/internal' // works, but please file a ticket

Content Injection

For vanilla JS users who write content-injection functions (like eventContent), there are some small changes to be aware of.

Breaking: It is not recommended to import preact for supplying virtual DOM nodes. Instead, import from FullCalendar’s entrypoint:

- import { h } from 'preact'
+ import { h } from '@fullcalendar/core/preact'

Breaking: Previously, a function that returned nothing would render default content. Now, an empty container will be rendered:

eventContent: function(arg) {
  return // returning nothing renders nothing!
}

To restore the old behavior of rendering default content, return true (added in v6.1.0):

eventContent: function(arg) {
  if (arg.event.title === 'Custom event') {
    return { html: 'Some custom HTML here' }
  }
  return true // render default content
}

Angular-specific Changes

Bugfix: Support for Angular 14 and above has been restored (angular-403, v6 example project)

DX: An Ivy library is now being published (angular-396)

Breaking: The minimum supported Angular version is now Angular 12. Also, support for the legacy View Engine has been dropped.

Breaking: The Angular connector no longer re-exports everything from @fullcalendar/core. You must import utilities and types from core:

- import { CalendarOptions } from '@fullcalendar/angular'
+ import { CalendarOptions } from '@fullcalendar/core'

Breaking: Plugins are no longer registered via FullCalendarModule.registerPlugins:

// app.module.ts

  import { FullCalendarModule } from '@fullcalendar/angular'
- import dayGridPlugin from '@fullcalendar/daygrid'
- import interactionPlugin from '@fullcalendar/interaction'

- FullCalendarModule.registerPlugins([
-   dayGridPlugin,
-   interactionPlugin
- ]);

// ...

Instead, register them where you write your component code:

// app.component.ts

  import { Component } from '@angular/core'
  import { CalendarOptions } from '@fullcalendar/core'
+ import dayGridPlugin from '@fullcalendar/daygrid'
+ import interactionPlugin from '@fullcalendar/interaction'

  @Component({
    selector: 'app-root',
    template: '<full-calendar [options]="calendarOptions"></full-calendar>',
  })
  export class AppComponent {
    calendarOptions: CalendarOptions = {
+     plugins: [
+       dayGridPlugin,
+       interactionPlugin,
+     ],
      initialView: 'dayGridMonth',
    }
  }

Feature: Expose events, eventSources, and resources as top-level Inputs for easier binding (angular-303), making use of async easier:

<full-calendar
  [options]="calendarOptions"
  [events]="events$ | async"
></full-calendar>

Feature: Content-injection properties (like eventContent) can now be customized with ng-template (angular-204):

<full-calendar [options]="calendarOptions">
  <ng-template #eventContent let-arg>
    <b>{{ arg.event.title }}</b>
  </ng-template>
</full-calendar>

Each template accepts a single argument (more information).

Vue-specific Changes

Bugfix: Custom markup given to slots (like eventContent) now properly supports binding, custom global properties, and async components. Essentially, slots now behave as they should (vue-169, vue-141, vue-128, vue-122, vue-182). Fixed for both the Vue2 and Vue3 connectors.

Performance: Custom markup given to slots (like eventContent) now renders much faster (vue-191).

Breaking: The Vue connector no longer re-exports everything from @fullcalendar/core. You must import utilities and types from core:

- import { CalendarOptions } from '@fullcalendar/vue3'
+ import { CalendarOptions } from '@fullcalendar/core'

React-specific Changes

Breaking: The React connector no longer re-exports everything from @fullcalendar/core. You must import utilities and types from core:

- import { CalendarOptions } from '@fullcalendar/react'
+ import { CalendarOptions } from '@fullcalendar/core'

Internal: The React connector no longer replaces the core package’s Preact renderer with a React renderer. Thus, the React connector will ultimately use Preact. This change was necessary to circumvent a number of developer experience problems, such as import statement ordering and StrictMode warnings. It has the following implications (or lack thereof):

• NO significant performance implications
• NO API changes. Furthermore, React virtual dom nodes are still given to content-injection props like eventContent
• Bundle size increase of about 3k as a result of including Preact

The codebase will likely be rearchitected in the future to once again support a dual React/Preact renderer.

Web Component Package

Feature: The Web Components API provide a standardized way to make reusable custom elements. FullCalendar offers a custom element in the new @fullcalendar/web-component package. Learn how to use it »

iCalendar Package

Breaking: Users of the @fullcalendar/icalendar package must now install ical.js themselves. This is because ical.js is now a peer dependency.

npm install @fullcalendar/icalendar ical.js

Moment Timezone Package

Bugfix: When using @fullcalendar/moment-timezone, the moment package is no longer needed as a peer dependency (#6839)

Script Tag Usage

Feature: install FullCalendar as an ES module within a script tag (docs, #6933)

DX: It is no longer to necessary to write <link> tags for external stylesheets. The JavaScript bundles contain their own stylesheets.

Breaking: Previously, the paths to FullCalendar’s script tag globals JS files were inconsistently named as main.min.js or main.global.min.js. Now, they are always named index.global.min.js. Examples:

• https://cdn.jsdelivr.net/npm/fullcalendar@6.1.20/index.global.min.js
• https://cdn.jsdelivr.net/npm/@fullcalendar/google-calendar@6.1.20/index.global.min.js

Breaking: The fullcalendar and fullcalendar-scheduler packages no longer contain locale files. Instead, always use @fullcalendar/core:

• All locales: https://cdn.jsdelivr.net/npm/@fullcalendar/core@6.1.20/locales-all.global.min.js
• Single locale: https://cdn.jsdelivr.net/npm/@fullcalendar/core@6.1.20/locales/es.global.min.js

Breaking: The fullcalendar and fullcalendar-scheduler bundles that are meant to be used as script tag globals no longer contain the following packages:

• @fullcalendar/bootstrap5
• @fullcalendar/bootstrap
• @fullcalendar/google-calendar

Instead, they should be included as separate script tags:

• https://cdn.jsdelivr.net/npm/@fullcalendar/bootstrap5@6.1.20/index.global.min.js
• https://cdn.jsdelivr.net/npm/@fullcalendar/bootstrap@6.1.20/index.global.min.js
• https://cdn.jsdelivr.net/npm/@fullcalendar/google-calendar@6.1.20/index.global.min.js

IE 11 Dropped

Support for IE 11 has been dropped.

FullCalendar now distributes JS with (ES6) ES2015 syntax. Thus, reliance on tslib as a dependency has been dropped.

Fetch versus XHR

Internal: The fetch browser API is now used instead of XHR to make JSON feed requests (#6772)

Breaking: The second argument given to eventSourceSuccess is no longer an XHR. It is now a fetch Response object.

Feature: eventSourceFailure’s error object will contain a response property when failing on a JSON feed. It is a fetch Response object.

Codebase Improvements

The tooling of the codebase has been refactored to improve the contributor experience. For example, PNPM and Turborepo are now used. View the master monorepo on GitHub.