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 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>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>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("<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(); }); });
-
-
-
-
- Edit the html file in advanced mode
-
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 :
- 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
-
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
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!
LikeLike
That’s fine
LikeLike