{"id":13733176,"url":"https://github.com/saade/filament-fullcalendar","last_synced_at":"2025-05-14T13:05:51.349Z","repository":{"id":40559308,"uuid":"452490181","full_name":"saade/filament-fullcalendar","owner":"saade","description":"The Most Popular JavaScript Calendar as a Filament Widget","archived":false,"fork":false,"pushed_at":"2025-03-10T16:44:43.000Z","size":3775,"stargazers_count":347,"open_issues_count":16,"forks_count":101,"subscribers_count":7,"default_branch":"3.x","last_synced_at":"2025-05-07T13:50:18.082Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/saade.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":".github/SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["saade"]}},"created_at":"2022-01-27T00:44:17.000Z","updated_at":"2025-04-23T12:21:32.000Z","dependencies_parsed_at":"2024-02-14T20:46:09.699Z","dependency_job_id":"5910d647-838d-48fe-a5ef-d7b715605d21","html_url":"https://github.com/saade/filament-fullcalendar","commit_stats":{"total_commits":136,"total_committers":13,"mean_commits":"10.461538461538462","dds":0.5,"last_synced_commit":"f2755db44b8e34edda1e5e056e0fa1d1bfef30c8"},"previous_names":[],"tags_count":38,"template":false,"template_full_name":"spatie/package-skeleton-laravel","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saade%2Ffilament-fullcalendar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saade%2Ffilament-fullcalendar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saade%2Ffilament-fullcalendar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saade%2Ffilament-fullcalendar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/saade","download_url":"https://codeload.github.com/saade/filament-fullcalendar/tar.gz/refs/heads/3.x","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254149942,"owners_count":22022851,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-03T03:00:38.851Z","updated_at":"2025-05-14T13:05:51.311Z","avatar_url":"https://github.com/saade.png","language":"PHP","funding_links":["https://github.com/sponsors/saade"],"categories":["UI","Calendar"],"sub_categories":[],"readme":"# Filament FullCalendar\n\n[![Latest Version on Packagist](https://img.shields.io/packagist/v/saade/filament-fullcalendar.svg?style=flat-square)](https://packagist.org/packages/saade/filament-fullcalendar)\n[![Total Downloads](https://img.shields.io/packagist/dt/saade/filament-fullcalendar.svg?style=flat-square)](https://packagist.org/packages/saade/filament-fullcalendar)\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/saade/filament-fullcalendar/3.x/art/cover.png\" alt=\"Filament FullCalendar\" style=\"width: 100%; max-width: 800px; border-radius: 10px\" /\u003e\n\u003c/p\u003e\n\n# Features\n\n-   Highly customizable\n-   Modals for viewing, creating, editing and deleteing events \u003csup\u003ePowered by Filament Actions\u003c/sup\u003e\n-   Filament-y theme\n-   and much more!\n\n\u003cbr\u003e\n\n# Table of contents\n\n- [Filament FullCalendar](#filament-fullcalendar)\n- [Features](#features)\n- [Table of contents](#table-of-contents)\n- [Installation](#installation)\n- [Usage](#usage)\n  - [Returning events](#returning-events)\n  - [The EventData class](#the-eventdata-class)\n- [Configuration](#configuration)\n  - [Available methods](#available-methods)\n    - [schedulerLicenseKey(`string` | `null` $licenseKey)](#schedulerlicensekeystring--null-licensekey)\n    - [selectable(`bool` $selectable)](#selectablebool-selectable)\n    - [editable(`bool` $editable)](#editablebool-editable)\n    - [timezone(`string` | `null` $timezone)](#timezonestring--null-timezone)\n    - [locale(`string` | `null` $locale)](#localestring--null-locale)\n    - [plugins(`array` $plugins, `bool` $merge)](#pluginsarray-plugins-bool-merge)\n    - [config(`array` $config)](#configarray-config)\n- [Interacting with actions](#interacting-with-actions)\n    - [Customizing actions](#customizing-actions)\n    - [Authorizing actions](#authorizing-actions)\n- [Intercepting events](#intercepting-events)\n- [Render Hooks](#render-hooks)\n- [Tricks](#tricks)\n  - [Editing event after drag and drop](#editing-event-after-drag-and-drop)\n  - [Creating events on day selection](#creating-events-on-day-selection)\n  - [Creating events with additional data](#creating-events-with-additional-data)\n  - [Event tooltip on hover](#event-tooltip-on-hover)\n  - [Adding the widget to a Blade view](#adding-the-widget-to-a-blade-view)\n  - [Share your tricks](#share-your-tricks)\n- [Changelog](#changelog)\n- [Contributing](#contributing)\n- [Security Vulnerabilities](#security-vulnerabilities)\n- [Credits](#credits)\n- [License](#license)\n\n\u003cbr\u003e\n\n# Installation\n\nYou can install the package via composer:\n\n```bash\ncomposer require saade/filament-fullcalendar:^3.0\n```\n\n\u003cbr\u003e\n\n# Usage\n\n1. First, create a [Filament Widget](https://filamentadmin.com/docs/2.x/admin/dashboard#getting-started):\n\n```bash\nphp artisan make:filament-widget CalendarWidget\n```\n\n\u003e This will create a new widget class in your project.\n\n\u003cbr\u003e\n\n1. Your newly created widget should extends the `Saade\\FilamentFullCalendar\\Widgets\\FullCalendarWidget` class of this package\n\n\u003e **Warning**\n\u003e\n\u003e Don't forget to remove `protected static string $view` from the generated class!\n\nYour widget should look like this:\n```php\n\u003c?php\n\nnamespace App\\Filament\\Widgets;\n\nuse Saade\\FilamentFullCalendar\\Widgets\\FullCalendarWidget;\n\nclass CalendarWidget extends FullCalendarWidget\n{\n    /**\n     * FullCalendar will call this function whenever it needs new event data.\n     * This is triggered when the user clicks prev/next or switches views on the calendar.\n     */\n    public function fetchEvents(array $fetchInfo): array\n    {\n        // You can use $fetchInfo to filter events by date.\n        // This method should return an array of event-like objects. See: https://github.com/saade/filament-fullcalendar/blob/3.x/#returning-events\n        // You can also return an array of EventData objects. See: https://github.com/saade/filament-fullcalendar/blob/3.x/#the-eventdata-class\n        return [];\n    }\n}\n```\n\n## Returning events\n\nThe `fetchEvents` method should return an array of event-like objects. See: [FullCalendar Docs](https://fullcalendar.io/docs/event-object)\n\n```php\n\u003c?php\n\nnamespace App\\Filament\\Widgets;\n\nuse Saade\\FilamentFullCalendar\\Widgets\\FullCalendarWidget;\nuse App\\Filament\\Resources\\EventResource;\nuse App\\Models\\Event;\n\nclass CalendarWidget extends FullCalendarWidget\n{\n\n    public function fetchEvents(array $fetchInfo): array\n    {\n        return Event::query()\n            -\u003ewhere('starts_at', '\u003e=', $fetchInfo['start'])\n            -\u003ewhere('ends_at', '\u003c=', $fetchInfo['end'])\n            -\u003eget()\n            -\u003emap(\n                fn (Event $event) =\u003e [\n                    'title' =\u003e $event-\u003eid,\n                    'start' =\u003e $event-\u003estarts_at,\n                    'end' =\u003e $event-\u003eends_at,\n                    'url' =\u003e EventResource::getUrl(name: 'view', parameters: ['record' =\u003e $event]),\n                    'shouldOpenUrlInNewTab' =\u003e true\n                ]\n            )\n            -\u003eall();\n    }\n}\n```\n\n\u003cbr\u003e\n\n## The EventData class\n\nIf you want a fluent way to return events, you can use the `Saade\\FilamentFullCalendar\\Data\\EventData` class.\n\n```php\n\u003c?php\n\nnamespace App\\Filament\\Widgets;\n\nuse Saade\\FilamentFullCalendar\\Widgets\\FullCalendarWidget;\nuse App\\Filament\\Resources\\EventResource;\nuse App\\Models\\Event;\n\nclass CalendarWidget extends FullCalendarWidget\n{\n\n    public function fetchEvents(array $fetchInfo): array\n    {\n        return Event::query()\n            -\u003ewhere('starts_at', '\u003e=', $fetchInfo['start'])\n            -\u003ewhere('ends_at', '\u003c=', $fetchInfo['end'])\n            -\u003eget()\n            -\u003emap(\n                fn (Event $event) =\u003e EventData::make()\n                    -\u003eid($event-\u003euuid)\n                    -\u003etitle($event-\u003ename)\n                    -\u003estart($event-\u003estarts_at)\n                    -\u003eend($event-\u003eends_at)\n                    -\u003eurl(\n                        url: EventResource::getUrl(name: 'view', parameters: ['record' =\u003e $event]),\n                        shouldOpenUrlInNewTab: true\n                    )\n            )\n            -\u003etoArray();\n    }\n}\n```\n\n\u003cbr\u003e\n\n# Configuration\n\nBefore you can configure the calendar, you'll need to add `FilamentFullcalendarPlugin` to your panel's `plugins` array.\n\n```php\n\u003c?php\n\nnamespace App\\Providers\\Filament;\n\nuse Filament\\Panel;\nuse Filament\\PanelProvider;\nuse Saade\\FilamentFullCalendar\\FilamentFullCalendarPlugin;\n\nclass AdminPanelProvider extends PanelProvider\n{\n    public function panel(Panel $panel): Panel\n    {\n        return $panel\n            -\u003edefault()\n            -\u003eid('admin')\n            -\u003epath('admin')\n            ...\n            -\u003eplugin(\n                FilamentFullCalendarPlugin::make()\n                    -\u003eschedulerLicenseKey()\n                    -\u003eselectable()\n                    -\u003eeditable()\n                    -\u003etimezone()\n                    -\u003elocale()\n                    -\u003eplugins()\n                    -\u003econfig()\n            );\n    }\n}\n```\n\n```php\n\u003c?php\nnamespace App\\Filament\\Widgets;\n\nuse Saade\\FilamentFullCalendar\\Widgets\\FullCalendarWidget;\nuse App\\Models\\Event;\n\nclass CalendarWidget extends FullCalendarWidget\n{\n    public Model | string | null $model = Event::class;\n\n    public function config(): array\n    {\n        return [\n            'firstDay' =\u003e 1,\n            'headerToolbar' =\u003e [\n                'left' =\u003e 'dayGridWeek,dayGridDay',\n                'center' =\u003e 'title',\n                'right' =\u003e 'prev,next today',\n            ],\n        ];\n    }\n}\n```\n\n## Available methods\n\n### schedulerLicenseKey(`string` | `null` $licenseKey)\nYour [FullCalendar Premium License Key](https://fullcalendar.io/docs/premium). (Only required if you're using premium plugins)\n\n`licenceKey` (Default: `null`)\n\n### selectable(`bool` $selectable)\nAllows a user to highlight multiple days or timeslots by clicking and dragging. See: [selectable](https://fullcalendar.io/docs/selectable)\n\n`selectable` (Default: `false`)\n\n### editable(`bool` $editable)\nThis determines if the events can be dragged and resized. See: [editable](https://fullcalendar.io/docs/editable)\n\n`editable` (Default: `false`)\n\n### timezone(`string` | `null` $timezone)\nThe timezone to use when displaying dates. See: [timezone](https://fullcalendar.io/docs/timeZone)\n\n`timezone` (Default: `config('app.timezone')`)\n\n### locale(`string` | `null` $locale)\nThe locale to use when displaying texts and dates. See: [locale](https://fullcalendar.io/docs/locale)\n\n`locale` (Default: `config('app.locale')`)\n\n### plugins(`array` $plugins, `bool` $merge)\nThe plugins to enable. You can add more plugins if you wish, or replace the default ones by passing `false` as the second param for the method. \nAvaliable: `interaction, dayGrid, timeGrid, list, multiMonth, scrollGrid, timeline, adaptive, resource, resourceDayGrid, resourceTimeline, resourceTimeGrid, rrule, moment, momentTimezone`\nSee: [plugins](https://fullcalendar.io/docs/plugin-index)\n\n`plugins` Default: `['dayGrid', 'timeGrid']`\n`merge` Default: `true`\n\n### config(`array` $config)\nThe configuration of the calendar. Not all configurations have a dedicated fluent method to interact with it, therefore you can pass pretty much any configuration listed in the FullCalendar's TOC. See: [FullCalendar Docs](https://fullcalendar.io/docs#toc)\n\n`config` (Default: `[]`)\n\n\u003cbr\u003e\n\n# Interacting with actions\nThis packages leverages the power of [Filament Actions](https://filamentphp.com/docs/3.x/actions/overview) to allow you to view, create, edit and delete events.\n\nTo get started, you'll need to tell the widget which model it should use to perform the actions, and define a form schema for the view, create and edit actions.\n\n```php\n\u003c?php\n\nnamespace App\\Filament\\Widgets;\n\nuse Saade\\FilamentFullCalendar\\Widgets\\FullCalendarWidget;\nuse App\\Models\\Event;\n\nclass CalendarWidget extends FullCalendarWidget\n{\n    public Model | string | null $model = Event::class;\n\n    public function getFormSchema(): array\n    {\n        return [\n            Forms\\Components\\TextInput::make('name'),\n\n            Forms\\Components\\Grid::make()\n                -\u003eschema([\n                    Forms\\Components\\DateTimePicker::make('starts_at'),\n\n                    Forms\\Components\\DateTimePicker::make('ends_at'),\n                ]),\n        ];\n    }\n}\n```\n\n\u003e **Note**\n\u003e Please note that the form schema does not need to contain the same fields as the FullCalendar event object. You can add as many fields as your model has.\n\nThat's it! Now you can view, create, edit and delete events.\n\n### Customizing actions\n\nIf you want to customize the actions, you can override the default actions that comes with this package. Actions behaves like any other Filament Action, therefore you can customize them as you wish the same way you would customize any other Filament Action.\n\n```php\n\u003c?php\n\nnamespace App\\Filament\\Widgets;\n\nuse Saade\\FilamentFullCalendar\\Widgets\\FullCalendarWidget;\nuse Saade\\FilamentFullCalendar\\Actions;\nuse App\\Models\\Event;\n\nclass CalendarWidget extends FullCalendarWidget\n{\n    public Model | string | null $model = Event::class;\n\n    protected function headerActions(): array\n    {\n        return [\n            Actions\\CreateAction::make(),\n        ];\n    }\n\n    protected function modalActions(): array\n    {\n        return [\n            Actions\\EditAction::make(),\n            Actions\\DeleteAction::make(),\n        ];\n    }\n\n    protected function viewAction(): Action\n    {\n        return Actions\\ViewAction::make();\n    }\n\n    public function getFormSchema(): array\n    {\n        return [\n            Forms\\Components\\TextInput::make('name'),\n\n            Forms\\Components\\Grid::make()\n                -\u003eschema([\n                    Forms\\Components\\DateTimePicker::make('starts_at'),\n\n                    Forms\\Components\\DateTimePicker::make('ends_at'),\n                ]),\n        ];\n    }\n}\n```\n\n### Authorizing actions\n\nAction authorization behaves like any other Filament Action, therefore you can customize them as you wish the same way you would customize any other Filament Action.\n\n\u003cbr\u003e\n\n# Intercepting events\n\nIf you want to intercept events, you can override the default methods that comes with this package.\n\n\u003e **Warning**\n\u003e If you override any of the methods below, you'll need to call the parent method to keep the calendar working as expected.\n\nSee the [InteractsWithEvents](https://github.com/saade/filament-fullcalendar/blob/3.x/src/Widgets/Concerns/InteractsWithEvents.php) for all the available event listeners.\n\n\u003cbr\u003e\n\n# Render Hooks\n\nIf you want to customize the calendar's event rendering, you can use Fullcalendar's built in [Render Hooks](https://fullcalendar.io/docs/event-render-hooks) for that. All the hooks are supported.\n\nHere's an example of how you can use the `eventDidMount` hook to add a custom implementation:\n```php\n    public function eventDidMount(): string\n    {\n        return \u003c\u003c\u003cJS\n            function({ event, timeText, isStart, isEnd, isMirror, isPast, isFuture, isToday, el, view }){\n                // Write your custom implementation here\n            }\n        JS;\n    }\n```\n\nFor another example, see the [Event tooltip on hover](#event-tooltip-on-hover) trick.\n\n\u003cbr\u003e\n\n# Tricks\n\n## Editing event after drag and drop\n\nYou can fill the form with the event's new data by using the `mountUsing` method on the `EditAction`.\n\n```php\nprotected function modalActions(): array\n {\n     return [\n         Actions\\EditAction::make()\n             -\u003emountUsing(\n                 function (Event $record, Forms\\Form $form, array $arguments) {\n                     $form-\u003efill([\n                         'name' =\u003e $record-\u003ename,\n                         'starts_at' =\u003e $arguments['event']['start'] ?? $record-\u003estarts_at,\n                         'ends_at' =\u003e $arguments['event']['end'] ?? $record-\u003eends_at\n                     ]);\n                 }\n             ),\n         Actions\\DeleteAction::make(),\n     ];\n }\n```\n\n## Creating events on day selection\n\nYou can fill the form with the selected day's date by using the `mountUsing` method on the `CreateAction`.\n\n```php\nuse Saade\\FilamentFullCalendar\\Actions\\CreateAction;\n\nprotected function headerActions(): array\n {\n     return [\n         Actions\\CreateAction::make()\n             -\u003emountUsing(\n                 function (Forms\\Form $form, array $arguments) {\n                     $form-\u003efill([\n                         'starts_at' =\u003e $arguments['start'] ?? null,\n                         'ends_at' =\u003e $arguments['end'] ?? null\n                     ]);\n                 }\n             )\n     ];\n }\n```\n\n## Creating events with additional data\n\nYou can add additional data to the event by using the `mutateFormDataUsing` method on the `CreateAction`.\n\n```php\nprotected function headerActions(): array\n {\n     return [\n         Actions\\CreateAction::make()\n             -\u003emutateFormDataUsing(function (array $data): array {\n                 return [\n                     ...$data,\n                     'calendar_id' =\u003e $this-\u003erecord-\u003eid\n                 ];\n             })\n     ];\n }\n```\n\n## Event tooltip on hover\n\nYou can add a tooltip to fully show the event title when the user hovers over the event via JavaScript on the `eventDidMount` method:\n\n```php\npublic function eventDidMount(): string\n{\n    return \u003c\u003c\u003cJS\n        function({ event, timeText, isStart, isEnd, isMirror, isPast, isFuture, isToday, el, view }){\n            el.setAttribute(\"x-tooltip\", \"tooltip\");\n            el.setAttribute(\"x-data\", \"{ tooltip: '\"+event.title+\"' }\");\n        }\n    JS;\n}\n```\n\nThe JavaScript code returned by `eventDidMount()` will be added to [the FullCalendar's `eventDidMount` event render hook](https://fullcalendar.io/docs/event-render-hooks).\n\n## Adding the widget to a Blade view\n\nFollow the [Filament Docs](https://filamentphp.com/docs/3.x/widgets/adding-a-widget-to-a-blade-view) to know how to add the widget to a Blade view.\n\n## Share your tricks\n\nIf you have any tricks that you want to share, please open a PR and add it to this section.\n\n\u003cbr\u003e\n\n# Changelog\n\nPlease see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently.\n\n# Contributing\n\nPlease see [CONTRIBUTING](.github/CONTRIBUTING.md) for details.\n\n# Security Vulnerabilities\n\nPlease review [our security policy](../../security/policy) on how to report security vulnerabilities.\n\n# Credits\n\n-   [Saade](https://github.com/saade)\n-   [All Contributors](../../contributors)\n\n# License\n\nThe MIT License (MIT). Please see [License File](LICENSE.md) for more information.\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://github.com/sponsors/saade\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/saade/filament-fullcalendar/3.x/art/sponsor.png\" alt=\"Sponsor Saade\" style=\"width: 100%; max-width: 800px;\" /\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsaade%2Ffilament-fullcalendar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsaade%2Ffilament-fullcalendar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsaade%2Ffilament-fullcalendar/lists"}