Filament FullCalendar

https://github.com/saade/filament-fullcalendar
Admin
Filament FullCalendar is a Laravel package that embeds the FullCalendar JavaScript library as a...
Tokens:8,181
Snippets:29
Trust Score:9.9
License:MIT
Update:11 months ago
Show doc for...
Tokens:
Raw
### Install Filament FullCalendar Package

Source: https://github.com/saade/filament-fullcalendar/blob/4.x/README.md

Installs the Filament FullCalendar package using Composer. This command fetches the latest version of the package and its dependencies.

```bash
composer require saade/filament-fullcalendar:^3.0
```

--------------------------------

### Basic Calendar Widget Setup with Model and Form Schema

Source: https://github.com/saade/filament-fullcalendar/blob/4.x/README.md

This PHP code demonstrates the basic setup of a Filament FullCalendar widget. It specifies the Eloquent model to use for events and defines the form schema for creating and editing events, including fields like 'name', 'starts_at', and 'ends_at'.

```php
<?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'),
                ]),
        ];
    }
}
```

--------------------------------

### Configure FilamentFullCalendarPlugin

Source: https://github.com/saade/filament-fullcalendar/blob/4.x/README.md

Adds the `FilamentFullCalendarPlugin` to the Filament panel configuration. This snippet shows how to enable various FullCalendar features like scheduler license key, selectability, editability, timezone, locale, and custom configurations. It requires the `FilamentFullCalendarPlugin` to be installed and imported.

```php
<?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()
            );
    }
}
```

--------------------------------

### Customize Calendar Configuration

Source: https://github.com/saade/filament-fullcalendar/blob/4.x/README.md

Customizes the appearance and behavior of the FullCalendar widget by overriding the `config` method. This example sets the first day of the week to Monday and defines a custom header toolbar layout. It assumes the `Event` model is set as the widget's model.

```php
<?php
namespace App\Filament\Widgets;

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

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

    public function config(): array
    {
        return [
            'firstDay' => 1,
            'headerToolbar' => [
                'left' => 'dayGridWeek,dayGridDay',
                'center' => 'title',
                'right' => 'prev,next today',
            ],
        ];
    }
}
```

--------------------------------

### Fetch Events using EventData Class

Source: https://github.com/saade/filament-fullcalendar/blob/4.x/README.md

Fetches events and uses the `EventData` class for a more fluent and structured way to create FullCalendar event objects. This method allows for method chaining to define event properties like ID, title, start, end, and URL. Dependencies include the Event model, EventResource, and the EventData class.

```php
<?php

namespace App\Filament\Widgets;

use Saade\FilamentFullCalendar\Widgets\FullCalendarWidget;
use App\Filament\Resources\EventResource;
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();
    }
}
```

--------------------------------

### PHP: Create Event on Day Selection

Source: https://github.com/saade/filament-fullcalendar/blob/4.x/README.md

Pre-fills event form with selected date range when user selects a day on the calendar. Uses mountUsing method to populate start and end fields from selection arguments. Depends on Forms\Form class and requires CreateAction from Saade\FilamentFullCalendar\Actions.

```php
use Saade\FilamentFullCalendar\Actions\CreateAction;

protected function headerActions(): array
 {
     return [
         Actions\CreateAction::make()
             ->mountUsing(
                 function (Forms\Form $form, array $arguments) {
                     $form->fill([
                         'starts_at' => $arguments['start'] ?? null,
                         'ends_at' => $arguments['end'] ?? null
                     ]);
                 }
             )
     ];
 }
```

--------------------------------

### Creating Calendar Widget with fetchEvents in PHP

Source: https://context7.com/saade/filament-fullcalendar/llms.txt

This snippet extends FullCalendarWidget to implement the fetchEvents method, querying events from the database based on date range and mapping them to FullCalendar format. It depends on an Event model and requires fetchInfo array with start, end, and timezone. Outputs an array of event objects; limitations include manual mapping without fluent API benefits.

