# Calendar Planner

> 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.

- Author: [Ruixen UI](https://21st.dev/@ruixen.ui)
- Library: [Ruixen UI](https://21st.dev/@ruixen.ui/library/ruixen-ui)
- License: unknown
- npm dependencies: date-fns, lucide-react
- Live preview: https://21st.dev/@ruixen.ui/components/calendar-planner

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/ruixen.ui/calendar-planner?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt