Merge branch '3.x' into pr/169

.github/workflows/dependabot-auto-merge.yml

@@ -13,7 +13,7 @@ jobs:
 
       - name: Dependabot metadata
         id: metadata
-        uses: dependabot/fetch-metadata@v1.6.0
+        uses: dependabot/fetch-metadata@v2.0.0
         with:
           github-token: "${{ secrets.GITHUB_TOKEN }}"
 

.github/workflows/phpstan.yml

@@ -20,7 +20,7 @@ jobs:
           coverage: none
 
       - name: Install composer dependencies
-        uses: ramsey/composer-install@v2
+        uses: ramsey/composer-install@v3
 
       - name: Run PHPStan
         run: ./vendor/bin/phpstan --error-format=github

README.md

@@ -38,10 +38,12 @@
     - [Customizing actions](#customizing-actions)
     - [Authorizing actions](#authorizing-actions)
 - [Intercepting events](#intercepting-events)
+- [Render Hooks](#render-hooks)
 - [Tricks](#tricks)
   - [Editing event after drag and drop](#editing-event-after-drag-and-drop)
   - [Creating events on day selection](#creating-events-on-day-selection)
   - [Creating events with additional data](#creating-events-with-additional-data)
+  - [Event tooltip on hover](#event-tooltip-on-hover)
   - [Adding the widget to a Blade view](#adding-the-widget-to-a-blade-view)
   - [Share your tricks](#share-your-tricks)
 - [Changelog](#changelog)
@@ -218,6 +220,31 @@ class AdminPanelProvider extends PanelProvider
 }
 ```
 
+```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',
+            ],
+        ];
+    }
+}
+```
+
 ## Available methods
 
 ### schedulerLicenseKey(`string` | `null` $licenseKey)
@@ -366,6 +393,26 @@ See the [InteractsWithEvents](https://github.com/saade/filament-fullcalendar/blo
 
 <br>
 
+# Render Hooks
+
+If 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.
+
+Here's an example of how you can use the `eventDidMount` hook to add a custom implementation:
+```php
+    public function eventDidMount(): string
+    {
+        return <<<JS
+            function({ event, timeText, isStart, isEnd, isMirror, isPast, isFuture, isToday, el, view }){
+                // Write your custom implementation here
+            }
+        JS;
+    }
+```
+
+For another example, see the [Event tooltip on hover](#event-tooltip-on-hover) trick.
+
+<br>
+
 # Tricks
 
 ## Editing event after drag and drop
@@ -397,9 +444,6 @@ You can fill the form with the selected day's date by using the `mountUsing` met
 
 ```php
 use Saade\FilamentFullCalendar\Actions\CreateAction;
-...
-...
-...
 
 protected function headerActions(): array
  {
@@ -436,39 +480,24 @@ protected function headerActions(): array
  }
 ```
 
-## Showing events in a resource Timeline
+## Event tooltip on hover
 
-If you want to use the resource timeline view, you have to make the following adjustments:
+You can add a tooltip to fully show the event title when the user hovers over the event via JavaScript on the `eventDidMount` method:
 
-Add this to the `config` method of the `FilamentFullCalendarPlugin`:
-```php
-FilamentFullCalendarPlugin::make()
-->plugins(['resourceTimeline'])
-                    ->config([
-                       'initialView' => 'resourceTimelineMonth',
-                        'resourceAreaHeaderContent' => 'Resource overview',
-                        'headerToolbar' => [
-                            'left' => 'prev,next today',
-                            'center' => 'title',
-                            'right' => 'resourceTimelineDay,resourceTimelineWeek,resourceTimelineMonth',
-                        ],
-                        'resources' => [
-                            [   "id" => "1",
-                                "title" => "Resource 1",
-                                "eventColor" => "orange",
-                            ]
-                            ,
-                            [   "id" => "2",
-                                "title" => "Resource 2",
-                                "eventColor" => "green",
-                            ],
-                        ],
-```
-Add this to your event data:
 ```php
-EventData::make()
-    ->resourceId($resource->id) // this should match with the id of the resource set in the config above
+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;
+}
 ```
+
+The JavaScript code returned by `eventDidMount()` will be added to [the FullCalendar's `eventDidMount` event render hook](https://fullcalendar.io/docs/event-render-hooks).
+
 ## Adding the widget to a Blade view
 
 Follow 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.

composer.json

@@ -30,6 +30,9 @@
         "spatie/laravel-ray": "^1.26"
     },
     "autoload": {
+        "files": [
+            "src/helpers.php"
+        ],
         "psr-4": {
             "Saade\\FilamentFullCalendar\\": "src"
         }

resources/js/filament-fullcalendar.js

@@ -24,6 +24,10 @@ export default function fullcalendar({
     config,
     editable,
     selectable,
+    eventClassNames,
+    eventContent,
+    eventDidMount,
+    eventWillUnmount,
 }) {
     return {
         init() {
@@ -42,6 +46,10 @@ export default function fullcalendar({
                 selectable,
                 ...config,
                 locales,
+                eventClassNames,
+                eventContent,
+                eventDidMount,
+                eventWillUnmount,
                 events: (info, successCallback, failureCallback) => {
                     this.$wire.fetchEvents({ start: info.startStr, end: info.endStr, timezone: info.timeZone })
                         .then(successCallback)

resources/views/fullcalendar.blade.php

@@ -16,9 +16,13 @@
                 plugins: @js($plugin->getPlugins()),
                 schedulerLicenseKey: @js($plugin->getSchedulerLicenseKey()),
                 timeZone: @js($plugin->getTimezone()),
-                config: @js($plugin->getConfig()),
+                config: @js($this->getConfig()),
                 editable: @json($plugin->isEditable()),
                 selectable: @json($plugin->isSelectable()),
+                eventClassNames: {!! htmlspecialchars($this->eventClassNames(), ENT_COMPAT) !!},
+                eventContent: {!! htmlspecialchars($this->eventContent(), ENT_COMPAT) !!},
+                eventDidMount: {!! htmlspecialchars($this->eventDidMount(), ENT_COMPAT) !!},
+                eventWillUnmount: {!! htmlspecialchars($this->eventWillUnmount(), ENT_COMPAT) !!},
             })">
         </div>
     </x-filament::section>

src/Widgets/Concerns/CanBeConfigured.php

@@ -0,0 +1,23 @@
+<?php
+
+namespace Saade\FilamentFullCalendar\Widgets\Concerns;
+
+use function Saade\FilamentFullCalendar\array_merge_recursive_unique;
+
+use Saade\FilamentFullCalendar\FilamentFullCalendarPlugin;
+
+trait CanBeConfigured
+{
+    public function config(): array
+    {
+        return [];
+    }
+
+    protected function getConfig(): array
+    {
+        return array_merge_recursive_unique(
+            FilamentFullCalendarPlugin::get()->getConfig(),
+            $this->config(),
+        );
+    }
+}

src/Widgets/Concerns/InteractsWithRawJS.php

@@ -0,0 +1,64 @@
+<?php
+
+namespace Saade\FilamentFullCalendar\Widgets\Concerns;
+
+trait InteractsWithRawJS
+{
+    /**
+     * A ClassName Input for adding classNames to the outermost event element.
+     * If supplied as a callback function, it is called every time the associated event data changes.
+     *
+     * @see https://fullcalendar.io/docs/event-render-hooks
+     *
+     * @return string
+     */
+    public function eventClassNames(): string
+    {
+        return <<<JS
+            null
+        JS;
+    }
+
+    /**
+     * A Content Injection Input. Generated content is inserted inside the inner-most wrapper of the event element.
+     * If supplied as a callback function, it is called every time the associated event data changes.
+     *
+     * @see https://fullcalendar.io/docs/event-render-hooks
+     *
+     * @return string
+     */
+    public function eventContent(): string
+    {
+        return <<<JS
+            null
+        JS;
+    }
+
+    /**
+     * Called right after the element has been added to the DOM. If the event data changes, this is NOT called again.
+     *
+     * @see https://fullcalendar.io/docs/event-render-hooks
+     *
+     * @return string
+     */
+    public function eventDidMount(): string
+    {
+        return <<<JS
+            null
+        JS;
+    }
+
+    /**
+     * Called right before the element will be removed from the DOM.
+     *
+     * @see https://fullcalendar.io/docs/event-render-hooks
+     *
+     * @return string
+     */
+    public function eventWillUnmount(): string
+    {
+        return <<<JS
+            null
+        JS;
+    }
+}

src/Widgets/FullCalendarWidget.php

@@ -18,6 +18,8 @@ class FullCalendarWidget extends Widget implements HasForms, HasActions
     use Concerns\InteractsWithRecords;
     use Concerns\InteractsWithHeaderActions;
     use Concerns\InteractsWithModalActions;
+    use Concerns\InteractsWithRawJS;
+    use Concerns\CanBeConfigured;
 
     protected static string $view = 'filament-fullcalendar::fullcalendar';
 

src/helpers.php

@@ -0,0 +1,18 @@
+<?php
+
+namespace Saade\FilamentFullCalendar;
+
+if(! function_exists('Saade\FilamentFullCalendar\array_merge_recursive_unique')) {
+    function array_merge_recursive_unique(array $array1, array $array2): array
+    {
+        foreach ($array2 as $key => $value) {
+            if (is_array($value) && isset($array1[$key]) && is_array($array1[$key])) {
+                $array1[$key] = array_merge_recursive_unique($array1[$key], $value);
+            } else {
+                $array1[$key] = $value;
+            }
+        }
+
+        return $array1;
+    }
+}