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

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

I get only the month of March

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

尽管您的尝试存在一个简单的逻辑问题。您将视图定义为 listWeek 和 listDay。这些中的名称固定了一段时间 - "week" 和 "day" 视图将涵盖这些时间。此固定期限优先于任何 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 中已经演示了指定不带时间段的视图名称。

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

How to display all events of the year?

javascript

fullcalendar

fullcalendar-4