JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<div id="calendar"></div>
<div class="info"></div>
CSS
.highlight {
border: 1px solid red !important;
}
.ui-datepicker{
font-size: 12px !important;
}
.info {
margin: 10px 0px;
padding: 5px;
width: 200px;
height: 200px;
border: 1px solid black;
}
.info p{
margin:0px;
padding: 0px;
}
JavaScript
var months = {
1 : ["2013-01-29", "2013-01-21", "2013-01-22"],
2 : ["2013-02-10", "2013-02-22", "2013-02-24"],
3 : ["2013-03-12", "2013-03-23", "2013-03-27"],
4 : ["2013-04-15", "2013-04-22", "2013-04-28"],
5 : ["2013-05-17", "2013-05-21", "2013-05-15"],
6 : ["2013-06-18", "2013-06-25", "2013-06-12"],
7 : ["2013-07-23", "2013-07-24", "2013-07-11"],
8 : ["2013-08-01", "2013-08-07", "2013-08-03"],
9 : ["2013-09-23", "2013-09-05", "2013-09-09"],
10 : ["2013-10-20", "2013-10-11", "2013-10-01"],
11 : ["2013-11-28", "2013-11-22", "2013-11-26"],
12 : ["2013-12-29", "2013-12-25", "2013-12-22"]
};
var defaultMonth = 9;
var dates = months[defaultMonth];
setInfo(defaultMonth);
(function($) {
$("#calendar").datepicker({
beforeShowDay: function(date) {
console.log('beforeShowDay');
var date = jQuery.datepicker.formatDate('yy-mm-dd', date);
if (dates.indexOf(date) != -1) {
return [ true, 'highlight'];
}
return [ true ];
},
onSelect: function(dateText) {
console.log('onSelect');
alert(dateText);
},
onChangeMonthYear: function(year, month, instance) {
$.ajax({
type: "POST",
dataType: 'json',
url: "/echo/json/",
data: {},
async : false,
success: function( data ) {
console.log('onChangeMonthYear');
dates = months[month];
setInfo(month);
}
});
},
});
})(jQuery);
function setInfo(month) {
dates = months[month];
$('.info').empty();
$('.info').append('<p>Month: ' + month + '</p>' );
$('.info').append('<p>Selected...