A better way to display “today’s events” from multiple calendars in SharePoint on your intranet home page

Below on the left are two traditional, out-of-the-box solutions for showing Today’s events in SharePoint. Notice how both take up a lot of extra space repeating today’s date (which we don’t need to see at all in a web part called “Today’s Events”) or showing gray space where there are no events. Soak that in – prime real estate on your home page goes to non-existent events. These also may require overlays and other manual labor processes that need adjusted every time a calendar is added or removed.

But on the right is what you could have. It uses search instead and displays events from all calendars a user has access to in one place. It shows only the necessary information on the home page and links to full details. And with a little CSS included in this post, it can look polished and themed. Imagine all you could do with that saved space on your home page…

Also seen above: Adding local weather to your SharePoint intranet home page
and a “this week’s menu” button for your intranet

You need:

• SharePoint Designer (free download here if you don’t have it)
• A classic view page where you’re placing the events list (will not work on modern experience)
• SharePoint Server/on-prem, but can be adjusted for Online/O365.
  • If you’re on SharePoint Online/O365 I believe you can replace every instance of “Date00” in these instructions with “RefinableDate00” including the “query” step of the content web part section. I haven’t tested that completely, but it should get you going in the right direction.

This project consists of four main steps.

1. Update search schema to allow us to search for and display “start time” correctly in results
2. Create a display template that will display event, location and start time nicely
3. Create the content search web part which will actually display events on your page
4. Optional but recommended: Add CSS to make the content query more visually pleasing

Edit the search schema

Note: If you go to do these steps and everything is grayed out, you’re at the wrong level (perhaps site level instead of site collection level) and should try central admin or speak to an administrator about having this done for you. This article explains each setting, and at which level you’re able to edit.

1. Go to search schema settings
   1. Via Central Admin for SharePoint, click search on the left and then “Manage search schema”
   2. Via Site Collection Admin, go to Site Settings –> “Search Schema” under “Site Collection Administration
      
2. Search for “Date00” and edit it
   
3. Place a checkmark (if not already there) next to Queryable and retrievable
4. Refinable and sortable should be changed to yes
   
5. For “mappings to crawled properties” mark “include content from the first crawled property that is not empty…” and enter the following two properties in this order into the box:
   • Ows_EventDate
   • Ows_q_DATE_EventDate
     
6. Click OK and do a full crawl for changes to take place
7. If successful, when repeating step 2 (searching for Date00) you should see something like this:

Create the display template

This new display template features three lines of data so we can show event, location and start time. This includes the necessary variables to format “EventDate” (which is date and time) as just time since we already know what “today” is and don’t need it repeated on every event.

1. Open your site in SharePoint Designer and click “All files” on the left
2. _catalogs –> masterpage –> Display Templates –> Content Web Parts
3. Right-click Item_TwoLines.html, click copy and then paste (Ctrl+V)
4. Rename the new file Item_ThreeLines.html (right-click, rename)
   
5. Right-click your new Item_ThreeLines.html file and click “Edit File in Advanced Mode”
6. Copy and paste the HTML lines linked below into your own file, replacing existing text/lines there:

Download/view HTML File

Click save.

Create the content search web part

1. Add a new content search web part to the page on which you’re placing “Today’s Events”
   From the ribbon menu, Insert –> Web part –> Content Rollup –> Content Search –> Add
2. Edit the web part
3. In the properties pane on the right, click “Change Query” and then “Switch to Advanced Mode”
4. Paste the following into “Query Text” replacing anything already there. This will make sure those pesky events that have been deleted or canceled but stay on the calendar don’t take up real estate on your home page.

   Date00={Today} ContentTypeId:0x0102* -Title:Cancelled: -Title:Canceled: -Title:Deleted:

   

5. Click on the “sorting” tab and sort by Date00 Ascending
   
6. Click OK
7. Choose how many events you want listed at once
8. Change Control to “List with Paging” so if there are more than your max “items to show” users can still see the rest easily by clicking an arrow
9. Under Display Templates, change “Item” to your newly created “Three Lines” template
   
10. Expand “Appearance”, update the title for your web part (i.e. Today’s Events) and change chrome type to “Title Only”
    
11. Click OK
12. Save the page

Add CSS to format the web part and replace “document” icon

1. Download this icon or create your own that’s 25x25px
   
2. Save the icon to your Site Assets folder or another location in SharePoint where you save icons and images.
3. Add a script editor web part to your page and copy and paste this script into it
   1. Replace the URL in the script with the location of your own icon.
   2. Replace BOTH instances of #WebPartWPQ1 with the correct number for your web part.
      • To find the number of your web part, press F12 and use DOM explorer to click on the title of the web part you’re creating. It will take you to a place in the script that tells you the correct number of your part after “WPQ”. Replace “WPQ1” in the following script with “WPQ” and that number.
        

Click “OK” on the script editor and save the page!

Optional next steps:

• Add a link to a “master calendar” after the web part in case there are no events in a day. You can also hyperlink the title of the web part to a master calendar.
• Add additional CSS to format the web part title, event link colors, etc.

Note: This solution will not pull recurring events. It’s meant to give a glimpse of the day, with a link to the full calendar or more details on any specific event. We want to clean up home pages, eliminate dead space and avoid having regular meetings show up that don’t apply to everyone. So if people want events pulled to the home page, they’ll need to make them non-recurring. Or someone will need to figure out how to include them. 🙂 Good luck!