CalendarList
The records of the ambient <List> as events in a month, week or agenda view. The list is filtered to the visible range with <startSource>_gte and <startSource>_lte; with endSource set it is <startSource>_lte and <endSource>_gte, and a record with an empty end is left out. rangeFilter renames the keys, and perPage is 1000. Dates read as local time, and a date-only value is local midnight. onDrop is for the month view, uses native drag and drop, and does not work on touch screens.
Installation
pnpm dlx shadcn@latest add @chelone/calendar-listThe records of the ambient <List> as events in a month, week or agenda view. The list is filtered to the visible range with <startSource>_gte and <startSource>_lte; with endSource set it is <startSource>_lte and <endSource>_gte, and a record with an empty end is left out. rangeFilter renames the keys, and perPage is 1000. Dates read as local time, and a date-only value is local midnight. onDrop is for the month view, uses native drag and drop, and does not work on touch screens.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | — | |
| colorMap | Record<string, string> | — | Maps the value at `colorSource` to a CSS color. |
| colorSource | NoInfer<SourcePath<RecordType>> | — | |
| defaultView | CalendarView | — | The view shown first; the first of `views` when it is not among them. |
| endSource | NoInfer<SourcePath<RecordType>> | — | |
| eventRenderer | (props: EventRendererProps<RecordType>) => ReactNode | — | Replaces the coloured block inside each event button. |
| headerRenderer | (props: HeaderRendererProps) => ReactNode | — | Replaces the header. |
| linkType | string | false | — | Where an event links when `onSelectEvent` is unset: the edit page, else the show page. `false` makes it inert. |
| onDrop | (record: RecordType, range: CalendarDropRange) => void | Promise<void> | — | Makes month-view events draggable to another day. Called with the record and its moved ISO `start`, and `end` when the event had one; not called for a drop on the day it came from. The list is not updated here: save, and the list refetches. A rejection is left to the caller. Native drag and drop does not work on touch screens and has no keyboard form, so `onSelectEvent` stays the route to an edit form. |
| onSelectEvent | (record: RecordType) => void | — | |
| onSelectSlot | (slot: CalendarSlot) => void | — | An empty part of a day cell was clicked, or Enter or Space pressed on it. |
| perPage | number | — | Records fetched per range, so a month is not cut off at the list default. |
| rangeFilter | (range: CalendarRange) => Record<string, unknown> | — | The list filter for the visible range, for a provider that names its operators otherwise. Default: `<startSource>_gte` and `<startSource>_lte`, or with `endSource` set `<startSource>_lte` and `<endSource>_gte`, which also fetches an event that starts before the range. A record with an empty end is then left out, so such data needs a custom `rangeFilter`. |
| startSource | NoInfer<SourcePath<RecordType>> | — | The field holding an event's start; also the field the default range filter is keyed on. |
| titleSource | NoInfer<SourcePath<RecordType>> | — | The field holding an event's title; the record representation when unset or empty. |
| views | readonly CalendarView[] | — | The views offered; the switcher is hidden while one remains. |
| weekStartsOn | CalendarWeekStart | — | 0 is Sunday. |