FullCalendar responsive options
(Re)initialises FullCalendar on window resize. Different sets of initialisation options are loaded dependent on the width of the document.
by timum
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.6/fullcalendar.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.6/fullcalendar.min.js"></script>
<div id='calendar'></div>
JavaScript
var Calendar = {
e: $('#calendar'),
views: {
agendaDay: {
defaultView: 'agendaDay',
slotDuration: '00:15:00',
minTime: '00:00:00',
maxTime: '20:00:00',
header: {
right: 'prev,next today',
left: 'title'
}
},
agendaWeek: {
defaultView: 'agendaWeek',
slotDuration: '00:30:00',
minTime: '09:00:00',
maxTime: '17:00:00',
header: {
left: 'prev,today,next today',
center: 'title',
right: 'agendaDay,agendaWeek,month'
}
}
},
resize: function() {
if (Calendar.whichView($(document).width()) !== Calendar.e.fullCalendar('getView')) {
Calendar.e.fullCalendar('destroy');
Calendar.init();
}
},
whichView: function(width) {
if (width < 601) {
return 'agendaDay';
} else {
return 'agendaWeek';
}
},
init: function() {
Calendar.e.fullCalendar(Calendar['views'][Calendar.whichView($(document).width())]);
}
}
$(function() {
Calendar.init();
$(window).resize(Calendar.resize);
});