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>

在fullCalendar中没有事件的天数着色

1 个答案: