Use hashes for navigating calendar modes

frontend/src/components/CalendarQalendar.vue

@@ -14,9 +14,12 @@ import {
   qalendarSlotDurations,
 } from '@/definitions';
 import { getLocale, getPreferredTheme, timeFormat } from '@/utils';
+import { useRoute, useRouter } from 'vue-router';
 
 // component constants
 const dj = inject('dayjs');
+const router = useRouter();
+const route = useRoute();
 
 // component properties
 const props = defineProps({
@@ -37,10 +40,12 @@ const {
 
 const qalendarRef = ref();
 
+const isValidMode = (mode) => ['#day', '#week', '#month'].indexOf(mode) !== -1;
+
 const displayFormat = timeFormat();
 const calendarColors = ref({});
 const selectedDate = ref(null);
-const calendarMode = ref('month');
+const calendarMode = ref(isValidMode(route.hash) ? route.hash.slice(1) : 'month');
 const preferredTheme = getPreferredTheme();
 
 // component emits
@@ -109,7 +114,9 @@ const dateChange = (evt) => {
  * On mode change. e.g. month, week, day.
  */
 const modeChange = (evt) => {
-  calendarMode.value = evt?.mode ?? 'month';
+  const hash = evt?.mode ?? 'month';
+  calendarMode.value = hash;
+  router.push({ hash: `#${hash}` });
 };
 
 /* Functions */
@@ -339,6 +346,18 @@ watch(dayBoundary, () => {
   qalendarRef.value.time.DAY_START = dayBoundary.value.start * 100;
   qalendarRef.value.time.DAY_END = dayBoundary.value.end * 100;
 });
+
+watch(route, () => {
+  if (!qalendarRef?.value) {
+    return;
+  }
+
+  // Route.hash never returns null, so need to do falsey default here.
+  const hash = route.hash || '#month';
+  if (isValidMode(hash)) {
+    qalendarRef.value.mode = hash.replace('#', '');
+  }
+});
 </script>
 <template>
   <div
@@ -432,7 +451,7 @@ watch(dayBoundary, () => {
   --qalendar-theme-color: var(--qalendar-blue) !important;
   --qalendar-light-gray: theme('colors.gray.600') !important;
   --qalendar-dark-mode-line-color: var(--qalendar-appointment-border-color);
-  --qalendar-option-hover: theme('colors.gray.500')66 !important; /* note: the appended hex 66 makes 40% opacity */
+  --qalendar-option-hover: theme('colors.gray.500') 66 !important; /* note: the appended hex 66 makes 40% opacity */
 }
 
 /* Ensure smol mode is clickable, and noticeable! */

frontend/src/router.js

@@ -58,7 +58,7 @@ const routes = [
     redirect: { name: 'calendar' },
   },
   {
-    path: '/calendar/:view?/:date?',
+    path: '/calendar/:date?',
     name: 'calendar',
     component: CalendarView,
   },
@@ -111,17 +111,4 @@ const router = createRouter({
   routes,
 });
 
-// set default route parameters
-router.beforeEach((to) => {
-  if (to.name === 'calendar' && !to.params.view) {
-    to.params.view = 'month';
-    return to;
-  }
-  if (to.name === 'appointments' && !to.params.view) {
-    to.params.view = 'all';
-    return to;
-  }
-  return null;
-});
-
 export default router;

frontend/src/views/BookingView.vue

@@ -136,7 +136,7 @@ const getViewBySlotDistribution = (slots) => {
  * @returns {Promise<Object|null>}
  */
 const getAppointment = async () => {
-  const request = call('schedule/public/availability').post({ url: window.location.href });
+  const request = call('schedule/public/availability').post({ url: window.location.href.split('#')[0] });
 
   const { data, error } = await request.json();
 

frontend/src/views/CalendarView.vue

@@ -104,7 +104,7 @@ const activeDateRange = computed(() => ({
 }));
 
 // active menu item for tab navigation of calendar views
-const tabActive = ref(calendarViews[route.params.view]);
+const tabActive = calendarViews.month;
 
 // get remote calendar data for current year
 const calendarEvents = ref([]);
@@ -147,7 +147,7 @@ const selectDate = async (d) => {
   const date = dj(d);
   await router.replace({
     name: route.name,
-    params: { view: route.params.view, date: date.format('YYYY-MM-DD') },
+    params: { date: date.format('YYYY-MM-DD') },
   });
   // Check if we need to pull remote events
   await onDateChange({ start: date.startOf('month'), end: date.endOf('month') });