Create new event by dragging / clicking inside the calendar

resources/js/calendar-widget.js

@@ -9,6 +9,9 @@ export default function calendarWidget({
                                            eventDragEnabled = false,
                                            eventResizeEnabled = false,
                                            noEventsClickEnabled = false,
+                                           dateSelectEnabled = false,
+                                           dateClickEnabled = false,
+                                           viewDidMountEnabled = false,
                                            dayMaxEvents = false,
                                            moreLinkContent = null,
                                            resources = [],
@@ -38,47 +41,69 @@ export default function calendarWidget({
                 locale: locale,
                 firstDay: firstDay,
                 dayMaxEvents: dayMaxEvents,
-                selectable: hasDateSelectContextMenu,
+                selectable: dateSelectEnabled,
                 eventStartEditable: eventDragEnabled,
                 eventDurationEditable: eventResizeEnabled,
             };
 
-            if (hasDateClickContextMenu) {
+            if (dateClickEnabled) {
                 settings.dateClick = (info) => {
-                    self.$el.querySelector('[calendar-context-menu]').dispatchEvent(new CustomEvent('calendar--open-menu', {
-                        detail: {
-                            mountData: {
-                                date: info.date,
-                                dateStr: info.dateStr,
-                                allDay: info.allDay,
-                                view: info.view,
-                                resource: info.resource,
+                    if (hasDateClickContextMenu) {
+                        self.$el.querySelector('[calendar-context-menu]').dispatchEvent(new CustomEvent('calendar--open-menu', {
+                            detail: {
+                                mountData: {
+                                    date: info.date,
+                                    dateStr: info.dateStr,
+                                    allDay: info.allDay,
+                                    view: info.view,
+                                    resource: info.resource,
+                                },
+                                jsEvent: info.jsEvent,
+                                dayEl: info.dayEl,
+                                context: 'dateClick',
                             },
-                            jsEvent: info.jsEvent,
-                            dayEl: info.dayEl,
-                            context: 'dateClick',
-                        },
-                    }));
+                        }));
+                    } else {
+                        this.$wire.onDateClick({
+                            date: info.date,
+                            dateStr: info.dateStr,
+                            allDay: info.allDay,
+                            view: info.view,
+                            resource: info.resource,
+                        });
+                    }
                 };
             }
 
-            if (hasDateSelectContextMenu) {
+            if (dateSelectEnabled) {
                 settings.select = (info) => {
-                    self.$el.querySelector('[calendar-context-menu]').dispatchEvent(new CustomEvent('calendar--open-menu', {
-                        detail: {
-                            mountData: {
-                                start: info.start,
-                                startStr: info.startStr,
-                                end: info.end,
-                                endStr: info.endStr,
-                                allDay: info.allDay,
-                                view: info.view,
-                                resource: info.resource,
+                    if (hasDateSelectContextMenu) {
+                        self.$el.querySelector('[calendar-context-menu]').dispatchEvent(new CustomEvent('calendar--open-menu', {
+                            detail: {
+                                mountData: {
+                                    start: info.start,
+                                    startStr: info.startStr,
+                                    end: info.end,
+                                    endStr: info.endStr,
+                                    allDay: info.allDay,
+                                    view: info.view,
+                                    resource: info.resource,
+                                },
+                                jsEvent: info.jsEvent,
+                                context: 'dateSelect',
                             },
-                            jsEvent: info.jsEvent,
-                            context: 'dateSelect',
-                        },
-                    }));
+                        }));
+                    } else {
+                        this.$wire.onDateSelect({
+                            start: info.start,
+                            startStr: info.startStr,
+                            end: info.end,
+                            endStr: info.endStr,
+                            allDay: info.allDay,
+                            view: info.view,
+                            resource: info.resource,
+                        });
+                    }
                 };
             }
 
@@ -196,16 +221,21 @@ export default function calendarWidget({
                 }
             };
 
+
+            if (viewDidMountEnabled) {
+                settings.viewDidMount = (view) => {
+                    this.$wire.onViewDidMount({
+                        view: view,
+                    });
+                };
+            }
+
             this.ec = new EventCalendar(this.$el.querySelector('div'), {
                 ...settings,
                 ...options
             });
-            window.addEventListener('ec-add-event', this.addEvent);
-            window.addEventListener('calendar--refresh', () => this.ec.refetchEvents())
-        },
 
-        addEvent: function (event) {
-            this.ec.addEvent(event);
+            window.addEventListener('calendar--refresh', () => this.ec.refetchEvents())
         },
 
         getEventContent: function (info) {

resources/views/widgets/calendar.blade.php

@@ -3,6 +3,9 @@
     $eventDragEnabled = $this->isEventDragEnabled();
     $eventResizeEnabled = $this->isEventResizeEnabled();
     $noEventsClickEnabled = $this->isNoEventsClickEnabled();
+    $dateClickEnabled = $this->isDateClickEnabled();
+    $dateSelectEnabled = $this->isDateSelectEnabled();
+    $viewDidMountEnabled = $this->isViewDidMountEnabled();
     $onEventResizeStart = method_exists($this, 'onEventResizeStart');
     $onEventResizeStop = method_exists($this, 'onEventResizeStop');
     $hasDateClickContextMenu = !empty($this->getCachedDateClickContextMenuActions());
@@ -64,6 +67,9 @@
                 eventDragEnabled: @js($eventDragEnabled),
                 eventResizeEnabled: @js($eventResizeEnabled),
                 noEventsClickEnabled: @js($noEventsClickEnabled),
+                dateClickEnabled: @js($dateClickEnabled),
+                dateSelectEnabled: @js($dateSelectEnabled),
+                viewDidMountEnabled: @js($viewDidMountEnabled),
                 onEventResizeStart: @js($onEventResizeStart),
                 onEventResizeStop: @js($onEventResizeStop),
                 dayMaxEvents: @js($this->dayMaxEvents()),

src/Concerns/HandlesDateClick.php

@@ -0,0 +1,22 @@
+<?php
+
+namespace Guava\Calendar\Concerns;
+
+trait HandlesDateClick
+{
+    protected bool $dateClickEnabled = false;
+
+    public function onDateClick(array $info = []): void {}
+
+    public function dateClickEnabled(bool $enabled = true): static
+    {
+        $this->dateClickEnabled = $enabled;
+
+        return $this;
+    }
+
+    public function isDateClickEnabled(): bool
+    {
+        return $this->dateClickEnabled;
+    }
+}

src/Concerns/HandlesDateSelect.php

@@ -0,0 +1,22 @@
+<?php
+
+namespace Guava\Calendar\Concerns;
+
+trait HandlesDateSelect
+{
+    protected bool $dateSelectEnabled = false;
+
+    public function onDateSelect(array $info = []): void {}
+
+    public function dateSelectEnabled(bool $enabled = true): static
+    {
+        $this->dateSelectEnabled = $enabled;
+
+        return $this;
+    }
+
+    public function isDateSelectEnabled(): bool
+    {
+        return $this->dateSelectEnabled;
+    }
+}

src/Concerns/HandlesViewMount.php

@@ -0,0 +1,22 @@
+<?php
+
+namespace Guava\Calendar\Concerns;
+
+trait HandlesViewMount
+{
+    protected bool $viewDidMountEnabled = false;
+
+    public function onViewDidMount(array $info = []): void {}
+
+    public function viewDidMount(bool $enabled = true): static
+    {
+        $this->viewDidMountEnabled = $enabled;
+
+        return $this;
+    }
+
+    public function isViewDidMountEnabled(): bool
+    {
+        return $this->viewDidMountEnabled;
+    }
+}

src/Concerns/HasContextMenuActions.php

@@ -64,23 +64,11 @@ public function getNoEventsClickContextMenuActions(): array
     public function getCachedDateClickContextMenuActions(): array
     {
         return data_get($this->getCachedContextMenuActions(), Context::DateClick->value, []);
-        //        return collect($this->getCachedContextMenuActions())
-        //            ->filter(fn ($action) => ! method_exists($action, 'getContext')
-        //                || $action->getContext() === null
-        //                || $action->getContext() === Context::Click)
-        //            ->all()
-        //        ;
     }
 
     public function getCachedDateSelectContextMenuActions(): array
     {
         return data_get($this->getCachedContextMenuActions(), Context::DateSelect->value, []);
-        //        return collect($this->getCachedContextMenuActions())
-        //            ->filter(fn ($action) => ! method_exists($action, 'getContext')
-        //                || $action->getContext() === null
-        //                || $action->getContext() === Context::Select)
-        //            ->all()
-        //        ;
     }
 
     public function getCachedEventClickContextMenuActions(): array

src/ValueObjects/Event.php

@@ -266,7 +266,6 @@ public function toArray(): array
             'textColor' => $this->getTextColor(),
             'resourceIds' => $this->getResourceIds(),
             'extendedProps' => $this->getExtendedProps(),
-            //            'display' => 'background',
         ];
 
         if (($editable = $this->getEditable()) !== null) {

src/Widgets/CalendarWidget.php

@@ -8,10 +8,13 @@
 use Filament\Forms\Contracts\HasForms;
 use Filament\Support\Concerns\EvaluatesClosures;
 use Filament\Widgets\Widget;
+use Guava\Calendar\Concerns\HandlesDateClick;
+use Guava\Calendar\Concerns\HandlesDateSelect;
 use Guava\Calendar\Concerns\HandlesEventClick;
 use Guava\Calendar\Concerns\HandlesEventDragAndDrop;
 use Guava\Calendar\Concerns\HandlesEventResize;
 use Guava\Calendar\Concerns\HandlesNoEventsClick;
+use Guava\Calendar\Concerns\HandlesViewMount;
 use Guava\Calendar\Concerns\HasCalendarView;
 use Guava\Calendar\Concerns\HasContextMenuActions;
 use Guava\Calendar\Concerns\HasDayMaxEvents;
@@ -32,10 +35,13 @@
 class CalendarWidget extends Widget implements HasActions, HasForms
 {
     use EvaluatesClosures;
+    use HandlesDateClick;
+    use HandlesDateSelect;
     use HandlesEventClick;
     use HandlesEventDragAndDrop;
     use HandlesEventResize;
     use HandlesNoEventsClick;
+    use HandlesViewMount;
     use HasCalendarView;
     use HasContextMenuActions;
     use HasDayMaxEvents;