Question

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

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

视口小于700px：

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

远远超过700px视口：

默认视图应为agendaWeek，并且应该有标题按钮可用于选择不同的视图（例如agendaDay和month以及agendaWeek的默认视图）。

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

我的问题是，如果视口宽度低于700px，javascript将显示agendaDay的默认视图，没有标题选项，或者agendaWeek的默认视图，如果有更改视图的标题选项，则<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>视口宽度是700px还是更多？

right: "agendaDay,agendaWeek,month"

备注

在上面的代码中，{{1}}键：值对呈现了我想要在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视图和标题选项？

2 个答案: