JQuery-FullCalendar 多数据源实现日程展示
背景
本次需求:实现在一个以月为界面的日历上展示每天发生的事件。
1、每天的事件有多个类型,不同类型的事件使用不同背景色标注,展示为某个类型事件的统计,比如: 会议(6)
2、点击某一天可以查询改天所有类型事件列表。
3、点击某类型事件可以查询当天该类型事件列表。
4、点击周选项可以查询当前周所有事件。这一点只是和第2点在取日期范围有所不同。
分析
经过以上需求明确接下来需要用到的知识点:
* JQuery FullCalendar v3.10.0
* day 点击事件
* event 事件的点击事件
* week 周点击事件
* 不同类型的事件数据来源不同,需要使用多数据源
查了一下别人翻译的中文版API : https://www.helloweba.net/javascript/445.html,找到以上知识点,基本上就可以累代码了。
实现
a、引用 FullCalendar插件的JS到项目里。
b、在页面添加引用插件的代码。
<div id="calendar" style="width: 1000px; padding: 10px"></div>c、在页面的JS里面进行calendar插件初始化
$('#calendar').fullCalendar({
header:{
left: 'prev day',
center: 'title',
right: 'next'
},
isRTL : false,
showNonCurrentDates: false, // 默认为true,显示月视图非本月日期
eventLimit: 3, //每日事件展示上限
eventLimitText: '更多>>', //多余事件描述
buttonIcons: false, //控制界面图标,false的时候,上月、下月才会显示为中文否则为图标
height: window.innerHeight-30, //控制高度
windowResize: function (view) { //控制界面随窗口拖动自适应
$('#calendar').fullCalendar('option','height',window.innerHeight-30);
},
weekNumbers:true, //周显示开关
navLinks: true, //日点击开关
navLinkDayClick: function ( date, jsEvent) {// 这里进行日点击事件处理,Ajax请求,date格式化后为当日
},
navLinkWeekClick: function ( weekStart, jsEvent ) {// 这里进行周点击事件处理,Ajax请求,weekStart格式化后为当周的开始日即周一,想要周日自己加6天就好了
},// 多数据源节点,这个节点文档没有解释的很清晰,稍微理解一会才搞清楚结构
eventSources: [
{
events: function (start, end, timezone, callback) { // 某一种类型事件,这里通过ajax请求获取后台数据将数据放到对应的事件里面let events = []; // 定义一个数组准备接收事件angular.forEach(data.resultList,function (item) { // 循环从后台接收的数据
// 将数据push到数组里面
events.push({
title : '会议(' + item.count + ')',
start : item.endDate,
stage : '03'
});
});// 进行事件回调,这样事件就会生成在日程表上了
callback(events);},
color: '#6CA0E0' // 该类型数据的事件背景色
},
{
events: function (start, end, timezone, callback) {
// 某一种类型事件,这里通过ajax请求获取后台数据将数据放到对应的事件里面// 处理同上,这里可以无限添加数据源
},
color: '#C4D79B'
}
],
eventClick: function(calEvent, jsEvent, view) { // 事件点击// calEvent可以获取被点击事件里面的属性,比如:calEvent.stage(上面标黄属性)就能取到当前事件的属性值。$(this).css('border-color', 'red'); //点击后改变被点击事件边框颜色
},
eventTextColor:'#000000' // 事件文字颜色
});d、最后还有个问题就是重载日程表上面事件,当你改变了查询结果又希望异步刷新页面事件时,需要先去掉所有的事件再更新事件才行。
$('#calendar').fullCalendar('removeEvents');
$('#calendar').fullCalendar('refetchEvents');这两行代码你值得拥有!以上基本上就完全解决了所有问题啦,如果有问题可以留言。
全国人民举国欢庆 。。。
JQuery-FullCalendar 多数据源实现日程展示的更多相关文章
- C# Web Forms - Using jQuery FullCalendar
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> ...
- JQuery FullCalendar(二)
前言:根据前文介绍,我们对JQuery FullCalendar如何从后台取数据有了初步了解,已经实现最基本的要求.下面介绍一下FullCalendar的事件 $('#calendar').fullC ...
- 如何设置Jquery UI Menu 菜单为横向展示
Jquery UI Menu 默认是纵向展示的.Jquey UI Menu 设置API,http://api.jqueryui.com/menu/#option-position 修改对应的CSS可 ...
- [JQuery]用InsertAfter实现图片走马灯展示效果2——js代码重构
写在前面 前面写过一篇文章<[JQuery]用InsertAfter实现图片走马灯展示效果>,自从写过那样的也算是使用面向对象的写法吧,代码实在丑陋,自从写过那样的代码,就是自己的一块心病 ...
- 3-5 编程练习:jQuery实现简单的图片对应展示效果
3-5 编程练习:jQuery实现简单的图片对应展示效果 通过这个章节的学习, 老师带领大家完成了一个基本的图片切换特效,接下来,我们也实现一个类似的效果,点击相应的按钮,切换对应的图片. 效果图 : ...
- jquery.fullCalendar官方文档翻译(一款小巧好用的日程管理日历, 可集成Google Calendar)
1. 使用方式, 引入相关js, css后, $(‘#div_name’).fullCalendar({//options}); 接受的是一个option对象 2. 普通属性 2.1. year, ...
- 【三石jQuery视频教程】01.图片循环展示
视频地址:http://v.qq.com/page/e/5/t/e0149n5he5t.html 大家好,欢迎来到[三石jQuery视频教程],我是您的老朋友 - 三生石上. 今天,我们要通过基本的H ...
- 【三石jQuery视频教程】01.图片循环展示_再次重发
之前的文章,由于在博文的底部放有微信公众号的缘故,被管理员判定为: 您好,您的这篇博文内容本身没什么问题,但是,在博文底部存在推广信息内容.... 你们也没告知到底是哪条触犯了博客园的规矩,我就把底部 ...
- PHP+Mysql+jQuery实现地图区域数据统计-展示数据
我们要在地图上有限的区块内展示更多的信息,更好的办法是通过地图交互来实现.本文将给大家讲解通过鼠标滑动到地图指定省份区域,在弹出的提示框中显示对应省份的数据信息.适用于数据统计和地图区块展示等场景. ...
随机推荐
- spring 数据库多数据源路由
项目中需要根据不同业务进行分库,首先是将业务不同业务映射到不同过的数据库( biz --> db,可能存在多对一情况), 查看springjdbc源码发现AbstractRoutingDataS ...
- 剑指offer-扑克牌顺子
题目描述 LL今天心情特别好,因为他去买了一副扑克牌,发现里面居然有2个大王,2个小王(一副牌原本是54张^_^)...他随机从中抽出了5张牌,想测测自己的手气,看看能不能抽到顺子,如果抽到的话,他决 ...
- Jenkins+Jmeter持续集成笔记(四:定时任务和邮件通知)
通过前几篇文章,jmeter+ant+jenkins自动化持续构建的测试平台基本成型.既然要自动化平台,最基本的肯定要实现不经过人工干预,平台会在特定的条件下自动运行测试脚本,并在脚本运行结束后,发送 ...
- linux touch命令 创建文件
touch 创建文件,用法,touch test.txt,如果文件存在,则表示修改当前文件时间 [root@MongoDB ~]# touch /data/text.txt [root@MongoDB ...
- Hydra(爆破神器)
PS:这款暴力密码破解工具相当强大,支持几乎所有协议的在线密码破解,其密码能否被破解关键在于字典是否足够强大.对于社会工程型渗透来说,有时能够得到事半功倍的效果.本文仅从安全角度去探讨测试,使用本文内 ...
- turtle模块绘图
import turtle #运动命令 # forward(d) 向前移动d长度 # backward(d) 向后移动d长度 # right(d) 向右转动多少度 #left(d) 向左转动多少度 # ...
- Centos7 下安装mysql5.7.17(glibc版)
一.安装前的检查 1.1 检查 linux 系统版本 [root@localhost ~]# cat /etc/system-release 1.2 检查是否安装了 mysql [root@local ...
- [NOIP2017赛前复习第二期]复赛考试技巧与模版-普及组
考试技巧 1.拿到考卷首先通看题目,按自己感觉的难度排序(普及一般是1-2-3-4了~还是相信出题人不会坑我们的2333) 2.一般来说,普及组前两道题比较简单(大水题啊233~),但是通常坑很多,例 ...
- 信步漫谈之Redis—Linux下环境搭建
一.环境 Linux 系统:Suse11(SLES-11-SP3-DVD-x86_64-GM-DVD1)Redis 安装包:redis-4.0.11.tar.gz 下载地址:http://d ...
- 各种CSS样式设置细线边框
基础知识回顾 : cellspacing:单元格与单元格之间的边距:cellpadding:单元格内的内容与单元格边沿的边距 简单实用的样式,设置所有的单元格为细线效果 <style type= ...