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

Question

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

我有两个视口宽度断点，我想要 默认日历视图 和 日历 header 选项[=52= 的组合] 与众不同。

视口小于 700 像素：

默认视图应为 agendaDay，并且不应有可用于更改视图的 header 按钮选项，例如 agendaWeek 或 month。

大于 700 像素的视口：

默认视图应为 agendaWeek，并且应有 header 按钮可用于选择不同的视图（例如 agendaDay 和 month 以及默认视图 agendaWeek).

我有日历视图和 header 选项的较大视口组合的工作代码（见下文）。

我的问题是，如果视口宽度低于 700px，javascript 将呈现没有 header 选项的默认视图 agendaDay，或者 agendaWeek 的默认视图] 如果视口宽度为 700 像素或更大，使用 header 选项更改视图？

<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 对呈现 header 视图选项按钮，我想在断点下删除宽度700px.

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

Answer 1

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

使用 CSS 有条件地隐藏按钮。
当尺寸超过 700px 标记时，使用新选项销毁并重新创建 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/

Answer 2

2018 年更新：

从 FullCalendar 2.9.0 版本开始，可以在初始化后动态设置选项。这些选项修改将应用于所有视图。目前无法以这种方式设置特定于视图的选项。 https://fullcalendar.io/docs/dynamic-options

在此处查看特定选项信息： https://fullcalendar.io/docs/view-specific-options

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

Change fullCalendar view and header options based on viewport width?

javascript

jquery

fullcalendar

responsive-design