根据视口宽度更改fullCalendar视图和标题选项？

Question

fullCalendar是一个jquery日历插件.我用它来显示来自一个谷歌日历的数据.

我有两个视口宽度断点,我希望默认日历视图和日历标题选项的组合是不同的.

视口小于700px:

• 应该是默认视图,agendaDay并且应该没有可用于更改视图的标题按钮选项,例如,agendaWeek或month.

超过700px视口:

• 默认视图应agendaWeek并且应该有可用于选择不同的视图(如标题按钮agendaDay和month用的默认视图沿agendaWeek).

我有日历视图和标题选项的较大视口组合的工作代码(见下文).

我的问题是,agendaDay如果视口宽度低于700px,javascript将显示没有标题选项的默认视图,或者agendaWeek如果视口宽度为700px或更多,javascript将带有标题选项的默认视图以更改视图？

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

笔记

• 在上面的代码中,right: "agendaDay,agendaWeek,month"key:value对呈现了我希望在700px断点处删除宽度的标题视图选项按钮.

• 此堆栈溢出帖子有些相关,但仅考虑根据视口宽度更改默认视图.

Answer 1

初始化后,Fullcalendar不能更改它的选项.所以你有两个选择:

• 使用CSS会有条件地隐藏按钮.
• 当大小超过700px标记时,使用新选项销毁并重新创建FC.

另外,来源.

销毁和重新创建示例

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()
});

这是一个完整的例子:http://jsfiddle.net/slicedtoad/kjponpf1/6/