useCalendarView
Put events into one view from a shared calendar controller.
useCalendarView reads the controller from CalendarProvider unless you pass calendar directly. TypeScript infers the item type from items.
import type { Temporal } from '@js-temporal/polyfill'
import { useCalendarView } from '@gobrand/react-calendar'
type Event = {
id: string
title: string
startsAt: Temporal.ZonedDateTime
}
function WeekContent({ events }: { events: Event[] }) {
const week = useCalendarView({
view: 'week',
items: events,
getDate: event => event.startsAt.toPlainDate(),
getStart: event => event.startsAt,
})
return week.days.map(day => (
<div key={day.id}>
{day.date.toString()}: {day.items.map(event => event.title).join(', ')}
</div>
))
}getDate is required when you pass items. getStart is optional. Add it when events should appear in timed slots.