CODEWITHSUNDEEP
fullcalendar
Rubberduck1337106092
Rubberduck1337106092

Reputation: 1344

Show only specific time range in week view

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.

Upvotes: 2

Views: 3987

Answers (2)

Guvenc Kaplan
Guvenc Kaplan

Reputation: 21

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();

});

Upvotes: 1

smcd
smcd

Reputation: 3265

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.

Upvotes: 6

Related Questions