NEW
Cal.com × Framer · fully designable
Custom Cal.com booking calender for
your brand.
Cal UI is a Cal.com booker you design yourself. Real availability, real bookings, every pixel on your terms — straight from Framer’s property panel.
Plays nicely with the tools you already use
Why Cal UI
Everything a booker needs. Nothing it doesn’t.
Cal.com does the scheduling. Cal UI makes it look like it belongs on your site.
Paste, publish, done
Drop it on any page, add your Cal.com username and event, hit publish. That’s the whole setup.
Designed by you
Light or dark, any accent gradient, your fonts, radii and spacing — all from the property panel.
Real availability
Open days and times stream in live from your Cal.com event, in each visitor’s own time zone.
Time zones & 12/24h
Visitors switch time zone and clock format in one tap. Slots update instantly.
Add to calendar
A proper success screen with Google, Apple and Outlook links, plus reschedule or cancel.
Motion built in
A sliding selection, springy time picker and smooth step transitions. Respects reduced motion.
Design freedom
Your brand, not Cal’s.
Every color, font, corner and label is a control in Framer’s property panel. Same component, endless looks — this one runs hot pink on dark.
Light & dark themes
Accent gradients
Your fonts
Radius & spacing
Tiles or minimal days
12h / 24h clock
Visitor time zones
Custom button labels
Examples
Three looks. One component.
Every example below is the same Cal UI with different settings — live, with real availability. Tap through them.
Paper
Ocean
Sunset
Paper — ink on warm white, Fraunces serif titles, minimal days, tight corners.
Setup
Live in three steps.
01
Drop it into Framer
Paste the component URL into any Framer page — it lands like any other component.
02
Point it at Cal.com
Type your Cal.com username and event slug. Availability shows up instantly.
03
Style it, then publish
Pick a theme and accents, hit publish. No embeds, no iframes.
Ship a booking page people actually enjoy.
Copy the component URL, paste it into Framer, and point it at your Cal.com event.