import { ChevronLeft, ChevronRight } from "lucide-react"; import { useCallback, useMemo } from "react"; import { shallow } from "zustand/shallow"; import dayjs from "@calcom/dayjs"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { BookerLayouts } from "@calcom/prisma/zod-utils"; import { Button, ButtonGroup, ToggleGroup } from "@calcom/ui"; import { Calendar, Columns, Grid } from "@calcom/ui/components/icon"; import { TimeFormatToggle } from "../../components/TimeFormatToggle"; import { useBookerStore } from "../store"; import type { BookerLayout } from "../types"; export function Header({ extraDays, isMobile, enabledLayouts, }: { extraDays: number; isMobile: boolean; enabledLayouts: BookerLayouts[]; }) { const { t } = useLocale(); const [layout, setLayout] = useBookerStore((state) => [state.layout, state.setLayout], shallow); const selectedDateString = useBookerStore((state) => state.selectedDate); const setSelectedDate = useBookerStore((state) => state.setSelectedDate); const addToSelectedDate = useBookerStore((state) => state.addToSelectedDate); const isMonthView = layout === BookerLayouts.MONTH_VIEW; const selectedDate = dayjs(selectedDateString); const isEmbed = typeof window !== "undefined" && window?.isEmbed?.(); const today = dayjs(); const selectedDateMin3DaysDifference = useMemo(() => { const diff = today.diff(selectedDate, "days"); return diff > 3 || diff < -3; }, [today, selectedDate]); const onLayoutToggle = useCallback( (newLayout: string) => { if (layout === newLayout || !newLayout) return; setLayout(newLayout as BookerLayout); }, [setLayout, layout] ); if (isMobile || isEmbed || !enabledLayouts) return null; // Only reason we create this component, is because it is used 3 times in this component, // and this way we can't forget to update one of the props in all places :) const LayoutToggleWithData = () => { return enabledLayouts.length <= 1 ? null : ( ); }; // In month view we only show the layout toggle. if (isMonthView) { return ; } return (

{selectedDate.format("MMM D")}-{selectedDate.add(extraDays, "days").format("D")},{" "} {selectedDate.format("YYYY")}

)}
{/* This second layout toggle is hidden, but needed to reserve the correct spot in the DIV for the fixed toggle above to fit into. If we wouldn't make it fixed in this view, the transition would be really weird, because the element is positioned fixed in the month view, and then when switching layouts wouldn't anymmore, causing it to animate from the center to the top right, while it actuall already was on place. That's why we have this element twice. */}
); } const LayoutToggle = ({ onLayoutToggle, layout, enabledLayouts, }: { onLayoutToggle: (layout: string) => void; layout: string; enabledLayouts?: BookerLayouts[]; }) => { const { t } = useLocale(); const layoutOptions = useMemo(() => { return [ { value: BookerLayouts.MONTH_VIEW, label: , tooltip: t("switch_monthly"), }, { value: BookerLayouts.WEEK_VIEW, label: , tooltip: t("switch_weekly"), }, { value: BookerLayouts.COLUMN_VIEW, label: , tooltip: t("switch_columnview"), }, ].filter((layout) => enabledLayouts?.includes(layout.value as BookerLayouts)); }, [t, enabledLayouts]); return ; };