How can I change the css of a day cell by date?

问题

In a dayClick event, I can change the CSS of the current cell using this as shown in the fullcalendar documentation. For example, I just have to do $(this).css('background-color', 'red');

Assuming I have a date stored as a moment, how can do the same thing outside of the dayClick event?

回答1:

Have a look at dayRender() method. I know... There isn't that much documentation... Here is a working fiddle of how to change the background color of the current date and all the 7 days after current date using this event:

$(document).ready(function(){
  $('#calendar').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,basicWeek,basicDay'
    },
    defaultView: 'month',
    dayRender: function (date, cell) {
        var today = $.fullCalendar.moment();
        var end = $.fullCalendar.moment().add(7, 'days');
        
        if (date.get('date') == today.get('date')) {
            cell.css("background-color", "red");
        }
        
        if(date > today && date <= end) {
            cell.css("background-color", "yellow");
        }
      
    }   
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/2.10.6/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/fullcalendar/2.0.1/fullcalendar.min.js"></script>
<link href="https://cdn.jsdelivr.net/fullcalendar/2.0.1/fullcalendar.css" rel="stylesheet"/>
<div id='calendar'></div>

Have also a look at moment.js documentation in order to manipulate the date objects.

EDIT

I assume you're using fullCalendar v2. For v1 have a look here and here

来源：https://stackoverflow.com/questions/33939982/how-can-i-change-the-css-of-a-day-cell-by-date

标签

jquery

fullcalendar