Marking Leave Days In Calendar Regarding SharePoint Leavelist

  1. <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">  
  2. <link rel="stylesheet" href="/resources/demos/style.css">  
  3. <script src="https://code.jquery.com/jquery-1.12.4.js"></script>  
  4. <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>  
  5. <script src='https://zsl85.sharepoint.com/sites/LMS/SiteAssets/Holiday/moment.js'></script>  
  6. <style type="text/css">  
  7.     .ui-datepicker td.holiday a,  
  8.     .ui-datepicker td.holiday a:hover {  
  9.         background: #C0392B;  
  10.         border: 1px solid #BF5A0C;  
  11.     }  
  12. </style>  
  13. <script type="text/javascript">  
  14.     var holidays1 = [];  
  15.     $(document).ready(function() {  
  16.         var siteUrl = _spPageContextInfo.siteAbsoluteUrl;  
  17.         var oDataUrl = siteUrl + "/_api/web/lists/getbytitle('HolidayList')/items?$select=Date,Holiday";  
  18.         $.ajax({  
  19.             url: oDataUrl,  
  20.             type: "GET",  
  21.             dataType: "json",  
  22.             headers: {  
  23.                 "accept""application/json;odata=verbose"  
  24.             },  
  25.             success: mySuccHandler,  
  26.             error: myErrHandler  
  27.         });  
  28.   
  29.         function mySuccHandler(data, request) {  
  30.             if (data.d.results.length >= 1) {  
  31.                 $.each(data.d.results, function(key, val) {  
  32.                     var GetYear = moment(val.Date).format("YYYY");  
  33.                     var GetMonth = moment(val.Date).format("MM");  
  34.                     var GetDay = moment(val.Date).format("DD");  
  35.                     var Holiday = val.Holiday;  
  36.                     holidays1.push([GetYear, GetMonth, GetDay, Holiday]);  
  37.                 });  
  38.                 $("#date").datepicker({  
  39.                     beforeShowDay: setHoliDays  
  40.                 });  
  41.   
  42.                 function setHoliDays(date) {  
  43.                     var holiDays = holidays1;  
  44.                     for (i = 0; i < holiDays.length; i++) {  
  45.                         if (date.getFullYear() == holiDays[i][0] && date.getMonth() == holiDays[i][1] - 1 && date.getDate() == holiDays[i][2]) {  
  46.                             return [true'holiday', holiDays[i][3]];  
  47.                         }  
  48.                     }  
  49.                     return [true""];  
  50.                 }  
  51.             }  
  52.         }  
  53.   
  54.         function myErrHandler(data, errCode, errMessage) {  
  55.             alert("Error: " + errMessage);  
  56.         }  
  57.     });  
  58. </script>  
  59. <div id="Container">  
  60.     <p>Holidays <input type="text" id="date" readonly="true"></p>  
  61. </div>  
Here, I am using HolidayList as My List and Date, Holiday are their columns.
 
Step 1
 
Include
href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css
https://code.jquery.com/jquery-1.12.4.js
https://code.jquery.com/ui/1.12.1/jquery-ui.js
Moment.js
 
Step 2

In the Script, intialize one variable Array (var holidays1 = [ ];) 
 
Using RestApi Query for Necessary Fields(ie var oDataUrl = siteUrl + "/_api/web/lists/getbytitle('HolidayList')/items?$select=Date,Holiday";)
 
Step 3
 
Check the Results Return by RespApi using data.d.results.length, as greater than one. Iterate using for Loop and store Date,Month,Year in some varaibles using Moment Function(eg var GetYear = moment(val.Date).format("YYYY");)
Store holiday narration in some Variable (eg: var Holiday = val.Holiday;) 
 
Step 5
 
Push the above varaibles in the variable arrary we intially declared,

(eg holidays1.push([GetYear,GetMonth,GetDay,Holiday]);)
(push function acts by Using Moment.js )
 
Step 6

Intialize Datepicker Function(i.e. $("#date").datepicker({ 
beforeShowDay: setHoliDays)(beforeshowday is the function of datepicker js used to, show the Calender depends on our own function Logic 
 
Step 7

The below Function is the Logic for Calender Leave Marking 
  1. function setHoliDays(date) {  
  2.     var holiDays = holidays1;  
  3.     for (i = 0; i < holiDays.length; i++) {  
  4.         if (date.getFullYear() == holiDays[i][0] && date.getMonth() == holiDays[i][1] - 1 && date.getDate() == holiDays[i][2]) {  
  5.             return [true'holiday', holiDays[i][3]];  
Step 8
 
Intialize the date Picker in the Html Using <p>Holidays <input type="text" id="date" readonly="true"></p> 
 
Step 9
 
Save this File as .txt file and Gave Link to Content Editor  WebPart of Ur Page...
 
Hope I helped someone.....  
Ebook Download
View all
Learn
View all