2017-07-18 8 views
2

私はfullcalendarで消防署シフトカレンダーを作成していますので、曜日に関係のない間隔で特定の日付のCSSを変更する必要があります。Fullcalanderで日付間隔を作成する方法は?

シフトは9日間に3回の24時間シフトを行います。各シフト日はカレンダーの特定の色です。 ...

Shift Calendar Example

私は日付セルのCSSを変更し、曜日によってそれを繰り返す方法を知っている...たとえば

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

を参照してくださいしかし、私はのパターンを作成することができます1,3,5日後に10日目にパターンを繰り返しますか?このような

答えて

1

何かがおき18日を繰り返しシフトの日の色のために2017年1月1日に開始するhttps://jsfiddle.net/wavzxkjw/

パターンを動作するように見えるので、私たちはそこから一日の色をcalcuateするためにそれを使用します。

この最初のコードブロックは(前2017年1月1日)

$(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]; 
    } 
}); 
+0

何をするかのより多くの代表になるように変更します!本当にありがとう。私はスパゲッティコードの土地にいて、まだ解決できませんでした。 – DoubleTri

+0

あなたは大歓迎です! – smcd

関連する問題