Fix schedule event previews (#441)

* 🔨 Properly calculate all visible preview time slots

* 🔨 Don't clear calendar events on saving schedule

frontend/src/components/ScheduleCreation.vue

@@ -479,13 +479,15 @@ const scheduledRangeMinutes = computed(() => {
   return end.diff(start, 'minutes');
 });
 
-// generate time slots from current schedule configuration
-const getSlots = () => {
+// generate time slots from current schedule configuration for the displayed month
+const getSlotPreviews = () => {
   const slots = [];
+  // Add 1 week to the end of month here to display slots in displayed next month days too
   const end = scheduleInput.value.end_date
-    ? dj.min(dj(scheduleInput.value.end_date), dj(props.activeDate).endOf('month'))
-    : dj(props.activeDate).endOf('month');
-  let pointerDate = dj.max(dj(scheduleInput.value.start_date), dj(props.activeDate).startOf('month'));
+    ? dj.min(dj(scheduleInput.value.end_date), dj(props.activeDate).endOf('month').add(1, 'week'))
+    : dj(props.activeDate).endOf('month').add(1, 'week');
+  // Substract one week from the start to display slots in displayed previous month days too
+  let pointerDate = dj.max(dj(scheduleInput.value.start_date), dj(props.activeDate).startOf('month').subtract(1, 'week'));
   while (pointerDate <= end) {
     if (scheduleInput.value.weekdays?.includes(pointerDate.isoWeekday())) {
       slots.push({
@@ -508,7 +510,7 @@ const getScheduleAppointment = () => ({
   location_url: scheduleInput.value.location_url,
   details: scheduleInput.value.details,
   status: 2,
-  slots: getSlots(),
+  slots: getSlotPreviews(),
   type: 'schedule',
 });
 

frontend/src/views/ScheduleView.vue

@@ -87,7 +87,6 @@ const schedules = ref([]);
 const firstSchedule = computed(() => (schedules.value?.length > 0 ? schedules.value[0] : null));
 const schedulesReady = ref(false);
 const getFirstSchedule = async () => {
-  calendarEvents.value = [];
   // trailing slash to prevent fast api redirect which doesn't work great on our container setup
   const { data } = await call('schedule/').get().json();
   schedules.value = data.value;
@@ -107,6 +106,8 @@ const onDateChange = (dateObj) => {
   const start = dj(dateObj.start);
   const end = dj(dateObj.end);
 
+  activeDate.value = start.add(end.diff(start, 'minutes')/2, 'minutes');
+
   // remote data is retrieved per month, so a data request happens as soon as the user navigates to a different month
   if (
     dj(activeDateRange.value.end).format('YYYYMM') !== dj(end).format('YYYYMM')