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/vue3 | Use @zaptime/core |
|---|---|
| Colors, radius, dark mode and texts are enough | You need your own components and layout |
| Booking form from the dashboard is fine | Form fields must be your app's own inputs |
| One calendar, standard flow | Calendar 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
calendarIdstring. 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
fetchRemoteConfigurationand merged under your local config. Local keys override. - Reactive state:
useCalendar().stateis a reactive object. Readstate.daysin templates; do not destructure it. - Browser only: state depends on
window,navigatorandIntl. With SSR, call composables insideonMountedor a<ClientOnly>subtree.
Continue with Getting started.
