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.

Answer 1

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/