State
The state useCalendarSelector reads.
useCalendarSelector selects from this state. Annotate the selector's parameter to get your views' types.
| Field | Type | Description |
|---|---|---|
context | Calendar_ViewContext | view, kind, date, range, period and inputRange of the current view. |
layout | Calendar_Layout | The render model for the active view; switch on layout.kind. |
now | Temporal.ZonedDateTime | The clock's current time in timeZone. |
Registered features add their state slices next to these.
dateSelectionFeature adds selectedRange: Calendar_Selection | null. Control it with state and
onSelectionChange, or provide an external atoms.selectedRange store. Transient editing state is separate:
calendar.api.interactions.store.state contains the session, candidate, outcome and preview. Draft changes do not
rebuild the base layout. See interaction ownership.
layout is typed as the union of the layouts your views use, so only those cases need handling. Each layout's model is
documented with its view:
layout.kind | Model |
|---|---|
'dayGrid' | Day grid view |
'timeGrid' | Week and day view, resource view |
'list' | List view |
'timeline' | Timeline view |
Every item in a model has a key that is stable across derivations within its parent, for use as a list key.
Types
Calendar_StateOf<typeof calendar> is the state type of an instance. Where the instance is not in scope, build it from
your views: Calendar_State<TData, TResourceData, typeof views>.
// the context erases the instance's types; annotate selectors with this to get them back
export type State = Calendar_State<Booking, Room, typeof views>;