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

  

  • 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)));
            $('#caalendar_date').append(datea);
            $('#caalendar_location').append(data.d[0].Location);
            }
            if(data.d.length&gt;1)
            {
            $('#more').show();
            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+"");                 }                  }
                  });
             $('#more').click(function(){
            $(this).hide();
            $('#restofcalendar').show();
            $('#less').show();
            });
            $('#less').click(function(){
            $(this).hide();
            $('#restofcalendar').hide();
            $('#more').show();
            });
                   });        
            
            

• HTML Code

  • </pre>
    <div class="recentitemscontainer">
    <table>
    <tbody>
    <tr>
    <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>
    </tr>
    </tbody>
    </table>
    </div>
    <pre>

• Don’t forget to add the source files in the heading links to Jquery if you are using SharePoint online :
  •   <!–
    https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
    https://code.jquery.com/ui/1.11.1/jquery-ui.min.js –>
• IF you have everything written properly now your HTML should  look like this

  

  Now save this page.

• Go to home page and edit the page

• 

• Add the content editor web part

  

• Edit the content editor web part and add the link to html file

  

• Once the page is saved you should see your upcoming events.