Show only specific time range in week view - fullcalendar

Question

How can I only show time between 08:00-12:00 and 13:00-18:00 instead of the full 24 hours in week view using FullCalendar?
I tried this solution on SO, but I couldn't get it to work.

Answer 1

businessHours may get you where you want to go. Starting in v2.9.1 you can specify multiple sections of hours.
$('#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>
It will still allow events to be created or moved into non-business-hours but gives a visual indication to the calendar of "not normal hours".
You could also remove the rows from the view something like this
$('#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>
This approach could be fragile though if rendering changes get made to FullCalendar.

Answer 2

This code displays the calendar between 08:00-18:00. May not what you exactly looking for, but it helped me (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();
});