Question

我有几年重复的事件。我已经实现了一个按类按事件显示的过滤器，每个类代表一个单独的重复事件。

是否可以在Fullcalendar中创建列表视图，显示所有事件（来自所有年份）？这将使所有人计划每年更容易参加。

$('#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

您可以在自定义视图上添加一个duration参数：

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

它对我有用，因为我有同样的问题:)

谢谢！

Fullcalendar - 列出所有年份的所有活动（listAll）

1 个答案: