Reschedule page

Point the reschedule link of your event type to https://your-app.test/reschedule?reservation={uuid}.

<!-- pages/Reschedule.vue -->
<template>
  <div v-if="!uuid">Missing reservation.</div>

  <template v-else>
    <ZaptimeCalendar :config="config" @booking-confirmed="done = true" />
    <p v-if="done">Your booking was moved. Check your inbox for the new confirmation.</p>
  </template>
</template>

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

const route = useRoute();
const done = ref(false);

const uuid = computed(() => String(route.query.reservation ?? ""));

const config = computed<ZaptimeConfig>(() => ({
  token: import.meta.env.VITE_ZAPTIME_TOKEN,
  reservationUuid: uuid.value,
}));
</script>

The component preselects the day of the current reservation, shows old → new time in the confirmation step and displays a localized message when the API refuses the change. See Rescheduling for the organizer override.