@yamada-ui/calendar/dist/use-calendar.d.mts

Yamada UI calendar component

import * as react from 'react';
import { ForwardedRef, MutableRefObject, RefObject, Dispatch, SetStateAction } from 'react';
import { CSSUIObject, PropGetter } from '@yamada-ui/core';
import { Dayjs } from 'dayjs';

type MaybeValue = [Date?, Date?] | Date | Date[] | undefined;
type MaybeDate = Date | Dayjs;
interface CalendarContext extends Pick<Required<UseCalendarProps>, "__selectType" | "amountOfMonths" | "dateFormat" | "disableOutsideDays" | "enableRange" | "firstDayOfWeek" | "hiddenOutsideDays" | "holidays" | "locale" | "month" | "monthFormat" | "paginateBy" | "today" | "type" | "weekdayFormat" | "weekendDays" | "withControls" | "withHeader" | "withLabel" | "withWeekdays" | "yearFormat">, Pick<UseCalendarProps, "excludeDate" | "maxDate" | "maxSelectValues" | "minDate" | "minSelectValues" | "nextRef" | "prevRef" | "typeRef"> {
    dayRefs: MutableRefObject<Map<string, RefObject<HTMLButtonElement>>>;
    hoveredValue: Date;
    internalYear: number;
    maxYear: number;
    minYear: number;
    monthRefs: MutableRefObject<Map<number, RefObject<HTMLButtonElement>>>;
    nextMonth: Date;
    prevMonth: Date;
    rangeYears: number[];
    setHoveredValue: Dispatch<SetStateAction<Date | undefined>>;
    setInternalYear: Dispatch<SetStateAction<number>>;
    setMonth: Dispatch<SetStateAction<Date>>;
    setType: (type: "date" | "month" | "year", year?: number, month?: number) => void;
    setValue: Dispatch<SetStateAction<MaybeValue>>;
    setYear: Dispatch<SetStateAction<number>>;
    styles: {
        [key: string]: CSSUIObject | undefined;
    };
    value: MaybeValue;
    year: number;
    yearRefs: MutableRefObject<Map<number, RefObject<HTMLButtonElement>>>;
}
declare const CalendarProvider: react.Provider<CalendarContext>;
declare const useCalendarContext: () => CalendarContext;
interface UseCalendarProps<Y extends MaybeValue = Date> {
    /**
     * The type of the calendar.
     */
    type?: "date" | "month" | "year";
    /**
     * The number of months to display.
     *
     * @default 1
     */
    amountOfMonths?: number;
    /**
     * The format used for conversion.
     * Check the docs to see the format of possible modifiers you can pass.
     *
     * @see Docs https://day.js.org/docs/en/display/format#list-of-localized-formats
     * @default 'MMMM YYYY'
     */
    dateFormat?: string;
    /**
     * The initial month of the calendar.
     *
     * @default 'new Date()'
     */
    defaultMonth?: Date;
    /**
     * The initial type of the calendar.
     */
    defaultType?: "date" | "month" | "year";
    /**
     * The initial value of the calendar.
     */
    defaultValue?: Y;
    /**
     * If `true`, outside days will be disabled.
     *
     * @default false
     */
    disableOutsideDays?: boolean;
    /**
     * If `true`, enables date multiple selection.
     *
     * @default false
     */
    enableMultiple?: boolean;
    /**
     * If `true`, enables date range selection.
     *
     * @default false
     */
    enableRange?: boolean;
    /**
     * Callback function to determine whether the day should be disabled.
     */
    excludeDate?: (date: Date) => boolean;
    /**
     * Define the first day of the week.
     *
     * @default 'monday'
     */
    firstDayOfWeek?: "monday" | "sunday";
    /**
     * If `true`, outside days will be hidden.
     */
    hiddenOutsideDays?: boolean;
    /**
     * Define holidays.
     */
    holidays?: Date[];
    /**
     * The locale of the calendar.
     * Check the docs to see the locale of possible modifiers you can pass.
     *
     * @see Docs https://day.js.org/docs/en/i18n/instance-locale
     * @default 'en-US'
     */
    locale?: string;
    /**
     * The maximum possible date.
     */
    maxDate?: Date;
    /**
     * The maximum selectable value.
     */
    maxSelectValues?: number;
    /**
     * The minimum possible date.
     */
    minDate?: Date;
    /**
     * The minimum selectable value.
     */
    minSelectValues?: number;
    /**
     * The month of the calendar.
     */
    month?: Date;
    /**
     * The format used for conversion.
     * Check the docs to see the format of possible modifiers you can pass.
     *
     * @see Docs https://day.js.org/docs/en/display/format#list-of-localized-formats
     * @default 'MM'
     */
    monthFormat?: string;
    /**
     * Ref to a next function.
     */
    nextRef?: ForwardedRef<() => undefined | void>;
    /**
     * The number of months to paginate.
     *
     * @default 1
     */
    paginateBy?: number;
    /**
     * Ref to a previous function.
     */
    prevRef?: ForwardedRef<() => undefined | void>;
    /**
     * If `true`, highlight today.
     *
     * @default false
     */
    today?: boolean;
    /**
     * Ref to a type function.
     */
    typeRef?: ForwardedRef<() => undefined | void>;
    /**
     * The value of the calendar.
     */
    value?: Y;
    /**
     * The format used for conversion.
     * Check the docs to see the format of possible modifiers you can pass.
     *
     * @see Docs https://day.js.org/docs/en/display/format#list-of-localized-formats
     * @default 'dd'
     */
    weekdayFormat?: string;
    /**
     * Define weekend days.
     *
     * @default '[0, 6]'
     */
    weekendDays?: number[];
    /**
     * If `true`, display the calendar control buttons.
     *
     * @default true
     */
    withControls?: boolean;
    /**
     * If `true`, display the calendar header.
     *
     * @default true
     */
    withHeader?: boolean;
    /**
     * If `true`, display the calendar label button.
     *
     * @default true
     */
    withLabel?: boolean;
    /**
     * If `true`, display the calendar weekdays.
     *
     * @default true
     */
    withWeekdays?: boolean;
    /**
     * The format used for conversion.
     * Check the docs to see the format of possible modifiers you can pass.
     *
     * @see Docs https://day.js.org/docs/en/display/format#list-of-localized-formats
     * @default 'YYYY'
     */
    yearFormat?: string;
    /**
     * The callback invoked when value state changes.
     */
    onChange?: (value: Y) => void;
    /**
     * The callback invoked when month state changes.
     */
    onChangeMonth?: (value: Date) => void;
    /**
     * The callback invoked when type state changes.
     */
    onChangeType?: (type: "date" | "month" | "year", year?: number, month?: number) => void;
    /**
     * Changes the judgment of the currently selected year and month.
     * This is an internal utility primarily used by `MonthPicker` and `YearPicker`.
     *
     * @private
     */
    __selectType?: "date" | "month" | "year";
}
declare const useCalendar: <Y extends MaybeValue = Date>({ type: typeProp, amountOfMonths, dateFormat, defaultMonth, defaultType, defaultValue, disableOutsideDays, enableMultiple, enableRange, excludeDate, firstDayOfWeek, hiddenOutsideDays, holidays, locale, maxDate, maxSelectValues, minDate, minSelectValues, month: monthProp, monthFormat, nextRef, paginateBy, prevRef, today, typeRef, value: valueProp, weekdayFormat, weekendDays, withControls, withHeader, withLabel, withWeekdays, yearFormat, onChange: onChangeProp, onChangeMonth: onChangeMonthProp, onChangeType: onChangeTypeProp, __selectType, ...rest }: UseCalendarProps<Y>) => {
    type: "month" | "date" | "year" | undefined;
    amountOfMonths: number;
    dateFormat: string;
    dayRefs: MutableRefObject<Map<string, RefObject<HTMLButtonElement>>>;
    disableOutsideDays: boolean;
    enableRange: boolean;
    excludeDate: ((date: Date) => boolean) | undefined;
    firstDayOfWeek: "monday" | "sunday";
    hiddenOutsideDays: boolean;
    holidays: Date[];
    hoveredValue: Date | undefined;
    internalYear: number;
    locale: string;
    maxDate: Date | undefined;
    maxSelectValues: number | undefined;
    maxYear: number;
    minDate: Date | undefined;
    minSelectValues: number | undefined;
    minYear: number;
    month: Date;
    monthFormat: string;
    monthRefs: MutableRefObject<Map<number, RefObject<HTMLButtonElement>>>;
    nextMonth: Date;
    nextRef: ForwardedRef<() => undefined | void> | undefined;
    paginateBy: number;
    prevMonth: Date;
    prevRef: ForwardedRef<() => undefined | void> | undefined;
    rangeYears: number[];
    setHoveredValue: Dispatch<SetStateAction<Date | undefined>>;
    setInternalYear: Dispatch<SetStateAction<number>>;
    setMonth: Dispatch<SetStateAction<Date>>;
    setType: (type: "date" | "month" | "year", year?: number, month?: number) => void;
    setValue: Dispatch<SetStateAction<Y>>;
    setYear: Dispatch<SetStateAction<number>>;
    today: boolean;
    typeRef: ForwardedRef<() => undefined | void> | undefined;
    value: Y;
    weekdayFormat: string;
    weekendDays: number[];
    withControls: boolean;
    withHeader: boolean;
    withLabel: boolean;
    withWeekdays: boolean;
    year: number;
    yearFormat: string;
    yearRefs: MutableRefObject<Map<number, RefObject<HTMLButtonElement>>>;
    getContainerProps: PropGetter<"div", undefined>;
    __selectType: "month" | "date" | "year";
};
type UseCalendarReturn = ReturnType<typeof useCalendar>;

export { type CalendarContext, CalendarProvider, type MaybeDate, type MaybeValue, type UseCalendarProps, type UseCalendarReturn, useCalendar, useCalendarContext };