```php
<?php

namespace App\Filament\Widgets;

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

class CalendarWidget extends FullCalendarWidget
{
    public function fetchEvents(array $fetchInfo): array
    {
        // $fetchInfo contains: ['start' => '2025-01-01', 'end' => '2025-02-01', 'timezone' => 'UTC']
        return Event::query()
            ->where('starts_at', '>=', $fetchInfo['start'])
            ->where('ends_at', '<=', $fetchInfo['end'])
            ->get()
            ->map(fn (Event $event) => [
                'id' => $event->id,
                'title' => $event->name,
                'start' => $event->starts_at,
                'end' => $event->ends_at,
                'url' => route('events.show', $event),
                'shouldOpenUrlInNewTab' => true,
                'backgroundColor' => $event->color,
            ])
            ->toArray();
    }
}
```

--------------------------------

### Fetch Events from Database

Source: https://github.com/saade/filament-fullcalendar/blob/4.x/README.md

Fetches events from the database within a specified date range and maps them to FullCalendar event objects. It uses Eloquent to query the 'events' table and formats the results with title, start, end, and URL properties. Dependencies include the Event model and EventResource for generating URLs.

```php
<?php

namespace App\Filament\Widgets;

use Saade\FilamentFullCalendar\Widgets\FullCalendarWidget;
use App\Filament\Resources\EventResource;
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) => [
                    'title' => $event->id,
                    'start' => $event->starts_at,
                    'end' => $event->ends_at,
                    'url' => EventResource::getUrl(name: 'view', parameters: ['record' => $event]),
                    'shouldOpenUrlInNewTab' => true
                ]
            )
            ->toArray();
    }
}
```

--------------------------------

### Configure Filament FullCalendar Plugin Globally

Source: https://context7.com/saade/filament-fullcalendar/llms.txt

Set default behavior for all calendar widgets by configuring the plugin globally in your Filament panel provider. This example shows how to set the scheduler license key, enable selection and editing, define timezone and locale, and customize core calendar configurations like the header toolbar and time slots.

```php
<?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('YOUR-LICENSE-KEY') // Premium features only
                    ->selectable(true) // Enable date range selection
                    ->editable(true) // Enable drag and drop
                    ->timezone('America/New_York') // Set calendar timezone
                    ->locale('en') // Set calendar locale
                    ->plugins(['dayGrid', 'timeGrid', 'list', 'multiMonth'], merge: false)
                    ->config([
                        'firstDay' => 1, // Monday
                        'headerToolbar' => [
                            'left' => 'prev,next today',
                            'center' => 'title',
                            'right' => 'dayGridMonth,timeGridWeek,timeGridDay',
                        ],
                        'slotMinTime' => '08:00:00',
                        'slotMaxTime' => '18:00:00',
                        'nowIndicator' => true,
                    ])
            );
    }
}
```

--------------------------------

### Building Events with EventData Fluent API in PHP

Source: https://context7.com/saade/filament-fullcalendar/llms.txt

This example uses the EventData fluent interface for type-safe event object creation in fetchEvents, enhancing auto-completion and readability. It relies on Event model and EventData class from the package; inputs are event data from query, outputs array of configured events. Supports extended props but requires manual array conversion; no built-in validation beyond fluent setters.

```php
<?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)
                    ->allDay($event->is_all_day)
                    ->backgroundColor('#3b82f6')
                    ->borderColor('#2563eb')
                    ->textColor('#ffffff')
                    ->url(
                        url: route('events.show', $event),
                        shouldOpenUrlInNewTab: true
                    )
                    ->extendedProps([
                        'description' => $event->description,
                        'location' => $event->location,
                    ])
            )
            ->toArray();
    }
}
```

--------------------------------

### Customize Individual Calendar Widgets with Widget-Level Configuration

Source: https://context7.com/saade/filament-fullcalendar/llms.txt

Override global plugin defaults and customize individual calendar widgets using the `config` method within a custom widget class. This example demonstrates setting specific views, durations, business hours, and event time formats for a particular calendar instance.

