cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 
maqsoftware
‎11-16-2022 10:19 PM

Date Range Calendar for Power Apps

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.

maqsoftware_0-1668665638520.png

How do I integrate the solution into my app?

  1. Get the component from App Source: Link
    maqsoftware_1-1668665638541.png

  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 Appsmaqsoftware_2-1668665638552.png

  3. In your app, go to advanced settings and toggle on the button for allowing custom components to be integrated in the app
    maqsoftware_3-1668665638557.png

  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
    maqsoftware_4-1668665638560.png
  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



Labels:
Comments
Advocate IV
‎11-30-2022 05:42 AM

Nice! THANKS FOR SHARING! 🙂

Helper III
‎04-02-2024 10:49 PM

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

‎04-23-2024 08:47 PM

@lishaThank you for reaching out.

The current version of the component doesn't include this feature. We've added it to our backlog and will update you here once it's available.