terminalskills/skills/cal-com

npm install @calcom/embed-react

// src/components/BookingWidget.tsx
import Cal, { getCalApi } from "@calcom/embed-react";
import { useEffect } from "react";
export function BookingWidget() {
  useEffect(() => {
    (async () => {
      const cal = await getCalApi({ namespace: "discovery-call" });
      cal("ui", {
        theme: "light",
        hideEventTypeDetails: false,
        layout: "month_view",
      });
    })();
  }, []);
  return (
    <Cal
      namespace="discovery-call"
      calLink="maria-lopez/discovery-call"
      style={{ width: "100%", height: "100%", overflow: "scroll" }}
      config={{ layout: "month_view", name: "Dmitri Volkov", email: "dmitri@northwind-logistics.eu" }}
    />
  );
}

// src/cal/client.ts
const CAL_API_URL = "https://api.cal.com/v2";
export async function calFetch(path: string, version: string, init: RequestInit = {}) {
  const response = await fetch(`${CAL_API_URL}${path}`, {
    ...init,
    headers: {
      "Content-Type": "application/json",
      "cal-api-version": version,
      Authorization: `Bearer ${process.env.CAL_API_KEY}`,
      ...init.headers,
    },
  });
  const body = await response.json();
  if (!response.ok) throw new Error(`Cal.com ${response.status}: ${JSON.stringify(body)}`);
  return body.data;
}

// Create an event type. Required fields: title, slug, lengthInMinutes.
const eventType = await calFetch("/event-types", "2026-06-12", {
  method: "POST",
  body: JSON.stringify({
    title: "Discovery Call",
    slug: "discovery-call",
    lengthInMinutes: 30,
    locations: [{ type: "integration", integration: "google-meet" }],
    bookingFields: [
      { field: "custom", type: "shortText", slug: "company", label: "Company", required: true },
      { field: "custom", type: "select", slug: "team-size", label: "Team size",
        options: ["1-10", "11-50", "51-200", "200+"], required: true },
    ],
  }),
});
// Free slots: query is start/end (UTC ISO 8601 or a date), not startTime/endTime.
const slots = await calFetch(
  `/slots?${new URLSearchParams({
    eventTypeId: String(eventType.id),
    start: "2026-11-02",
    end: "2026-11-06",
    timeZone: "Europe/Berlin",
  })}`,
  "2024-09-04",
);
// slots = { "2026-11-02": [{ start: "2026-11-02T09:00:00.000+01:00" }, ...], ... }
// Book one. attendee needs name and timeZone; email is the usual contact.
const booking = await calFetch("/bookings", "2026-02-25", {
  method: "POST",
  body: JSON.stringify({
    eventTypeId: eventType.id,
    start: "2026-11-02T08:00:00Z",
    attendee: { name: "Dmitri Volkov", email: "dmitri@northwind-logistics.eu", timeZone: "Europe/Berlin", language: "en" },
    bookingFieldsResponses: { company: "Northwind Logistics", "team-size": "51-200" },
    metadata: { utm_source: "pricing-page" },
  }),
});
// Rescheduling cancels the old booking and returns a new one with a new uid.
const moved = await calFetch(`/bookings/${booking.uid}/reschedule`, "2026-02-25", {
  method: "POST",
  body: JSON.stringify({ start: "2026-11-03T08:00:00Z", reschedulingReason: "Customer asked for Tuesday" }),
});
// Cancel the new uid; the original one is already cancelled and would be rejected.
await calFetch(`/bookings/${moved.uid}/cancel`, "2026-02-25", {
  method: "POST",
  body: JSON.stringify({ cancellationReason: "Duplicate booking" }),
});

await calFetch("/teams/4217/event-types", "2026-06-12", {
  method: "POST",
  body: JSON.stringify({
    title: "Product Demo",
    slug: "product-demo",
    lengthInMinutes: 45,
    schedulingType: "roundRobin",
    hosts: [
      { userId: 101 },
      { userId: 102 },
      { userId: 103, mandatory: true },   // fixed host, always attends
    ],
    beforeEventBuffer: 15,
    afterEventBuffer: 10,
    minimumBookingNotice: 120,            // minutes
    slotInterval: 15,
  }),
});
await calFetch("/schedules", "2024-06-11", {
  method: "POST",
  body: JSON.stringify({
    name: "Business Hours",
    timeZone: "America/New_York",
    isDefault: true,
    availability: [{ days: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"], startTime: "09:00", endTime: "17:00" }],
    overrides: [{ date: "2026-12-31", startTime: "09:00", endTime: "12:00" }],
  }),
});

// app/api/cal-webhook/route.ts
import { NextRequest, NextResponse } from "next/server";
import crypto from "node:crypto";
function validSignature(rawBody: string, header: string | null): boolean {
  if (!header) return false;
  const expected = crypto.createHmac("sha256", process.env.CAL_WEBHOOK_SECRET!).update(rawBody).digest("hex");
  const a = Buffer.from(header);
  const b = Buffer.from(expected);
  return a.length === b.length && crypto.timingSafeEqual(a, b);
}
export async function POST(request: NextRequest) {
  const rawBody = await request.text();
  if (!validSignature(rawBody, request.headers.get("x-cal-signature-256"))) {
    return NextResponse.json({ error: "Invalid signature" }, { status: 401 });
  }
  const event = JSON.parse(rawBody);
  switch (event.triggerEvent) {
    case "BOOKING_CREATED":
      await saveBooking(event.payload.uid, event.payload.attendees[0], event.payload.startTime);
      break;
    case "BOOKING_CANCELLED":
      await markCancelled(event.payload.uid, event.payload.cancellationReason);
      break;
    case "BOOKING_RESCHEDULED":
      await moveBooking(event.payload.rescheduleUid, event.payload.uid, event.payload.startTime);
      break;
    case "MEETING_ENDED":
      await sendFollowUp(event.uid);   // flat payload: no "payload" wrapper
      break;
  }
  return NextResponse.json({ received: true });
}

git clone --recursive https://github.com/calcom/cal.diy.git
cd cal.diy
cp .env.example .env
openssl rand -base64 32   # put in NEXTAUTH_SECRET
openssl rand -base64 24   # put in CALENDSO_ENCRYPTION_KEY (32 bytes for AES-256)
docker compose pull
docker compose up -d