Cal.com Calendar UI

Component 1

About

The popular Calendar UI replica from cal.com

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Cal.com Calendar UI to your project and fits it to your theme.

Code

How Cal.com Calendar UI is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import BookingCalendar from '@/components/ui/cal-com-calendar-ui';

export default function Demo() {
  return (
    <div className="min-h-screen p-8">
      <BookingCalendar
        userName="Alex Smith"
        eventTitle="Welcome Aboard: Volunteer Onboarding Session"
        eventDescription="Welcome to the Digital Storytelling for Kids Volunteer Program by Mobbin-Book! In this orientation, you'll learn all about our mission, how you can contribute, and the exciting ways we bring storytelling to life for children. Get ready to be part of a meaningful experience."
        durations={['1h', '1h 15m', '1h 20m']}
        locationOptions={2}
        timezone="America/Los Angeles"
        recurrence={{ interval: "week", count: 12 }}
      />
    </div>
  );
}