Question

使用FullCalendar，有没有什么方法可以编程方式为特定日期着色而不是其余时间？例如，在“月”或“周”视图中，我想将没有事件的日期着色为“红色”，将某些事件（但尚未完整的日程表）的日期标记为“黄色”。具有完整计划的天数将正常着色（白色背景）。有没有我可以利用的回调或CSS标签来添加这种行为？谢谢。

Answer 1

根据Regin的回答here，您可以通过在日历中设置 dayRender 事件来更改颜色，如下所示：

$( "#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
}

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);
                            });
                        }
                    });
                },

Answer 3

我同意gravityone的原始回复。您可以跟踪feature request。

我不相信在没有核心代码修改的情况下实现此类功能的错误证明方法。我认为你现在最接近的就是以下内容。但是，您需要使用事件源构建对addClass（）的这些调用。这仅适用于完整日历视图，并且当您在视图中（从上一个月或下个月）出现两个月的某一天时，“休息”。

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

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

Answer 4

FullCalendar似乎是一个非常强大的jquery日历，编辑源代码可能会让你在作者更新时感到痛苦。我的建议是给作者发电子邮件，要求添加该功能，或者提供一些如何编辑字段的信息。

第二个想法是查看在满足每种情况时生成的css选择器，并根据情况更改背景颜色。这将使FullCal源免费更新，并为您提供所需的信息。

希望有所帮助。

Answer 5

我需要使用服务器中的数据突出显示多天，而不使用任何fullcalendar事件。事实证明使用jQuery相对容易。在示例代码中，您必须使用fullcalendar格式的日期填充days对象（可能通过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");
    }
  });
});

我在网上搜索了这样的一般解决方案但没有成功。许多人已经接近了，但这个人做的是其他人要求的。

希望它有所帮助。

唐

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>

有什么方法可以在FullCalendar中为特定日期着色？

6 个答案: