diff --git a/README.md b/README.md index bdffcf8..b4ba272 100644 --- a/README.md +++ b/README.md @@ -1,33 +1,38 @@ -# The Most Popular JavaScript Calendar integrated with Filament 💛 +# The Most Popular JavaScript Calendar as a Filament Widget 💛 + +![Monthly Calendar](./art/fullcalendar-widget.png) [![Latest Version on Packagist](https://img.shields.io/packagist/v/saade/filament-fullcalendar.svg?style=flat-square)](https://packagist.org/packages/saade/filament-fullcalendar) [![GitHub Tests Action Status](https://img.shields.io/github/workflow/status/saade/filament-fullcalendar/run-tests?label=tests)](https://github.com/saade/filament-fullcalendar/actions?query=workflow%3Arun-tests+branch%3Amain) [![GitHub Code Style Action Status](https://img.shields.io/github/workflow/status/saade/filament-fullcalendar/Check%20&%20fix%20styling?label=code%20style)](https://github.com/saade/filament-fullcalendar/actions?query=workflow%3A"Check+%26+fix+styling"+branch%3Amain) [![Total Downloads](https://img.shields.io/packagist/dt/saade/filament-fullcalendar.svg?style=flat-square)](https://packagist.org/packages/saade/filament-fullcalendar) -This is where your description should go. Limit it to a paragraph or two. Consider adding a small example. +# Features -## Support us +- Accepts all configurations from [FullCalendar](https://fullcalendar.io/docs#toc) +- Event click and drop events -[](https://spatie.be/github-ad-click/filament-fullcalendar) +### Upcoming +- Modal view when clicking on an event +- Tailwindcss theme 💙 -We invest a lot of resources into creating [best in class open source packages](https://spatie.be/open-source). You can support us by [buying one of our paid products](https://spatie.be/open-source/support-us). +
-We highly appreciate you sending us a postcard from your hometown, mentioning which of our package(s) you are using. You'll find our address on [our contact page](https://spatie.be/about-us). We publish all received postcards on [our virtual postcard wall](https://spatie.be/open-source/postcards). +## Support Filament -## Installation + +filament-logo + -You can install the package via composer: -```bash -composer require saade/filament-fullcalendar -``` +
+ +# Installation -You can publish and run the migrations with: +You can install the package via composer: ```bash -php artisan vendor:publish --tag="filament-fullcalendar-migrations" -php artisan migrate +composer require saade/filament-fullcalendar ``` You can publish the config file with: @@ -39,23 +44,156 @@ php artisan vendor:publish --tag="filament-fullcalendar-config" This is the contents of the published config file: ```php + config('app.timezone'), + + 'locale' => config('app.locale'), + + 'headerToolbar' => [ + 'left' => 'prev,next today', + 'center' => 'title', + 'right' => 'dayGridMonth,dayGridWeek,dayGridDay' + ], + + 'navLinks' => true, + + 'editable' => true, + + 'dayMaxEvents' => true ]; ``` -Optionally, you can publish the views using +
+ +# 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. + + +1. First, create a [Filament Widget](https://filamentadmin.com/docs/2.x/admin/dashboard#getting-started): ```bash -php artisan vendor:publish --tag="filament-fullcalendar-views" +php artisan make:filament-widget CalendarWidget +``` + +> This will create a new `App\Filament\Widgets\CalendarWidget` class in your project. + +
+ +2. Your newly created widget should extends the `Saade\FilamentFullCalendar\Widgets\FullCalendarWidget` class of this package + +```php + 1, + 'title' => 'Breakfast!', + 'start' => now() + ], + [ + 'id' => 2, + 'title' => 'Meeting with Pamela', + 'start' => now()->addDay(), + 'url' => MeetingResource::getUrl('view', ['record' => 2]) + ] + ]; + } +} ``` -## Usage +> You should return an array of FullCalendar [EventObject](https://fullcalendar.io/docs/event-object). + + +
+ +# 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](https://fullcalendar.io/docs#toc) to see the available options. It supports all of them, really. ```php -$filamentFullCalendar = new Saade\FilamentFullCalendar(); -echo $filamentFullCalendar->echoPhrase('Hello, Saade!'); + 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](https://fullcalendar.io/docs/eventClick) and [EventDrop](https://fullcalendar.io/docs/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](https://github.com/saade/filament-fullcalendar/blob/main/src/Widgets/Concerns/FiresEvents.php) + +```php +/** + * 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 ```bash diff --git a/art/fullcalendar-widget.png b/art/fullcalendar-widget.png new file mode 100644 index 0000000..745dfc3 Binary files /dev/null and b/art/fullcalendar-widget.png differ diff --git a/art/fullcalendar-widget.png:Zone.Identifier b/art/fullcalendar-widget.png:Zone.Identifier new file mode 100644 index 0000000..a831910 --- /dev/null +++ b/art/fullcalendar-widget.png:Zone.Identifier @@ -0,0 +1,3 @@ +[ZoneTransfer] +LastWriterPackageFamilyName=Microsoft.ScreenSketch_8wekyb3d8bbwe +ZoneId=3