Question

I’m trying to use the jquery.fullcalendar plugin using the jQuery UI theming.

Everything is ok, except that when the user try to select a time range (week or day view) the selection is displaced about one hour. You can see this behaivour in this fiddle.

I’ve reduced the problem and I arrived to the conclusion that the problem comes from the CSS code. In the fiddle I’ve copied the problematic CSS code (corresponds to the jQuery UI CSS framework). If you remove this CSS code, the selection works fine (but without format, of course).

I’ve been trying to find which is the exact problem, but I cannot see.

EDIT: I’ve reduced the problem to this. Now if you remove “Trebuchet MS” font from .ui-widget fullCalendar works!! See here working demo. The question now is, Why? I’m using Linux, I don’t know if that has some effect…

Answer 1

remove from your css the following:

.fc-agenda-slots td div {
    height:20px;
}

or change it to:

.fc-agenda-slots td div {
    height:auto;
}

I guess that the font size overflow the div of fixed 20px with result to get this “weird bug”.

Demo: http://jsfiddle.net/gQMvH/5/