Marking Leave Days In Calendar Regarding SharePoint Leavelist

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src='https://zsl85.sharepoint.com/sites/LMS/SiteAssets/Holiday/moment.js'></script>
<style type="text/css">
    .ui-datepicker td.holiday a,
    .ui-datepicker td.holiday a:hover {
        background: #C0392B;
        border: 1px solid #BF5A0C;
    }
</style>
<script type="text/javascript">
    var holidays1 = [];
    $(document).ready(function() {
        var siteUrl = _spPageContextInfo.siteAbsoluteUrl;
        var oDataUrl = siteUrl + "/_api/web/lists/getbytitle('HolidayList')/items?$select=Date,Holiday";
        $.ajax({
            url: oDataUrl,
            type: "GET",
            dataType: "json",
            headers: {
                "accept": "application/json;odata=verbose"
            },
            success: mySuccHandler,
            error: myErrHandler
        });

        function mySuccHandler(data, request) {
            if (data.d.results.length >= 1) {
                $.each(data.d.results, function(key, val) {
                    var GetYear = moment(val.Date).format("YYYY");
                    var GetMonth = moment(val.Date).format("MM");
                    var GetDay = moment(val.Date).format("DD");
                    var Holiday = val.Holiday;
                    holidays1.push([GetYear, GetMonth, GetDay, Holiday]);
                });
                $("#date").datepicker({
                    beforeShowDay: setHoliDays
                });

                function setHoliDays(date) {
                    var holiDays = holidays1;
                    for (i = 0; i < holiDays.length; i++) {
                        if (date.getFullYear() == holiDays[i][0] && date.getMonth() == holiDays[i][1] - 1 && date.getDate() == holiDays[i][2]) {
                            return [true, 'holiday', holiDays[i][3]];
                        }
                    }
                    return [true, ""];
                }
            }
        }

        function myErrHandler(data, errCode, errMessage) {
            alert("Error: " + errMessage);
        }
    });
</script>
<div id="Container">
    <p>Holidays <input type="text" id="date" readonly="true"></p>
</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 

function setHoliDays(date) {
    var holiDays = holidays1;
    for (i = 0; i < holiDays.length; i++) {
        if (date.getFullYear() == holiDays[i][0] && date.getMonth() == holiDays[i][1] - 1 && date.getDate() == holiDays[i][2]) {
            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.....