fullCalendar插件基本使用
效果图
html代码，需要引入jquery，layui,fullCalendar
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>fullCalendar</title> <link rel="stylesheet" href="fullcalendar-3.9.0/fullcalendar.print.css" media='print' />
<link rel="stylesheet" href="fullcalendar-3.9.0/fullcalendar.css" /> <!--<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>-->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.6.1/fullcalendar.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.6.1/fullcalendar.min.css"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.6.1/fullcalendar.print.css"></script>-->
<style> body {
margin: 40px 10px;
padding: 0;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
font-size: 14px;
} #calendar {
max-width: 900px;
margin: 0 auto;
} </style>
<script src="layui/layui.all.js"></script>
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<button class="layui-btn" onclick="render()">btn</button>
<button class="layui-btn" onclick="destory()">destory</button>
<div id='calendar'></div>
</body> <script src="fullcalendar-3.9.0/lib/jquery.min.js"></script>
<script src="fullcalendar-3.9.0/lib/moment.min.js"></script>
<script src="fullcalendar-3.9.0/lib/jquery-ui.min.js"></script>
<script src="fullcalendar-3.9.0/fullcalendar.js"></script>
<script> $(document).ready(function() { $('#calendar').fullCalendar({
customButtons: {
myCustomButton: {
text: '自定义按钮',
click: function() {
alert('点击了自定义按钮!');
}
}
},
//头工具栏，三个位置，左中右，https://www.helloweba.net/javascript/447.html#fc-header 有固定参数。
header: {
left: 'prev,next today myCustomButton',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2018-11', //默认时间，
defaultView:'month', //默认视图
editable: true,//可以被编辑
weekNumbers:true,//显示周数
selectable: true,//是否允许用户单击或者拖拽日历中的天和时间隙。默认false。
firstDay: 1,//设置每周第一天，数字int型，默认0（周日）
timezone: 'local',//时区
timeFormat: 'HH:mm:ss',//时间格式
eventLimit: true, // allow "more" link when too many events
loading: function( isLoading, view ){
//暂时这里没有看到效果
console.log("loading回调",view)
},
events: [ //日历显示的事件，数组形式显示的
{
title: 'All Day Event',
start: '2018-11-01',
color:'red'//不同事件不同颜色
},
{
title: 'Long Event',
start: '2018-11-07',
end: '2018-11-10',
colorl:'blue'
},
{
id: 999,
title: 'Repeating Event',
start: '2018-11-09T16:00:00',
color:'#30ff18'
},
{
id: 999,
title: 'Repeating Event',
start: '2018-11-16T16:00:00'
},
{
title: 'Conference',
start: '2018-11-11',
end: '2018-11-13'
},
{
title: 'Meeting',
start: '2018-11-12T10:30:00',
end: '2018-11-12T12:30:00'
},
{
title: 'Lunch',
start: '2018-11-12T12:00:00'
},
{
title: 'Meeting',
start: '2018-11-12T14:30:00'
},
{
title: 'Happy Hour',
start: '2018-11-12T17:30:00'
},
{
title: 'Dinner',
start: '2018-11-12T20:00:00'
},
{
title: 'Birthday Party',
start: '2018-11-13T07:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2018-11-28'
}
],
eventMouseover: function( event, jsEvent, view ) { //鼠标划过的事件
layer.tips(event.title, this);
},
eventMouseout:function( event, jsEvent, view ) { //鼠标离开的事件
var index = layer.tips();
layer.close(index);
},
selectAllow : function(clickInfo) {//禁止点击的控制,是否允许点击false不让点击， 将用户选择限制到某些时间窗口。仅当selectable选项是激活状态时可用。值为事件id或对象。
var start = clickInfo.start.unix();//获取点击的开始时间
console.log("点击是否允点击");
//如果大于当前时间就让点击，否则就不让点击，提示
if(clickInfo.start >= new Date()){
return true;
}
//不让点击了 提示
layer.msg("选择时间小于当前时间，不可以点击过去的时间");
return false;
},
select:function(start, end, jsEvent) { //点击日历上的某个时间触发的函数
//layer.msg("点击时间控件" + JSON.stringify(jsEvent));
/*
执行顺序，先执行selectAllow:判断是否可以点击
然后执行select:点击了时间空间出发的事件，这两个控件其实感觉在上边的那个里边写逻辑就可以
如果可以执行的事件，就在上边那个里边直接写，不可以执行的，就直接提示反馈fase，这样就不可以点击了。
*/
layer.msg("点击时间控件");
},
eventClick: function(eventObj) {//点击日期控件上显示的事件触发的事件
layer.msg("我点击的是：11" + eventObj.title );
console.log("我点击的是",eventObj)
},
}); }); /**
* 重新渲染事件到日程控件上
* https://www.helloweba.net/javascript/454.html#fc-EventSourceObject
*/
function render(){
var json = '{"state":"ok","msg":"操作成功！","calendar":[{"id":1121,"title":"3344- 辅导辅导13 [ 津津]","start":"2018-11-22 15:30:00","remarks":"课程:3344- 辅导辅导13<br>校区:中心校区<br>教室:花样教室<br>教师:米桂<br>时间:15:30:00-16:00:00<br>课时:1<br>上课学员姓名:津津","end":"2018-11-22 16:00:00"}]}';
var s = $.parseJSON( json );
$('#calendar').fullCalendar('renderEvents', s.calendar, true);//批量渲染事件到日程控件上
} /**
* 移除日程插件上的事件
*/
function destory(){
$("#calendar").fullCalendar('removeEvents');
}
</script>
</html>
fullCalendar插件基本使用的更多相关文章
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（86）-日程管理-fullcalendar插件用法
前言 本文分享fullcalendar用法,最后面提供代码下载 说到日程管理,基于JQuery的插件FullCalendar当之无愧,完整的API稳定和调用方式,非常易于扩展!可以用于系统的个人历程管 ...
- fullcalendar插件日程管理
日程管理-fullcalendar插件用法 前言 本文分享fullcalendar用法,最后面提供代码下载 说到日程管理,基于JQuery的插件FullCalendar当之无愧,完整的API稳定和 ...
- FullCalendar插件的基本使用
我的另一博客地址:https://segmentfault.com/u/lyrfighting/articles 前段时间,一直在开发考勤系统,当时为满足设计的需求,选了好几个插件,最后决定采用Ful ...
- js jquery 实现 排班,轮班，日历，日程。使用fullcalendar 插件
如果想用fullcalendar实现排班功能,或者日历.日程功能.那么只需要简单的几步: 这里先挂官网链接: fullcalendar fullcalendar官网下载链接 一.下载及简单配置 1.这 ...
- Easyui+MVC+FullCalendar插件实现日程记录功能
好久好久好久,,,没有写博客了,,久到账号都忘记了....分享一个干货.... 废话少说,先看看效果图. 要实现这样一个功能,先创建一个用于存储日程的记录表(不要问我为什么都是大写,因为初版在orac ...
- 日历插件FullCalendar应用：(二)数据增删改
接上一篇 日历插件FullCalendar应用:(一)数据展现. 这一篇主要讲使用fullcalendar插件如何做数据的增删改,用到了art.dialog web对话框组件,上一篇用到的webFor ...
- FullCalendar应用——整合农历节气和节日
FullCalendar用来做日程管理功能非常强大,但是唯一不足的地方是没有将中国农历历法加进去,今天我将结合实例和大家分享如何将中国农历中的节气和节日整合到FullCalendar中,从而增强其实用 ...
- FullCalendar Timeline View 使用
FullCalendar Timeline View(v4) The Scheduler add-on provides a new view called “timeline view” with ...
- Jquery 记一次使用fullcalendar的使用记录
最近接了一个需求,把excel做的表格开发到系统里,本来想直接做成表格的形式,后来考虑到数据库中的表结构不好设计,最后决定做成日历的形式: 先上成品图 需要引用的js,fullcalendar官网可以 ...
随机推荐
- Flex学习笔记-自定义菜单的显示细节
icon <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx=&qu ...
- kubernetes下安装mysql
参考文档:https://blog.csdn.net/sealir/article/details/81177747 注:有mysql安装在k8s集群内,集群外且通过k8s service endpo ...
- HTML学习-1网页基础知识
HTML超文本标记语言:HyperText Markup Language. 由浏览器运行解析. 它包括了静态页面.html .htm.动态页面.php .aspx .jsp,从数据库提取. 今天 ...
- classloader trace
类加载机制: 程序启动时,根据入口函数调用相关功能,功能在不同类中即在不同的class文件中,jvm根据类加载机制来动态加载class文件到内存中,只有被加载后才能被调用,否则引发异常 1.装载:查找 ...
- delphi异常捕获try except语句 和 try finally语句用法
原文地址:delphi try except语句 和 try finally语句用法以及区别作者:1865898133 一直写程序都没管他们,也尽量很少用,今天终于想把他给弄个明白,在网上找来,记下! ...
- python判断任务是CPU密集型还是IO密集型
目前已经知道,在需要并发执行任务的时候,需要使用多线程或者多进程;如果是IO密集型任务,使用多线程,如果是CPU密集型任务,使用多进程;但问题是,经常我们会遇到一种情况就是:需要被执行的任务既有IO操 ...
- C++ CSTRINGLIST用法
CStringList类成员 构造 CStringList 构造一个空的CString对象列表 首/尾访问 GetHead 返回此列表(不能是空的)中头部的元素 GetTail 返回此列表(不能是 ...
- 2017面向对象程序设计（Java） 第4周学习指导及要求（2017.9.14-2017.9.18）
学习目标 深入理解程序设计中算法与程序的关系: 深入理解java程序设计中类与对象的关系: 理解OO程序设计的第一个特征:封装: 需要掌握基本使用方法的预定义类有:Math类.String类.Arra ...
- SAP 000 客户端初始登录
Solution 在SAP系统DB中删除账号SAP*,SAP系统会自动创建SAP*这个账号,然后初始密码是“PASS”,这样就获得Client 000 SAP*账号. Step by Step 以Or ...
- ubuntu下mysql源码编译安装
建议:cpu4核以上,内存4G以上 1. 安装环境:Ubuntu Server 14.10MySQL-5.6.23.tar.gz 2. 安装必备的工具sudo apt-get install make ...