如何在一组插件选项中添加jQuery if语句？

Question

我正在尝试使用日历插件(FullCalendar)来显示不同的天数,具体取决于用户是在移动设备,平板电脑还是桌面断点上查看该网站.为此,我需要日历在桌面上显示正常的一周,在移动设备上显示3天.像普通的插件一样,你初始化元素并传递一些选项.我已经尝试了几件事.

工作代码如下:

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

此代码将显示3天视图的日历.这对于移动设备来说很好,但是当我想要显示整整一周时,它会在桌面上显示3天.这基本上就是我想做的事情:

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

我可以将整个函数包装在if语句中,但是,在我复制之后整个函数继续运行.至少200行代码,我不想复制所有代码只是为了获得一次更改.无论如何,我可以根据窗口大小更改选项？

我也尝试在上面的函数中将defaultView设置为basicWeek,然后在关闭后添加:

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

这也行不通.

Answer 1

您可以创建公共设置对象,然后根据您的条件向其添加其他变量.像这样的东西:

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