css - 我可以设置 FullCalendar 时间段标签的样式吗？

Question

我们正在尝试将一天中的时间分组为“早上”、“下午”、“晚上”。是否可以向 TR 的任何元素添加类来实现此目的？我玩过 CSS 和样式，但一点运气都没有。

在此示例中，我们会在中午之前的任何时间选择黄色。作为早上 7:00 的行，我们希望显示“早上 7 点”的时间段标签具有基于一天中的中午之前的小时的黄色背景颜色。

<tr data-time="07:00:00">
    <td class="fc-axis fc-time fc-widget-content" style="width: 36px;">  
        <span>7am</span>
    </td>
    <td class="fc-widget-content">
    </td>
</tr>

Answer 1

只是一个想法。你可以这样做:

$(document).ready(function() {
  $('#calendar').fullCalendar({
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month,agendaWeek,agendaDay'
    },
    defaultView: 'agendaWeek',
    eventAfterAllRender: function(view) {
      $('.fc-axis.fc-time').each(function() {
        $(this).addClass(getClass($(this).parent().data('time')));
      })
    }
  });

  function getClass(timePart) {
    var hour = parseInt(moment("2016-12-20T" + timePart).format("H"));
    if (hour >= 6 && hour < 9) {
      return "morning";
    } else if (hour >= 9 && hour < 20) {
      return "day";
    } else {
      return "evening";
    }
  }

Fiddle