Блог

У меня есть события, которые повторяются в течение нескольких лет. Я реализовал фильтр для отображения событий по классам, при этом каждый класс представляет отдельное повторяющееся событие.

Возможно ли создать представление списка в Fullcalendar, показывающее все события (за все годы)? Это позволило бы всем людям легче планировать посещение каждого года.

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

Вы можете сделать это, добавив duration параметр в свой пользовательский вид:

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

Это сработало для меня, так как у меня такая же проблема

Спасибо!