1

我正在尝试将光标设置为当天前几天的“no-drop”和当天后几天的“指针”。

我尝试使用 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），但是在没有事件的日子里，创建一个我无法设置样式的空。这导致无法将鼠标的光标设置到 this 中。结果是，在同一天（没有事件），如果您移动光标，它会从我的样式（在 fc-bg 中设置）更改为默认值，如果光标位于 empty 上。您可以在http://fullcalendar.io/home上的展示中看到这一点。

<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

4

1 回答 1

0

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

cell您设置光标的对象no-drop仅将其设置为其中一个表。因此，您甚至无法通过设置班级并将其应用于所有孩子来欺骗它，因为他们不是孩子，他们是嵌套的兄弟姐妹。

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

将此类添加到您的 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');
            }
        });
    });
},
于 2016-06-10T09:03:23.150 回答