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.