calendar with custom nav buttons - still bugs

src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App2.vue

@@ -70,7 +70,7 @@
     </div>
   </div>
   <FullCalendar :options="calendarOptions" ref="calendarRef">
-    <template v-slot:eventContent="arg: EventApi">
+    <template v-slot:eventContent="arg">
       <span :class="eventClasses(arg.event)">
           <b v-if="arg.event.extendedProps.is === 'remote'">{{ arg.event.title}}</b>
           <b v-else-if="arg.event.extendedProps.is === 'range'">{{ arg.timeText }} - {{ arg.event.extendedProps.locationName }}</b>
@@ -138,6 +138,7 @@ const store = useStore(key);
 
 const {t} = useI18n();
 
+const calendarRef = ref();
 const showWeekends = ref(false);
 const slotDuration = ref('00:05:00');
 const slotMinTime = ref('09:00:00');
@@ -163,10 +164,41 @@ const baseOptions = ref<CalendarOptions>({
   eventDrop: onEventDropOrResize,
   // when an event si clicked
   eventClick: onEventClick,
+/*  eventContent: function(arg) {
+    let spanEvent = document.createElement('span')
+    let rangeEvent = document.createElement('b')
+    // spanEvent.classList.add(eventClasses(arg.event))
+
+    if (arg.event.extendedProps.is === 'remote') {
+      spanEvent.innerHTML = `<b>${arg.event.title}</b>`
+    } else if(arg.event.extendedProps.is === 'range') {
+      spanEvent.innerHTML = `<b>${arg.timeText} - ${arg.event.extendedProps.locationName}</b>
+                             <a class="fa fa-fw fa-times delete"></a>`
+    } else if(arg.event.extendedProps.is === 'local') {
+      spanEvent.innerHTML = `<b>${arg.event.title}</b>`
+    }
+
+    let arrayOfDomNodes = [ spanEvent ]
+    return { domNodes: arrayOfDomNodes }
+  },*/
   selectMirror: false,
   editable: true,
+  customButtons: {
+    prevWeek: {
+      text: '<',
+      click: function() {
+        navigate('prev')
+      }
+    },
+    nextWeek: {
+      text: '>',
+      click:  function() {
+        navigate('next')
+      }
+    }
+  },
   headerToolbar: {
-    left: 'prev,next today',
+    left: 'prevWeek,nextWeek today',
     center: 'title',
     right: 'timeGridWeek,timeGridDay'
   },
@@ -245,16 +277,43 @@ function onDateSelect(event: DateSelectArg): void {
   store.dispatch('calendarRanges/createRange', {start: event.start, end: event.end, location: pickedLocation.value});
 }
 
+function navigate(direction: string) {
+  const viewType = calendarRef.value.getApi().view.type;
+  const currentStart = store.state.fullCalendar.currentView.start;
+  const currentEnd = store.state.fullCalendar.currentView.end;
+  let newDates = {};
+
+  if (currentStart != null && currentEnd != null) {
+    let daysBetween = (currentEnd?.getTime() - currentStart?.getTime())/(1000 * 60 * 60 * 24);
+    if (daysBetween === 5) {
+      daysBetween = 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('fullCalendar/setCurrentDatesView', newDates);
+  calendarRef.value.getApi().changeView('timeGrid', newDates);
+}
+
 /**
  * When a calendar range is deleted
  */
 function onClickDelete(event: EventApi): void {
-  console.log('onClickDelete', event);
-
   if (event.extendedProps.is !== 'range') {
     return;
   }
-
   store.dispatch('calendarRanges/deleteRange', event.extendedProps.calendarRangeId);
 }
 

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});