Make A Calendar In Power Apps - Part 1

Imported reference from Matthew Devaney's blog for learning purposes. Original: https://www.matthewdevaney.com/make-a-calendar-in-power-apps-part-1/. Author: Matthew Devaney.

Make A Calendar In Power Apps – Part 1 Posted by - Matthew Devaney on - November 22, 2020 71 Comments

Calendars are a common feature of many apps. They are used by teams to share events, by planners to schedule resources and employees to track hours worked. Power Apps provides a calendar screen out-of-the-box but I’ve always thought the best way to truly understand how something works is to make it for yourself.

In this two-part series I will show you how to make a calendar in Power Apps. Part 1 will focus on the basics of how to build a calendar and Part 2 will show you how to add events to calendar & display them. Building A Grid With Dates

The basic structure of a calendar is nothing more than a grid displaying a series of dates. In Power Apps we can construct this grid by using a vertical gallery control. Multiple dates can be shown on the same row with the WrapCount property.

Begin by placing a button on the screen called btn_Calendar_Today. Change the text of the button to show “Today”.

When the button is clicked it will set a variable to the 1st day of the month. This will allow the user to easily return to the current day. Place this copy inside the OnSelect property of the button. Also copy this code into the OnVisible property of the screen so the variable gets set on the user’s arrival. Set (varFirstDayOfMonth, Date ( Year(Today()), Month(Today()), 1 ) ) Code language: JavaScript ( javascript )

Next, add a vertical gallery to the screen called gal_Calendar_Days .

We will create the dates of the calendar using the SEQUENCE function. This code section is pretty interesting. It generates a sequence of 42 days from the 1st day of the month then shifts them so the first date is always a Sunday (just like a Calendar). Write this code in the Items property of the gallery. ForAll ( Sequence (42), varFirstDayOfMonth

+ Value-Weekday ( varFirstDayOfMonth , StartOfWeek .Sunday ) ) Code language: CSS ( css )

To see the dates insert a label into the gallery…

…then write this code in each property of the label to achieve the same styling as shown in the image above. BorderColor : RGBA(179, 179, 179, 1) BorderThickness : 0.5 Height : Parent.TemplateHeight HoverFill : ColorValue("#FD625E10") PressedFill : ColorValue("#FD625E30") Text : ThisItem.Value Width : Parent.TemplateWidth Code language: HTTP ( http )

We can now see the dates in a list but a calendar is supposed to be in a grid format…

…so we must change the properties of the gallery to the values below. Now our app is starting to look like a calendar. Fill : White TemplatePadding : 0 TemplateSize : Self.Height/6 WrapCount : 7 Code language: HTTP ( http )

Calendars always show the month & year above the grid. Make a new label with large/bold text.

Then use the Text function to to show the current month & year of the 1st day of the month. Set the Text property of the label to this code.

Text(varFirstDayOfMonth, "[$-en-US]mmmm yyyy" ) Code language: JavaScript ( javascript )

The last basic element of a calendar we need to create are the weekdays above each column. Insert a new horizontal gallery called gal_Calendar_Weekdays onto the screen.

Drag the edges of the gallery into position as shown below…

…then use this code to fill it with values and update the style. Fill : ColorValue("#FD625E") Height : 45 Items : Calendar.WeekdaydaysShort() ShowScrollbar : false TemplatePadding : 0 TemplateSize : Self.Width/7 Width : gal_Calendar_Days.Width X : gal_Calendar_Days.X Y : gal_Calendar_Days.Y - Self.Height Code language: HTTP ( http )

As final a touch we’ll give the weekdays a solid-colored background to indicate that its a table header.

Use this code in each property of the gallery gal_Calendar_Weekdays . Color : White Height : Parent.TemplateHeight Text : ThisItem.Value Width : Parent.TemplateWidth Code language: HTTP ( http ) Changing The Current Month

With the basic calendar created we can now start adding functionality. The highest priority feature is to allow the user to switch the month & year being displayed.

