着色天在fullCalendar

Question

沒有事件

我在我的PHP應用程序中使用fullCalendar，我能夠改變 顏色到其中一個具有事件那些日子綠色，但我想改變 的顏色，那些日子紅沒有事件。那麼有沒有 的方法來做到這一點？我寫這樣的事情來改變顏色爲綠色 ：

 $(data).each(function(){                     $attendance=$(this).attr('attendance'); 
          if($attendance==='P'){ 
           events.push({ 
            title: ' ',   
            start:$(this).attr('start'), 
            end:$(this).attr('end'), 
            color:'green' 
            //rendering: 'background' 

           }); 
          } 
          }); 

Answer 1

試試這個小提琴

var events = [{ 
 
    title: 'event1', 
 
    start: '2017-02-01' 
 
}, { 
 
    title: 'event2', 
 
    start: '2017-02-05', 
 
    end: '2017-02-07' 
 
}, { 
 
    title: 'event3', 
 
    start: '2017-02-15', 
 
}]; 
 
$('#calendar').fullCalendar({ 
 
    events: events 
 
}); 
 
$("td[data-date]").addClass("noEvent") 
 
for (var i = 0; i < events.length; i++) { 
 
    var evStartDate = new Date(events[i].start), 
 
     evFinishDate = new Date(events[i].end); 
 
    if (events[i].end) { 
 
     while (evStartDate <= evFinishDate) { 
 
      addClassByDate(evStartDate); 
 
      evStartDate.setDate(evStartDate.getDate() + 1); 
 
     } 
 
    } else { 
 
     addClassByDate(evStartDate); 
 
    } 
 
} 
 

 
function addClassByDate(date) { 
 
    var dataAttr = getDataAttr(date); 
 
    $("[data-date='" + dataAttr + "']").remove("noEvent"); 
 
    $("[data-date='" + dataAttr + "']").addClass("hasEvent"); 
 
} 
 

 
function getDataAttr(date) { 
 
var m = date.getMonth() + 1; 
 
    return date.getFullYear() + "-" + (m.toString().length === 2 ? m : "0" + m) + "-" + (date.getDate().toString().length === 2 ? date.getDate() : "0" + date.getDate()); 
 
};

.noEvent { 
 
    background: pink; 
 
} 
 
.hasEvent{ 
 
    background: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/1.6.4/fullcalendar.css" rel="stylesheet"/> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/1.6.4/fullcalendar.min.js"></script> 
 

 
<div id='calendar'></div>