Datepicker showing availability

Datepicker showing different date statuses, such as available, unavailable or low.

by andysmiffy

HTML

<div id="dateSelector"></div>

CSS

td.available   {border-color: red !important;padding: 1px 0 1px 1px !important;background: none !important;overflow:hidden;}
td.available a {background: #9FF781 50% 50% repeat-x !important;  border: 1px #88a276 solid !important;}
/*
.available { 
    background-color: green !important;    
}
*/
sold { 
    background-color: red!important;
    border-color: red !important;
    color: red !important;
    /*opacity: 1 !important; */
}

.ui-datepicker-unselectable.sold span.ui-state-default {
    background:red!important;
    border-color:#FF6600 !important;
    color:#FF9966 !important;    
}

.low { 
    background-color: yellow !important;
}

td.low   {border: none !important;padding: 1px 0 1px 1px !important;background: none !important;overflow:hidden;}
td.low a {background: #F3F781 50% 50% repeat-x !important;  border: 1px #88a276 solid !important;}

/*
.td.low span.ui-state-default {
    background:yellow!important;
    border-color:yellow !important;
    color:yellow !important;    
}
*/

JavaScript

// Dates need to be dd-mm not d-m
// Added some in the past to test no hover or availability of past dates

availableDates = ['01-01-2015','01-02-2015', '01-29-2015', '01-31-2015', '02-02-2015'];
lowDates = ['02-03-2015'];
soldDates = ['01-30-2015', '02-04-2015', '02-05-2015','02-06-2015',];

/*
availableDates = ['01-01-2015','02-01-2015', '29-01-2015', '31-01-2015', '02-02-2015'];
lowDates = ['03-02-2015'];
soldDates = ['30-01-2015', '04-02-2015', '05-02-2015','06-02-2015'];
*/
             
$(document).ready(function(){
    initComponent();   
});

function getToday(){
    var fullDate = new Date()
             
    twoDigitMonth = ((fullDate.getMonth().length+1) === 1)? (fullDate.getMonth()+1) : '0' + (fullDate.getMonth()+1);
    var currentDate = twoDigitMonth + "-" + fullDate.getDate() + "-" + fullDate.getFullYear();
             
    return currentDate;           
}

/* Init our Date component */             
function initComponent(){
    $("#dateSelector").datepicker({
                     
        inline: true,
        dateFormat: 'dd-mm-yy',
        minDate: 0, 
             
        /* Event run before showing each day = to set availability and colour*/     
        beforeShowDay: function(d) {
            var dmy = (d.getMonth()+1); 
            if(d.getMonth()<9) 
                dmy="0"+dmy; 
            dmy+= "-"; 
            
            if(d.getDate()<10) dmy+="0"; 
                dmy+=d.getDate() + "-" + d.getFullYear();                         
             
            var today = new Date(getToday());
            var caledndarDate = new Date(dmy);
            
             console.log('Today: ' + today + ' and dmy:' + dmy);
             
             if (caledndarDate < today) {
                 /* Date in the past Ensure disabled even if they are listed as available */
                 console.log(dmy + ' in the past');
                 return [false, "",""];
             } else {
                 if ($.inArray(dmy, availableDates) != -1)...