我可以设置FullCalendar Timeslot LABELS的样式吗?

时间:2016-12-19 23:15:25

标签: css fullcalendar

我们正在尝试将当天的小时分组为“早晨”,“下午”,“晚上”。是否可以在TR的任何元素中添加类来实现此目的?我已经玩过CSS和样式而没有运气。

在这个例子中,我们在中午之前选择黄色。作为7:00 AM的行,我们希望Timeslot 标签说“7am”根据中午前一小时的黄色背景颜色。

<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>

1 个答案:

答案 0 :(得分: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

祝你好运