Kalender bauen

Jan 06, 2026

So baust du einen Kalender in Power Apps! (mit der Kalender Vorlage)

Kalender sind in Apps allgegenwärtig. In Power Apps gibt es zwar den Date Picker (für ein einzelnes Datum), aber kein eigenes Kalender-Steuerelement. Ich zeige dir, wie du die Kalendervorlage in Power Apps verwenden und für deine Zwecke anpassen kannst.

Schritt 1: Kalendervorlage in Power Apps einfügen

Öffne eine leere Canvas App und füge über den Button einen neuen Bildschirm ein. Verwende hier die Kalendervorlage.

Schritt 2: Kalendervorlage verstehen

Der Kalender wird über 4 Variablen gesteuert.

_dateSelected = der aktuell ausgewählte Tag
_firstDayOfMonth = der erste Tag des ausgewählten Monats
_firstDayInView = der erste sichtbare Tag im Kalender
_lastDayOfMonth = der letzte sichtbare Tag im Kalender

Den Kern der Kalendervorlage bildet die MonthDay Gallery:

Sie hat 42 Elemente (Werte 0 bis 41) – damit kann Power Apps bei Bedarf bis zu 6 Wochen anzeigen (6×7=42).
Das Datum pro Feld wird über Day(DateAdd(_firstDayInView;ThisItem.Value; TimeUnit.Days)) berechnet

Schritt 3: Eigenständigen Kalender bauen

Um deinen eigenständigen Kalender zu erstellen, kannst du dir die Elemente aus der Vorlage kopieren und auf einem neuen Bildschirm einfügen. Die Sichtbarkeit der Steuerelemente und alte Verweise auf nicht mehr vorhandene Steuerelemente musst du noch korrigieren. Du kannst jetzt auch grafische Anpassungen vornehmen.

Schritt 4: Wochenstart auf Montag umstellen

Um den Kalender umzustellen, sodass Montag der erste Tag der Woche ist, musst du alle entsprechenden Formeln anpassen.

In den Formeln, in denen FirstDayInView mit Weekday() berechnet wird, ergänzt du das optionale Argument StartOfWeek.Monday :

iconCalendar1 (Button für den heutigen Tag)
OnSelect= ...
Set(_firstDayInView; DateAdd(_firstDayOfMonth; -(Weekday(_firstDayOfMonth;StartOfWeek.Monday) - 2 + 1); TimeUnit.Days));;
...

Das muss überall passieren, wo FirstDayInView gesetzt wird (iconCalendar1, iconPrevMonth1, iconNextMonth1).

Nach der Umstellung wird die Visible-Berechnung in der Gallery noch mit Standard-Weekday durchgeführt. Auch dort ergänzt du StartOfWeek.Monday.

MonthDayGallery1 - Title
Visible= !(DateAdd(_firstDayInView;ThisItem.Value; TimeUnit.Days) - Weekday(DateAdd(_firstDayInView;ThisItem.Value; TimeUnit.Days);StartOfWeek.Monday) + 1 > _lastDayOfMonth)

Schritt 5: Kalender initialisieren

Damit der Kalender beim ersten Aufruf den aktuellen Monat und den heutigen Tag vorausgewählt hat, musst du in deinem Screen die OnVisible Eigenschaft befüllen. Kopiere dir dazu den Code aus dem „Today-Button“.

Screen 1
OnVisible=
Set(_dateSelected; Today());;
Set(_firstDayOfMonth; DateAdd(Today(); 1 - Day(Today()); TimeUnit.Days));;
Set(_firstDayInView; DateAdd(_firstDayOfMonth; -(Weekday(_firstDayOfMonth;StartOfWeek.Monday) - 2 + 1); TimeUnit.Days));;
Set(_lastDayOfMonth; DateAdd(DateAdd(_firstDayOfMonth; 1; TimeUnit.Months); -1; TimeUnit.Days))

Schritt 6: SharePoint-Liste verbinden und filtern

Verbinde deine App mit deiner SharePoint-Liste. Füge dir eine Galerie ein, in der du die Datensätze aus der SharePoint-Liste anzeigst. Für die Filterung musst du in der Items-Eigenschaft deiner Galerie auf das aktuell ausgewählte Datum verweisen.

Gallery
Items = Filter(Fuhrpark_Ausleihen;Datum=_dateSelected)

Schritt 7: Tage mit Daten im Kalender anzeigen

Damit du im Kalender visuell siehst, an welchen Tagen Daten existieren, kannst du dynamisch aus den Kalenderelementen auf die SharePoint-Liste zugreifen. So kannst du prüfen, ob Einträge zu diesem Tag vorhanden sind.

MonthDayGallery1 - Circle
Visible =
!IsBlank(LookUp(Fuhrpark_Ausleihen;Datum=DateAdd(
_firstDayInView;ThisItem.Value;TimeUnit.Days)).Datum)

Bonus: Navigation einschränken

Wenn du die Navigation nur in die Vergangenheit oder Zukunft erlauben willst, stellst du die Visible-Eigenschaft der Buttons abhängig von FirstDayOfMonth / LastDayOfMonth und Today() ein.

Für die Navigation in die Vergangenheit und bis zum aktuellen Monat (1):

iconNextMonth
Visible = _lastDayOfMonth < Today()

Für die Navigation in die Zukunft und ab dem aktuellen Monat (2):

iconPrevMonth
Visible = _firstDayOfMonth > Today()