Merge pull request #16 from wychoong/calendar-click-event

feat: open modal on calendar click
saade · Jul 1, 2022 · efc0fe9 · efc0fe9
2 parents 0302ef9 + ad0a0ce
commit efc0fe9
Show file tree

Hide file tree

Showing 6 changed files with 97 additions and 17 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # The Most Popular JavaScript Calendar as a Filament Widget 💛
 
-![Monthly Calendar](./art/fullcalendar-widget.png)
+![FullCalendar Widget](./art/fullcalendar-widget.png)
 
 [![Latest Version on Packagist](https://img.shields.io/packagist/v/saade/filament-fullcalendar.svg?style=flat-square)](https://packagist.org/packages/saade/filament-fullcalendar)
 [![GitHub Tests Action Status](https://img.shields.io/github/workflow/status/saade/filament-fullcalendar/run-tests?label=tests)](https://github.com/saade/filament-fullcalendar/actions?query=workflow%3Arun-tests+branch%3Amain)
@@ -122,6 +122,8 @@ return [
 
     'editable' => true,
 
+    'selectable' => false,
+
     'dayMaxEvents' => true
 ];
 ```

diff --git a/config/filament-fullcalendar.php b/config/filament-fullcalendar.php
@@ -12,14 +12,16 @@
     'locale' => config('app.locale'),
 
     'headerToolbar' => [
-        'left'   => 'prev,next today',
+        'left' => 'prev,next today',
         'center' => 'title',
-        'right'  => 'dayGridMonth,dayGridWeek,dayGridDay'
+        'right' => 'dayGridMonth,dayGridWeek,dayGridDay',
     ],
 
     'navLinks' => true,
 
     'editable' => true,
 
-    'dayMaxEvents' => true
+    'selectable' => false,
+
+    'dayMaxEvents' => true,
 ];
diff --git a/resources/views/fullcalendar.blade.php b/resources/views/fullcalendar.blade.php
@@ -2,16 +2,6 @@
 
 <x-filament::widget>
     <x-filament::card>
-        @if( $this::canCreate() )
-            <div class="flex items-center justify-end">
-                <x-filament::button wire:click="onCreateEventClick">
-                    {{ __('filament::resources/pages/create-record.form.actions.create.label') }}
-                </x-filament::button>
-            </div>
-
-            <x-filament::hr />
-        @endif
-
         <div
             wire:ignore
             x-data=""
@@ -39,12 +29,26 @@
                         @endif
                     }
 
+                    const dateClick = function ({ date, allDay }) {
+                        @if($this::canCreate())
+                            $wire.onCreateEventClick({ date, allDay })
+                        @endif
+                    }
+
+                    const select = function ({ start, end, allDay }) {
+                        @if($this->config('selectable', false))
+                            $wire.onCreateEventClick({ start, end, allDay })
+                        @endif
+                    }
+
                     const calendar = new FullCalendar.Calendar($el, {
                         ...config,
                         locale,
                         events,
                         eventClick,
-                        eventDrop
+                        eventDrop,
+                        dateClick,
+                        select,
                     });
 
                     calendar.render();

diff --git a/src/Widgets/Concerns/CanManageEvents.php b/src/Widgets/Concerns/CanManageEvents.php
@@ -2,14 +2,18 @@
 
 namespace Saade\FilamentFullCalendar\Widgets\Concerns;
 
+use Closure;
+use Illuminate\Support\Carbon;
 use Saade\FilamentFullCalendar\Widgets\Forms\CreateEventForm;
 use Saade\FilamentFullCalendar\Widgets\Forms\EditEventForm;
+use Saade\FilamentFullCalendar\Widgets\FullCalendarWidget;
 
 trait CanManageEvents
 {
     use AuthorizesActions;
     use CreateEventForm;
     use EditEventForm;
+    use EvaluateClosures;
 
     protected function setUpForms(): void
     {
@@ -41,12 +45,40 @@ public function onEventClick($event): void
         $this->dispatchBrowserEvent('open-modal', ['id' => 'fullcalendar--edit-event-modal']);
     }
 
-    public function onCreateEventClick(): void
+    public function onCreateEventClick(array $date): void
     {
         if (! static::canCreate()) {
             return;
         }
 
+        $this->evaluate($this->handleCreateEventClickUsing(), [
+            'date' => $date,
+        ]);
+
         $this->dispatchBrowserEvent('open-modal', ['id' => 'fullcalendar--create-event-modal']);
     }
+
+    protected function handleCreateEventClickUsing(): Closure
+    {
+        return function ($date, FullCalendarWidget $calendar) {
+            $timezone = $this->config('timeZone', config('app.timezone'));
+
+            if (isset($date['date'])) { // for single date click
+                $end = $start = Carbon::parse($date['date'], $timezone);
+            } else { // for date range select
+                $start = Carbon::parse($date['start'], $timezone);
+                $end = Carbon::parse($date['end'], $timezone);
+
+                if ($date['allDay']) {
+                    /**
+                     * date is exclusive, read more https://fullcalendar.io/docs/select-callback
+                     * For example, if the selection is all-day and the last day is a Thursday, end will be Friday.
+                     */
+                    $end->subDay()->endOfDay();
+                }
+            }
+
+            $calendar->createEventForm->fill(['start' => $start, 'end' => $end]);
+        };
+    }
 }
diff --git a/src/Widgets/Concerns/EvaluateClosures.php b/src/Widgets/Concerns/EvaluateClosures.php
@@ -0,0 +1,30 @@
+<?php
+
+namespace Saade\FilamentFullCalendar\Widgets\Concerns;
+
+use Closure;
+
+trait EvaluateClosures
+{
+    public function evaluate($value, array $parameters = [], array $exceptParameters = [])
+    {
+        if ($value instanceof Closure) {
+            return app()->call(
+                $value,
+                array_merge(
+                    $this->getDefaultEvaluationParameters(),
+                    $parameters,
+                ),
+            );
+        }
+
+        return $value;
+    }
+
+    protected function getDefaultEvaluationParameters(): array
+    {
+        return [
+            'calendar' => $this,
+        ];
+    }
+}
diff --git a/src/Widgets/Concerns/UsesConfig.php b/src/Widgets/Concerns/UsesConfig.php
@@ -4,8 +4,18 @@
 
 trait UsesConfig
 {
+    /**
+     * this allows to have calendar specific config on top of global config
+     */
+    protected array $fullCalendarConfig = [];
+
     public function getConfig(): array
     {
-        return config('filament-fullcalendar');
+        return array_merge(config('filament-fullcalendar'), $this->fullCalendarConfig);
+    }
+
+    public function config($key, $default = null)
+    {
+        return $this->getConfig()[$key] ?? $default;
     }
 }