How to display all events of the year?

Question

I need to display all the events of the year starting by the current date, so essentially from March to December, I tried setting up the property visibleRange as follows:

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();
});

the problem's that I get only the month of March is there a way to achieve this?

Answer 1

I get only the month of March

Actually, according to your code, what you will get is only a single week, or a single day. You cannot even show a whole month based on what you have written.

The issue with your attempt though is a simple logical one. You are defined views as listWeek and listDay. The names in these fix a period of time - "week" and "day" which the views will cover. This fixed period takes priority over any visibleRange setting.

If you want your view to take account of the visibleRange, then you must just specify the view name, without a fixed time period in its name:

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

The above however will restrict you to only the exact time period specified. You cannot move to another year. To make this dynamic, you can use a function to calculate the visible range every time the view needs changing:

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

Demo: https://codepen.io/ADyson82/pen/XWbgyGZ

P.S. Specifying a view name without a time period is demonstrated in the visibleRange documentation already.