Set cursor style doesn't work well - fullcalendar

Question

I'm trying to set the cursor to "no-drop" for days before the current day and to "pointer" for days after current day.
I tried using css: fc-past, fc-today,fc-future and works well, also I tried from jquery plugin configuration and as well works fine.
dayRender: function( date, cell ) {
var yesterday = moment();
if (date <= yesterday) {
cell.css('background', '#F1F1F1');
cell.css('cursor', 'no-drop');
}else{
cell.css('cursor', 'pointer');
}
}
This works fine when there're no events, the problem appear when I have an event in the calendar.
Fullcalendar creates a set of empty for days without events, that are on cells and the cursor style is lost.
Into fc-content-skeleton there's a table with z-index 4,this div is over fc-bg which have the cursor css.
This fc-content-skeleton has fc-event-container for each event (I can set the css) but in days that doesn't have events, create an empty that I can't set style.
This causes that de cursor of the mouse can't be set into this . The result is that in the same day (without events) if you move the cursor, it changes from my style (setted in fc-bg) to default when the cursor if over an empty .
You can see this in the showcase on 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>
I spent a lot of time trying to set the cursor to this td but without results. This behavior is making me crazy.
Thanks for the help.
Add a examble from JS Bin:http://jsbin.com/qekajezepu/1/edit?js,output

Answer 1

This is a tricky one. The problem is that the fullcalendar UI is built in such a way that the day cell is not one unit, but sibling DIVs that contains overlaying tables.
The cell object that you set the cursor no-drop is setting it only to one of the tables. So you can't even trick it with setting a class and apply it to all children because they are not children, they are nested siblings.
So you can trick it by set a class on the cell when it renders and after the whole calendar rendered you can search all the overlapping elements (TDs in your case) and set them to be cursor: 'no-drop' as well.
Add this class to your css:
.cell-no-drop {
cursor: 'no-drop'
}
And set dayRender and eventAfterAllRender in full calendar to be:
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');
}
});
});
},