Ensure header navigation works

packages/features/troubleshooter/components/LargeCalendar.tsx

@@ -16,13 +16,17 @@ export const LargeCalendar = ({ extraDays }: { extraDays: number }) => {
   const selectedDate = useTroubleshooterStore((state) => state.selectedDate);
   const event = useTroubleshooterStore((state) => state.event);
   const { data: session } = useSession();
-  const date = selectedDate ? dayjs(selectedDate) : dayjs();
+  const startDate = selectedDate ? dayjs(selectedDate) : dayjs();
 
   const { data: busyEvents, isLoading } = trpc.viewer.availability.user.useQuery(
     {
       username: session?.user?.username || "",
-      dateFrom: date.startOf("day").utc().format(),
-      dateTo: date.endOf("day").utc().format(),
+      dateFrom: startDate.startOf("day").utc().format(),
+      dateTo: startDate
+        .endOf("day")
+        .add(extraDays - 1, "day")
+        .utc()
+        .format(),
       withSource: true,
     },
     {
@@ -35,10 +39,9 @@ export const LargeCalendar = ({ extraDays }: { extraDays: number }) => {
     eventSlug: event?.slug,
     eventId: event?.id,
     timezone,
-    month: date.format("YYYY-MM"),
+    month: startDate.format("YYYY-MM"),
   });
 
-  const startDate = selectedDate ? dayjs(selectedDate).toDate() : dayjs().toDate();
   const endDate = dayjs(startDate)
     .add(extraDays - 1, "day")
     .toDate();
@@ -102,7 +105,7 @@ export const LargeCalendar = ({ extraDays }: { extraDays: number }) => {
         endHour={23}
         events={events}
         availableTimeslots={availableSlots}
-        startDate={startDate}
+        startDate={startDate.toDate()}
         endDate={endDate}
         gridCellsPerHour={60 / 15}
         hoverEventDuration={30}

packages/features/troubleshooter/store.ts

@@ -58,7 +58,8 @@ export const useTroubleshooterStore = create<TroubleshooterStore>((set, get) =>
     }
   },
   addToSelectedDate: (days: number) => {
-    const currentSelection = dayjs(get().selectedDate);
+    const selectedDate = get().selectedDate;
+    const currentSelection = selectedDate ? dayjs(get().selectedDate) : dayjs();
     const newSelection = currentSelection.add(days, "day");
     const newSelectionFormatted = newSelection.format("YYYY-MM-DD");
 
@@ -82,7 +83,10 @@ export const useTroubleshooterStore = create<TroubleshooterStore>((set, get) =>
     get().setSelectedDate(null);
   },
   initialize: ({ month }: StoreInitializeType) => {
-    if (month) set({ month });
+    if (month) {
+      set({ month });
+      updateQueryParam("month", month);
+    }
     //removeQueryParam("layout");
   },
 }));