Kalender

Kalender in Power Apps erstellen – Schritt-für-Schritt-Anleitung

Ein interaktiver Kalender in Power Apps? Kein Problem! Obwohl Power Apps kein vorgefertigtes Kalender-Steuerelement bietet, kannst du mit etwas Kreativität und den richtigen Funktionen deinen eigenen Kalender erstellen. Dieser zeigt Termine aus einer SharePoint-Liste an und ermöglicht es dir, Datumswerte auszuwählen und anzuzeigen.

Ich zeige dir, wie du einen Kalender von Grund auf in Power Apps erstellen und an deine Bedürfnisse anpassen kannst.

Schritt 1: SharePoint Liste erstellen

Zunächst benötigst du eine Datenquelle. Erstelle in SharePoint eine Liste, die als Basis für deinen Kalender dient.

Schritt 2: Kalenderlayout in Power Apps erstellen

Jetzt geht es um das visuelle Herzstück deines Kalenders. Eine gut designte App sorgt nicht nur für Übersicht, sondern lädt die Benutzer auch ein, mit deiner App zu interagieren.

Füge in der App eine Galerie ein und ändere das Layout auf 110 Pixel Breite und 60 Pixel Höhe. Füge zum Schluss Schaltflächen hinzu, die die Datumswerte anzeigen. Die Datumswerte sollen basierend auf dem ersten sichtbaren Tag im Monat berechnet werden.

Dazu ermittelst du den ersten Tag des aktuellen Monats:

Screen
OnVisible = Set(varErsterMonatstag;DateAdd(Today();-(Day(Today()-1))));;

Da du den Kalender immer übersichtlich ab Montag starten willst, musst du jetzt noch den ersten sichtbaren Tag definieren:

OnVisible = Set(varErsterSicthbarerTag;DateAdd(varErsterMonatstag;-(Weekday(varErsterMonatstag;StartOfWeek.Monday-1))))

Um die Datumswerte in der Galerie darzustellen, musst du zuerst der Galerie Grundwerte hinzufügen und zu diesen den ersten sichtbaren Tag addieren:

Galerie
Items = Sequence(42;0)

Galerie Item
Text = DateAdd(varErsterSichtbarerTag;ThisItem.Value)

Schritt 3: Kalenderfunktionen hinzufügen

Um BenutzerInnen die Navigation im Kalender zu ermöglichen, kannst du Pfeil Icons sowie einen Heute Button integrieren.

• Vorwärts Button: Navigiert einen Monat nach vorne.
  

  Icon
  OnSelect =
  Set(
      varErsterMonatstag;
      DateAdd(
          varErsterMonatstag;
          1;
          TimeUnit.Months
      )
  );;
  Set(
      varErsterSicthbarerTag;
      DateAdd(
          varErsterMonatstag;
          -(Weekday(
              varErsterMonatstag;
              StartOfWeek.Monday - 1
          ))
      )
  )

• Rückwärts Button: Navigiert einen Monat zurück.
  

  Icon
  OnSelect =
  Set(
      varErsterMonatstag;
      DateAdd(
          varErsterMonatstag;
          -1;
          TimeUnit.Months
      )
  );;
  Set(
      varErsterSicthbarerTag;
      DateAdd(
          varErsterMonatstag;
          -(Weekday(
              varErsterMonatstag;
              StartOfWeek.Monday - 1
          ))
      )
  )

• Heute Button: Navigiert zum heutigen Tag.

  Button
  OnSelect =
  Set(
      varErsterMonatstag;
      DateAdd(
          Today();
          -(Day(Today() - 1))
      )
  );;
  Set(
      varErsterSicthbarerTag;
      DateAdd(
          varErsterMonatstag;
          -(Weekday(
              varErsterMonatstag;
              StartOfWeek.Monday - 1
          ))
      )
  )

Um den Kalender übersichtlich zu halten, kannst du bestehende Termine mit kleinen Punkten unter den Datumswerten anzeigen sowie den aktuellen Tag mit einer farbigen Form markieren.

Kalendereintrag
OnSelect = Set(varAusgewählt;DateAdd(varErsterSicthbarerTag;ThisItem.Value))

Form zum Markieren des ausgewählten Kalendereintrags
Visible = DateAdd(varErsterSicthbarerTag;ThisItem.Value) = varAusgewählt

Bestehende Termine per kleinem Punkt anzeigen:

Form zum markieren von bestehenden Terminen
Visible =
!IsBlank(
LookUp(
Kalender;
Startdatum <= DateAdd(varErsterSicthbarerTag;ThisItem.Value)
And
Enddatum >= DateAdd(varErsterSicthbarerTag;ThisItem.Value)
)
)

Schritt 4: Tagesansicht anzeigen

Nutze eine zusätzliche Galerie, um Details und Termine des aktuell ausgewählten Datums anzuzeigen. Filtere dazu die zugrunde liegende SharePointliste nach dem aktuell ausgewählten Datum. Füge optional ein Beschriftungsfeld ein, das angezeigt wird, wenn keine Termine an diesen Tag vorliegen.

Galerie
Items = Filter(Kalender, Startdatum <= varAusgewählt And Enddatum >= varAusgewählt)

Beschriftungsfeld
Text = "Keine Kalendereinträge"
Visible = CountRows(gal_Termine.AllItems)=0

Ich hoffe dieser Beitrag hilft dir dabei, einen übersichtlichen Kalender in deiner Business App zu integrieren und dadruch die effizients und nutzerfreundlicher zu erhöhen.

Melde dich gerne für meinen Newsletter an, in dem ich dir Tipps und Tricks rund um Power Apps & Power Automate zusende.

 Hier gehts zum Detailvideo: