Calendar View React component for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Calendar View is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans

Usage

Import CalendarView from @/components/ui/calendar-view.

import { useState } from "react"
import { Plus } from "lucide-react"
import { Button } from "@/components/ui/button"
import { CalendarView, type CalendarEvent } from "@/components/ui/calendar-view"

const appointments: CalendarEvent[] = [
  { id: "p1", title: "Consultation: Emma Carter", start: new Date(2026, 8, 24, 9, 0), end: new Date(2026, 8, 24, 10, 0), tone: "info", location: "Room 1" },
  { id: "p2", title: "Cleaning: Irene Vance", start: new Date(2026, 8, 24, 11, 30), end: new Date(2026, 8, 24, 12, 30), tone: "success" },
  { id: "p3", title: "Supplies delivery (UPS)", start: new Date(2026, 8, 24), end: new Date(2026, 8, 24), allDay: true },
]

export function Appointments() {
  const [events, setEvents] = useState(appointments)
  return (
    <CalendarView
      events={events}
      defaultDate={new Date(2026, 8, 24)}
      editable
      onEventChange={(event, change) =>
        setEvents((list) => list.map((e) => (e.id === event.id ? { ...e, ...change } : e)))
      }
      toolbarActions={<Button size="sm" leftIcon={<Plus />}>New appointment</Button>}
      labels={{
        more: (n) => `${n} more`,
        noEvents: "No appointments",
      }}
    />
  )
}

Props

• eventsdefault "[]"
  CalendarEvent[]

  The events: { id, title, start: Date, end: Date, allDay?, tone?, color?, location?, description?, attendees?: { name, avatar? }[], editable?, meta? }. An all-day event ending at local midnight ends the day before; an end at or before the start reads as 30 minutes (with a dev warning). Events crossing midnight show a block per day; multi-day events span the month cells as one bar per week.

• defaultViewdefault "month"
  "month" | "week" | "day" | "agenda"

  The view it opens in. Control it with view and onViewChange.

• view
  "month" | "week" | "day" | "agenda"

  The current view (controlled); pair it with onViewChange.

• onViewChange
  (view: CalendarViewMode) => void

  Fires when the switch, a day number or a week column heading changes the view.

• viewsdefault "["month", "week", "day", "agenda"]"
  CalendarViewMode[]

  The views in the switch, in this order. A single view hides the switch.

• defaultDate
  Date

  The focused date it opens on. Without it the server renders the first event's day and the browser moves to today after mount (no hydration mismatch).

• date
  Date

  The focused date (controlled); pair it with onDateChange.

• onDateChange
  (date: Date) => void

  Fires on prev / next / Today, on arrow keys in the month and when a day is picked.

• mobileViewdefault "agenda"
  "agenda" | "day" | "month"

  What phones get instead of month and week (a container query: whenever the calendar is narrower than 576px, so a narrow side panel gets it too; both layouts are in the server HTML): the agenda of that month or week, the focused day, or a compact month with dots and the chosen day's events listed underneath. The phone switch only offers views that make sense there.

• layoutdefault "responsive"
  "responsive" | "desktop" | "mobile"

  responsive switches to the phone layout when the calendar itself is narrower than 576px; desktop and mobile force one layout, e.g. a phone frame on a wide screen.

• variantdefault "surface"
  "surface" | "outline" | "plain"

  surface: a raised panel. outline: a hairline border on the page. plain: no container, for a page that is only the calendar.

• tonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  The tone of events without their own tone or color: chips, blocks, agenda bars and dots.

• weekStartsOndefault -1
  0 | 1 | 2 | 3 | 4 | 5 | 6 | -1

  The first day of the week: 0 is Sunday, 1 Monday ... 6 Saturday; -1 follows the locale (Sunday in en-US, Monday in de-DE).

• dayStartHourdefault 0
  number

  The first hour of the week and day grids.

• dayEndHourdefault 24
  number

  The hour the week and day grids end at (at least one hour after dayStartHour).

• scrollToHourdefault 8
  number

  Where the week and day grids open. Moving to another week keeps the scroll position you left.

