Solution 1 :

You can set a simple CSS rule to achieve this – if you inspect the fullCalendar HTML using your browser’s element inspector, you can find the class it uses to identify an event in the list view, and target that.

For example:

.fc-list-table .fc-list-event:hover td {
  background-color: red;
}

Working demo: https://codepen.io/ADyson82/pen/ExRjWLp

Solution 2 :

i think this may help

fc-list-item:hover td{
    background-color: red !important;
    color: white!important;
}

Problem :

I am working with an appointment booking system. this system includes a full calendar with a monthly list view.I want to change the background and text color when hover list item.it default gets a white color background. how do change it?

if (calev.end._d.getTime() < ntoday.getTime() ) {

     elt.css('background-color', '#5c5c3d');//change backgroud color
     elt.css('color', 'white');//change text color
     elt.find(".fc-event-dot").css('background-color','white');//change dot color
    //here I want write a hover background and text color code

  }

Sample view

Comments

Comment posted by VFG

You mean that you want to change the events background color? Depending on what? If their Start time is in the past or future?

Comment posted by first

Provide some markup also and css for the list items (and wrapper).

Comment posted by Code Kris

i need to change background color when cursor move list item

Comment posted by Code Kris

no need think about start time and end time.just want find way change color mouse hover

Comment posted by Code Kris

elt.find(“.fc-list-table .fc-list-event:hover td”).css(‘background-color’,’red’);

Comment posted by Code Kris

i add this way but it did not work .why is that?

Comment posted by Code Kris

i used full calendar 3.9 version

Comment posted by ADyson

Because

Comment posted by Code Kris

okay, I will try it, bro. thank you very much for your valuable contribution

By