react-d-calendar/dist/types.d.ts

A fully customizable, accessible, and responsive React calendar component

import React from "react";
export interface DayInfo {
    date: Date;
    isCurrentMonth: boolean;
}
export interface Event {
    date: Date;
    title?: string;
    type?: string;
    color?: string;
    [key: string]: any;
}
export interface CalendarProps {
    date?: Date;
    activeStartDate?: Date;
    defaultActiveStartDate?: Date;
    value?: Date | [Date, Date];
    defaultValue?: Date | [Date, Date];
    defaultView?: "day" | "month" | "year" | "decade";
    disableDate?: (date: Date) => boolean;
    disableYear?: (year: number) => boolean;
    onActiveStartDateChange?: ({ activeStartDate, }: {
        activeStartDate: Date;
    }) => void;
    onChange?: (value: Date | [Date, Date]) => void;
    onClickMonth?: (date: Date) => void;
    onClickWeekNumber?: (week: number, date: Date) => void;
    onDrillDown?: () => void;
    onDrillUp?: () => void;
    onViewChange?: ({ view, }: {
        view: "day" | "month" | "year" | "decade";
    }) => void;
    onRangeHover?: ({ start, end }: {
        start: Date;
        end: Date | null;
    }) => void;
    tileClassName?: ({ date }: {
        date: Date;
    }) => string;
    tileContent?: ({ date, view, event, }: {
        date: Date;
        view: string;
        event?: Event;
    }) => React.ReactNode;
    tileDisabled?: ({ date }: {
        date: Date;
    }) => boolean;
    customTileContent?: ({ date, view, event, }: {
        date: Date;
        view: string;
        event?: Event;
    }) => React.ReactNode;
    formatDay?: (date: Date, locale: string) => string;
    formatLongDate?: (date: Date, locale: string) => string;
    formatMonth?: (date: Date, locale: string) => string;
    formatMonthYear?: (date: Date, locale: string) => string;
    formatShortWeekday?: (date: Date, locale: string) => string;
    formatWeekday?: (date: Date, locale: string) => string;
    formatYear?: (date: Date, locale: string) => string;
    className?: string;
    style?: React.CSSProperties;
    locale?: string;
    calendarType?: "gregorian";
    maxDate?: Date;
    minDate?: Date;
    maxDetail?: "day" | "month" | "year";
    minDetail?: "day" | "month" | "year";
    selectionMode?: "single" | "range";
    rangeStart?: Date;
    rangeLimit?: number | null;
    showDoubleView?: boolean;
    showFixedNumberOfWeeks?: boolean;
    showNavigation?: boolean;
    showNeighboringMonth?: boolean;
    showWeekNumbers?: boolean;
    showNeighboringDecade?: boolean;
    weekStartDay?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
    navigationAriaLabel?: string;
    navigationAriaLive?: string;
    navigationLabel?: ({ date, view, locale, }: {
        date: Date;
        view: string;
        locale: string;
    }) => string;
    next2AriaLabel?: string;
    next2Label?: React.ReactNode;
    nextAriaLabel?: string;
    nextLabel?: React.ReactNode;
    prev2AriaLabel?: string;
    prev2Label?: React.ReactNode;
    prevAriaLabel?: string;
    prevLabel?: React.ReactNode;
    events?: Event[];
    weekdayFormat?: "short" | "full" | "minimal";
    dateFormat?: "mm/dd/yyyy" | "dd/mm/yyyy" | "yyyy-mm-dd" | "mm-dd-yyyy" | "dd-mm-yyyy";
    monthFormat?: "long" | "short" | "numeric";
    includeTime?: boolean;
    inputRef?: React.RefObject<HTMLElement>;
    renderHeader?: ({ date, onChange, view, }: {
        date: Date;
        onChange: (date: Date) => void;
        view: string;
    }) => React.ReactNode;
    renderMonthView?: ({ date, onDateSelect, }: {
        date: Date;
        onDateSelect: (date: Date) => void;
    }) => React.ReactNode;
    renderYearView?: ({ date, onMonthSelect, }: {
        date: Date;
        onMonthSelect: (date: Date) => void;
    }) => React.ReactNode;
    renderDayView?: ({ date, onDateSelect, }: {
        date: Date;
        onDateSelect: (date: Date) => void;
    }) => React.ReactNode;
    customTheme?: {
        [key: string]: string;
    };
    dayViewClassName?: string;
    monthViewClassName?: string;
    yearViewClassName?: string;
    styleOverrides?: {
        calendar?: React.CSSProperties;
        header?: React.CSSProperties;
        container?: React.CSSProperties;
        backButton?: React.CSSProperties;
        footer?: React.CSSProperties;
    };
    holidayDates?: Date[];
    renderCustomFooter?: ({ selectedValue, activeDate, }: {
        selectedValue: Date | [Date, Date] | null;
        activeDate: Date;
    }) => React.ReactNode;
    disabledViews?: string[];
    onClickEvent?: (event: Event) => void;
    renderEvent?: ({ event, date, }: {
        event: Event;
        date: Date;
    }) => React.ReactNode;
    selectOnEventClick?: boolean;
    theme?: "light" | "dark" | string;
}