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)