The Most Popular JavaScript Calendar as a Filament Widget
💛
Features
- Accepts all configurations from FullCalendar
- Event click and drop events
Upcoming
- Modal view when clicking on an event
- Tailwindcss theme
💙
Support Filament
Installation
You can install the package via composer:
composer require saade/filament-fullcalendar
You can publish the config file with:
php artisan vendor:publish --tag="filament-fullcalendar-config"
This is the contents of the published config file:
/**
* Consider this file the root configuration object for FullCalendar.
* Any configuration added here, will be added to the calendar.
* @see https://fullcalendar.io/docs#toc
*/
return [
'timeZone' => config('app.timezone'),
'locale' => config('app.locale'),
'headerToolbar' => [
'left' => 'prev,next today',
'center' => 'title',
'right' => 'dayGridMonth,dayGridWeek,dayGridDay'
],
'navLinks' => true,
'editable' => true,
'dayMaxEvents' => true
];
Usage
Since the package does not automatically add the FullCalendarWidget widget to your Filament panel, you are free to extend the widget and customise it yourself.
- First, create a Filament Widget:
php artisan make:filament-widget CalendarWidget
This will create a new
App\Filament\Widgets\CalendarWidgetclass in your project.
- Your newly created widget should extends the
Saade\FilamentFullCalendar\Widgets\FullCalendarWidgetclass of this package
namespace App\Filament\Widgets;
use App\Models\Meeting;
use App\Filament\Resources\MeetingResource;
use Saade\FilamentFullCalendar\Widgets\FullCalendarWidget;
class CalendarWidget extends FullCalendarWidget
{
public function getViewData(): array
{
return [
[
'id' => 1,
'title' => 'Breakfast!',
'start' => now()
],
[
'id' => 2,
'title' => 'Meeting with Pamela',
'start' => now()->addDay(),
'url' => MeetingResource::getUrl('view', ['record' => 2])
]
];
}
}
You should return an array of FullCalendar EventObject.
Configuration
This is the contents of the default config file.
You can use any property that FullCalendar uses on its root object. Please refer to: FullCalendar Docs to see the available options. It supports all of them, really.
/**
* Consider this file the root configuration object for FullCalendar.
* Any configuration added here, will be added to the calendar.
* @see https://fullcalendar.io/docs#toc
*/
return [
'timeZone' => config('app.timezone'),
'locale' => config('app.locale'),
'headerToolbar' => [
'left' => 'prev,next today',
'center' => 'title',
'right' => 'dayGridMonth,dayGridWeek,dayGridDay'
],
'navLinks' => true,
'editable' => true,
'dayMaxEvents' => true
];
Listening for events
The only events supported right now are: EventClick and EventDrop
They're commented out by default so livewire does not spam requests without they being used. You are free to paste them in your CalendarWidget class. See: FiresEvents
/**
* Triggered when the user clicks an event.
*
* Commented out so we can save some requests :) Feel free to extend it.
* @see https://fullcalendar.io/docs/eventClick
*/
public function onEventClick($event): void
{
//
}
/**
* Triggered when dragging stops and the event has moved to a different day/time.
*
* Commented out so we can save some requests :) Feel free to extend it.
* @see https://fullcalendar.io/docs/eventDrop
*/
public function onEventDrop($oldEvent, $newEvent, $relatedEvents): void
{
//
}
Testing
composer test
Changelog
Please see CHANGELOG for more information on what has changed recently.
Contributing
Please see CONTRIBUTING for details.
Security Vulnerabilities
Please review our security policy on how to report security vulnerabilities.
Credits
License
The MIT License (MIT). Please see License File for more information.
2 Dec 7, 2021
45 Dec 26, 2022
10 Nov 5, 2022
680 Jan 4, 2023
44 Jan 1, 2023
4 Dec 12, 2022
39 Dec 21, 2022
69 Jan 4, 2023
20 Nov 22, 2022
44 Dec 26, 2022
11 Sep 10, 2022
58 Dec 30, 2022