Javascript Fullcalendar jquery 插件中的年视图
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10949486/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Year View in Fullcalendar jquery plugin
提问by Paul
I started a YearView in fullcalendar (derived from the basic 'MonthView', needed to display longer events such as school holidays), and I could use a hand if anyone is already familiar with the way events get displayed on a view.
我在 fullcalendar 中启动了 YearView（源自基本的“MonthView”，需要显示学校假期等更长的事件），如果有人已经熟悉事件在视图上的显示方式，我可以使用手。
- Using the 'BasicEventRenderer', how do I populate the 'segmentContainer' for 'DayEventRenderer' ?
- And when do I initialize the default start & end date for delimiting the active year ? (the starting month could be changed, and it'd be nice to be able to keep the highlight on the current month and the current day).
- 使用“BasicEventRenderer”，如何为“DayEventRenderer”填充“segmentContainer”？
- 我什么时候初始化默认的开始和结束日期来分隔活动年份？（可以更改起始月份，并且能够将突出显示保留在当前月份和当天是很好的）。
See my github fork at https://github.com/Paulmicha/fullcalendar
在https://github.com/Paulmicha/fullcalendar查看我的 github 分支
-> example file is https://github.com/Paulmicha/fullcalendar/blob/master/tests/year-view-test-01.html
-> 示例文件是https://github.com/Paulmicha/fullcalendar/blob/master/tests/year-view-test-01.html
采纳答案by Eduardo Cuomo
FullCalendar Documentation: http://arshaw.com/fullcalendar/docs/
FullCalendar 文档：http://arshaw.com/fullcalendar/docs/
Loading events as JSON: http://arshaw.com/fullcalendar/docs/event_data/events_json_feed/
将事件加载为 JSON：http: //arshaw.com/fullcalendar/docs/event_data/events_json_feed/
Render event: http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/
渲染事件：http: //arshaw.com/fullcalendar/docs/event_rendering/renderEvent/
Render event example:
渲染事件示例：
fc.fullCalendar('renderEvent', {
'id': 1,
'title': 'Test Event 1',
'start': '2009-11-05T13:15:30Z',
'end': '2009-11-05T13:30:00Z'
});
Limit the display of available months: Fullcalendar limit the display of available months?
限制可用月份的显示：Fullcalendar 限制可用月份的显示？
回答by tabacitu
I think an alternative for your user interface would be bootstrap-year-calendar. It allows you view whole years and place one/multiple values per day, BUT the values would only be visible on hover or click.
我认为您的用户界面的替代方案是bootstrap-year-calendar。它允许您查看全年并每天放置一个/多个值，但这些值仅在悬停或单击时可见。
For my need, it did the trick.
对于我的需要，它成功了。
回答by Devsullo
Alternatively if you need year view something like this:
或者，如果您需要这样的年份视图：
You can install it via npmhttps://www.npmjs.com/package/fullcalendar-year-view
你可以通过 npm https://www.npmjs.com/package/fullcalendar-year-view安装它
Steps:
脚步：
cd yourFileLocation
npm init (press enter)
npm i fullcalendar-year-view
To get lib files go to yourFileLocation/node_modules/fullcalendar-year-view/dist/
要获取 lib 文件，请转到 yourFileLocation/node_modules/fullcalendar-year-view/dist/
Or alternatively, you can use browserifyfor your page
或者，您可以为您的页面使用browserify
Include css & js lib files to your page
将 css 和 js lib 文件包含到您的页面中
Finally use 'year' view
最后使用“年”视图
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'year,month,basicWeek,basicDay'
}
....
