Question

我正在使用jan 12更改dayRender的单元格背景颜色。如何在同一个月更改一个单元格背景颜色？

var data=[{
  'specialDay':'2017-01-12'
}];

console.log(data)

var $calendar = $('#calendar').fullCalendar({

    defaultView: 'month',

    dayRender: function (date, cell) {
        var today = new Date(data[0].specialDay);
        if (date.getDate() === today.getDate() && date.getMonth() === today.getMonth()) {
            cell.css("background-color", "red");
        }
    }
});

http://jsfiddle.net/CYnJY/937/

编辑尝试使用仍然无法正常工作的循环：

var data = [{
  'name': 'xxx',
  'specialDay': [{
    'day': '2017-01-12'
  }, {
    'day': '2017-01-19'
  }]
}];
console.log(data)
var $calendar = $('#calendar').fullCalendar({

  defaultView: 'month',

  dayRender: function(date, cell) {
    $.each(data.specialDay, function(index, element) {
      alert(element.day)
      var today = new Date(data[0].specialDay);
      if (date.getDate() === today.getDate() && date.getMonth() === today.getMonth()) {
        cell.css("background-color", "red");
      }
    })

  }
});

http://jsfiddle.net/CYnJY/941/

Answer 1

您的尝试有两个相对简单的问题，这两个错误都导致浏览器控制台中显示错误：

我看不出data成为数组的任何原因。其中的SpecialDay是一个阵列，似乎足以满足您的需要。然后在你试图访问的地方data.specialDay，它不存在（它必须是data[0].specialDay，因为你必须访问data数组的第一个对象，然后包含specialDay属性。
new Date(data[0].specialDay);日期实际上位于day数组中对象的specialDay属性中。将数组放入Date构造函数中没有多大意义 - 数组无法解析为日期。具有讽刺意味的是，在它正上方你已经提醒element.day，这就是你需要输入阵列的东西，所以你离这个正确的解决方案并不远。

以下是代码的工作版本：

var data = { //data is now an object
  'name': 'xxx',
  'specialDay': [{
    'day': '2017-11-12'
  }, {
    'day': '2017-11-19'
  }]
};
console.log(data)

var $calendar = $('#calendar').fullCalendar({
  defaultView: 'month',
  dayRender: function(date, cell) {
    $.each(data.specialDay, function(index, element) {
      //alert(element.day)
      var today = new Date(element.day); //put the correct variable into the Date constructor
      if (date.getDate() === today.getDate() && date.getMonth() === today.getMonth()) {
        cell.css("background-color", "red");
      }
    })

  }
});

请参阅http://jsfiddle.net/CYnJY/947/了解演示。

另一个观察结果：您正在使用不再受支持的旧版fullCalendar（1.6.1）。目前的版本是3.6.2。我会建议你尽快升级。您可能需要进行少量更改，包括升级您的jQuery版本，包括moment.js等，但在文档中都很清楚。此链接提供了从版本1.x升级到2.0及更高版本的指南：https://fullcalendar.io/wiki/Upgrading-to-v2/

如何在fullCalendar中更改多个单元格背景颜色

1 个答案: