Kaapi UI
Back to Design System

Calendars

A fully-featured calendar component with month, week, and day views. Built with React state management and supports event display, navigation, and responsive layouts.

Basic Usage

The calendar comes with three view modes: month, week, and day. Users can navigate between dates and select events to view details.

JAN
10

January2025

Week 2

Jan 1, 2025 – Jan 31, 2025

Mon
Tue
Wed
Thu
Fri
Sat
Sun
30
31
1
2
3
4
5
6
Monday standup
7
Coffee with Alina
One-on-one with Eva
Catch up w/ Alex
8
Marketing site design
Deep work
Design sync
9
Lunch with Olivia
10
Product demo
Friday standup
Olivia x Riley
11
12
13
One-on-one with Sienna
Team lunch
14
15
16
All-hands meeting
Dinner with Caitlyn
House inspection
17
Coffee w/ Amélie
Design feedback session
18
Half marathon 🏃
19
20
Content planning
21
Quarterly review
Lunch with Zahir
22
23
24
Accountant
25
26
27
28
29
30
31
1
2
import { Calendars } from "@/components/ui/calendar";

<Calendars />

Component Props

The current implementation uses internal state. Here are the key internal state variables that could be exposed as props:

PropTypeDefaultDescription
eventsCalendarEvent[][]Array of events to display
defaultView?"month" | "week" | "day""month"Initial view mode
defaultDate?Datenew Date()Initial selected date
today?Datenew Date()Date to highlight as "today"
onEventClick?(event: CalendarEvent) => void—Callback when an event is clicked
onDateClick?(date: Date) => void—Callback when a date is clicked
onAddEvent?() => void—Callback when "Add event" button is clicked
className?string—Additional CSS classes for the container

Event Data Structure

Events follow a specific interface with support for various metadata:

interface CalendarEvent {
    id: string;                    // Unique identifier
    title: string;                 // Event title
    time: string;                  // Start time (e.g., "9:00 AM")
    endTime?: string;              // Optional end time
    color: EventColor;             // Theme color
    hasDot?: boolean;              // Show decorative dot
    description?: string;          // Event description
    guests?: number;               // Number of guests
    location?: string;             // Event location
    startDate: Date;               // Event date
}

type EventColor = 
    | "gray" | "brand" | "blue" | "pink" 
    | "orange" | "green" | "yellow" | "indigo" | "purple";

Example event array:

const events: CalendarEvent[] = [
    {
        id: "1",
        title: "Team standup",
        time: "9:00 AM",
        color: "gray",
        description: "Daily sync meeting",
        startDate: new Date(2025, 0, 20),
    },
    {
        id: "2",
        title: "Product demo",
        time: "2:00 PM",
        endTime: "3:30 PM",
        color: "indigo",
        guests: 12,
        location: "Conference Room A",
        startDate: new Date(2025, 0, 20),
    },
];