Full Calendar Default View

Question

Since Full Calendar is not really suitable for smaller screen I'm trying to change the "default view" of the full calendar according to the width size of the screen.

I'm trying to implement that with this line code:

defaultView: (function () { 
  if ($(window).width() >= 768) { 
    return defaultView = 'agendaDay'; 
  } else { 
  return defaultView = 'month'; 
  } 
})

It's working fine however you have to refresh the browser every time to view the changes.

I tried windowResize function but no Luck. Any help would really be appreciated. Looking for sulotion without refresh the page. Thanks in advance.

you mean you tried https://fullcalendar.io/docs/windowResize? What did you do inside that callback, exactly? Show us what you tried. Did you try to call https://fullcalendar.io/docs/changeView, perhaps? What was the result? "No luck" doesn't really give us a meaningful description of the problem — ADyson, Aug 02 '18 at 21:34

score 0 · Answer 1 · answered Jun 26 '20 at 07:18

I'm not sure if fullcalendar will accept a function for the defaultView optiont but your code will work if you make two adjustments:

Return the name of the view i.e. 'month'
Make your function into an IIFE

defaultView: (function () { 
  if ($(window).width() >= 768) { 
    return 'agendaDay'; 
  } else { 
    return 'month'; 
  } 
})()

score 0 · Accepted Answer · answered Aug 27 '21 at 06:40

0

As of v5, defaultView was renamed to intialView so this works:

initialView: window.innerwidth >= 768 ? 'agendaDay' : 'month',

answered Aug 27 '21 at 06:40

Trees4theForest

1,267
2
18
48

Full Calendar Default View

2 Answers2