1

現在の日の前の数日間はカーソルを「ノードロップ」に設定し、現在の日の後の数日間は「ポインター」に設定しようとしています。

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 はカーソル css を持つ fc-bg の上にあります。この fc-content-skeleton には、イベントごとに fc-event-container があります (css を設定できます) が、イベントのない日には、スタイルを設定できない空を作成します。これにより、マウスのカーソルをこれに設定できなくなります。その結果、同じ日に（イベントなしで）カーソルを移動すると、カーソルが空の . これは、 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

4

1 に答える 1