Multiple calendars

Each instance needs its own calendar-id. Composables and API functions take the same id.

<template>
  <section>
    <h2>Sales</h2>
    <ZaptimeCalendar calendar-id="sales" :config="sales" @booking-confirmed="(r) => log('sales', r)" />
  </section>

  <section>
    <h2>Support</h2>
    <ZaptimeCalendar calendar-id="support" :config="support" @booking-confirmed="(r) => log('support', r)" />
  </section>
</template>

<script setup lang="ts">
import { ZaptimeCalendar } from "@zaptime/vue3";
import type { ZaptimeConfig } from "@zaptime/vue3";
import { useSelectedTimeSlot } from "@zaptime/core";
import type { ReservationResponse } from "@zaptime/core";

const sales: ZaptimeConfig = { token: import.meta.env.VITE_SALES_TOKEN, compact: true };
const support: ZaptimeConfig = { token: import.meta.env.VITE_SUPPORT_TOKEN, compact: true };

// State is per id
const { selectedTimeSlot: salesSlot } = useSelectedTimeSlot("sales");
const { selectedTimeSlot: supportSlot } = useSelectedTimeSlot("support");

function log(which: string, r: ReservationResponse) {
  console.log(which, r.data.uuid);
}
</script>

The component renders #zaptime-calendar on each instance. The duplicate id is harmless for styling but fails strict HTML validation.