```php
<?php

namespace App\Filament\Widgets;

use Saade\FilamentFullCalendar\Widgets\FullCalendarWidget;
use App\Models\Event;
use Illuminate\Database\Eloquent\Model;

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

    public function config(): array
    {
        return [
            'firstDay' => 1,
            'headerToolbar' => [
                'left' => 'dayGridWeek,dayGridDay',
                'center' => 'title',
                'right' => 'prev,next today',
            ],
            'initialView' => 'timeGridWeek',
            'slotDuration' => '00:30:00',
            'businessHours' => [
                'daysOfWeek' => [1, 2, 3, 4, 5],
                'startTime' => '09:00',
                'endTime' => '17:00',
            ],
            'eventTimeFormat' => [
                'hour' => '2-digit',
                'minute' => '2-digit',
                'meridiem' => false,
            ],
        ];
    }

    public function fetchEvents(array $fetchInfo): array
    {
        return [];
    }
}
```

--------------------------------

### PHP: Create Event with Additional Data

Source: https://github.com/saade/filament-fullcalendar/blob/4.x/README.md

Adds additional data to event creation using the mutateFormDataUsing method. This example adds a calendar_id from the current record to the form data. Limited to modifying data before event creation only.

```php
protected function headerActions(): array
 {
     return [
         Actions\CreateAction::make()
             ->mutateFormDataUsing(function (array $data): array {
                 return [
                     ...$data,
                     'calendar_id' => $this->record->id
                 ];
             })
     ];
 }
```

--------------------------------

### PHP: Edit Event After Drag and Drop

Source: https://github.com/saade/filament-fullcalendar/blob/4.x/README.md

Configures form data for editing events after drag-and-drop operations. Uses the mountUsing method to populate the form with event details including updated start and end times from the drag-and-drop arguments. Requires Event model and Forms\Form class.

```php
use Saade\FilamentFullCalendar\Actions;

protected function modalActions(): array
 {
     return [
         Actions\EditAction::make()
             ->mountUsing(
                 function (Event $record, Forms\Form $form, array $arguments) {
                     $form->fill([
                         'name' => $record->name,
                         'starts_at' => $arguments['event']['start'] ?? $record->starts_at,
                         'ends_at' => $arguments['event']['end'] ?? $record->ends_at
                     ]);
                 }
             ),
         Actions\DeleteAction::make(),
     ];
 }
```

--------------------------------

### Auto-fill Event Form with Selected Dates in PHP

Source: https://context7.com/saade/filament-fullcalendar/llms.txt

This PHP snippet demonstrates how to auto-fill event creation form fields using date selections from the FullCalendar widget. It depends on Filament and Saade's FilamentFullCalendar packages. Inputs include date selection arguments like 'start', 'end', and 'allDay'; outputs are populated form data. Limitations include assuming the Event model and basic form schema.

```php
<?php

namespace App\Filament\Widgets;

use Saade\FilamentFullCalendar\Widgets\FullCalendarWidget;
use Saade\FilamentFullCalendar\Actions;
use Filament\Forms;
use App\Models\Event;
use Illuminate\Database\Eloquent\Model;

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

    protected function headerActions(): array
    {
        return [
            Actions\CreateAction::make()
                ->mountUsing(
                    function (Forms\Form $form, array $arguments) {
                        // $arguments contain 'start', 'end', 'allDay', 'resource' from date selection
                        $form->fill([
                            'starts_at' => $arguments['start'] ?? now(),
                            'ends_at' => $arguments['end'] ?? now()->addHour(),
                            'is_all_day' => $arguments['allDay'] ?? false,
                        ]);
                    }
                ),
        ];
    }

    public function getFormSchema(): array
    {
        return [
            Forms\Components\TextInput::make('name')
                ->required()
                ->autofocus(),
            Forms\Components\DateTimePicker::make('starts_at')
                ->required(),
            Forms\Components\DateTimePicker::make('ends_at')
                ->required(),
            Forms\Components\Toggle::make('is_all_day'),
        ];
    }

    public function fetchEvents(array $fetchInfo): array
    {
        return [];
    }
}

```

--------------------------------

### Create a Filament Calendar Widget

Source: https://github.com/saade/filament-fullcalendar/blob/4.x/README.md

Generates a new Filament widget class named 'CalendarWidget' using the Artisan command. This widget will serve as the base for integrating the FullCalendar functionality into your Filament dashboard.

