Sharepoint Calendar list with recurring events

Question

Using Office 365 version of Sharepoint, I have a calendar with recurring entries. When I try to filter a list to show only items today or later, it will not show most of the recurring items because the Start Time is always a prior date (the first date in the series). How can I get a list view to show all entries in the series that occur after today's date?

Answer 1

The standard list view of a calendar shows an item that has a re-occurrence indicated with an icon that has little arrows indicating if the item is the main item for a repeating series or if it has a slash it is a modified item that was a part of a repeating series.

There is a hidden web part that will show all items greater than or equal to today and include the repeating items, here is how to add it to a page.

1. Edit Page
2. Insert Calendar App Web Part
3. Edit Web Part
4. Open the Selected View Drop down and choose
5. Apply and Save your page.

This web part was historic to the 2007 team site calendar web part and shows items in this fashion that are greater than or equal to today. It also shows repeating items.

Answer 2

Here is my solution to filter calendar events including recurring in a list by "today".

1. In SharePoint create a new list view starting from an existing Current Events view or using the Standard View, with Expanded Recurring Events.
2. Go to Site Actions and select Edit Page.
3. Edit your new list view web part and select Current Events as the view.
4. Stop editing the page.
5. Apply additional filters by modifying the view.
6. Create at least 1 calendar event. (SharePoint Designer must have at least 1 row of data to make fields available)
7. Open SharePoint Designer and open the new view you created in Step 1.
8. Right-Click on the top row of the view and Select>Row.
9. Under Conditional Formatting, select “Apply Formatting…”
10. Under the Field Name, scroll to the bottom of the drop-down list and select “More Fields…”.
11. Check the box named “Show data values”
12. Scroll down and select the Start Time field (@EventDate).
13. Leave the Comparison field set to “Equals”
14. Leave the Value field set to [Current Date].
15. Click on Set Style to set a background or font color.
16. Right-Click on the top row of the view and Select>Row again.
17. Under Conditional Formatting, select “Hide Content…”
18. Under the Field Name, scroll to the bottom of the drop-down list and select “More Fields…”.
19. Check the box named “Show data values”
20. Scroll down and select the Start Time field (@EventDate).
21. Change the Comparison field set to “Not Equals”
22. Leave the Value field set to [Current Date].
23. Save and Refresh SharePoint Designer. Note* The color formatting in steps 8-14 can be removed if no color formatting is preferred. For some reason, the Conditional Formatting-Hide Content wouldn’t work unless apply formatting was first used.

Answer 3

Here is a link to a small JS library that allows users to easily collect recurring calendar events, and apply various date filtering. Full disclosure- I am author of this lib.

SP Calendar Pro on GitHub

Documentation

Answer 4

I wanted to piggyback on my original post. I see a user had asked about getting a "Today" view of calendar items without using SharePoint Designer. I have found a way to create a calendar listview filtered by today's date and sort by column.

Note: My solution is being used in SharePoint 2016. My apologies in advance. I am sure there is a more efficient way of writing this code.

Step 1: Create a new calendar view based on the current events view. Step 2: Edit the page and edit the webpart. Change the Selected View to the Current Events view. (Note: Even though you've created a listview based on the Current Events template, this process re-organizes the data filtering the events by ascending date.) Step 3: Add a script editor. Step 4: Edit the script editor and paste in the code below. Step 5: Stop editing the page.

<SCRIPT type="text/javascript" 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> 
</script>
<SCRIPT type="text/javascript" 
src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/moment.min.js"> 
</SCRIPT>
<SCRIPT type="text/javascript" 
<script src= "https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/js/jquery.tablesorter.min.js"></script>
<SCRIPT type=text/javascript>

function frmtDate() {
var dateObj = new Date(Date());
var momentObj = moment(dateObj);
var formattedDate = momentObj.format('M/D/Y');
return(formattedDate);
};

$(document).ready(function() {
document.getElementById("myInput").value = frmtDate();
$("#myInput").on("click", function() {
   var value =$(this).val().toLowerCase();
   $('table [class="ms-listviewtable"]').find('tr').each(function() {
   $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)    });
});
$("#myInput").trigger("click");
$('table [class="ms-listviewtable"]').tablesorter( {sortList: [[2,0]]} );
});

</script>

<input type="hidden" id="myInput" value="" />