Question

我创建了一个带有fullcalendar的消防部门班次日历，我需要以与一周中的几天无关的间隔更改某些日期的CSS。

班次在九天内完成三班24小时轮班。每个轮班日都是日历上的某种颜色。见例......

我知道如何更改日期单元格的CSS并在一周中的几天重复...

events: [{
            title:"Shift One",
            id: "one",
            allDay: true,
            rendering: 'background',
            color: 'blue',
            dow: [1,4]   // Repeat monday and thursday
            }]

但我可以创建第1,3,5天的模式并在第10天重复模式吗？

Answer 1

这样的内容似乎有用https://jsfiddle.net/wavzxkjw/

2017-01-01开始的换班日颜色模式每18天重复一次，所以我们用它来计算当天的颜色。

此第一个代码块无法进入过去（2017-01-01之前）

$(document).ready(function() {
  $('#calendar').fullCalendar({
    defaultDate: '2017-01-01',
    dayRender: function(date, cell) {
      $(cell).css('background-color', shiftDay(date));
    }
  });

  function shiftDay(date) {
    var pattern = [
      'red', 'goldenrod', 'red', 'goldenrod', 'black', 'goldenrod', 'black',
      'red', 'black', 'red', 'goldenrod', 'red', 'goldenrod', 'black',
      'goldenrod', 'black', 'red', 'black'
    ];
    var index = Math.abs(moment('2017-01-01').diff(date, 'days')) % pattern.length;
    return pattern[index];
  }
});

在此清理一下并进行评论，支持过去和将来的计算，更改功能名称以更具代表性https://jsfiddle.net/wavzxkjw/2/

$(document).ready(function() {
  $('#calendar').fullCalendar({
    defaultDate: '2017-01-01',
    dayRender: function(date, cell) {
      $(cell).css('background-color', shiftColor(date));
    }
  });

  function shiftColor(date) {
    var pstart = '2017-01-01'; // pattern start date
    var pattern = [
      'red', 'goldenrod', 'red', 'goldenrod', 'black', 'goldenrod', 'black',
      'red', 'black', 'red', 'goldenrod', 'red', 'goldenrod', 'black',
      'goldenrod', 'black', 'red', 'black'
    ];
    var plen = pattern.length; // how many parts to the pattern
    // how many days from start of pattern are we
    var days = Math.abs(moment('2017-01-01').diff(date, 'days')) % plen;
    var index = 0; // pattern index
    if (date.format('YYYY-MM-DD') < pstart) {
      index = (plen - (days % plen)) % plen;
    } else {
      index = days % plen;
    }
    return pattern[index];
  }
});

如何在Fullcalendar中创建日期间隔？

1 个答案: