Search code examples
fullcalendarfullcalendar-scheduler

Set cursor style doesn't work well

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

Solution

  • 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');
            }
        });
    });
},