react-calendar-plus/dist/index.d.mts

A flexible, themeable, and internationalized React calendar component with date and time selection. Includes month/week/day views, range selection, and custom event handling.

import React$1 from 'react';

type CalendarView = 'month' | 'week' | 'day';
type SelectionMode = 'single' | 'range' | 'multiple';
interface CalendarDate {
    year: number;
    month: number;
    day: number;
}
interface DateRange {
    start: Date | null;
    end: Date | null;
}
interface CalendarEvent {
    id: string;
    title: string;
    start: Date;
    end?: Date;
    color?: string;
    textColor?: string;
}
interface LocaleConfig {
    locale: string;
    weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
    formatOptions?: {
        weekday?: 'narrow' | 'short' | 'long';
        month?: 'numeric' | '2-digit' | 'narrow' | 'short' | 'long';
        day?: 'numeric' | '2-digit';
    };
}
interface CalendarTheme {
    primary?: string;
    secondary?: string;
    background?: string;
    text?: string;
    textSecondary?: string;
    border?: string;
    hover?: string;
    selected?: string;
    disabled?: string;
    today?: string;
}
interface DayRendererProps {
    date: Date;
    isToday: boolean;
    isSelected: boolean;
    isInRange: boolean;
    isDisabled: boolean;
    isOutOfMonth: boolean;
    events: CalendarEvent[];
    onClick: (date: Date) => void;
}
interface HeaderRendererProps {
    date: Date;
    view: CalendarView;
    onPrevious: () => void;
    onNext: () => void;
    onViewChange: (view: CalendarView) => void;
}
interface CalendarProps {
    value?: Date | Date[] | DateRange | null;
    defaultValue?: Date | Date[] | DateRange | null;
    onChange?: (value: Date | Date[] | DateRange | null) => void;
    interactionMode?: CalendarInteractionMode;
    view?: CalendarView;
    defaultView?: CalendarView;
    onViewChange?: (view: CalendarView) => void;
    selectionMode?: SelectionMode;
    showTimePicker?: boolean;
    timeFormat?: '12h' | '24h';
    minuteStep?: number;
    locale?: LocaleConfig;
    className?: string;
    theme?: CalendarTheme;
    onDateClick?: (date: Date, event: React.MouseEvent) => void;
    onRangeSelect?: (range: DateRange) => void;
    onMonthChange?: (date: Date) => void;
    onWeekChange?: (startOfWeek: Date) => void;
    onDayChange?: (date: Date) => void;
    dayRenderer?: (props: DayRendererProps) => React.ReactNode;
    headerRenderer?: (props: HeaderRendererProps) => React.ReactNode;
    minDate?: Date;
    maxDate?: Date;
    disabledDates?: Date[];
    disabledDaysOfWeek?: number[];
    disableWeekends?: boolean;
    events?: CalendarEvent[];
    responsive?: boolean;
    showWeekNumbers?: boolean;
    showOtherMonths?: boolean;
    fixedWeekCount?: boolean;
}
interface TimePickerProps {
    value?: Date;
    onChange?: (date: Date) => void;
    format?: '12h' | '24h';
    minuteStep?: number;
    disabled?: boolean;
    className?: string;
}
type CalendarInteractionMode = 'standalone' | 'input';
interface CalendarInputProps$1 extends Omit<CalendarProps, 'className'> {
    placeholder?: string;
    inputClassName?: string;
    calendarClassName?: string;
    showInput?: boolean;
    inputFormat?: string;
    disabled?: boolean;
    readOnly?: boolean;
    clearable?: boolean;
    onClear?: () => void;
    dropdownPosition?: 'auto' | 'top' | 'bottom';
    dropdownOffset?: number;
    closeOnSelect?: boolean;
    closeOnOutsideClick?: boolean;
    onOpen?: () => void;
    onClose?: () => void;
    name?: string;
    id?: string;
    autoComplete?: string;
    required?: boolean;
}

declare const Calendar: React$1.FC<CalendarProps>;

