mirror of
https://github.com/hanzoai/calendar.git
synced 2026-10-30 14:46:43 +00:00
c289fac008
* refactor: make timezone a required prop in Calendar component - Remove useBookerTime hook from Calendar.tsx - Add timezone as required prop in CalendarState type - Update all parent components to pass timezone prop: - packages/features/bookings/Booker/components/LargeCalendar.tsx - packages/features/calendar-view/LargeCalendar.tsx - packages/features/troubleshooter/components/LargeCalendar.tsx - All parent components now use useTimePreferences hook to get timezone Co-Authored-By: [email protected] <[email protected]> * use right implementation * remove a line * use user's timezone instead of booker timezone * get timezone from calendar store --------- Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
84 lines
3.0 KiB
TypeScript
84 lines
3.0 KiB
TypeScript
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 { useBookerTime } from "@calcom/features/bookings/Booker/components/hooks/useBookerTime";
|
|
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 type { useScheduleForEventReturnType } from "../utils/event";
|
|
import { getQueryParam } from "../utils/query-param";
|
|
import { useOverlayCalendarStore } from "./OverlayCalendar/store";
|
|
|
|
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 setSelectedTimeslot = useBookerStoreContext((state) => state.setSelectedTimeslot);
|
|
const selectedEventDuration = useBookerStoreContext((state) => state.selectedDuration);
|
|
const overlayEvents = useOverlayCalendarStore((state) => state.overlayBusyDates);
|
|
const displayOverlay =
|
|
getQueryParam("overlayCalendar") === "true" || localStorage?.getItem("overlayCalendarSwitchDefault");
|
|
const { timezone } = useBookerTime();
|
|
|
|
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)
|
|
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}
|
|
onEmptyCellClick={(date) => setSelectedTimeslot(date.toISOString())}
|
|
gridCellsPerHour={60 / eventDuration}
|
|
hoverEventDuration={eventDuration}
|
|
hideHeader
|
|
timezone={timezone}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|