How to hover each cell for each day with react FullCalendar? - reactjs

Question

I have a Reactjs FullCalendar and I want when, I hover the cell of the days, the background will be blue also, the time of this cell will be appeared.
I try this :
.fc-widget-content td:hover {
background-color: blue;
}
But, I get :
https://i.stack.imgur.com/sCKOq.gif
But, I want, to hover each cell for each day independently like this:
https://i.stack.imgur.com/v9FSh.gif
His code is:
<td onmouseover="highlightBG(this);" onmouseout="nohighlightBG(this);" style="color: transparent; height: 1.5em; text-align: right; padding-right: 2px; background-color: initial;"><span style="font-weight:900;">8:35</span></td>
function highlightBG(element) {
element.style.backgroundColor = '#39b6f0';
element.style.color = 'black';
}
function nohighlightBG(element) {
element.style.backgroundColor = 'initial';
element.style.color = 'transparent';
}
How can I fix it ?

Answer 1

This can be achieved using Jquery and Fullcalendar like this:
$(this).children("td").each(function () {
$(this).hover(function () {
$(this).html('<div class="current-time">' + $(this).parent().parent().data("time").substring(0, 5) + "</div>")
}, function () {
$(this).html("")
})
})
}
},
function () {
$(this).children(".temp-cell").remove()
}): $(".fc-widget-content:not(.fc-axis)").hover(function () {
$(this).html() || ($(this).append('<td class="temp-cell" style="border: 0px; width:' + (Number($(".fc-day").width()) + 3) + 'px"></td>'), $(this).children("td").each(function () {
$(this).hover(function () {
$(this).html('<div class="current-time">' + $(this).parent().parent().data("time").substring(0, 5) + "</div>")
}, function () {
$(this).html("")
})
}))
}, function () {
$(this).children(".temp-cell").remove()
})
}
})
this will append td cells to the whole horizontal line and you can simply have the time or hover any color you wish.