Change fullCalendar view and header options based on viewport width?

Question

fullCalendar is a jquery calendar plugin. I'm using it to present data from one google calendar.

I have two viewport width breakpoints for which I'd like the combination of default calendar view and calendar header options to be different.

At less than 700px viewport:

• the default view should be agendaDay and there should be no header button options available to change the view, e.g., to agendaWeek or month.

At greather than 700px viewport:

• The default view should be agendaWeek and there should be header buttons available for choosing different views (like agendaDay and month along with the default view of agendaWeek).

I have working code for the larger viewport combination of calendar view and header options (see below).

My question is what javascript will present a default view of agendaDay with no header options if the viewport width is below 700px, or a default view of agendaWeek with header options to change the view if the viewport width is 700px or more?

<script src="/libs/jquery/dist/jquery.min.js"></script>
<script src="/libs/moment/moment.js"></script>
<script src="/libs/fullcalendar/dist/fullcalendar.min.js"></script>
<script src="/libs/fullcalendar/dist/gcal.js"></script>
<script>
  $('#calendar').fullCalendar({
    googleCalendarApiKey: 'key',
    events: {
      googleCalendarId: 'id'
    },
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'agendaDay,agendaWeek,month'
    },
    eventBackgroundColor: 'transparent',
    eventBorderColor: '#08c',
    eventTextColor: 'black',
    height: 'auto',
    defaultView: 'agendaWeek',
    allDaySlot: false,
  });
</script>

Notes

• Inside the code above, the right: "agendaDay,agendaWeek,month" key:value pair renders the header view option buttons that I would like to be removed for widths under the breakpoint of 700px.

• This stack overflow post is somewhat related but only looks at changing the default view based on viewport width.

Solution

Fullcalendar can't have it's options changed after initialization. So you have two options:

• Use CSS do hide the buttons conditionally.
• Destroy and re-create the FC with the new options when the size changes past the 700px mark.

Also, source.

Destroy and Recreate example

var $fc = $("#calendar");

var options = { // Create an options object
  googleCalendarApiKey: 'key',
  events: {
    googleCalendarId: 'id'
  },
  header: {
    left: 'prev,next today',
    center: 'title',
    right: 'agendaDay,agendaWeek,month'
  },
  eventBackgroundColor: 'transparent',
  eventBorderColor: '#08c',
  eventTextColor: 'black',
  height: 'auto',
  defaultView: 'agendaWeek',
  allDaySlot: false,
}
$fc.fullCalendar(options);

function recreateFC(screenWidth) { // This will destroy and recreate the FC taking into account the screen size
  if (screenWidth < 700) {
    options.header = {
      left: 'prev,next today',
      center: 'title',
      right: ''
    };
    options.defaultView = 'agendaDay';
  } else {
    options.header = {
      left: 'prev,next today',
      center: 'title',
      right: 'agendaDay,agendaWeek,month'
    };
    options.defaultView = 'agendaWeek';
  }
}

$(window).resize(function (e) { //set window resize listener
  recreateFC($(window).width()); //or you can use $(document).width()
});

And here is a fully working example: http://jsfiddle.net/slicedtoad/kjponpf1/6/

Comments

[Brian Zelip]

how to write the javascript to rebuild FC based on viewport width? I see there is a destroy method -- fullcalendar.io/docs/display/destroy -- but how to bring it back with the desired options?

[Brian Zelip]

THANKS! I tweaked one part of your script to get it to work properly -- under the if statement, there needs to be a value for right, like so: right: ''. I will update my original question to reflect this.

[DanielST]

@BrianZ Ah, yes. If you don't set it, it becomes the default instead of empty.

[Brian Zelip]

I spoke too soon. Go to the jsfiddle example. Once that page loads for the first time, the title "January 2015" is on the left and the today button and arrows are on the right. These options are not specified anywhere. THEN, once you resize the frame, the header is correctly rendered according to the script. Why??

[Brian Zelip]

Yes, that takes care of the problem of the wrong header on page load. Also, for a complete answer which also changes the calendar view per viewport, you have to add options.defaultView = 'agendaDay'; & options.defaultView = 'agendaWeek'; to your if and else statements respectively. Can you update for the record? And thanks much again.

[Dimitris Papageorgiou]

@slicedtoad does that also mean that fullcalendar(if initialized only once) cannot have a ternary operator in an option...ex.hiddenDays:close_days=(typeof closedays!=='undefined')?closedays:[]

[DanielST]

@DimitrisPapageorgiou Pretty much. If an FC option takes a function, you can use that, but a ternary operator will evaluate itself when the FC is first initialized.

[Michael]

@slicedtoad thank you very much for this. Just what I was after.

[Jacob Mulquin]

As the resize event is triggered very often, it's a good idea to minimise the times the object is to be destroyed and re-initialised. This can be done by checking the newly assigned defaultView based on the previous and only reinitialise if the value has actually changed. Working example: jsfiddle.net/r52tjn3w