javascript - 根据视口(viewport)宽度更改 fullCalendar View 和标题选项？

Question

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

我有两个视口(viewport)宽度断点，我希望默认日历 View 和日历标题选项的组合不同。

视口(viewport)小于 700 像素:

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

大于 700 像素的视口(viewport):

• 默认 View 应该是 agendaWeek 并且应该有标题按钮可供选择不同的 View (例如 agendaDay 和 month 以及默认 View agendaWeek View )。

我有用于日历 View 和标题选项的较大视口(viewport)组合的工作代码(见下文)。

我的问题是，如果视口(viewport)宽度低于 700 像素，javascript 将呈现没有标题选项的 agendaDay 的默认 View ，或者带有标题选项的 agendaWeek 的默认 View 如果视口(viewport)宽度为 700 像素或更大，如何更改 View ？

<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 对呈现标题 View 选项按钮，我想在断点下删除宽度700 像素。

• This stack overflow post有点相关，但仅着眼于根据视口(viewport)宽度更改默认 View 。

Answer 1

Fullcalendar 无法在初始化后更改其选项。所以你有两个选择:

• 使用 CSS 有条件地隐藏按钮。
• 当大小更改超过 700 像素标记时，使用新选项销毁并重新创建 FC。

此外，source .

销毁和重建示例

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/