Question

在dayClick事件中，我可以使用this更改当前单元格的CSS，如fullcalendar documentation所示。例如，我只需要$(this).css('background-color', 'red');

假设我有一个日期存储，如何在dayClick事件之外做同样的事情？

Answer 1

查看dayRender()方法。我知道......没有那么多的文档...这是一个工作的小提示，如何使用此事件更改当前日期的背景颜色和当前日期后的所有7天：

$(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>

还要查看moment.js文档，以便操作日期对象。

修改

我假设你正在使用fullCalendar v2。对于v1，请查看here和here

如何按日期更改日期单元格的CSS？

1 个答案: