> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-de/experience-components/ax-calendar.md).

# AX - Kalender

## Übersicht

**AX - Kalender** ist eine Experience-Cloud-Komponente, die Salesforce-Datensätze als Ereignisse in einer interaktiven Kalenderansicht auf Experience-Sites-Seiten anzeigt.

Verwenden Sie sie, um Portalbenutzern ihre Termine, geplanten Aufgaben, Veranstaltungsanmeldungen, Projektfristen oder andere datumsbasierte Datensätze anzuzeigen. Benutzer können Ereignisse nach Monat, Woche, Tag oder im Agenda-Format anzeigen und auf Ereignisse klicken, um Details zu sehen oder zu Datensätzen zu navigieren.

Perfekt für die Terminplanung von Kundenterminen, Veranstaltungskalender, Ansichten zur Servicebuchung, Projektzeitpläne oder überall dort, wo Portalbenutzer ihre datumsbezogenen Aktivitäten in einem visuellen Kalenderformat sehen müssen.

## Konfiguration

### Datenquelle

Dieser wesentliche Schritt bei der Konfiguration Ihrer Avonni-Kalenderkomponente stellt die Verbindung zwischen Ihren Kalendereinträgen und den relevanten Daten in Ihrer Salesforce-Umgebung her.

Die Datenquelle bestimmt, welche Informationen Ihr Kalender anzeigt.

<figure><img src="/files/9b575257f6a38df3b11306be0cb9902fb88aac44" alt=""><figcaption></figcaption></figure>

Sie haben zwei Optionen, um die Datenquelle zu verwenden

<table><thead><tr><th width="126">Option</th><th>Beschreibung</th><th>Bestes Anwendungsbeispiel</th></tr></thead><tbody><tr><td><strong>Manuell</strong></td><td>Geben Sie Ereignisse und Ressourcen manuell direkt in die Kalenderoberfläche ein.</td><td>Einmalige Ereignisse oder Situationen, in denen der Kalender nicht mit Ihren Salesforce-Daten verknüpft sein muss.</td></tr><tr><td><strong>Abfrage</strong></td><td>Rufen Sie Ereignis- und Ressourceninformationen automatisch aus Ihren Salesforce-Daten ab. Sie können eine benutzerdefinierte Abfrage erstellen, um Daten aus jedem beliebigen Salesforce-Objekt anzuzeigen.</td><td>Wenn Ihr Kalender immer die aktuellsten Informationen aus Ihren Salesforce-Datensätzen anzeigen soll.</td></tr></tbody></table>

* **Manuell:**
  * Fügen Sie Ereignisse und Ressourcen direkt in der Kalenderoberfläche hinzu.
  * Nützlich für einmalige Ereignisse oder wenn Sie Daten nicht mit Salesforce verknüpfen müssen.
* **Abfrage:**
  * Rufen Sie Informationen direkt aus Ihren Salesforce-Daten ab.
  * Erstellen Sie eine benutzerdefinierte Abfrage, um Daten aus jedem beliebigen Salesforce-Objekt im Kalender anzuzeigen.
  * Ideal, wenn Ihr Kalender stets aktuelle Informationen aus Salesforce widerspiegeln soll.

#### Konfiguration der Abfrage-Datenquelle

Damit Ihr Avonni-Kalender die relevantesten Informationen anzeigt, müssen Sie konfigurieren, woher seine Daten stammen. Dieser Prozess umfasst die Auswahl des richtigen Salesforce-Objekts und optional das Anwenden von Filtern, Gruppierungen und Sortierungen, um die Ergebnisse zu verfeinern.

Lassen Sie uns die Schritte aufschlüsseln:

