Update the default view so that it works with FullCalendar 5

application/controllers/Calendar.php

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

application/views/pages/calendar.php

@@ -2,7 +2,7 @@
 
 <?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') ?>
 
@@ -119,10 +119,10 @@
 
 <?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-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/message.js') ?>"></script>
 <script src="<?= asset_url('assets/js/utils/validation.js') ?>"></script>

assets/js/components/appointments_modal.js

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

assets/js/components/unavailabilities_modal.js

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