From 3bf718050dbe77f52f3bc243829cd546e0136a1e Mon Sep 17 00:00:00 2001 From: Alex Tselegidis Date: Thu, 25 Mar 2021 11:12:10 +0100 Subject: [PATCH] Improved the backend calendar rendering performance by reducing the number of calendar render cycles on each reload --- assets/js/backend_calendar_default_view.js | 32 ++++++++++------------ assets/js/backend_calendar_table_view.js | 23 ++++++++++++---- 2 files changed, 32 insertions(+), 23 deletions(-) diff --git a/assets/js/backend_calendar_default_view.js b/assets/js/backend_calendar_default_view.js index 63817f5e..03ca8e8a 100755 --- a/assets/js/backend_calendar_default_view.js +++ b/assets/js/backend_calendar_default_view.js @@ -1036,6 +1036,8 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {}; $('#loading').css('visibility', 'hidden'); + var calendarEventSource = []; + return $.post(url, data) .done(function (response) { var $calendar = $('#calendar'); @@ -1056,14 +1058,11 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {}; data: appointment // Store appointment data for later use. }; - appointmentEvents.push(appointmentEvent); + calendarEventSource.push(appointmentEvent); }); - $calendar.fullCalendar('addEventSource', appointmentEvents); - // Add custom unavailable periods (they are always displayed on the calendar, even if the provider won't // work on that day). - var unavailabilityEvents = []; response.unavailables.forEach(function (unavailable) { var notes = unavailable.notes ? ' - ' + unavailable.notes : ''; @@ -1082,11 +1081,9 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {}; data: unavailable }; - unavailabilityEvents.push(unavailabilityEvent); + calendarEventSource.push(unavailabilityEvent); }); - $calendar.fullCalendar('addEventSource', unavailabilityEvents); - var calendarView = $('#calendar').fullCalendar('getView'); if (filterType === FILTER_TYPE_PROVIDER && calendarView.name !== 'month') { @@ -1148,7 +1145,7 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {}; } }; - $calendar.fullCalendar('renderEvent', workingPlanExceptionEvent, false); + calendarEventSource.push(workingPlanExceptionEvent); } // Non-working day. @@ -1164,7 +1161,7 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {}; className: 'fc-unavailable' }; - $calendar.fullCalendar('renderEvent', unavailabilityEvent, false); + calendarEventSource.push(unavailabilityEvent); return; // Go to next loop. } @@ -1187,7 +1184,7 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {}; className: 'fc-unavailable' }; - $calendar.fullCalendar('renderEvent', unavailablePeriodBeforeWorkStarts, false); + calendarEventSource.push(unavailablePeriodBeforeWorkStarts); } // Add unavailable period after work ends. @@ -1208,7 +1205,7 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {}; className: 'fc-unavailable' }; - $calendar.fullCalendar('renderEvent', unavailablePeriodAfterWorkEnds, false); + calendarEventSource.push(unavailablePeriodAfterWorkEnds); } // Add unavailable periods for breaks. @@ -1233,7 +1230,7 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {}; className: 'fc-unavailable fc-break' }; - $calendar.fullCalendar('renderEvent', unavailablePeriod, false); + calendarEventSource.push(unavailablePeriod); }); break; @@ -1268,7 +1265,7 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {}; } }; - $calendar.fullCalendar('renderEvent', workingPlanExceptionEvent, false); + calendarEventSource.push(workingPlanExceptionEvent); } // Non-working day. @@ -1284,7 +1281,7 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {}; className: 'fc-unavailable' }; - $calendar.fullCalendar('renderEvent', unavailabilityEvent, true); + calendarEventSource.push(unavailabilityEvent); calendarDate.add(1, 'day'); @@ -1308,7 +1305,7 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {}; className: 'fc-unavailable' }; - $calendar.fullCalendar('renderEvent', unavailabilityEvent, true); + calendarEventSource.push(unavailabilityEvent); } // Add unavailable period after work ends. @@ -1328,7 +1325,7 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {}; className: 'fc-unavailable' }; - $calendar.fullCalendar('renderEvent', unavailabilityEvent, false); + calendarEventSource.push(unavailabilityEvent); } // Add unavailable periods during day breaks. @@ -1353,7 +1350,7 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {}; className: 'fc-unavailable fc-break' }; - $calendar.fullCalendar('renderEvent', unavailabilityEvent, false); + calendarEventSource.push(unavailabilityEvent); }); calendarDate.add(1, 'day'); @@ -1365,6 +1362,7 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {}; }) .always(function () { $('#loading').css('visibility', '') + $calendar.fullCalendar('addEventSource', calendarEventSource); }); } diff --git a/assets/js/backend_calendar_table_view.js b/assets/js/backend_calendar_table_view.js index 0de49d54..308004f8 100755 --- a/assets/js/backend_calendar_table_view.js +++ b/assets/js/backend_calendar_table_view.js @@ -817,6 +817,7 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {}; var end = view.end.clone(); var selDayName = start.toDate().toString('dddd').toLowerCase(); var selDayDate = start.format('YYYY-MM-DD'); + var calendarEventSource = []; if (workingPlanExceptions[selDayDate]) { workingPlan[selDayName] = workingPlanExceptions[selDayDate]; @@ -839,7 +840,7 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {}; } }; - $calendar.fullCalendar('renderEvent', workingPlanExceptionEvent, false); + calendarEventSource.push(workingPlanExceptionEvent); } if (workingPlan[selDayName] === null) { @@ -853,7 +854,9 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {}; className: 'fc-unavailable' }; - $calendar.fullCalendar('renderEvent', nonWorkingDay, true); + calendarEventSource.push(nonWorkingDay); + + $calendar.fullCalendar('addEventSource', calendarEventSource); return; } @@ -870,7 +873,8 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {}; editable: false, className: 'fc-unavailable' }; - $calendar.fullCalendar('renderEvent', unavailablePeriod, false); + + calendarEventSource.push(unavailablePeriod); } // Add unavailable period after work ends. @@ -886,7 +890,8 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {}; editable: false, className: 'fc-unavailable' }; - $calendar.fullCalendar('renderEvent', unavailablePeriod, false); + + calendarEventSource.push(unavailablePeriod); } // Add unavailable periods for breaks. @@ -907,8 +912,10 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {}; className: 'fc-unavailable fc-break' }; - $calendar.fullCalendar('renderEvent', unavailablePeriod, false); + calendarEventSource.push(unavailablePeriod); }); + + $calendar.fullCalendar('addEventSource', calendarEventSource); } /** @@ -967,6 +974,8 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {}; return; } + var calendarEventSource = []; + for (var index in unavailabilityEvents) { var unavailability = unavailabilityEvents[index]; @@ -985,8 +994,10 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {}; data: unavailability }; - $providerColumn.find('.calendar-wrapper').fullCalendar('renderEvent', event, false); + calendarEventSource.push(event); } + + $providerColumn.find('.calendar-wrapper').fullCalendar('addEventSource', calendarEventSource); } /**