Display the Calendar Using Jquery Full Calendar and SharePoint Rest API

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>  

Issues of Console.Log with Internet Explorer

Recently, I ran into an issue with one of my client where my particular callback function of ajax call was not called at all. It worked absolutely fine with google chrome and it was only issue with the Internet Explorer.

I did lot of digging around the ajax calls using fiddler to see if there is problem in the ajax call or whether some JavaScript file is not loaded correctly but could not find it much on that front.

I could track the issue when we open the IE development toolbar and it used to work absolutely fine. Initially I could not produce it  on my machine as I frequently use the IE toolbar. After troubleshooting a bit i found out that console object is exposed only when the developer tools are opened for a particular tab. If I do not open the developer tools window for that tab, the console object remains exposed for each page you navigate to. If I open a new tab, I must also open the developer tools for that tab in order for the console object to be exposed.

This was some petty issue which took lot of time to identify for me. So for workaround on this I  developed a small utility file for logging into console which will work across all the browsers.
This utility will log console messages only when console object is active else it will skip logging.

 /*
 FileName  :  DPSUTILS.js
 Author   :  Dhaval Shah
 Description :  This Javascript library contains common methods to do the read/Write operation across  
         different data sources e.g. UserProfile, Managed Metadata Service and Search Service
 */
 (function() {
   if (!window["DPS"]) {
     window["DPS"] = {};
   }
   DPS.Namespace = {
     Register: function(namespace) {
       var parts,
         context,
         nsPath,
         partsLength;
       parts = namespace.split(".");
       partsLength = parts.length;
       context = window;
       nsPath = "";
       for (var i = 0, l = partsLength; i < l; ++i) {
         var name = parts[i];
         if (!context[name]) {
           context[name] = {};
           context[name].__namespace = name;
         }
         nsPath += name + ".";
         context = context[name];
         if (!context.__namespace) {
           context.__namespace = nsPath.substring(0, nsPath.length - 1);
         }
       }
       return context;
     }
   };
 })();
 /**
  * This namespace contains utility functions used across application.
  */
 (function() {
   DPS.Namespace.Register("DPS");
   DPS.Namespace.Register("DPS.UTILS");
      DPS.UTILS = {    
     /*
      * Logs the exception message in browser console
      * @param {string} message - Exception Message
      */
     logAjaxErrorMessage: function(xhr, status, error) {
         if (xhr.responseText != "") {
           var message = xhr.responseText;
           if (typeof console === "undefined") {
             return;
           }
           console.error(message);
         }
       },
       logMessage: function(message) {                
           if (typeof console === "undefined") {
             return;
           }
           console.log(message);        
       }
   };
 })();

Save this file as DPSUTILS.js and reference it in your code.

In order to log message you can directly use

DPS.UTILS.logMessage("My Log Message . . .");

I hope this was helpful..

Happy Coding !