Display the blocked periods in the calendar (#432)

alextselegidis · Nov 17, 2023 · 602afb5 · 602afb5
1 parent 8d0b2cf
commit 602afb5
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 3 deletions.
diff --git a/application/controllers/Calendar.php b/application/controllers/Calendar.php
@@ -28,6 +28,7 @@ public function __construct()
 
  $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 @@ public function get_calendar_appointments()
 
  $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);
  }

diff --git a/application/models/Blocked_periods_model.php b/application/models/Blocked_periods_model.php
@@ -365,4 +365,41 @@ public function api_decode(array &$blocked_period, array $base = NULL)
 
  $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();
+ }
 }
diff --git a/assets/css/layouts/backend_layout.scss b/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;
 }

diff --git a/assets/js/utils/calendar_default_view.js b/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') {