Cal.com Atoms

Ajoutez les composants React de Cal.com à votre application

Intégrez la planification à votre app avec des composants React que vous stylisez à votre image, exécutés sur l’infrastructure derrière Cal.com.

Explorer la documentation

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

Ils nous font confiance dans des entreprises en forte croissance partout dans le monde

Des composants personnalisables pour tout workflow de planification

Les Atoms sont des composants React pour chaque partie de la planification : connecter des calendriers, définir les disponibilités, créer des types d'événements et recevoir des réservations.

Commencer

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

Commencer

Commencez avec Cal Atoms

Commencez à intégrer un workflow de planification entièrement conforme avec seulement quelques lignes de code.

Commencer

Intégrer

Pour l’instant, Cal Atoms peut être utilisé avec react.js. Une fois installé, vous pouvez utiliser les composants dans votre application côté client.

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}

Personnaliser

Chaque Atom peut être entièrement configuré pour correspondre à votre marque.

Primary color

Text color

Background

FFFFFF E6E7E4

Text color

242424 FFFFFF

Collecter

Une fois votre Atom intégré et stylisé, vous pouvez commencer à accepter des réservations !

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)

Sécurisé, conforme et entièrement personnalisable

Cal Atoms a été conçu pour simplifier la création de workflows de planification conformes. Ils sont flexibles, sécurisés et entièrement conformes à HIPAA, etc.

Commencer

Entièrement conforme et sécurisé

Cal Atoms est entièrement conforme à des standards comme HIPAA, SOC2 et GDPR.

Personnalisable à l’infini

Choisissez les Atoms dont vous avez besoin et adaptez-les à l’apparence de votre site avec un style au niveau CSS.

Intégration facile

Cal Atoms simplifie le processus d’intégration, permettant aux développeurs d’ajouter facilement de puissantes fonctionnalités de planification en quelques heures, pas en quelques semaines.

Plusieurs composants

Que vous recueilliez des informations sur les invités ou des détails de paiement, il existe un Atom pour cela.

Fiable et évolutif

Cal Atoms repose sur les fondations de planification ultra-solides de Cal.com. À ce jour, nous avons planifié des millions de réservations.

Prise en charge des traductions

Prenez en charge plusieurs langues en transmettant un objet de traductions à n’importe quel Cal Atoms.

Configurable en profondeur

Configurez les erreurs, les points de rupture et les états de chargement avec une API simple.

Pensé pour les développeurs

Cal.com a été conçu par des développeurs, pour des développeurs. Notre documentation complète et nos ressources pour développeurs simplifient l’intégration.

Toute la puissance de la personnalisation, sans devoir tout construire vous-même

Cal Atoms peut s’adapter à un nombre presque illimité de cas d’utilisation. En voici quelques-uns parmi les plus courants.

Commencer

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

Composants prêts à l’emploi

Nous nous occupons des problèmes de fuseaux horaires, pour que vous puissiez vous concentrer sur les parties de votre activité qui apportent de la valeur à vos clients.

Commencer