Nur bestimmten Zeitraum in der Wochenansicht anzeigen

Question

Wie kann ich nur die Zeit zwischen 08: 00-12: 00 und 13: 00-18: 00 anstelle der vollen 24 Stunden in der Wochenansicht mit FullCalendar anzeigen?

Ich versuchte this solution on SO, aber ich konnte es nicht zum arbeiten bekommen.

Answer 1

businessHours kann Sie bekommen, wohin Sie gehen möchten. Ab v2.9.1 können Sie mehrere Stundenabschnitte angeben.

$('#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>

Es wird noch Ereignisse erlauben, in nicht-Business-Stunden erstellt oder verschoben werden, sondern eine visuelle Anzeige für den Kalender „nicht normal Stunden“ gibt.

Sie könnten auch die Zeilen aus der Sicht so etwas wie diese

$('#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>

Dieser Ansatz entfernen obwohl zerbrechlich sein könnte, wenn Rendering Änderungen FullCalendar gemacht bekommen.