javascript - Fullcalendar jquery插件中的年视图

Question

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

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

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

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

---

Answer 1

FullCalendar 文档：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 限制可用月份的显示？

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。它允许您查看整年并每天放置一个/多个值，但这些值仅在悬停或单击时可见。

为了我的需要，它成功了。