z-cal

    Views and navigation

    The smallest useful calendar: register the view plugins you need, describe the toolbar, and pass an array of events. Date-only strings make all-day events; date-time strings make timed ones.

    Basic.tsx
    Basic.tsx
    import { Calendar, DayGrid, List, TimeGrid, type EventInput } from 'z-cal/react'
import type { JSX } from 'react'
import { useScheme } from '../DemoFrame'
import { today, todayDate } from '../shared/dates'

// Plugins register views. Only the views you import ship in your bundle.
const PLUGINS = [DayGrid, TimeGrid, List]

const HEADER_TOOLBAR = {
  start: 'title',
  center: '',
  end: 'today prev,next dayGridMonth,timeGridWeek,timeGridDay,listWeek',
}

// Plain ISO strings: a date-only start is an all-day event, a date-time is a timed one.
const EVENTS: EventInput[] = [
  { id: 1, title: 'Team sync', start: today(0, 10), end: today(0, 11) },
  { id: 2, title: 'Conference', start: todayDate(1), end: todayDate(4) },
  { id: 3, title: 'Deadline', start: todayDate(-3), color: 'oklch(65% 0.2 30)' },
  { id: 4, title: 'Workshop', start: today(0, 13), end: today(0, 15) },
  { id: 5, title: 'Yoga', start: today(2, 7), end: today(2, 8), color: 'oklch(60% 0.15 150)' },
  { id: 6, title: 'Design review', start: today(-1, 16), end: today(-1, 17) },
]

export function BasicDemo(): JSX.Element {
  return (
    <div className="card">
      <Calendar
        plugins={PLUGINS}
        view="dayGridMonth"
        colorScheme={useScheme()}
        headerToolbar={HEADER_TOOLBAR}
        buttonText={{ listWeek: 'list' }}
        events={EVENTS}
        nowIndicator
        scrollTime="08:00"
        height="640px"
      />
    </div>
  )
}

    What to look at

    • The toolbar is declared with headerToolbar. Each slot is a space-separated list of button names; commas group buttons together. See Configuration.
    • nowIndicator draws the current time line in timed views, and scrollTime sets the initial scroll.
    • buttonText renames buttons. The core labels every week-length view "week", so the list view is relabeled here.