在周视图中仅显示特定时间范围

Question

我怎样才能在08：00-12：00和13：00-18：00之间显示时间，而不是使用FullCalendar在周视图中显示完整的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>

它仍然允许创建事件或将其移动到非营业时间，但会给日历“非正常时间”提供可视指示。

您还可以从视图中删除这样的行

$('#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进行渲染更改，则此方法可能很脆弱。