Skip to content

Headless calendar

@zaptime/core contains the complete booking logic of Zaptime as Vue 3 composables and plain functions, with no UI attached:

  • Month navigation, day and time slot availability, selection.
  • Timezone and 12h/24h hour cycle handling with localized formatting.
  • The booking form schema defined in the dashboard (field types, labels, required flags, options).
  • Guests, locations, rescheduling and paid event types.
  • API calls: book, reserve, confirm, cancel, reschedule.

The @zaptime/vue3 component is built on exactly these composables. Use core directly when the ready-made component cannot be themed into what you need: your own design system, form components, layout, or a booking step inside a larger wizard.

When to go headless

Use @zaptime/vue3Use @zaptime/core
Colors, radius, dark mode and texts are enoughYou need your own components and layout
Booking form from the dashboard is fineForm fields must be your app's own inputs
One calendar, standard flowCalendar embedded in a wizard, modal, or custom flow

You can also mix: render ZaptimeCalendar with externalBooking: true and use core composables around it. See Working with Time Slots.

Concepts

  • Calendar ID: every composable and API function takes an optional calendarId string. Omit it for a single calendar. Use distinct ids for several calendars on one page. All state is module-level and keyed by that id.
  • Remote configuration: the dashboard settings of an event type (texts, theme, booking rules, form fields, locations) are fetched with fetchRemoteConfiguration and merged under your local config. Local keys override.
  • Reactive state: useCalendar().state is a reactive object. Read state.days in templates; do not destructure it.
  • Browser only: state depends on window, navigator and Intl. With SSR, call composables inside onMounted or a <ClientOnly> subtree.

Continue with Getting started.