我可以样式的全卡伦达时段标签吗?

Question

我们正在尝试将一天中的时间分为"早晨"，"下午"，"晚上"。是否可以将类别添加到可以实现这一目标的任何元素中？我已经玩过CSS和样式，根本没有运气。

在此示例中，我们将在中午之前的任何时候选择黄色。作为上午7:00的行，我们希望Timeslot label 说"上午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";
    }
  }

小提琴