Fullcalendar - list all events from all years (listAll)

Question

I have events which repeat over several years. I've implemented a filter to show by events by class, with each class representing a separate repeating event.

Is it possible to create a list view in Fullcalendar showing all events (from all years)? This would all people to plan to attend every year more easily.

http://jsfiddle.net/s7t2bc12/

$('#calendar').fullCalendar({
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'listYear,listMonth,listWeek,listDay'
      },
      views: {
        listDay: {
          buttonText: 'list day'
        },
        listWeek: {
          buttonText: 'list week'
        },
        listMonth: {
          buttonText: 'list month'
        },
        listYear: {
          buttonText: 'list year'
        }
      },
      defaultView: 'listYear',
      defaultDate: '2016-09-12',
      navLinks: true, // can click day/week names to navigate views
      editable: true,
      eventLimit: true, // allow "more" link when too many events
      events: [{
        title: 'Ted Talks 2015',
        start: '2015-04-26',
        end: '',
        url: "https://www.ted.com/talks",
        className: 'red'
      }, {
        title: 'Ted Talks 2016',
        start: '2016-04-20',
        end: '',
        url: "https://www.ted.com/talks",
        className: 'red'
      }, {
        title: 'Ted Talks 2017',
        start: '2017-04-24',
        end: '',
        url: "https://www.ted.com/talks",
        className: 'red'
      }, {
        title: 'Consumer Electronics 2015',
        start: '2015-01-06',
        end: '',
        url: "https://www.ces.tech/",
        className: 'green'
      }, {
        title: 'Consumer Electronics 2016',
        start: '2016-01-05',
        end: '',
        url: "https://www.ces.tech/",
        className: 'green'
      }, {
        title: 'Consumer Electronics 2017',
        start: '2017-01-08',
        end: '',
        url: "https://www.ces.tech/",
        className: 'green'
      }, {
        title: 'Taitronics 2016',
        start: '2016-10-06',
        end: '',
        url: "https://www.taitronics.tw/",
        className: 'orange'
      }, {
        title: 'Taitronics 2015',
        start: '2015-10-06',
        end: '',
        url: "https://www.taitronics.tw/",
        className: 'orange'
      }, {
        title: 'Taitronics 2014',
        start: '2014-10-13',
        end: '',
        url: "https://www.taitronics.tw/",
        className: 'orange'
      }, {
        title: 'Taitronics 2013',
        start: '2013-10-08',
        end: '',
        url: "https://www.taitronics.tw/",
        className: 'orange'
      }],
      eventRender: function eventRender(event, element, view) {
        return ['all', event.className[0]].indexOf($('#color_selector').val()) >= 0
      }
    });
    $('#color_selector').on('change', function() {
      $('#calendar').fullCalendar('rerenderEvents');
    })

Answer 1

You can do that adding a duration parameter on your custom view:

views: {
    listAllYears: {
        type: 'listYear',
        duration: { years: 999 },
    },
}

It worked for me as I have the same issue :)

Thanks!