How to create a custom calendar in PowerApps

In this PowerApps tutorial, we will discuss custom calendar control in PowerApps. We will see, how to create a custom calendar in PowerApps. Here, in this example, I will show you calendar control where you can see the current date, Previous month, Next month, and Weekend.

Custom calendar control in PowerApps

Step 1: let’s log in to PowerApps and create a canvas app -> Create a New screen as below and I have drag and drop a label where I added the headline.

Step 2: Next go the On Visible property of Home_1 Screen and add the below code.

Set(UserdateSelected,currentDate);
Set(FirstDayOfMonth, DateAdd(UserdateSelected, 1-Day(UserdateSelected),Days));
Set(firstDayInView,DateAdd(FirstDayOfMonth,-(Weekday(FirstDayOfMonth)-2+1),Days));
Set(LastDayOfMonth,DateAdd(DateAdd(FirstDayOfMonth,1,Months),-1,Days));
Set(MinDate,DateAdd(FirstDayOfMonth,-(Weekday(FirstDayOfMonth)-2+1),Days));
Set(MaxDate,DateAdd(DateAdd(FirstDayOfMonth,-(Weekday(FirstDayOfMonth)-2+1),Days),35,Days));

Step 3: Next I added one Rectangle control with two forward and backward Icons in my screen. Next click on backward icon and go to the OnSelect property and add the below code.

Set(FirstDayOfMonth, DateAdd(FirstDayOfMonth, -1,Months));
Set(firstDayInView,DateAdd(FirstDayOfMonth,-(Weekday(FirstDayOfMonth)-2+1),Days));
Set(LastDayOfMonth,DateAdd(DateAdd(FirstDayOfMonth,1,Months),-1,Days));
If(MinDate > FirstDayOfMonth, Set(MinDate,FirstDayOfMonth)); 

Step 4: Next click on Forward icon and go to the OnSelect property and add the below code.

Set(FirstDayOfMonth, DateAdd(FirstDayOfMonth, 1,Months));
Set(firstDayInView,DateAdd(FirstDayOfMonth,-(Weekday(FirstDayOfMonth)-2+1),Days));
Set(LastDayOfMonth,DateAdd(DateAdd(FirstDayOfMonth,1,Months),-1,Days));
If(LastDayOfMonth > MaxDate, Set(MaxDate,LastDayOfMonth)); 

Step 5: Next add a label and keep t on the top as same as below screen and update formula in Text property of lable.

Text(FirstDayOfMonth, "[$-en-US]mmmm yyyy")

Step 6: Next go to the Gallery and drag and drop a blank and Horizontal control in your screen. Next set the below property in the control.

A: Change the Property of your gallery control like below screen.

B: Next set the Item property of Galley control like below .

C: Next click on that edit icon and add a label control so all days name will automatically come like below screen. You can also change the style and border thickness to see it clearly .

D: Next click on the label and go to the fill property and add the below formula to set the weekend.

If(ThisItem.Value="Sun" || ThisItem.Value="Sat",RGBA(168, 0, 160, 1),RGBA(150, 0, 0, 1))

Step 7: Next go to the Gallery and add one more control like Blank Vertical And that gallery control we have to keep under the days. Next

A: Change the Property of your gallery control like below screen.

B: Next go to the Item property of the gallery control and add the below code.

C: Next click to edit the gallery control and add a label inside that so that all days will automatically populate over the gallery.

D: Next click on the label and update the text property of label as below formula. You ca also change the border thickness and style to show the date in clear view.

Day(DateAdd(firstDayInView,Value(ThisItem.Value),Days))

E: Next add a rectangle under the gallery and set the below property. You just edit the gallery and add the rectangle . Next set the recorder property as Send Backward.

F: Once you send backward, your calendar will show like below.

G: Next click on the rectangle and change the border thickness property as below.

If(DateAdd(firstDayInView, Value(ThisItem.Value))=UserdateSelected,3,1)

H: Next change the formula for Fill property of the rectangle like below.

If(Abs(Label6_1.Text - ThisItem.Value) >10,RGBA(231,21,241,1),RGBA(11,117,117,110))

I: Next edit the Gallery control and drag add a circle to see the current date in the calendar control and change the style border and size.

J: Next change the onselect property as below formula.

Set(UserdateSelected,DateAdd(firstDayInView, Value(ThisItem.Value),Days))

K: Next change the Visible property of the circle as below formula.

If(DateAdd(firstDayInView,Value(ThisItem.Value)) = currentDate ,true,false)

Now you can save the app and run it to see the output of this custom calendar control in PowerApps.

You may like the following PowerApps tutorials:

• PowerApps Chart Control – How to Use
• How to build multilingual apps in PowerApps
• Automatically scroll Gallery control in PowerApps
• PowerApps notify function- How to use
• Share PowerApps to external users or guest users
• Saving microphone audio recorded in PowerApps to SharePoint online

In this tutorial, we learned how to create a custom calendar in PowerApps.