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
    chart_02
    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

          • [code language=”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;    }

            [/code]

            • Javascript
            • [code language=”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>0) { $(‘#meeting_title’).append(““+data.d[0].Title+”“);
               var datea = new Date(parseInt(data.d[0].StartTime.substr(6)));
              $(‘#caalendar_date’).append(datea);
              $(‘#caalendar_location’).append(data.d[0].Location);
              }
              if(data.d.length>1)
              {
              $(‘#more’).show();
              for(var i=1;i<data.d.length;i++)
              {
              var datea = new Date(parseInt(data.d[i].StartTime.substr(6)));
              $('#restofcalendar').append("“+data.d[i].Title+” “+datea+” “+data.d[i].Location+””);                 }                  }
                    });
               $(‘#more’).click(function(){
              $(this).hide();
              $(‘#restofcalendar’).show();
              $(‘#less’).show();
              });
              $(‘#less’).click(function(){
              $(this).hide();
              $(‘#restofcalendar’).hide();
              $(‘#more’).show();
              });
                     });        

              [/code]

  • HTML Code

    • [code language=”html”]

      Upcoming Events

      [/code]
  • 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
    htmlcode
    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

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

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

    RecentEvents_b

Advertisements

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

Your email address will not be published. Required fields are marked *