@fluentui/react/lib/components/Calendar/Calendar.types.d.ts

Reusable React components for building web experiences.

import * as React from 'react';
import { DayOfWeek, FirstWeekOfYear, DateRangeType } from '@fluentui/date-time-utilities';
import type { IRefObject, IBaseProps, IStyleFunctionOrObject } from '@fluentui/utilities';
import type { IStyle, ITheme } from '@fluentui/style-utilities';
import type { ICalendarDayProps } from './CalendarDay/CalendarDay.types';
import type { ICalendarMonthProps } from './CalendarMonth/CalendarMonth.types';
import type { ICalendarStrings, IDateFormatting } from '@fluentui/date-time-utilities';
/**
 * {@docCategory Calendar}
 */
export interface ICalendar {
    /** Sets focus to the selected date. */
    focus: () => void;
}
/**
 * {@docCategory Calendar}
 */
export interface ICalendarProps extends IBaseProps<ICalendar>, React.RefAttributes<HTMLDivElement> {
    /**
     * Optional callback to access the ICalendar interface. Use this instead of ref for accessing
     * the public methods and properties of the component.
     */
    componentRef?: IRefObject<ICalendar>;
    /**
     * Customized styles for the calendar component
     */
    styles?: IStyleFunctionOrObject<ICalendarStyleProps, ICalendarStyles>;
    /**
     * Customized props for the calendar day
     */
    calendarDayProps?: Partial<ICalendarDayProps>;
    /**
     * Customized props for the calendar month
     */
    calendarMonthProps?: Partial<ICalendarMonthProps>;
    /**
     * Theme provided by High-Order Component.
     */
    theme?: ITheme;
    /**
     * Optional class name to add to the root element.
     */
    className?: string;
    /**
     * Callback for when a date is selected
     * @param date - The date the user selected
     * @param selectedDateRangeArray - The resultant list of dates that are selected based on the date range type set
     * for the component.
     */
    onSelectDate?: (date: Date, selectedDateRangeArray?: Date[]) => void;
    /**
     * Callback for when calendar is closed
     */
    onDismiss?: () => void;
    /**
     * ID for the calendar
     */
    id?: string;
    /**
     * Default value of the Calendar, if any
     */
    value?: Date;
    /**
     * Value of today. If unspecified, current time in client machine will be used.
     */
    today?: Date;
    /**
     * The date range type indicating how  many days should be selected as the user
     * selects days
     * @defaultValue DateRangeType.Day
     */
    dateRangeType?: DateRangeType;
    /**
     * The first day of the week for your locale.
     * @defaultvalue DayOfWeek.Sunday
     */
    firstDayOfWeek?: DayOfWeek;
    /**
     * Defines when the first week of the year should start.
     * @defaultvalue FirstWeekOfYear.FirstDay
     */
    firstWeekOfYear?: FirstWeekOfYear;
    /**
     * Whether the month picker is shown beside the day picker or hidden.
     * @defaultvalue true
     */
    isMonthPickerVisible?: boolean;
    /**
     * Whether the day picker is shown beside the month picker or hidden.
     * @defaultvalue true
     */
    isDayPickerVisible?: boolean;
    /**
     * Show month picker on top of date picker when visible.
     * @defaultvalue false
     */
    showMonthPickerAsOverlay?: boolean;
    /**
     * Whether the "Go to today" link should be shown or not
     */
    showGoToToday?: boolean;
    /**
     * Whether the calendar should show the week number (weeks 1 to 53) before each week row
     * @defaultvalue false
     */
    showWeekNumbers?: boolean;
    /**
     * Localized strings to use in the Calendar
     */
    strings?: ICalendarStrings;
    /**
     * Custom navigation icons.
     */
    navigationIcons?: ICalendarNavigationIcons;
    /**
     * Apply additional formatting to dates, for example localized date formatting.
     */
    dateTimeFormatter?: IDateFormatting;
    /**
     * If set the Calendar will not allow navigation to or selection of a date earlier than this value.
     */
    minDate?: Date;
    /**
     * If set the Calendar will not allow navigation to or selection of a date later than this value.
     */
    maxDate?: Date;
    /**
     * If set the Calendar will not allow selection of dates in this array.
     */
    restrictedDates?: Date[];
    /**
     * Whether the calendar should show 6 weeks by default.
     * @defaultvalue false
     */
    showSixWeeksByDefault?: boolean;
    /**
     * The days that are selectable when `dateRangeType` is `WorkWeek`.
     * If `dateRangeType` is not `WorkWeek` this property does nothing.
     * @defaultvalue [Monday,Tuesday,Wednesday,Thursday,Friday]
     */
    workWeekDays?: DayOfWeek[];
    /**
     * Whether the month picker should highlight the current month
     * @defaultvalue false
     */
    highlightCurrentMonth?: boolean;
    /**
     * Whether the month picker should highlight the selected month
     * @defaultvalue false
     */
    highlightSelectedMonth?: boolean;
    /**
     * Whether the close button should be shown or not
     * @defaultvalue false
     */
    showCloseButton?: boolean;
    /**
     * Allows all dates and buttons to be focused, including disabled ones
     * @defaultvalue false
     */
    allFocusable?: boolean;
}
/**
 * {@docCategory Calendar}
 */
export interface ICalendarNavigationIcons {
    /**
     * FabricMDL2Icons name for the left navigation icon.  Previous default: ChevronLeft.
     * @defaultvalue  'Up'
     */
    leftNavigation?: string;
    /**
     * FabricMDL2Icons name for the right navigation icon.  Previous default: ChevronRight.
     * @defaultvalue  'Down'
     */
    rightNavigation?: string;
    /**
     * Close icon
     * @defaultvalue  'CalculatorMultiply'
     */
    closeIcon?: string;
}
/**
 * @deprecated Use `ICalendarNavigationIcons`
 */
export type ICalendarIconStrings = ICalendarNavigationIcons;
/**
 * @deprecated Use `IDateFormatting`
 */
export type ICalendarFormatDateCallbacks = IDateFormatting;
/**
 * {@docCategory Calendar}
 */
export interface ICalendarStyleProps {
    /**
     * Theme provided by higher-order component.
     */
    theme: ITheme;
    /**
     * Custom CSS class for the calendar.
     */
    className?: string;
    /**
     * Whether the month picker is visible
     */
    isMonthPickerVisible?: boolean;
    /**
     * Whether the day picker is visible
     */
    isDayPickerVisible?: boolean;
    /**
     * Whether only month picker is shown
     */
    monthPickerOnly?: boolean;
    /**
     * Whether the month picker is overlaid on the day picker
     */
    showMonthPickerAsOverlay?: boolean;
    /**
     * @deprecated Use `overlaidWithButton`
     */
    overlayedWithButton?: boolean;
    /**
     * Whether the month and day picker are overlaid and the 'go to today' button is shown
     */
    overlaidWithButton?: boolean;
    /**
     * Whether the go to today button is shown
     */
    showGoToToday?: boolean;
    /**
     * Whether the week numbers are shown
     */
    showWeekNumbers?: boolean;
}
/**
 * {@docCategory Calendar}
 */
export interface ICalendarStyles {
    /**
     * Style for the root element.
     */
    root: IStyle;
    divider: IStyle;
    goTodayButton: IStyle;
    monthPickerWrapper: IStyle;
    liveRegion: IStyle;
}
/**
 * {@docCategory Calendar}
 */
export declare enum AnimationDirection {
    /**
     * Grid will transition out and in horizontally
     */
    Horizontal = 0,
    /**
     * Grid will transition out and in vertically
     */
    Vertical = 1
}