<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/humanity/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style type="text/css">
body{
font-size: 12px;
}
.active .ui-state-default{
background: rgba(102, 255, 102, 1)
}
.active:hover .ui-state-default{
background: rgba(255, 255, 0, 1)
}
.test .ui-state-default{
background: rgba(255, 215, 0, 1)
}
</style>
<script>
var SelectableDayStatus = { 0: {Selectable: true, Name: 'Доступно для бронирования'},
1: {Selectable: false, Name: 'Зарезервировано'},
2: {Selectable: false, Name: 'Забронировано'},
3: {Selectable: false, Name: 'Оплачно'},
8: {Selectable: false, Name: 'Техническое обслуживание'},
9: {Selectable: false, Name: 'Нет данных'}
};
// Это будет приходить с сервера на текущий месяц, и при переключении месяца надо будет дополнять массив
var DayStatus = { "25.02.2016" : 0,
"26.02.2016" : 0,
"27.02.2016" : 0,
"28.02.2016" : 0,
"29.02.2016" : 0,
"01.03.2016" : 0,
"02.03.2016" : 0,
"03.03.2016" : 0,
// "04.03.2016" : 0,
// "05.03.2016" : 0,
"06.03.2016" : 0,
"07.03.2016" : 0,
"08.03.2016" : 1,
"09.03.2016" : 1,
"10.03.2016" : 1,
"11.03.2016" : 0,
"12.03.2016" : 0,
"13.03.2016" : 2,
"14.03.2016" : 3,
"MaxDate": 365
};
$(function() {
$.datepicker.regional['ru'] = {
closeText: 'Закрыть',
prevText: '<Пред',
nextText: 'След>',
currentText: 'Сегодня',
monthNames: ['Январь','Февраль','Март','Апрель','Май','Июнь', 'Июль','Август','Сентябрь','Октябрь','Ноябрь','Декабрь'],
monthNamesShort: ['Янв','Фев','Мар','Апр','Май','Июн', 'Июл','Авг','Сен','Окт','Ноя','Дек'],
dayNames: ['воскресенье','понедельник','вторник','среда','четверг','пятница','суббота'],
dayNamesShort: ['вск','пнд','втр','срд','чтв','птн','сбт'],
dayNamesMin: ['Вс','Пн','Вт','Ср','Чт','Пт','Сб'],
dateFormat: 'dd.mm.yy',
firstDay: 1,
isRTL: false,
showOtherMonths:true,
selectOtherMonths:true,
changeMonth:false,
changeYear: false
};
var SelectedDays = [];
$.datepicker.setDefaults($.datepicker.regional['ru']);
$( '#datepicker' ).datepicker({ altField: "#show",
altFormat: "yy-mm-dd",
minDate: 0,
maxDate: DayStatus['MaxDate'],
beforeShowDay: function(date) {
var cds = date.toLocaleString().slice(0, 10);
var CurrentDayStyleFlag = (typeof DayStatus[cds] === 'undefined')?9:DayStatus[cds];
var CurrentDaySelectable = SelectableDayStatus[CurrentDayStyleFlag].Selectable;
var pds = new Date(date.getTime()-86400000).toLocaleString().slice(0, 10);
var PrevDayStyleFlag = (typeof DayStatus[pds] === 'undefined')?9:DayStatus[pds];
console.log (cds, '->', CurrentDayStyleFlag, ';', pds, '->', PrevDayStyleFlag);
for (var i=0; i<SelectedDays.length; i++)
{ var d = SelectedDays[i];
d = d.split('.');
if (date.getTime() == (new Date(d[2],d[1]-1,d[0])).getTime()) return[CurrentDaySelectable, "active", SelectableDayStatus[CurrentDayStyleFlag].Name]
};
return[CurrentDaySelectable, "test"]
},
onSelect : function(value,b) {
var ok = $.inArray(value, SelectedDays);
if (ok == -1) SelectedDays.push(value)
else {SelectedDays.splice(ok,1)};
// alert(JSON.stringify(SelectedDays));
$('#JSON_DATA').html (JSON.stringify(SelectedDays, null, '\t'));
}
})
}); // Function
</script>
</head>
<body>
<div id="datepicker"></div>
<input id="show">
<pre id="JSON_DATA"></pre>
</body>
</html>
Стили фонов пока не прописывал...
только черно-белый. А дальше, я даю цвет фона как левый треугольник (прозрачный), на правый накладываю нужный цвет. А сверху виден текст с датой.