如何在完整日历中创建日期间隔?

Question

我正在创建一个带有完整日历的消防部门轮班日历，我需要以与星期几无关的间隔更改某些日期的 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];
}
});