Create new event by dragging / clicking inside the calendar

resources/js/calendar-widget.js

@@ -1,23 +1,25 @@
 export default function calendarWidget({
-                                           view = 'dayGridMonth',
-                                           locale = 'en',
-                                           firstDay = 1,
-                                           events = [],
-                                           eventContent = null,
-                                           selectable = false,
-                                           eventClickEnabled = false,
-                                           eventDragEnabled = false,
-                                           eventResizeEnabled = false,
-                                           noEventsClickEnabled = false,
-                                           dayMaxEvents = false,
-                                           moreLinkContent = null,
-                                           resources = [],
-                                           hasDateClickContextMenu = false,
-                                           hasDateSelectContextMenu = false,
-                                           hasEventClickContextMenu = false,
-                                           hasNoEventsClickContextMenu = false,
-                                           options = {},
-                                       }) {
+    view = 'dayGridMonth',
+    locale = 'en',
+    firstDay = 1,
+    events = [],
+    eventContent = null,
+    selectable = false,
+    eventClickEnabled = false,
+    eventDragEnabled = false,
+    eventResizeEnabled = false,
+    noEventsClickEnabled = false,
+    dateSelectEnabled = false,
+    dateClickEnabled = false,
+    dayMaxEvents = false,
+    moreLinkContent = null,
+    resources = [],
+    hasDateClickContextMenu = false,
+    hasDateSelectContextMenu = false,
+    hasEventClickContextMenu = false,
+    hasNoEventsClickContextMenu = false,
+    options = {},
+}) {
     return {
 
         calendarEl: null,
@@ -38,12 +40,12 @@ export default function calendarWidget({
                 locale: locale,
                 firstDay: firstDay,
                 dayMaxEvents: dayMaxEvents,
-                selectable: hasDateSelectContextMenu,
+                selectable: hasDateSelectContextMenu || dateSelectEnabled,
                 eventStartEditable: eventDragEnabled,
                 eventDurationEditable: eventResizeEnabled,
             };
 
-            if (hasDateClickContextMenu) {
+            if (hasDateClickContextMenu && !dateClickEnabled) {
                 settings.dateClick = (info) => {
                     self.$el.querySelector('[calendar-context-menu]').dispatchEvent(new CustomEvent('calendar--open-menu', {
                         detail: {
@@ -62,7 +64,7 @@ export default function calendarWidget({
                 };
             }
 
-            if (hasDateSelectContextMenu) {
+            if (hasDateSelectContextMenu && !dateSelectEnabled) {
                 settings.select = (info) => {
                     self.$el.querySelector('[calendar-context-menu]').dispatchEvent(new CustomEvent('calendar--open-menu', {
                         detail: {
@@ -82,6 +84,32 @@ export default function calendarWidget({
                 };
             }
 
+            if (dateClickEnabled && !hasEventClickContextMenu) {
+                settings.dateClick = (info) => {
+                    this.$wire.onDateClick({
+                        date: info.date,
+                        dateStr: info.dateStr,
+                        allDay: info.allDay,
+                        view: info.view,
+                        resource: info.resource,
+                    });
+                };
+            }
+
+            if (dateSelectEnabled && !hasDateSelectContextMenu) {
+                settings.select = (info) => {
+                    this.$wire.onDateSelect({
+                        start: info.start,
+                        startStr: info.startStr,
+                        end: info.end,
+                        endStr: info.endStr,
+                        allDay: info.allDay,
+                        view: info.view,
+                        resource: info.resource,
+                    });
+                };
+            }
+
             if (eventContent !== null) {
                 settings.eventContent = (info) => {
                     const content = self.getEventContent(info);
@@ -196,6 +224,10 @@ export default function calendarWidget({
                 }
             };
 
+            settings.eventAllUpdated = (info) => {
+                this.$wire.currentView = info.view;
+            };
+
             this.ec = new EventCalendar(this.$el.querySelector('div'), {
                 ...settings,
                 ...options

resources/views/widgets/calendar.blade.php

@@ -3,6 +3,8 @@
     $eventDragEnabled = $this->isEventDragEnabled();
     $eventResizeEnabled = $this->isEventResizeEnabled();
     $noEventsClickEnabled = $this->isNoEventsClickEnabled();
+    $dateClickEnabled = $this->isDateClickEnabled();
+    $dateSelectEnabled = $this->isDateSelectEnabled();
     $onEventResizeStart = method_exists($this, 'onEventResizeStart');
     $onEventResizeStop = method_exists($this, 'onEventResizeStop');
     $hasDateClickContextMenu = !empty($this->getCachedDateClickContextMenuActions());
@@ -73,6 +75,8 @@
                 hasDateSelectContextMenu: @js($hasDateSelectContextMenu),
                 hasEventClickContextMenu: @js($hasEventClickContextMenu),
                 hasNoEventsClickContextMenu: @js($hasNoEventsClickContextMenu),
+                dateClickEnabled: @js($dateClickEnabled),
+                dateSelectEnabled: @js($dateSelectEnabled),
                 options: @js($this->getOptions()),
             })"
         >

src/Concerns/HandlesDateClick.php

@@ -0,0 +1,25 @@
+<?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,25 @@
+<?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/Widgets/CalendarWidget.php

@@ -8,6 +8,8 @@
 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;
@@ -51,6 +53,8 @@ class CalendarWidget extends Widget implements HasActions, HasForms
     use HasOptions;
     use HasResources;
     use HasSchema;
+    use HandlesDateClick;
+    use HandlesDateSelect;
     use InteractsWithActions;
     use InteractsWithForms;
     use InteractsWithRecord;
@@ -59,8 +63,15 @@ class CalendarWidget extends Widget implements HasActions, HasForms
 
     protected int | string | array $columnSpan = 'full';
 
+    public array $currentView;
+
     public function refreshRecords(): void
     {
         $this->dispatch('calendar--refresh');
     }
+
+    public function getView(): array
+    {
+        return $this->currentView;
+    }
 }