From b8341484d4d68d8e2420f06c1c79e2806e4121f9 Mon Sep 17 00:00:00 2001
From: Julie Lenaerts <julielenaerts@gmail.com>
Date: Wed, 23 Nov 2022 09:33:39 +0100
Subject: [PATCH] calendar with custom nav buttons - still bugs

---
 .../public/vuejs/MyCalendarRange/App2.vue     | 72 +++++++++----------
 .../store/modules/fullcalendar.ts             |  1 -
 2 files changed, 36 insertions(+), 37 deletions(-)

diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App2.vue b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App2.vue
index 14806734f..e447af26d 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App2.vue
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App2.vue
@@ -183,14 +183,22 @@ const baseOptions = ref<CalendarOptions>({
   },*/
   selectMirror: false,
   editable: true,
-/*  customButtons: {
+  customButtons: {
     prevWeek: {
       text: '<',
-      click: goPrevious
+      click: function() {
+        navigate('prev')
+      }
+    },
+    nextWeek: {
+      text: '>',
+      click:  function() {
+        navigate('next')
+      }
     }
-  },*/
+  },
   headerToolbar: {
-    left: 'prev,next today prevWeek',
+    left: 'prevWeek,nextWeek today',
     center: 'title',
     right: 'timeGridWeek,timeGridDay'
   },
@@ -269,43 +277,35 @@ function onDateSelect(event: DateSelectArg): void {
   store.dispatch('calendarRanges/createRange', {start: event.start, end: event.end, location: pickedLocation.value});
 }
 
-/*function goPrevious() {
+function navigate(direction: string) {
   const viewType = calendarRef.value.getApi().view.type;
-  const currentStartObj = store.state.fullCalendar.currentView.start;
-  const currentEndObj = store.state.fullCalendar.currentView.end;
-  let prevDates = {};
+  const currentStart = store.state.fullCalendar.currentView.start;
+  const currentEnd = store.state.fullCalendar.currentView.end;
+  let newDates = {};
 
-  if (currentStartObj != null && currentEndObj != null) {
-    if (viewType === "timeGridWeek") {
-      console.log(typeof(currentStartObj));
-      prevDates = {
-        start: new Date(new Date(currentStartObj).setDate(currentStartObj.getDate() - 7)),
-        end: new Date(currentEndObj.setDate(currentEndObj.getDate() - 7))
-      }
-    } else {
-      prevDates = {
-        start: new Date(currentStartObj).setDate(currentStartObj.getDate() - 1),
-        end: currentEndObj.setDate(currentEndObj.getDate() - 1)
-      }
+  if (currentStart != null && currentEnd != null) {
+    let daysBetween = (currentEnd?.getTime() - currentStart?.getTime())/(1000 * 60 * 60 * 24);
+    if (daysBetween === 5) {
+      daysBetween = 7;
     }
-    store.dispatch('calendarRanges/createRange', prevDates);
-  }
-  calendarRef.value.getApi().setOption('visibleRange', {start: '2022-11-14', end: '2022-11-19'});
-}*/
-
-/*function goNext() {
-  const viewType = calendarRef.value.getApi().view.type;
-  const currentStartObj = store.state.fullCalendar.currentView.start;
-  const currentEndObj = store.state.fullCalendar.currentView.end;
-
-  if (currentStartObj != null && currentEndObj != null) {
-    const prevDates = {
-      start: new Date(currentStartObj).setDate(currentStartObj.getDate() + 7),
-      end: currentEndObj.setDate(currentEndObj.getDate() + 7)
+    if (direction === 'prev') {
+      newDates = {
+        start: new Date(new Date(currentStart).setDate(currentStart.getDate() - daysBetween)),
+        end: new Date(new Date(currentEnd).setDate(currentEnd.getDate() - daysBetween))
+      }
+    } else if (direction === 'next') {
+      console.log(daysBetween);
+      newDates = {
+        start: new Date(new Date(currentStart).setDate(currentStart.getDate() + daysBetween)),
+        end: new Date(new Date(currentEnd).setDate(currentEnd.getDate() + daysBetween))
+      }
+      console.log(newDates);
     }
-    store.dispatch('calendarRanges/createRange', prevDates);
   }
-}*/
+
+  store.dispatch('fullCalendar/setCurrentDatesView', newDates);
+  calendarRef.value.getApi().changeView('timeGrid', newDates);
+}
 
 /**
  * When a calendar range is deleted
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/modules/fullcalendar.ts b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/modules/fullcalendar.ts
index de379753f..98fd2acbb 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/modules/fullcalendar.ts
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/modules/fullcalendar.ts
@@ -31,7 +31,6 @@ export default {
   },
   actions: {
     setCurrentDatesView(ctx: Context, {start, end}: {start: Date|null, end: Date|null}): Promise<null> {
-      console.log('dispatch setCurrentDatesView', {start, end});
 
       if (ctx.state.currentView.start !== start || ctx.state.currentView.end !== end) {
         ctx.commit('setCurrentDatesView', {start, end});