GoBrand Calendar

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.