Fullcalendar jquery插件中的年视图

Question

我在 fullcalendar 中启动了 YearView（源自基本的“MonthView”，需要显示更长的事件，例如学校假期），如果有人已经熟悉事件在视图上的显示方式，我可以使用手。

1. 使用“BasicEventRenderer”，如何为“DayEventRenderer”填充“segmentContainer”？
2. 什么时候初始化默认的开始和结束日期来分隔活动年份？ （开始月份可以更改，能在当月和当日保持高亮就好了）。

在https://github.com/Paulmicha/fullcalendar查看我的github fork

-> 示例文件是https://github.com/Paulmicha/fullcalendar/blob/master/tests/year-view-test-01.html

---

Answer 1

完整日历文档：http://arshaw.com/fullcalendar/docs/

以 JSON 格式加载事件：http://arshaw.com/fullcalendar/docs/event_data/events_json_feed/

渲染事件：http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/

渲染事件示例：

fc.fullCalendar('renderEvent', {
    'id': 1,
    'title': 'Test Event 1',
    'start': '2009-11-05T13:15:30Z',
    'end': '2009-11-05T13:30:00Z'
});

限制显示可用月份：Fullcalendar limit the display of available months?

Answer 2

或者，如果您需要这样的年视图：

可以通过 npm 安装 https://www.npmjs.com/package/fullcalendar-year-view

步骤：

cd yourFileLocation
npm init (press enter)
npm i fullcalendar-year-view

要获取 lib 文件，请转到 yourFileLocation/node_modules/fullcalendar-year-view/dist/

或者，您也可以使用 browserify 作为您的页面

在您的页面中包含 css 和 js lib 文件

最后使用'年'视图

$('#calendar').fullCalendar({
  header: {
    left: 'prev,next today',
    center: 'title',
    right: 'year,month,basicWeek,basicDay'
  }
  ....

Answer 3

我认为您的用户界面的替代方案是bootstrap-year-calendar。它允许您查看全年并每天放置一个/多个值，但这些值仅在悬停或单击时可见。

根据我的需要，它成功了。