Add backend calendar controller (#1313)

* Update to fullcalendar v6.1.15

-add widget initial view config
-add widget first day of week config
-add model attribute config for all day event

* Clean up

* Update modules/backend/widgets/Calendar.php

* Update modules/backend/widgets/calendar/assets/less/calendar.less

* Clean css

- remove unused files
- remove comments

* Use compiled css

- add calendar less file to ServiceProvider
- use fullcalendar css variables for theming
- add option to chosse calendar theme for buttons style base on Winter's ones

---------

Co-authored-by: Luke Towers <[email protected]>
Co-authored-by: Luke Towers <[email protected]>

Author: damsfx

modules/backend/ServiceProvider.php

@@ -89,6 +89,7 @@ protected function registerAssetBundles()
             $combiner->registerBundle('~/modules/backend/assets/js/winter.js');
             $combiner->registerBundle('~/modules/backend/widgets/table/assets/js/build.js');
             $combiner->registerBundle('~/modules/backend/widgets/mediamanager/assets/js/mediamanager-browser.js');
+            $combiner->registerBundle('~/modules/backend/widgets/calendar/assets/less/calendar.less');
             $combiner->registerBundle('~/modules/backend/widgets/mediamanager/assets/less/mediamanager.less');
             $combiner->registerBundle('~/modules/backend/widgets/reportcontainer/assets/less/reportcontainer.less');
             $combiner->registerBundle('~/modules/backend/widgets/table/assets/less/table.less');

modules/backend/behaviors/CalendarController.php

@@ -53,16 +53,28 @@ class CalendarController extends ControllerBehavior
      */
     protected array $requiredConfig = ['modelClass', 'searchList'];
 
+    /**
+     * @var array Visible actions in context of the controller
+     */
+    protected $actions = ['calendar'];
+
+    /**
+     * @var mixed Configuration for this behaviour
+     */
+    public $calendarConfig = 'config_calendar.yaml';
+
     /**
      * Behavior constructor
      */
     public function __construct(\Backend\Classes\Controller $controller)
     {
         parent::__construct($controller);
 
-        // Build the configuration
-        $this->config = $this->makeConfig($controller->calendarConfig, $this->requiredConfig);
-        $this->config->modelClass = Str::normalizeClassName($this->config->modelClass);
+        /*
+        * Build configuration
+        */
+        $config = $controller->calendarConfig ?: $this->calendarConfig;
+        $this->setConfig($config, $this->requiredConfig);
     }
 
     /**
@@ -72,7 +84,7 @@ public function calendar(): void
     {
         $this->controller->pageTitle = $this->controller->pageTitle ? : Lang::get($this->getConfig(
             'title',
-            'luketowers.calendarwidget::lang.behaviors.calendar.title'
+            'backend::lang.calendar.title'
         ));
         $this->controller->bodyClass = 'slim-container';
         $this->makeCalendar();

modules/backend/behaviors/calendarcontroller/docs/example.config_calendar.yaml

@@ -5,56 +5,49 @@
 # Model to use for getting the records to display on the calendar
 modelClass: Author\Plugin\Models\Event
 
+# Calendar Title
+title: 'backend::lang.calendar.title'
+
 # Search columns
 # Used for configuration of additional columns to search by
 searchList: $/author/plugin/models/event/columns.yaml
 
 # Record URL
-recordUrl: author/plugins/events/update/:event_id
-
+recordUrl: author/plugins/events/update/:id
 
-# Record on click
-# @see custom.calendar.js sample
-# data is a plain object with the following properties:
-#   startDate: is a JS Date Object
-#   endDate: is a JS Date Object, may be null
-#   event: A standard JavaScript object that FullCalendar uses to store information about a calendar event, including id, title, start, end
-#   eventEl: The HTML element for this event
-# recordOnClick: $.wn.eventController.onEventClick(:data, :startDate, :endDate, :event, :eventEl)
-
-# Triggered when the user clicks on a date or a time
-# data is a plain object with the following properties
-# date: is the a JS Date Object for the clicked day/time.
-# dateStr: An ISO8601 string representation of the date
-# allDay: true or false
-# dayEl: An HTML element that represents the whole-day that was clicked on.
-# event: The native JavaScript event with low-level information such as click coordinates.
-# view: The current view @see https://fullcalendar.io/docs/v4/view-object
-onClickDate: $.wn.availabilitySlotController.onClickDate(:data, :date, :dateStr, :allDay,  :dayEl, :event, :view)
-
-# The property to use as the title displayed on the calendar
+# Record property used as the title displayed on the calendar
 recordTitle: name
 
-# The property to use as the start time for the record
-recordStart: start_time
+# Record property used as the start time
+recordStart: start_at
+
+# Record property used as the end time
+recordEnd: end_at
 
-# The property to use as the end time for the record
-recordEnd: end_time
+# Record property used as all day long event
+recordAllDay: all_day
 
-# The property to use as the background color displayed on the record, , '' = the default background color in the calendar.less
+# Record property used as the background color displayed on the record, , '' = the default background color in the calendar.less
 recordColor: event_color
 
-# The property to use as the content of the tooltip for the record
+# Record property used as the content of the tooltip
 recordTooltip: [recordTitle]
 
+# Calendar widget theme color for buttons ('' for default, primary or secondary)
+calendarTheme:
+
 # Available display modes to be supported in this instance
 availableDisplayModes: [month, week, day, list]
 
+# Default view for calendar widget (month, week, day or list)
+initialView: month
+
+# First day of week, 0=Sun, 1=Mon ...
+firstDay: 0
+
 # Flag for whether calendar is read only or editable
 previewMode: true
 
-# load one month of records at a time, ensure they stay loaded between month pages
-
 # Toolbar widget configuration
 toolbar:
     # Partial for toolbar buttons
@@ -63,7 +56,31 @@ toolbar:
     # Search widget configuration
     search:
         prompt: backend::lang.list.search_prompt
+
+# The filter config file for the controller
 filter: calendar_filter.yaml
 
 # when filter gets applied, clear the client's cache of events, essentially start them over
 # if they had just loaded this page / month with the current filters applied
+
+
+# Record on click
+# @see custom.calendar.js sample
+# data is a plain object with the following properties:
+#   startDate: is a JS Date Object
+#   endDate: is a JS Date Object, may be null
+#   event: A standard JavaScript object that FullCalendar uses to store information about a calendar event, including id, title, start, end
+#   eventEl: The HTML element for this event
+# recordOnClick: $.wn.eventController.onEventClick(:data, :startDate, :endDate, :event, :eventEl)
+
+# Triggered when the user clicks on a date or a time
+# data is a plain object with the following properties
+# date: is the a JS Date Object for the clicked day/time.
+# dateStr: An ISO8601 string representation of the date
+# allDay: true or false
+# dayEl: An HTML element that represents the whole-day that was clicked on.
+# event: The native JavaScript event with low-level information such as click coordinates.
+# view: The current view @see https://fullcalendar.io/docs/v4/view-object
+onClickDate: $.wn.availabilitySlotController.onClickDate(:data, :date, :dateStr, :allDay,  :dayEl, :event, :view)
+
+# load one month of records at a time, ensure they stay loaded between month pages