设置光标样式效果不佳

Question

我正在尝试将光标设置为 "no-drop" 表示当天之前的几天，而将光标设置为 "pointer" 表示当天之后的几天。

我尝试使用 css: fc-past, fc-today,fc-future 并且运行良好，我也尝试使用 jquery 插件配置并且运行良好。

dayRender: function( date, cell ) { 
    var yesterday = moment();
    if (date <= yesterday) {
      cell.css('background', '#F1F1F1');
      cell.css('cursor', 'no-drop');
    }else{
      cell.css('cursor', 'pointer');
    }                        
}

当没有事件时这工作正常，当我在日历中有事件时出现问题。 Fullcalendar 为没有事件的日子创建一组空的，这些天在单元格上并且光标样式丢失。在 fc-content-skeleton 中有一个 table 和 z-index 4，这个 div 在 fc-bg 上，它有光标 css。这个 fc-content-skeleton 有每个事件的 fc-event-container（我可以设置 css）但是在没有事件的日子里，创建一个我无法设置样式的空。这就导致鼠标的de cursor不能设置到这个里面。结果是在同一天（没有事件），如果你移动光标，当光标在一个空的 . 您可以在 http://fullcalendar.io/ 主页的陈列柜中看到它。

<div class="fc-content-skeleton">
    <table>
        <thead>
            <tr>
                <td class="fc-day-number fc-sun fc-past" data-date="2016-05-08">8</td>
                <td class="fc-day-number fc-mon fc-past" data-date="2016-05-09">9</td>
                <td class="fc-day-number fc-tue fc-past" data-date="2016-05-10">10</td>
                <td class="fc-day-number fc-wed fc-past" data-date="2016-05-11">11</td>
                <td class="fc-day-number fc-thu fc-past" data-date="2016-05-12">12</td>
                <td class="fc-day-number fc-fri fc-past" data-date="2016-05-13">13</td>
                <td class="fc-day-number fc-sat fc-past" data-date="2016-05-14">14</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="fc-event-container" colspan="2">
                    <a class="fc-day-grid-event fc-h-event fc-event fc-not-start fc-end fc-draggable fc-resizable">
                        <div class="fc-content">
                            <span class="fc-title">Long Event</span>
                        </div>
                        <div class="fc-resizer fc-end-resizer"/>
                    </a>
                </td>
                <!-- here comes the empty td for days that haven't have events -->
                <td rowspan="6"/>               
                <td rowspan="6"/>
            </tr>
            ... 
            ...
        </tbody>
    </table>
</div>

我花了很多时间试图将光标设置到这个 td 但没有结果。这种行为让我发疯。感谢您的帮助。

从 JS Bin 添加示例：http://jsbin.com/qekajezepu/1/edit?js,output

Answer 1

这是一个棘手的问题。问题在于全日历 UI 的构建方式使得日单元格不是一个单元，而是包含重叠表的同级 DIV。

您设置光标 no-drop 的 cell object 仅将其设置为其中一个表。因此，您甚至不能通过设置 class 来欺骗它并将其应用于所有 children，因为它们不是 children，它们是嵌套的兄弟姐妹。

所以你可以通过在单元格呈现时设置一个 class 来欺骗它，并且在呈现整个日历之后你可以搜索所有重叠元素（在你的情况下是 TDs）并将它们设置为 cursor: 'no-drop' 还有。

将此 class 添加到您的 css:

.cell-no-drop {
  cursor: 'no-drop'
}

并将完整日历中的 dayRender 和 eventAfterAllRender 设置为：

dayRender: function( date, cell ) { 
    var yesterday = moment();
    if (date <= yesterday) {
        $(cell).css('background', '#F1F1FF');
        $(cell).addClass('cell-no-drop');   

    }else{
        cell.css('cursor', 'pointer');
    }                        
},
eventAfterAllRender: function(view, element){
    var dts = $("#calendar").find('td');

    $($(".cell-no-drop")).each(function(){
        var self = this;
        $(dts).each(function(){    
            var pos = $(self).offset();
            var w = pos.left + $(self).width();
            var h = pos.top + $(self).height();

            if (pos.top <= $(this).offset().top && $(this).offset().top <= h &&  pos.left <= $(this).offset().left && $(this).offset().left <= w){
                $(this).css('cursor', 'no-drop');
            }
        });
    });
},

设置光标样式效果不佳

Set cursor style doesn't work well

fullcalendar

fullcalendar-scheduler