Configuring events

The CalendarEvent object is a fluent wrapper around the event object of the underlying calendar package. This page goes through the available methods.

Title

Sets the title that is rendered in the calendar:

CalendarEvent::make()->title('My event');

To output HTML, pass a HtmlString or any other Htmlable:

CalendarEvent::make()->title(new HtmlString('<b>My event</b>'));

Start and end date

CalendarEvent::make()
    ->start(today())
    ->end(today()->addDays(3));

All-day events

CalendarEvent::make()->allDay();

Colors

By default, events use the primary color of your filament panel. You can override the background and text color per event:

CalendarEvent::make()
    ->backgroundColor('#ff0000')
    ->textColor('#ffffff');

Styles

For more control than the colors, you can apply custom CSS styles to the event element. The array accepts three formats, and you can mix them freely:

CalendarEvent::make()->styles([
    'color: red' => $this->isImportant(), // applied only if the condition is true
    'background-color' => '#ffff00',      // property => value
    'font-size: 12px',                    // always applied
]);

The conditional format is handy for styling based on the state of a record, for example graying out cancelled events.

Classes

The same pattern works for CSS classes, via classNames (or its alias classes):

CalendarEvent::make()->classNames([
    'my-event',
    'my-event--cancelled' => $this->isCancelled(), // applied only if the condition is true
]);

Display mode

By default, events render as blocks. You can render an event as a background event instead, which fills the whole date cell:

CalendarEvent::make()
    ->display('background')
    // or use the short-hands:
    ->displayBackground()
    ->displayAuto();

Editing behavior

When drag & drop or resizing is enabled on the widget, you can still lock individual events:

CalendarEvent::make()
    ->editable(false)         // neither draggable nor resizable
    ->startEditable(false)    // not draggable
    ->durationEditable(false); // not resizable

Click action

Sets the action to mount when the event is clicked. It can be the name of any filament action defined in your widget. The view and edit actions are already provided for you:

CalendarEvent::make()->action('edit');

Please read the actions page for how actions work inside the calendar.

Model and record key

To mount actions with the correct record, the event needs to know the model class and the record key. Passing the record to make sets both for you:

$record = Foo::find(1);

CalendarEvent::make($record);

// which is equivalent to:
CalendarEvent::make()
    ->model($record::class)
    ->key($record->getKey());

The model is also used to pick the right schema and event content when you work with multiple models.

URL

Instead of mounting an action, an event can simply link somewhere:

CalendarEvent::make()->url('https://example.com', target: '_self');

The target defaults to _blank.

Linking to resources

If you use resources, tell the event which resource(s) it belongs to:

CalendarEvent::make()
    ->resourceId('foo')             // a single resource ID, can be repeated
    ->resourceIds(['bar', 'baz']);  // or multiple at once

Timezone

If a specific event should be interpreted in a different timezone, you can set it per event:

CalendarEvent::make()->timezone('Europe/Prague');

Custom data

You can pass any custom data to the event. It ends up in the extendedProps of the calendar object, which is useful for custom event content:

CalendarEvent::make()
    ->extendedProp('foo', 'bar')
    // or
    ->extendedProps(['baz' => 'qux']);