Termine und Zeitfenster mit der Booking API anzeigen

Nutzen Sie diese Anleitung, wenn Kunden vor der Buchung Datum und Uhrzeit wählen, zum Beispiel beim Zeitfenster-Eintritt oder bei wiederkehrenden Führungen. Sie zeigen einen Kalendermonat an, listen die Zeitfenster des gewählten Tages auf und legen ein Zeitfenster in den Warenkorb. Veranstaltungen mit einem festen Termin brauchen keinen Kalender; siehe Veranstaltung mit festem Termin buchen.

Bevor Sie beginnen

• Eine Eventvorlage oder ein Eintritt mit veröffentlichten Zeitfenstern im Shop. In der Booking API haben diese Angebote die Typen EVENT_TEMPLATE und ADMISSION.
• Die id des Angebots, zum Beispiel aus offers(posId: "auto", offerableTypes: [EVENT_TEMPLATE]).
• Die Header, die im Schnellstart für die Booking API beschrieben sind.

Kalender anzeigen

Fragen Sie die buchbaren Termine des sichtbaren Monats ab. span ist ein halboffener Zeitraum: Der erste Tag ist enthalten, der letzte nicht. Übergeben Sie die gewünschte Anzahl an Plätzen als quantity.

query CalendarDates($id: ID!, $span: TsRange!, $quantity: Int!) {
  bookingCalendarAvailability(type: EVENT_TEMPLATE, id: $id, span: $span, quantity: $quantity) {
    dates {
      value
      remainingQuota
      currentPriceValue
    }
  }
}

{ "id": "42", "span": "[2026-10-01,2026-11-01)", "quantity": 3 }

{
  "data": {
    "bookingCalendarAvailability": {
      "dates": [
        { "value": "2026-10-07", "remainingQuota": "50", "currentPriceValue": { "amount": 2000, "currency": "EUR" } },
        { "value": "2026-10-14", "remainingQuota": "12", "currentPriceValue": { "amount": 2500, "currency": "EUR" } }
      ]
    }
  }
}

Jeder Eintrag ist ein Datum mit mindestens einem buchbaren Zeitfenster. remainingQuota ist die Zahl der freien Plätze an diesem Tag, currentPriceValue der niedrigste Preis des Tages, den Sie als Ab-Preis anzeigen können. Verwenden Sie ADMISSION als type für Eintritte.

Zeitfenster eines Tages auflisten

Wählt der Kunde ein Datum, fragen Sie die Zeitfenster dieses Tages ab. Übergeben Sie den Tag von Mitternacht bis Mitternacht in der Zeitzone des Angebots, umgerechnet in UTC, und verwenden Sie spanOperator: CONTAINS_START, um die Zeitfenster zu erhalten, die an diesem Tag beginnen. Die Zeitzone steht im Feld timeZone des Angebots.

query TimeSlots($id: ID!, $day: TsRange!, $quantity: Int!) {
  offer(id: $id, type: EVENT_TEMPLATE, posId: "auto") {
    ... on EventTemplate {
      timeZone
      potentialEvents(posId: "auto", span: $day, spanOperator: CONTAINS_START, quantity: $quantity) {
        edges {
          node {
            span
            remainingQuota
            priceRules(posId: "auto") {
              id
              priceCategory {
                nameTranslated
              }
              product {
                currentPriceValue
              }
            }
          }
        }
      }
    }
  }
}

{ "id": "42", "day": "[2026-10-06T22:00:00Z,2026-10-07T22:00:00Z)", "quantity": 3 }

Dieses Beispiel ist der 7. Oktober 2026 in der Zeitzone Europe/Berlin.

Jedes Zeitfenster hat einen span in UTC, zum Beispiel [2026-10-07T08:00:00Z,2026-10-07T08:30:00Z). Zeigen Sie den Beginn in der timeZone des Angebots an. Die priceRules eines Zeitfensters sind die Preiskategorien, die der Kunde wählen kann, etwa Erwachsene und Kinder, mit ihren Preisen.

Zeitfenster in den Warenkorb legen

Legen Sie das Zeitfenster mit seinem span als offerableSpan in den Warenkorb. Fügen Sie je gewählter Preiskategorie eine Preisangabe mit der id der Preisregel hinzu.

{
  "input": {
    "offerableType": "EVENT_TEMPLATE",
    "offerableId": "42",
    "offerableSpan": "[2026-10-07T08:00:00Z,2026-10-07T08:30:00Z)",
    "pricings": [
      { "quantity": 2, "priceOriginType": "PRICE_RULE", "priceOriginId": "1" },
      { "quantity": 1, "priceOriginType": "PRICE_RULE", "priceOriginId": "2" }
    ]
  }
}

Senden Sie diese Variablen mit der Mutation AddToCart aus dem Schnellstart. Fügen Sie requestId mit dem Warenkorb-Token hinzu, wenn der Warenkorb bereits existiert.

Veranstaltung mit festem Termin buchen

Veranstaltungen mit einem festen Datum und einer festen Uhrzeit haben den Typ EVENT. Lesen Sie die Preiskategorien der Veranstaltung und legen Sie sie ohne offerableSpan in den Warenkorb:

query EventPrices($id: ID!) {
  offer(id: $id, type: EVENT, posId: "auto") {
    ... on Event {
      id
      span
      remainingQuota
      priceRules(posId: "auto") {
        id
        priceCategory {
          nameTranslated
        }
        product {
          currentPriceValue
        }
      }
    }
  }
}

Rufen Sie dann AddToCart mit offerableType: "EVENT", der id der Veranstaltung und einer Preisangabe je gewählter Preiskategorie auf.

Fehlerbehebung

Verwandte Artikel

• Schnellstart für die Booking API
• So funktioniert die Booking API
• Checkout abschließen und Zahlung mit der Booking API abwickeln