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

Question

我需要显示从当前日期开始的一年中的所有事件，所以基本上是从三月到十二月，我尝试按如下方式设置属性 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

I get only the month of March

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

尽管您的尝试存在一个简单的逻辑问题。您将 View 定义为 listWeek 和 listDay。这些名称中的名称固定了一段时间 - View 将涵盖的“周”和“天”。此固定时间段优先于任何 visibleRange 设置。

如果您希望您的 View 考虑visibleRange，那么您必须只指定 View 名称，名称中没有固定的时间段:

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

然而，以上内容将限制您只能使用指定的确切时间段。你不能搬到另一年。为了使其动态化，您可以使用一个函数来计算每次 View 需要更改时的可见范围:

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

附言visibleRange documentation 中演示了指定不带时间段的 View 名称已经。