Build a public schedule

This guide builds a month view showing classes and workshops together, with lecturer names, locations, prices, and live availability. Everything here uses the public API key, so it can run in a browser.

1. Fetch reference data once

Lecturers and places change rarely, and the schedule references them by ID. Fetch both up front and build lookup maps:

const headers = { Authorization: `Bearer ${PUBLIC_KEY}` };
const base = "https://api.zenamu.com";

const [lecturers, places] = await Promise.all([
  fetch(`${base}/v1/lecturers?includeInactive=true`, { headers })
    .then((r) => r.json())
    .then((r) => new Map(r.data.map((l) => [l._id, l]))),
  fetch(`${base}/v1/places`, { headers })
    .then((r) => r.json())
    .then((r) => new Map(r.data.map((p) => [p._id, p]))),
]);

Pass includeInactive=true so lecturers who have since left the studio still resolve on older events.

Cache these. Refetching them per event will exhaust your rate limit on a busy month.

2. Fetch the schedule

Classes and workshops are separate endpoints with the same date range. Ask for capacity only if you display availability.

const params = new URLSearchParams({
  dateFrom: "2026-03-01",
  dateTo: "2026-03-31",
  includeCapacity: "true",
});

const [classes, workshops] = await Promise.all([
  fetch(`${base}/v1/classes?${params}`, { headers }).then((r) => r.json()),
  fetch(`${base}/v1/workshops?${params}`, { headers }).then((r) => r.json()),
]);

Both ranges are read in the studio’s time zone, not the visitor’s. See Dates and time zones.

3. Merge the two lists

The two shapes differ in three places. Normalize them before rendering:

Concept	Class	Workshop
Description	`description`	`shortDescription`
Location	`locationId` → place, or `isOnline`	`address` inline
Free seats	compute `max - reserved`	`available`

const clamp = (n) => Math.max(0, n);

const events = [
  ...classes.data.map((c) => ({
    id: c._id,
    kind: c.eventType,            // "class" or "course_session"
    canceled: c.isCanceled,
    title: c.name,
    summary: c.description,
    startsAt: c.start,
    timezone: c.timezone,
    location: c.isOnline ? "Online" : places.get(c.locationId)?.name ?? null,
    lecturers: c.lecturerIds.map((id) => lecturers.get(id)?.name).filter(Boolean),
    seatsLeft: c.capacity ? clamp(c.capacity.max - c.capacity.reserved) : null,
    prices: c.pricingOptions,
    url: c.publicUrl,
  })),
  ...workshops.data.map((w) => ({
    id: w._id,
    kind: "workshop",
    title: w.name,
    summary: w.shortDescription,
    startsAt: w.start,
    timezone: w.timezone,
    location: [w.address?.street, w.address?.city].filter(Boolean).join(", ") || null,
    lecturers: w.lecturerIds.map((id) => lecturers.get(id)?.name).filter(Boolean),
    seatsLeft: w.capacity ? w.capacity.available : null,
    prices: w.pricingOptions,
    url: w.publicUrl,
  })),
].sort((a, b) => a.startsAt.localeCompare(b.startsAt));

An unresolved locationId means the place was archived. Fall back to showing no location rather than treating it as an error.

4. Display times

Format the UTC start in the event’s timezone. A studio in Prague announces a class at 09:00, and that is what a visitor expects to read regardless of their own time zone:

new Intl.DateTimeFormat([], {
  hour: "2-digit",
  minute: "2-digit",
  timeZone: event.timezone,
}).format(new Date(event.startsAt));

Keep the UTC start for sorting and storage. Do not parse localTimeStart and then format it in the visitor’s time zone.

5. Display prices

A single event can offer several ways to pay. value is only a money amount when currency is present:

function label(option) {
  if (option.currency) return `${option.value} ${option.currency}`;
  if (option.type === "credit") return `${option.value} credits`;
  if (option.type === "pass") return `${option.value} entries`;
  return option.name ?? "Included";
}

Prefer the studio’s own name where you have room for it. See Pricing option.

6. Link back to booking

The API is read-only — it does not create reservations. Send visitors to publicUrl to book. For a course session that link points at the parent course, not the single session.

Course sessions

Classes and course sessions arrive in the same list. If you want a timetable of individual occurrences, render both. If you want a catalog of courses, group by courseId and show each course once:

const courses = new Map();
for (const e of classes.data) {
  if (e.eventType === "course_session" && !courses.has(e.courseId)) {
    courses.set(e.courseId, e);
  }
}

​1. Fetch reference data once

​2. Fetch the schedule

​3. Merge the two lists

​4. Display times

​5. Display prices

​6. Link back to booking

​Course sessions

1. Fetch reference data once

2. Fetch the schedule

3. Merge the two lists

4. Display times

5. Display prices

6. Link back to booking

Course sessions