interface CalendarInputProps extends Omit<CalendarProps, 'className'> {
    placeholder?: string;
    inputClassName?: string;
    calendarClassName?: string;
    showInput?: boolean;
    inputFormat?: string;
    disabled?: boolean;
    readOnly?: boolean;
    clearable?: boolean;
    onClear?: () => void;
    dropdownPosition?: 'auto' | 'top' | 'bottom';
    dropdownOffset?: number;
    closeOnSelect?: boolean;
    closeOnOutsideClick?: boolean;
    onOpen?: () => void;
    onClose?: () => void;
    name?: string;
    id?: string;
    autoComplete?: string;
    required?: boolean;
}
declare const CalendarInput: React$1.FC<CalendarInputProps>;

declare const TimePicker: React$1.FC<TimePickerProps>;

interface CalendarHeaderProps {
    currentDate: Date;
    view: CalendarView;
    onPrevious: () => void;
    onNext: () => void;
    onViewChange: (view: CalendarView) => void;
    onDateChange?: (date: Date) => void;
    minDate?: Date;
    maxDate?: Date;
    className?: string;
}
declare const CalendarHeader: React$1.FC<CalendarHeaderProps>;

interface CalendarDayProps {
    date: Date;
    currentMonth: Date;
    selectedValue: Date | Date[] | null;
    events: CalendarEvent[];
    onDateClick: (date: Date, event: React$1.MouseEvent) => void;
    dayRenderer?: (props: DayRendererProps) => React$1.ReactNode;
    minDate?: Date;
    maxDate?: Date;
    disabledDates?: Date[];
    disabledDaysOfWeek?: number[];
    disableWeekends?: boolean;
    showOtherMonths?: boolean;
    className?: string;
}
declare const CalendarDay: React$1.FC<CalendarDayProps>;

interface YearMonthSelectorProps {
    currentDate: Date;
    onDateChange: (date: Date) => void;
    minDate?: Date;
    maxDate?: Date;
    className?: string;
}
declare const YearMonthSelector: React$1.FC<YearMonthSelectorProps>;

declare const DEFAULT_LOCALE: LocaleConfig;
declare const getCalendarDays: (date: Date, locale?: LocaleConfig) => Date[];
declare const getWeekDays: (date: Date, locale?: LocaleConfig) => Date[];
declare const formatDate: (date: Date, formatString: string) => string;
declare const formatDateForDisplay: (date: Date, locale?: LocaleConfig) => string;
declare const isDateInRange: (date: Date, range: DateRange) => boolean;
declare const isDateSelected: (date: Date, selectedValue: Date | Date[] | DateRange | null) => boolean;
declare const isDateDisabled: (date: Date, minDate?: Date, maxDate?: Date, disabledDates?: Date[], disabledDaysOfWeek?: number[], disableWeekends?: boolean) => boolean;
declare const getViewTitle: (date: Date, view: CalendarView) => string;
declare const navigateDate: (date: Date, direction: "previous" | "next", view: CalendarView) => Date;
declare const parseDateTime: (dateTimeString: string) => Date | null;
declare const combineDateTime: (date: Date, time: Date) => Date;
declare const getWeekNumber: (date: Date) => number;
declare const navigateToYear: (date: Date, year: number) => Date;
declare const navigateToMonth: (date: Date, month: number) => Date;
declare const navigateToYearMonth: (date: Date, year: number, month: number) => Date;
declare const getYearRange: (centerYear: number, range?: number) => number[];
declare const getMonthNames: () => string[];

export { Calendar, type CalendarDate, CalendarDay, type CalendarEvent, CalendarHeader, CalendarInput, type CalendarInputProps$1 as CalendarInputProps, type CalendarInteractionMode, type CalendarProps, type CalendarTheme, type CalendarView, DEFAULT_LOCALE, type DateRange, type DayRendererProps, type HeaderRendererProps, type LocaleConfig, type SelectionMode, TimePicker, type TimePickerProps, YearMonthSelector, combineDateTime, formatDate, formatDateForDisplay, getCalendarDays, getMonthNames, getViewTitle, getWeekDays, getWeekNumber, getYearRange, isDateDisabled, isDateInRange, isDateSelected, navigateDate, navigateToMonth, navigateToYear, navigateToYearMonth, parseDateTime };