Filament FullCalendar

To use the calendar, you must create a Filament Widget and extend the Saadeilament-fullcalendar Widgets\FullCalendarWidget class.

1. Generate the widget:

php artisan make:filament-widget CalendarWidget

2. Update the class to extend FullCalendarWidget and remove the protected static string $view property from the generated class.

3. Implement the fetchEvents(array $fetchInfo): array method. This method is called by FullCalendar whenever it needs new data (e.g., when navigating between months or changing views). The $fetchInfo array contains start and end timestamps used to filter the data you return.

<?php

namespace App\Filament\Widgets;

use Saade\FilamentFullCalendar\Widgets\FullCalendarWidget;

class CalendarWidget extends FullCalendarWidget
{
    public function fetchEvents(array $fetchInfo): array
    {
        // Return an array of event-like objects or EventData objects
        return [];
    }
}

To enable configuration, you must register the FilamentFullCalendarPlugin within your Panel Provider's plugins array.

<?php

namespace App\Providers\Filament;

use Filament\Panel;
use Filament\PanelProvider;
use Saade\FilamentFullCalendar\FilamentFullCalendarPlugin;

class AdminPanelProvider extends PanelProvider
{
    public function panel(Panel $panel): Panel
    {
        return $panel
            // ... other configuration
            ->plugin(
                FilamentFullCalendarPlugin::make()
                    // Call configuration methods here
                    ->selectable()
                    ->editable()
            );
    }
}

<?php

namespace App\Providers\Filament;

use Filament\Panel;
use Filament\PanelProvider;
use Saade\FilamentFullCalendar\FilamentFullCalendarPlugin;

class AdminPanelProvider extends PanelProvider
{
    public function panel(Panel $panel): Panel
    {
        return $panel
            ->default()
            ->id('admin')
            ->path('admin')
            ...
            ->plugin(
                FilamentFullCalendarPlugin::make()
                    ->schedulerLicenseKey()
                    ->selectable()
                    ->editable()
                    ->timezone()
                    ->locale()
                    ->plugins()
                    ->config()
            );
    }
}

The package uses Filament Actions to allow viewing, creating, editing, and deleting events. To enable this, you must define the $model property in your FullCalendarWidget class and implement the getFormSchema() method to define the form fields used in the action modals.

Note: The form schema does not need to match the FullCalendar event object fields exactly; it should match your Eloquent model's fields.

<?php

namespace App\Filament\Widgets;

use Saade\FilamentFullCalendar\Widgets\FullCalendarWidget;
use App\Models\Event;
use Filament\Forms;

class CalendarWidget extends FullCalendarWidget
{
    public Model | string | null $model = Event::class;

    public function getFormSchema(): array
    {
        return [
            Forms\Components\TextInput::make('name'),

            Forms\Components\Grid::make()
                ->schema([
                    Forms\Components\DateTimePicker::make('starts_at'),
                    Forms\Components\DateTimePicker::make('ends_at'),
                ]),
        ];
    }
}

To display a FullCalendar instance in your Filament dashboard, create a class that extends Saade\FilamentFullCalendar\Widgets\FullCalendarWidget.

You must implement the fetchEvents method to provide the calendar with its event data. This method is called by FullCalendar whenever the user interacts with the calendar (e.g., clicking prev/next or switching views).

You can also define getFormSchema() to provide a Filament form schema used for creating or editing events via modals.

namespace App\Filament\Widgets;

use Saade\FilamentFullCalendar\Widgets\FullCalendarWidget;

class MyCalendarWidget extends FullCalendarWidget
{
    /**
     * FullCalendar will call this function whenever it needs new event data.
     * This is triggered when the user clicks prev/next or switches views.
     * 
     * @param array{start: string, end: string, timezone: string} $info
     */
    public function fetchEvents(array $info): array
    {
        // Return an array of event data
        return [
            [
                'title' => 'Event 1',
                'start' => $info['start'],
                'end' => $info['end'],
            ],
        ];
    }

    public function getFormSchema(): array
    {
        return [
            // Define your Filament form fields here
        ];
    }
}

The fetchEvents method in your widget must return an array of event objects. You have two options:

1. Standard Array (FullCalendar format)

Return an associative array following the FullCalendar event object specification. Common keys include title, start, end, and url.

2. Using the EventData class

For a more fluent API, use the Saade\FilamentFullCalendar\Data\EventData class. This is recommended for cleaner code.

Supported EventData methods include:

• id($id)
• title($title)
• start($start)
• end($end)
• url($url, $shouldOpenUrlInNewTab = false)

<?php

namespace App\
Filament\
Widgets;

use Saade\
FilamentFullCalendar\
Widgets\
FullCalendarWidget;
use Saade\
FilamentFullCalendar\
Data\
EventData;
use App\
Models\
Event;

class CalendarWidget extends FullCalendarWidget
{
    public function fetchEvents(array $fetchInfo): array
    {
        return Event::query()
            ->where('starts_at', '>=', $fetchInfo['start'])
            ->where('ends_at', '<=', $fetchInfo['end'])
            ->get()
            ->map(
                fn (Event $event) => EventData::make()
                    ->id($event->uuid)
                    ->title($event->name)
                    ->start($event->starts_at)
                    ->end($event->ends_at)
                    ->url(
                        url: EventResource::getUrl(name: 'view', parameters: ['record' => $event]),
                        shouldOpenUrlInNewTab: true
                    )
            )
            ->toArray();
    }
}