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.