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进行渲染更改，这种方法可能很脆弱。

Answer 2

此代码显示08：00-18：00之间的日历。可能不是您真正想要的东西，但这对我有所帮助（FullCalendar 4.2.0）：

document.addEventListener('DOMContentLoaded', function() {

    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {

        minTime: '08:00:00',
        maxTime: '18:00:00'
    
    }
    
    calendar.render();

});

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

2 个答案: