如何按日期更改日间单元格的CSS? [英] How can I change the css of a day cell by date?

问题描述

在 dayClick 事件中，我可以使用 this 更改当前单元格的CSS，如

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');

假设我将日期存储为片刻，那么在 dayClick 事件之外，如何做同样的事情?

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

推荐答案

看看 <代码> dayRender() 方法.我知道...没有那么多文档...这是如何使用此事件更改当前日期和当前日期后所有7天的背景色的有效工具:

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>

还请参阅 moment.js 文档，以便处理日期对象.

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

编辑

我假设您使用的是fullCalendar v2.对于v1，请在此处和

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

这篇关于如何按日期更改日间单元格的CSS?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！