cal.pub0.org/packages/features/bookings/Booker/components/DatePicker.tsx

55 lines
2.0 KiB
TypeScript

import { useEffect, useState } from "react";
import { shallow } from "zustand/shallow";
import type { Dayjs } from "@calcom/dayjs";
import dayjs from "@calcom/dayjs";
import { default as DatePickerComponent } from "@calcom/features/calendars/DatePicker";
import { useNonEmptyScheduleDays } from "@calcom/features/schedules";
import { weekdayToWeekIndex } from "@calcom/lib/date-fns";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { useBookerStore } from "../store";
import { useEvent, useScheduleForEvent } from "../utils/event";
export const DatePicker = () => {
const [isLoadedClientSide, setIsLoadedClientSide] = useState(false);
const { i18n } = useLocale();
const [month, selectedDate] = useBookerStore((state) => [state.month, state.selectedDate], shallow);
const [setSelectedDate, setMonth] = useBookerStore(
(state) => [state.setSelectedDate, state.setMonth],
shallow
);
const event = useEvent();
const schedule = useScheduleForEvent();
const nonEmptyScheduleDays = useNonEmptyScheduleDays(schedule?.data?.slots);
// Not rendering the component on the server side to avoid hydration issues
// @TODO: We should update the datepicker component as soon as the current booker isn't
// used anymore, so we don't need to have this check.
useEffect(() => {
setIsLoadedClientSide(true);
}, []);
if (!isLoadedClientSide) return null;
return (
<div className="mt-1">
<DatePickerComponent
isLoading={schedule.isLoading}
onChange={(date: Dayjs) => {
setSelectedDate(date.format("YYYY-MM-DD"));
}}
onMonthChange={(date: Dayjs) => {
setMonth(date.format("YYYY-MM"));
setSelectedDate(date.format("YYYY-MM-DD"));
}}
includedDates={nonEmptyScheduleDays}
locale={i18n.language}
browsingDate={month ? dayjs(month) : undefined}
selected={dayjs(selectedDate)}
weekStart={weekdayToWeekIndex(event?.data?.users?.[0]?.weekStart)}
/>
</div>
);
};