* **Objektauswahl:** Beginnen Sie mit der Auswahl des spezifischen Salesforce-Objekts (z. B. Ereignisse, Aufgaben, benutzerdefinierte Objekte usw.), das die Datensätze enthält, die Ihr Kalender anzeigen soll.
* **Optionale Filterung:** Wenn Sie nur eine Teilmenge der Daten aus dem ausgewählten Objekt anzeigen möchten, verwenden Sie die Filterfunktion, um bestimmte Bedingungen festzulegen. Sie könnten beispielsweise filtern, um nur "Bestätigte" Ereignisse oder Datensätze innerhalb eines bestimmten Datumsbereichs anzuzeigen.
* **Gruppierung (optional):** Gruppieren Sie Ihre Daten, um Ihren Kalender effektiv zu organisieren. Beispielsweise trennt die Gruppierung nach einem Ressourcenfeld (z. B. einem Raum, Eigentümer oder Team) Ereignisse in eigene Ressourcenzeilen.
* **Sortierung:** Wählen Sie ein Feld für "Sortieren nach" und die Richtung (aufsteigend oder absteigend), um die Reihenfolge festzulegen, in der die Ereignisse angezeigt werden sollen.
* **Zusätzliche Felder:** Wenn Sie Felder in Ihren Kalender aufnehmen müssen, die nicht direkt für die Anzeige oder Interaktionen verwendet werden, fügen Sie sie im Abschnitt "Zusätzliche Felder" hinzu. Dies ist besonders nützlich für Felder, die innerhalb der Suchleiste des Kalenders durchsuchbar sein sollen.

### Datenzuordnung

Datenzuordnungen sind der Schlüssel dafür, dass Ereignisse aus Ihren Salesforce-Datensätzen korrekt in Ihrem Avonni-Kalender angezeigt werden. Stellen Sie sich das so vor, als würden Informationen aus Salesforce in eine Sprache übersetzt, die Ihr Kalender versteht.

**Wesentliche Zuordnungen**

Hier ist eine Übersicht über die gängigsten Zuordnungen, die Sie konfigurieren müssen:

* **Titel:** Das Salesforce-Feld, das den Ereignisnamen oder Titel enthält (z. B. "Betreff" beim Standardobjekt Ereignis).
* **Ressourcenname:** Das Feld, das angibt, welcher Ressource das Ereignis zugewiesen ist (z. B. ein Feld "Raum" für Raumreservierungen oder ein Feld "Eigentümer" für Verkaufstermine). Wenn dieses Feld leer gelassen wird, werden alle Ereignisse zusammen angezeigt.
* **Von:** Das Salesforce-Feld, das das Startdatum und die Startzeit des Ereignisses enthält (z. B. "StartDateTime").
* **Bis:** Das Salesforce-Feld, das das Enddatum und die Endzeit des Ereignisses enthält (z. B. "EndDateTime").

**Beispiel:**

Wenn Sie einen Kalender für Besprechungsraum-Buchungen erstellen, könnten Sie die folgenden Felder zuordnen:

* **Titel:** Besprechungsthema
* **Ressourcenname:** Raumname
* **Von:** Geplanter Beginn
* **Bis:** Geplantes Ende

### Allgemeine Einstellungen

**API-Name** ist eine eindeutige Kennung zur Referenzierung der Komponente. **Wochentag des Wochenbeginns** legt fest, an welchem Tag jede Woche beginnt, und **Zeitzone anzeigen** zeigt die Zeitzone des Kalenders an.

### **Ausgewählte Ansicht**

Der Avonni-Kalender bietet drei verschiedene Anzeigeformate, um unterschiedlichen Planungs- und Organisationsvorlieben gerecht zu werden. Jedes Format bietet eine einzigartige Möglichkeit, Ihre Ereignisse und Ressourcen anzuzeigen und mit ihnen zu interagieren.

<table><thead><tr><th width="178.33333333333331">Ausgewählte Ansicht</th><th width="267">Beschreibung</th><th>Bild</th></tr></thead><tbody><tr><td><strong>Kalender</strong></td><td>Dies ist die traditionelle rasterbasierte Ansicht, die die meisten Menschen mit Kalendern verbinden.</td><td><img src="/files/0cc2135ee477e62c1ee0a13dfb4315329a3b9ac5" alt=""></td></tr><tr><td><strong>Agenda</strong></td><td>Jeder Eintrag in der Liste enthält Details zum Ereignis und ist in chronologischer Reihenfolge angeordnet.</td><td><img src="/files/7635f7e05fb8e648e9b8d16eaa8a188c1c14c58c" alt=""></td></tr><tr><td><strong>Zeitleiste</strong></td><td>Bietet den Benutzern eine lineare visuelle Darstellung ihres Zeitplans über einen auswählbaren Zeitraum.</td><td><img src="/files/cd180fc2c052022df616976ce812d2ae1b89eee6" alt=""></td></tr></tbody></table>

### Zeitachsen-Variante

Der Avonni-Kalender bietet zwei Möglichkeiten, Ihre Zeitachsenansicht anzuzeigen:

