Hover effect on one cell of agendaWeek + fullcalendar

Question

Hi I am using FullCalendar by Adam Shaw (http://arshaw.com/fullcalendar/). I am using a month and agendaWeek view. I want to put in an hover effect when the user is hovering over a date in month view or a timeslot in agendaWeek view. I tried to change the css as follows:

.fc-widget-content:hover {
        background-color: red;
    }

This works for month view. File attached

However, the same code selects the whole line in the agendaWeek view when I just need one timeslot to be highlighted.

Example picture below shows the whole 1:00pm slot higlighted for everyday instead of just the timeslot in Wed 02-01 where the mousecursor was.

Any ideas how to achieve this.

Many thanks.

Granoff

Answer 1

You're not alone: many users of FullCalendar would like to see highlighting of individual time slots supported out of the box. There's an issue for this on Google Code.

The issue stems from October 2009, so it seems we shouldn't get our hopes up, but several users have suggested different workarounds. One of these is working successfully in my code, so it might be worth to check out.

Undersigned

Answer 2

this is not something that can be achieved with just css. the issue is that the week grid is being created by superimposing two tables together, both with no background, therefore giving the impression of a grid, but not a true grid. the lengthwise portion of the grid is the higher z-index, so it will always appear on top, and therefore no hover event will ever fire for the height. I played around with ways to trick the user in to seeing the box as highlighted, however, without the ability to know where you are vertically in the grid, it's not really possible. it may be something that could be done with jquery, but i would think the effort involved would not be worth it.

Emelina

Thanks .. I will not include it for the time being – Granoff

Answer 3

Paste this code after $('#calendar').fullCalendar( ... ); This will create addition TD in table :)

$("table.fc-agenda-slots th").each(function () {
    $(this).width(50);
});
$("table.fc-agenda-slots td.fc-widget-content").each(function () {
    $(this).width(($("table.fc-agenda-days thead th.fc-col0").width()));
    $(this).after("<td class=\"fc-widget-content\"><div style=\"position:relative\"></div></td>");
    $(this).after("<td class=\"fc-widget-content\" style=\"width:" + $("table.fc-agenda-days thead th.fc-col5").width() + "px\"><div style=\"position:relative\"></div></td>");
    $(this).after("<td class=\"fc-widget-content\" style=\"width:" + $("table.fc-agenda-days thead th.fc-col4").width() + "px\"><div style=\"position:relative\"></div></td>");
    $(this).after("<td class=\"fc-widget-content\" style=\"width:" + $("table.fc-agenda-days thead th.fc-col3").width() + "px\"><div style=\"position:relative\"></div></td>");
    $(this).after("<td class=\"fc-widget-content\" style=\"width:" + $("table.fc-agenda-days thead th.fc-col2").width() + "px\"><div style=\"position:relative\"></div></td>");
    $(this).after("<td class=\"fc-widget-content\" style=\"width:" + $("table.fc-agenda-days thead th.fc-col1").width() + "px\"><div style=\"position:relative\"></div></td>");
});

And this is the style css for hover:

table.fc-agenda-slots td.fc-widget-content
{
    border-right: 1px #DDD solid;
}
table.fc-agenda-slots td.fc-widget-content:hover
{
    background-color: #F1F1F1;
}

Ulbricht

this worked for me in the angular version by adding it to scope.init() in the directive – Killigrew

Answer 4

Add this after calendar load:

$("table.fc-agenda-slots td.fc-widget-content div").each(function () {
                $(this).html("<table cellspacing=\"0\" style=\"width:100%\"><tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr></table>");
            });

Jedthus

Answer 5

Maybe the css3 property pointer-events:none can help you. You can see a demo here: http://jsfiddle.net/rNWpz/

HTML

<div id="a"></div>
<div id="b"></div>

CSS

#a {
    border:1px dashed red;
    width:100px;
    height:100px;
}

#b {
    border:1px dashed blue;
    width:100px;
    height:100px;
    position:absolute;
    top:0;
    left:0;
    pointer-events:none;
}

jQuery

$('#a').hover(function() {
    $(this).css('backgroundColor','red');
  },
  function () {
    $(this).css('backgroundColor','white');
  }
);

Infeld