Jquery FullCalendar event timeslot hover method

Question

I have FullCalendar up and running and it is very nice. My question here is how best to go about implementing timeslot hover functionality. It would be very nice if the user could have a visual cue for any given timeslot they are hovering over.

I found the following link http://code.google.com/p/fullcalendar/issues/detail?id=269 that gives a solution that adds a new structure in agenda cell row in order to provide access to individual cells. However, it is indicated that this solution will cause FullCalendar to become sluggish.

Before I start looking into the FullCalendar code, I thought I would ask if anyone else has any ideas or a solution.

My thoughts about approaching this are as follows:

1. Add placeholder events to each timeslot. The user would not see these events but these invisible events could be used to allow "hover" marking. My concern here is that adding the extra events would cause FullCalander to become sluggish. Also, the drag and drop functionality could be impacted.

2. FullCalender can determine what timeslot the user clicked in. Would it be possible to use the code that gets the timeslot clicked on in order to provide a reference for hover highlighting?

3. Other?

I am considering option 2 as a place to start. However, if anyone has another idea for a workable solution, I would be glad to hear it.

If I come up with a solution, I will post it here.

Thanks,

Jim

Here is a link to the FullCalendar site: http://fullcalendar.io/
I have found it very nice to work with.

Answer 1

The following code did the trick for me.

$('.ui-widget-content').hover(function(){
    if(!$(this).html()){    
        for(i=0;i<7;i++){
            $(this).append('<td class="temp_cell" style="border: 0px; width:'+(Number($('.fc-day').width())+2)+'px"></td>');
        }

        $(this).children('td').each(function(){
            $(this).hover(function(){
                $(this).css({'background-color': '#ffef8f', 'cursor': 'pointer'});
            },function(){
                $(this).prop('style').removeProperty( 'background-color' );
            });
        });
    }
},function(){
    $(this).children('.temp_cell').remove();
});

Make sure to add it after the code that instantiates the calendar and, it should work AS IS if the defaultView property of the JQuery calendar is 'AgendaWeekly'.

Cheers, M

Answer 2

I had the same problem since it's sometimes hard to see which timeslot you're actually clicking on. To fix this I wrote a line to alter fullcalendar.js. Not the ideal solution, but it's a quick fix.

This is the line:

"<input type='hidden' class='timeslot-value' value='" + formatDate(d, opt('axisFormat')) +"'>" +

And placed it inside (around code line 3080):

"<th class='fc-agenda-axis " + headerClass + "'>" +
((!slotNormal || !minutes) ? formatDate(d, opt('axisFormat')) : '&nbsp;') +
"</th>" +
"<td class='" + contentClass + "'>" +
"<input type='hidden' class='timeslot-value' value='" + formatDate(d, opt('axisFormat')) +"'>" +
"<div style='position:relative'>&nbsp;</div>" +
"</td>" +

Now you can just place a tooltip hover on all fc-slots that have the .ui-widget-content class (the <td> you see above in the code). And get the hidden input value to display in that tooltip.

If jQuery, you can use the live event and get the corresponding first child and grab its value.

If extJS

Ext.onReady(function(){

Ext.QuickTips.init();

var tip = Ext.create('Ext.tip.ToolTip', {
    target: 'your-calendar-id',
    width: 140,
    minHeight: 30,
    delegate: '.ui-widget-content',
    autoHide: false,
    renderTo: Ext.getBody(),
    listeners: {
        beforeshow: function updateTipBody(tip) {
            tip.update('<dl><dt style="font-weight: 600;"><?php echo $this->translate('Start time')?>: </dt><dd>' + Ext.get(this.triggerElement).first().getValue() + '</dd></dl>');
        }
    }
}); 
});

Answer 3

I realize this isn't actually an answer but a comment on a previous answer but I've yet to reach the reputation to comment on answers.

W.R.T to the answer by @user4243287 one extra step I had to take was to put this logic in the 'viewRender' option when initializing my calendar in order to make sure that this continued to work when moving between weeks.