JSFiddle - React, Tailwind, and code Playground

by Vetrivel Samidurai

HTML

<input id="txtDate" />
<BR /><BR /><BR />

<b>NOTE:</b><BR /><BR />
<DIV>When hover on saturday and sunday it will show as HOLIDAYS</DIV>

<DIV>When hover on RED background denotes  : BOOKED </DIV>

<div>When hover on PINK background denotes : NOT AVILABLE</div>

<di>As of now the customer they can able to view the status upto next 3 months, it can be dynamic and business owner wish</div>
<br>
    <div><i>Color and ui part wise we can change it later,  Just i have developed for testing purpose</i></div>

CSS

td.not_avi span.ui-state-default {
    color: #f00;
    background: pink;
}
td.avi span.ui-state-default {
    color: #000;
    
   
    
}



td.booked span.ui-state-default {
    color: #000;
    background: red;
}

td.holi span.ui-state-default {
    color: #000;
    background: #fff;
}

JavaScript

var unavailableDates = ["2014-6-20", "2014-6-18","2014-7-18","2014-7-1","2014-8-19"];

 var booked = ["2014-6-16", "2014-6-24","2014-7-17"];

    function disabledays(date) {
        var ymd = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
        if ($.inArray(ymd, unavailableDates) >= 0) {
            return [false, "not_avi", "NOTAVILABLE"];
        }
        if ($.inArray(ymd, booked) >= 0) {
            return [false, "booked", "BOOKED"];
        }
         var day = date.getDay();
        if(day == 0 || day==6)
        {
             return [false, "holi", "HOLIDAY"]; 
        }
        else {
            //Show only sundays and thuersdays
            var day = date.getDay();
            return [(day != 0 && day != 6),'avi','AVILABLE'];
        }
    }

    $(function () {
        $('#txtDate').datepicker({
            beforeShowDay: disabledays,
            minDate:0,
            maxDate:'+3M'
            
        });
    });