Calendar

Data Display
Navigation

Full-featured calendar with month, week, and day views for event management.

Preview

Interactive calendar with multiple view modes

March 2026

Sun
Mon
Tue
Wed
Thu
Fri
Sat
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11

Event Colors

Five semantic color options for categorizing events

defaultStandard events
successCompleted or positive events
warningImportant or pending events
dangerCritical or overdue events
infoInformational events

Props

Component API reference

Calendar

PropTypeDefaultDescription
eventsCalendarEvent[][]Array of events to display
onEventClick(event: CalendarEvent) => voidCallback when event is clicked
classNamestringAdditional CSS classes

CalendarEvent

PropTypeDefaultDescription
id*stringUnique event identifier
title*stringEvent title/name
date*DateEvent date and time
color'default' | 'success' | 'warning' | 'danger' | 'info''default'Event color category
hournumberHour of day for the event

Usage

Import and implementation examples

import { Calendar, type CalendarEvent } from '@/components/ui/calendar'
import { useState } from 'react'

export default function MyComponent() {
  const [selectedEvent, setSelectedEvent] = useState<CalendarEvent | null>(null)

  const events: CalendarEvent[] = [
    {
      id: '1',
      title: 'Team Meeting',
      date: new Date(2025, 11, 5, 10, 0),
      color: 'default',
      hour: 10
    },
    {
      id: '2',
      title: 'Product Launch',
      date: new Date(2025, 11, 10, 14, 0),
      color: 'success',
      hour: 14
    },
  ]

  return (
    <Calendar
      events={events}
      onEventClick={(event) => setSelectedEvent(event)}
    />
  )
}

Features

Built-in functionality

  • Three view modes: Month, week, and day views
  • Five event colors: Default, success, warning, danger, info
  • Interactive events: Click handlers for event selection
  • Navigation controls: Previous, next, and today buttons
  • Scrollable views: Scrollable day and week views
  • Responsive design: Adapts to container width
  • Dark mode: Full dark mode support

Accessibility

Accessibility considerations

ARIA Attributes

role="grid" for calendar gridaria-label for navigation buttonsaria-selected for current date

Keyboard Navigation

KeyAction
Arrow keysNavigate between dates
EnterSelect date or event
TabNavigate between controls

Notes

  • Screen readers announce date and event information
  • Keyboard navigation through calendar grid
  • Focus indicators on interactive elements