Display Calendar Events From SharePoint Calendar Lists Using Rest API

Introduction

We will query the SharePoint calendar list using REST API and format the results using JavaScripts and CSS. We will then use Content Editor WebPart to display the result in a SharePoint page. This is a basic use of REST to get and display list items in SharePoint On-prem. When we are playing with date value than it gets a little interesting. Here is the result:

Steps

Create a calendar list using the Calendar list template. Give it a name. I named it “MyOfficeEvent”.
For writing simple Javascripts, SP designer is still my choice to go. So, let's open SP Designer and go to the site assets library of your SP site. Create a folder inside the site assets library, name it CalendarDisplay and create two files in there: calendar.js and calendar.css as shown:
I created the calendar icon using PowerPoint. PowerPoint has become my number one option when it comes to creating icons. I named it calendar.svg and copied inside the CalendarDisplay folder in site assets.

Open calendar.js and paste this js code:

< link rel = "stylesheet"
href = "/SiteAssets/CalendarDisplay/calendar.css" >
<
script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" > < /script>
<
script type = "text/javascript" >
$(document).ready(function() {
var webUrl = _spPageContextInfo.webAbsoluteUrl;
GetCalendar(webUrl);
})
function GetCalendar(webUrl) {
var today = new Date();
var RestUrl = webUrl + "/_api/web/lists(guid'DF5C2335-4083-4118-88CF-0CE73C3DCA1A')/items?$select*&$filter=EventDate gt datetime'" + today.toISOString() + "'" + '&$orderby=EventDate asc';
$.ajax({
url: RestUrl,
method: "GET",
datatype: "json",
headers: {
"accept": "application/json;odata=verbose",
},
success: function(data) {
data = data.d.results;
console.log(data);
var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"];
var dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
$.each(data, function(index, value) {
var itemLink = webUrl + '/Lists/MyOfficeEvent/DispForm.aspx?ID=' + value.ID + '&Source=' + webUrl;
var title = value.Title || " ";
var d = new Date(value.EventDate);
var startDate, startMonth, startTime, endTime;
var fAllDayEvent = value.fAllDayEvent;
//check if all day event
if (!fAllDayEvent)
{
startDate = d.getDate() < 10 ? "0" + d.getDate() : d.getDate();
startDate = "<span class='eventDay'>" + startDate + "</span>";
startMonth = "<span class='eventMonth'>" + monthNames[d.getMonth()] + "</span>";
startDay = dayNames[d.getDay()];
startTime = formatAMPM(d);
endDate = new Date(value.EndDate);
endDate = formatAMPM(endDate);
startDate = "<div class='eventDate'>" + startMonth + startDate + "</div>";
startTime = "<span class='eventTime'>" + startDay + " " + startTime + " - " + endDate + "</span>";
} else
{
d.setTime(d.getTime() + (4 * 60 * 60 * 1000)); //all day events are parsed -4hours by JS so adding 4 hrs
startDate = d.getDate() < 10 ? "0" + d.getDate() : d.getDate();
startDate = "<span class='eventDay'>" + startDate + "</span>";
startMonth = "<span class='eventMonth'>" + monthNames[d.getMonth()] + "</span>";
startDay = dayNames[d.getDay()];
startDate = "<div class='eventDate'>" + startMonth + startDate + "</div>";
startTime = "<span class='eventTime'>" + startDay + " - All Day " + "</span>";
}
var html = '<tr><td>' + startDate + '</td><td>' + '<a href="' + itemLink + '">' + '<div class="divTitle"><span class="eventTitle">' + title + "</span>" + startTime + '</a>' + '</td></tr>';
$('#calendarTable tbody').append(html);
});
},
error: function(xhr, status, error) {
console.log("****Error: GetCalendar Failed. Error Msg: " + error);
}
});
}
function formatAMPM(date) {
var hours = date.getHours();
var minutes = date.getMinutes();
var ampm = hours >= 12 ? 'PM' : 'AM';
hours = hours % 12;
hours = hours ? hours : 12; // the hour '0' should be '12'
minutes = minutes < 10 ? '0' + minutes : minutes;
var strTime = hours + ':' + minutes + ' ' + ampm;
return strTime;
}
<
/script>
<
div class = "wrapper" >
<
div class = "headerDiv" > < img src = "/SiteAssets/calendardisplay/calendar.svg"
alt = "" > < span class = "headerSpan" > Office Events < /span></div >
<
table id = "calendarTable" >
<
tbody > < /tbody>
<
/table>
<
div class = "divViewAll" > < a href = "/Lists/MyOfficeEvent/calendar.aspx" > View All < /a></div >
<
/div>

Note

In the REST query, I am using a filter query to get only future events and sorting them by ascending order. Function formatAPPM is used to format start time and end time.

I am using if(fAllDayEvent) condition to check if the event is an all-day event or not. Otherwise, we will see some mismatch in the start and end time of all-day events as shown:

Open calendar.css and paste this CSS code:

.wrapper {
width: 30 % ;
}
.headerDiv {
font - family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans - serif;
background - color: #d7d7da;
width: 100 % ;
padding - left: 12 px;
font - size: 17 pt;
color: #494950;
}
.headerDiv img{
width: 40px;
vertical-align: middle;
margin-bottom: 5px;
padding-left:5px;
}
.headerSpan{
padding-left:10px;
line-height:45px;
}
.divTitle{
padding-left:5px;
}
.eventTitle{
display:block;
}
.eventTime{
display:block;
font-size:9pt;
margin-top:3px;
}
.eventDay, .eventMonth{
display:block;
margin-bottom: -5px;
}
.eventDate {
width: 60px;
text-align: center;
border-radius: 3px;
padding: 4px 0px;
}
.eventDay{
font-size: 20pt;
}
.eventMonth{
font-size: 11pt;
}
.divViewAll{
float:right;
margin-right:20px;
}

Next, go to your choice of SP page and insert a content editor webpart. Edit the webpart and give the link to your Javascript file.

That’s it. You should see the final webpart on your page. If the webpart is not visible, check your console in the browser and let us know if there is any issue.

2 Comments

Join the conversation! Your thoughts help the community grow.

Jim Blanchard6y ago
I love the vertically formatted display of current events! I tried your script and didn't get anything to display. I am running SharePoint Online with a Classic web part page. I opened my console (F12) but I don't know how to read it.
Amit Saraswat6y ago
Can you update the code for long event (not recurrence )