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

Question

使用 FullCalendar，有什么方法可以以编程方式为特定日期着色，而不是其他日子？例如，在“月”或“周”视图中，我想将没有事件的日子涂成“红色”，将有一些事件（但还没有完整的时间表）的日子涂成“黄色”。日程安排完整的日子通常会被着色（白色背景）。我可以利用任何回调或 CSS 标签来添加此行为吗？谢谢你。

Answer 1

根据 Regin在此处的回答，您可以通过在日历中设置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的原始回应。您可以跟踪功能请求。

我不相信在不修改核心代码的情况下实现此类功能的防错方法。我认为你现在可以来的最接近的是以下内容。但是，您需要使用您的事件源来构建这些对 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

我需要使用来自服务器的数据突出显示多天，而不使用任何完整的日历事件。事实证明，使用 jQuery 相对容易。在示例代码中，您必须使用全日历格式的日期（可能通过 JSON）填充 days 对象。格式为 (YYYY-MM-DD)。这必须后跟一个值：0 为假 1 或更多为真。必须在文档就绪事件之前初始化 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>