Change to basicDay view in FullCalendar if viewport is 480px or less?

Question

Is there an easy way to change the view for a user based on the current viewport size in FullCalendar?

What I'd like to do is have month view on desktop, and day view if using an iPhone or mobile device. At the moment with month view all the events are squashed up on mobile.

Current code:

$(document).ready(function() {
    $("#primary #calendar").fullCalendar({
        header: {
            left: 'prev,next',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        timeFormat: 'h(:mm)tt',         
        eventSources: [
            {
                url: 'http://www.google.com/mycal1',
                color: 'blue',
                textColor: 'white'
            },
            {
                url: 'http://www.google.com/mycal2',
                color: 'white',
                textColor: 'black'
            }
        ]
    })
});

Answer 1

This may not be exactly what you are looking for, but it may get you started in the right direction.

Our websites are responsive and we include the 'viewScreenSize' function on most every page...

var thisScreenWidth = 0, thisScreenHeight = 0;
function viewScreenSize() {
    if (typeof (window.innerWidth) === 'number') {
        //Non-IE
        thisScreenWidth = window.innerWidth;
        thisScreenHeight = window.innerHeight;
    } else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
        //IE 6+ in 'standards compliant mode'
        thisScreenWidth = document.documentElement.clientWidth;
        thisScreenHeight = document.documentElement.clientHeight;
    } else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
        //IE 4 compatible
        thisScreenWidth = document.body.clientWidth;
        thisScreenHeight = document.body.clientHeight;
        screenWidth = thisScreenWidth;
    }
    // screenSize = div in page footer  
    $("#screenSize").html(thisScreenWidth + "x" + thisScreenHeight);
}

When fullCalendar is loaded in '$(document).ready(function () {}' and our screen width is led than 601 ...

if (thisScreenWidth < 601) $('#calendar').fullCalendar('changeView', 'basicDay');

When the screen is resized...

$(window).bind('resize', function () {
    if (thisScreenWidth < 601) $('#calendar').fullCalendar('changeView', 'basicDay');
    else $('#calendar').fullCalendar('changeView', 'month');
});

Working example... http://theelmatclark.com/AboutUs/Calendar - merely resize the browser window - as you resize, the current width/height appear in the footer next to the [Home] button.

There may be better ways, but I haven't found one yet. Good luck.

Question... Does anyone know of a way to divide the header into multiple lines?