diff --git a/packages/features/bookings/Booker/components/DatePicker.tsx b/packages/features/bookings/Booker/components/DatePicker.tsx index 544d0d929e4069..1ed5f7fe396fe1 100644 --- a/packages/features/bookings/Booker/components/DatePicker.tsx +++ b/packages/features/bookings/Booker/components/DatePicker.tsx @@ -74,7 +74,10 @@ export const DatePicker = ({ scrollToTimeSlots?: () => void; }) => { const { i18n } = useLocale(); - const [month, selectedDate] = useBookerStore((state) => [state.month, state.selectedDate], shallow); + const [month, selectedDate, layout] = useBookerStore( + (state) => [state.month, state.selectedDate, state.layout], + shallow + ); const [setSelectedDate, setMonth, setDayCount] = useBookerStore( (state) => [state.setSelectedDate, state.setMonth, state.setDayCount], @@ -83,7 +86,7 @@ export const DatePicker = ({ const onMonthChange = (date: Dayjs) => { setMonth(date.format("YYYY-MM")); - setSelectedDate(date.format("YYYY-MM-DD")); + setSelectedDate({ date: date.format("YYYY-MM-DD") }); setDayCount(null); // Whenever the month is changed, we nullify getting X days }; @@ -98,6 +101,9 @@ export const DatePicker = ({ }); moveToNextMonthOnNoAvailability(); + // Determine if this is a compact sidebar view based on layout + const isCompact = layout !== "month_view"; + const periodData: PeriodData = { ...{ periodType: "UNLIMITED", @@ -126,7 +132,11 @@ export const DatePicker = ({ className={classNames?.datePickerContainer} isLoading={isLoading} onChange={(date: Dayjs | null, omitUpdatingParams?: boolean) => { - setSelectedDate(date === null ? date : date.format("YYYY-MM-DD"), omitUpdatingParams); + setSelectedDate({ + date: date === null ? date : date.format("YYYY-MM-DD"), + omitUpdatingParams, + preventMonthSwitching: !isCompact, // Prevent month switching when in monthly view + }); }} onMonthChange={onMonthChange} includedDates={nonEmptyScheduleDays} @@ -137,6 +147,7 @@ export const DatePicker = ({ slots={slots} scrollToTimeSlots={scrollToTimeSlots} periodData={periodData} + isCompact={isCompact} /> ); }; diff --git a/packages/features/bookings/Booker/components/Header.tsx b/packages/features/bookings/Booker/components/Header.tsx index b76ac83e0a8cc9..238bc3228132d3 100644 --- a/packages/features/bookings/Booker/components/Header.tsx +++ b/packages/features/bookings/Booker/components/Header.tsx @@ -130,7 +130,7 @@ export function Header({ )} diff --git a/packages/features/bookings/Booker/store.ts b/packages/features/bookings/Booker/store.ts index 3f7409caa17224..0a9eb641295e1e 100644 --- a/packages/features/bookings/Booker/store.ts +++ b/packages/features/bookings/Booker/store.ts @@ -83,7 +83,11 @@ export type BookerStore = { * Date selected by user (exact day). Format is YYYY-MM-DD. */ selectedDate: string | null; - setSelectedDate: (date: string | null, omitUpdatingParams?: boolean) => void; + setSelectedDate: (params: { + date: string | null; + omitUpdatingParams?: boolean; + preventMonthSwitching?: boolean; + }) => void; addToSelectedDate: (days: number) => void; /** * Multiple Selected Dates and Times @@ -192,7 +196,7 @@ export const useBookerStore = createWithEqualityFn((set, get) => ({ return set({ layout }); }, selectedDate: getQueryParam("date") || null, - setSelectedDate: (selectedDate: string | null, omitUpdatingParams = false) => { + setSelectedDate: ({ date: selectedDate, omitUpdatingParams = false, preventMonthSwitching = false }) => { // unset selected date if (!selectedDate) { removeQueryParam("date"); @@ -207,7 +211,8 @@ export const useBookerStore = createWithEqualityFn((set, get) => ({ } // Setting month make sure small calendar in fullscreen layouts also updates. - if (newSelection.month() !== currentSelection.month()) { + // preventMonthSwitching is true in monthly view + if (!preventMonthSwitching && newSelection.month() !== currentSelection.month()) { set({ month: newSelection.format("YYYY-MM") }); if (!omitUpdatingParams && (!get().isPlatform || get().allowUpdatingUrlParams)) { updateQueryParam("month", newSelection.format("YYYY-MM")); @@ -264,7 +269,7 @@ export const useBookerStore = createWithEqualityFn((set, get) => ({ if (!get().isPlatform || get().allowUpdatingUrlParams) { updateQueryParam("month", month ?? ""); } - get().setSelectedDate(null); + get().setSelectedDate({ date: null }); }, dayCount: BOOKER_NUMBER_OF_DAYS_TO_LOAD > 0 ? BOOKER_NUMBER_OF_DAYS_TO_LOAD : null, setDayCount: (dayCount: number | null) => { diff --git a/packages/features/calendars/DatePicker.tsx b/packages/features/calendars/DatePicker.tsx index 97c981b9bc9162..644361d72414a0 100644 --- a/packages/features/calendars/DatePicker.tsx +++ b/packages/features/calendars/DatePicker.tsx @@ -14,6 +14,7 @@ import type { PeriodData } from "@calcom/types/Event"; import classNames from "@calcom/ui/classNames"; import { Button } from "@calcom/ui/components/button"; import { SkeletonText } from "@calcom/ui/components/skeleton"; +import { Tooltip } from "@calcom/ui/components/tooltip"; import NoAvailabilityDialog from "./NoAvailabilityDialog"; @@ -56,6 +57,8 @@ export type DatePickerProps = { }[] >; periodData?: PeriodData; + // Whether this is a compact sidebar view or main monthly view + isCompact?: boolean; }; const Day = ({ @@ -65,6 +68,8 @@ const Day = ({ away, emoji, customClassName, + showMonthTooltip, + isFirstDayOfNextMonth, ...props }: JSX.IntrinsicElements["button"] & { active: boolean; @@ -75,12 +80,14 @@ const Day = ({ dayContainer?: string; dayActive?: string; }; + showMonthTooltip?: boolean; + isFirstDayOfNextMonth?: boolean; }) => { const { t } = useLocale(); const enabledDateButtonEmbedStyles = useEmbedStyles("enabledDateButton"); const disabledDateButtonEmbedStyles = useEmbedStyles("disabledDateButton"); - return ( + const buttonContent = (