fullcalendar 日历插件3.9.0 -- 基本插件使用
以下主要结构，直接执行即可以使用 ，仅用参考：
html:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link type="text/css" rel="stylesheet" href="https://cdn.bootcss.com/fullcalendar/3.8.2/fullcalendar.min.css">
</head>
<body>
<div id="div_name"></div> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/moment.js/2.21.0/moment.js"></script>
<script src="https://cdn.bootcss.com/fullcalendar/3.9.0/fullcalendar.js"></script>
<script src="https://cdn.bootcss.com/fullcalendar/3.9.0/gcal.js"></script>
<script src="https://cdn.bootcss.com/fullcalendar/3.9.0/locale-all.js"></script>
<script src="https://cdn.bootcss.com/artDialog/7.0.0/dialog.js"></script>
<script>
(function ($) {
console.log(typeof fullCalendar); $("#div_name").fullCalendar(
{
header: {
left: 'prev today next',
center: 'title',
// right: 'agendaWeek,agendaDay'
right: 'month,agendaWeek,agendaDay'
},
monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
today: ["今天"],
buttonText:{//设置日历头部各按钮的显示文本信息
today: '今天/本周',
month: '月',
week: '周',
day: '日'
},
axisFormat: 'H(:mm)',
defaultView:'agendaDay',
allDaySlot:true,
allDayText:'全天',
editable: false,//不能进行编辑
events:function(start, end, timezone, callback) {//ajax请求数据并显示在响应时间段内
console.log(timezone);
console.log(callback.toString());
console.log(end);
console.log(start);
var events = [];
var data = [{
date:"2018-03-24T13:15:30Z",
isrent:1,
is_special:"0",
price:"600.00",
stock:"1"
},{
date:"2018-03-24T08:15:30Z",
isrent:1,
is_special:"5",
price:"600.00",
stock:"1"
},{
date:"2018-03-24T04:15:30Z",
isrent:1,
is_special:"1",
price:"600.00",
stock:"1"
}];
$.each(data,function(i,c) {
if (c.is_special == '1') {
events.push({
title: '￥'+c.price+','+c.stock+'套',
start: c.date , // will be parsed
color: '#F2EB44'
});
} else {
events.push({
title: '￥'+c.price+','+c.stock+'套',
start: c.date , // will be parsed
color: '#B4EABE'
});
} });
console.log(events);
callback(events)
}, dayClick: function(date, allDay, jsEvent, view) {//点击空白处，添加信息
console.log(date);
console.log(allDay);
console.log(jsEvent);
console.log(view);
var selDate =date.format('YYYY-MM-DD');//格式化日期
var d = dialog({title:"添加教育场地申请",
content:'' ,//"url:"+addnewurl+"",parent:$dialogParent(),
cancelVal: "关闭",cancel: true,width: "700",height: "300px",lock:true,
close:function(){
window.location.href= "${base}/education/list/eduSiteApplyDayList.jsp";
}});
d.showModal();
},
eventClick:function(event){//查看事件
var d = dialog({title:"查看教育场地申请",id:"prisonAnaly_detail_dialog",parent:$dialogParent(),
content:'' ,//"url:${base}/education/eduSiteApply.do?detail&id=" + event.id,
cancelVal: "关闭",cancel: true ,width: "500px",height: "300px",lock:true
});
d.showModal();
}
}
);
})(jQuery);
</script>
</body>
</html>
显示效果：
更多请参考官方网站
fullcalendar 日历插件3.9.0 -- 基本插件使用的更多相关文章
- fullcalendar日历插件的使用并动态增删改查
我上个项目是做了一个关于教育方面的web端页面,其中的课程表就要用到fullcalendar日历插件,刚开始也是不会用,因为以前也没用过,后面也是看官方文档,问同事,最后完成了这个课程表,个人感觉fu ...
- elasticsearch5.0.0 安装插件及配置过程
elasticsearch5.0.0 安装插件及配置过程 由于es5.0是里程碑式的更新,所以很多变化的地方,暂时我就插件安装遇到的问题记录一下. 插件安装命令 2.3版本的安装命令 安装Marvel ...
- elasticsearch5.0集群+kibana5.0+head插件插件的安装
elasticsearch5.0集群+kibana5.0+head插件插件的安装 es集群的规划: 两台16核64G内存的服务器: yunva_etl_es1 ip:1.1.1.1 u04es01. ...
- MySQL中文全文索引插件 mysqlcft 1.0.0 安装使用文档[原创]
[文章+程序 作者:张宴 本文版本:v1.0 最后修改:2008.07.01 转载请注明原文链接:http://blog.zyan.cc/post/356/] MySQL在高并发连接.数据库记录数较多 ...
- Inno Setup 精灵显示插件 InnoFairy (V2.0 版本)
原文 http://restools.hanzify.org/article.asp?id=111 一个如影随形的小精灵会令到你的安装程序更加人性化. 就是这样一个功能的Inno Setup插件, 希 ...
- 免费高端出辕营，横空出世惊鬼神 Excel插件：ExcelPower_Helper 0.41初出茅庐
免费高端出辕营,横空出世惊鬼神 Excel插件:ExcelPower_Helper 0.41初出茅庐 隐鹤 倾心开发 2019.4.1 1. 引言 经过前后大约零零散散的一年的开发, ...
- Vue2.0 分页插件pagination使用详细说明
Vue2.0 分页pagination使用 插件下载地址:Vue_Pagination 插件描述:基于jQuery的分页插件大家都用过很多了吧,今天分享一下基于Vue的分页插件pagination.j ...
- Eclipse Oxygen(4.7.0)安装插件Eclipse Class Decompiler反编译JAR文件
引用自官方内容 Eclipse Class Decompiler是一款Eclipse插件,整合了多种反编译器,和Eclipse Class Viewer无缝集成,能够很方便的使用插件查看类库源码,进行 ...
- eclipse安装activiti5.18.0工作流插件 以及安装过程中activiti插件出现的问题及解决
转: eclipse安装activiti5.18.0工作流插件 以及安装过程中activiti插件出现的问题及解决 2017年05月04日 18:44:21 JJ_nan 阅读数:2773 版权声 ...
随机推荐
- CodeForces 550E Brackets in Implications 推理
给出一个四个规则 0->0=1 0->1=1 1->0=0 1->1=0 我自己当时一味的去找规律,没有把式子好好推一推. 当然每个人都能想到a[n]=0是必须的 当a[n ...
- js变量以及其作用域
一.变量的类型 Javascript和Java.C这些语言不同,它是一种无类型.弱检测的语言.它对变量的定义并不需要声明变量类型,我们只要通过赋值的形式,可以将各种类型的数据赋值给同一个变量.例如: ...
- pdf转eps后存在大片空白的处理
之前pdf转eps的方式是用acrobat直接转,发现每次转完后,图片都显示在一张A4纸上,插入到论文中时会出现大片空白:但在pdf中是没有这么多空白的,与裁剪没关系. 后来在 http://tex. ...
- MySQLl导入导出SQL文件
window 1.导出整个数据库 mysqldump -u 用户名 -p 数据库名 > 导出的文件名 mysqldump -u dbuser -p dbname > dbname.sql ...
- BAT （中国互联网公司三巨头）
BAT,B=百度.A=阿里巴巴.T=腾讯,是中国互联网公司百度公司(Baidu).阿里巴巴集团(Alibaba).腾讯公司(Tencent)三大互联网公司首字母的缩写.百度总部在北京.阿里巴巴总部在浙 ...
- semantic-ui 图标
semantic-ui提供了很多的图标,基本常用的在官网上面都能找到.要想记住这么多图标是不可能的,但是也是有简便方法记忆. 首先,图标其实和按钮的区别基本没有,要说有的话,也就是基础样式的大小不同吧 ...
- Spring配置文件beans.xml头部配置解释
Spring配置文件beans.xml头部配置解释 - EasonJim - 博客园https://www.cnblogs.com/EasonJim/p/6880329.html
- httpd sshd firewalld 服务后面的d的意思
在操作系统中,一般系统的服务都是以后台进程的方式存在,而且都会常驻系统中,直到关机才结束.这类服务也称Daemon,在Linux系统中就包含许多的Daemon. 判断Daemon最简单的方法就是从名称 ...
- MYSQL 表大小限制
MySQL 3.22限制的表大小为4GB.由于在MySQL 3.23中使用了MyISAM存储引擎,最大表尺寸增加到了65536TB(2567 – 1字节).由于允许的表尺寸更大,MySQL数据库的最大 ...
- Git-用 cherry-pick 挑好看的小樱桃
版权声明:本文为博主原创文章,转载请在文章明显位置标明文章原属哦. https://blog.csdn.net/qq_32452623/article/details/79449534 ti ...