Solutions

Enterprise

Cal.ai

Developer

Resources

Pricing

Get started

Solutions

By team size

For Individuals

Personal scheduling made simple

For Teams

Collaborative scheduling for groups

For Enterprises

Enterprise-level scheduling solutions

For Developers

Powerful features and integrations

By use case

Recruiting

Sales

Education

Support

Healthcare

Telehealth

Marketing

Try Cal.ai now!

Supercharged scheduling with AI-powered calls

Enterprise

Developer

Developer Documentation

Documentation for the Cal.com platform

API

Build your own integrations with our public API

Scheduling Components

Use our react atoms to add scheduling to your app

Create OAuth Client

Integrate Cal.com using OAuth

Resources

API

Build your own integrations with our public API

App Store

Integrate with your favorite apps

Collective Events

Schedule events with multiple participants

Help Docs

Need to learn more about our system? Check the help docs

Embed

Embed Cal.com into your website

Out Of Office

Schedule time off with ease

Payments

Accept payments for bookings

Workflows

Automate scheduling and reminders

Blog

Stay up to date with the latest news and updates

Instant Meetings

Meet with clients in minutes

Dynamic Group Links

Seamlessly book meetings with multiple people

Webhooks

Get notified when something happens

Cal.ai

Pricing

Get started

Solutions

By team size

For Individuals

Personal scheduling made simple

For Teams

Collaborative scheduling for groups

For Enterprises

Enterprise-level scheduling solutions

For Developers

Powerful features and integrations

By use case

Recruiting

Sales

Education

Support

Healthcare

Telehealth

Marketing

Try Cal.ai now!

Supercharged scheduling with AI-powered calls

Enterprise

Developer

Developer Documentation

Documentation for the Cal.com platform

API

Build your own integrations with our public API

Scheduling Components

Use our react atoms to add scheduling to your app

Create OAuth Client

Integrate Cal.com using OAuth

Resources

API

Build your own integrations with our public API

App Store

Integrate with your favorite apps

Collective Events

Schedule events with multiple participants

Help Docs

Need to learn more about our system? Check the help docs

Embed

Embed Cal.com into your website

Out Of Office

Schedule time off with ease

Payments

Accept payments for bookings

Workflows

Automate scheduling and reminders

Blog

Stay up to date with the latest news and updates

Instant Meetings

Meet with clients in minutes

Dynamic Group Links

Seamlessly book meetings with multiple people

Webhooks

Get notified when something happens

Cal.ai

Pricing

Add Cal.com's react components to your application

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

Explore the docs

Create OAuth Client

// Style Atoms with Javascript

const appearance = {

theme : Custom ,

variables : {

fontFamily : ' Comic sans ' ,

colorPrimary : ' #101010 ' ,

colorBackground : ' #ffffff ' ,

colorText : ' #374151 ' ,

borderRadius : ' 6px ' ,

spacingUnit : ' 8px ' ,

}

} ;

const atoms = cal.atoms ( { clientSecret , appearance } ) ;

Cédric van Ravesteijn

Partnerships Meeting

Are you an agency, influencer, SaaS founder, or business looking to collaborate with Cal.com? Let's chat!

15m

30m

45m

Cal Video

Europe/Amsterdam

May

2025

SUN

MON

TUE

WED

THU

FRI

SAT

Cédric van Ravesteijn

Partnerships Meeting

Are you an agency, influencer, SaaS founder, or business looking to collaborate with Cal.com? Let's chat!

15m

30m

45m

Cal Video

Europe/Amsterdam

May

2025

SUN

MON

TUE

WED

THU

FRI

SAT

Trusted by fast-growing companies around the world

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.

Get started

View all atoms

Connect to any calendar

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

import { Connect } from "@calcom/atoms";

export default function Connect() {
  return (
      <>
        <Connect.GoogleCalendar isMultiCalendar={true} />
        <Connect.OutlookCalendar isMultiCalendar={true} />
        <Connect.AppleCalendar isMultiCalendar={true} />
      </>
  )
}

Availability

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

import { AvailabilitySettings } from "@calcom/atoms"

export default Availability = () => {
  return (
    <AvailabilitySettings
      enableOverrides={true}
      customClassNames={{
        subtitlesClassName: "text-gray",
        editableHeadingClassName: "font-bold",      
      }}
    />
  );
}

Create event type

Easily create individual and team event types.

import { CreateEventType } from "@calcom/atoms";

export default function EventType() {
  return (
    <>
      <CreateEventType
        onSuccess={(eventType) => {
          console.log("EventType created successfully", eventType);
        }}
        customClassNames={{
          atomsWrapper: "border p-6 rounded-md",
          buttons: { submit: "bg-green-500", cancel: "bg-gray-300" },
        }}
      />
    </>
  )
}

Event type settings

Manage your event types and their settings.

import { EventTypeSettings } from "@calcom/atoms";  

export function EventTypeTabs(eventTypeId: number) {      
  return (
    <>
      <EventTypeSettings
        id={eventTypeId}
        allowDelete={false}
        onSuccess={(eventType) => {
          console.log("EventType settings updated successfully", eventType);
        }}
      />
    </>
  );
}

Calendar settings

Manage your calendar settings.

import { EventTypeSettings } from "@calcom/atoms";  

export function EventTypeTabs(eventTypeId: number) {      
  return (
    <>
      <EventTypeSettings
        id={eventTypeId}
        allowDelete={false}
        onSuccess={(eventType) => {
          console.log("EventType settings updated successfully", eventType);
        }}
      />
    </>
  );
}

Booking form

Completely customizable booking forms.

import { Booker } from "@calcom/atoms";

export default function Booker( props : BookerProps ) {
  return (
    <>
      <Booker
        eventSlug={props.eventTypeSlug}
        username={props.calUsername}
        onCreateBookingSuccess={() => {
          console.log("booking created successfully");
         }}
      />
    </>
  )
}

Get started

Get started with Cal Atoms

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

Get started

View all atoms

Integrate

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

import { CalProvider , Booker } from "@calcom/atoms" ;

export default function App ( ) {

return (

</CalProvider>

) ;

}

Customize

Each Atom can be fully configured to match your brand.

Primary color

Text color

Background

FFFFFF

E6E7E4

Text color

242424

FFFFFF

Collect

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

Features & 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.

Get started

View all atoms