DEV Community

Cover image for Next.js/Shadcn Scheduling Component with Cal.com v2 API
jQueryScript
jQueryScript

Posted on

Next.js/Shadcn Scheduling Component with Cal.com v2 API

BookingCalendar: Open-source Cal.com scheduling component for Next.js applications.

Key features:

🎨 shadcn/ui components with Tailwind v4 styling

🌍 Automatic timezone detection and manual selection

⚡ Prefetches monthly slots when widget enters viewport

🔄 In-session reschedule and cancel without page reload

📦 Zero npm packages - just copy the code

🔌 Direct Cal.com v2 API integration for all booking operations

The intersection observer loads availability data before users see the calendar. Switching days filters cached slots locally instead of hitting the API again.

Repo includes Next.js API routes, TypeScript throughout, and React Hook Form validation. Works with cloud or self-hosted Cal.com.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

Top comments (0)