@WonderLaura – Laura Rogers

Did you know that Power Apps has a built-in calendar screen template that you can add to any app? Even better — you can swap out the default Outlook calendar data and point your Power Apps calendar to your own SharePoint list (or even a Dataverse or SQL table!) in just a few minutes.

That’s exactly what we covered on this week’s Power Hour, and you all voted for this topic! In this post, I’ll walk you through how to add the calendar screen template, connect it to a SharePoint list, and build it into a fully functional app with forms and navigation.

📅 What Is the Power Apps Calendar Screen Template?

Power Apps has had a Calendar screen template since pretty much the beginning. When you add it to your app, it does a few things automatically:

• It builds out an entire calendar screen with month navigation (back and forward arrows)
• It adds Office 365 Outlook as a connector
• It shows your personal Outlook calendar events by default

Each day that has an event shows a little dot, and when you click a day, it filters to display that day’s events on the right side!

But here’s the thing — most of the time, you don’t want to show your Outlook calendar. You want to show shared business data like company events, training schedules, or project milestones from a SharePoint list. So let’s swap it out.

🔧 Step 1: Create a New App and Add the Calendar Screen

Go to Power Apps and create a new blank app (I chose responsive layout).

Click New Screen and look for the Calendar template.

Select it, and Power Apps builds the entire calendar screen for you — complete with a dropdown to pick which Outlook calendar to display, navigation arrows, and a day-detail panel on the right.

💡 Why does this matter? You’re getting hundreds of formulas and a fully working calendar layout for free. There’s so much already done for you here. We’re just going to make a few targeted swaps to point it at our own data.

📋 Step 2: Add Your SharePoint List as a Data Source

Go to Data in the left panel and click Add data.

Choose SharePoint, navigate to your site, and select your list.

In my example, I used a list called Company Events with these columns:

• Title — the event name
• Start — date/time column
• End — date/time column
• Event Location — a location column type

Whatever your date columns are named in SharePoint, those are what you’ll use in the filter formulas coming up.

🔄 Step 3: Replace the Data in the Power Apps Calendar with Your SharePoint List

This is the core of what we’re doing. The calendar template collects Outlook data into a collection called myCalendarEvents. We’re going to keep that same collection name (so we have fewer places to update!) but change what gets collected into it.

On the Screen’s OnVisible Property

Find the dropdown control that lets you pick a calendar (dropdownCalendarSelection1). Copy the (very long) formula from its OnSelect property.

• Go to the calendar Screen’s OnVisible property and paste that formula there. This way, the data loads automatically when people arrive on the screen — no extra click needed!
• Replace the Outlook portion with a Filter on your SharePoint list.

Original part of the formula:

Replace with this, and use your own list name where it says “Company Events”.

ClearCollect(
    myCalendarEvents,
    Filter(
        'Company Events',
        Start >= _minDate,
        End <= _maxDate
    )
);

Remove the line in this code that says Set(_myCalendar, Self.Name);
It will be easy to spot, it has an error.

💡 Why ClearCollect instead of Collect? If you use just Collect, it adds to the collection every time. So if someone clicks to March, then April, then back to March — those March events get added again and again, creating duplicates! ClearCollect empties out that temporary table first and then starts fresh. This is an important little gotcha.

On the Forward and Back Arrows

Find the forward arrow icon (iconNextMonth1) and locate the Collect formula in its OnSelect property.

Replace the Outlook portion with that same ClearCollect + Filter formula from #7 above.

Do the exact same thing for the back arrow (iconPrevMonth1).

That’s it for the data swap! You only need to change it in three places: the Screen’s OnVisible, the forward arrow, and the back arrow.

Delete the calendar selector drop-down (dropdownCalendarSelection1)

🗑️ Step 4: Clear Out the Old Collection Structure

Since the Outlook data has a completely different column structure than your SharePoint list, I recommend closing the app completely after making your changes. When you reopen it and the Power Apps calendar loads, it will collect your SharePoint data with the correct column structure — no leftover Outlook collection structure.

Weird bug: I noticed that there are a couple of places that have errors that show the name of the collection being MyCalendarEvents, but it’s supposed to be myCalendarEvents. You can find and replace those, it’s case sensitive.

🧹 Step 5: Clean Up the Errors

After you delete the dropdown (since we don’t need a calendar picker anymore), you’ll see some errors pop up. There are only a handful, and they’re all quick fixes. You can see in the video below, how I easily find and repair each error.

Y axis errors

Change lblMonthSelected1 to have Y = RectQuickActionBar1.Height.
Change iconCalendar1 to have Y = LblMonthSelected1.Y

ID casing

In Outlook, the ID field is Id (lowercase “d”). In SharePoint, it’s ID (both uppercase). Quick find-and-fix.
For Rectangle1, change the BorderThickness property to:
If(ThisItem.ID = _selectedCalendarEvent.ID, 2, 0)

Column names in the gallery

Wherever the template shows ThisItem.Subject in the gallery CalendarEventsGallery1 (the Outlook event name), change it to ThisItem.Title (your SharePoint column).Update the location reference to match your SharePoint column. Mine was 'Event Location'.Name since I used the Location column type.

💡 Pro tip: After fixing all the errors, remove the Office 365 Outlook connector from your app entirely. If any new errors pop up when you do that, it means you missed a spot — go find those errors and fix them!

✨ Step 6: Make It a Real App!

Now that the Power Apps calendar works with your SharePoint data, let’s build it out into a fully functional app.

Add a Welcome Screen

Insert a new screen using the Welcome screen template (I use this in every single app I create — it’s so polished!).

Move it to the top so it’s your app’s first screen.

Add a Form Screen

Insert another new screen using the Header and Form template.

When prompted, select your Company Events list as the data source. Name the screen Form Screen, and name the form control frmEvents.

Quick design tip: change the form’s background from gray to white. It instantly looks cleaner and more modern.

Wire Up the Calendar to the Form

On the calendar’s event gallery, set the OnSelect property to:

Set(varRecord, ThisItem);
Navigate('Form Screen');
EditForm(frmEvents)

On the form control, set the Item property to varRecord.

Now when someone clicks an event on the calendar, it stores that event in a variable, navigates to the form screen, and displays that event’s details.

Add a “New” Button

Add a button at the top of your calendar screen labeled “New”.

Set its OnSelect to:

NewForm(frmEvents);
Navigate('Form Screen')

On the form’s OnSuccess property, navigate back to the calendar screen.

Important: The built-in form template has the Submit button doing both SubmitForm AND ResetForm. Remove the ResetForm — it can cause buggy behavior.

💬 Audience Q&A Highlights

Can you use SQL instead of SharePoint? Yes! You’d add your SQL table as a data source and use the SQL column names instead of the SharePoint ones. The same approach applies — swap the data source in those three places.

Can you add the ability to create new events? Absolutely — that’s the “New” button we added above! You could even take it further and build out an event registration feature where people browse events and click a “Register” button.

🎬 Watch the Full Power Hour

Want to see me build this Power Apps calendar step by step? Watch the full replay on my YouTube channel @WonderLaura — and don’t forget to subscribe so you never miss a Power Hour!

📺 Subscribe to WonderLaura on YouTube

📚 Keep Learning

If you want to go deeper with Power Apps, check out my full courses at IW Mentor. Whether you’re brand new or you’ve been building apps for a while, there’s something there for you — all geared toward business users and power users, no developer background required.

And don’t forget — Power Hour is live Wednesdays at 11am Central! Sign up for the newsletter at iwmentor.com to vote on next week’s topic. You pick it, I cover it. See you there! 🎉