in this blog, will go over how to create a custom calendar control in PowerApps. We’ll look at how to make a custom calendar in PowerApps. In this example, I will show you a calendar control with the current date, previous month, next month, and weekend.
Custom calendar control in PowerApps
next, add a button and Change the text of the button to show “Today”.
paste the below formula to 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 ) )
Add a vertical gallery to the Screen
write the below code to the Items property of the gallery
ForAll( Sequence(42), varFirstDayOfMonth +Value–Weekday(varFirstDayOfMonth, StartOfWeek.Sunday) )
Next add a text label to the gallery to see its working or not
We must set the gallery’s properties to the values listed below. Our app is becoming more like a calendar.
Fill: White
TemplatePadding: 0
TemplateSize: Self.Height/6
WrapCount: 7
Add below values to the label properties on the gallery
BorderThickness: 0.5
Height: Parent.TemplateHeight
HoverFill: ColorValue(“#FD625E10”)
PressedFill: ColorValue(“#FD625E30”)
Text: ThisItem.Value
Width: Parent.TemplateWidth
Add a new label on the screen to show month and year and next add below formula to its text property
Text(varFirstDayOfMonth,“[$-en-US]mmmm yyyy”)
Next, we need to create are the weekdays above each column. Insert a new horizontal gallery onto the screen and drag the edges of the gallery into the same position shown in the below image.
Use the below values to update thew style of new gallery
Height: 45 Items:
Calendar.WeekdaydaysShort()
ShowScrollbar: false
TemplatePadding: 0
TemplateSize: Self.Width/7
Width: gallery8.Width
X: gallery8.X
Y: gallery8.Y – Self.Height
Next add labels in the new gallery and rename them to the week names
if you want show date only in the calendar remove the label in the calendar and add a button on the same place and place the below values in the button properties.
HoverFill: Self.Fill
PressedFill: Self.Color
PressedFill: Self.Fill
RadiusBottom: 180
RadiusLeft: 180
RadiusRight: 180
RadiusTop: 180
Text: Day(ThisItem.Value)
also add the below FORMULAS
COLOR— If( IsToday(ThisItem.Value), White, Date(Year(ThisItem.Value), Month(ThisItem.Value),1)=varFirstDayOfMonth, Black, LightGray )
FILL — If(IsToday(ThisItem.Value), ColorValue(“#FD625E”),Transparent)
Next we need to add Next and Back icons to see next month and previous month for that add the below formulas
For Next icon OnSelect property
Set(varFirstDayOfMonth, Date( Year(varFirstDayOfMonth), Month(varFirstDayOfMonth)+1, 1 ) )
For Back icon OnSelect property
Set(varFirstDayOfMonth, Date( Year(varFirstDayOfMonth), Month(varFirstDayOfMonth)–1, 1 ) )
Next, Design your screen based on your requirement
