Customization

You can customize accent colors inside the calendar.

Theming

Theming is set inside ZaptimeConfig as theme key.

const config = {
    theme: {
        ....
    }
}

interface ZaptimeTheme {
  mode?: "light" | "dark";
  preset?: "basic" | "elegant" | "playful";
  borderRadius?: string; // any CSS length, or "full"
  colors?: {
    accentLight?: string;
    accentBase?: string;
    accentDark?: string;
    // gray scale, 25 lightest … 900 darkest
    "25"?: string; "50"?: string; "100"?: string; "200"?: string; "300"?: string;
    "400"?: string; "500"?: string; "600"?: string; "700"?: string; "800"?: string; "900"?: string;
  };
}

Example with a custom accent and dark mode:

const config = {
  token: "<API_TOKEN>",
  theme: {
    mode: "dark",
    borderRadius: "12px",
    colors: {
      accentLight: "#818cf8",
      accentBase: "#6366f1",
      accentDark: "#4f46e5",
    },
  },
};

The full list of tokens and the CSS variables they map to is in the theme reference. Theme settings made in the dashboard apply automatically; local values override them.

TIP

Prefer configuring the theme in the dashboard so non-developers can change it. Pass locally only what your app must control, such as a dark mode toggle.

Profile image

You can set a profile image to be displayed inside the calendar.

const config = {
  profileImage: "http://test.test/my-image.png",
};

Compact mode

Single-column layout: the visitor picks a date, then a time. Default is false. The Vue component switches to compact automatically below a viewport width of 860px.

const config = {
  compact: true | false,
};

External booking

Disables the built-in booking form. The calendar stops after the time slot selection and your app submits the booking. Default is false.

const config = {
  externalBooking: true | false,
};

See Working with Time Slots (Vue) or the script tag version.

Redirect after Booking

Redirects after booking to desired URL.

const config = {
  redirectAfterBookingUrl: "https://example.com/success-page",
};

Hide location

Calendar automatically shows where will the event take place. Options are Google Meet, address, phone call, and more.

Default is false

const config = {
  hideLocation: true,
};

Rescheduling

Pass reservationUuid to open the calendar in reschedule mode. See Rescheduling.

Custom CSS

The Vue component scopes its styles under #zaptime-calendar and exposes its colors as CSS variables, so you can override them from your own stylesheet:

#zaptime-calendar {
  --c-zaptime-accent-base: #6366f1;
  --radius-zaptime: 12px;
}

For a look the tokens cannot express, build the UI yourself on the headless composables.