saade/filament-fullcalendar v5.0.0-beta3

on GitHub

A theme made for Filament

The calendar now uses a theme built on FullCalendar 7's theme system. It takes its colors from your panel: the primary color for buttons, today and events, and the gray scale for borders and text. It follows your panel into dark mode, and its classes are Tailwind classes, compiled by your panel's theme. No more CSS overrides fighting FullCalendar's stylesheet.

Pick a look

Prefer FullCalendar's own look? All five of its themes ship with the plugin, each with its color palettes:

FilamentFullCalendarPlugin::make()
    ->theme('monarch')
    ->palette('purple')
    ->nativeToolbar()

filament	breezy	classic
forma	monarch	pulse

nativeToolbar() lets FullCalendar draw the toolbar in the theme's style instead of using Filament buttons. Your actions, filters and custom tools come along, with their icons, tooltips and badges.

Colors

color() takes the name of any color registered in Filament, such as success, or a palette from Filament's Color class for anything else:

use Filament\Support\Colors\Color;

EventData::make()->color('success');
EventData::make()->color(Color::hex('#fde047'))->contrastColor('#000');

The same goes for color() on event sources and eventColor() on resources. contrastColor() sets the text color on the themes that fill events with their color.

Your FullCalendar 6 configuration keeps working

FullCalendar 7 renamed a lot of options, event fields and render hooks. The plugin translates the old names for you, so things like eventClassNames, customButtons, buttonText, slotLabelFormat or backgroundColor on an event keep working. A few of FullCalendar 6's class names, such as fc-event and fc-daygrid-day, are also put back on their elements.

These are deprecated and will be removed in the next major:

• backgroundColor(), borderColor() and textColor() on events and event sources, in favor of color() and contrastColor()
• eventBackgroundColor(), eventBorderColor() and eventTextColor() on resources, in favor of eventColor() and eventContrastColor()
• the widget's eventClassNames(), in favor of eventClass()
• FullCalendar 6's class names, in favor of the class-name options and the widget's own fi-fc-* classes

One script

The plugin ships a single script again, with no extra files for your application to serve. It holds FullCalendar 7, the premium views, recurrence, locales, external calendars and all six themes.

Fixed

• A tool with a hidden label, such as filters, showed no badge.
• A tool's active state that read an option with calendar.getOption(), such as a Weekends toggle, did not change when the option did.

Before you update

Most of this is handled for you. These need your attention:

• CSS written for FullCalendar's elements. FullCalendar 7 generates its class names and replaced its --fc-* variables, so selectors such as .fc-daygrid-event match nothing. Use FullCalendar's class-name options instead, such as eventClass or dayCellClass.
• Moment format strings. The moment plugin is gone, so a format such as 'titleFormat' => 'MMMM YYYY' no longer works. Use a date formatting object instead.
• FullCalendar Premium's open-source key. It changed from GPLv3 to AGPLv3. If you used GPL-My-Project-Is-Open-Source, the new key is AGPL-My-Frontend-And-Backend-Are-Open-Source, which requires both your frontend and your backend to be open source.

After updating, publish the new script and rebuild your theme:

composer update saade/filament-fullcalendar
php artisan filament:assets
npm run build

The upgrade guide covers every rename and what's left to change by hand.

Thanks again to everyone testing the betas. 💛

Full Changelog: v5.0.0-beta2...v5.0.0-beta3