Anwendungsfall der Kalenderkomponente

  • Freigeben Version: Washingtondc
  • Aktualisiert 7. März 2024
  • 4 Minuten Lesedauer

    • Fügen Sie die Kalenderkomponente auf einer neuen UI Builder Experience-Seite hinzu, und konfigurieren Sie sie.

    Vorbereitungen

    Erforderliche Rolle: ui_builder_admin

    Prozedur

    1. Navigieren zu Alle > Now-Experience-Framework > UI Builder.
    2. Öffnen Sie eine Experience, um in zu arbeiten, oder erstellen Sie eine Experience, indem Sie Erstellen > Experienceauswählen.
      Weitere Informationen zum Erstellen von Experiences finden Sie unter Konfigurieren Sie, wie Benutzer mit Ihren Anwendungen in interagieren UI Builder.
    3. Erstellen Sie eine Seitenvariante.
      Weitere Informationen zum Erstellen einer Seite in UI Builderfinden Sie unter Seiten in UI Builder erstellen.
    4. Wählen Sie in der Phase das Symbol + aus, um die Toolbox zu öffnen.
    5. Geben Sie in SuchkomponentenKalenderein.
    6. Wählen Sie Kalender aus.

      Die Kalenderkomponente wird zusammen mit Demodaten der Seite hinzugefügt. Die Demodaten zeigen Ihnen, was mit der Kalenderkomponente möglich ist und wie die Komponente strukturiert ist.

    7. Wählen Sie Speichern.
    8. Um zu sehen, wie der Kalender auf der Seite aussieht, wählen Sie Vorschau.
      Oben links befindet sich die optionale Schaltfläche +Neu und die Datumsauswahl, mit der Sie zum vorherigen oder nächsten Zeitraum oder einem bestimmten Datum navigieren können. Oben rechts befinden sich eine Zeitzonenauswahl, eine Ansichtsauswahl (z. B. Tag oder Arbeitswoche) und ein Symbol für das Einstellungsmenü, das Zugriff auf Tastenkombinationen bietet. Das Hauptkalenderraster in der Mitte zeigt die Zeit entlang der vertikalen Achse links und die angegebene Ansicht horizontal oben. Kalenderereignisse werden in Zellen innerhalb des Rasters angezeigt, die die Start- und Endzeit des Ereignisses angeben. Der kontextbezogene Seitenbereich wird rechts neben dem Kalenderraster angezeigt und zeigt standardmäßig die Agendaansicht mit Karten an, die die Ereignisse im Kalender darstellen.
    9. Wählen Sie oben rechts das X aus, um das Vorschaufenster zu schließen.
      Es gibt viele Möglichkeiten, die voll funktionsfähige Kalenderkomponente entsprechend Ihren geschäftlichen Anforderungen zu konfigurieren. Die folgenden Schritte zeigen einige Optionen.
    10. Ändern Sie die Standardansicht von Tag zu Woche, indem Sie im Konfigurationsbereich auf der rechten Seite die Registerkarte Konfigurieren auswählen und im Feld Aktuelle ausgewählte Ansicht (möglicherweise müssen Sie nach unten scrollen) die Option Kalenderwocheauswählen.
      Die Kalenderkomponente aktualisiert die Phase sofort und zeigt eine Woche an.
    11. Ändern Sie auf der Registerkarte Konfigurieren die Zeitzone, indem Sie zum Abschnitt Daten und Gebietsschema scrollen und im Feld Zeitzone eine neue Auswahl treffen.
      Die neue Zeitzone wird oben rechts im Kalender in der Phase angezeigt.
    12. Standardmäßig ist der erste im Kalender angezeigte Tag Montag. Sie können dies jedoch ändern, indem Sie auf der Registerkarte Konfigurieren im Feld Erster Tag der Woche eine andere Zahl angeben.
      Geben Sie 0 für Sonntag, 1 für Montag, 2 für Dienstag usw. ein.
    13. Fügen Sie dem Kalender eine Überschrift hinzu.
      1. Wechseln Sie in der Inhaltsstruktur auf der linken Seite zu Textkörper > Kalender 1 > left-header-slot, und wählen Sie + Komponente hinzufügen aus.
      2. Wählen Sie die Komponente Stilisierter Text aus.
      3. Wählen Sie im Konfigurationsbereich auf der rechten Seite Keine – Komponente manuell konfigurieren aus.
      4. Wählen Sie im Konfigurationsbereich die Registerkarte Konfigurieren aus.
      5. Geben Sie im Feld Textden neuen Überschriftentext ein, z. B. Mein Kalender.
      6. Wählen Sie Speichern.
    14. Konfigurieren Sie den kontextbezogenen Bereich.
      1. Sehen Sie sich zuerst an, wie das Fenster aussieht und funktioniert, indem Sie Vorschauauswählen.
        Der Bereich wird auf der rechten Seite angezeigt und zeigt standardmäßig die Agenda-Ansicht an. In der Agendaansicht werden Karten mit Details zu jedem einzelnen Event für alle Agendapunkte in der ausgewählten Ansicht angezeigt (z. B. Tag oder Woche). Unter dem Symbol für die Agendaansicht befinden sich weitere Symbole für Filter, Analytikcenter und Pfeil. Die folgenden Schritte führen Sie durch den Prozess zum Entfernen dieser drei Symbole und zum Konfigurieren einer neuen Komponente für den kontextbezogenen Seitenbereich.
      2. Wählen Sie oben rechts das X aus, um die Vorschau -Überlagerung zu schließen.
      3. Wechseln Sie in der Inhaltsstruktur auf der linken Seite zu Textkörper, und wählen Sie Kalender 1aus.
      4. Wählen Sie im Konfigurationsbereich die Registerkarte Konfigurieren aus.
      5. Scrollen Sie nach unten zum Abschnitt Andere Eigenschaften.
      6. Bewegen Sie den Mauszeiger über das Feld Elemente des Kontextbereichs, und wählen Sie Bearbeitenaus.
      7. Entfernen Sie die Symbole filter-outline, Analytics-center-outlineund Pfeil nach unten, links ausfüllen, indem Sie für jedes Symbol Element entfernen (Papierkorb) auswählen.
      8. Wählen Sie Übernehmen.
        Die Kalenderkomponente wird in der Phase sofort aktualisiert und zeigt die drei Symbole im kontextbezogenen Bereich nicht mehr an.
      9. Wählen Sie Speichern.
      10. Fügen wir nun dem kontextbezogenen Seitenbereich eine Komponente hinzu, indem wir in der Inhaltsstruktur zu Textkörper > Kalender 1 > contextual-panel-content gehen und + Komponentehinzufügen auswählen.
      11. Geben Sie in den SuchkomponentenFlex ein, und wählen Sie Flexboxaus.
      12. Wählen Sie im Konfigurationsbereich den Komponentennamen Container 2aus.
      13. Geben Sie im Feld KomponentenbezeichnungTextcontainerein.
      14. Geben Sie in Komponenten-IDtext_container ein.
      15. Wählen Sie Übernehmen.
      16. Wählen Sie im Konfigurationsbereich Keine – Komponente manuell konfigurieren aus.
      17. Fügen wir nun dem kontextbezogenen Seitenbereich eine Komponente hinzu, indem wir in der Inhaltsstruktur zu Textkörper > Kalender 1 > contextual-panel-content > Textcontainer wechseln und + Komponentehinzufügen auswählen.
      18. Geben Sie unter Suchkomponentensty ein, und wählen Sie Stilisierter Textaus.
      19. Wählen Sie im Konfigurationsbereich auf der Registerkarte Konfigurierendie Option Keine – Komponente manuell konfigurieren aus.
      20. Entfernen Sie im Konfigurationsbereich auf der Registerkarte Konfigurieren den Inhalt des Felds Text, und geben Sie Hello Worldein.
      21. Wählen Sie Speichern.
      22. Wechseln Sie in der Inhaltsstruktur auf der linken Seite zu Textkörper, und wählen Sie Kalender 1aus.
      23. Wählen Sie im Konfigurationsbereich die Registerkarte Konfigurieren aus.
      24. Scrollen Sie nach unten zum Abschnitt Andere Eigenschaften.
      25. Bewegen Sie den Mauszeiger über das Feld Elemente des Kontextbereichs, und wählen Sie Bearbeitenaus.
      26. Wählen Sie neben Kontextbereichselemente (1)das Symbol + aus.
      27. In Symboltypcalendar-outline.
      28. Geben Sie im ID -Typ text_container ein.
      29. In Bezeichnungstyp Textcontainer.
      30. Wählen Sie in Öffnenfalseaus.
      31. Wählen Sie Übernehmen.
      32. Wählen Sie Speichern.
        Beachten Sie, dass jetzt im kontextbezogenen Seitenbereich ein neues Symbol angezeigt wird.
      33. Wählen Sie Vorschau.
      34. Wählen Sie im kontextbezogenen Seitenbereich das neue, zweite Symbol aus.
        Der Bereich zeigt den Textcontainer mit der stilisierten Textkomponente und den Wörtern Hello World.
      35. Schließen Sie das Vorschaufenster, indem Sie oben rechts auf das X klicken.
    15. Konfigurieren Sie die Schaltfläche Neu.

    16. Konfigurieren Sie ein Popover, das angezeigt wird, wenn ein Event im Kalenderraster ausgewählt wird.
      1. Wechseln Sie in der Inhaltsstruktur auf der linken Seite zu Textkörper > Spaltenlayout 1 > Spalte 1 > Kalender 1 > event-popover, und wählen Sie + Komponentehinzufügen aus.