Display the blocked periods to the calendar page (#432)

This commit is contained in:
Alex Tselegidis 2023-11-17 09:42:57 +01:00
parent f5360d2f2d
commit 0cc51ed33c
3 changed files with 69 additions and 5 deletions

View file

@ -598,6 +598,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);
}
catch (Throwable $e)

View file

@ -382,6 +382,14 @@ App.Utils.CalendarDefaultView = (function () {
$target.hasClass('fc-custom') && vars('privileges').appointments.edit === true ? '' : 'd-none';
displayDelete =
$target.hasClass('fc-custom') && vars('privileges').appointments.delete === true ? 'me-2' : 'd-none'; // Same value at the time.
let startDateTimeObject = info.event.start;
let endDateTimeObject = info.event.end || info.event.start;
if (info.event.extendedProps.data) {
startDateTimeObject = new Date(info.event.extendedProps.data.start_datetime);
endDateTimeObject = new Date(info.event.extendedProps.data.end_datetime);
}
$html = $('<div/>', {
'html': [
@ -391,7 +399,7 @@ App.Utils.CalendarDefaultView = (function () {
}),
$('<span/>', {
'text': App.Utils.Date.format(
moment(info.event.start).format('YYYY-MM-DD HH:mm:ss'),
moment(startDateTimeObject).format('YYYY-MM-DD HH:mm:ss'),
vars('date_format'),
vars('time_format'),
true
@ -405,7 +413,7 @@ App.Utils.CalendarDefaultView = (function () {
}),
$('<span/>', {
'text': App.Utils.Date.format(
moment(info.event.end).format('YYYY-MM-DD HH:mm:ss'),
moment(endDateTimeObject).format('YYYY-MM-DD HH:mm:ss'),
vars('date_format'),
vars('time_format'),
true
@ -1237,7 +1245,7 @@ App.Utils.CalendarDefaultView = (function () {
backgroundColor: '#d65069',
borderColor: '#d65069',
textColor: '#ffffff',
editable: true,
editable: false,
className: 'fc-blocked-period fc-unavailability',
data: blockedPeriod
};

View file

@ -115,6 +115,9 @@ App.Utils.CalendarTableView = (function () {
/** @var {Array} response.unavailabilities */
createUnavailabilities($providerColumn, response.unavailabilities);
// Add the blocked periods to the column.
createBlockedPeriods($providerColumn, response.blocked_periods);
// Add the provider breaks to the column.
const workingPlan = JSON.parse(provider.settings.working_plan);
const day = moment(date).format('dddd').toLowerCase();
@ -619,6 +622,9 @@ App.Utils.CalendarTableView = (function () {
// Add the unavailabilities to the column.
/** @var {Array} events.unavailabilities */
createUnavailabilities($providerColumn, events.unavailabilities);
// Add the blocked periods to the column.
createBlockedPeriods($providerColumn, events.blocked_periods);
}
/**
@ -932,6 +938,43 @@ App.Utils.CalendarTableView = (function () {
$providerColumn.find('.calendar-wrapper').data('fullCalendar').addEventSource(calendarEventSource);
}
/**
* Create Blocked Period Events
*
* This method will add the blocked period on the table view.
*
* @param {jQuery} $providerColumn The provider column container.
* @param {Object[]} blockedPeriods Contains the blocked period data.
*/
function createBlockedPeriods($providerColumn, blockedPeriods) {
if (blockedPeriods.length === 0) {
return;
}
const calendarEventSource = [];
for (const index in blockedPeriods) {
const blockedPeriod = blockedPeriods[index];
const event = {
title: blockedPeriod.name,
start: moment(blockedPeriod.start_datetime).toDate(),
end: moment(blockedPeriod.end_datetime).toDate(),
allDay: true,
backgroundColor: '#d65069',
borderColor: '#d65069',
textColor: '#ffffff',
editable: false,
className: 'fc-blocked-period fc-unavailability',
data: blockedPeriod
};
calendarEventSource.push(event);
}
$providerColumn.find('.calendar-wrapper').data('fullCalendar').addEventSource(calendarEventSource);
}
/**
* Create break events in the table view.
@ -1051,6 +1094,14 @@ App.Utils.CalendarTableView = (function () {
displayDelete =
$target.hasClass('fc-custom') && vars('privileges').appointments.delete === true ? '' : 'd-none'; // Same value at the time.
let startDateTimeObject = info.event.start;
let endDateTimeObject = info.event.end || info.event.start;
if (info.event.extendedProps.data) {
startDateTimeObject = new Date(info.event.extendedProps.data.start_datetime);
endDateTimeObject = new Date(info.event.extendedProps.data.end_datetime);
}
$html = $('<div/>', {
'html': [
$('<strong/>', {
@ -1059,7 +1110,7 @@ App.Utils.CalendarTableView = (function () {
}),
$('<span/>', {
'text': App.Utils.Date.format(
moment(info.event.start).format('YYYY-MM-DD HH:mm:ss'),
moment(startDateTimeObject).format('YYYY-MM-DD HH:mm:ss'),
vars('date_format'),
vars('time_format'),
true
@ -1073,7 +1124,7 @@ App.Utils.CalendarTableView = (function () {
}),
$('<span/>', {
'text': App.Utils.Date.format(
moment(info.event.end).format('YYYY-MM-DD HH:mm:ss'),
moment(endDateTimeObject).format('YYYY-MM-DD HH:mm:ss'),
vars('date_format'),
vars('time_format'),
true