Display the Calendar Using Jquery Full Calendar and SharePoint Rest API

Aug 20, 2015 at 10:49 PM


In this post I will show you how to create your own Jquery Calendar view using the simple Jquery and SharePoint Rest API. I have used the Jquery full calendar plugin as it is very easy to use. It is highly customizable and very light weight.

I have created a Calendar list in my site and named it as ‘UpcomingEvents’. We will use this list to store our events or meetings.

You will required to add the reference to the following files from FullCalendar.io 

<link href="../SiteAssets/css/fullcalendar.css" rel="stylesheet"/>  
 <link href="../SiteAssets/css/fullcalendar.print.css" rel="stylesheet" media='print' />  
 <script type="text/javascript" src="../SiteAssets/js/jquery-1.11.0.min.js" ></script>  
 <script type="text/javascript" src="../SiteAssets/js/fullcalendar.min.js" ></script>  
 <script type="text/javascript" src="../SiteAssets/JqueryFullCalendar.js" ></script>  
Create JqueryFullCalendar.txt and add the above mentioned references in the file,

JqueryFullCalendar.txt


 <link href="../SiteAssets/css/fullcalendar.css" rel="stylesheet"/>  
 <link href="../SiteAssets/css/fullcalendar.print.css" rel="stylesheet" media='print' />  
 <script type="text/javascript" src="../SiteAssets/js/jquery-1.11.0.min.js" ></script>  
 <script type="text/javascript" src="../SiteAssets/js/moment.min.js" ></script>  
 <script type="text/javascript" src="../SiteAssets/js/fullcalendar.min.js" ></script>  
 <script type="text/javascript" src="../SiteAssets/JqueryFullCalendar.js" ></script>  
           <div id='calendar' class="float:left search-results"></div>  


JqueryFullCalendar.js will have our custom code to load the events from the SharePoint List and render it in the Jquery Full Calendar. This calendar will support recurring events as well. 

JqueryFullCalendar.js

 var ele = [];
 var listUrl = "../_vti_bin/listdata.svc/";
 $(document).ready(function() {
 Retreive();
 });
 function Retreive() {
 var listUrl = "../_vti_bin/ListData.svc/UpcomingEvents";
 $.ajax({
 url: listUrl,
 type: "GET",
 data: {
 $select: "Title,Description,StartTime,EndTime,AllDayEvent,Recurrence,Id"
 },
 headers: {
 accept: "application/json;odata=verbose"
 },
 success: function(data) {
 $.each(data.d.results, function(i) {
 currObj = this;
 var fADE = currObj.AllDayEvent;
 if (fADE != null) {
 if (fADE == 0) {
 thisADE = false
 } else thisADE = true;
 }
 var thisID = currObj.Id;
 var thisTitle = currObj.Title;
 var thisRecurrence = currObj.Recurrence;
 var thisDesc = currObj.Description;
 var x = new Date(parseInt(currObj.StartTime.substr(6)));
 var y = new Date(parseInt(currObj.EndTime.substr(6)));
 ele.push({
 title: currObj.Title,
 id: currObj.Id,
 start: x,
 description: currObj.Description,
 end: y,
 allDay: thisADE,
 });
 });
 BindCalendar();
 }
 });
 }
 function BindCalendar() {
 var calendarioDiv = $('#calendar');
 var fullCalendar = calendarioDiv.fullCalendar({
 events: ele,
 error: function() {
 alert('Error');
 },
 editable: false,
 firstDay: 0,
 monthNames: ['JANUARY', 'FEBRUARY',
 'MARCH', 'APRIL', 'MAY',
 'JUNE', 'JULY', 'AUGUST', 'SEPTEMBER',
 'OCTOBER', 'NOVEMBER', 'DECEMBER'
 ],
 dayNames: ['Sunday', 'Monday', 'Tuesday',
 'Wednesday', 'Thursday', 'Friday', 'Saturday'
 ],
 dayNamesShort: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
 allDay: true
 });
 }

Add the Content Editor webpart on your page and add the reference to the JqueryFullCalendar.txt file in it. Below is the output


Happy Coding !

Found this article by Dhaval Shah valuable? Help by Sharing ...

  • Click on the banners at the top of article or in the right panel to visit my blog's sponsors. They are all hand-picked and are selected based on providing great products and services to the SharePoint community.
  • I’d be very grateful if you’d help it spread by Sharing. Below, you should find links to sharing this article on your favorite social media sites.
Related Posts by Dhaval Shah blog comments powered by Disqus