Files
webkulisse-saas-tanstack/src/components/booking-embed.tsx
T

36 lines
1.1 KiB
TypeScript

import { useEffect } from "react";
import Cal, { getCalApi } from "@calcom/embed-react";
import { CAL_CONFIG } from "@/lib/config.ts";
// Rein den cal.com-Embed - keine Umgebung, kein Wrapper.
// Wird sowohl vom Modal (booking-dialog.tsx) als auch von der Route
// /termin genutzt, damit Konfiguration und Verhalten identisch bleiben.
export default function BookingEmbed() {
useEffect(() => {
(async () => {
const cal = await getCalApi({
namespace: CAL_CONFIG.namespace,
embedJsUrl: CAL_CONFIG.embedJsUrl,
});
cal("ui", {
hideEventTypeDetails: false,
layout: "month_view",
});
})();
}, []);
return (
<Cal
namespace={CAL_CONFIG.namespace}
calLink={CAL_CONFIG.calLink}
style={{ width: "100%", height: "100%", overflow: "scroll" }}
config={{
layout: "month_view",
useSlotsViewOnSmallScreen: "true",
}}
calOrigin={CAL_CONFIG.origin}
embedJsUrl={CAL_CONFIG.embedJsUrl}
/>
);
}