FullCalendar（日程管理控件）
2024-09-27 07:02:06
(以下是我学习FullCalendar控件时，网络上收集的一些资料)
jQuery.fullCalendar官方网址: http://arshaw.com/fullcalendar/
http://arshaw.com/fullcalendar/docs/
http://arshaw.com/fullcalendar/download/
第二部分（官方文档的翻译）
http://blog.csdn.net/lgg201/article/details/4818941
第三部分（视频教程）
http://www.verycd.com/topics/2782321/（一共两集）
第四部分（实战）
（自己做了一个日程管理）
主要的代码如下：
<script type='text/javascript'>
$(document).ready(function() {
artDialog.notice = function (options) {
var opt = options || {},
api, aConfig, hide, wrap, top,
duration = 800; var config = {
id: 'Notice',
left: '100%',
top: '100%',
fixed: true,
drag: false,
resize: false,
follow: null,
lock: false,
init: function(here){
api = this;
aConfig = api.config;
wrap = api.DOM.wrap;
top = parseInt(wrap[0].style.top);
hide = top + wrap[0].offsetHeight; wrap.css('top', hide + 'px')
.animate({top: top + 'px'}, duration, function () {
opt.init && opt.init.call(api, here);
});
},
close: function(here){
wrap.animate({top: hide + 'px'}, duration, function () {
opt.close && opt.close.call(this, here);
aConfig.close = $.noop;
api.close();
}); return false;
}
}; for (var i in opt) {
if (config[i] === undefined) config[i] = opt[i];
}; return artDialog(config);
};
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('#calendar').fullCalendar({
theme: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
//fullcalendar本地化
//timeFormat:{agenda: 'h:mm TT{ - h:mm TT}'}, //默认是{agenda: ‘h:mm{ - h:mm}}, 影响的是添加的具体的日程上显示的时间格式.
monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
today: ["今天"],
firstDay: 1,
buttonText: {
today: '今天',
month: '月',
week: '周',
day: '日',
prev: '上一月',
next: '下一月'
},
allDaySlot:false,
selectable: true,
selectHelper: true,
aspectRatio:2.7,
editable: false,
allDayDefault:false,
viewDisplay: function(view) {
var viewStart = $.fullCalendar.formatDate(view.start,"yyyy-MM-dd HH:mm:ss");
var viewEnd = $.fullCalendar.formatDate(view.end,"yyyy-MM-dd HH:mm:ss");
$("#calendar").fullCalendar('removeEvents');
$.getJSON('http://localhost:8080/pnote/schedule/listevents.action',{start:viewStart,end:viewEnd},function(data) {
for(var i=0;i<data.length;i++) {
var obj = new Object();
obj.id = data[i].id;
obj.title = data[i].title;
obj.description = data[i].description;
obj.color = data[i].color;
obj.remindertime = $.fullCalendar.parseDate(data[i].remindertime);
obj.messagenotice = data[i].messagenotice;
obj.description = data[i].description;
obj.start = $.fullCalendar.parseDate(data[i].start);
obj.end = $.fullCalendar.parseDate(data[i].end);
$("#calendar").fullCalendar('renderEvent',obj,true);
}
}); //把从后台取出的数据进行封装以后在页面上以fullCalendar的方式进行显示
},
eventMouseover: function(event, jsEvent, view){
showDetail(event, jsEvent);
},
eventMouseout: function(event, jsEvent, view){
$('#tip').remove();
},
//日程点击：添加日程
dayClick: function(date, allDay, jsEvent, view) {
var obj =new Object();
art.dialog.open('newschedule.html',{
title: '添加日程',
lock: true,
width:300,
height:400,
fixed: true, //固定定位
//background: '#600', // 背景色
opacity: 0.6, // 透明度
// 在open()方法中，init会等待iframe加载完毕后执行
init: function () {
var iframe = this.iframe.contentWindow;
//var top = art.dialog.top;// 引用顶层页面window对象
var start = iframe.document.getElementById('form-start');
start.value = $.fullCalendar.formatDate(date,"yyyy-MM-dd HH:mm:ss");
},
okVal:'提交日程',
ok: function () {
var iframe = this.iframe.contentWindow;
if (!iframe.document.body) {
alert('iframe还没加载完毕呢');
return false;
}; var start = iframe.document.getElementById('form-start').value;
var end = iframe.document.getElementById('form-end').value;
var remindertime = iframe.document.getElementById('form-remindertime').value;
obj.title = iframe.document.getElementById('form-title').value;
obj.description = iframe.document.getElementById('form-description').value;
obj.start = $.fullCalendar.parseDate(start);
obj.end = $.fullCalendar.parseDate(end);
obj.color = iframe.document.getElementById('form-color').value;
if (obj.title== '') {
alert("标题不能为空");
return false;
}else if(start== '') {
alert("开始日期不能为空");
return false;
}else if(end == '') {
alert("结束日期不能为空");
return false;
}else if(iframe.document.getElementById('form-messagenotice').checked) {
if(remindertime == '') {
alert("短信提醒时间不能为空");
return false;
}
obj.messagenotice = 1;
obj.remindertime = $.fullCalendar.parseDate(remindertime);
}else {
obj.messagenotice = 0;
obj.remindertime = null;
} $.post("http://localhost:8080/pnote/schedule/addevents",{//把刚输入的日程计划信息传到后台，保存到数据库
title: obj.title,
start:start,
end:end,
description:obj.description,
remindertime:remindertime,
color:obj.color,
messagenotice:obj.messagenotice
},
function (data, textStatus){
obj.id = data[0].id;
}, "json"
);
$('#calendar').fullCalendar('renderEvent', obj); //核心的更新代码
$('#calendar').fullCalendar('unselect');
art.dialog.notice({
title: '笔记之家',
width: 150,// 必须指定一个像素宽度值或者百分比，否则浏览器窗口改变可能导致artDialog收缩
content: '日程已添加至后台！',
icon: 'face-smile',
time: 3
});
return true;
},
cancel: true
});
},
eventClick:function(calEvent, jsEvent, view){
art.dialog.open('newschedule.html', {
title: '更新日程',
lock: true,
width:300,
height:400,
//background: '#600', // 背景色
opacity: 0.6, // 透明度
// 在open()方法中，init会等待iframe加载完毕后执行
init: function () {
var iframe = this.iframe.contentWindow;
//var top = art.dialog.top;// 引用顶层页面window对象
iframe.document.getElementById('form-start').value = $.fullCalendar.formatDate(calEvent.start,"yyyy-MM-dd HH:mm:ss");
iframe.document.getElementById('form-end').value = $.fullCalendar.formatDate(calEvent.end,"yyyy-MM-dd HH:mm:ss");
iframe.document.getElementById('form-description').value = calEvent.description;
iframe.document.getElementById('form-title').value = calEvent.title;
if(calEvent.messagenotice == 1) {
iframe.document.getElementById('form-messagenotice').checked = true;
iframe.document.getElementById('form-remindertime').value = $.fullCalendar.formatDate(calEvent.remindertime,"yyyy-MM-dd HH:mm:ss");
iframe.document.getElementById('showtxt').style.display='block';
}else {
}
iframe.document.getElementById('form-color').value = calEvent.color;
},
okVal:'修改日程',
ok: function () {
var iframe = this.iframe.contentWindow;
if (!iframe.document.body) {
alert('iframe还没加载完毕呢')
return false;
}; var start = iframe.document.getElementById('form-start').value;
var end = iframe.document.getElementById('form-end').value;
var remindertime = iframe.document.getElementById('form-remindertime').value;
calEvent.title = iframe.document.getElementById('form-title').value;
calEvent.description = iframe.document.getElementById('form-description').value;
calEvent.start = $.fullCalendar.parseDate(start);
calEvent.end = $.fullCalendar.parseDate(end);
calEvent.color = iframe.document.getElementById('form-color').value;
if (calEvent.title== '') {
alert("标题不能为空");
return false;
}else if(start== '') {
alert("开始日期不能为空");
return false;
}else if(end == '') {
alert("结束日期不能为空");
return false;
}else if(iframe.document.getElementById('form-messagenotice').checked) {
if(remindertime == '') {
alert("短信提醒时间不能为空");
return false;
}
calEvent.messagenotice = 1;
calEvent.remindertime = $.fullCalendar.parseDate(remindertime);
}else {
calEvent.messagenotice = 0;
calEvent.remindertime = null;
}
$.post("http://localhost:8080/pnote/schedule/updateevents",{//把要更新的日程计划信息传到后台，保存到数据库
id:calEvent.id,
title: calEvent.title,
start:start,
end:end,
description:calEvent.description,
color:calEvent.color,
remindertime:remindertime,
messagenotice:calEvent.messagenotice
}
);
$('#calendar').fullCalendar('updateEvent', calEvent);
//弹出提示
art.dialog.notice({
title: '笔记之家',
width: 150,// 必须指定一个像素宽度值或者百分比，否则浏览器窗口改变可能导致artDialog收缩
content: '日程已更新！',
icon: 'face-smile',
time: 3
});
return true;
},
cancel: true,
//删除日程，保存到数据库
button: [{
name: '删除日程',
callback: function () {
//this.content('你同意了').time(2);
$.post("http://localhost:8080/pnote/schedule/deleteevents",{
id:calEvent.id
});
$('#calendar').fullCalendar('removeEvents',calEvent.id);
art.dialog.notice({
title: '笔记之家',
width: 150,// 必须指定一个像素宽度值或者百分比，否则浏览器窗口改变可能导致artDialog收缩
content: '日程已删除！',
icon: 'face-smile',
time: 3
});
return true;
}
}]
});
}
});
}); function showDetail(obj, e){
var str;
if(obj.messagenotice == 1) str = "短信提醒时间："+$.fullCalendar.formatDate(obj.remindertime,"yyyy-MM-dd HH:mm:ss");
else {str = "短信提醒未启动";}
var eInfo = '<div id="tip"><ul>';
eInfo += '<li class="clock">' + '开始：'+$.fullCalendar.formatDate(obj.start,"yyyy-MM-dd HH:mm:ss") +'</br>结束：'+$.fullCalendar.formatDate(obj.end,"yyyy-MM-dd HH:mm:ss")+ '</li>';
eInfo += '<li class="message">' +'日志：'+ obj.description + '<br/> </li>';
//eInfo += '<li>分类：' + obj.title + '</li>';
eInfo += '<li class="postmessage">' + str + '<br/> </li>';
eInfo += '</ul></div>';
$(eInfo).appendTo($('body'));
$('#tip').css({"opacity":"0.4", "display":"none", "left":(e.pageX + 20) + "px", "top":(e.pageY + 10) + "px"}).fadeTo(600, 0.9);
//鼠标移动效果
$('.fc-event-inner').mousemove(function(e){
$('#tip').css({'top': (e.pageY + 10), 'left': (e.pageX + 20)});
});
} </script>
<style type='text/css'> body {
margin-top: 10px;
text-align: center;
font-size: 13px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
} /********************************************** 鼠标悬停tip提示 ************************************************/
#tip{
position: absolute;
width: 250px;
max-width: 400px;
text-align: left;
padding: 4px;
border: #87CEEB solid 7px;
border-radius: 5px;
background: #00BFFF;
z-index: 1000;
behavior: url('/css/css3/pie.htc');
}
#tip ul{
margin: 0;
padding: 0;
}
#tip ul li{
font-family:'Microsoft YaHei', 微软雅黑, 'Microsoft JhengHei', 宋体;
font-size:15px;
list-style: none;
padding-left: 40px;
}
.clock{
/*line-height: 60px;*/
background: url('./fullcalendar/images/clock.png') no-repeat;
background-size:40px 40px;
}
.postmessage{
/*line-height: 60px;
font-size: 12px;*/
background: url('./fullcalendar/images/message.png') no-repeat;
background-size:40px 40px;
}
.message{
/*margin-top: 5px;*/
/*line-height: 60px;*/
background: url('./fullcalendar/images/text.png') no-repeat;
background-size:40px 40px;
}
</style>
</head>
<body>
<div id="container">
<div id='selectdate'></div>
<div id='calendar'></div>
</div>
</body>
</html>
最新文章
- 1JavaEE应用简介----青软S2SH(笔记)
- [翻译] LTE/LTE-Advanced for Mobile Broadband-10.4
- 要做linux运维工程师的朋友，必须要掌握以下几个工具才行 ...
- 结构体类型定义（C语言）
- 关于Memcache使用的工具类
- asp.net 2.0 Session丢失问题
- MySQL几种方法的数据库备份
- 使用Python对Excel进行读写操作
- Function与Object的关系
- MBR和GPT概要学习
- 机器学习基础环境的安装与使用（MAC版）
- Ubuntu 16.04安装Docker-CE
- mac安装navicat mysql破解版
- js抽红包分配
- Eclipse的maven项目一直无故报错
- haproxy acl访问限制IP
- 五、excel末尾补0和开头补0
- 重温SQL——行转列，列转行
- 删除标注关联仿dda命令DIMDISASSOCIATE
- 从父子组件的mounted钩子的同步执行与页面的异步渲染看nextTick的用法