Cal.com Atoms

Voeg de React-componenten van Cal.com toe aan je applicatie

Voeg planning toe aan je app met React-componenten die je stylet alsof ze van jou zijn, draaiend op de infrastructuur achter Cal.com.

Bekijk de docs

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

Vertrouwd door snelgroeiende bedrijven over de hele wereld

Aanpasbare componenten voor elke planningsworkflow

Atoms zijn React-componenten voor elk onderdeel van planning: agenda's koppelen, beschikbaarheid instellen, evenementen aanmaken en boekingen aannemen.

Aan de slag

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

Aan de slag

Aan de slag met Cal Atoms

Begin met het integreren van een volledig compliant planningsworkflow met maar een paar regels code.

Aan de slag

Integreer

Voorlopig kun je Cal Atoms gebruiken met react.js. Na installatie kun je de componenten gebruiken in je client-side applicatie.

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}

Aanpassen

Elke Atom kan volledig worden geconfigureerd om bij je merk te passen.

Primary color

Text color

Background

FFFFFF E6E7E4

Text color

242424 FFFFFF

Verzamel

Zodra je Atom is geïntegreerd en gestyled, kun je boekingen gaan accepteren!

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)

Veilig, compliant en volledig aanpasbaar

Cal Atoms zijn ontworpen om het bouwen van compliant planningsworkflows te vereenvoudigen. Ze zijn flexibel, veilig en volledig compliant met HIPAA, enz.

Aan de slag

Volledig compliant en veilig

Cal Atoms voldoen volledig aan standaarden zoals HIPAA, SOC 2 en GDPR.

Eindeloos aanpasbaar

Kies de Atoms die je nodig hebt en laat ze met styling op CSS-niveau aansluiten op de uitstraling van je site.

Eenvoudige integratie

Cal Atoms maakt het integratieproces eenvoudiger, zodat ontwikkelaars binnen uren, niet weken, krachtige planningsmogelijkheden kunnen toevoegen.

Meerdere componenten

Of je nu bezoekersgegevens of betalingsgegevens verzamelt, er is een Atom voor.

Betrouwbaar en schaalbaar

Cal Atoms zijn gebouwd op het ijzersterke planningsfundament van Cal.com. Tot nu toe hebben we miljoenen afspraken ingepland.

Ondersteuning voor vertalingen

Ondersteun meerdere talen door een vertalingsobject aan elke Cal Atom door te geven.

Configureerbaar tot in de kern

Configureer fouten, breakpoints en laadstatussen met een eenvoudige API.

Ontwikkelaarsvriendelijk

Cal.com is gebouwd door ontwikkelaars, voor ontwikkelaars. Onze uitgebreide documentatie en ontwikkelaarsresources maken integratie een fluitje van een cent.