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

Question

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

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

您的尝试出现了一些相对简单的问题，这两个问题都导致浏览器控制台中显示错误:

1. 我看不出 data 的任何理由成为一个数组。其中的 SpecialDay 是一个数组，这似乎足以满足您的目的。然后在您尝试访问的地方 data.specialDay ，它不存在(它必须是 data[0].specialDay，因为您必须访问 data 数组的第一个对象，然后该对象包含 specialDay 属性)。

2. 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/