feat: calendar view atom v1 (calcom#23840)

* fix: refactor

* add `isMonthViewProp` to header

* feat: init v1 for calendar view atom

* test breaking toggle buttons

* fix: make sure week start is always sunday for calendar view atom

* fixup

* fix: remove extra comments

* fix: add calendar view page in examples app

* chore: add changesets

* fix: coderabbit feedback

* fixup

Author: Ryukemeister

.changeset/fuzzy-beers-know.md

@@ -0,0 +1,5 @@
+---
+"@calcom/atoms": minor
+---
+
+This PR adds a new atom called `CalendarView` which is a read only calendar view component for a user.

packages/features/bookings/Booker/components/Header.tsx

@@ -5,6 +5,7 @@ import { useIsPlatform } from "@calcom/atoms/hooks/useIsPlatform";
 import dayjs from "@calcom/dayjs";
 import { useIsEmbed } from "@calcom/embed-core/embed-iframe";
 import { useBookerStoreContext } from "@calcom/features/bookings/Booker/BookerStoreProvider";
+import { useInitializeWeekStart } from "@calcom/features/bookings/Booker/components/hooks/useInitializeWeekStart";
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { BookerLayouts } from "@calcom/prisma/zod-utils";
@@ -25,6 +26,7 @@ export function Header({
   eventSlug,
   isMyLink,
   renderOverlay,
+  isCalendarView,
 }: {
   extraDays: number;
   isMobile: boolean;
@@ -33,21 +35,25 @@ export function Header({
   eventSlug: string;
   isMyLink: boolean;
   renderOverlay?: () => JSX.Element | null;
+  isCalendarView?: boolean;
 }) {
   const { t, i18n } = useLocale();
   const isEmbed = useIsEmbed();
+  const isPlatform = useIsPlatform();
   const [layout, setLayout] = useBookerStoreContext((state) => [state.layout, state.setLayout], shallow);
   const selectedDateString = useBookerStoreContext((state) => state.selectedDate);
   const setSelectedDate = useBookerStoreContext((state) => state.setSelectedDate);
   const addToSelectedDate = useBookerStoreContext((state) => state.addToSelectedDate);
-  const isMonthView = layout === BookerLayouts.MONTH_VIEW;
+  const isMonthView = isCalendarView !== undefined ? !isCalendarView : layout === BookerLayouts.MONTH_VIEW;
   const today = dayjs();
   const selectedDate = selectedDateString ? dayjs(selectedDateString) : today;
   const selectedDateMin3DaysDifference = useMemo(() => {
     const diff = today.diff(selectedDate, "days");
     return diff > 3 || diff < -3;
   }, [today, selectedDate]);
 
+  useInitializeWeekStart(isPlatform, isCalendarView ?? false);
+
   const onLayoutToggle = useCallback(
     (newLayout: string) => {
       if (layout === newLayout || !newLayout) return;
@@ -130,7 +136,10 @@ export function Header({
             <Button
               className="capitalize ltr:ml-2 rtl:mr-2"
               color="secondary"
-              onClick={() => setSelectedDate({ date: today.format("YYYY-MM-DD") })}>
+              onClick={() => {
+                const selectedDate = (isCalendarView ? today.startOf("week") : today).format("YYYY-MM-DD");
+                setSelectedDate({ date: selectedDate });
+              }}>
               {t("today")}
             </Button>
           )}

packages/features/bookings/Booker/components/LargeCalendar.tsx

@@ -2,10 +2,10 @@ import { useMemo, useEffect } from "react";
 
 import dayjs from "@calcom/dayjs";
 import { useBookerStoreContext } from "@calcom/features/bookings/Booker/BookerStoreProvider";
+import { useAvailableTimeSlots } from "@calcom/features/bookings/Booker/components/hooks/useAvailableTimeSlots";
 import type { BookerEvent } from "@calcom/features/bookings/types";
 import { Calendar } from "@calcom/features/calendars/weeklyview";
 import type { CalendarEvent } from "@calcom/features/calendars/weeklyview/types/events";
-import type { CalendarAvailableTimeslots } from "@calcom/features/calendars/weeklyview/types/state";
 import { localStorage } from "@calcom/lib/webstorage";
 
 import type { useScheduleForEventReturnType } from "../utils/event";
@@ -34,24 +34,7 @@ export const LargeCalendar = ({
 
   const eventDuration = selectedEventDuration || event?.data?.length || 30;
 
-  const availableSlots = useMemo(() => {
-    const availableTimeslots: CalendarAvailableTimeslots = {};
-    if (!schedule) return availableTimeslots;
-    if (!schedule.slots) return availableTimeslots;
-
-    for (const day in schedule.slots) {
-      availableTimeslots[day] = schedule.slots[day].map((slot) => {
-        const { time, ...rest } = slot;
-        return {
-          start: dayjs(time).toDate(),
-          end: dayjs(time).add(eventDuration, "minutes").toDate(),
-          ...rest,
-        };
-      });
-    }
-
-    return availableTimeslots;
-  }, [schedule, eventDuration]);
+  const availableSlots = useAvailableTimeSlots({ schedule, eventDuration });
 
   const startDate = selectedDate ? dayjs(selectedDate).toDate() : dayjs().toDate();
   const endDate = dayjs(startDate)

packages/features/bookings/Booker/components/hooks/useAvailableTimeSlots.ts

@@ -0,0 +1,30 @@
+import { useMemo } from "react";
+
+import dayjs from "@calcom/dayjs";
+import type { CalendarAvailableTimeslots } from "@calcom/features/calendars/weeklyview/types/state";
+import type { IGetAvailableSlots } from "@calcom/trpc/server/routers/viewer/slots/util";
+
+interface UseAvailableTimeSlotsProps {
+  eventDuration: number;
+  schedule?: IGetAvailableSlots;
+}
+
+export const useAvailableTimeSlots = ({ schedule, eventDuration }: UseAvailableTimeSlotsProps) => {
+  return useMemo(() => {
+    const availableTimeslots: CalendarAvailableTimeslots = {};
+    if (!schedule || !schedule.slots) return availableTimeslots;
+
+    for (const day in schedule.slots) {
+      availableTimeslots[day] = schedule.slots[day].map((slot) => {
+        const { time, ...rest } = slot;
+        return {
+          start: dayjs(time).toDate(),
+          end: dayjs(time).add(eventDuration, "minutes").toDate(),
+          ...rest,
+        };
+      });
+    }
+
+    return availableTimeslots;
+  }, [schedule, eventDuration]);
+};

packages/features/bookings/Booker/components/hooks/useInitializeWeekStart.ts

@@ -0,0 +1,17 @@
+import { useEffect } from "react";
+
+import dayjs from "@calcom/dayjs";
+import { useBookerStoreContext } from "@calcom/features/bookings/Booker/BookerStoreProvider";
+
+export const useInitializeWeekStart = (isPlatform: boolean, isCalendarView: boolean) => {
+  const today = dayjs();
+  const weekStart = today.startOf("week").format("YYYY-MM-DD");
+  const setSelectedDate = useBookerStoreContext((state) => state.setSelectedDate);
+
+  useEffect(() => {
+    if (isPlatform && isCalendarView) {
+      setSelectedDate({ date: weekStart, omitUpdatingParams: true });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+};

packages/features/calendar-view/LargeCalendar.tsx

@@ -0,0 +1,79 @@
+import { useMemo, useEffect } from "react";
+
+import dayjs from "@calcom/dayjs";
+import { useBookerStoreContext } from "@calcom/features/bookings/Booker/BookerStoreProvider";
+import { useAvailableTimeSlots } from "@calcom/features/bookings/Booker/components/hooks/useAvailableTimeSlots";
+import type { BookerEvent } from "@calcom/features/bookings/types";
+import { Calendar } from "@calcom/features/calendars/weeklyview";
+import type { CalendarEvent } from "@calcom/features/calendars/weeklyview/types/events";
+import { localStorage } from "@calcom/lib/webstorage";
+
+import { useOverlayCalendarStore } from "../bookings/Booker/components/OverlayCalendar/store";
+import type { useScheduleForEventReturnType } from "../bookings/Booker/utils/event";
+import { getQueryParam } from "../bookings/Booker/utils/query-param";
+
+export const LargeCalendar = ({
+  extraDays,
+  schedule,
+  isLoading,
+  event,
+}: {
+  extraDays: number;
+  schedule?: useScheduleForEventReturnType["data"];
+  isLoading: boolean;
+  event: {
+    data?: Pick<BookerEvent, "length"> | null;
+  };
+}) => {
+  const selectedDate = useBookerStoreContext((state) => state.selectedDate);
+  const selectedEventDuration = useBookerStoreContext((state) => state.selectedDuration);
+  const overlayEvents = useOverlayCalendarStore((state) => state.overlayBusyDates);
+  const displayOverlay =
+    getQueryParam("overlayCalendar") === "true" || localStorage?.getItem("overlayCalendarSwitchDefault");
+
+  const eventDuration = selectedEventDuration || event?.data?.length || 30;
+
+  const availableSlots = useAvailableTimeSlots({ schedule, eventDuration });
+
+  const startDate = selectedDate ? dayjs(selectedDate).toDate() : dayjs().toDate();
+  const endDate = dayjs(startDate)
+    .add(extraDays - 1, "day")
+    .toDate();
+
+  // HACK: force rerender when overlay events change
+  // Sine we dont use react router here we need to force rerender (ATOM SUPPORT)
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  useEffect(() => {}, [displayOverlay]);
+
+  const overlayEventsForDate = useMemo(() => {
+    if (!overlayEvents || !displayOverlay) return [];
+    return overlayEvents.map((event, id) => {
+      return {
+        id,
+        start: dayjs(event.start).toDate(),
+        end: dayjs(event.end).toDate(),
+        title: "Busy",
+        options: {
+          status: "ACCEPTED",
+        },
+      } as CalendarEvent;
+    });
+  }, [overlayEvents, displayOverlay]);
+
+  return (
+    <div className="h-full [--calendar-dates-sticky-offset:66px]">
+      <Calendar
+        isPending={isLoading}
+        availableTimeslots={availableSlots}
+        startHour={0}
+        endHour={23}
+        events={overlayEventsForDate}
+        startDate={startDate}
+        endDate={endDate}
+        gridCellsPerHour={60 / eventDuration}
+        hoverEventDuration={eventDuration}
+        hideHeader
+      />
+    </div>
+  );
+};

packages/features/troubleshooter/components/LargeCalendar.tsx

@@ -2,8 +2,8 @@ import { useSession } from "next-auth/react";
 import { useMemo } from "react";
 
 import dayjs from "@calcom/dayjs";
+import { useAvailableTimeSlots } from "@calcom/features/bookings/Booker/components/hooks/useAvailableTimeSlots";
 import { Calendar } from "@calcom/features/calendars/weeklyview";
-import type { CalendarAvailableTimeslots } from "@calcom/features/calendars/weeklyview/types/state";
 import { BookingStatus } from "@calcom/prisma/enums";
 import { trpc } from "@calcom/trpc";
 
@@ -48,22 +48,7 @@ export const LargeCalendar = ({ extraDays }: { extraDays: number }) => {
     .add(extraDays - 1, "day")
     .toDate();
 
-  const availableSlots = useMemo(() => {
-    const availableTimeslots: CalendarAvailableTimeslots = {};
-    if (!schedule) return availableTimeslots;
-    if (!schedule?.slots) return availableTimeslots;
-
-    for (const day in schedule.slots) {
-      availableTimeslots[day] = schedule.slots[day].map((slot) => ({
-        start: dayjs(slot.time).toDate(),
-        end: dayjs(slot.time)
-          .add(event?.duration ?? 30, "minutes")
-          .toDate(),
-      }));
-    }
-
-    return availableTimeslots;
-  }, [schedule, event]);
+  const availableSlots = useAvailableTimeSlots({ schedule, eventDuration: event?.duration ?? 30 });
 
   const events = useMemo(() => {
     if (!busyEvents?.busy) return [];

packages/platform/atoms/booker/BookerPlatformWrapper.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import { useQueryClient } from "@tanstack/react-query";
 // eslint-disable-next-line no-restricted-imports
 import debounce from "lodash/debounce";
@@ -594,7 +595,7 @@ export const BookerPlatformWrapper = (
   );
 };
 
-function formatUsername(username: string | string[]): string {
+export function formatUsername(username: string | string[]): string {
   if (typeof username === "string") {
     return username;
   }

packages/platform/atoms/calendar-view/index.ts

@@ -0,0 +1 @@
+export { CalendarViewPlatformWrapper } from "./wrappers/CalendarViewPlatformWrapper";