Shadcn NextJs OpenSource Calender
Been working on a productivity app for a while and needed a calendar. Tried a few existing ones, got frustrated, ended up building my own. It got big enough that I pulled it out into its own package.
It's called bahrawy-calendar. Month, week, and day views. Recurring events with actual RFC 5545 support (not some half-baked "repeat every week" thing). Drag and drop. Conflict detection. Google Calendar, Outlook, and Apple Calendar overlays where the OAuth flow is handled for you.
If you use shadcn, you can grab it in one command:
npx shadcn@latest add "https://raw.githubusercontent.com/bahrawyX/bahrawys-calender/main/registry/bahrawy-calendar.json"
That drops a styled component into your components/ui/ using your existing shadcn primitives. Or just npm install bahrawy-calendar if you want the headless version.
The thing I'm most happy with is the architecture. You can either use <BahrawyCalendar /> as a drop-in (renders everything, zero config) or use the provider + Zustand stores directly and build your own UI from scratch. Same stores, same logic, your layout.
Some stuff worth mentioning:
- Keyboard first. N = new event, T = today, M/W/D = switch views, arrows = navigate, Ctrl+Z = undo
- Persistence is an adapter pattern. Ships with localStorage, but you can swap in Supabase or whatever in like 10 lines
- Recurrence uses
rruleas an optional peer dep. If you don't need recurring events, you don't pay for it - TypeScript, tree-shakable, ESM + CJS
It's not perfect. The drag and drop could be smoother, and I want to add multi-day events that span across rows in month view. But it works, I use it daily in my own app, and I figured other people might find it useful too.
npm: https://www.npmjs.com/package/bahrawy-calendar
GitHub: https://github.com/bahrawyX/bahrawys-calender
Link: https://bahrawys-calender.vercel.app/
free to use
