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

Question

如何仅使用FullCalendar显示08：00-12：00和13：00-18：00之间的时间，而不是周视图中的全部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制造。