Display SharePoint Calendar events in home page using Jquery

There are many ways of bringing the calendar event to the forefront of your site for everyone’s visibility. adding calendar list view web part being one of them which helps you get all the calendar events in the home page. you can customize further your view or filter data as you want.

In this article, we will use a jquery and list web service to retrieve the calendar events and place it in the home page with a nice style. We will focus on the events whose category is Meeting only. This is the major event that everyone needs to see you don’t want to expose the vacation calendar of your teammate to everybody. If that is not a problem then you can just remove the category part from the web service URL and you will get all the items. Also, we are only retrieving the future events not the events in past.

let’s get started.

Required for this code:

SharePoint System: SharePoint 2010 and later, SharePoint Online

Calendar list Name: Calendar

Jquery: Reference to the latest Jquery

  • Open your site in SharePoint Designer and  an HTML file to a document library in SharePoint
    Add an html file
    • Edit the html file in advanced mode

      Edit in Advanced Mode
      Edit the html file in advanced mode
    • Add following code in the html file
        • CSS

          • .recentitems {   padding: 5px;    background-color: #bedcf2;   margin: 2px;   }
            .recentitems a {  color: #0970b8;    font-weight:700;}
            .itemscontainer h2 {   background-color: #0072C6;    color: #e3f973;    text-align: center;    font-size: 20px;    font-weight: bold;}
            .cal_recentitems{ width: 100%;   }
            #caalendar_date{ font-size:18px; color:#0970b8;}
            #caalendar_location{ font-size:18px; color:#0970b8;}
            .calendar_items{ background-color: #bedcf2; font-size:18px; color:#0970b8;     text-align: center;  }
            #meeting_title {    text-decoration: underline;}
            .rest_event {    text-align: center;    background-color: #bedcf2;    border-top: white 2px solid;    font-size: initial;    color: #3389c5;}
            .rest_event>a {    text-decoration: underline;}
            h2.Lnksheading{ padding: 5px;    background-color: #559fe8;    color: white;    }
            • Javascript
            • $(document).ready(function () {
              var url = _spPageContextInfo.webServerRelativeUrl;
              var webapplicationurl=window.location.protocol + "//" + window.location.host;var cur_url= webapplicationurl+url;         //Calendar Events Start here
               var today = new Date().toISOString();
               var listUrl = cur_url+'/_vti_bin/ListData.svc/Calendar?$filter=StartTime ge datetime%27'+today+'%27and CategoryValue eq %27Meeting%27&orderby=StartTime&$top=5';
              $.getJSON(listUrl, function(data)
              if(data.d.length&gt;0) { $('#meeting_title').append("<a>"+data.d[0].Title+"</a>");
               var datea = new Date(parseInt(data.d[0].StartTime.substr(6)));
              for(var i=1;i&lt;data.d.length;i++)
              var datea = new Date(parseInt(data.d[i].StartTime.substr(6)));
              $(&#039;#restofcalendar&#039;).append(&quot;<a>"+data.d[i].Title+"</a> "+datea+" "+data.d[i].Location+"");                 }                  }
  • HTML Code

    • </pre>
      <div class="recentitemscontainer">
      <td valign="top">
      <h2 class="Lnksheading">Upcoming Events</h2>
      <div id="calendaritems" class="calendar_items"></div>
      <div id="restofcalendar" class="calendar_items" style="display:none;"></div>
      <div id="more" class="calendar_items" style="text-decoration:underline;display:none;margin-top:2px;background-color:#86bbf1;color:white;">SeeMore</div>
      <div id="less" class="calendar_items" style="text-decoration:underline;display:none;margin-top:2px;background-color:#86bbf1;color:white;">SeeLess</div></td>
  • Don’t forget to add the source files in the heading links to Jquery if you are using SharePoint online :
  • IF you have everything written properly now your HTML should  look like this
    Full page with html code

    Now save this page.

  • Go to home page and edit the page
  • EditPage
    Edit the page
  • Add the content editor web part

    Add Content Editor Webpart.
  • Edit the content editor web part and add the link to html file

    Add link to html file and save the page
  • Once the page is saved you should see your upcoming events.
    Calendar Events added to home page


2 thoughts on “Display SharePoint Calendar events in home page using Jquery

  1. Do you mind if I quote a few of your articles
    as long as I provide credit and sources back
    to your webpage? My website is in the very same area of
    interest as yours and my visitors would truly benefit from a lot of the information you present
    here. Please let me know if this ok with you. Regards!


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s