Fullcalendar jquery插件中的年视图

Posted 2023-05-09

【中文标题】Fullcalendar jquery插件中的年视图

【英文标题】：Year View in Fullcalendar jquery plugin

【发布时间】：2012-06-12 13:13:06

【问题描述】：

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

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

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

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

---

【问题讨论】：

我无法使用上述代码获取年视图中的事件。请帮忙解决这个问题！

最近有更新吗？

yearview 已经有 fork 了：github.com/tpruvot/fullcalendar/releases

【参考方案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?

【讨论】：

感谢您的反馈！有时间我会回来的。

@Paulmicha - 你最终能解决这个问题吗？这正是我想要的:)

@paul 我无法使用上述代码获取年视图中的事件。请帮忙解决这个问题！

【参考方案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'
  
  ....

【参考方案3】：

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

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