Cal.com Atoms

Adiciona os componentes React da Cal.com à tua aplicação

Inclui o agendamento na tua app com componentes React que podes estilizar à tua maneira, assentes na infraestrutura por trás da Cal.com.

Explorar 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

Com a confiança de empresas em rápido crescimento em todo o mundo

Componentes personalizáveis para qualquer fluxo de agendamento

Os Atoms são componentes React para cada parte do agendamento: liga calendários, define disponibilidade, cria tipos de evento e aceita reservas.

Começar

@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}

Começar

Começa com Cal Atoms

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

Começar

Integrar

Para já, os Cal Atoms podem ser usados com react.js. Depois de instalados, podes usar os componentes na tua aplicação 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 corresponder à tua marca.

Primary color

Text color

Background

FFFFFF E6E7E4

Text color

242424 FFFFFF

Recolher

Depois de integrares e estilizar o teu Atom, podes 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

Os Cal Atoms foram concebidos para simplificar o processo de criação de fluxos de agendamento em conformidade. São flexíveis, seguros e totalmente conformes com HIPAA, etc.

Começar

Totalmente em conformidade e seguro

Os Cal Atoms estão totalmente em conformidade com normas como HIPAA, SOC 2 e GDPR.

Infinitamente personalizável

Escolhe os Atoms de que precisas e adapta-os ao visual do teu site com estilos ao nível de CSS.

Integração simples

Cal Atoms simplifica o processo de integração, permitindo aos programadores adicionar capacidades de agendamento poderosas em horas, não em semanas.

Vários componentes

Quer estejas a recolher informações de convidados ou dados de pagamento, há um Atom para isso.

Fiável e escalável

Os Cal Atoms foram criados sobre a base de agendamento sólida da Cal.com. Já agendámos milhões de reservas até hoje.

Suporte de tradução

Suporta vários idiomas passando um objeto de traduções para qualquer Cal Atom.

Configurável de raiz

Configura erros, breakpoints e estados de carregamento com uma API simples.

Pensado para programadores

A Cal.com foi criada por programadores, para programadores. A nossa documentação abrangente e os recursos para programadores tornam a integração simples.