Make A Calendar In Power Apps – Part 1

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
    )
)

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)
)

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

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

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")

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

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

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
    )
)

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
    )
)

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
    )
);

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)

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
)

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)

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)

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

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.

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.