Components
Loading preview...
The CalendarPlanner component is a modern, monochrome-styled calendar built for clarity and utility. Designed to display two months side by side, it offers a clean black-and-white aesthetic that adapts seamlessly to both dark and light themes. Unlike traditional calendars, CalendarPlanner provides an additional layer of context by allowing short notes or event details to appear directly under each date, making it ideal for planning schedules, tracking tasks, or highlighting availability. With its toggleable year-grid view, users can easily jump across years without endless navigation. Minimal yet functional, CalendarPlanner is perfect for dashboards, booking systems, or productivity tools where both elegance and information density are essential.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/calendar-planner"use client"
import * as React from "react"
import { CalendarPlanner } from "@/components/ui/calendar-planner"
import { format } from "date-fns"
export default function CalendarPlannerDemo() {
const [selected, setSelected] = React.useState<Date | undefined>()
// Mock info per date (e.g. events, availability, etc.)
const mockInfo: Record<string, string> = {}
for (let i = 0; i < 30; i++) {
const d = new Date()
d.setDate(d.getDate() + i)
const dateKey = format(d, "yyyy-MM-dd")
mockInfo[dateKey] = i % 2 === 0 ? " Event" : "—"
}
return (
<div className="p-4 space-y-6">
<CalendarPlanner
value={selected}
onChange={setSelected}
info={mockInfo}
yearRange={[1995, 2035]}
/>
{selected && (
<p className="text-sm text-muted-foreground">
Selected: {selected.toDateString()}
</p>
)}
</div>
)
}