Put a ChevronRight icon beside the Today button.

Clicked this icon will advance the calendar to the next month. Write this code into the OnSelect property of the icon. Set (varFirstDayOfMonth,

Date ( Year(varFirstDayOfMonth), Month(varFirstDayOfMonth)+ 1 , 1 ) ) Code language: JavaScript ( javascript )

Test the icon. Our app should behave as shown in the image below.

Now lets create a way for the user to browse to the previous month. Make another ChevronLeft icon and place it on the opposite side of the today button.

Place this code in OnSelect property of the icon. Set (varFirstDayOfMonth,

Date ( Year(varFirstDayOfMonth), Month(varFirstDayOfMonth) -1 , 1 ) ) Code language: JavaScript ( javascript )

We can now advance the calendar both forward and backward in time as shown below. Alternate Way To Change The Month

Many users would also expect the month to change when they click on a date in the calendar that does not belong to the current month. An example of this behaviour is the date picker found in Microsoft Outlook. To implement the feature select the label inside your gallery…

…and write this code in the OnSelect property. Set ( varFirstDayOfMonth,

Date ( Year(ThisItem.Value), Month(ThisItem.Value), 1 ) ); Code language: JavaScript ( javascript )

The calendar now changes its perspective if you click on a date outside of the current month. Our styling of the label’s Hoverfill and PressedFill properties also work nicely here. Showing The Date As A Single Number

Calendars display the day as a number and not as a full date like we are currently doing. Remove any text from the gallery’s label then insert a button called btn_Calendar_Day beneath it. Use this code in the following properties of the button. Color : Black Fill : Transparent HoverColor : Self.Color HoverFill : Self.Fill PressedFill : Self.Color PressedFill : Self.Fill RadiusBottom : 180 RadiusLeft : Self.RadiusBottom RadiusRight : Self.RadiusBottom RadiusTop : Self.RadiusBottom Text : Day(ThisItem.Value) Code language: HTTP ( http )

Drag and position the button in the top-right corner of the gallery’s grid. Next, we want to any days of the current month to have a black number and any days not in the current month to have a grey number.

Change the Color property of btn_Calendar_Day to accomplish this. If( IsToday(ThisItem.Value), White,

Date (Year(ThisItem.Value), Month(ThisItem.Value), 1 )=varFirstDayOfMonth, Black, LightGray ) Code language: JavaScript ( javascript )

Another feature we can add here is to identify the current day with a circle behind it.

Use this code in the button’s Fill property to make a the circle colored. If ( IsToday ( ThisItem

.Value ), ColorValue (" #FD625E "), Transparent ) Code language: CSS ( css ) Finishing Touches

We’re done adding features to the calendar so we’ll turn our attention to making it look pretty. Create a new label and place it behind the current date text/calendar controls…

…and give it a slightly transparent grey Fill using this code. RGBA (0, 0, 0, 0 .3 ) Code language: CSS ( css )

Move the calendar controls to the left and change their style…

…by updating these properties in all of them. Color : White HoverColor : Self.Color PressedFill : Self.Color Fill : Transparent HoverFill : Self.Fill PressedFill : Self.Fill Code language: HTTP ( http )

Make the current month text a white Color .

Last but not least, pick an image to act as a background and place it below all of the other controls. If the image does not fill the entire screen change its ImagePosition property to ‘Fit’ or ‘Tile’ based on your preference.

Do You Want To Let Users Add Events To The Calendar?

Find out how by reading the next article in this series: Make A Calendar In Power Apps – Part 2 . Did You Enjoy This Article? 😺

Subscribe to get new Copilot Studio articles sent to your inbox each week for FREE Enter your email address Sign Me Up Questions?

If you have any questions or feedback about Make A Calendar In Power Apps – Part 1 please leave a message in the comments section below. You can post using your email address and are not required to create an account to join the discussion. Calendar FORALL function SEQUENCE function Matthew Devaney M365 Copilot Power Apps

How To Create Copilot Custom UI Widgets In Power Apps