Question

我已经启动并运行FullCalendar，这非常好。我的问题是如何最好地实现时隙悬停功能。如果用户可以为他们悬停的任何给定时间段提供视觉提示，那将是非常好的。

我找到了以下链接http://code.google.com/p/fullcalendar/issues/detail?id=269，它提供了一个解决方案，在议程单元格行中添加了一个新结构，以便提供对单个单元格的访问。但是，表明此解决方案将导致FullCalendar变得迟缓。

在开始查看FullCalendar代码之前，我想我会问其他人是否有任何想法或解决方案。

我对此的看法如下：

将占位符事件添加到每个时间段。用户不会看到这些事件，但这些不可见事件可用于允许“悬停”标记。我担心的是，添加额外的事件会导致FullCalander变得迟钝。此外，拖放功能可能会受到影响。
FullCalender可以确定用户点击的时间段。是否可以使用获取点击时间段的代码来提供悬停突出显示的参考？
其他

我正在考虑将选项2作为开始的地方。但是，如果有人对可行的解决方案有另一个想法，我会很高兴听到它。

如果我想出一个解决方案，我会在这里发布。

谢谢，

吉姆

以下是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();
});

确保在实例化日历的代码之后添加它，如果JQuery日历的defaultView属性是“AgendaWeekly”，它应该按原样工作。

干杯，中号

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

现在，您可以将工具提示悬停在具有.ui-widget-content类（您在代码中看到的<td>）的所有fc插槽上。并获取隐藏的输入值以显示在该工具提示中。

如果是jQuery，您可以使用直播活动并获取相应的第一个孩子并获取其值。

如果是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

我意识到这实际上不是一个答案，而是对先前答案的评论，但我尚未达到评论答案的声誉。

通过@ user4243287回答错误我必须采取的一个额外步骤是在初始化我的日历时将此逻辑放在'viewRender'选项中，以确保在几周之间移动时这种情况继续有效。

Jquery FullCalendar事件时隙悬停方法

3 个答案: