Calendar

Exports

Import these components from @mbsw/ui.

Calendar
CALENDAR_DEFAULT_LABELS
CALENDAR_LOCALES
DatePicker
DatePickerContent
DatePickerTrigger

Props

The tables list common props for each component. See the full types for supported prop combinations and inherited HTML and Radix props.

Calendar

Calendar props
PropTypeRequirement
childrenReactNodeOptional
defaultMonthDateOptional
defaultView'day' | 'month' | 'year'Optional
disabledMatcher | Matcher[]Optional
labelsPartial<CalendarLabels>Optional
monthDateOptional
onMonthChange((month: Date) => void)Optional
onViewChange((view: CalendarView) => void)Optional
todayDateRequired
view'day' | 'month' | 'year'Optional
mode"single" | "range"Conditional
defaultSelectedDate | CalendarDateRangeOptional
selectedDate | CalendarDateRangeOptional
onSelect((date: Date | undefined) => void) | ((range: CalendarDateRange | undefined) => void)Optional

DatePicker

DatePicker props
PropTypeRequirement
childrenReactNodeOptional
defaultOpenbooleanOptional
openbooleanOptional
onOpenChange((open: boolean) => void)Optional

DatePickerContent

DatePickerContent props
PropTypeRequirement
aria-label

Defines a string value that labels the current element.

stringConditional
aria-labelledby

Identifies the element (or elements) that labels the current element.

stringConditional
calendarPropsCalendarProps & { ref?: Ref<HTMLDivElement> | undefined; }Required

DatePickerTrigger

DatePickerTrigger props
PropTypeRequirement
childrenReactElement<unknown, string | JSXElementConstructor<any>>Required
standalone

Bind to the nearest official Popover instead of an enclosing DatePicker.

booleanOptional

Type reference

Show full types

Full TypeScript definitions, including prop combinations and inherited props.

import { type DayButtonProps, type DayPickerLocale, type Matcher } from 'react-day-picker';

import { type ComponentPropsWithoutRef, type ReactNode, type Ref, type CSSProperties, type ReactElement } from 'react';

import { Tabs as TabsPrimitive, Popover as PopoverPrimitive } from 'radix-ui';

type DataAttributes = {
    [key: `data-${string}`]: boolean | number | string | undefined;
};

export type CalendarView = 'day' | 'month' | 'year';

export type CalendarLabels = {
    day: string;
    month: string;
    year: string;
    today: string;
    previousMonth: string;
    nextMonth: string;
    viewPicker: string;
    /** Seven weekday names, Sunday first. */
    weekdays: readonly string[];
    formatMonth: (date: Date) => string;
    formatMonthName: (date: Date) => string;
    formatYear: (year: number) => string;
    monthPicker: string;
    yearPicker: string;
    monthName: string;
    yearName: string;
    selectedPeriod: (periodName: string) => string;
    currentPeriod: (periodName: string) => string;
    rangePreviewStart: string;
    rangePreviewMiddle: string;
    rangePreviewEnd: string;
    locale: Partial<DayPickerLocale>;
};

export declare const CALENDAR_LOCALES: {
    en: DayPickerLocale;
    ko: DayPickerLocale;
};

export declare const CALENDAR_DEFAULT_LABELS: CalendarLabels;

type CalendarRootProps = Omit<ComponentPropsWithoutRef<typeof TabsPrimitive.Root>, 'activationMode' | 'asChild' | 'orientation'>;

type CalendarBaseProps = Omit<CalendarRootProps, 'defaultValue' | 'onSelect' | 'onValueChange' | 'value'> & DataAttributes & {
    children?: ReactNode;
    defaultMonth?: Date;
    defaultView?: CalendarView;
    disabled?: Matcher | Matcher[];
    labels?: Partial<CalendarLabels>;
    month?: Date;
    onMonthChange?: (month: Date) => void;
    onViewChange?: (view: CalendarView) => void;
    today: Date;
    view?: CalendarView;
};

export type CalendarDateRange = {
    from: Date;
    to?: Date;
};

export type CalendarProps = CalendarBaseProps & ({
    mode?: 'single';
    defaultSelected?: Date;
    selected?: Date;
    onSelect?: (date: Date | undefined) => void;
} | {
    mode: 'range';
    defaultSelected?: CalendarDateRange;
    selected?: CalendarDateRange;
    onSelect?: (range: CalendarDateRange | undefined) => void;
});

export declare const Calendar: import("react").ForwardRefExoticComponent<CalendarProps & import("react").RefAttributes<HTMLDivElement>>;

export type DatePickerProps = {
    children?: ReactNode;
    defaultOpen?: boolean;
    open?: boolean;
    onOpenChange?: (open: boolean) => void;
};

export type DatePickerTriggerProps = Omit<ComponentPropsWithoutRef<typeof PopoverPrimitive.Trigger>, 'asChild' | 'children'> & DataAttributes & {
    children: ReactElement;
    /** Bind to the nearest official Popover instead of an enclosing DatePicker. */
    standalone?: boolean;
};

type PanelProps = Omit<ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>, 'asChild' | 'deferPointerDownOutside' | 'forceMount' | 'role'> & DataAttributes;

export type DatePickerContentProps = PanelProps & {
    calendarProps: CalendarProps & {
        ref?: Ref<HTMLDivElement>;
    };
} & ({
    'aria-label': string;
    'aria-labelledby'?: string;
} | {
    'aria-label'?: string;
    'aria-labelledby': string;
});

export declare function DatePicker({ children, defaultOpen, open, onOpenChange, }: DatePickerProps): import("react").JSX.Element;

export declare const DatePickerTrigger: import("react").ForwardRefExoticComponent<Omit<Omit<PopoverPrimitive.PopoverTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref">, "children" | "asChild"> & DataAttributes & {
    children: ReactElement;
    /** Bind to the nearest official Popover instead of an enclosing DatePicker. */
    standalone?: boolean;
} & import("react").RefAttributes<HTMLElement>>;

export declare const DatePickerContent: import("react").ForwardRefExoticComponent<DatePickerContentProps & import("react").RefAttributes<HTMLDivElement>>;