Cal.com Atoms

Añade los componentes de React de Cal.com a tu aplicación

Añade la programación a tu app con componentes de React que puedes diseñar como propios, ejecutándose en la infraestructura detrás de Cal.com.

Explora la documentación

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

Empresas de rápido crecimiento de todo el mundo confían en nosotros

Componentes personalizables para cualquier flujo de trabajo de programación

Atoms son componentes de React para cada parte de la programación: conectar calendarios, definir disponibilidad, crear tipos de evento y aceptar reservas.

Empieza

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

Empieza

Empieza con Cal Atoms

Empieza a integrar un flujo de trabajo de programación que cumple la normativa con solo unas pocas líneas de código.

Empieza

Integrar

Por ahora, Cal Atoms se puede usar con react.js. Una vez instalado, puedes usar los componentes en tu aplicación del lado del 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 se puede configurar por completo para encajar con tu marca.

Primary color

Text color

Background

FFFFFF E6E7E4

Text color

242424 FFFFFF

Recibe

Una vez integrado y estilizado tu Atom, ¡puedes empezar a aceptar 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, conforme y totalmente personalizable

Cal Atoms se diseñó para simplificar el proceso de crear flujos de trabajo de programación conformes. Es flexible, seguro y cumple plenamente con HIPAA, etc.

Empieza

Totalmente conforme y seguro

Cal Atoms cumple plenamente con estándares como HIPAA, SOC2 y GDPR.

Infinitamente personalizable

Elige los Atoms que necesitas y adáptalos al aspecto de tu sitio con estilos a nivel de CSS.

Integración sencilla

Cal Atoms simplifica el proceso de integración y permite a los desarrolladores añadir potentes capacidades de programación en horas, no en semanas.

Múltiples componentes

Tanto si recopilas información de invitados como detalles de pago, hay un Atom para ello.

Fiable y escalable

Cal Atoms se basa en la sólida base de programación de Cal.com. Hasta la fecha hemos gestionado millones de reservas.

Compatibilidad con traducciones

Admite varios idiomas pasando un objeto de traducciones a cualquier componente de Cal Atoms.

Fundamentalmente configurable

Configura errores, puntos de corte y estados de carga con una API sencilla.

Pensado para desarrolladores

Cal.com fue creado por desarrolladores, para desarrolladores. Nuestra documentación completa y nuestros recursos para desarrolladores hacen que la integración sea muy sencilla.