Display the blocked periods in the calendar (#432)

application/controllers/Calendar.php

@@ -28,6 +28,7 @@ class Calendar extends EA_Controller {
 
         $this->load->model('appointments_model');
         $this->load->model('unavailabilities_model');
+        $this->load->model('blocked_periods_model');
         $this->load->model('customers_model');
         $this->load->model('services_model');
         $this->load->model('providers_model');
@@ -744,6 +745,11 @@ class Calendar extends EA_Controller {
 
                 $response['unavailabilities'] = array_values($response['unavailabilities']);
             }
+            
+            // Add blocked periods to the response. 
+            $start_date = request('start_date'); 
+            $end_date = request('end_date'); 
+            $response['blocked_periods'] = $this->blocked_periods_model->get_for_period($start_date, $end_date); 
 
             json_response($response);
         }

application/models/Blocked_periods_model.php

@@ -365,4 +365,41 @@ class Blocked_periods_model extends EA_Model {
 
         $blocked_period = $decoded_resource;
     }
+
+    /**
+     * Get all the blocked periods that are within the provided period.
+     *
+     * @param string $start_date
+     * @param string $end_date
+     *
+     * @return array
+     */
+    public function get_for_period(string $start_date, string $end_date): array
+    {
+        return $this
+            ->query()
+            //
+            ->group_start()
+            ->where('DATE(start_datetime) <=', $start_date)
+            ->where('DATE(end_datetime) >=', $end_date)
+            ->group_end()
+            //
+            ->or_group_start()
+            ->where('DATE(start_datetime) >=', $start_date)
+            ->where('DATE(end_datetime) <=', $end_date)
+            ->group_end()
+            //
+            ->or_group_start()
+            ->where('DATE(end_datetime) >', $start_date)
+            ->where('DATE(end_datetime) <', $end_date)
+            ->group_end()
+            //
+            ->or_group_start()
+            ->where('DATE(start_datetime) >', $start_date)
+            ->where('DATE(start_datetime) <', $end_date)
+            ->group_end()
+            //
+            ->get()
+            ->result_array();
+    }
 }

assets/css/layouts/backend_layout.scss

@@ -401,6 +401,12 @@ body legend {
     opacity: 0.7;
 }
 
+#calendar-page #calendar .fc-unavailability.fc-blocked-period {
+    background-image: none;
+    text-shadow: none;
+}
+
+
 #calendar-page .fc-event-time {
     font-weight: bold;
 }

assets/js/utils/calendar_default_view.js

@@ -86,9 +86,9 @@ App.Utils.CalendarDefaultView = (function () {
 
             let startMoment;
             let endMoment;
-            
+
-            const data = lastFocusedEventData.extendedProps.data; 
+            const data = lastFocusedEventData.extendedProps.data;
-            
+
             if (data.hasOwnProperty('workingPlanException')) {
                 const date = lastFocusedEventData.extendedProps.data.date;
                 const workingPlanException = lastFocusedEventData.extendedProps.data.workingPlanException;
@@ -1228,6 +1228,23 @@ App.Utils.CalendarDefaultView = (function () {
                     calendarEventSource.push(unavailabilityEvent);
                 });
 
+                response.blocked_periods.forEach(blockedPeriod => {
+                    const blockedPeriodEvent = {
+                        title: blockedPeriod.name,
+                        start: moment(blockedPeriod.start_datetime).toDate(),
+                        end: moment(blockedPeriod.end_datetime).toDate(),
+                        allDay: true,
+                        backgroundColor: '#d65069',
+                        borderColor: '#d65069',
+                        textColor: '#ffffff',
+                        editable: true,
+                        className: 'fc-blocked-period fc-unavailability',
+                        data: blockedPeriod
+                    };
+
+                    calendarEventSource.push(blockedPeriodEvent);
+                });
+
                 const calendarView = fullCalendar.view;
 
                 if (calendarView.type === 'dayGridMonth') {