Question

我正在尝试将光标设置为当前日期前几天的“不丢弃”，并将光标设置为当天后几天的“指针”。

我尝试使用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有一个带z-index 4的表，这个div超过了fc-bg，它有光标css。这个fc-content-skeleton对每个事件都有fc-event-container（我可以设置css），但是在没有事件的日子里，创建一个我无法设置样式的空。这导致鼠标的de cursor无法设置为此。结果是，在同一天（没有事件），如果你移动光标，它会从我的样式（在fc-bg中设置）更改为默认值，如果光标是空的。您可以在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

这是一个棘手的问题。问题是fullcalendar UI的构建方式使得day单元格不是一个单元，而是包含重叠表格的兄弟DIV。

您设置光标cell的{{1}}对象仅将其设置为其中一个表。所以你甚至不能通过设置一个类来欺骗它并将它应用于所有孩子，因为他们不是孩子，他们是嵌套的兄弟姐妹。

因此，你可以通过在渲染时在单元格上设置一个类来欺骗它，并且在渲染完整个日历之后，你可以搜索所有重叠元素（在你的情况下为TD）并将它们设置为no-drop。

将此课程添加到您的css：

cursor: 'no-drop'

并将完整日历中的.cell-no-drop { cursor: 'no-drop' }和dayRender设置为：

eventAfterAllRender

设置光标样式不起作用

1 个答案: