DEVELOPER REFERENCE · v4.0.0

TimeGrid API

Props, callbacks and methods. Select an underlined type to explore its fields, allowed values and callback arguments.

TimeGrid10 props5 callbacks0 methods

TimeGrid props
Name	Type	Description
`disabled`Optional	`boolean \| undefined`	Disables user interaction with the control.
`days`Required	`readonly TimeGridDayLabel[]`Inspect type	Weekday labels and identifiers displayed by the time grid.
`cells`Required	`ReadonlySet<string>`Inspect type	Keys of the currently selected time-grid cells.
`focused`Required	`string`	Marks the item or date that currently has keyboard focus.
`weekendDays`Required	`readonly number[]`Inspect type	Weekday numbers that should use the weekend presentation.
`workingHours`Optional	`TimeGridWorkingHours \| undefined`Inspect type	Working-time boundaries used to distinguish working and non-working cells.
`gridLabel`Required	`string`	Accessible name for the time-grid matrix.
`hourLabel`Required	`(hour: number) => string`Inspect type	Formats the label for an hour row.
`cellLabel`Required	`(day: TimeGridDayLabel, start: string, end: string, selected: boolean) => string`Inspect type	Returns the accessible label for a day/time cell and its selected state.
`matrixRef`Required	`RefObject<HTMLDivElement>`Inspect type	Reference to the time-grid container.

TimeGrid events and callbacks
Name	Type	Description
`onFocus`Required	`(key: string) => void`Inspect type	Called when focus moves to an item or control; the signature identifies the focused value.
`onKeyDown`Required	`(event: h.JSX.TargetedKeyboardEvent<HTMLButtonElement>, weekday: number, hour: number) => void`Inspect type	Handles keyboard input; receives the keyboard event and any item/date context shown in the signature.
`onClick`Required	`(event: h.JSX.TargetedMouseEvent<HTMLButtonElement>, weekday: number, hour: number, selected: boolean) => void`Inspect type	Handles activation of the control; receives the event and any component-specific context.
`onPointerDown`Required	`(event: h.JSX.TargetedPointerEvent<HTMLButtonElement>, weekday: number, hour: number, selected: boolean) => void`Inspect type	Starts a pointer interaction on the supplied time-grid cell.
`onPointerEnter`Required	`(weekday: number, hour: number) => void`Inspect type	Extends a pointer interaction to the supplied day/hour cell.

No component-specific imperative methods. Use props and callbacks to control this component.