为没有活动的全天着色

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>