Components
Loading preview...
A fully responsive appointment booking component with calendar view, time slot selection, and timezone support. Features smooth animations, 12h/24h time format toggle, and a modern dark theme perfect for scheduling meetings and consultations.
@vaib215
npx shadcn@latest add https://21st.dev/r/vaib215/appointment-schedulerimport { AppointmentScheduler } from "@/components/ui/appointment-scheduler"
export default function AppointmentSchedulerDemo() {
const now = new Date()
const currentMonth = now.getMonth()
const currentYear = now.getFullYear()
// Get dates for the current month that have availability
const availableDates = [
{ date: 14, hasSlots: true },
{ date: 15, hasSlots: true },
{ date: 20, hasSlots: true },
{ date: 21, hasSlots: true },
{ date: 22, hasSlots: true },
{ date: 23, hasSlots: true },
{ date: 27, hasSlots: true },
{ date: 28, hasSlots: true },
{ date: 29, hasSlots: true },
{ date: 30, hasSlots: true },
]
const timeSlots = [
{ time: "09:00", available: true },
{ time: "09:15", available: true },
{ time: "09:30", available: true },
{ time: "09:45", available: true },
{ time: "10:00", available: true },
{ time: "10:15", available: true },
{ time: "10:30", available: true },
{ time: "10:45", available: true },
{ time: "11:00", available: true },
{ time: "11:15", available: true },
{ time: "11:30", available: true },
{ time: "11:45", available: true },
{ time: "13:00", available: true },
{ time: "13:15", available: true },
{ time: "13:30", available: true },
{ time: "13:45", available: true },
{ time: "14:00", available: true },
{ time: "14:15", available: true },
{ time: "14:30", available: true },
{ time: "14:45", available: true },
{ time: "15:00", available: true },
{ time: "15:15", available: true },
{ time: "15:30", available: true },
{ time: "15:45", available: true },
{ time: "16:00", available: true },
{ time: "16:15", available: true },
{ time: "16:30", available: true },
{ time: "16:45", available: true },
{ time: "17:00", available: true },
{ time: "17:15", available: true },
{ time: "17:30", available: true },
{ time: "17:45", available: true },
]
return (
<div className="min-h-screen bg-background flex items-center justify-center p-8">
<AppointmentScheduler
userName="Jane Smith"
userAvatar="https://api.dicebear.com/7.x/avataaars/svg?seed=Jane"
meetingTitle="15 Min Meeting"
meetingType="Cal Video"
duration="15 Minutes"
timezone="America/Los_Angeles"
availableDates={availableDates}
timeSlots={timeSlots}
onDateSelect={(date) => console.log("Selected date:", date)}
onTimeSelect={(time) => console.log("Selected time:", time)}
onTimezoneChange={(tz) => console.log("Timezone clicked:", tz)}
brandName="Cal.com"
/>
</div>
)
}