About calendarcn

A beautifully crafted calendar component built with shadcn/ui and Tailwind CSS, inspired by Notion Calendar. Week view, dark mode, and more.

v

Published by

vmnog

Visit View Profile

README.md

View on GitHub

CalendarCN

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

CalendarCN Preview

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

Clone the repository:

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

Install dependencies:

pnpm install

Run the development server:

pnpm dev

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

calendarcn