GoBrand Calendar — Temporal-first calendar engine

React Calendar manages the current date, active view, navigation, and calendar geometry. You render it with your own components and styles.

Start with one view and your events:

import type { Temporal } from '@js-temporal/polyfill'
import { useCreateCalendar } from '@gobrand/react-calendar'

type Event = {
  id: string
  title: string
  date: Temporal.PlainDate
}

function Calendar({ events }: { events: Event[] }) {
  const calendar = useCreateCalendar({
    views: { month: true },
    items: events,
    getDate: event => event.date,
  })

  return calendar.activeView.weeks.map(week => (
    <div key={week[0].id}>
      {week.map(day => (
        <div key={day.id}>
          {day.date.toString()}: {day.items.length} events
        </div>
      ))}
    </div>
  ))
}

Because only month is enabled, activeView is a month view. Add week or day when you need them.

Build your first calendar or open the complete month/week/day example.