fullcalendar - 在周 View 中仅显示特定时间范围

Question

如何使用 FullCalendar 仅显示 08:00-12:00 和 13:00-18:00 之间的时间，而不是周 View 中的完整 24 小时？

我试过this solution on SO ，但我无法让它工作。

Answer 1

businessHours可能会带你去你想去的地方。从 v2.9.1 开始，您可以指定多个时段。

$('#calendar').fullCalendar({
  defaultView: 'agendaWeek',
  businessHours: [{
    dow: [0, 1, 2, 3, 4, 5, 6], // Maybe not 0,6? Sunday,Saturday
    start: '08:00',
    end: '12:00'
  }, {
    dow: [0, 1, 2, 3, 4, 5, 6], // Maybe not 0,6? Sunday,Saturday
    start: '13:00',
    end: '18:00'
  }]
});

@import url('https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.css');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.js"></script>
<div id="calendar"></div>

它仍然允许创建事件或将事件移至非工作时间，但会在日历上提供“非正常时间”的视觉指示。

您还可以从 View 中删除行，如下所示

$('#calendar').fullCalendar({
  defaultView: 'agendaWeek',
  viewRender: function(view, element) {
    if (view.name.substr(0, 6) === 'agenda') {
      $(element).find('div.fc-slats table tr[data-time]').filter(function() {
        var _t = $(this).data('time');
        /* find times not in the ranges we want */
        return ((_t >= '08:00' && _t <= '12:00') || (_t >= '13:00' && _t <= '18:00')) === false;
      }).each(function() {
        $(this).hide(); /* hide the rows */
      });
    }
  }
});

@import url('https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.css');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.js"></script>
<div id="calendar"></div>

如果对 FullCalendar 进行渲染更改，则此方法可能很脆弱。