Cal.com Has a Free API That Adds Scheduling to Any App

#scheduling #api #javascript #opensource

Cal.com is the open-source scheduling platform. Its API lets you embed booking, manage availability, and handle events programmatically.

Embed: Add Booking to Your Site

<!-- Inline embed -->
<cal-inline calLink="username/meeting-type"></cal-inline>
<script src="https://app.cal.com/embed/embed.js"></script>

// React embed
import Cal from "@calcom/embed-react";

function BookingPage() {
  return (
    <Cal
      calLink="username/30min"
      style={{ width: "100%", height: "100%" }}
      config={{ layout: "month_view", theme: "light" }}
    />
  );
}

REST API: Full Control

const CAL_API = "https://api.cal.com/v1";
const API_KEY = process.env.CAL_API_KEY;

// List event types
const eventTypes = await fetch(`${CAL_API}/event-types?apiKey=${API_KEY}`).then(r => r.json());

// Get availability
const availability = await fetch(
  `${CAL_API}/availability?apiKey=${API_KEY}&dateFrom=2026-03-29&dateTo=2026-04-05&eventTypeId=123`
).then(r => r.json());

// Create booking
const booking = await fetch(`${CAL_API}/bookings?apiKey=${API_KEY}`, {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
    eventTypeId: 123,
    start: "2026-04-01T10:00:00Z",
    end: "2026-04-01T10:30:00Z",
    responses: {
      name: "John Doe",
      email: "john@example.com",
      notes: "Discuss scraping requirements",
    },
    timeZone: "America/New_York",
    language: "en",
  }),
}).then(r => r.json());

Webhooks: React to Events

// POST /api/cal-webhook
app.post("/api/cal-webhook", (req, res) => {
  const { triggerEvent, payload } = req.body;

  switch (triggerEvent) {
    case "BOOKING_CREATED":
      console.log(`New booking: ${payload.title} with ${payload.attendees[0].email}`);
      sendSlackNotification(`New meeting booked: ${payload.title}`);
      break;
    case "BOOKING_CANCELLED":
      console.log(`Cancelled: ${payload.title}`);
      break;
    case "MEETING_ENDED":
      sendFollowUpEmail(payload.attendees[0].email);
      break;
  }

  res.json({ received: true });
});

Manage Availability

// Set availability schedule
await fetch(`${CAL_API}/schedules?apiKey=${API_KEY}`, {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
    name: "Working Hours",
    timeZone: "America/New_York",
    availability: [
      { days: [1, 2, 3, 4, 5], startTime: "09:00", endTime: "17:00" },
    ],
  }),
});