There is a datepicker calendar in which some dates are marked. The data comes from the server and change the background color of a particular number through the beforeShowDay property.

Under the calendar is a table with more detailed information about dates.

Task:

  1. When you hover the mouse over a date (in the calendar), highlight (text color, boldness) all dates from the group (there can be one or several dates in the group (they all have the same class).
  2. Highlight the row in the table that describes this group. And vice versa, when you hover the mouse over a row in the table, highlight the corresponding dates in the calendar.

Thoughts / questions:

  1. Technically, we assign a class to each cell, which will be the flag of that cell refers to those that need to be highlighted and the second class with the group number (I don’t really like it).

  2. Add handling of the MouseOver and MouseOut events for the flag class. The datepicker documentation could not find it.

If anyone can say something on this issue (or at least direct it in the right direction) - I will be very grateful.

Thank.

 $(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)
  • What is the datepicker used for? worth adding code that already exists - Grundy
  • What are they like? The latest version of jquery-ui. The code, of course, is. But it is very bulky and in fact does not affect the essence of the issue. Now I will try to lay out. - KarDen
  • What are they like? - there are a lot of plugins for jQuery with calendars, plus for example some bootstrap - Grundy
  • do not give all the code. need to add a minimal example - Grundy

1 answer 1

Events that allow to solve this problem:

 $(document).on("mouseenter",'[data-handler="selectDay"]',function(){ var date = new Date($(this).data("year"), $(this).data("month"),$(this).text()) console.log(date) }) $(document).on("mouseleave",'[data-handler="selectDay"]',function(){});