Categories
Powerapps

Powerapps Custom Calendar component with Time Picker

Calendar is one of the most commonly used control in PowerApps. PowerApps comes with the default Calendar component, but it has limitations. So, I created a custom Calendar component with Time control.

powerapps custom calendar and time picker

How’s this custom calendar component different from the Powerapps default component?

  • Beautiful UI/UX
  • Customizable primary and seconday color
  • Time Picker
  • More features coming soon…

Prerequisites before installing the component:

  1. Go to https://admin.powerplatform.microsoft.com/environments
  2. Select the environment
select the environment

3. Click on settings

Click on settings

4. Expand Product and then click on Features

click on features

5. Toggle “Allow publishing of canvas apps with code components

allow publishing of canvas apps with code components

6. Make sure you Save after toggling that button

Importing Custom Component Solution:

  1. Download this managed solution
    1. http://themicroconsulting.com/wp-content/uploads/2021/08/PowerAppsTools_asn_1_1_managed.zip

2. Import this solution to the PowerApps solutions

Import the solution

3. If you’re app is already open, close it and reopen it again.

4. Click on that + Icon from left navigation.

4. Click on Get more components

5. Now select Code, then “ReactMaterialTimeComp” and then click Import

6. Expand Code Components section and select ReactMaterialTimeComp

That’s it you sucessfully imported the Date and Time Picker Component

How to use Powerapps Custom Calendar Component?

  1. Accessing dateProperty:
    1. Eg1: ReactMaterialCalendarTimeComp1.dateProperty
    2. Eg2: Date only: Text( DateValue( Text(ReactMaterialCalendarTimeComp1.dateProperty) ))
    3. Time only: Text( TimeValue( Text(ReactMaterialCalendarTimeComp1.dateProperty) ))

2. Set Default Date using a global variable or context variable. Use dateProperty property

3. Label property to change Date and Time Picker label

4. Primary Color property to change primary color

5. Secondary Color property to change secondary color

I hope this compoent will save atleast few of your pain points.

More features for this component will be coming soon!

If you have any suggestions or feature requests please use the comment box below.

7 replies on “Powerapps Custom Calendar component with Time Picker”

Hi, really cool app. could we get it in other languages and in 24 h format?
and there is an option to include and “Ok” and “Cancel” buttons?

Thanks

It would be really nice to have the following customizations:
1: Mode: Allow us to select between Date, Time, and Date+Time
2: Output Format: Allow us to have an input string that allows us to set the display format of the datetime in the box
3: Border Edits: Allow us to change thickness/radius of the border
4: Add “Save” and “Cancel” buttons to the bottom of the popup

Thanks!

Love what you have build here. My pain is that I have to click “ok” after selecting a date in the standard datepicker.

If I would like to remove the minute option and set it to 24H format, how should i do so – Is it possible to edit in your solution?

I really like the component! But (sorry…there’s always a ‘but’, right?), it would be helpful to be able to edit the selected values display settings: Font, Size, Border Color, Fill, and the size of the displayPropery box…all to match the other components resting on the form.

Leave a Reply

Your email address will not be published.