Display the blocked periods to the calendar page (#432)
This commit is contained in:
parent
f5360d2f2d
commit
0cc51ed33c
3 changed files with 69 additions and 5 deletions
|
@ -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)
|
||||
|
|
|
@ -383,6 +383,14 @@ App.Utils.CalendarDefaultView = (function () {
|
|||
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': [
|
||||
$('<strong/>', {
|
||||
|
@ -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
|
||||
};
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -933,6 +939,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
|
||||
|
|
Loading…
Reference in a new issue