* **Horizontale Zeitachse:**
  * Ereignisse werden horizontal über den Bildschirm angeordnet, wobei die Zeitachse von links nach rechts verläuft.
  * Ideal zur Visualisierung von Zeitplänen über einen längeren Zeitraum (z. B. Wochen oder Monate).
* **Vertikale Zeitachse:**
  * Ereignisse werden vertikal gestapelt, wobei die Zeitachse von oben nach unten verläuft.
  * Diese Ansicht eignet sich gut, um detaillierte Zeitpläne innerhalb eines Tages oder weniger Tage anzuzeigen.

### Ausgeblendete Ansichten

Die Option "Ausgeblendete Ansichten" verhindert, dass Benutzer beim Arbeiten mit dem Avonni-Kalender bestimmte Ansichten auswählen können.

### An Ansicht anpassen

Die Einstellung "An Ansicht anpassen" passt die Kalenderansicht automatisch an, damit alle geplanten Ereignisse ohne Scrollen auf den Bildschirm passen. So funktioniert es und in welchen Fällen es am hilfreichsten ist:

**So funktioniert es**

* Der Kalender verkleinert oder vergrößert seine Zeitskala, damit alle Ereignisse innerhalb Ihrer ausgewählten Ansicht (Tag, Woche usw.) Platz finden.

**Vorteile**

* **Schneller Überblick:** Sehen Sie alle geplanten Ereignisse auf einen Blick.
* **Kein Scrollen:** Vermeiden Sie das Auf- und Abscrollen, um Ereignisse zu finden.

**Wissenswertes**

* Bei vielen Ereignissen oder auf sehr kleinen Bildschirmen kann die komprimierte Ansicht das Lesen einzelner Ereignisdetails erschweren.

### Toolbar-Optionen

* **Titel der Symbolleiste:** Legen Sie einen benutzerdefinierten Titel für die Kopfzeile Ihres Kalenders fest. Dies hilft Benutzern, den Zweck des Kalenders zu verstehen (z. B. "Zeitplan des Vertriebsteams", "Kommende Ereignisse" usw.).
* **Symbolleiste ausblenden:** Sie können die gesamte Symbolleiste ausblenden, um ein schlankeres Erscheinungsbild zu erzielen oder den Anzeigebereich des Kalenders zu maximieren.

### Avatar

Der Bereich „Avatar“ ermöglicht es Ihnen, der Kopfzeile Ihres Avonni-Kalenders ein Bild hinzuzufügen. Dies kann helfen, den Kalender zu personalisieren und eine visuelle Kennung bereitzustellen.

### **Steuerung des Zeitraums**

Die Zeitsperren-Einstellungen des Avonni-Kalenders bieten Flexibilität beim Anzeigen von Ereignissen und beim Verwalten Ihres Zeitplans. Wählen Sie aus diesen Optionen:

* **Tagesansicht:** Sie können sich auf einen einzelnen Tag konzentrieren oder sie so anpassen, dass mehrere aufeinanderfolgende Tage angezeigt werden (z. B. eine 4-tägige Arbeitswoche).
* **Wochenansicht:** Sehen Sie den Wochenplan auf einen Blick.
* **Monatsansicht:** Erhalten Sie einen umfassenderen Überblick über den Monat, mit der Möglichkeit, 2 bis 4 Wochen gleichzeitig oder eine benutzerdefinierte Anzahl von Wochen anzuzeigen.

#### **So konfigurieren Sie Zeiträume**

Jeder Zeitraum (Tag, Woche, Monat) hat seine eigenen Einstellungen:

* **Beschriftung:** Geben Sie Ihrem Zeitraum einen aussagekräftigen Namen (z. B. "Arbeitswoche").
* **Symbolname:** Wählen Sie ein visuelles Symbol, um den Zeitraum schnell zu erkennen.
* **Einheit:** Wählen Sie, ob dieser Zeitraum Tage, Wochen oder Monate repräsentiert.
* **Umfang:** Legen Sie die Anzahl der anzuzeigenden Einheiten fest (z. B. 5 Tage, 2 Wochen).

#### **Kopfzeilen der Zeitachse (nur Zeitachsenansicht)**

Passen Sie die Kopfzeilen Ihrer Zeitachsenansicht fein an, um die für Sie wichtigsten Informationen anzuzeigen, z. B. Kalenderwochennummern, Daten oder Monate.

### **Verfügbare Zeit**

