Calendar control

Article
11/03/2022

A control used to input date values.

Note

Full documentation and source code found in the GitHub code components repository.

Description

This code component provides a wrapper around the Fluent UI Calendar control bound to a button for use in canvas & custom pages.

Properties

Key properties

Property	Description
`SelectedDateValue`	The date value to be pre-selected or Selected after on change event. For e.g. : Today's Date: `Today()`, Date based on language: `DateValue("24/7/2022",Language())`, specific regional language: `DateValue("24/07/2022","en-GB")`
`ShowGoToToday`	Whether the 'Go to Today' option is visible
`MonthPickerVisible`	Whether the month picker is visible
`DayPickerVisible`	Whether the day picker is visible
`HighlightSelectedMonth`	Whether the selected month is highlighted in the calendar
`HighlightCurrentMonth`	Whether the current month is highlighted in the calendar
`ShowWeekNumbers`	Whether the week numbers are visible
`ShowSixWeeksByDefault`	Whether the sixth week is visible by default.
`MinDate`	If specified a date value, navigation beyond that date will not be allowed. For correct format, refer to the example provided for Selected Date.
`MaxDate`	If specified a date value, navigation beyond that date will not be allowed. For correct format, refer to the example provided for Selected Date.
`FirstDayOfWeek`	Select the day to be displayed as first day of week in calendar.

Style Properties

Property	Description
`Theme`	Accepts a JSON string that is generated using Fluent UI Theme Designer (windows.net). Leaving this blank will use the default theme defined by Power Apps. See theming for guidance on how to configure.
`BackgroundColor`	Background color for the component. e.g. White or #ffffff
`AccessibilityLabel`	Screen reader aria-label

Event Properties

Property	Description
`InputEvent`	An event to send to the control. E.g. `SetFocus`. See below.

Behavior

Supports SetFocus as an InputEvent.

Using OnChange

When a date is selected, value can be obtained by the selectedDate output property. Below is a set of sample code which can be added in 'OnChange' property, depending on how to output need to be visualized.

Set(var_SelectedDate, If(!IsBlank(Self.selectedDateValue), Text(Self.selectedDateValue, ShortDate, Language())));
// Example - Output: 7/14/2022

Set(var_SelectedDate, If(!IsBlank(Self.selectedDateValue), Text(Self.selectedDateValue, LongDate, Language())));
// Example - Output: Sunday, July 3, 2022

Set(var_SelectedDate, If(!IsBlank(Self.selectedDateValue), Text(Self.selectedDateValue, ShortDate, "en-GB")));
// Example - Output: 14/07/2022

Setting Focus on the control

When a new dialog is shown, and the default focus should be on the control, an explicit set focus will be needed.

To make calls to the input event, you can set a context variable that is bound to the Input Event property to a string that starts with SetFocus and followed by a random element to ensure that the app detects it as a change.

Example Power Fx formula:

UpdateContext({ctxResizableTextareaEvent:"SetFocus" & Text(Rand())}));

The context variable ctxResizableTextareaEvent would then be bound to the property InputEvent property.

Limitations

This code component can only be used in canvas apps and custom pages.

Share via