代码之家 › 专栏 › 技术社区 › Brian Zelip

是否根据视口宽度更改完整日历视图和标题选项?

fullcalendar responsive-design jquery javascript

Brian Zelip · 技术社区 · 10 年前

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

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

在小于700px的视口中:

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

在大于700px的视口中:

默认视图应为 议程周 并且应该有标题按钮可用于选择不同的视图(如 议程日 和 月 以及默认视图 议程周 ).

我为日历视图和标题选项的较大视口组合编写了工作代码(见下文)。

我的问题是javascript将呈现什么默认视图 议程日 如果视口宽度低于700px,或默认视图为 议程周 如果视口宽度为700px或更大,是否使用标题选项更改视图?

<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断点下删除宽度的标题视图选项按钮。
This stack overflow post 有些相关,但只考虑根据视口宽度更改默认视图。

2 回复 | 直到 7 年前

DanielST 10 年前

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/

Jenn Mottram 6 年前

2018年更新:

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

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