Cal.com logo®
NewCal.com launches 4.0

Build your pixel-perfect booking experience

Seamlessly integrate scheduling into your app with customizable UI components powered by the battle-tested Cal.com infrastructure.

Contact Sales
Explore the docs

The atoms

Customizable components for any scheduling workflow

Use our developer suite of atomic UI components to connect to various calendars, set availabilities, collect guest information and schedule appointments.

Booking calendar

Beautiful booking calendar with 3 view options (monthly, weekly, column).

Booking calendar

Availability

Set repeating schedules for the times of the day and week that you want people to be able to book.

Availability

Connect to Google Calendar

Reads your availability from Google Calendars ensuring you never get double booked.

Connect to Google Calendar

Booking form

Completely customizable forms with all multiple question types including selects, radio options, addresses, formatted phone numbers and more...

Booking form

Payments

Integrate with Stripe to take payments for bookings

Payments

Fully customizable

Control every facet of the experience

Our versatile APIs and libraries let you combine the simplicity of pre-built components with the freedom of custom UIs. If you like Stripe elements, you will love Cal.com Atoms.

Explore the docsRun Cal.com Atoms on Replit
1234567891011121314151617181920
// style with css classNames (i.e. tailwindcss) const YourPage = () => ( <Booker eventSlug="30min" customClassNames={{ bookerContainer: "bg-[#EFEDEB] font-serif !border-[#000] border", datePickerCustomClassNames: {{ datePickerDatesActive: "!bg-[#8F999766] !rounded-none", }} availableTimeSlotsCustomClassNames: {{ availableTimeSlotsHeaderContainer: "!bg-[#EFEDEB]", availableTimes: "!bg-[#8F999766]", }} }} />);

    Get started

    Get started with Cal Atoms

    Start integrating a fully compliant scheduling workflow with only a few lines of code.

    1

    Integrate

    For now Cal Atoms can be used with react.js. Once installed, you can use the components in your client-side application.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    import { CalProvider, Booker } from "@calcom/atoms";export default function App() { return ( <CalProvider accessToken="30AadwEContactSalesToGetAKey42069"> <Booker username="jane-doe" eventSlug="weekly-sync" /> </CalProvider> );}
    2

    Customize

    Each Atom can be fully configured to match your brand.

    Primary color

    Radius

    Background

    FFFFFFE6E7E4

    Text color

    171717FFFFFF
    3

    Collect

    Once your Atom has been integrated and styled, you can start accepting bookings!

    Event was scheduled

    We emailed you and the other attendees a calendar invitation with all the details.

    What
    Design Workshop
    When

    Friday, 16 June 2022

    9:00 am – 10:00 am (Europe/Dublin)

    Feature & Benefits

    Secure, compliant and fully customizable

    Cal atoms were designed to simplify the process of building compliant scheduling workflows. They're flexible, secure and fully compliant under HIPAA, etc.

    Fully compliant and secure

    Cal atoms are fully compliant with standards like HIPAA, SOC2 and GDPR.

    Infinitely customizable

    Choose the Atoms you need and match them to the look and feel of your site with CSS-level styling.

    Easy integration

    Cal Atoms simplifies the integration process, allowing developers to seamlessly add powerful scheduling capabilities within hours, not weeks.

    Multiple components

    Whether you're taking guest information or payment details, there's an Atom for it.

    Reliable and scalable

    Cal Atoms are built on the rock-solid scheduling foundation of Cal.com. We’ve scheduled millions of bookings to date.

    Translation support

    Support multiple languages by passing a translations object to any Cal Atom

    Fundamentally configurable

    Configure errors, breakpoints and loading states using a simple API.

    Developer friendly

    Cal.com was built by developers, for developers. Our comprehensive docs and developer resources make integration a breeze

    4afgSHaFjxh6ldky0asdfnchg9dsBczFysuhdDhBksuYds6GhfsdfhtyukwrryjMbXs557sdtykyli23457y,nasdrgpoii2345fxxcbhr3h6K
    7HjbnF6dhFJ7vnsgx6FH8doepdF6ietyfh78hdgntdfghb6BFGdnZvweryerqn6HFbYHfnghbHnbc3ysad0p023iopeuk8945tffy62v5X
    hf7reDSFGtdsKnfyjervNqwsdtthy4cvbtyilX76nmffvbgja7fgsdnsdfg7DNfnHnagaweryasdqszxxnvmFmCn5z7878964xP
    jddh6BChdxA34aashFjy98dfaqwerjaexczrgwrtysDdousfgkn7dasdflGpd34kIwrtwertn2bhvgandgteBDsf35Jv67Nbg7Ov
    <XbvC6Chf7xerasqrzXeDSFGtdCBshdtyjewerthggdTFwryuk67dnknfsfgjnuil57>qwer</XbvC6Chf7xerasqrzXeDSFGtdCBshdtyjewerthggdTFwryuk67dnknfsfgjnuil57>ghwqeV5HvcaqWjg8990dzsQewzCb
    0fahvn6fxsadfasfsxascxxkgj8yh65mBKGkshrtyukwwerylXoPhggtasshdfgsjT543sbhbVNMCPjgfSOvL8kvYzc
    7HjvnDuIxp87tasw345adfertyjasdfYReqWasdfcvn7JFGlsk9dmaCXdSaqPzs46xcvhktyirtyfg467xxv7nBHUnfv
    hNBgd5JBK87MvnXzrrhhytyjuiolyyfj8Pkgj60dfFzaawdqwet578o0[r,tus4wEshwxn28nbhjsd8nfFgnbZ90db

    Use cases

    The power of customizability without the pain of self-hosting

    Cal Atoms can fit an almost unlimited number of use cases. Below are just some of the most common.

    Plug & play components

    We'll focus on timezone problems, so you can focus on building the parts of your business that deliver value to your customers.

    Platform

    $99/month*

    50 bookings/month

    (*) taxes and overages may apply.

    Build your pixel-perfect booking experience. Seamlessly integrate scheduling into your app with customizable UI components.

    • Javascript UI and React components SDK
    • Platform-focused API Endpoints
    • Basic and Advanced paid support add-ons
    • Full Whitelabeling support
    • Perfect for embedding in: Telehealth platforms, Sales tools, Hiring marketplaces, Startups, Coaching marketplaces, etc.
    Get StartedLearn more