Der Abschnitt "Verfügbare Zeiten" bietet mehrere Optionen zur Anpassung der Zeitrahmen, die in Ihrem Kalender angezeigt werden. Diese Funktion ist nützlich, um sich auf bestimmte interessante Zeiträume zu konzentrieren. Hier sind die verfügbaren Optionen:

<table><thead><tr><th width="172">Attribut</th><th>Beschreibung</th></tr></thead><tbody><tr><td><strong>Tage</strong></td><td>Mit dieser Option können Sie festlegen, welche Wochentage im Kalender sichtbar sein sollen. Wenn ausgewählt, zeigt der Kalender nur die gewählten Tage an und blendet den Rest effektiv aus.</td></tr><tr><td><strong>Monat</strong></td><td>Wie bei der Option Tage können Sie auswählen, welche Monate in Ihrem Kalender sichtbar sein sollen.</td></tr><tr><td><strong>Zeitrahmen</strong></td><td>Mit dem Zeitrahmen können Sie die auf Ihrem Kalender sichtbaren Stunden präzise steuern und sich so auf die wichtigsten Zeitfenster konzentrieren.</td></tr></tbody></table>

### **Ereignisanzeige**

Der Abschnitt zur Ereignisanzeige bietet eine Reihe von Optionen, um die visuelle Gestaltung Ihrer Kalenderereignisse anzupassen.

Hier sind die verfügbaren Optionen:

* **Thema**: Mit dieser Option können Sie ein visuelles Design für Ihre Ereignisse auswählen. Sie können aus mehreren voreingestellten Designs wählen, z. B. Standard, Transparent, Linie, Offen oder Abgerundet, die jeweils einen einzigartigen visuellen Stil bieten, der zu Ihren persönlichen Vorlieben oder Ihrer Markenidentität passt.
* **Palette**: Mit dieser Funktion können Sie jeder Ressource verschiedene Farben aus einer ausgewählten Palette zuweisen. Eine Farbpalette ist eine Sammlung von Farben, die eine konsistente Farbnutzung über verschiedene Ressourcen hinweg ermöglicht. Dies hilft, verschiedene Ressourcentypen in Ihrem Kalender visuell zu unterscheiden und schnell zu erkennen.
* **Popover-Felder**: Wenn ein Benutzer mit der Maus über ein Ereignis fährt, werden diese Felder in einem kleinen Popup-Fenster (oder einem "Popover") angezeigt. So können Benutzer wichtige Ereignisdetails anzeigen, ohne darauf zu klicken.

### **Filter**

Passen Sie an, wie Benutzer die im Avonni-Kalender angezeigten Ereignisse verfeinern.

* **Ressourcenfilter ausblenden:** Wählen Sie diese Option, um den Filter zu entfernen, mit dem Benutzer Ereignisse nach bestimmten Ressourcen (z. B. Personen, Räumen, Geräten) anzeigen können.
* **Datumswähler ausblenden:** Wählen Sie dies, um das Kalendersymbol in der Kopfzeile zu entfernen, mit dem Benutzer zu einem bestimmten Datum navigieren können.
* **Typ (horizontal, Popover, linkes Panel, rechtes Panel, vertikal):** Legen Sie den visuellen Stil und die Position des Filterbereichs fest:
  * **Horizontal:** Eine Leiste über der Oberseite des Kalenders.
  * **Popover:** Ein kompakter Filter, der sich beim Klicken öffnet.
  * **Linkes/rechtes Panel:** Ein Seitenpanel für Filteroptionen.
  * **Vertikal:** Eine vertikale Liste von Filteroptionen

### **Suche**

* **Suche anzeigen:** Aktivieren Sie diese Option, um oben in Ihrem Avonni-Kalender ein Suchfeld hinzuzufügen, damit Benutzer bestimmte Ereignisse schnell finden können.
* **Platzhalter:** Fügen Sie einen kurzen Hinweis ein (z. B. "Ereignisse suchen..."), um Benutzer zu leiten, wonach sie im Kalender suchen können.
* **Position (links, rechts, zentriert, füllen):** Wählen Sie aus, wo das Suchfeld in der Kopfzeile des Kalenders platziert werden soll, um das beste visuelle Layout zu erzielen.

## Interaktionen

Die Avonni-Kalenderkomponente geht über die bloße Anzeige von Ereignissen hinaus; sie bietet Ihren Benutzern eine Reihe von Möglichkeiten, direkt mit ihr zu interagieren und weitere Aktionen auszulösen.

### **Arten von Aktionen**

