JSFiddle - React, Tailwind, and code Playground

by Eric Howe

HTML

<div id="datepicker"></div>

<div id="theevents">
    <p>Select a date on the calendar to see theevents.</p>
</div>

CSS

#highlight, .highlight {
    background-color: #000000;
}

JavaScript

var dates = [new Date(2011, 11 - 1, 3), new Date(2011, 11 - 1, 11), new Date(2011, 11 - 1, 19), new Date(2011, 11 - 1, 26), new Date(2011, 12 - 1, 11), new Date(2012, 6 - 1, 16), new Date(2012, 7 - 1, 1), new Date(2012, 9 - 1, 20), new Date(2012, 10 - 1, 25)];

function highlightDays(date) {
    for (var i = 0; i < dates.length; i++) {
        if (dates[i].getTime() == date.getTime()) {
            return [true, 'highlight'];
        }
    }
    return [true, ''];

}

$('#datepicker').datepicker({
    numberOfMonths: [1, 1],
    beforeShowDay: highlightDays
});

$('#datepicker td').attr('onclick', '');

$('#datepicker').click(function(evt) {
    // put your selected date into the data object
    var data = $('#datepicker').val();
    alert(data);
    evt.preventDefault();
});