Search code examples
fullcalendarfullcalendar-scheduler

Adding time indication in Fullcalendar's Scheduler (resource view)


While using the Scheduler's Resource view the user found it hard to understand the hovering time.

Adding this below $('#calendar').fullCalendar( ... );

  $(".fc-slats tr").each(function () {
            $(this).addClass("timerow");
        });

and CSS

.timerow:hover {background: lightblue;}

PROBLEM: When user pressed next or prev buttons the calendar rendered again the table and the .hover did not work.


Solution

  • adding the code also in the viewRender in Calendar's properties solved it.

     viewRender: function (view, element) {
                $(".fc-slats tr").each(function () {
                   $(this).addClass("timerow"); });
                },
    

    The final result is shown in the image below: enter image description here

    resource1 resource2