@fluentui/react/lib-commonjs/components/CalendarDayGrid/CalendarDayGrid.types.d.ts

import { AnimationDirection } from '../Calendar/Calendar.types';
import { DayOfWeek, FirstWeekOfYear, DateRangeType } from '@fluentui/date-time-utilities';
import type { IBaseProps, IRefObject, IStyleFunctionOrObject } from '@fluentui/utilities';
import type { ICalendarStrings, IDateFormatting, IDayGridOptions } from '@fluentui/date-time-utilities';
import type { IStyle, ITheme, IProcessedStyleSet } from '@fluentui/style-utilities';
/**
 * {@docCategory Calendar}
 */
export interface ICalendarDayGrid {
    focus(): void;
}
/**
 * {@docCategory Calendar}
 */
export interface ICalendarDayGridProps extends IDayGridOptions, IBaseProps<ICalendarDayGrid> {
    /**
     * Optional callback to access the ICalendarDayGrid interface. Use this instead of ref for accessing
     * the public methods and properties of the component.
     */
    componentRef?: IRefObject<ICalendarDayGrid>;
    /**
     * Customized styles for the component.
     */
    styles?: IStyleFunctionOrObject<ICalendarDayGridStyleProps, ICalendarDayGridStyles>;
    /**
     * Theme (provided through customization).
     */
    theme?: ITheme;
    /**
     * Additional CSS class(es) to apply to the CalendarDayGrid.
     */
    className?: string;
    /**
     * Localized strings to use in the CalendarDayGrid
     */
    strings: ICalendarStrings;
    /**
     * The currently selected date
     */
    selectedDate: Date;
    /**
     * The currently navigated date
     */
    navigatedDate: Date;
    /**
     * Callback issued 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 issued when a date in the calendar is navigated
     * @param date - The date that is navigated to
     * @param focusOnNavigatedDay - Whether to set the focus to the navigated date.
     */
    onNavigateDate: (date: Date, focusOnNavigatedDay: boolean) => void;
    /**
     * Callback issued when calendar day is closed
     */
    onDismiss?: () => void;
    /**
     * The first day of the week for your locale.
     * @defaultvalue DayOfWeek.Sunday
     */
    firstDayOfWeek: DayOfWeek;
    /**
     * Defines when the first week of the year should start, FirstWeekOfYear.FirstDay,
     * FirstWeekOfYear.FirstFullWeek or FirstWeekOfYear.FirstFourDayWeek are the possible values
     * @defaultvalue FirstWeekOfYear.FirstDay
     */
    firstWeekOfYear: FirstWeekOfYear;
    /**
     * The date range type indicating how  many days should be selected as the user
     * selects days
     * @defaultValue DateRangeType.Day
     */
    dateRangeType: DateRangeType;
    /**
     * The number of days to select while dateRangeType === DateRangeType.Day. Used in order to have multi-day
     * views.
     * @defaultValue 1
     */
    daysToSelectInDayView?: number;
    /**
     * Value of today. If unspecified, current time in client machine will be used.
     */
    today?: Date;
    /**
     * Whether the calendar should show the week number (weeks 1 to 53) before each week row
     * @defaultvalue false
     */
    showWeekNumbers?: boolean;
    /**
     * Apply additional formatting to dates, for example localized date formatting.
     */
    dateTimeFormatter: IDateFormatting;
    /**
     * Ref callback for individual days. Allows for customization of the styling, properties, or listeners of the
     * specific day.
     */
    customDayCellRef?: (element: HTMLElement, date: Date, classNames: IProcessedStyleSet<ICalendarDayGridStyles>) => void;
    /**
     * How many weeks to show by default. If not provided, will show enough weeks to display the current
     * month, between 4 and 6 depending
     * @defaultvalue undefined
     */
    weeksToShow?: number;
    /**
     * 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[];
    /**
     * 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 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;
    /**
     * The ID of the control that labels this one
     */
    labelledBy?: string;
    /**
     * Whether to show days outside the selected month with lighter styles
     * @defaultvalue true
     */
    lightenDaysOutsideNavigatedMonth?: boolean;
    /**
     * The cardinal directions for animation to occur during transitions, either horizontal or veritcal
     */
    animationDirection?: AnimationDirection;
    /**
     * Optional callback function to mark specific days with a small symbol. Fires when the date range changes,
     * gives the starting and ending displayed dates and expects the list of which days in between should be
     * marked.
     */
    getMarkedDays?: (startingDate: Date, endingDate: Date) => Date[];
}
/**
 * {@docCategory Calendar}
 */
export interface ICalendarDayGridStyleProps {
    /**
     * Theme provided by High-Order Component.
     */
    theme: ITheme;
    /**
     * Accept custom classNames
     */
    className?: string;
    /**
     * The date range type
     */
    dateRangeType?: DateRangeType;
    /**
     * Whether week numbers are being shown
     */
    showWeekNumbers?: boolean;
    /**
     * Whether to show days outside the selected month with lighter styles
     */
    lightenDaysOutsideNavigatedMonth?: boolean;
    /**
     * Whether grid entering animation should be forwards or backwards
     */
    animateBackwards?: boolean;
    /**
     * The cardinal directions for animation to occur during transitions, either horizontal or vertical
     */
    animationDirection?: AnimationDirection;
}
/**
 * {@docCategory Calendar}
 */
export interface ICalendarDayGridStyles {
    /**
     * The style for the root div
     */
    wrapper?: IStyle;
    /**
     * The style for the table containing the grid
     */
    table?: IStyle;
    /**
     * The style to apply to the grid cells for days
     */
    dayCell?: IStyle;
    /**
     * The style to apply to grid cells for days in the selected range
     */
    daySelected?: IStyle;
    /**
     * The style to apply to row around weeks
     */
    weekRow?: IStyle;
    /**
     * The style to apply to the column headers above the weeks
     */
    weekDayLabelCell?: IStyle;
    /**
     * The style to apply to grid cells for week numbers
     */
    weekNumberCell?: IStyle;
    /**
     * The style to apply to individual days that are outside the min/max date range
     */
    dayOutsideBounds?: IStyle;
    /**
     * The style to apply to individual days that are outside the current month
     */
    dayOutsideNavigatedMonth?: IStyle;
    /**
     * The style to apply to the button element within the day cells
     */
    dayButton?: IStyle;
    /**
     * The style to apply to the individual button element that matches the "today" parameter
     */
    dayIsToday?: IStyle;
    /**
     * The style applied to the first placeholder week used during transitions
     */
    firstTransitionWeek?: IStyle;
    /**
     * The style applied to the last placeholder week used during transitions
     */
    lastTransitionWeek?: IStyle;
    /**
     * The style applied to the marker on days to mark as important
     */
    dayMarker?: IStyle;
    /**
     * The styles to apply to days for rounded corners. Can apply multiple to round multiple corners
     */
    topRightCornerDate?: IStyle;
    topLeftCornerDate?: IStyle;
    bottomRightCornerDate?: IStyle;
    bottomLeftCornerDate?: IStyle;
    /**
     * The styles to apply to days for focus borders. Can apply multiple if there are multiple focused days
     * around the current focused date
     */
    datesAbove?: IStyle;
    datesBelow?: IStyle;
    datesLeft?: IStyle;
    datesRight?: IStyle;
}