Search code examples
htmlcssfullcalendarmousehoverfullcalendar-5

How to change full calendar month listview hover backgroud and text color change

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

Solution

  • 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