如何在一组插件选项中添加 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 行代码，我不想为了获得一个单一的更改而复制所有代码。无论如何，我可以根据 window 大小更改选项？

我也试过在上面的函数中将 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);

Answer 2

您可以创建一个 "view" var 并在文档上设置 "basicThreeDay" 或 "basicWeek"，就像这样

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

或者您可以在 defaultView 中使用您的 if 语句和 return 像这样的正确字符串创建一个函数

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

如果您设置 "basicThreeDay" 视图而不考虑 window 宽度，您可以像这样在视图之间切换

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

https://jsfiddle.net/f28ojwx9/

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

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

javascript

jquery

fullcalendar