Skip to main content

Notifications

Calendar Component With Automatic Holidays, Workday and NetWorkdays Functions

rzuber Profile Picture Posted by rzuber 545

Here's a date-picking calendar component I created.

rzuber_0-1718576484894.png

 

This calendar component uses a single gallery with slider components that, when selected, calculate the date for the position the user selected. It also fires an OnSelect event to let the containing app detect when the date was selected so the date can be recorded.

 

Custom Functions

Workday(<start>, <days>)

Returns the date value of the workday for the provided number of days from the start date.

Use negative values to get workdays before start date.

NetWorkdays(<start>, <end>)

Returns the number of workdays from start date to end date.

End date can be before or after start date.

AutomaticHolidays()

Returns a table of suggested observance dates for the following (US) holidays for 11 years. (current + 5 years in past/future)

New Years

Good Friday

Memorial Day

Independence Day

Labor Day

Thanksgiving

The day after Thanksgiving

Christmas Eve

Christmas

New Years Eve

Automatically moves weekend holidays to weekday observance dates in the table.

CalculateEaster([year])

Returns the date for Easter Sunday for the provided year. (uses current year if no year provided)

ColorToText(<color>)

Converts a color value to its hexadecimal text value for use in the HTMLText control theme colors.

 

Custom Properties (Input)

Theme

This property is used to setup the calendar colors. See the Theme property for details on the layout. The default Theme has been dubbed 'Mint Chocolate Chip' by one of my co-workers.

CalendarDate

Default date for calendar

CalendarTitle

Text for calendar title bar

CornerRadius

Customize corner radius for all corners

Data

This is where the weekday names and month names are defined for use in the calendar.

It uses standard Power Apps objects to obtain these by default.

Holidays

Customize the holidays.

Defaults to the AutomaticHolidays() function results.

RowHeight

Customize the height of each row after the day's number.

 

Custom Properties (Output)

OutputDate

Stores the date selected by the user.

About

Contains a record of the current version of the component.

 

Custom Events

OnSelect

Fires when user selects a date.

Allows you to detect when the user selects a date.

Use the OutputDate to find the selected date.

OnClose

Fires when you click the 'X' in the top-right corner.

Also fires when you select a date.

Allows you to detect when the user has closed the calendar or chosen a date.

 

Feel free to use this and modify it.

 

Updated component file after discovering/fixing a bug when converting Christmas/Eve and New Year's/Eve.

 

[EDIT] Updated component library file after discovering the HTMLText control didn't display properly when using the published app in a browser. Uses ClearData() function to detect if using calendar in the Power Apps editor, and changes the template height for the gallery based on this. This is just a work-around since the HTMLText control does not behave the same live vs. the IDE.
I also added a progress bar, and I'm starting to work on a rich text editor.. but you can ignore that.. for now. 😁

Categories:

Samples

Comments

*This post is locked for comments