How to add jQuery if statement inside a set of plugin options?

Question

I'm trying to get a calendar plugin (FullCalendar) to display a different number of days depending on whether the user is viewing the site on mobile, tablet, or desktop breakpoints. For this, I need the calendar to display a normal week on desktop and 3 days on mobile. Like normal plugins, you init the element and pass it some options. I've tried a couple of things so.

The working code is as follows:

$('#calendar').fullCalendar({
        timeFormat:'h(:mm)a',
        header:{
            left:'prev',
            center:'title',
            right:'next'
        },
        height: 650,
        views: {
            basicThreeDay: {
                type: 'basic',
                duration: { days: 3 },
                buttonText: '3 day'
            },
        },
        defaultView: 'basicThreeDay',
        titleFormat: {
            week: 'MMMM YYYY'
        },
        columnFormat: {
            week: 'dddd M/D',
            day: 'ddd M/D'
        },

This code will display the calendar with a 3 day view. This is fine for mobile but will show 3 days on desktop when I want to show a full week. This is essentially what I want to do:

$('#calendar').fullCalendar({
        timeFormat:'h(:mm)a',
        header:{
            left:'prev',
            center:'title',
            right:'next'
        },
        height: 650,
        if ($(window).width() <= 481){
            views: {
                basicThreeDay: {
                    type: 'basic',
                    duration: { days: 3 },
                    buttonText: '3 day'
                },
            },
            defaultView: 'basicThreeDay',
        } else {
            defaultView: 'basicWeek',
        }
        titleFormat: {
            week: 'MMMM YYYY'
        },
        columnFormat: {
            week: 'dddd M/D',
            day: 'ddd M/D'
        },

I can wrap the entire function in the if statement, however, the entire function goes on after I copied here. At least 200 lines of code and I don't want to duplicate all that code just to get one single change. Anyway I can change options depending on the window size?

I've also tried setting the defaultView to basicWeek in the above function and then adding after that closes:

if (jQuery(window).width() <= 481) {
        jQuery('#hp-availability-calendar').fullCalendar({
            views: {
                basicThreeDay: {
                    type: 'basic',
                    duration: { days: 3 },
                    buttonText: '3 day'
                },
            },
            defaultView: 'basicThreeDay'
        });
    };

That doesn't work either.

Answer 1

You can create the common settings object and then add other variables to it based on your conditions. Something like this:

var calendar = {
    timeFormat:'h(:mm)a',
    header:{
        left:'prev',
        center:'title',
        right:'next'
    },
    height: 650,
    titleFormat: {
        week: 'MMMM YYYY'
    },
    columnFormat: {
        week: 'dddd M/D',
        day: 'ddd M/D'
    }
};

if ($(window).width() <= 481){
    calendar.views = {
        basicThreeDay: {
            type: 'basic',
            duration: {
                days: 3
            },
            buttonText: '3 day'
        }
    };
    calendar.defaultView = 'basicThreeDay',
} else {
    calendar.defaultView = 'basicWeek',
}

$('#calendar').fullCalendar(calendar);

Answer 2

you can create a "view" var and set the "basicThreeDay" or "basicWeek" on document ready like this

var view="basicWeek";//default to basicWeek
if ($(window).width() <= 481){//for mobile
    view='basicThreeDay';
}
$('#calendar').fullCalendar({
    timeFormat:'h(:mm)a',
    header:{
        left:'prev',
        center:'title',
        right:'next'
    },
    height: 650,
    views: {
        basicThreeDay: {
            type: 'basic',
            duration: { days: 3 },
            buttonText: '3 day'
        },
    },
    defaultView:  view,//will be "basicWeek" on (width>481) and "basicThreeDay" for (width<=481)
    titleFormat: {
        week: 'MMMM YYYY'
    },
    columnFormat: {
        week: 'dddd M/D',
        day: 'ddd M/D'
    }
});    

or you can create a function in defaultView with your if statement and return the right string like this

$('#calendar').fullCalendar({
    timeFormat:'h(:mm)a',
    header:{
        left:'prev',
        center:'title',
        right:'next'
    },
    height: 650,
    views: {
        basicThreeDay: {
            type: 'basic',
            duration: { days: 3 },
            buttonText: '3 day'
        },
    },
    defaultView: function(){
        if ($(window).width() <= 481){
             return 'basicThreeDay';
        } else {
            return 'basicWeek';
        }
    }(),//you need to call the function  
    titleFormat: {
        week: 'MMMM YYYY'
    },
    columnFormat: {
        week: 'dddd M/D',
        day: 'ddd M/D'
    }
});    

if you set the "basicThreeDay" view regardless of the window width you can change between views like this

$(window).resize(function(){
    if ($(window).width() <= 481){
        $('#calendar').fullCalendar( 'changeView', 'basicThreeDay' );
    }
    else{
        $('#calendar').fullCalendar( 'changeView', 'basicWeek' );
    }
});

https://jsfiddle.net/f28ojwx9/