Cal.com Atoms

Adicione os componentes React da Cal.com ao seu aplicativo

Adicione agendamento ao seu app com componentes React que você estiliza como se fossem seus, rodando na infraestrutura por trás da Cal.com.

Explore a documentação

npm install @calcom/atoms

appearance.tsLive preview

1// Style Atoms with Javascript23const appearance = {4  theme: Custom,5  variables: {6    fontFamily: 'Comic sans',7    colorPrimary: '#101010',8    colorBackground: '#ffffff',9    colorText: '#374151',10    borderRadius: '6px',11    spacingUnit: '8px',12  }13};14const atoms = cal.atoms({ clientSecret, appearance });15

Cédric van Ravesteijn

Why Cal.com is better than Calendly

Ready to see why Cal.com outshines Calendly? Spoiler alert: it's not even close!

15m30m45m1h

Cal Video

Europe/Amsterdam

May 2025

SUNMONTUEWEDTHUFRISAT12345678910111213141516171819202122232425262728293031

Usada por empresas de rápido crescimento no mundo todo

Componentes personalizáveis para qualquer fluxo de trabalho de agendamento

Atoms são componentes React para cada parte do agendamento: conectar calendários, definir disponibilidade, criar tipos de eventos e receber reservas.

Comece

@calcom/atoms

1import { Connect } from "@calcom/atoms";23export default function Connect() {4  return (5    <>6      <Connect.GoogleCalendar isMultiCalendar={true} />7      <Connect.OutlookCalendar isMultiCalendar={true} />8      <Connect.AppleCalendar isMultiCalendar={true} />9    </>10  )11}

Comece

Comece a usar Cal Atoms

Comece a integrar um fluxo de trabalho de agendamento totalmente em conformidade com apenas algumas linhas de código.

Comece

Integrar

Por enquanto, Cal Atoms pode ser usado com react.js. Depois de instalado, você pode usar os componentes no seu aplicativo do lado do cliente.

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

Personalizar

Cada Atom pode ser totalmente configurado para combinar com a sua marca.

Primary color

Text color

Background

FFFFFF E6E7E4

Text color

242424 FFFFFF

Coletar

Depois que seu Atom estiver integrado e estilizado, você pode começar a aceitar reservas!

This event is scheduled

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

WhatDesign WorkshopWhenFriday, 16 June 2022
9:00 am – 10:00 am (Europe/Dublin)

Seguro, em conformidade e totalmente personalizável

Cal Atoms foi criado para simplificar o processo de criar fluxos de trabalho de agendamento em conformidade. Ele é flexível, seguro e totalmente em conformidade com HIPAA etc.

Comece

Totalmente seguro e em conformidade

Cal Atoms está totalmente em conformidade com padrões como HIPAA, SOC 2 e GDPR.

Infinitamente personalizável

Escolha os Atoms de que você precisa e combine-os com a aparência do seu site usando estilização no nível de CSS.

Integração fácil

Cal Atoms simplifica o processo de integração, permitindo que desenvolvedores adicionem recursos poderosos de agendamento em horas, não semanas.

Vários componentes

Seja para coletar informações de participantes ou dados de pagamento, existe um Atom para isso.

Confiável e escalável

Cal Atoms é construído sobre a base de agendamento supersólida da Cal.com. Já agendamos milhões de reservas até hoje.

Suporte a traduções

Ofereça suporte a vários idiomas passando um objeto de traduções para qualquer componente do Cal Atoms.

Configurável desde a base

Configure erros, breakpoints e estados de carregamento usando uma API simples.

Amigável para desenvolvedores

Cal.com foi criada por desenvolvedores, para desenvolvedores. Nossa documentação abrangente e nossos recursos para desenvolvedores tornam a integração muito fácil.