```bash
php artisan make:filament-widget CalendarWidget
```

--------------------------------

### Implement FullCalendarWidget in PHP

Source: https://github.com/saade/filament-fullcalendar/blob/4.x/README.md

Extends the `FullCalendarWidget` class from the Filament FullCalendar package to create a custom calendar widget. It overrides the `fetchEvents` method to retrieve and return event data for the calendar, potentially using the `$fetchInfo` array for date-based filtering.

```php
<?php

namespace App\Filament\Widgets;

use Saade\FilamentFullCalendar\Widgets\FullCalendarWidget;

class CalendarWidget 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 on the calendar.
     */
    public function fetchEvents(array $fetchInfo): array
    {
        // You can use $fetchInfo to filter events by date.
        // This method should return an array of event-like objects. See: https://github.com/saade/filament-fullcalendar/blob/3.x/#returning-events
        // You can also return an array of EventData objects. See: https://github.com/saade/filament-fullcalendar/blob/3.x/#the-eventdata-class
        return [];
    }
}
```

--------------------------------

### Customizing Calendar Widget Actions (Create, Edit, Delete)

Source: https://github.com/saade/filament-fullcalendar/blob/4.x/README.md

This PHP code extends the basic CalendarWidget to customize the actions available for events. It overrides methods to define custom Create, Edit, and Delete actions using Filament Actions, and also specifies the View action. This allows for granular control over user interactions with calendar events.

```php
<?php

namespace App\Filament\Widgets;

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

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

    protected function headerActions(): array
    {
        return [
            Actions\CreateAction::make(),
        ];
    }

    protected function modalActions(): array
    {
        return [
            Actions\EditAction::make(),
            Actions\DeleteAction::make(),
        ];
    }

    protected function viewAction(): Action
    {
        return Actions\ViewAction::make();
    }

    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'),
                ]),
        ];
    }
}
```

--------------------------------

### Include Filament FullCalendar CSS and Views

Source: https://github.com/saade/filament-fullcalendar/blob/4.x/README.md

Adds the Filament FullCalendar package's CSS and Blade view directives to your custom theme or application's main CSS file. This ensures the calendar's styling and components are correctly loaded.

```css
@import '../../../../vendor/saade/filament-fullcalendar/resources/css/filament-fullcalendar.css';

@source '../../../../vendor/saade/filament-fullcalendar/resources/views/**/*.blade.php';
```

--------------------------------

### Enable Drag and Drop Event Editing with mountUsing in Filament FullCalendar (PHP)

Source: https://context7.com/saade/filament-fullcalendar/llms.txt

Pre-fill form fields with updated event data after drag-and-drop operations by utilizing the mountUsing method within the EditAction. This ensures that the form accurately reflects the event's new dates after a user interaction.

```php
<?php

namespace App\Filament\Widgets;

use Saade\FilamentFullCalendar\Widgets\FullCalendarWidget;
use Saade\FilamentFullCalendar\Actions;
use Filament\Forms;
use App\Models\Event;
use Illuminate\Database\Eloquent\Model;

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

    protected function modalActions(): array
    {
        return [
            Actions\EditAction::make()
                ->mountUsing(
                    function (Event $record, Forms\Form $form, array $arguments) {
                        // $arguments['event'] contains new dates after drag/drop
                        $form->fill([
                            'name' => $record->name,
                            'starts_at' => $arguments['event']['start'] ?? $record->starts_at,
                            'ends_at' => $arguments['event']['end'] ?? $record->ends_at,
                        ]);
                    }
                ),
            Actions\DeleteAction::make(),
        ];
    }

    public function getFormSchema(): array
    {
        return [
            Forms\Components\TextInput::make('name')
                ->required(),
            Forms\Components\DateTimePicker::make('starts_at')
                ->required(),
            Forms\Components\DateTimePicker::make('ends_at')
                ->required(),
        ];
    }

    public function fetchEvents(array $fetchInfo): array
    {
        return Event::all()->map(fn ($e) => [
            'id' => $e->id,
            'title' => $e->name,
            'start' => $e->starts_at,
            'end' => $e->ends_at,
        ])->toArray();
    }
}

```

