CalendarProvider

import {
  CalendarProvider,
  useCalendar,
  useCreateCalendar,
} from '@gobrand/react-calendar'

function Calendar() {
  const calendar = useCreateCalendar({ views: { month: true } })

  return (
    <CalendarProvider calendar={calendar}>
      <Controls />
      <VisibleRange />
    </CalendarProvider>
  )
}

function Controls() {
  const calendar = useCalendar()

  return (
    <nav>
      <button onClick={calendar.previous}>Previous</button>
      <strong>{calendar.title()}</strong>
      <button onClick={calendar.next}>Next</button>
    </nav>
  )
}

function VisibleRange() {
  const { visibleRange } = useCalendar()

  return <p>{visibleRange.start.toString()} – {visibleRange.end.toString()}</p>
}