JQuery-FullCalendar 多数据源实现日程展示

weixin_34314962

于 2019-04-18 17:35:00 发布

阅读量439

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/laramia/p/10731072.html

版权

本文介绍了如何使用JQuery FullCalendar插件，在月视图的日历上展示不同类型的日程事件。每个事件根据类型用不同颜色区分，并支持点击日、周和事件查看详细列表。在实现过程中，涉及到day、event和week的点击事件处理，以及多数据源的整合。通过初始化calendar插件，将后台数据转化为日程事件，并在需求变更时异步刷新页面事件。

摘要由CSDN通过智能技术生成

背景

本次需求：实现在一个以月为界面的日历上展示每天发生的事件。

1、每天的事件有多个类型，不同类型的事件使用不同背景色标注，展示为某个类型事件的统计，比如：会议（6）

2、点击某一天可以查询改天所有类型事件列表。

3、点击某类型事件可以查询当天该类型事件列表。

4、点击周选项可以查询当前周所有事件。这一点只是和第2点在取日期范围有所不同。

分析

经过以上需求明确接下来需要用到的知识点：

* JQuery FullCalendar v3.10.0

* day 点击事件

* event 事件的点击事件

* week 周点击事件

* 不同类型的事件数据来源不同，需要使用多数据源

查了一下别人翻译的中文版API ： https://www.helloweba.net/javascript/445.html，找到以上知识点，基本上就可以累代码了。