Cal.com Atoms

Füge deiner Anwendung die React-Komponenten von Cal.com hinzu

Baue Terminplanung mit React-Komponenten in deine App ein, die du wie deine eigenen gestaltest – betrieben auf der Infrastruktur hinter Cal.com.

Dokumentation ansehen

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

Schnell wachsende Unternehmen weltweit vertrauen uns

Anpassbare Komponenten für jeden Terminplanungs-Workflow

Atoms sind React-Komponenten für jeden Teil der Terminplanung: Kalender verbinden, Verfügbarkeit festlegen, Termintypen erstellen und Buchungen annehmen.

Loslegen

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

Loslegen

Leg mit Cal Atoms los

Starte die Integration eines vollständig regelkonformen Terminplanungs-Workflows mit nur wenigen Codezeilen.

Loslegen

Integrieren

Derzeit kannst du Cal Atoms mit React.js verwenden. Nach der Installation kannst du die Komponenten in deiner clientseitigen Anwendung nutzen.

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}

Anpassen

Jedes Atom lässt sich vollständig an deine Marke anpassen.

Primary color

Text color

Background

FFFFFF E6E7E4

Text color

242424 FFFFFF

Erfassen

Sobald dein Atom integriert und gestaltet ist, kannst du Buchungen annehmen!

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)

Sicher, regelkonform und vollständig anpassbar

Cal Atoms wurden entwickelt, um den Aufbau regelkonformer Terminplanungs-Workflows zu vereinfachen. Sie sind flexibel, sicher und vollständig konform mit HIPAA usw.

Loslegen

Vollständig regelkonform und sicher

Cal Atoms sind vollständig konform mit Standards wie HIPAA, SOC 2 und GDPR.

Unendlich anpassbar

Wähle die Atoms, die du brauchst, und passe sie mit CSS-Styling an das Erscheinungsbild deiner Website an.

Einfache Integration

Cal Atoms vereinfachen den Integrationsprozess, sodass Entwickler leistungsstarke Terminplanungsfunktionen nahtlos in Stunden statt Wochen hinzufügen können.

Mehrere Komponenten

Ob du Gästeinformationen oder Zahlungsdetails erfasst: Es gibt ein Atom dafür.

Zuverlässig und skalierbar

Cal Atoms bauen auf dem felsenfesten Terminplanungsfundament von Cal.com auf. Wir haben bis heute Millionen von Buchungen abgewickelt.

Übersetzungsunterstützung

Unterstütze mehrere Sprachen, indem du einem beliebigen Cal Atom ein Übersetzungsobjekt übergibst.

Von Grund auf konfigurierbar

Konfiguriere Fehler, Breakpoints und Ladezustände über eine einfache API.

Entwicklerfreundlich

Cal.com wurde von Entwicklern für Entwickler gebaut. Unsere umfassende Dokumentation und Entwicklerressourcen machen die Integration kinderleicht.

Die Anpassbarkeit, die du brauchst – ohne den Aufwand, alles selbst zu bauen

Cal Atoms eignen sich für nahezu unbegrenzt viele Anwendungsfälle. Unten findest du nur einige der häufigsten.

Loslegen

hHiring marketplace

hire.com

Education marketplace

Hire a freelancer for XYZ

Search... Filter

Anna KendrickCo-Founder

Department

MarketingSales

Qualifications

SEOMarketing

Location

Chris WashingtonEngineering Lead

Department

Engineering

Skills

Front-EndBack-EndAI

Location

Germany

Alex FisherProduct Lead

Department

Product

Skills

DesignUIUX

Location

Mexico

Dominique SchutteHuman Resource

Department

Human resource

Skills

PayrollHuman resource

Location

Turkey

Joe BergerCTO

Anna FritzHead of Operations

Ralph BakerCEO

Jane DoeHuman Resource Manager

Plug-and-play-Komponenten

Wir kümmern uns um Zeitzonenprobleme, damit du dich auf die Teile deines Unternehmens konzentrieren kannst, die deinen Kunden Mehrwert liefern.

Loslegen