--------------------------------

### Customize Event Rendering with FullCalendar Hooks (PHP)

Source: https://context7.com/saade/filament-fullcalendar/llms.txt

Customize how events are displayed in the FullCalendar widget using PHP. This includes adding tooltips with Alpine.js, applying custom CSS to past events, and prepending icons to all-day events. It also shows how to define custom HTML content for events.

```php
<?php

namespace App\Filament\Widgets;

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

class CalendarWidget extends FullCalendarWidget
{
    // Add tooltip on hover using Alpine.js
    public function eventDidMount(): string
    {
        return <<<JS
            function({ event, timeText, isStart, isEnd, isMirror, isPast, isFuture, isToday, el, view }){
                // Add Alpine.js tooltip
                el.setAttribute("x-tooltip", "tooltip");
                el.setAttribute("x-data", "{ tooltip: '" + event.title + "' }");

                // Add custom CSS class for past events
                if (isPast) {
                    el.classList.add('opacity-50');
                }

                // Add custom icon for all-day events
                if (event.allDay) {
                    const icon = document.createElement('span');
                    icon.innerHTML = '📅 ';
                    el.querySelector('.fc-event-title').prepend(icon);
                }
            }
        JS;
    }

    // Customize event content
    public function eventContent(): string
    {
        return <<<JS
            function({ event, timeText, isStart, isEnd, isMirror, isPast, isFuture, isToday, view }){
                return {
                    html: '<div class="fc-event-main-frame">' +
                          '<div class="fc-event-time">' + timeText + '</div>' +
                          '<div class="fc-event-title">' + event.title + '</div>' +
                          '</div>'
                }
            }
        JS;
    }

    public function fetchEvents(array $fetchInfo): array
    {
        return Event::all()->map(fn ($e) => [
            'id' => $e->id,
            'title' => $e->name,
            'start' => $e->starts_at,
            'end' => $e->ends_at,
            'allDay' => $e->is_all_day,
        ])->toArray();
    }
}

```

--------------------------------

### Customizing Event Rendering with `eventDidMount` Hook (JavaScript)

Source: https://github.com/saade/filament-fullcalendar/blob/4.x/README.md

This JavaScript code snippet demonstrates how to use the `eventDidMount` render hook provided by FullCalendar within a Filament widget. It allows for custom JavaScript logic to be executed when an event is mounted to the calendar, enabling features like custom tooltips or additional event information display. The function receives event details and the DOM element as arguments.

```javascript
function({ event, timeText, isStart, isEnd, isMirror, isPast, isFuture, isToday, el, view }){
                // Write your custom implementation here
            }
```

--------------------------------

### Customize CRUD Actions in Filament FullCalendar (PHP)

Source: https://context7.com/saade/filament-fullcalendar/llms.txt

Override default action methods like create, edit, view, and delete to customize their behavior, authorization, and form mounting logic. This allows for tailored user interactions and data handling within the calendar widget.

```php
<?php

namespace App\Filament\Widgets;

use Saade\FilamentFullCalendar\Widgets\FullCalendarWidget;
use Saade\FilamentFullCalendar\Actions;
use Filament\Forms;
use Filament\Actions\Action;
use App\Models\Event;
use Illuminate\Database\Eloquent\Model;

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

    protected function headerActions(): array
    {
        return [
            Actions\CreateAction::make()
                ->label('New Event')
                ->icon('heroicon-o-plus')
                ->modalWidth('lg')
                ->successNotificationTitle('Event created successfully'),
        ];
    }

    protected function modalActions(): array
    {
        return [
            Actions\EditAction::make()
                ->label('Save Changes')
                ->icon('heroicon-o-pencil')
                ->color('primary')
                ->requiresConfirmation(false)
                ->successNotificationTitle('Event updated')
                ->authorize(fn (Event $record) => auth()->user()->can('update', $record)),

            Actions\DeleteAction::make()
                ->requiresConfirmation()
                ->modalHeading('Delete Event')
                ->modalDescription('Are you sure you want to delete this event?')
                ->successNotificationTitle('Event deleted')
                ->authorize(fn (Event $record) => auth()->user()->can('delete', $record)),
        ];
    }

    protected function viewAction(): Action
    {
        return Actions\ViewAction::make()
            ->modalWidth('lg')
            ->modalHeading(fn (Event $record) => $record->name);
    }

    public function getFormSchema(): array
    {
        return [
            Forms\Components\TextInput::make('name')
                ->required(),
            Forms\Components\DateTimePicker::make('starts_at')
                ->required(),
            Forms\Components\DateTimePicker::make('ends_at')
                ->required(),
        ];
    }
}

```

