Calendar Components for Power Apps

Date pickers, time pickers, and calendar components for scheduling and date selection in your Power Apps.

What are Calendar Components?

Calendar components let users pick dates and times in your app. Power Apps has basic date pickers built-in, but PowerLibs calendars look better and give you more control over styling and behavior.

Available Components

Calendar

A clean date picker with month navigation. Shows a full month grid where users can click to select a date.

Features:

• Month/year navigation arrows
• Weekday headers (Mon, Tue, Wed...)
• Visual indicator for today
• Selected date highlighting
• Clean, modern design

Settings you can customize:

• All colors (background, text, selected state)
• Size (width/height)
• Border radius
• Today dot indicator color

Calendar with Header

Same calendar functionality but with a styled header section showing the selected year and month prominently.

Extra features:

• Large colored header area
• Year/month display
• Event dot placeholder
• Full date footer

Best for:

• When you want the calendar to be a focal point
• Apps with a more visual design

Time Picker

Three dropdown selectors for hours, minutes, and seconds. Displays the selected time in a formatted display area.

Features:

• Animated dropdown arrows (rotate on open/close)
• Show/hide any time part (hours, minutes, seconds)
• 12-hour (AM/PM) or 24-hour format
• Custom hour/minute/second ranges
• Custom step intervals (e.g., 15-minute intervals)

Settings you can customize:

• Which parts to show (hours, minutes, seconds)
• Hour range (e.g., 8-18 for business hours)
• Minute/second steps (e.g., every 5 minutes)
• 12h vs 24h format
• All colors

Implementation Steps

1. Choose your component

Go to Calendars and pick:

• Calendar - Simple date picker
• Calendar with Header - More visual date picker
• Time Picker - Time selection

2. Customize appearance

In the Settings tab:

For Calendars:

• Set your brand colors
• Adjust size to fit your layout
• Configure today indicator color

For Time Picker:

• Choose which parts to show (HH:MM or HH:MM:SS)
• Set hour range for business hours
• Configure minute intervals

3. Copy YAML and paste

Switch to YAML tab, copy, then paste in Power Apps Studio.

4. Connect to your data

After pasting, connect the selected value to your data:

// The calendar stores selected date in a variable
// Use this in your forms or Patch statements:
Patch(
    Appointments,
    Defaults(Appointments),
    {
        Date: varSelectedDate,
        Time: varSelectedTime
    }
)

Working with Selected Values

Calendar Selected Date

The calendar stores the selected date in varSelectedDate:

// Display selected date
Text(varSelectedDate, "mmmm d, yyyy")
// Result: "January 15, 2026"

// Use in a filter
Filter(Events, EventDate = varSelectedDate)

// Compare to today
If(varSelectedDate < Today(), "Past date", "Future date")

Time Picker Selected Time

The time picker stores the selection in varSelectedTime:

// Display formatted time
Text(varSelectedTime, "hh:mm AM/PM")
// Result: "02:30 PM"

// Combine date and time for a datetime field
DateAdd(varSelectedDate, Hour(varSelectedTime), Hours) + 
DateAdd(0, Minute(varSelectedTime), Minutes)

Common Use Cases

Appointment Booking

Let users pick a date and time slot:

// After user selects both date and time
Set(varAppointmentDateTime, 
    DateAdd(
        DateAdd(varSelectedDate, Hour(varSelectedTime), Hours),
        Minute(varSelectedTime), 
        Minutes
    )
)

Date Range Selection

Use two calendars for start/end dates:

1. Add two Calendar components
2. Name their variables varStartDate and varEndDate
3. Validate: If(varEndDate < varStartDate, "End must be after start")

Event Date Display

Show a calendar with events highlighted (requires customization after paste).

Time-Only Input

For duration or time entries, use just the Time Picker with seconds hidden.

Time Picker Configuration Examples

Business Hours (9 AM - 5 PM, 30-min slots)

• minHour: 9
• maxHour: 17
• minuteStep: 30
• showSeconds: false

Duration Picker (minutes and seconds only)

• showHours: false
• showMinutes: true
• showSeconds: true
• minuteStep: 1
• secondStep: 5

Simple Hour Selector

• showHours: true
• showMinutes: false
• showSeconds: false

Best Practices

• Match your app's colors - The default black/white might not fit your brand
• Right-size the calendar - Don't make it too small or dates become hard to tap
• Show relevant time options - A restaurant booking doesn't need seconds
• Validate dates - Check if selected dates are in valid ranges
• Handle timezone - Be aware that Power Apps datetime values are UTC

Troubleshooting

Selected date not saving

Make sure you're referencing the correct variable name (varSelectedDate). Check the Instructions tab for the exact variable name used.

Time picker dropdowns not opening

The component uses click events. Make sure nothing is layered on top of the dropdown buttons.

Colors not applying in dark mode

Toggle the dark mode preview in ComponentHost to see dark mode colors. The component adapts automatically.

Calendar shows wrong month initially

The calendar defaults to the current month. To set a specific starting month, you'd need to modify the varCurrentMonth variable in OnStart.