如何在FullCalendar中给特定的日期添加颜色？

Question

使用FullCalendar，有没有办法以编程方式将特定日期的颜色与其他日期不同地着色？例如，在“月”或“周”视图中，我想将没有事件的日期着色为“红色”，而具有一些事件（但尚未完全安排）的日期着色为“黄色”。拥有全部日程的日期将正常着色（白色背景）。是否有任何回调或CSS标签可以利用来添加此行为？谢谢。

- user303615

Answer 1

According to Regin's answer here you can change the color by setting the dayRender event in the calendar like this:

$( "#calendar" ).fullCalendar(function() {  
    dayRender: function (date, cell) {

        if ( !dateHasEvent(date) )
            cell.css("background-color", "red");
        else if ( dateHasEvent(date) )
            cell.css("background-color", "yellow");
    }
});

function dateHasEvent(date) {
   // some code here
}

- pedromendessk

Answer 2

使用视图渲染器来为特定的日期添加颜色。

viewRender: function(view,element){
                    $.ajax({
                        url: //your custom url,
                        data: {start:view.start.format(),end:view.end.format()},
                        type: 'GET',
                        dataType: "json",
                        contentType: "application/json",                
                        success: function (data) {
                            $.each(data, function(i) {
                                $('.fc-day[data-date="'+data[i]["date"]+'"]').css('background', Your Color Code);
                            });
                        }
                    });
                },

- Shanka SMS

Answer 3

我同意gravityone的原始回复。您可以跟踪功能请求。

我认为在不修改核心代码的情况下，没有一种错误可靠的实现此类功能的方法。现在你能做到最接近的是像以下这样的东西。然而，您将需要使用事件源构建这些addClass()调用。这仅适用于完整的日历视图，并且在视图中有一个月的某一天出现两次（来自上个月或下个月）时“中断”。

$("div.fc-day-number:contains('15')").parent().addClass("vacation");

<style>
            .fc-grid .vacation {
                background-color:#F00;
            }
</style>

- Josh Metcalfe

Answer 4

FullCalendar似乎是一个非常强大的jquery日历，如果您编辑源代码，可能会在作者更新时给您带来一些痛苦。我的建议是给作者发送电子邮件，请求添加该功能或提供有关如何按需编辑字段的信息。

第二个想法是查看每种情况下生成的css选择器，并更改背景颜色以适应情况。这将使FullCal源代码保持更新，并为您提供所需内容。

希望这可以帮助到您。

- gravityone

Answer 5

我需要使用服务器数据来突出显示多个日期，而不使用fullcalendar事件。 使用jQuery相对容易。 在示例代码中，您将必须使用fullcalendar格式（可能通过JSON）填充日期对象。 格式为（YYYY-MM-DD）。 这必须跟随一个值：0为false，1或更多为true。 必须在文档准备就绪事件之前初始化days对象（因此var days应该是全局的document.ready）。 在示例中，2016-03-05和2016-03-30将被突出显示，2016-03-09不会。

$(document).ready(function(){
  var days = {'2016-03-05': 1,'2016-03-09': 0,'2016-03-30': 1};
  $("td, th").each(function(){
    if(days[$(this).attr("data-date")]){
      $(this).css("background-color","lime");
    }
  });
});

我在网上搜索了类似这样的通用解决方案，但没有成功。许多人都接近了，但这个确实做到了其他人所要求的。

希望它有所帮助。

唐

- user695166

Answer 6

如果有人仍在寻找相同的解决方案，这里有一个JSFiddle。

JQuery

$(document).ready(function() {

  $('#calendar').fullCalendar({
    theme: true,
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month,agendaWeek,agendaDay'
    },
    defaultDate: '2014-07-04',
    editable: true,
    events: [{
      title: 'All Day Event',
      start: '2014-07-01'
    }, {
      title: 'Long Event',
      start: '2014-07-07',
      end: '2014-07-10'
    }, {
      id: 999,
      title: 'Repeating Event',
      start: '2014-07-09T16:00:00'
    }, {
      id: 999,
      title: 'Repeating Event',
      start: '2014-07-16T16:00:00'
    }, {
      title: 'Meeting',
      start: '2014-07-12T10:30:00',
      end: '2014-07-12T12:30:00'
    }, {
      title: 'Lunch',
      start: '2014-07-12T12:00:00'
    }, {
      title: 'Birthday Party',
      start: '2014-07-13T07:00:00'
    }, {
      title: 'Click for Google',
      url: 'http://google.com/',
      start: '2014-07-28'
    }],
    eventAfterAllRender: function(view) {
      //Use view.intervalStart and view.intervalEnd to find date range of holidays
      //Make ajax call to find holidays in range.
      var fourthOfJuly = moment('2014-07-04', 'YYYY-MM-DD');
      var holidays = [fourthOfJuly];
      var holidayMoment;
      for (var i = 0; i < holidays.length; i++) {
        holidayMoment = holidays[i];
        if (view.name == 'month') {
          $("td[data-date=" + holidayMoment.format('YYYY-MM-DD') + "]").addClass('holiday');
        } else if (view.name == 'agendaWeek') {
          var classNames = $("th:contains(' " + holidayMoment.format('M/D') + "')").attr("class");
          if (classNames != null) {
            var classNamesArray = classNames.split(" ");
            for (var j = 0; j < classNamesArray.length; j++) {
              if (classNamesArray[j].indexOf('fc-col') > -1) {
                $("td." + classNamesArray[j]).addClass('holiday');
                break;
              }
            }
          }
        } else if (view.name == 'agendaDay') {
          if (holidayMoment.format('YYYY-MM-DD') == $('#calendar').fullCalendar('getDate').format('YYYY-MM-DD')) {
            $("td.fc-col0").addClass('holiday');
          };
        }
      }
    }
  });

});

CSS

body {
  margin: 0;
  padding: 50px 0 0 0;
  font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
  font-size: 14px;
}

#calendar {
  width: 100%;
}

.holiday {
  background: lightgray;
}

HTML

<div id="calendar"></div>

- Kevin STS