--------------------------------

### PHP: Event Tooltip on Hover

Source: https://github.com/saade/filament-fullcalendar/blob/4.x/README.md

Implements event tooltips using JavaScript within the eventDidMount method. Returns a JavaScript function that adds x-tooltip and x-data attributes to event elements. The tooltips will show the full event title on hover. The JavaScript code integrates with FullCalendar's event render hooks.

```php
public function eventDidMount(): string
{
    return <<<JS
        function({ event, timeText, isStart, isEnd, isMirror, isPast, isFuture, isToday, el, view }){
            el.setAttribute("x-tooltip", "tooltip");
            el.setAttribute("x-data", "{ tooltip: '"+event.title+"' }");
        }
    JS;
}
```

--------------------------------

### Implement CRUD Actions with Form Schema for Calendar Events

Source: https://context7.com/saade/filament-fullcalendar/llms.txt

Define a form schema and associate it with a model to enable built-in create, edit, view, and delete actions for calendar events. This PHP code snippet shows how to define form fields such as text input, textarea, date/time pickers, toggles, and color pickers, and fetches events from a database model.

```php
<?php

namespace App\Filament\Widgets;

use Saade\FilamentFullCalendar\Widgets\FullCalendarWidget;
use Filament\Forms;
use App\Models\Event;
use Illuminate\Database\Eloquent\Model;

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

    public function getFormSchema(): array
    {
        return [
            Forms\Components\TextInput::make('name')
                ->required()
                ->maxLength(255),

            Forms\Components\Textarea::make('description')
                ->rows(3)
                ->maxLength(1000),

            Forms\Components\Grid::make(2)
                ->schema([
                    Forms\Components\DateTimePicker::make('starts_at')
                        ->required()
                        ->native(false),

                    Forms\Components\DateTimePicker::make('ends_at')
                        ->required()
                        ->native(false) 
                        ->after('starts_at'),
                ]),

            Forms\Components\Toggle::make('is_all_day')
                ->label('All Day Event'),

            Forms\Components\ColorPicker::make('color')
                ->default('#3b82f6'),
        ];
    }

    public function fetchEvents(array $fetchInfo): array
    {
        return Event::query()
            ->where('starts_at', '>=', $fetchInfo['start'])
            ->where('ends_at', '<=', $fetchInfo['end'])
            ->get()
            ->map(fn (Event $event) => [
                'id' => $event->id,
                'title' => $event->name,
                'start' => $event->starts_at,
                'end' => $event->ends_at,
                'backgroundColor' => $event->color,
            ])
            ->toArray();
    }
}
```

--------------------------------

### Intercept Calendar Events for Custom Logic (PHP)

Source: https://context7.com/saade/filament-fullcalendar/llms.txt

Intercept and extend the default behavior of calendar events like clicks, drops, and resizes using PHP methods within the FullCalendar widget. This allows for logging interactions, performing validations, and controlling UI elements like modals and notifications. It also demonstrates handling date selection.

