Update the default view so that it works with FullCalendar 5

This commit is contained in:
Alex Tselegidis 2022-01-18 15:55:21 +01:00
parent a762a37d7b
commit 387ac5bc19
5 changed files with 255 additions and 298 deletions

View file

@ -415,9 +415,7 @@ class Calendar extends EA_Controller {
{ {
try try
{ {
$required_permissions = can('edit', PRIV_USERS); if (cannot('edit', PRIV_USERS))
if ( ! $required_permissions)
{ {
throw new Exception('You do not have the required permissions for this task.'); throw new Exception('You do not have the required permissions for this task.');
} }

View file

@ -2,7 +2,7 @@
<?php section('styles') ?> <?php section('styles') ?>
<link rel="stylesheet" type="text/css" href="<?= asset_url('/assets/vendor/fullcalendar/fullcalendar.min.css') ?>"> <link rel="stylesheet" type="text/css" href="<?= asset_url('/assets/vendor/fullcalendar/main.min.css') ?>">
<?php section('styles') ?> <?php section('styles') ?>
@ -119,10 +119,10 @@
<?php section('scripts') ?> <?php section('scripts') ?>
<script src="<?= asset_url('assets/vendor/fullcalendar/fullcalendar.min.js') ?>"></script> <script src="<?= asset_url('assets/vendor/fullcalendar/main.min.js') ?>"></script>
<script src="<?= asset_url('assets/vendor/fullcalendar-moment/main.global.min.js') ?>"></script>
<script src="<?= asset_url('assets/vendor/jquery-jeditable/jquery.jeditable.min.js') ?>"></script> <script src="<?= asset_url('assets/vendor/jquery-jeditable/jquery.jeditable.min.js') ?>"></script>
<script src="<?= asset_url('assets/vendor/jquery-ui-timepicker-addon/jquery-ui-timepicker-addon.min.js') ?>"></script> <script src="<?= asset_url('assets/vendor/jquery-ui-timepicker-addon/jquery-ui-timepicker-addon.min.js') ?>"></script>
<script src="<?= asset_url('assets/js/components/working_plan_exceptions_modal.js') ?>"></script>
<script src="<?= asset_url('assets/js/utils/date.js') ?>"></script> <script src="<?= asset_url('assets/js/utils/date.js') ?>"></script>
<script src="<?= asset_url('assets/js/utils/message.js') ?>"></script> <script src="<?= asset_url('assets/js/utils/message.js') ?>"></script>
<script src="<?= asset_url('assets/js/utils/validation.js') ?>"></script> <script src="<?= asset_url('assets/js/utils/validation.js') ?>"></script>

View file

@ -35,6 +35,7 @@ App.Components.AppointmentsModal = (function () {
const $appointmentId = $('#appointment-id'); const $appointmentId = $('#appointment-id');
const $appointmentLocation = $('#appointment-location'); const $appointmentLocation = $('#appointment-location');
const $appointmentNotes = $('#appointment-notes'); const $appointmentNotes = $('#appointment-notes');
const $reloadAppointments = $('#reload-appointments');
const $selectFilterItem = $('#select-filter-item'); const $selectFilterItem = $('#select-filter-item');
const $selectService = $('#select-service'); const $selectService = $('#select-service');
const $selectProvider = $('#select-provider'); const $selectProvider = $('#select-provider');
@ -118,7 +119,7 @@ App.Components.AppointmentsModal = (function () {
// Close the modal dialog and refresh the calendar appointments. // Close the modal dialog and refresh the calendar appointments.
$appointmentsModal.find('.alert').addClass('d-none'); $appointmentsModal.find('.alert').addClass('d-none');
$appointmentsModal.modal('hide'); $appointmentsModal.modal('hide');
$selectFilterItem.trigger('change'); $reloadAppointments.trigger('click');
}; };
// Define error callback. // Define error callback.

View file

@ -18,14 +18,15 @@
*/ */
App.Components.UnavailabilitiesModal = (function () { App.Components.UnavailabilitiesModal = (function () {
const $unavailabilitiesModal = $('#unavailabilities-modal'); const $unavailabilitiesModal = $('#unavailabilities-modal');
const $unavailabilityId = $('#unavailability-id'); const $id = $('#unavailability-id');
const $unavailabilityStart = $('#unavailability-start'); const $startDatetime = $('#unavailability-start');
const $unavailabilityEnd = $('#unavailability-end'); const $endDatetime = $('#unavailability-end');
const $unavailabilityProvider = $('#unavailability-provider'); const $selectProvider = $('#unavailability-provider');
const $unavailabilityNotes = $('#unavailability-notes'); const $notes = $('#unavailability-notes');
const $saveUnavailability = $('#save-unavailability'); const $saveUnavailability = $('#save-unavailability');
const $insertUnavailability = $('#insert-unavailability'); const $insertUnavailability = $('#insert-unavailability');
const $selectFilterItem = $('#select-filter-item'); const $selectFilterItem = $('#select-filter-item');
const $reloadAppointments = $('#reload-appointments');
/** /**
* Add the component event listeners. * Add the component event listeners.
@ -40,17 +41,17 @@ App.Components.UnavailabilitiesModal = (function () {
$unavailabilitiesModal.find('.modal-message').addClass('d-none'); $unavailabilitiesModal.find('.modal-message').addClass('d-none');
$unavailabilitiesModal.find('.is-invalid').removeClass('is-invalid'); $unavailabilitiesModal.find('.is-invalid').removeClass('is-invalid');
const startMoment = moment($unavailabilityStart.datetimepicker('getDate')); const startMoment = moment($startDatetime.datetimepicker('getDate'));
if (!startMoment.isValid()) { if (!startMoment.isValid()) {
$unavailabilityStart.addClass('is-invalid'); $startDatetime.addClass('is-invalid');
return; return;
} }
const endMoment = moment($unavailabilityEnd.datetimepicker('getDate')); const endMoment = moment($endDatetime.datetimepicker('getDate'));
if (!endMoment.isValid()) { if (!endMoment.isValid()) {
$unavailabilityEnd.addClass('is-invalid'); $endDatetime.addClass('is-invalid');
return; return;
} }
@ -63,9 +64,9 @@ App.Components.UnavailabilitiesModal = (function () {
.addClass('alert-danger') .addClass('alert-danger')
.removeClass('d-none'); .removeClass('d-none');
$unavailabilityStart.addClass('is-invalid'); $startDatetime.addClass('is-invalid');
$unavailabilityEnd.addClass('is-invalid'); $endDatetime.addClass('is-invalid');
return; return;
} }
@ -78,9 +79,9 @@ App.Components.UnavailabilitiesModal = (function () {
id_users_provider: $('#unavailability-provider').val() id_users_provider: $('#unavailability-provider').val()
}; };
if ($unavailabilityId.val() !== '') { if ($id.val() !== '') {
// Set the id value, only if we are editing an appointment. // Set the id value, only if we are editing an appointment.
unavailability.id = $unavailabilityId.val(); unavailability.id = $id.val();
} }
const successCallback = () => { const successCallback = () => {
@ -92,7 +93,7 @@ App.Components.UnavailabilitiesModal = (function () {
$unavailabilitiesModal.modal('hide'); $unavailabilitiesModal.modal('hide');
$selectFilterItem.trigger('change'); $reloadAppointments.trigger('change');
}; };
App.Http.Calendar.saveUnavailability(unavailability, successCallback, null); App.Http.Calendar.saveUnavailability(unavailability, successCallback, null);
@ -125,13 +126,13 @@ App.Components.UnavailabilitiesModal = (function () {
} }
if ($('.calendar-view').length === 0) { if ($('.calendar-view').length === 0) {
$unavailabilityProvider.val($selectFilterItem.val()).closest('.form-group').hide(); $selectProvider.val($selectFilterItem.val()).closest('.form-group').hide();
} }
$unavailabilityStart.val( $startDatetime.val(
App.Utils.Date.format(startMoment.toDate(), vars('date_format'), vars('time_format'), true) App.Utils.Date.format(startMoment.toDate(), vars('date_format'), vars('time_format'), true)
); );
$unavailabilityEnd.val( $endDatetime.val(
App.Utils.Date.format( App.Utils.Date.format(
startMoment.add(1, 'hour').toDate(), startMoment.add(1, 'hour').toDate(),
vars('date_format'), vars('date_format'),
@ -151,7 +152,7 @@ App.Components.UnavailabilitiesModal = (function () {
* before it becomes visible to the user. * before it becomes visible to the user.
*/ */
function resetModal() { function resetModal() {
$unavailabilityId.val(''); $id.val('');
// Set default time values // Set default time values
const start = App.Utils.Date.format(moment().toDate(), vars('date_format'), vars('time_format'), true); const start = App.Utils.Date.format(moment().toDate(), vars('date_format'), vars('time_format'), true);
@ -181,7 +182,7 @@ App.Components.UnavailabilitiesModal = (function () {
const firstWeekdayId = App.Utils.Date.getWeekdayId(firstWeekday); const firstWeekdayId = App.Utils.Date.getWeekdayId(firstWeekday);
$unavailabilityStart.datetimepicker({ $startDatetime.datetimepicker({
dateFormat: dateFormat, dateFormat: dateFormat,
timeFormat: vars('time_format') === 'regular' ? 'h:mm tt' : 'HH:mm', timeFormat: vars('time_format') === 'regular' ? 'h:mm tt' : 'HH:mm',
@ -237,9 +238,9 @@ App.Components.UnavailabilitiesModal = (function () {
minuteText: lang('minutes'), minuteText: lang('minutes'),
firstDay: firstWeekdayId firstDay: firstWeekdayId
}); });
$unavailabilityStart.val(start); $startDatetime.val(start);
$unavailabilityEnd.datetimepicker({ $endDatetime.datetimepicker({
dateFormat: dateFormat, dateFormat: dateFormat,
timeFormat: vars('time_format') === 'regular' ? 'h:mm tt' : 'HH:mm', timeFormat: vars('time_format') === 'regular' ? 'h:mm tt' : 'HH:mm',
@ -295,10 +296,10 @@ App.Components.UnavailabilitiesModal = (function () {
minuteText: lang('minutes'), minuteText: lang('minutes'),
firstDay: firstWeekdayId firstDay: firstWeekdayId
}); });
$unavailabilityEnd.val(end); $endDatetime.val(end);
// Clear the unavailability notes field. // Clear the unavailability notes field.
$unavailabilityNotes.val(''); $notes.val('');
} }
/** /**
@ -308,7 +309,7 @@ App.Components.UnavailabilitiesModal = (function () {
for (const index in vars('available_providers')) { for (const index in vars('available_providers')) {
const provider = vars('available_providers')[index]; const provider = vars('available_providers')[index];
$unavailabilityProvider.append(new Option(provider.first_name + ' ' + provider.last_name, provider.id)); $selectProvider.append(new Option(provider.first_name + ' ' + provider.last_name, provider.id));
} }
addEventListeners(); addEventListeners();

File diff suppressed because it is too large Load diff