Calendar

Ready

Part of Calendar & Scheduling collection

Interactive Preview

Full-featured calendar with month, week, and day views. Click events to see details.

December 2025

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

Features

  • Three view modes: Month, Week, and Day
  • Five semantic event colors (default, success, warning, danger, info)
  • Interactive event click handlers
  • Navigation controls (Previous, Next, Today)
  • Scrollable day and week views
  • Responsive design with proper spacing
  • Full TypeScript support

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

Installation

Import the Calendar component and CalendarEvent type:

// Import the component
import { Calendar, type CalendarEvent } from '@/components/ui/calendar'

Usage Example

// Define your events
const events: CalendarEvent[] = [
  {
    id: '1',
    title: 'Team Meeting',
    date: new Date(2025, 11, 5, 10, 0),
    color: 'default',
    hour: '10:00 AM'
  },
  // ... more events
]

// Render the calendar
<Calendar
  events={events}
  onEventClick={(event) => console.log(event)}
/>

API Reference

Calendar Props

PropTypeDefaultDescription
eventsCalendarEvent[][]Array of events to display
onEventClick(event) => void-Callback when event is clicked
classNamestring-Additional CSS classes

CalendarEvent Type

PropertyTypeRequiredDescription
idstringYesUnique event identifier
titlestringYesEvent title/name
dateDateYesEvent date and time
color'default' | 'success' | 'warning' | 'danger' | 'info'NoEvent color category
hourstringNoDisplay time (e.g., "10:00 AM")