Date Range Calendar for Power Apps

[maqsoftware]

Date Range app, built on Microsoft Power Platform, enables you to select start and end date from same. You can easily integrate this in any Power App and start playing with date ranges.

Additional Details:

• Date Range Calendar component will output Start Date and End Date as variables
• The output can be integrated seamlessly with other components

Need?

Currently, PowerApps does not have built-in multiple date selection functionality because of which we end up using single selection twice that enforces double space. This also does not sync with best User Experience.

To overcome the above problem, with the help of Power Apps component framework, we developed a component which supports date range functionality in PowerApps and can be easily integrated into it.

How do I integrate the solution into my app?

1. Get the component from App Source: Link
   
   
   
2. Go to PowerApps admin center and open your environment (make sure you have admin access to environment)
   • Environment -> Settings -> Features
   • Toggle on the button for using custom component into Power Apps
     
     
3. In your app, go to advanced settings and toggle on the button for allowing custom components to be integrated in the app
   
   
   
4. On your App, make sure you are in edit mode
5. In Menu tab, go to Insert and under Custom click on Import component
6. Go to code section and click on your solution to import, refer below image
   
7. Rename the component imported as name of your choice. Example: dateRange
8. If there are labels named StartDate and EndDate, selected start date and end date can be assigned to them in following way:
   • StartDate as  ->  dateRange.startDateSelected
   • EndDate as -> dateRange.endDateSelected

Note: Above component was developed using react-date-range npm package which is MIT licensed and is free for commercial use

[DanielAmico]

Nice! THANKS FOR SHARING! 🙂

[lisha]

Hi @maqsoftware ,

Thanks for sharing the article. This is very informative. I have one questions can we show any event in for the specific date range selection in the calender.
Example I have a join a session a from 12-15 Apr then in the calender there is highlight strip showing event and it should be clickable.

Please suggest some idea to do it.

Thanks