javascript - How to add jQuery if statement inside a set of plugin options? -
i'm trying calendar plugin (fullcalendar) display different number of days depending on whether user viewing site on mobile, tablet, or desktop breakpoints. this, need calendar display normal week on desktop , 3 days on mobile. normal plugins, init element , pass options. i've tried couple of things so.
the working code 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 display calendar 3 day view. fine mobile show 3 days on desktop when want show full week. want 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 entire function in if statement, however, entire function goes on after copied here. @ least 200 lines of code , don't want duplicate code 1 single change. anyway can change options depending on window size?
i've tried setting defaultview basicweek in above function , adding after 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.
you can create common settings object , add other variables based on conditions. 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);
Comments
Post a Comment