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

时间:2017-11-10 11:33:06

标签: javascript jquery json fullcalendar

我正在使用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/

1 个答案:

答案 0 :(得分:1)

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

  1. 我看不出data成为数组的任何原因。其中的SpecialDay是一个阵列,似乎足以满足您的需要。然后在你试图访问的地方data.specialDay,它不存在(它必须是data[0].specialDay,因为你必须访问data数组的第一个对象,然后包含specialDay属性。

  2. new Date(data[0].specialDay);日期实际上位于day数组中对象的specialDay属性中。将数组放入Date构造函数中没有多大意义 - 数组无法解析为日期。具有讽刺意味的是,在它正上方你已经提醒element.day,这就是你需要输入阵列的东西,所以你离这个正确的解决方案并不远。

  3. 以下是代码的工作版本:

    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/