javascript - Change fullCalendar view and header options based on viewport width?

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 bination 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 bination 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.

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 bination 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 bination of calendar view and header options (see below).

<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.

Share Improve this question edited May 23, 2017 at 12:25 CommunityBot 11 silver badge asked Jan 23, 2015 at 14:01 Brian Zelip 3,2017 gold badges36 silver badges50 bronze badges

Check out stackoverflow./questions/18296736/… which appears to be more or less the same question – bhttoan Commented Jan 23, 2015 at 14:03
@bhttoan that post is related, and provides the same solution from the same stack overflow contributor as the answer in the post I linked to in my notes section above. But it doesn't account for changing the header options depending on the viewport. – Brian Zelip Commented Jan 23, 2015 at 14:15

Add a ment |

2 Answers 2

Sorted by: Reset to default 11

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/slicedtoad/kjponpf1/6/

2018 Update:

Since FullCalendar version 2.9.0, it is possible to dynamically set options after initalization. These option modifications will be applied to all views. It is not currently possible to set View-Specific Options in this manner. https://fullcalendar.io/docs/dynamic-options

View-Specific Options information here: https://fullcalendar.io/docs/view-specific-options

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Change fullCalendar view and header options based on viewport width? - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)