Termine und Zeitfenster mit der Booking API anzeigen

Last verified
Last verified 29. Sept. 2026

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; wie Sie sie verkaufen, zeigt der Schnellstart für die Booking API.

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. type ist EVENT_TEMPLATE oder ADMISSION. span ist ein halboffener Zeitraum: Der erste Tag ist enthalten, der letzte nicht. Übergeben Sie die gewünschte Anzahl an Plätzen als quantity.

graphql
query CalendarDates($type: OfferableTypeEnum!, $id: ID!, $span: TsRange!, $quantity: Int!) {
  bookingCalendarAvailability(type: $type, id: $id, span: $span, quantity: $quantity) {
    dates {
      value
      remainingQuota
      currentPriceValue
    }
  }
}
json
{ "type": "EVENT_TEMPLATE", "id": "42", "span": "[2026-10-01,2026-11-01)", "quantity": 3 }
json
{
  "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.

  • Die Termine werden in Datumsreihenfolge zurückgegeben.
  • remainingQuota ist eine Zahl, die als Zeichenkette gesendet wird. "2147483647" bedeutet, dass das Angebot keine Platzbegrenzung hat; zeigen Sie diesen Wert nicht als Anzahl an.

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.

graphql
query TimeSlots($type: OfferableTypeEnum!, $id: ID!, $day: TsRange!, $quantity: Int!) {
  offer(id: $id, type: $type, posId: "auto") {
    ... on Admission {
      timeZone
      priceRules(posId: "auto") {
        id
        priceCategory {
          nameTranslated
        }
        product {
          currentPriceValue
        }
      }
      potentialEvents(posId: "auto", span: $day, spanOperator: CONTAINS_START, quantity: $quantity) {
        edges {
          node {
            span
            remainingQuota
          }
        }
      }
    }
    ... 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
              }
            }
          }
        }
      }
    }
  }
}
json
{ "type": "EVENT_TEMPLATE", "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 Preiskategorien, die der Kunde wählen kann, etwa Erwachsene und Kinder, stehen in priceRules:

  • Bei einer Eventvorlage hat jedes Zeitfenster eigene priceRules.
  • Bei einem Eintritt gehören die priceRules zum Eintritt und gelten für alle Zeitfenster; die Zeitfenster selbst haben keine.

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. Verwenden Sie für einen Eintritt offerableType: "ADMISSION".

json
{
  "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. Das zurückgegebene totalGrossValue kann höher sein als die Summe der Preise, wenn der Veranstalter Gebühren erhebt.

Fehlerbehebung

ProblemWas Sie prüfen
Der Kalender liefert keine TermineDas Angebot ist für den Shop veröffentlicht und hat im angefragten Zeitraum Zeitfenster. Das Ende des Zeitraums ist ausgeschlossen.
Ein Tag zeigt freie Plätze, aber keine ZeitfensterVerwenden Sie für Termine und Zeitfenster dieselbe quantity und einen Tageszeitraum von Mitternacht bis Mitternacht in der Zeitzone des Angebots, umgerechnet in UTC.
Das Hinzufügen schlägt mit einem Verfügbarkeitsfehler fehlDas Zeitfenster ist inzwischen ausgebucht. Laden Sie die Zeitfenster neu und lassen Sie den Kunden erneut wählen.

Verwandte Artikel

Bereit loszulegen?

Buchen Sie eine kostenlose Demo oder kontaktieren Sie uns — wir freuen uns auf Sie.