Calendar Components for Power Apps
The Calendars family lets users pick a date or a time inside the app instead of through the built-in date picker. Calendar and Calendar with Header draw a full month grid with arrows and a footer that repeats the picked date; Time Picker builds hours, minutes and seconds dropdowns that combine into one Time value. Reach for them when a booking, shift or due-date screen needs a visible month rather than a small input box.
Pick a variant
| Component | Plan | What it is for | Settings you can change |
|---|---|---|---|
| Calendar | Paid | Month grid with a weekday row, arrows, a today dot and a footer with the picked date | Width (px), Height (px), Radius (px), Background, Header Text, Weekday Text, Day Text, Outside Month, Footer Text, Selected Background, Selected Text |
| Calendar with Header | Paid | Month grid under a coloured year and month header, with a today ring and event dot placeholders | Width (px), Height (px), Radius (px), Header Background, Header Text, Weekday Text, Day Text, Outside Month, Footer Text, Selected Background, Selected Text, Today Ring |
| Time Picker | Paid | Hours, minutes and seconds dropdowns that build one Time value | Show Hours, Show Minutes, Show Seconds, Output Format, Min, Max and Step under Hour Settings, Minute Settings and Second Settings, Border Radius (px), Display Colors, Dropdown Buttons, Dropdown Menu |
Paid means a Components, Ultra, Team or Lifetime plan (pricing). Open the category in the library: Calendars.
To copy a variant into Power Apps Studio, follow Getting Started.
After you paste
Calendar and Calendar with Header paste as a whole screen named ScreenCalendar. Its OnVisible creates the global variables _dateSelected, _firstDayOfMonth, _firstDayInView, _lastDayOfMonth and _calendarVisible, and every day label (lblDayLabel inside galMonthDay) writes _dateSelected in its OnSelect. Time Picker pastes as loose controls tagged Group: Time Picker and stores its result in varSelectedTime.
Items property of a gallery on the same screen, to list the records for the picked day:
Filter(Tasks, DueDate = _dateSelected)
OnVisible of ScreenCalendar opens on the current month because one of its lines reads Set(_firstDayOfMonth, DateAdd(Today(), 1 - Day(Today()), TimeUnit.Days)). Replace only that line to open on another month; the two lines after it work out the view from _firstDayOfMonth:
Set(_firstDayOfMonth, Date(2026, 12, 1));
OnSelect of a save button once a calendar and the Time Picker are on one screen, combining the picked day with the picked time:
Patch(Shifts, Defaults(Shifts), { Start: DateAdd(_dateSelected, Hour(varSelectedTime) * 60 + Minute(varSelectedTime), TimeUnit.Minutes) })
Good to know
- Every variant needs Components, Ultra, Team or Lifetime; editing the Settings tab needs Ultra, Team or Lifetime. Each has an Instructions tab: the calendars' tab lists the variables, the event-dot recipe, gallery filters and status colour-coding; the Time Picker's tab covers Text() formatting, validation and Patch.
- Both calendars hard-code the same variable names and the same screen name, so two calendars in one app would share one _dateSelected. Use one per app, or rename the variables by hand after pasting.
- varSelectedTime is only written after every visible part has been picked; a hidden part (Show Seconds off) is stored as 0. Output Format changes only the Text() format of lblSelectedTimeValue; the variable stays a Time value either way.
- The light and dark toggle in the component header changes the Time Picker YAML only. Calendar and Calendar with Header write the same colours in both themes (only their previews switch). None of them offers Modern YAML.
- The global prefixes rename the controls (con, lbl, gal, ico) but never the underscore variables or varSelectedTime. The event dot in Calendar with Header (conEventDot) is a placeholder whose Visible is false with a commented example; the Instructions tab shows the LookUp formula that switches it on.
Related
Library: Calendars. Related guides: Input Fields and Dropdowns.