Merge pull request #164 from cawecoy/feature/eventDidMount

Add support for writing custom JS to interact with FullCalendar's render hooks

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)
@@ -391,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
@@ -422,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
  {
@@ -461,6 +480,24 @@ protected function headerActions(): array
  }
 ```
 
+## Event tooltip on hover
+
+You can add a tooltip to fully show the event title when the user hovers over the event via JavaScript on the `eventDidMount` method:
+
+```php
+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.

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

@@ -19,6 +19,10 @@
                 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/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,7 @@ 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';