--- title: V7 Changelog ---
{ e.preventDefault(); window.scrollTo({top:0,behavior:'smooth'}) }}>Back to top ## Table of Contents - UI Frameworks - [React](#react) - [Preact](#preact) - [Vue](#vue) - [Angular](#angular) - [Vanilla JS](#vanilla-js) - [Web Component](#web-component) - Themes - [Standard Themes](#standard-themes) - [Shadcn](#shadcn) - [MUI](#mui) - [Bootstrap](#bootstrap) - [Custom Themes](#custom-themes) - [Toolbar](#toolbar) - [Events (General)](#events-general) - [Resources (General)](#resources-general) - Calendar Views - [General](#calendar-views-general) - [DayGrid View](#daygrid-view) - [Resource DayGrid View](#resource-daygrid-view) - [TimeGrid View](#timegrid-view) - [Resource TimeGrid View](#resource-timegrid-view) - [List View](#list-view) - [MultiMonth View](#multimonth-view) - [Timeline View](#timeline-view) - [Resource Timeline View](#resource-timeline-view) - [Custom Views](#custom-views) - Plugins - [Luxon Plugin](#luxon-plugin) - [Moment Plugins](#moment-plugins) - [iCalendar Plugin](#icalendar-plugin) - [Custom Plugins](#custom-plugins) - [Time Zone](#time-zone) - [Temporal](#temporal) - [Date Navigation](#date-navigation) - [Date Formatting](#date-formatting) - [Locales](#locales) - [Interactions](#interactions) - [Distribution](#distribution) - [Premium License](#premium-license)
This major release introduces a formal **theme system**, 4 new standard themes, plays well with **Tailwind**, simplifies the **DOM structure**, improves **performance**, **accessibility**, **responsiveness**, and **print-view**. In total, (AT LEAST) **57 tickets** were resolved. This guide assumes you're **upgrading from v6**. To upgrade from **v5**, first follow the **[v5 → v6 guide](https://fullcalendar.io/docs/upgrading-from-v5)** and then return to this guide. The two upgrade guides can be stacked with no issue. **Want the code?** [Read the instructions](getting-started) **Want the full docs** in a non-changelog format? [View the docs]({site.baseurl}) **Found a bug?** [Report it on the issue tracker](https://github.com/fullcalendar/fullcalendar/issues) **Related documents:** - [JavaScript API Migration Guide](api-migration) - [Custom CSS Migration Guide](css-migration) - [Customization Setting Index](render-hook-index) ## React - **Feature:** React connector is no longer just a connector with internal **P**react rendering. `@fullcalendar/react` is now fully implemented in React, including working SSR and StrictMode. - **Performance:** Less flickering during event rerendering for React implementation ([#7488](https://github.com/fullcalendar/fullcalendar/issues/7488)) - **Breaking:** React >= 17 support - **Breaking:** `FullCalendar.act` testing util removed - **Breaking:** dependency changes: - `temporal-polyfill` added as a peer dependency ([read more](temporal-polyfill)) - `@fullcalendar/core` removed as a peer dependency - `@fullcalendar/daygrid` and many other standard packages removed and moved to `@fullcalendar/react/*` entrypoints (see [migration guide](api-migration#react-standard-packages)) - `@fullcalendar/resource-timeline` and many other premium packages removed and moved to `@fullcalendar/react-scheduler`, a new package (see [migration guide](api-migration#react-scheduler-packages)) - **Behavior:** For the [Remix framework](https://remix.run/) previously required a hack to explicitly define the DOM-placement for styles, but this is no longer needed [Shadcn](#shadcn) and [MUI](#mui) theme systems are also newly available for React. See below. ## Preact - **Feature:** FullCalendar implemented natively with [Preact](https://preactjs.com/) and finally exposed as packages: `@fullcalendar/preact` and `@fullcalendar/preact-scheduler` ## Vue - **Breaking:** Vue 2 support dropped (`@fullcalendar/vue`) - **Breaking:** Removed support for [Vue no-build global-JS](https://vuejs.org/guide/quick-start.html#using-vue-from-cdn) by no longer providing a global-JS dist file. See [discussion about restoration](https://github.com/fullcalendar/fullcalendar/issues/8039). - **Breaking:** dependency changes: - `temporal-polyfill` added as a peer dependency ([read more](temporal-polyfill)) - `@fullcalendar/core` removed as a peer dependency - `@fullcalendar/daygrid` and many other standard packages removed and moved to `@fullcalendar/vue3/*` entrypoints (see [migration guide](api-migration#vue-standard-packages)) - `@fullcalendar/resource-timeline` and many other premium packages removed and moved to `@fullcalendar/vue3-scheduler`, a new package (see [migration guide](api-migration#vue-scheduler-packages)) ## Angular - **Breaking:** supports Angular 16-21 - **Breaking:** dependency changes: - `temporal-polyfill` added as a peer dependency ([read more](temporal-polyfill)) - The `@fullcalendar/core` peer dependency renamed to `fullcalendar` - `@fullcalendar/daygrid` and many other standard packages removed and moved to `@fullcalendar/angular/*` entrypoints (see [migration guide](api-migration#angular-standard-packages)) - `@fullcalendar/resource-timeline` and many other premium packages removed and moved to `@fullcalendar/angular-scheduler`, a new package (see [migration guide](api-migration#angular-scheduler-packages)) ## Vanilla JS - **Breaking:** vanilla JS package renamed from `@fullcalendar/core` to `fullcalendar` - **Breaking:** for global script tag users, `index.global.js` renamed to `all.global.js` - **Breaking:** dependency changes: - `temporal-polyfill` added as a peer dependency ([read more](temporal-polyfill)) - `@fullcalendar/daygrid` and many other standard packages removed and moved to `fullcalendar/*` entrypoints (see [migration guide](api-migration#vanilla-js-standard-packages)) - `@fullcalendar/resource-timeline` and many other premium packages removed and moved to `fullcalendar-scheduler`, a repurposed package (see [migration guide](api-migration#vanilla-js-scheduler-packages)) ## Web Component - **Breaking:** removed `shadow` attribute. always uses shadom-DOM now - **Breaking:** for global script tag users, `index.global.js` renamed to `all.global.js` - **Breaking:** dependency changes: - `temporal-polyfill` added as a peer dependency ([read more](temporal-polyfill)) - `@fullcalendar/core` removed as a peer dependency - `@fullcalendar/daygrid` and many other standard packages removed and moved to `@fullcalendar/web-component/*` entrypoints (see [migration guide](api-migration#web-component-standard-packages)) - `@fullcalendar/resource-timeline` and many other premium packages removed and moved to `@fullcalendar/web-component-scheduler`, a new package (see [migration guide](api-migration#web-component-scheduler-packages)) ## Standard Themes - **Feature:** 4 new stock themes, viewable on [themes.fullcalendar.io](https://themes.fullcalendar.io/) - Monarch -- inspired by [Material Design 3](https://m3.material.io/) - Forma -- inspired by [Fluent UI](https://developer.microsoft.com/en-us/fluentui#/) - Breezy -- inspired by [Tailwind Plus](https://tailwindcss.com/plus) - Pulse -- a minimal Apple-like design - **Feature:** dark mode in all themes ([#7904](https://github.com/fullcalendar/fullcalendar/issues/7904)) ([docs](color-palettes#dark-mode)) - **Feature:** nice tab-focus effects on everything - **Feature:** [settings to disable outer border](borderless) on all themes - **Feature:** Does not have one baked-in theme that always needs to be loaded, even if customizations - **Breaking:** FullCalendar no longer bundles its own CSS. Furthermore, the calendar "theme" has been pulled out from the core, as a plugin. Thus, you must import your own stylesheets. This depends on what theme you choose (see [themes.fullcalendar.io](https://themes.fullcalendar.io)) View each UI frameworks' docs for installation instruction. ### Classic Theme There is a "Classic" theme that maintains the look of the old calendar. Changes from v6: - **Feature:** more spacious look - **Breaking:** Column headers in DayGrid and TimeGrid are no longer bold by default. See migration guide [for how to restore](api-migration#day-header-classic-bold). ## Shadcn - **Feature:** Shadcn support ([view docs](shadcn)) ## MUI - **Feature:** MUI support ([view docs](mui)) ## Bootstrap - **Breaking:** Bootstrap 4 theme support removed (`@fullcalendar/bootstrap4`) - **Breaking:** Bootstrap 5 theme support removed (`@fullcalendar/bootstrap5`). See [discussion on restoration](https://github.com/fullcalendar/fullcalendar/issues/8040). ## Custom Themes - **Feature:** [Huge selection of className and content-injection settings](render-hook-index), consituting a proper theme system - **Feature:** Only flat CSS selectors needed. No intentionally complicated CSS selectors to increase precedence - **Feature:** Tailwind support - **Breaking:** you cannot style an `fc-*` class-names like `.fc-event` because FullCalendar's default DOM no longer includes them. View the [CSS migration guide »](css-migration) - **Breaking:** customized CSS variables like `--fc-event-bg-color` have been refactor/renamed. View the [CSS migration guide »](css-migration) - **Breaking:** renamed and modifed many display-hooks with names like `*ClassNames`, `*Content`, `*DidMount`, `*WillUnmount`. View the [JS API migration guide »](api-migration) - **Breaking:** removed `Theme` class, registered via `themeClasses` plugin-hook. Was an undocumented API in v6. View the [JS API migration guide »](api-migration#custom-theme-class) ## Toolbar - **Feature:** Infinite control with [`useCalendarController()`](CalendarController). Only for [React](react#custom-toolbar-markup) and [Vue](vue#custom-toolbar-markup). - **Feature:** Toolbar CSS is more robust on smaller screens and more customizable for desired responsive behavior ([#4638](https://github.com/fullcalendar/fullcalendar/issues/4638)) - **Feature:** for built-in toolbars, can disable "List" buttons while returning i18n, set listText:false - **Feature:** for built-in toolbars, class-name and mount/unmount hooks on buttons of the toolbar ([toolbar render hooks](toolbar-render-hooks)) - **Feature:** for built-in toolbars, control whether a button displays text, an icon, or BOTH, and what position of the icon. [`buttonDisplay`](buttonDisplay) or [`buttons[].display`](buttons). - **Feature:** button icons now done with SVG instead of glyphicons. Better for Salesforce LWC and Content Security Policy (CSP). Use `buttons[].iconContent` setting ([more info](buttons)) - **Feature:** additional styling hooks (`toolbarClass`, `toolbarSectionClass`, `toolbarTitleClass`, etc) - **Feature:** for built-in toolbars, add custom elements via [`toolbarElements`](toolbarElements) - **Accessibility:** Use aria-label instead of title attribute ([#7584](https://github.com/fullcalendar/fullcalendar/issues/7584)) - **Accessibility:** Aria improvement for view-switcher within toolbar ([#7809](https://github.com/fullcalendar/fullcalendar/issues/7809), [#6522](https://github.com/fullcalendar/fullcalendar/issues/6522)) - **Accessibility:** Customizable heading hierarchy level via [`headingLevel`](headingLevel) ([#6972](https://github.com/fullcalendar/fullcalendar/issues/6972)) - **Behavior:** If a button string was added to [`headerToolbar`](headerToolbar) or [`footerToolbar`](footerToolbar), but its text was not defined in `customButtons`, would display as an empty button (ugly). Now, if no text is defined (in [`buttons`](buttons) map), will fall back to displaying the button string. - **Breaking:** Huge change in skeleton. Uses flexbox. - **Breaking:** [`headerToolbar`](headerToolbar) is disabled by default, unlike in v6 when rendered title, prev, next, and today buttons. (see [migration guide](api-migration#toolbar)) - **Breaking:** `customButtons` renamed to [`buttons`](buttons) (used for custom *and* standard buttons) - **Breaking:** `buttonText` removed in favor of `buttons[].text` (see [migration guide](api-migration#toolbar)) - **Breaking:** `buttonIcons` removed in favor of `buttons[].iconClass` (see [migration guide](api-migration#toolbar)) - **Breaking:** For [`headerToolbar`](headerToolbar)/[`footerToolbar`](footerToolbar), when calendar `direction:'rtl'`, elements within toolbar sections specified as `left` and `right` now span right-to-left (are we sure we want to do this!!??) - **Breaking:** (all themes) visually capitalizes button name strings, like "Today" versus old "today" - **Breaking:** Default [`titleFormat`](titleFormat) for week views omits day numbers. So now like `Jan 2026` or `Jan - Feb 2026` instead of `Jan 25 – 31, 2026`. This is because the day-numbers are presumed displayed in the column headers. - **Breaking:** `titleRangeSeparator` removed. Range separator is now determined by the Intl API. ## Events (General) - **Feature:** set event color, but only for background events (no normal events). [`backgroundEventColor`](backgroundEventColor) - **Feature:** additional class-name settings for background events ([more info](background-event-render-hooks)) - **Feature:** additional class-name settings for styling subparts of a foreground event element (`eventBeforeClass`, `eventInnerClass`, `eventTimeClass`, etc) ([more info](event-render-hooks)) - **Feature:** additional class-name settings for targeting specific types of events ("block" events, "list-item" events, etc) - **Feature:** event-related class-name and mount hooks, callbacks given much more data (`isInteractive`, `isShort`, etc) - **Print:** background events no longer white-out portions of page for print-view. Instead, rendered with 1px colored borders instead. - **Performance:** Fixed unnecessary event rendering and calling of [`eventContent`](event-render-hooks) when unrelated events change ([#3003](https://github.com/fullcalendar/fullcalendar/issues/3003), [#7650](https://github.com/fullcalendar/fullcalendar/issues/7650)) - **Performance:** DayGrid/TimeGrid rendering performance gain ([#7677](https://github.com/fullcalendar/fullcalendar/issues/7677)) - **Accessibility:** Non-editable events should not be rendered as anchor tags ([#7675](https://github.com/fullcalendar/fullcalendar/issues/7675)) - **Accessibility:** Give `role=button` to clickable event elements w/o urls ([#7567](https://github.com/fullcalendar/fullcalendar/issues/7567)) - **Accessibility:** Event time order different than DOM order, bad for tabbing ([#6943](https://github.com/fullcalendar/fullcalendar/issues/6943)) - **Breaking:** Calendar-wide event settings were renamed: `eventClassNames` -> `eventClass`, `eventBackgroundColor`/`eventBorderColor` -> `eventColor`, and `eventTextColor` -> `eventContrastColor` (see [migration guide](api-migration#events-general)). - **Breaking:** `eventClass` (formerly `eventClassNames`), `eventContent`, `eventDidMount`, `eventWillUnmount` *no longer apply to background events*. - **Breaking:** Event input + Event API fields were renamed: `classNames` -> `className`, `backgroundColor`/`borderColor` -> `color`, and `textColor` -> `contrastColor` (see [migration guide](api-migration#events-general)). - **Breaking:** Event-source fields were renamed: `classNames` -> `className`, `backgroundColor`/`borderColor` -> `color`, and `textColor` -> `contrastColor` (see [migration guide](api-migration#events-general)). - **Breaking:** In v6, for list-item events in DayGrid view, the content generated [`eventContent`](event-render-hooks) would clear rendering of the colored dot. In v7, `eventContent` injects into the "inner" container (aka `eventInnerClass`) which does not wrap the dot (aka `eventBeforeClass`). ([Learn how to restore old behavior](api-migration#event-inner-and-dot)) - **Breaking:** Event API's [`.toPlainObject()`](Event-toPlainObject) and `.toJSON()` methods have modified signatures and return types ## Resources (General) - **Breaking:** Resource input + Resource API fields were renamed: `eventClassNames` -> `eventClass`, `eventBackgroundColor`/`eventBorderColor` -> `eventColor`, and `eventTextColor` -> `eventContrastColor` (see [migration guide](api-migration#events-general)). - **Breaking:** The generic `resourceLabel*` settings have been replaced with more UI-specific settings (link: [`resourceDayHeader*`](resource-day-header-render-hooks) and link: [`resourceCell*`](resource-cell-render-hooks)) - **Breaking:** Resource API's [`.toPlainObject()`](Resource-toPlainObject) and `.toJSON()` methods have modified signatures and return types ## Calendar Views (General) - **Feature:** slimmed down HTML skeleton. Removed nested ``s in favor of Flexbox. Accessibility is maintained and even improved in many instances via `role`/`aria` attributes. - **Feature:** class-names for table-like elements across views: `tableHeaderClass`, `tableBodyClass` ([table render hooks](table-render-hooks)) - **Breaking:** `viewClassNames` was renamed to `viewClass` (simple string). See [View Render Hooks](view-render-hooks). - **Performance:** Less layout thrashing ([#4906](https://github.com/fullcalendar/fullcalendar/issues/4906)) - **Accessibility:** - Better table semantics for screen readers ([#6641](https://github.com/fullcalendar/fullcalendar/issues/6641), [#7656](https://github.com/fullcalendar/fullcalendar/issues/7656), [#7455](https://github.com/fullcalendar/fullcalendar/issues/7455)) - **Accessibility:** - Invalid `role` attributes on td/th/tr elements inside a table element ([#7568](https://github.com/fullcalendar/fullcalendar/issues/7568)) - **Accessibility:** - Certain date/time text should be text-selectable ([#5628](https://github.com/fullcalendar/fullcalendar/issues/5628)) - **Accessibility:** - Improve nav-link aria attributes, give `role=link` ([#7567](https://github.com/fullcalendar/fullcalendar/issues/7567)) - **Accessibility:** - All calendar views now pass [Axe accessibility testing](https://www.deque.com/axe/) with the exception of a false-positive [scrollbar error](https://github.com/fullcalendar/fullcalendar/issues/7481), [which has a workaround](#). - **Behavior:** no more console.warn on unknown options ### Sizing & Scrollbars - **Feature:** Improved responsiveness where text-size and date-formatting collapse when a day's width goes below [`dayNarrowWidth`](dayNarrowWidth) - **Feature:** Removed the `.updateSize()` method. No need to call it after the page's dimensions have been programmatically changed. All sizing/positioning of events and views will stay updated automatically. - **Bugfix:** Layout does not resize to new container width after browser resizing ([#6407](https://github.com/fullcalendar/fullcalendar/issues/6407)) - **Bugfix:** Dynamic calendar width doesn't adjust ([#5507](https://github.com/fullcalendar/fullcalendar/issues/5507)) - **Bugfix:** Adjust calendar sizing when scrollbar width changes (or (de)activated) ([#5561](https://github.com/fullcalendar/fullcalendar/issues/5561)) - **Bugfix:** Don't show MacOS/iOS hovering scrollbars in timeline header/left ([#5180](https://github.com/fullcalendar/fullcalendar/issues/5180)) - **Bugfix:** Disable hovering scrollbars in header/resourceArea ([#6894](https://github.com/fullcalendar/fullcalendar/issues/6894)) - **Bugfix:** Unnecessary scrollbars in day headers ([#6047](https://github.com/fullcalendar/fullcalendar/issues/6047)) - **Breaking:** `windowResize` event removed, no longer fires. To adjust your dimensions in response to the calendar's dimensions changing, use [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver). - **Breaking:** `handleWindowResize` setting removed. Controlled if `windowResize` should fire. - **Breaking:** `windowResizeDelay` setting removed. Controlled how often `windowResize` should fire. - **Breaking:** `stickyHeaderDates` renamed to [`tableHeaderSticky`](tableHeaderSticky) - **Breaking:** `stickyFooterScrollbar` renamed to [`footerScrollbarSticky`](footerScrollbarSticky) - **Breaking:** [`tableHeaderSticky`](tableHeaderSticky) (formerly `stickyHeaderDates`) no longer applies to list-view day-headers. Those are now unconditionally sticky, depending on the theme. ### Nav-Links - **Feature:** possible to target *specific* nav-links in the UI ([more info](navLinks)) - **Breaking:** `navLinkClassNames` renamed to [`navLinkClass`](navLinkClass), accepts only a simple string ### Popover & More-Links - **Feature:** new class-name settings `moreLinkInnerClass` - **Feature:** view-specific more-link class-name hooks: [`columnMoreLink*`](column-more-link-render-hooks) (TimeGrid) and [`rowMoreLink*`](row-more-link-render-hooks) (DayGrid/Timeline) - **Feature:** more data in [`moreLink*` hooks](more-link-render-hooks) (ex: `numericText`, `longText`, `isNarrow`) - **Breaking:** `moreLinkClassNames` was renamed to `moreLinkClass` (simple string). See [More-Link Render Hooks](more-link-render-hooks). - **Breaking:** `dayPopoverFormat` was renamed to [`popoverFormat`](popoverFormat). - **Accessibility:** Improve +more link popover-like aria attributes ([#7567](https://github.com/fullcalendar/fullcalendar/issues/7567)) - **Accessibility:** Tabbable popover close button ([#7157](https://github.com/fullcalendar/fullcalendar/issues/7157)) - **Accessibility:** Navigate popover items with keyboard ([#6624](https://github.com/fullcalendar/fullcalendar/issues/6624)) ### Week number - **Breaking:** The generic `weekNumber*` settings have been replaced with view-specific names: DayGrid uses [`inlineWeekNumber*`](inline-week-number-render-hooks), and TimeGrid uses [`weekNumberHeader*`](week-number-header-render-hooks). - **Bugfix:** date given to week-number hooks was never zoned. Similar to dayHeaderContent ticket (in "Staging") but for weekNumberContent. ### All-Day - **Breaking:** The generic `allDay*` settings have been replaced with UI-specific names: TimeGrid uses [`allDayHeader*`](all-day-header-render-hooks). (In List view, all-day text now uses list `event*` hooks.) ### Time Slots - **Feature:** new class-name `slotHeaderInnerClass` - **Feature:** new class-name `slotHeaderRowClass` for the row containing slot headers ([slot header row render hooks](slot-header-row-render-hooks)) - **Feature:** [`slotHeader*` hooks](slot-header-render-hooks) (previously `slotLabel*` hooks) have more data (ex: `isMajor`, `isNarrow`, etc) - **Feature:** [`slotLane*` hooks](slot-lane-render-hooks) have more data (ex: `isMajor`, `isMinor`) - **Breaking**: slot "label" settings were renamed to slot [“header”](slot-header-render-hooks): `slotLabelClassNames` -> `slotHeaderClass`, `slotLabelContent` -> `slotHeaderContent`, `slotLabelDidMount` -> `slotHeaderDidMount`, and `slotLabelWillUnmount` -> `slotHeaderWillUnmount` (see [Slot Header Render Hooks](slot-header-render-hooks)). Class-names must be simple strings. - **Breaking:** `slotLaneClassNames` was renamed to `slotLaneClass` (simple string), and `slotLaneContent` was removed (no replacement). See [Slot Lane Render Hooks](slot-lane-render-hooks). ### Now-Indicator - **Feature:** new class-name `nowIndicatorDotClass` for [“dot”](now-indicator-dot-render-hooks) next to their now indicator line ([dot render hooks](now-indicator-dot-render-hooks)) - **Breaking:** in v6, the `nowIndicator*` settings represented BOTH the [“arrow”](now-indicator-header-render-hooks), which appeared in the time axis, and the [“line”](now-indicator-line-render-hooks), which appeared over a day. One would differentiate based on `data.isAxis` (now removed). In v7, there are distinct settings for each ([header](now-indicator-header-render-hooks), [line](now-indicator-line-render-hooks), and [dot](now-indicator-dot-render-hooks)) ### Misc Background Fills - **Feature:** styling hook for date-span highlight (`highlightClass`) ([highlight render hooks](highlight-render-hooks)) - **Feature:** styling hook for non-business-hours (`nonBusinessHoursClass`) ([business hours render hooks](business-hours-render-hooks)) - **Feature:** styling hook for space-filling element (`fillerClass`) ([filler render hooks](filler-render-hooks)). Used in all-day section to offset scrollbar width in timed section. Used in Resource Timeline view when resource-rows don't fill entire height. - **Accessibility:** Add `aria-current="date"` for "today" highlight ([#7502](https://github.com/fullcalendar/fullcalendar/issues/7502)) ## DayGrid View - **Feature:** [`dayCellFormat`](dayCellFormat) for controlling number in cell - **Feature:** Improved responsiveness where text-size and date-formatting collapse when a day's width goes below [`dayNarrowWidth`](dayNarrowWidth) - **Feature:** [`eventSlicing`](eventSlicing) setting, which controls whether DayGrid can can put fragments of multi-day events with +more links. Defaults to `true` (same behavior as v6). - **Feature:** More class-name styling hooks (ex: `dayHeaderDividerClass`, `dayCellTopClass`, etc) (see [Day Header Render Hooks](day-header-render-hooks), [Day Header Row Render Hooks](day-header-row-render-hooks), [Day Header Divider Render Hooks](day-header-divider-render-hooks), [Day Row Render Hooks](day-row-render-hooks), [Day Cell Render Hooks](day-cell-render-hooks)) - **Feature:** new row-level class-name hooks for day-grid structure ([`dayHeaderRowClass`](day-header-row-render-hooks), [`dayRowClass`](day-row-render-hooks)) - **Feature:** More data given to [`dayCell*` hooks](day-cell-render-hooks) (ex: `.isMajor`, `.isNarrow`, etc) - **Feature:** More data given to [`inlineWeekNumber*` hooks](inline-week-number-render-hooks): (ex: `.textParts`, `.isNarrow`, etc) - **Bugfix:** "More" button (events) on smartphones not responsive ([#2991](https://github.com/fullcalendar/fullcalendar/issues/2991)) - **Bugfix:** Day number in day cells are hidden by vertical scrollbar ([#6798](https://github.com/fullcalendar/fullcalendar/issues/6798)) - **Bugfix:** Better dayGrid row height, [`height:'auto'`](height), and +more link behavior ([#6033](https://github.com/fullcalendar/fullcalendar/issues/6033)) - **Bugfix:** Day cells are not always equal height with calendar [`height:'auto'`](height) ([#5762](https://github.com/fullcalendar/fullcalendar/issues/5762)) - **Bugfix:** Events not rendered when container is resized ([#7555](https://github.com/fullcalendar/fullcalendar/issues/7555)) - **Bugfix:** Events overflow below day cell with [`dayMaxEvents:true`](dayMaxEvents) and [`showNonCurrentDates:false`](showNonCurrentDates) ([#6749](https://github.com/fullcalendar/fullcalendar/issues/6749)) - **Bugfix:** Events times are cutoff with [`eventDisplay:'block'`](eventDisplay) when there is not enough space for the title ([#6457](https://github.com/fullcalendar/fullcalendar/issues/6457)) - **Bugfix:** Compressed space between events in dayGrid when month-start title ([#7184](https://github.com/fullcalendar/fullcalendar/issues/7184)) - **Bugfix:** `resourceDayGrid`-views with no resources shows blank resource row ([#7377](https://github.com/fullcalendar/fullcalendar/issues/7377)) - **Bugfix & Breaking-API:** The [`moreLinkClick`](moreLinkClick) date was always UTC, not adjusted by timezone plugins ([#7314](https://github.com/fullcalendar/fullcalendar/issues/7314)). It now stays consistent with the current [`timeZone`](timeZone) setting. - **Breaking-Visual:** When [`height:'auto'`](height), day cells now maintain [`aspectRatio`](aspectRatio) whereas prior, they maintained a min-height of about 3.5em ([#7900](https://github.com/fullcalendar/fullcalendar/issues/7900)) - **Breaking-Visual:** Disabled days (via [`validRange`](validRange)) now display text in DayGrid header cells. Still no content within body cells. - **Breaking-Visual:** The [`weekNumbers:true`](weekNumbers) setting no longer displays week numbers in `dayGridDay` view, `dayGridWeek` view, or any `dayGrid`-based view with only one row - **Accessibility:** Disabled day cells have broken ARIA references ([#7379](https://github.com/fullcalendar/fullcalendar/issues/7379)) - **Accessibility:** Move aria-label/labelledby away from invalid elements to cells ([#7566](https://github.com/fullcalendar/fullcalendar/issues/7566)) - **Print:** Event titles should not repeat each day ([#6657](https://github.com/fullcalendar/fullcalendar/issues/6657)) - **Breaking:** single-row dayGrid (like dayGridWeek) no longer shows month-numbers. week/multi-day views in timegrid/daygrid will have "Sun 8" header by default, instead of "Sun 8/5" header (no more month number. just day-of-month) - **Breaking:** `dayHeaderClassNames` was renamed to `dayHeaderClass` (simple string). Horizontal alignment now uses `dayHeaderAlign` instead of CSS text-align. See [Day Header Render Hooks](day-header-render-hooks). - **Behavior:** The `dayHeader*` settings now apply to the popover header, which is usually desirable. See [Popover CSS migration docs](css-migration#popover). - **Breaking:** `dayCellClassNames` was renamed to `dayCellClass` (simple string), and `dayCellContent` was renamed to `dayCellTopContent`. See [Day Cell Render Hooks](day-cell-render-hooks). - **Behavior:** The `dayCell*` settings now apply to the popover body, which is usually desirable. See [Popover CSS migration docs](css-migration#popover). - **Breaking:** The `dayCell*` settings previously applied to [TimeGrid Day Lane](day-lane-render-hooks), but no longer. - **Breaking:** Week numbers in DayGrid were renamed from `weekNumber*` (inside `views.dayGrid`) to top-level [“inline week numbers”](inline-week-number-render-hooks) / `inlineWeekNumber*` settings. Class-name settings must be simple strings. ## Resource DayGrid View - **Feature:** new class-name setting `resourceDayHeaderInnerClass` - **Feature:** more data given to [`resourceDayHeader*`](resource-day-header-render-hooks) (formerly `resourceLabel*`) hooks (ex: `.isToday`, `.isPast`, etc) - **Breaking:** "Resource labels", as they render in DayGrid and TimeGrid, are now called [“resource day headers”](resource-day-header-render-hooks). You can configure them as top-level settings, and class-name settings must be simple strings ## TimeGrid View See the [DayGrid View](#daygrid-view) section for subcomponents of the All-Day section. - **Feature:** Improved responsiveness where text-size and date-formatting collapse when a day's width goes below [`dayNarrowWidth`](dayNarrowWidth) - **Feature:** new class-name settings (ex: `weekNumberHeaderInnerClass`, `allDayHeaderInnerClass`, etc) - **Feature:** the week-number-heeader hooks ([`weekNumberHeader*`](week-number-header-render-hooks)) have more data (ex: `.textParts`, `.isNarrow`) - **Feature:** the all-day header hooks ([`allDayHeader*`](all-day-header-render-hooks)) have more data (ex: `.isNarrow`) - **Feature:** the day-lane hooks ([`dayLane*`](day-lane-render-hooks)) have more data (`.isNarrow`, `.isStack`, etc) - **Bugfix:** TimeGrid "all-day" text is better aligned, better split across multiple lines - **Breaking-Visual:** Newlines in `allDayText` will be displayed as line breaks in TimeGrid - **Breaking-Visual:** TimeGrid overlapping events that previously spanned full column width now have a right margin. This was an accidental regression from v5 → v6, and the v5 behavior is restored ([#6569](https://github.com/fullcalendar/fullcalendar/issues/6569)) - **Breaking-Visual:** Disabled days (via [`validRange`](validRange)) now display text in TimeGrid header cells. Still no content within body cells. - **Breaking-Visual:** The "all-day" text now appears capitalized as "All-day" - **Accessibility:** TimeGrid accessibility markup more table-like, puts timed events in single "row" labelled by `timedText` settin - **Print:** First page blank when multiple pages ([#7007](https://github.com/fullcalendar/fullcalendar/issues/7007)) - **Print:** Last event cut-off when multiple pages ([#7673](https://github.com/fullcalendar/fullcalendar/issues/7673)) - **Print:** Show all time slot lines ([#5465](https://github.com/fullcalendar/fullcalendar/issues/5465)). *Note:* it was impossible to achieve multi-page breaking in Firefox, so falls back to flat list of events without slot lines. - **Print:** new `eventPrintLayout` setting to control exact print behavior of stacking versus slots. [More info](print#timegrid-print-view) - **Breaking:** Week numbers in TimeGrid were renamed from `weekNumber*` (inside `views.timeGrid`) to top-level [“week number headers”](week-number-header-render-hooks) / `weekNumberHeader*` settings. Class-name settings must be simple strings. - **Breaking:** The all-day section label in TimeGrid was renamed from `allDay*` (inside `views.timeGrid`) to top-level [“all day header”](all-day-header-render-hooks) / `allDayHeader*` settings. Class-name settings must be simple strings. - **Breaking:** TimeGrid lane hooks were renamed from `dayCell*` to `dayLane*` (`dayCellClassNames` -> `dayLaneClass`, `dayCellDidMount` -> `dayLaneDidMount`, `dayCellWillUnmount` -> `dayLaneWillUnmount`). Lane class-name settings must be simple strings, and `dayCellContent` was removed (no replacement). See [Day Lane Render Hooks](day-lane-render-hooks). ## Resource TimeGrid View - **Bugfix:** `resourceTimeGrid`-views with no resources shows blank resource row ([#7377](https://github.com/fullcalendar/fullcalendar/issues/7377)) - **Breaking-Visual:** The [`weekNumbers:true`](weekNumbers) setting no longer displays week numbers in `resourceTimeGridDay` view, because x-axis header cell alongside resource names is reserved for a future label ## List View - **Breaking:** `listDaySideFormat` was renamed to [`listDayAltFormat`](listDayAltFormat). - **Feature:** better computed [listDayFormat](listDayFormat)/[listDayAltFormat](listDayAltFormat) for custom-duration-views. instead of just empty values - **Feature:** more class-name settings (ex: `listDayClass`, `listDayBodyClass`, `noEventsInnerClass`, etc) - **Feature:** more data given to [`listDayHeader*`](list-day-header-render-hooks) callbacks (ex: `.textParts`, `.dayNumbrText`, etc) - **Accessibility:** List-view weekday navLinks should not have `aria-hidden` ([#7645](https://github.com/fullcalendar/fullcalendar/issues/7645)) - **Accessibility:** List-view accessibility markup less table-like, more list-like. Removed table pseudo-headers and thus removed the `eventHint` and `timeHint` locale settings. - **Accessibility:** aria structure done differently, as nest list+listitem, instead of table + colgroups - **Behavior:** list-event time "column" is hardcoded as 165px width - **Bugfix:** List View sticky headers lack bottom border ([#7778](https://github.com/fullcalendar/fullcalendar/issues/7778)) - **Breaking:** List-view day header hooks moved from `views.list.dayHeader*` to top-level `listDayHeader*` settings (for example, `dayHeaderClassNames` -> `listDayHeaderClass`, `dayHeaderContent` -> `listDayHeaderContent`). See [List Day Header Render Hooks](list-day-header-render-hooks). Class-name settings must be simple strings. - **Breaking:** In List view, all-day event text is no longer customized via generic `allDay*` hooks. Use list `event*` hooks instead - **Breaking:** `noEventsClassNames` has been renamed to `noEventsClass`, which accepts only a simple string (see [no-events render hooks](no-events-render-hooks)) - **Breaking-Visual:** The "all-day" text on events now appears capitalized as "All-day" ## MultiMonth View - **Feature:** navlinks on single-month title - **Feature:** Improved responsiveness where text-size and date-formatting collapse when a day's width goes below [`dayNarrowWidth`](dayNarrowWidth) - **Feature:** more class-name settings for customization (ex: `singleMonthClass`, `singleMonthHeaderClass`, etc) - **Breaking-Visual:** The `multiMonthMinWidth` pixel value now *includes* the padding within each month tile - **Performance:** MultiMonth performance gain, solving "Forced reflow while executing JavaScript took <#> ms" violation ([#7209](https://github.com/fullcalendar/fullcalendar/issues/7209)) - **Accessbility:** Improve MultiMonth title hierarchy via `role=list` ([#7537](https://github.com/fullcalendar/fullcalendar/issues/7537)) - **Breaking:** `multiMonthMinWidth` and `multiMonthTitleFormat` are renamed to [`singleMonthMinWidth`](singleMonthMinWidth) and [`singleMonthTitleFormat`](singleMonthTitleFormat) - **Breaking:** [`singleMonthMinWidth`](singleMonthMinWidth) (formerly `multiMonthMinWidth`) now INCLUDES padding ## Timeline View - **Feature:** more formal styling hooks for defining space above and below timeline events - **Bugfix:**: scrollTime slightly off when switching from timeline month to week ([5686](https://github.com/fullcalendar/fullcalendar/issues/5686)) - **Bugfix & Breaking-API:** The [`moreLinkClick`](moreLinkClick) date is always UTC, not adjusted by timezone plugins ([#7314](https://github.com/fullcalendar/fullcalendar/issues/7314)). It now stays consistent with the current [`timeZone`](timeZone) setting. - **Print:** Show all time slot lines ([#6636](https://github.com/fullcalendar/fullcalendar/issues/6636), [#6802](https://github.com/fullcalendar/fullcalendar/issues/6802)) ## Resource Timeline View - **Feature:** In Resource Timeline view, a high-level `resourceColumnHeader*` cell (previously `resourceAreaHeader*`) above columns now stays fixed during horizontal scrolling ([#7779](https://github.com/fullcalendar/fullcalendar/issues/7779)) - **Feature:** If [`resourceAreaWidth`](resourceAreaWidth) or `resourceAreaColumns.width` specified as percentage, will persist as percentage after user-resize - **Feature:** more class-name hooks (ex: [`resourceHeaderRowClass`](resource-header-row-render-hooks), [`resourceRowClass`](resource-row-render-hooks), etc) - **Bugfix:** Resource rows don't adjust height to fit resourceLaneContent ([#6103](https://github.com/fullcalendar/fullcalendar/issues/6103)) - **Bugfix:** Resource rows don't render with correct height ([#6082](https://github.com/fullcalendar/fullcalendar/issues/6082)) - **Bugfix:** Resource-Timeline scrolls down when it shouldn't, attempting to preserve scroll state ([#4443](https://github.com/fullcalendar/fullcalendar/issues/4443)) - **Print:** Resource rows no longer break across pages - **Print:** Resource-area columns shrink-to-fit based on percentage, saving more space for timeline - **Print:** Print-view limited to 1000 resources, to prevent browser's print dialog from crashing - **Breaking:** `resourceAreaColumns` is renamed to [`resourceColumns`](resourceColumns), and related `*ClassNames` hooks are now `*Class` string settings - **Breaking:** In v6, the `resourceGroupLabel*` settings where used to style both row-grouping group headers AS WELL AS column-grouping cells, without any way to distinguish the two from the callbacks themselves. In v7, there are two separate entities for each ([`resourceGroupHeader*`](resource-group-header-render-hooks) and the generic [`resourceCell*`](resource-cell-render-hooks)). Also, `.groupValue` is killed - **Breaking:** `resourceLabel*` has been replaced by generalized [`resourceCell*`](resource-cell-render-hooks) hooks. If you only want the title cell, branch on `data.field === 'title'` - **Breaking:** `resourceLaneClassNames` is renamed to `resourceLaneClass` (simple string only), and `resourceLaneContent` is split into `resourceLaneTopContent` and `resourceLaneBottomContent` ([resource lane render hooks](resource-lane-render-hooks)) - **Breaking:** `resourceGroupLaneClassNames` is renamed to `resourceGroupLaneClass` (simple string only), and group data now uses `fieldValue` instead of `groupValue` ([resource group lane render hooks](resource-group-lane-render-hooks)) ## Custom Views ### Custom view "via settings" - **Breaking:** In custom view definitions, `.classNames` (array) is replaced by `.viewClass` (single string). Also, the `.content`, `.didMount`, and `.willUnmount` settings have been prefixed with "view". [More info](api-migration#custom-view-via-settings) - **Breaking:** The `buttonText` setting no longer respected. Instead, add to the [`buttons`](buttons) map. ### Custom view "via JS" - **Breaking:** If using via "plugin", read in other section how `createPlugin` not used anymore ## Luxon Plugin - **Breaking:** Luxon 1 package removed (`@fullcalendar/luxon`) - **Breaking:** Luxon 2 package removed (`@fullcalendar/luxon2`) - **Breaking:** Luxon 3 package removed (`@fullcalendar/luxon3`) - Temporal used instead for time zone resolution ([more info](temporal-polyfill)) - Formatting and format-string functionality moved to `@fullcalendar/format-luxon3` ([docs](format-luxon3)) - Conversion utilities removed (`toLuxonDateTime` and `toLuxonDuration`) ## Moment Plugins - **Breaking:** moment package removed (`@fullcalendar/moment`) - Date formatting-string functionality moved to `@fullcalendar/format-moment` plugin ([docs](format-moment)) - Date conversion utilities (`toMoment` and `toMomentDuration`) removed - **Breaking:** moment-timezone support removed (`@fullcalendar/moment-timezone`) because time zone resolution is now built-in to FullCalendar via the `temporal-polyfill` peer dependency ([more info](temporal-polyfill)). ## iCalendar Plugin Updates to the `@fullcalendar/icalendar` plugin: - **Breaking:** Your must upgrade the `ical.js` `peerDependency` to v2 ([#7734](https://github.com/fullcalendar/fullcalendar/issues/7734)) ## Custom Plugins - **Breaking:** the `createPlugin` function no longer necessary to prepare a plugin. Just pass-in the object ## Time Zone - **Feature:** the [`timeZone`](timeZone) setting can be a named time zone (like `"America/New_York"`) without needing a third-party connector plugin. All dates displayed throughout the UI will respect the current named `timeZone`. Dates emitted throughout the API will still be legacy `Date` objects but you are encouraged to [use Temporal](timeZone#using-temporal) to interact with them. ## Temporal The [temporal-polyfill](https://www.npmjs.com/package/temporal-polyfill) package is now a peer dependency of all the FullCalendar packages. This means you are required to install it. The "Temporal" [built-in browser API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Temporal) is coming to all modern browsers, and this package is a polyfill for it, which means it allows you to use it before it's officially supported. FullCalendar **DOES NOT INSTALL IT GLOBALLY** but instead uses it internally. For v7, FullCalendar uses the [tree-shakeable API](https://github.com/fullcalendar/temporal-polyfill?tab=readme-ov-file#tree-shakable-api), meaning the code-size impact will be minimal and there will be no side-effects. Though FullCalendar does not install the polyfill globally, you are welcome to do so for your projects: ```ts import 'temporal-polyfill/global' ``` ## Date Navigation - **Breaking:** in v6, the [`validRange`](validRange) callback would receive the exact [`now`](now) date and update unpredictably. In v7, it receives the start-of-day of the "now" date, and is re-called whenever the day changes over. ## Date Formatting - **Feature:** date-formatting settings that accept Intl object now accept three additional non-standard properties: `weekdayJustify`, `forceCommas`, and `omitTrailing` ([date formatting docs](date-formatting)) - **Feature:** No longer internally implements [formatRange](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatRange)-related functionality. Relies on standard Intl API. - **Feature:** New extended date formatting option that removes trailing punctuation and whitespace - **Breaking:** Subtle differences in range-formatting output. For example v6 would output `"10:00 AM – 11:00 AM"` whereas v7 outputs `"10:00 – 11:00AM"` (removes space & redundant "am") - **Breaking:** `defaultRangeSeparator` settings removed. Range separator is now determined by the Intl API. ## Locales - **Feature:** For hint-generating functions (like `prevUnit`, formerly `buttonHints.prev`), the first arg is a humanized unit string like "Semana" (week in Spanish), which is hard to work with programmatically, but now there is a SECOND arg which is normalized in singular english units, like "week". - **Breaking:** Shape of locale data changed ([more info](api-migration#locales)) - **Breaking:** Changes in week text settings: `weekText` -> `weekTextShort` (ex: `"W"`). Also `weekTextLong` -> `weekText` (ex: `"Week"`). ## Interactions - **Breaking:** removed `fixedMirrorParent` setting, which would allow developers to attach dragged "mirror" elements to an element other than the calendar root element. Now, dragged mirror elements are always attached to the `` (or shadow-root in the case of web-component). ## Distribution - **Breaking:** All packages distributed as ESM modules ONLY. No longer distributed as CJS. - **Breaking:** The vanilla JS NPM package `fullcalendar` (formerly `@fullcalendar/core`) no longer provides `.global.min.js` files. However, [JSDelivr](https://www.jsdelivr.com/) will still respect the `.min.js` extension and auto-minify it. - **Internal-Only:** Embedded Preact (applies to all but React and Preact packages), upgraded to 10.29.1 to take advantage of `flushSync`. ## Premium License While the STANDARD FullCalendar packages have been, and always will be, licensed under the permissive MIT license, the PREMIUM packages have more complex licensing: | Application Type | Company Type | License | | ---------------- | -------------- | --------------------------------------- | | Closed-source | For-profit | Custom commercial license | | Closed-source | Not-for-profit | Creative Commons non-commercial license | | Open-source | For-profit | **v6**: GPLv3 → **v7**: AGPLv3 | | Open-source | Not-for-profit | **v6**: GPLv3 → **v7**: AGPLv3 | In v7, [AGPLv3](https://www.gnu.org/licenses/agpl-3.0.en.html) is replacing GPLv3 as the copyleft license used for open-source projects. If your project's frontend and backend are open-source and AGPLv3-compliant, use the following license key: ```js schedulerLicenseKey: 'AGPL-My-Frontend-And-Backend-Are-Open-Source' ``` We've discovered a few instances of for-profit companies using FullCalendar Premium in closed-source projects, claiming to be GPLv3-compliant via the [SaaS loophole](https://www.mend.io/blog/the-saas-loophole-in-gpl-open-source-licenses/). By switching to AGPLv3, we are closing this loophole and forcing such companies to either purchase a commercial license or stay on v6. If you are the author of a GPL'd SaaS project that uses FullCalendar Premium and are concerned that you cannot upgrade to v7 due to the license change, please consider the benefits of switching to AGPLv3 yourself.