Cal.com Atoms

Dodaj komponenty React Cal.com do swojej aplikacji

Dodaj planowanie do swojej aplikacji dzięki komponentom React, które stylizujesz jak własne i które działają na infrastrukturze stojącej za Cal.com.

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

Zaufali nam szybko rosnący klienci na całym świecie

Konfigurowalne komponenty do dowolnego przepływu planowania

Atoms to komponenty React dla każdej części planowania: łączenia kalendarzy, ustawiania Dostępności, tworzenia Typów wydarzeń i przyjmowania Rezerwacji.

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

Zacznij z Cal Atoms

Zacznij integrować w pełni zgodny przepływ planowania za pomocą zaledwie kilku linijek kodu.

01

Integruj

Na razie Cal Atoms można używać z react.js. Po instalacji możesz korzystać z komponentów w swojej aplikacji po stronie klienta.
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}
02

Dostosuj

Każdy Atom możesz w pełni skonfigurować tak, aby pasował do Twojej marki.

Primary color

Text color

Background

FFFFFF E6E7E4

Text color

242424 FFFFFF
03

Zbieraj

Gdy Twój Atom zostanie zintegrowany i ostylowany, możesz zacząć przyjmować Rezerwacje!

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)

Bezpieczne, zgodne i w pełni konfigurowalne

Cal atoms zaprojektowano, aby uprościć tworzenie zgodnych przepływów planowania. Są elastyczne, bezpieczne i w pełni zgodne m.in. z HIPAA.

W pełni zgodne i bezpieczne

Cal atoms są w pełni zgodne ze standardami takimi jak HIPAA, SOC 2 i GDPR.

Nieskończenie konfigurowalne

Wybierz potrzebne Atoms i dopasuj je do wyglądu swojej strony dzięki stylowaniu na poziomie CSS.

Łatwa integracja

Cal Atoms upraszcza integrację, pozwalając deweloperom płynnie dodać rozbudowane funkcje planowania w godziny, a nie tygodnie.

Wiele komponentów

Niezależnie od tego, czy zbierasz informacje od gości, czy dane płatności, jest do tego Atom.

Niezawodne i skalowalne

Cal Atoms zbudowano na solidnych fundamentach planowania Cal.com. Do tej pory obsłużyliśmy miliony rezerwacji.

Obsługa tłumaczeń

Obsługuj wiele języków, przekazując obiekt tłumaczeń do dowolnego Cal Atoms.

Konfigurowalne u podstaw

Konfiguruj błędy, breakpointy i stany ładowania za pomocą prostego API.

Przyjazne deweloperom

Cal.com stworzyli deweloperzy dla deweloperów. Nasza obszerna dokumentacja i zasoby dla deweloperów sprawiają, że integracja jest prosta.

Moc personalizacji bez bólu budowania wszystkiego samodzielnie

Cal Atoms pasuje do niemal nieograniczonej liczby zastosowań. Poniżej znajdziesz tylko kilka najczęstszych.

hHiring marketplace
hire.com

Education marketplace

Hire a freelancer for XYZ

Search... Filter
Anna KendrickCo-Founder

Department

MarketingSales

Qualifications

SEOMarketing

Location

US
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
yourapp.comBookerAvailabilityCalendars

Komponenty plug & play

My zajmiemy się problemami ze strefami czasowymi, abyś Ty mógł skupić się na budowaniu części firmy, które dają wartość Twoim klientom.