Time Jquery FullCalendar事件时隙悬停方法

我有完整的日历和运行，这是非常好的。我这里的问题是如何最好地实现时隙悬停功能。如果用户能够对他们悬停的任何给定时间段有一个视觉提示，那就太好了

我发现下面的链接提供了一个解决方案，它在议程单元格行中添加了一个新的结构，以便提供对单个单元格的访问。但是，有迹象表明，此解决方案将导致FullCalendar变得迟钝

在我开始研究完整的日历代码之前，我想问问其他人是否有任何想法或解决方案

我的想法如下：

将占位符事件添加到每个时间段。用户不会看到这些事件，但这些不可见事件可用于允许“悬停”标记。我在这里担心的是，添加额外的事件会导致FullCalander变得迟钝。此外，拖放功能也可能受到影响

FullCalendar可以确定用户单击的时间段。是否可以使用单击时隙的代码来提供悬停高亮显示的参考

其他的

我正在考虑选择2作为起点。不过，如果有人对可行的解决方案有其他想法，我很乐意听到

如果我想出一个解决方案，我会把它贴在这里

谢谢

吉姆

以下是指向FullCalendar网站的链接：

---

我发现与之合作非常愉快。

我也有同样的问题，因为有时很难看到您实际单击的时间段。为了解决这个问题，我写了一行代码来修改fullcalendar.js。这不是理想的解决方案，但它是一个快速解决方案

这是一行：

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

“”+

并将其放置在内部（代码行3080周围）：

“”+
（！slotNormal | | |！minutes）？格式日期（d，opt（'axisFormat'））：“”）+
"" +
"" +
"" +
" " +
"" +

现在，您可以将工具提示悬停在所有具有.ui小部件内容类的fc插槽上（您在代码中看到的

）。并获取要显示在该工具提示中的隐藏输入值

如果使用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>');
        }
    }
}); 
});

Ext.onReady（函数（）{
Ext.QuickTips.init（）；
var tip=Ext.create（'Ext.tip.ToolTip'{
目标：“您的日历id”，
宽度：140，
身高：30，
委托：'.ui小部件内容'，
自动隐藏：false，
renderTo:Ext.getBody（），
听众：{
beforeshow:函数更新程序（提示）{
update（“：”+Ext.get（this.triggerement.first（）.getValue（）+”）；
}
}
}); 
});

以下代码为我实现了这一目的

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

$（'.ui小部件内容'）。悬停（函数（）{
如果（！$（this.html（））{
对于（i=0；i我意识到这实际上不是一个答案，而是对先前答案的评论，但我还没有达到评论答案的声誉

W.R.T对于@user4243287的回答，我必须采取的另一个步骤是在初始化日历时将此逻辑放在“viewRender”选项中，以确保在两周之间移动时此逻辑继续工作。
这真的很酷而且有效（通过更改为.fc小部件内容）！我正在尝试为悬停的插槽添加当前时间。您知道如何添加时间吗？仍在通过fc源工作。。
$('.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();
});