```php
<?php

namespace App\Filament\Widgets;

use Saade\FilamentFullCalendar\Widgets\FullCalendarWidget;
use App\Models\Event;
use Illuminate\Database\Eloquent\Model;

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

    /**
     * Triggered when user clicks an event
     */
    public function onEventClick(array $event): void
    {
        // Custom logic before opening modal
        activity()
            ->causedBy(auth()->user())
            ->performedOn(Event::find($event['id']))
            ->log('viewed event');

        // Call parent to maintain default behavior
        parent::onEventClick($event);
    }

    /**
     * Triggered when user drags and drops an event
     */
    public function onEventDrop(array $event, array $oldEvent, array $relatedEvents, array $delta, ?array $oldResource, ?array $newResource): bool
    {
        // Log the change
        activity()
            ->causedBy(auth()->user())
            ->withProperties([
                'old_start' => $oldEvent['start'],
                'new_start' => $event['start'],
            ])
            ->log('moved event');

        // Call parent to open edit modal
        return parent::onEventDrop($event, $oldEvent, $relatedEvents, $delta, $oldResource, $newResource);
    }

    /**
     * Triggered when user resizes an event
     */
    public function onEventResize(array $event, array $oldEvent, array $relatedEvents, array $startDelta, array $endDelta): bool
    {
        // Validate business rules
        if ($this->isEventTooLong($event)) {
            $this->notify('error', 'Event duration cannot exceed 8 hours');
            return true; // Revert the resize
        }

        return parent::onEventResize($event, $oldEvent, $relatedEvents, $startDelta, $endDelta);
    }

    /**
     * Triggered when user selects date range
     */
    public function onDateSelect(string $start, ?string $end, bool $allDay, ?array $view, ?array $resource): void
    {
        // Check if user can create events
        if (!auth()->user()->can('create', Event::class)) {
            $this->notify('error', 'You do not have permission to create events');
            return;
        }

        parent::onDateSelect($start, $end, $allDay, $view, $resource);
    }

    private function isEventTooLong(array $event): bool
    {
        $start = \Carbon\Carbon::parse($event['start']);
        $end = \Carbon\Carbon::parse($event['end']);
        return $end->diffInHours($start) > 8;
    }

    public function fetchEvents(array $fetchInfo): array
    {
        return [];
    }
}

```

--------------------------------

### Inject Additional Event Data in PHP

Source: https://context7.com/saade/filament-fullcalendar/llms.txt

This PHP snippet shows how to inject additional data into event forms during creation and editing using mutateFormDataUsing. It requires Filament, Saade's FilamentFullCalendar, and related Eloquent models. Inputs are form data arrays; outputs include mutated data with added fields like calendar_id and user IDs. Limitations involve dependency on authenticated users and a Calendar record context.

```php
<?php

namespace App\Filament\Widgets;

use Saade\FilamentFullCalendar\Widgets\FullCalendarWidget;
use Saade\FilamentFullCalendar\Actions;
use Filament\Forms;
use App\Models\Event;
use App\Models\Calendar;
use Illuminate\Database\Eloquent\Model;

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

    // Widget used on a Calendar resource page
    public ?Calendar $record = null;

    protected function headerActions(): array
    {
        return [
            Actions\CreateAction::make()
                ->mutateFormDataUsing(function (array $data): array {
                    return [
                        ...$data,
                        'calendar_id' => $this->record->id,
                        'created_by' => auth()->id(),
                        'timezone' => $this->record->timezone,
                    ];
                })
                ->successNotificationTitle('Event added to calendar'),
        ];
    }

    protected function modalActions(): array
    {
        return [
            Actions\EditAction::make()
                ->mutateFormDataUsing(function (array $data): array {
                    return [
                        ...$data,
                        'updated_by' => auth()->id(),
                    ];
                }),
            Actions\DeleteAction::make(),
        ];
    }

    public function getFormSchema(): array
    {
        return [
            Forms\Components\TextInput::make('name')
                ->required(),
            Forms\Components\DateTimePicker::make('starts_at')
                ->required(),
            Forms\Components\DateTimePicker::make('ends_at')
                ->required(),
        ];
    }

    public function fetchEvents(array $fetchInfo): array
    {
        return Event::where('calendar_id', $this->record->id)
            ->where('starts_at', '>=', $fetchInfo['start'])
            ->where('ends_at', '<=', $fetchInfo['end'])
            ->get()
            ->map(fn ($e) => [
                'id' => $e->id,
                'title' => $e->name,
                'start' => $e->starts_at,
                'end' => $e->ends_at,
            ])
            ->toArray();
    }
}

```
Tokens:
Raw