* **Aktionen für neue Ereignisse:** Passen Sie an, was passiert, wenn Benutzer ihren Cursor über den Kalender ziehen, um ein neues Ereignis zu planen. Sie könnten beispielsweise automatisch ein Formular zur Ereigniserstellung öffnen.
* **Header-Aktionen:** Fügen Sie benutzerdefinierte Schaltflächen zur Symbolleiste des Kalenders hinzu. Diese Schaltflächen können so programmiert werden, dass sie eine der unten aufgeführten verfügbaren Interaktionen auslösen.
* **Kontextmenü-Aktionen:** Diese Schaltflächen erscheinen, wenn ein Benutzer mit der rechten Maustaste auf ein Ereignis klickt oder die Ereignisdetails öffnet. Konfigurieren Sie diese Schaltflächen so, dass Aktionen wie Bearbeiten, Löschen oder das Auslösen zusätzlicher, mit dem Ereignis verbundener Prozesse möglich sind.

### **Verfügbare Interaktionen**

Die Avonni-Kalenderkomponente bietet mehrere Interaktionen, die durch die oben beschriebenen Aktionen ausgelöst werden können:

* [**Toast anzeigen**](/experience-cloud/experience-cloud-de/eigenschaftenbereich/interactions/show-toast.md)**:** Zeigen Sie dem Benutzer eine kurze Benachrichtigungsnachricht an, die eine Aktion bestätigt oder Feedback gibt.
* [**Navigieren**](/experience-cloud/experience-cloud-de/eigenschaftenbereich/interactions/navigate.md)**:** Leiten Sie den Benutzer auf eine andere Seite innerhalb Ihrer Experience Cloud oder auf eine externe Website weiter.
* [**Alarm-Modalfenster öffnen**](/experience-cloud/experience-cloud-de/eigenschaftenbereich/interactions/open-alert-modal.md)**:** Zeigen Sie ein Pop-up-Fenster mit wichtigen Informationen oder einer Bestätigungsaufforderung an.
* [**Bestätigungsdialog öffnen**](/experience-cloud/experience-cloud-de/eigenschaftenbereich/interactions/open-confirm.md)**:** Zeigen Sie ein Bestätigungsdialogfeld an, in dem der Benutzer aufgefordert wird, eine Aktion zu bestätigen (z. B. das Löschen eines Ereignisses).
* [**Flow-Dialog öffnen**](/experience-cloud/experience-cloud-de/eigenschaftenbereich/interactions/open-flow-dialog.md)**:** Starten Sie einen Salesforce Flow, damit Sie komplexe Prozesse automatisieren oder Benutzer durch mehrere Schritte führen können.
* **Abfrage aktualisieren:** Aktualisieren Sie die Kalenderanzeige mit den neuesten Daten aus Salesforce.

### **So implementieren Sie es**

Um diese Aktionen und Interaktionen zu konfigurieren, arbeiten Sie in den Einstellungen der Avonni-Kalenderkomponente im Experience Cloud Builder. Jeder Aktionstyp (Neues Ereignis, Kopfzeile, Kontextmenü) hat einen Abschnitt, in dem Sie die auszulösende Interaktion definieren können.

## Styling

{% tabs %}
{% tab title="Größe" %}

* **Breite:** Legt die horizontale Breite des Kalenders fest. Sie können feste Werte (Pixel, Prozentsätze) verwenden oder den Kalender abhängig von seinem Container anpassen lassen.
* **Höhe:** Diese Einstellung legt die vertikale Höhe des Kalenders fest. Ähnlich wie bei der Breite können Sie feste oder flexible Höheneinstellungen verwenden.
* **Überlauf:** Legt fest, wie der Kalender mit Inhalten umgeht, die seine Abmessungen überschreiten. Optionen könnten sein:
  * **Sichtbar:** Inhalt fließt außerhalb des Kalenders.
  * **Ausgeblendet:** Inhalt wird an den Rändern des Kalenders abgeschnitten.
  * **Scrollen:** Der Kalender erhält Bildlaufleisten, wenn der Inhalt überläuft.
    {% endtab %}

{% tab title="Symbolleiste" %}

* **Hintergrundfarbe:** Diese Einstellung legt die Hintergrundfarbe der Symbolleiste des Kalenders fest (der Bereich, der normalerweise Navigationsschaltflächen, Ansichtsauswahl usw. enthält).
  {% endtab %}
  {% endtabs %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-de/experience-components/ax-calendar.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.