Rescheduling

A calendar switches into reschedule mode when the config contains the UUID of an existing reservation. In this mode:

• The calendar preselects the day of the current reservation.
• Instead of the booking form, the confirmation step shows the old and the new time.
• Submitting calls the reschedule endpoint instead of creating a new booking.
• booking-confirmed is emitted on success (Vue component).
• When the API refuses (notice period, reservation already started, rescheduling disabled for the event type), the component shows a localized message.

Where the UUID comes from

The reschedule link in Zaptime's confirmation emails and the reservation webhook payloads both carry the reservation UUID. Point the reschedule link to a page in your app and read the UUID from the query string.

Vue

<script setup lang="ts">
import { computed } from "vue";
import { useRoute } from "vue-router";
import { ZaptimeCalendar } from "@zaptime/vue3";
import type { ZaptimeConfig } from "@zaptime/vue3";

const route = useRoute();

const config = computed<ZaptimeConfig>(() => ({
  token: "<API_TOKEN>",
  reservationUuid: String(route.query.reservation),
}));
</script>

<template>
  <ZaptimeCalendar :config="config" @booking-confirmed="() => router.push('/rescheduled')" />
</template>

Script tag

<script>
  var params = new URLSearchParams(window.location.search);

  Zaptime({
    config: {
      token: "YOUR_TOKEN",
      reservationUuid: params.get("reservation"),
    },
  }).render("#zaptime-container");
</script>

Headless

import { reschedule, useReservationReschedule, RescheduleNotAllowedError, rescheduleNotAllowedText } from "@zaptime/core";

const { reservation } = useReservationReschedule(calendarId); // set during init from the remote data

try {
  const res = await reschedule(calendarId);
} catch (e) {
  if (e instanceof RescheduleNotAllowedError) {
    showError(rescheduleNotAllowedText(config.locale));
  }
}

reservation.value contains uuid, start, end, email, firstName, lastName, location and status of the current booking, so you can render the "old time" line yourself. See useReservationReschedule.

Organizer override

Attendee-facing reschedule policies (minimum notice, disabled rescheduling) apply to every call by default. An organizer or team owner can bypass them with rescheduleOverrideToken:

const config: ZaptimeConfig = {
  token: "<API_TOKEN>",
  reservationUuid: "…",
  rescheduleOverrideToken: "<server-issued token>",
};

The override token is a server-issued proof that the current visitor is the host of the reservation. It must be generated on your backend for an authenticated organizer; never embed a static value in client code.

Texts

Reschedule copy is part of the locale config:

locale: {
  confirmationForm: {
    reschedulingEvent: "Rescheduling event",
    rescheduleNotAllowed: "This reservation can no longer be rescheduled.",
    buttons: { reschedule: "Reschedule" },
  },
}