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 in PowerApps

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.

image 183

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

image 184
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.

image 185
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.

image 186
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.

image 187
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.

image 192

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

image 188

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

image 189

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 .

image 190

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

image 191
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

image 193

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

image 194

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

image 195

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

image 197

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.

image 198
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.

image 199

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

image 201

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

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

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

image 203
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.

image 206

J: Next change the onselect property as below formula.

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

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

image 208
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.

image 209

You may like the following PowerApps tutorials:

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

Donwload Hub site pdf

Download SharePoint Online Tutorial PDF FREE!

Get update on Webinars, video tutorials, training courses etc.

  • >