Merge pull request #4 from captive/develop

Add the tooltip property

classes/EventData.php

@@ -38,6 +38,13 @@ class EventData
      */
     public $end;
 
+    /**
+     *
+     * @var string|null the tooltip content
+     */
+    public $tooltip;
+
+
     /**
      * @var array Other additional properties
      */
@@ -135,4 +142,4 @@ protected function parseDateTime(string $dateTime, $timeZone = null)
         }
         return $date;
     }
-}
+}

docs/example.config_calendar.yaml

@@ -44,6 +44,9 @@ recordEnd: end_time
 # The property to use 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
+recordTooltip: [recordTitle]
+
 # Available display modes to be supported in this instance
 availableDisplayModes: [month, week, day, list]
 

widgets/Calendar.php

@@ -72,6 +72,12 @@ class Calendar extends WidgetBase
      */
     public $recordColor = null;
 
+    /**
+     *
+     * @var string|array The model property to use as the content of the tooltip for the record
+     */
+    public $recordTooltip = null;
+
     /**
      * @var array Display modes to allow ['month', 'week', 'day', 'list']
      */
@@ -130,6 +136,7 @@ public function init()
             'recordStart',
             'recordEnd',
             'recordColor',
+            'recordTooltip',
             'previewMode',
             'searchList',
             'availableDisplayModes',
@@ -176,8 +183,12 @@ protected function loadAssets()
 
         $this->addCss(['packages/core/main.min.css', 'packages/list/main.min.css','packages/daygrid/main.min.css','packages/timegrid/main.min.css'], '4.1.0');
         $this->addCss(['less/calendar.less'], 'captive.calendar');
-        // $this->addJs('js/fullcalendar.js', '4.0.0-alpha.4');
 
+        //Tooltip
+        $this->addJs('packages/vendor/popper.min.js', '4.1.0');
+        $this->addJs('packages/vendor/tooltip.min.js', '4.1.0');
+
+        //Calendar
         $this->addJs('packages/core/main.min.js', '4.1.0');
         $this->addJs('packages/list/main.min.js', '4.1.0');
         $this->addJs('packages/daygrid/main.min.js', '4.1.0');
@@ -676,7 +687,22 @@ public function getRecords($startTime = 0 , $endTime = 0)
         $events = [];
 
         $timeZone = new DateTimeZone(Config::get('app.timezone','UTC'));
+
         foreach ($records as $record) {
+            if (empty($this->recordTooltip)) {
+                $tooltip = null;
+            }else {
+                if (is_array($this->recordTooltip)) {
+                    $tooltip = '';
+                    foreach ($this->recordTooltip as $item){
+                        $keyName = $this->{$item};
+                        $tooltip .= $record->{$keyName} . ' ';
+                    }
+                }else {
+                    $tooltip = $record->{$this->recordTooltip};
+                }
+            }
+
             $eventData = new EventData([
                 'id'     => $record->getKey(),
                 'url'    => $this->getRecordUrl($record),
@@ -685,6 +711,7 @@ public function getRecords($startTime = 0 , $endTime = 0)
                 'end'    => $record->{$this->recordEnd},
                 'allDay' => (bool) $record->allDay,
                 'color'  => empty($this->recordColor) ? '' : $record->{$this->recordColor},
+                'tooltip' => $tooltip
             ], $timeZone);
             $events[] = $eventData->toArray();
         }

widgets/calendar/assets/js/october.calendar.js

@@ -68,6 +68,7 @@
         const $calendar = this.$el.find('.calendar-control');
         const self = this;
         const timezone = $('meta[name="backend-timezone"]').attr('content');
+        const container = document.querySelector(".calendar-container");
 
         this.calendarControl = new FullCalendar.Calendar($calendar[0], {
             plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list', 'momentTimezone'],
@@ -93,6 +94,17 @@
             eventClick: function (info) {
                 self.onEventClick(info);
             },
+            eventRender: function(info) {
+                const tooltipContent = info.event.extendedProps.tooltip;
+                if (tooltipContent) {
+                    let tooltip = new Tooltip(info.el, {
+                        title: tooltipContent,
+                        placement: 'top',
+                        trigger: 'hover',
+                        container: container
+                    });
+                }
+            },
             events: function (fetchInfo, successCallback, failureCallback){
                 self.onPrevNextButtonClick(fetchInfo, successCallback, failureCallback);
             },

widgets/calendar/assets/less/calendar.less

@@ -25,4 +25,37 @@
         }
 
     }
+
+    .calendar-tooltip {
+        position: absolute;
+        z-index: 9999;
+        color: black;
+        width: 150px;
+        border-radius: 3px;
+        box-shadow: 0 0 2px rgba(0,0,0,0.5);
+        text-align: center;
+        &[x-placement^="top"] {
+            margin-bottom: 5px;
+            .tooltip-arrow {
+                border-width: 5px 5px 0 5px;
+                border-left-color: transparent;
+                border-right-color: transparent;
+                border-bottom-color: transparent;
+                bottom: -5px;
+                left: calc(50% - 5px);
+                margin-top: 0;
+                margin-bottom: 0;
+            }
+        }
+        .tooltip-arrow {
+            width: 0;
+            height: 0;
+            border-style: solid;
+            position: absolute;
+            margin: 5px;
+            border-color: #34495e;
+        }
+    }
 }
+
+