@chayns-components/date/lib/types/components/calendar/Calendar.d.ts

A set of beautiful React components for developing your own applications with chayns.

import { Language } from 'chayns-api';
import { FC } from 'react';
import { CalendarType, Categories, CustomThumbColors, DateInterval, HighlightedDates } from '../../types/calendar';
interface BaseProps {
    /**
     * An array to group dates into a category.
     */
    categories?: Categories[];
    /**
     * Custom colors for the thumb.
     */
    customThumbColors?: CustomThumbColors;
    /**
     * An array with dates and corresponding styles to highlight.
     */
    highlightedDates?: HighlightedDates[];
    /**
     * To disable the Calendar
     */
    isDisabled?: boolean;
    /**
     * The locale language to format the dates.
     */
    locale?: Language;
    /**
     * The maximum date that can be selected.
     */
    maxDate?: Date;
    /**
     * The minimum date that can be selected.
     */
    minDate?: Date;
    /**
     * An array of dates that should be disabled.
     */
    disabledDates?: Date[];
    /**
     * Whether the highlighted dates should be displayed for the greyed month overlay days.
     */
    shouldShowHighlightsInMonthOverlay?: boolean;
    /**
     * Shows the month and year pickers, if there are multiple months/years to select from.
     */
    showMonthYearPickers?: boolean;
    /**
     * Function to be executed when the selected date, dates or date interval change.
     * @param date
     */
    onChange?: (date: Date | Date[] | DateInterval) => void;
    /**
     * Function to be executed when the shown dates change. Returns the start of the displayed month and the end of the last displayed month (since depending on the available widths, there are one or two months displayed).
     @param { start: Date, end: Date }
     */
    onShownDatesChange?: (dates: {
        start: Date;
        end: Date;
    }) => void;
}
interface SingleSelectionProps {
    /**
     * The type of the calendar selection.
     */
    type?: CalendarType.Single;
    /**
     * A date that should be preselected.
     */
    selectedDate?: Date;
    selectedDates?: never;
    selectedDateInterval?: never;
}
interface MultipleSelectionProps {
    /**
     * The type of the calendar selection.
     */
    type: CalendarType.Multiple;
    /**
     * An array of dates that should be preselected.
     */
    selectedDates?: Date[];
    selectedDate?: never;
    selectedDateInterval?: never;
}
interface IntervalSelectionProps {
    /**
     * The type of the calendar selection.
     */
    type: CalendarType.Interval;
    /**
     * An interval that should be preselected.
     */
    selectedDateInterval?: DateInterval;
    selectedDates?: never;
    selectedDate?: never;
}
export type CalendarProps = BaseProps & (SingleSelectionProps | MultipleSelectionProps | IntervalSelectionProps);
declare const Calendar: FC<CalendarProps>;
export default Calendar;