Cal.com Atoms

Aggiungi i componenti React di Cal.com alla tua applicazione

Integra la pianificazione nella tua app con componenti React che puoi personalizzare come fossero tuoi, eseguiti sull’infrastruttura dietro Cal.com.

Esplora la documentazione

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

Scelto da aziende in rapida crescita in tutto il mondo

Componenti personalizzabili per qualsiasi flusso di lavoro di pianificazione

Gli Atoms sono componenti React per ogni parte della pianificazione: collegare calendari, impostare la disponibilità, creare tipi di evento e ricevere prenotazioni.

Inizia

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

Inizia

Inizia con Cal Atoms

Inizia a integrare un flusso di lavoro di pianificazione completamente conforme con poche righe di codice.

Inizia

Integra

Per ora Cal Atoms può essere usato con react.js. Una volta installato, puoi usare i componenti nella tua applicazione client-side.

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}

Personalizza

Ogni Atom può essere configurato completamente per adattarsi al tuo brand.

Primary color

Text color

Background

FFFFFF E6E7E4

Text color

242424 FFFFFF

Raccogli

Una volta integrato e stilizzato il tuo Atom, puoi iniziare ad accettare prenotazioni!

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)

Sicuro, conforme e completamente personalizzabile

Cal atoms è stato progettato per semplificare la creazione di flussi di lavoro di pianificazione conformi. È flessibile, sicuro e pienamente conforme a HIPAA, ecc.

Inizia

Completamente conforme e sicuro

Cal atoms è pienamente conforme a standard come HIPAA, SOC 2 e GDPR.

Personalizzabile all’infinito

Scegli gli Atoms di cui hai bisogno e adattali all’aspetto del tuo sito con personalizzazioni a livello CSS.

Integrazione semplice

Cal Atoms semplifica il processo di integrazione, permettendo agli sviluppatori di aggiungere funzionalità di pianificazione potenti in ore, non settimane.

Più componenti

Che tu stia raccogliendo informazioni sugli ospiti o dettagli di pagamento, c’è un Atom per questo.

Affidabile e scalabile

Cal Atoms si basa sulle fondamenta solidissime di pianificazione di Cal.com. A oggi abbiamo gestito milioni di prenotazioni.

Supporto alle traduzioni

Supporta più lingue passando un oggetto translations a qualsiasi Cal Atoms.

Configurabile alla base

Configura errori, breakpoint e stati di caricamento con una semplice API.

Pensato per gli sviluppatori

Cal.com è stato creato da sviluppatori, per sviluppatori. La nostra documentazione completa e le risorse per sviluppatori rendono l’integrazione facilissima.