Question

我需要显示从当前日期开始的一年中的所有事件，因此基本上从3月到12月，我尝试如下设置属性visibleRange：

document.addEventListener('DOMContentLoaded', function() {

var calendarEl = document.getElementById('calendar');

var calendar = new FullCalendar.Calendar(calendarEl, {
  plugins: [ 'list' ],

  header: {
    left: 'prev,next today',
    center: 'title',
    right: 'listDay'
  },
  views: {
    listDay: { buttonText: 'list day' },
    listWeek: { buttonText: 'list week' }
  },

  defaultView: 'listWeek',
  navLinks: true, 
  editable: true,
  eventLimit: true,
  events: <?= json_encode($events) ?>,
  visibleRange: {
     start: '2020-03-01',
     end: '2020-12-31'
  }
});

calendar.render();
});

问题是我只得到March月份，有没有办法实现这一目标？

Answer 1

我只有三月

实际上，根据您的代码，您将只能获得一个星期或一天的收益。您甚至无法根据所写内容显示整个月。

尽管如此，您尝试的问题还是很简单的。您将视图定义为listWeek和listDay。其中的名称确定了视图将涵盖的时间段-“星期”和“天”。此固定期限优先于任何visibleRange设置。

如果您希望视图考虑到visibleRange，则必须仅指定视图名称，名称中不带固定时间段：

header: {
  left: 'prev,next today',
  center: 'title',
  right: 'list'
},
defaultView: 'list',

但是，以上内容将您限制在指定的确切时间段内。您不能再搬到另一年。要使其动态化，可以在每次需要更改视图时使用函数来计算可见范围：

visibleRange: function(currentDate) {
  var yr = currentDate.getFullYear();
  return {
    start: yr + '-03-01',
    end: yr + '-12-31'
  }
},
dateIncrement: { "years": 1}

演示：https://codepen.io/ADyson82/pen/XWbgyGZ

P.S。已经在visibleRange documentation中演示了指定没有时间段的视图名称。

如何显示一年中的所有事件？

1 个答案: