Display Calendar Events From SharePoint Calendar Lists Using Rest API

We will query the SharePoint calendar list using REST API and display and format the results using JavaScripts and CSS. This is a basic use of the Get command using REST and content editor WP for SP list items that we would normally use for On Prem. When we are playing with Dates, then it gets a little interesting. Let me know in the comments if you guys have any other preferred way of doing this.

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

1. Create a calendar list using the Calendar list template. Give it a name. I named it “MyOfficeEvent”.
2. 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:
   
   
   
   
3. 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.