Есть календарь datepicker, в котором отмечены некоторые даты. Данные приходят с сервера и меняют цвет фона конкретного числа через свойство beforeShowDay
.
Под календарем - таблица с более подробной информацией о датах.
Задача:
- При наведении мыши на дату (в календаре), подсветить (цвет текста, жирность) все даты из группы (в группе может быть одна или несколько дат (все они имеют одинаковый класс).
- Подсветить строку в таблице, которая описывает эту группу. И наоборот при наведении мыши на строку в таблице - подсвечивать соответствующие даты в календаре.
Мысли/вопросы:
Технически к каждой ячейке задаем класс, который будет флагом того, что ячейка относится к тем, которые надо подсвечивать и второй класс с номером группы (это мне не очень нравится).
Добавляем обработку события MouseOver и MouseOut для класса-флага. В документации datepicker этого найти не смог.
Если кто может, что рассказать по этому вопросу (или хотя бы направить в нужном направлении) - буду очень признателен.
Спасибо.
$(function() {
$.datepicker.regional['ru'] = {
dateFormat: 'dd.mm.yy'
};
$.datepicker.setDefaults($.datepicker.regional['ru']);
$( '.datepicker' ).datepicker({ altField: "#show",
altFormat: "yy-mm-dd",
numberOfMonths: [ 1, 3 ],
stepMonths: 3,
beforeShowDay: fBeforeShowDay,
onSelect : function(value,b) {
var AppartID = $(this).attr('appart-id');
var d = value.split('.');
var DateTS = (new Date(d[2],d[1]-1,d[0])).getTime();
var ok = $.inArray(DateTS, SelectedDays[AppartID]);
if (ok == -1) SelectedDays[AppartID].push(DateTS)
else { SelectedDays[AppartID].splice(ok,1) };
SelectedDays[AppartID].sort(function(a, b) {
return a - b;
});
}
}) //.datepicker
function fBeforeShowDay(date) {
var AppartID = $(this).attr('appart-id');
if (typeof DayStatus[AppartID] === 'undefined') // Нет ни одного дня в БД!
{ return[false, "poly1c0 poly2c0", SelectableDayStatus[0].Name]; }
else
{
var cds = date.toLocaleString().slice(0, 10);
var CurrentDayStyleFlag = (typeof DayStatus[AppartID][cds] === 'undefined')?0:DayStatus[AppartID][cds]['Status'];
var CurrentDaySelectable = SelectableDayStatus[CurrentDayStyleFlag].Selectable;
var pdate = new Date(date.getTime()-86400000);
var pds = pdate.toLocaleString().slice(0, 10);
var PrevDayStyleFlag = (typeof DayStatus[AppartID][pds] === 'undefined')?0:DayStatus[AppartID][pds]['Status'];
for (var i=0; i<SelectedDays[AppartID].length; i++) {
if (date.getTime() == SelectedDays[AppartID][i])
{ CurrentDayStyleFlag = 2; }
if (pdate.getTime() == SelectedDays[AppartID][i])
{ PrevDayStyleFlag = 2; }
};
if (CurrentDayStyleFlag > 2)
{
var ReservID = DayStatus[AppartID][cds]['ReservID'];
var isItemPresent = $("#ReservListItem"+ReservID).index();
if (isItemPresent == -1)
{
console.log (cds, DayStatus[AppartID][cds]['ReservID'], isItemPresent);
$('<tr id="ReservListItem'+DayStatus[AppartID][cds]['ReservID']+'">'+
'<td>'+DayStatus['RESERV'][ReservID]['DateReservedBegin']+' - '
+DayStatus['RESERV'][ReservID]['DateReservedEnd']+' ('
+DayStatus['RESERV'][ReservID]['ReservedDays']+')</td>'+
'<td>'+DayStatus['RESERV'][ReservID]['UserFullName']+'<br>'
+DayStatus['RESERV'][ReservID]['Phone']+'</td>'+
'<td>t3</td>'+
'</tr>').appendTo($("#ReservList"+AppartID));
}
}
return[CurrentDaySelectable, "poly1c"+PrevDayStyleFlag+" poly2c"+CurrentDayStyleFlag, SelectableDayStatus[CurrentDayStyleFlag].Name]
}
}; //function fBeforeShowDay(date)