JQuery FullCalendar Timestamping Method

Question

I have FullCalendar and it works, and it is very nice. My question here is how best to use the time-lag functionality. It would be very nice if the user could have a visual signal for any given time interval on which they hang.

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

Before starting to learn the FullCalendar code, I thought I'd ask if anyone had any ideas or a solution.

My thoughts on approaching this are as follows:

• Add placeholder events for each time interval. The user will not see these events, but these invisible events can be used to indicate “guidance”. My concern is that adding extra events will cause FullCalander to become sluggish. In addition, drag and drop functionality may be affected.

• FullCalender can determine what time interval the user clicked. Is it possible to use code that gets clicked on a time interval to provide a link to highlight the cursor?

• Other?

I consider option 2 as a place to start. However, if someone has another idea for a workable solution, I would be glad to hear that.

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

Thank,

Jim

FullCalendar: http://fullcalendar.io/
.

Answer 1

.

$('.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();
});

, , AS IS, defaultView JQuery - "AgendaWeekly".

Cheers,

Answer 2

, , . , , fullcalendar.js. , .

:

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

( 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>" +

fc-, .ui-widget-content (<td>, ). .

jQuery, live .

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 understand that this is not really an answer, but a comment on the previous answer, but I have not yet reached a reputation to comment on the answers.

WRT to @ user4243287's answer, one additional step I had to take was to put this logic in the viewRender option when initializing my calendar to make sure this continued to work when switching between weeks.