• slotMinutesdefault "30"
  15 | 30 | 60

  The snap for creating, moving and resizing events. Half-hour lines are dashed whenever the slot is under an hour.

• hourHeightdefault 48
  number

  Pixels per hour in the week and day grids. Touch screens get at least 56px so short events stay tappable.

• heightdefault 600
  number

  Height of the scrolling week / day grid and the most the agenda grows to before it scrolls, in px.

• maxEventsPerDaydefault 3
  number

  Chips per month cell before the last line turns into "+N more", which lists the day in a popover (a sheet on phones).

• showWeekNumbersdefault false
  boolean

  ISO week numbers in a narrow column at the start of each month row.

• showNowIndicatordefault true
  boolean

  A red line with a dot at the current time in today's column of the week and day grids; it moves once a minute.

• hideWeekendsdefault false
  boolean

  The week view shows the five working days of the locale.

• editabledefault false
  boolean

  Drag events to move them and drag their bottom edge to resize, with a mouse or pen, snapped to slotMinutes. Events can opt out with editable: false. Off on touch screens, where dragging would fight scrolling.

• onEventChange
  (event: CalendarEvent, change: CalendarEventChange) => (false | void)

  After a move or resize. The change shows at once; return false to put the event back. Update your events with the new times.

• onEventClick
  (event: CalendarEvent, domEvent: MouseEvent<HTMLElement>) => void

  Every click on an event. Call domEvent.preventDefault() to skip the built-in details (open your own drawer instead).

• showEventDetailsdefault true
  boolean

  The built-in details on click: a popover next to the event, a bottom sheet on phones.

• renderEventDetails
  (event: CalendarEvent) => ReactNode

  Replaces the default details (title, time, location, description, attendees, meta) inside the popover or sheet.

• openEventId
  string | null

  The event whose details are open (controlled), e.g. to open a new event right after onSlotSelect adds it.

• defaultOpenEventIddefault ""
  string | null

  The event whose details are open at first. In the playground try c26 (Implant follow-up on the 24th).

• onOpenEventIdChange
  (id: string | null) => void

  Fires when details open or close.

• onSlotSelect
  (slot: { start: Date; end: Date; allDay: boolean }) => void

  Makes empty time selectable: click a slot for an hour, or drag down the grid (desktop) with a ghost "New event" showing the range; in the month click a day or drag across days for all-day ranges. Tap on touch.

• renderEvent
  (event: CalendarEvent, info: { view: CalendarViewMode }) => ReactNode

  Replaces the content of chips and blocks; the button, position, tone and drag stay.

• toolbardefault true
  boolean

  The title, prev / Today / next and the view switch.

• toolbarActions
  ReactNode

  Buttons at the end of the toolbar, like "New appointment".

• loadingdefault false
  boolean

  A thin indeterminate bar under the toolbar while events refresh; the current events stay.

• emptyAgenda
  ReactNode

  Shown when the agenda range has no events. Defaults to a small EmptyState with labels.noEvents.

• agendaDaysdefault 14
  number

  How many days the agenda view lists from the focused date; prev / next move by that many.

• localedefault ""
  string

  Month and weekday names, times (09:30 or 9:30 AM) and the first day of the week. Empty uses UIProvider, then the page language.

• labels
  Partial<CalendarViewLabels>

  Every string, English by default: today, previous, next, month, week, day, agenda, allDay, more(n), noEvents, newEvent, weekNumber, eventTime(start, end), eventCount(n), views, loading, drag { start, end, cancel }, details { location, attendees, close, title }. DEFAULT_CALENDAR_VIEW_LABELS has them all.

• classNames
  Partial<Record<"toolbar" | "title" | "nav" | "switch" | "actions" | "body" | "month" | "weekdays" | "day" | "week" | "event" | "more" | "weekHeader" | "allDay" | "scroll" | "gutter" | "grid" | "now" | "agenda" | "agendaDay" | "agendaEvent" | "details", string>>

  Extra classes for the inner parts.

• children
  ReactNode

  Custom composition: the parts below in place of the built-in toolbar and body, sharing the calendar's state.

Parts

FAQ

Used in

More React data display components