Create a Custom Calendar in Power Apps

Recently, I built a custom calendar in Power Apps to organize their schedule better for a client. Instead of using the usual calendar tools, we built a Power Apps calendar using various galleries and variables. This approach made it easier to display events and interact with dates directly within the app.

In this article, I will explain how to create a custom calendar in Power Apps using a step-by-step process.

So let’s get started!

Create a Custom Calendar in Power Apps

In this example, I will show you a Power Apps calendar control that displays the current date, the previous month, the next month, and weekends.

Refer to the GIF below:

1. Create a Power Apps blank canvas app and add a label to the screen for a header. You can provide some header text using the Label’s Text property:

"POWER APPS CUSTOM CALENDAR"

2. Select the Power Apps screen and apply the code below to its OnVisible property:

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

Where,

UserdateSelected, FirstDayOfMonth, firstDayInView, LastDayOfMonth, MinDate, MaxDate = Variable Names

3. Add a Rectangle shape (Insert -> Shape -> Rectangle) below the header and insert a forward and a backward icon like the image below.

Select the backward icon (<) and apply the code below to its OnSelect property:

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

FirstDayOfMonth, firstDayInView, LastDayOfMonth, MinDate = Variable names

Select the forward icon (>) and apply the code below to its OnSelect property:

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

4. To display the month and year, insert a Label over the rectangle and set its Text property as:

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

5. Next, add a Blank horizontal gallery below the rectangle.

Select the gallery and set its Items property as:

Calendar.WeekdaysShort()

6. Inside the gallery, add a label and set its Text property as:

ThisItem.Value

All the day names (Sun, Mon, etc.) will appear on the label, as shown below.

7. To set the weekend as a different color, select the label and set its Fill property as:

Fill = If(
    ThisItem.Value = "Sun" || ThisItem.Value = "Sat",
    Color.Azure,
    Color.Beige
)

You can provide any color you want.

8. Add a Blank vertical gallery under the days and set its Wrap count property to 7.

9. Edit the gallery and set its Items property as:

[
    "0",
    "1",
    "2",
    "3",
    "4",
    "5",
    "6",
    "7",
    "8",
    "9",
    "10",
    "11",
    "12",
    "13",
    "14",
    "15",
    "16",
    "17",
    "18",
    "19",
    "20",
    "21",
    "22",
    "23",
    "24",
    "25",
    "26",
    "27",
    "28",
    "29",
    "30",
    "31",
    "32",
    "33",
    "34"
]

10. Again, edit the gallery and insert a label inside it. Apply the formula below to its Text property as:

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

11. Edit the gallery and add a rectangle shape inside it. Select the rectangle, click on ellipses, reorder, and send it backward, so that it goes back to the gallery label.

12. Apply the code below to the rectangle’s BorderThickness property:

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

13. Again, go to the Rectangle Fill property and apply the code below:

If(
    Abs(Label4.Text - ThisItem.Value) > 10,
    Color.LightGray,
    Color.DarkGray
)

Where,

Label4 = Label name that shows the date inside the gallery

Finally, the Power Apps custom calendar will look like the screenshot below. Save, publish, and preview the app. Once you click on the forward icon, it will show you the upcoming dates and days.

In the same way, clicking on the backward icon will show you the previous month’s dates and days. Additionally, if you hover over any dates, the hover background color will change to blue (you can see the top gif).

I hope this article helped you learn how to create a custom calendar in Power Apps by creating variables and using controls like galleries, labels, rectangles, etc.

Additionally, you may like some more Power Apps tutorials:

• Power Apps List box Control
• Display Office 365 User Profile Details in Power Apps
• Power Apps Create Custom Progress Bar Using SharePoint Choice Values
• Power Apps Container Control
• Export and Import SharePoint Online Site as Template using PowerShell [Along with Power Apps Custom Forms]
• Filter Power Apps Gallery by Person

Preeti Sahu

Preeti Sahu is an expert in Power Apps and has over six years of experience working with SharePoint Online and the Power Platform. She is the co-author of Microsoft Power Platform: A Deep Dive book. As a Power Platform developer, she has worked on developing various tools using Power Apps and Power Automate. She also makes Microsoft 365 videos and shares them on YouTube.