diff --git a/README.md b/README.md index 7dfdcc5..8a9a82f 100644 --- a/README.md +++ b/README.md @@ -9,9 +9,9 @@ # Features -- Accepts all configurations from [FullCalendar](https://fullcalendar.io/docs#toc) -- Event click and drop events -- Modals for creating and editing events New in v1.0 +- Accepts all configurations from [FullCalendar](https://fullcalendar.io/docs#toc) +- Event click and drop events +- Modals for creating and editing events New in v1.0
@@ -25,18 +25,18 @@ # Table of contents -- [Installation](#installation) -- [Usage](#usage) -- [Configuration](#configuration) -- [Styling](#styling) -- [Listening for events](#listening-for-events) -- [Creating and Editing events with modals.](#creating-and-editing-events-with-modals) - * [Creating Events](#creating-events) - * [Editing Events](#editing-events) - * [Authorizing actions](#authorizing-actions) - * [Listening for cancelled modal](#listening-for-cancelled-modal) -- [Refreshing calendar events](#refreshing-calendar-events) -- [Filtering events based on the calendar view](#filtering-events-based-on-the-calendar-view) +- [Installation](#installation) +- [Usage](#usage) +- [Configuration](#configuration) +- [Styling](#styling) +- [Listening for events](#listening-for-events) +- [Creating and Editing events with modals.](#creating-and-editing-events-with-modals) + - [Creating Events](#creating-events) + - [Editing Events](#editing-events) + - [Authorizing actions](#authorizing-actions) + - [Listening for cancelled modal](#listening-for-cancelled-modal) +- [Refreshing calendar events](#refreshing-calendar-events) +- [Filtering events based on the calendar view](#filtering-events-based-on-the-calendar-view)
@@ -60,7 +60,6 @@ php artisan vendor:publish --tag="filament-fullcalendar-config" 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 @@ -125,15 +124,19 @@ class CalendarWidget extends FullCalendarWidget > Both methods should retun an array of [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 most of them. +### Plugins + +You can enable or disable plugins by setting the `plugins` property to `true` or `false`. By default, all non-standard plugins are disabled. + ```php config('app.locale'), + 'plugins' => [ + 'rrule' => false, + 'resourceTimeline' => false, + ], + 'headerToolbar' => [ 'left' => 'prev,next today', 'center' => 'title', @@ -236,19 +244,18 @@ Since [v1.0.0](https://github.com/saade/filament-fullcalendar/releases/tag/v1.0. To customise the modal, override the following properties in your widget: -- `protected string $modalWidth` -- `protected string $modalLabel` -- `protected bool $modalSlideover` +- `protected string $modalWidth` +- `protected string $modalLabel` +- `protected bool $modalSlideover` The process of saving and editing the event is up to you, since this plugin does not rely on a Model to save the calendar events. - ## Creating Events Events can be created in two ways. -- Clicking on a day (default) -- Selecting a date range (click and drag across calendar days) (you need to opt-in for this, set `selectable => true` in the config file.) +- Clicking on a day (default) +- Selecting a date range (click and drag across calendar days) (you need to opt-in for this, set `selectable => true` in the config file.) This will open the Create Event modal. @@ -278,21 +285,23 @@ protected static function getCreateEventFormSchema(): array ``` You can override the `getCreateEventModalTitle()` method to change the modal title to a custom one: + ```php -public function getCreateEventModalTitle(): string +public function getCreateEventModalTitle(): string { return __('filament::resources/pages/create-record.title', ['label' => $this->getModalLabel()]); } ``` You can override the `getCreateEventModalSubmitButtonLabel()` and `getCreateEventModalCloseButtonLabel()` methods to change the modal button labels to custom labels: + ```php -public function getCreateEventModalSubmitButtonLabel(): string +public function getCreateEventModalSubmitButtonLabel(): string { return __('filament::resources/pages/create-record.form.actions.create.label'); } -public function getCreateEventModalCloseButtonLabel(): string +public function getCreateEventModalCloseButtonLabel(): string { return __('filament::resources/pages/create-record.form.actions.cancel.label'); } @@ -354,21 +363,23 @@ protected static function getEditEventFormSchema(): array ``` You can override the `getEditEventModalTitle()` method to change the modal title to a custom one: + ```php -public function getCreateEventModalTitle(): string +public function getCreateEventModalTitle(): string { return __('filament::resources/pages/create-record.title', ['label' => $this->getModalLabel()]); } ``` You can override the `getEditEventModalSubmitButtonLabel()` and `getEditEventModalCloseButtonLabel()` methods to change the modal button labels to custom labels: + ```php -public function getEditEventModalSubmitButtonLabel(): string +public function getEditEventModalSubmitButtonLabel(): string { return __('filament::resources/pages/edit-record.form.actions.save.label'); } -public function getEditEventModalCloseButtonLabel(): string +public function getEditEventModalCloseButtonLabel(): string { return $this->editEventForm->isDisabled() ? __('filament-support::actions/view.single.modal.actions.close.label') @@ -389,7 +400,7 @@ public static function canView(?array $event = null): bool if ($event === null) { return true; } - + // Returning 'false' will not show the event Modal. return true; } @@ -469,6 +480,7 @@ public function fetchEvents(array $fetchInfo): array you can filter events based on the timespan `$fetchInfo['start']` and `$fetchInfo['end']`. example: + ```php public function fetchEvents(array $fetchInfo): array { @@ -507,8 +519,8 @@ Please review [our security policy](../../security/policy) on how to report secu ## Credits -- [Saade](https://github.com/saade) -- [All Contributors](../../contributors) +- [Saade](https://github.com/saade) +- [All Contributors](../../contributors) ## License diff --git a/config/filament-fullcalendar.php b/config/filament-fullcalendar.php index 484ba78..b0934fc 100644 --- a/config/filament-fullcalendar.php +++ b/config/filament-fullcalendar.php @@ -11,6 +11,11 @@ 'locale' => config('app.locale'), + 'plugins' => [ + 'rrule' => false, + 'resourceTimeline' => false, + ], + 'headerToolbar' => [ 'left' => 'prev,next today', 'center' => 'title', diff --git a/resources/js/components/calendar.js b/resources/js/components/calendar.js index 911057e..6b87ffe 100644 --- a/resources/js/components/calendar.js +++ b/resources/js/components/calendar.js @@ -1,13 +1,13 @@ -import { Calendar } from '@fullcalendar/core'; -import rrulePlugin from '@fullcalendar/rrule'; -import dayGridPlugin from '@fullcalendar/daygrid'; -import timeGridPlugin from '@fullcalendar/timegrid'; -import listPlugin from '@fullcalendar/list'; -import resourceTimelinePlugin from '@fullcalendar/resource-timeline'; -import interactionPlugin from '@fullcalendar/interaction'; -import momentPlugin from '@fullcalendar/moment'; -import momentTimezonePlugin from '@fullcalendar/moment-timezone'; -import locales from '@fullcalendar/core/locales-all'; +import { Calendar } from '@fullcalendar/core' +import rrulePlugin from '@fullcalendar/rrule' +import dayGridPlugin from '@fullcalendar/daygrid' +import timeGridPlugin from '@fullcalendar/timegrid' +import listPlugin from '@fullcalendar/list' +import resourceTimelinePlugin from '@fullcalendar/resource-timeline' +import interactionPlugin from '@fullcalendar/interaction' +import momentPlugin from '@fullcalendar/moment' +import momentTimezonePlugin from '@fullcalendar/moment-timezone' +import locales from '@fullcalendar/core/locales-all' export default (Alpine) => { Alpine.data( @@ -25,7 +25,7 @@ export default (Alpine) => { handleEventResizeUsing, handleDateClickUsing, handleSelectUsing, - fetchEventsUsing + fetchEventsUsing, }) => { return { calendar: null, @@ -34,8 +34,17 @@ export default (Alpine) => { init: function () { this.calendar = new Calendar(this.$refs.calendar, { - plugins: [rrulePlugin, dayGridPlugin, timeGridPlugin, listPlugin, resourceTimelinePlugin, interactionPlugin, momentPlugin, momentTimezonePlugin], ...config, + plugins: [ + dayGridPlugin, + timeGridPlugin, + listPlugin, + interactionPlugin, + momentPlugin, + momentTimezonePlugin, + ...(config.plugins.rrule ? [rrulePlugin] : []), + ...(config.plugins.resourceTimeline ? [resourceTimelinePlugin] : []), + ], locales, locale, eventClick: handleEventClickUsing, @@ -43,21 +52,34 @@ export default (Alpine) => { eventResize: handleEventResizeUsing, dateClick: handleDateClickUsing, select: handleSelectUsing, - eventSources: [ - { events }, - fetchEventsUsing - ], - ...shouldSaveState && { - initialView: localStorage.getItem('fullcalendar.view.' + key) ?? initialView ?? undefined, - initialDate: localStorage.getItem('fullcalendar.date.' + key) ?? initialDate ?? undefined, + eventSources: [{ events }, fetchEventsUsing], + ...(shouldSaveState && { + initialView: + localStorage.getItem( + 'fullcalendar.view.' + key, + ) ?? + initialView ?? + undefined, + initialDate: + localStorage.getItem( + 'fullcalendar.date.' + key, + ) ?? + initialDate ?? + undefined, datesSet: function ({ start, view }) { - localStorage.setItem('fullcalendar.view.' + key, view.type); - localStorage.setItem('fullcalendar.date.' + key, start.toISOString()); + localStorage.setItem( + 'fullcalendar.view.' + key, + view.type, + ) + localStorage.setItem( + 'fullcalendar.date.' + key, + start.toISOString(), + ) }, - } - }); + }), + }) - this.calendar.render(); + this.calendar.render() }, } }, diff --git a/resources/js/filament-fullcalendar.js b/resources/js/filament-fullcalendar.js index 1526742..02b144d 100644 --- a/resources/js/filament-fullcalendar.js +++ b/resources/js/filament-fullcalendar.js @@ -1,5 +1,5 @@ -import calendarComponent from './components/calendar'; +import calendarComponent from './components/calendar' document.addEventListener('alpine:init', () => { - window.Alpine.plugin(calendarComponent); -}); + window.Alpine.plugin(calendarComponent) +})