CalendarCN

A beautifully crafted, open source calendar component for React. Built with shadcn/ui, inspired by Notion Calendar.

Live Demo

Features

• Week View - Full week calendar with time slots
• Dark Mode - Seamless light/dark theme support
• Event Colors - Multiple event color options (red, orange, yellow, green, blue, purple, gray)
• All-Day Events - Support for all-day and multi-day events
• Current Time Indicator - Visual indicator for current time
• Responsive Sidebar - Collapsible calendar sidebar with mini calendar
• Calendar Management - Multiple calendar support with visibility toggles
• Keyboard Shortcuts - Navigate efficiently with keyboard shortcuts

Tech Stack

• Next.js 16 - React framework
• React 19 - UI library
• Tailwind CSS 4 - Styling
• shadcn/ui - UI components
• date-fns - Date utilities
• Lucide React - Icons

Getting Started

Prerequisites

• Node.js 22+ (see .nvmrc)
• pnpm 9+

Installation

1. Clone the repository:

git clone https://github.com/vmnog/calendarcn.git
cd calendarcn

1. Install dependencies:

pnpm install

1. Run the development server:

pnpm dev

1. Open http://localhost:3000 in your browser.

Project Structure

src/
├── app/                    # Next.js app router
├── components/
│   ├── ui/                 # shadcn/ui components
│   ├── week-view.tsx       # Main week view component
│   ├── week-view-*.tsx     # Week view sub-components
│   ├── calendar-event-item.tsx  # Event rendering
│   ├── calendars.tsx       # Calendar list sidebar
│   ├── date-picker.tsx     # Mini calendar picker
│   └── sidebar-*.tsx       # Sidebar components
├── hooks/                  # Custom React hooks
└── lib/                    # Utilities and helpers

Keyboard Shortcuts

Shortcut	Action
T	Go to today
J / ArrowLeft	Previous week
K / ArrowRight	Next week
/	Toggle context panel
⌘ + /	Toggle calendar sidebar

Contributing

Contributions are welcome! Please read the Contributing Guide to get started.

Roadmap

See ROADMAP.md for the full roadmap.

License

MIT License - feel free to use this in your own projects!

Credits

• Design inspired by Notion Calendar
• Built with shadcn/ui components
• Created by Victor Nogueira

Links

• Live Demo
• Twitter/X