js/web 日程管理 插件
2016-04-21 13:37
661 查看
fullcalendar是一款jQuery日程管理控件，提供了丰富的属性设置和方法调用，官网下载地址http://fullcalendar.io/download，目前最新版本是2.3.2。
只要调用$('#calendar').fullcalendar(options)即可初始化，初始化配置中events、eventSources、select和eventClick是必须设置项。
events和eventSources是数据源配置项，存储数组对象，可以是Arrays/Functions/URLs，点击详情。如
[javascript] view
plain copy
$('#calendar').fullCalendar({
events: {
url: 'http://<数据源路径>',
type: 'post'
}
});
eventSources和events类似，不过eventSources用于多个数据源的情况，是events数组，点击详情。如
[javascript] view
plain copy
$('#calendar').fullCalendar({
eventSources: [
'/feed1.php',
'/feed2.php'
]
});
select是时间段选择事件，当选择某个时间段时触发，用于新建日程，点击详情。
eventClick是日程点击事件，当某个日程被点击是触发，用户查看或者更新日程，点击详情。
[html] view
plain copy
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>日程管理</title>
<script src='../lib/jquery/jquery-1.11.2.min.js'></script>
<!--
日期控件
http://xdsoft.net/jqplugins/datetimepicker/
-->
<link href='../lib/datetimepicker/jquery.datetimepicker.css' rel='stylesheet' type="text/css" />
<script src='../lib/datetimepicker/jquery.datetimepicker.js'></script>
<!-- 日程管理样式及JS -->
<link href='../lib/fullcalendar/fullcalendar.css' rel='stylesheet' type="text/css" />
<script src='../lib/fullcalendar/lib/moment.min.js'></script>
<script src='../lib/fullcalendar/fullcalendar.min.js'></script>
<script src='../lib/fullcalendar/lang/zh-cn.js'></script>
<!--
rhui
http://git.oschina.net/accountwcx/rhui
-->
<link href='../lib/rhui/css/rhui.css' rel='stylesheet' type="text/css" />
<script src='../lib/rhui/rhui-all.js'></script>
<style type="text/css">
#mycalendar{
display: block;
position: relative;
width: 900px;
margin: 15px auto;
padding: 0;
}
.fc button{
height: 27px;
}
.fc-center>h2{
font-size: 20px;
line-height: 27px;
}
.fc-unthemed .fc-divider, .fc-unthemed .fc-popover, .fc-unthemed .fc-row, .fc-unthemed tbody, .fc-unthemed td, .fc-unthemed th, .fc-unthemed thead{
border-color: #bed5f3;
}
.fc-unthemed .fc-divider, .fc-unthemed .fc-popover .fc-header,.fc-widget-header,.fc-axis{
background-color: #e5effe;
}
.fc th, .fc td{
font-size: 14px;
line-height: 25px;
}
.rhui-field{
width: 250px;
margin-bottom: 10px;
}
.field-label{
width: 70px;
line-height: 23px;
vertical-align: top;
}
</style>
</head>
<body>
<div id="mycalendar"></div>
<!-- 新建日程窗口 -->
<div class="rhui-window" id="addCalendarWin" style="display:none;">
<div class="rhui-panel-body">
<table style="margin-left:25px;">
<tr>
<td class="field-label">日程标题：</td>
<td><input class="rhui-field" name="title" type="text" /></td>
</tr>
<tr>
<td class="field-label">日程内容：</td>
<td><textarea class="rhui-field" name="content" style="height:62px;"></textarea></td>
</tr>
<tr>
<td class="field-label">开始时间：</td>
<td><input class="rhui-field" name="start" type="text"/></td>
</tr>
<tr>
<td class="field-label">结束时间：</td>
<td><input class="rhui-field" name="end" type="text"/></td>
</tr>
</table>
</div>
</div>
<!-- end 新建日程窗口 -->
<!-- 修改日程窗口 -->
<div class="rhui-window" id="editCalendarWin" style="display:none;">
<div class="rhui-panel-body">
<!-- 日程id -->
<input type="hidden" name="id" />
<table style="margin-left:25px;">
<tr>
<td class="field-label">日程标题：</td>
<td><input class="rhui-field" name="title" type="text" /></td>
</tr>
<tr>
<td class="field-label">日程内容：</td>
<td><textarea class="rhui-field" name="content" style="height:62px;"></textarea></td>
</tr>
<tr>
<td class="field-label">开始时间：</td>
<td><input class="rhui-field" name="start" type="text"/></td>
</tr>
<tr>
<td class="field-label">结束时间：</td>
<td><input class="rhui-field" name="end" type="text"/></td>
</tr>
</table>
</div>
</div>
<!-- end 修改日程窗口 -->
<script type="text/javascript">
$(function(){
//初始化FullCalendar
$('#mycalendar').fullCalendar({
//日历初始化默认视图，可选agendaWeek、agendaDay、month
defaultView: 'agendaWeek',
/*
设置日历头部信息
头部信息包括left、center、right三个位置，分别对应头部左边、头部中间和头部右边。
头部信息每个位置可以对应以下配置：
title: 显示当前月份/周/日信息
prev: 用于切换到上一月/周/日视图的按钮
next: 用于切换到下一月/周/日视图的按钮
prevYear: 用于切换到上一年视图的按钮
nextYear: 用于切换到下一年视图的按钮
如果不想显示头部信息，可以设置header为false
*/
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
//设置日历头部的日期格式
titleFormat: {
month: 'YYYY年MM月',
week: 'YYYY年MM月DD日',
day: 'YYYY年MM月DD日 dddd'
},
//日历高度
height: $(window).height() - 40,
//显示周末，设为false则不显示周六和周日。
weekends: true,
/*
在月视图里显示周的模式，因为每月周数可能不同，所以月视图高度不一定。
fixed：固定显示6周高，日历高度保持不变
liquid：不固定周数，高度随周数变化
variable：不固定周数，但高度固定
*/
weekMode: 'liquid',
//日历上显示全天的文本
allDayText: '全天',
//允许用户通过单击或拖动选择日历中的对象，包括天和时间。
selectable: true,
//当点击或拖动选择时间时，显示默认加载的提示信息，该属性只在周/天视图里可用。
selectHelper: true,
//当点击页面日历以外的位置时，自动取消当前的选中状态。
unselectAuto: true,
/*
events: {
url: '',
type: 'post'
},
*/
/*
添加日程事件
start: 被选中区域的开始时间
end: 被选中区域的结束时间
jsEvent: jascript对象
view: 当前视图对象
*/
select: function(start, end, jsEvent, view){
//添加日程事件
var $win = $('#addCalendarWin');
$win.find('input[name="start"]').val(start.format('YYYY-MM-DD HH:mm'));
$win.find('input[name="end"]').val(end.format('YYYY-MM-DD HH:mm'));
$win.rhui('window').show();
},
/*
修改日程事件
当点击日历中的某一日程时，触发此事件
data: 日程信息
jsEvent: jascript对象
view: 当前视图对象
*/
eventClick: function(data, jsEvent, view){
//修改日程事件
var $win = $('#editCalendarWin');
$win.find('input[name="id"]').val(data.id);
$win.find('input[name="title"]').val(data.title);
$win.find('textarea[name="content"]').val(data.cntent);
$win.find('input[name="start"]').val(data.start.format('YYYY-MM-DD HH:mm'));
$win.find('input[name="end"]').val(data.end.format('YYYY-MM-DD HH:mm'));
$win.rhui('window').show();
}
});
//初始化新建日程窗口
(function(){
var $win = $('#addCalendarWin');
//初始化日期控件
$win.find('input[name="start"]').datetimepicker({format: 'Y-m-d H:i'});
$win.find('input[name="end"]').datetimepicker({format: 'Y-m-d H:i'});
$win.rhui('window', {
title: '新建日程',
width: 400,
height: 265,
buttons: [{
text: '确定',
cls: 'rhui-btn-primary',
click: function(toolbar, win){
alert('日程已新建');
}
},{
text: '取消',
click: function(toolbar, win){
win.hide();
}
}]
}).hide();
})();
//初始化修改日程窗口
(function(){
var $win = $('#editCalendarWin');
//初始化日期控件
$win.find('input[name="start"]').datetimepicker({format: 'Y-m-d H:i'});
$win.find('input[name="end"]').datetimepicker({format: 'Y-m-d H:i'});
$win.rhui('window', {
title: '修改日程',
width: 400,
height: 265,
buttons: [{
text: '确定',
cls: 'rhui-btn-primary',
click: function(toolbar, win){
alert('日程已修改');
}
},{
text: '删除',
cls: 'rhui-btn-danger',
click: function(toolbar, win){
alert('日程已删除');
}
},{
text: '取消',
click: function(toolbar, win){
win.hide();
}
}]
}).hide();
})();
});
</script>
</body>
</html>
只要调用$('#calendar').fullcalendar(options)即可初始化，初始化配置中events、eventSources、select和eventClick是必须设置项。
events和eventSources是数据源配置项，存储数组对象，可以是Arrays/Functions/URLs，点击详情。如
[javascript] view
plain copy
$('#calendar').fullCalendar({
events: {
url: 'http://<数据源路径>',
type: 'post'
}
});
eventSources和events类似，不过eventSources用于多个数据源的情况，是events数组，点击详情。如
[javascript] view
plain copy
$('#calendar').fullCalendar({
eventSources: [
'/feed1.php',
'/feed2.php'
]
});
select是时间段选择事件，当选择某个时间段时触发，用于新建日程，点击详情。
eventClick是日程点击事件，当某个日程被点击是触发，用户查看或者更新日程，点击详情。
[html] view
plain copy
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>日程管理</title>
<script src='../lib/jquery/jquery-1.11.2.min.js'></script>
<!--
日期控件
http://xdsoft.net/jqplugins/datetimepicker/
-->
<link href='../lib/datetimepicker/jquery.datetimepicker.css' rel='stylesheet' type="text/css" />
<script src='../lib/datetimepicker/jquery.datetimepicker.js'></script>
<!-- 日程管理样式及JS -->
<link href='../lib/fullcalendar/fullcalendar.css' rel='stylesheet' type="text/css" />
<script src='../lib/fullcalendar/lib/moment.min.js'></script>
<script src='../lib/fullcalendar/fullcalendar.min.js'></script>
<script src='../lib/fullcalendar/lang/zh-cn.js'></script>
<!--
rhui
http://git.oschina.net/accountwcx/rhui
-->
<link href='../lib/rhui/css/rhui.css' rel='stylesheet' type="text/css" />
<script src='../lib/rhui/rhui-all.js'></script>
<style type="text/css">
#mycalendar{
display: block;
position: relative;
width: 900px;
margin: 15px auto;
padding: 0;
}
.fc button{
height: 27px;
}
.fc-center>h2{
font-size: 20px;
line-height: 27px;
}
.fc-unthemed .fc-divider, .fc-unthemed .fc-popover, .fc-unthemed .fc-row, .fc-unthemed tbody, .fc-unthemed td, .fc-unthemed th, .fc-unthemed thead{
border-color: #bed5f3;
}
.fc-unthemed .fc-divider, .fc-unthemed .fc-popover .fc-header,.fc-widget-header,.fc-axis{
background-color: #e5effe;
}
.fc th, .fc td{
font-size: 14px;
line-height: 25px;
}
.rhui-field{
width: 250px;
margin-bottom: 10px;
}
.field-label{
width: 70px;
line-height: 23px;
vertical-align: top;
}
</style>
</head>
<body>
<div id="mycalendar"></div>
<!-- 新建日程窗口 -->
<div class="rhui-window" id="addCalendarWin" style="display:none;">
<div class="rhui-panel-body">
<table style="margin-left:25px;">
<tr>
<td class="field-label">日程标题：</td>
<td><input class="rhui-field" name="title" type="text" /></td>
</tr>
<tr>
<td class="field-label">日程内容：</td>
<td><textarea class="rhui-field" name="content" style="height:62px;"></textarea></td>
</tr>
<tr>
<td class="field-label">开始时间：</td>
<td><input class="rhui-field" name="start" type="text"/></td>
</tr>
<tr>
<td class="field-label">结束时间：</td>
<td><input class="rhui-field" name="end" type="text"/></td>
</tr>
</table>
</div>
</div>
<!-- end 新建日程窗口 -->
<!-- 修改日程窗口 -->
<div class="rhui-window" id="editCalendarWin" style="display:none;">
<div class="rhui-panel-body">
<!-- 日程id -->
<input type="hidden" name="id" />
<table style="margin-left:25px;">
<tr>
<td class="field-label">日程标题：</td>
<td><input class="rhui-field" name="title" type="text" /></td>
</tr>
<tr>
<td class="field-label">日程内容：</td>
<td><textarea class="rhui-field" name="content" style="height:62px;"></textarea></td>
</tr>
<tr>
<td class="field-label">开始时间：</td>
<td><input class="rhui-field" name="start" type="text"/></td>
</tr>
<tr>
<td class="field-label">结束时间：</td>
<td><input class="rhui-field" name="end" type="text"/></td>
</tr>
</table>
</div>
</div>
<!-- end 修改日程窗口 -->
<script type="text/javascript">
$(function(){
//初始化FullCalendar
$('#mycalendar').fullCalendar({
//日历初始化默认视图，可选agendaWeek、agendaDay、month
defaultView: 'agendaWeek',
/*
设置日历头部信息
头部信息包括left、center、right三个位置，分别对应头部左边、头部中间和头部右边。
头部信息每个位置可以对应以下配置：
title: 显示当前月份/周/日信息
prev: 用于切换到上一月/周/日视图的按钮
next: 用于切换到下一月/周/日视图的按钮
prevYear: 用于切换到上一年视图的按钮
nextYear: 用于切换到下一年视图的按钮
如果不想显示头部信息，可以设置header为false
*/
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
//设置日历头部的日期格式
titleFormat: {
month: 'YYYY年MM月',
week: 'YYYY年MM月DD日',
day: 'YYYY年MM月DD日 dddd'
},
//日历高度
height: $(window).height() - 40,
//显示周末，设为false则不显示周六和周日。
weekends: true,
/*
在月视图里显示周的模式，因为每月周数可能不同，所以月视图高度不一定。
fixed：固定显示6周高，日历高度保持不变
liquid：不固定周数，高度随周数变化
variable：不固定周数，但高度固定
*/
weekMode: 'liquid',
//日历上显示全天的文本
allDayText: '全天',
//允许用户通过单击或拖动选择日历中的对象，包括天和时间。
selectable: true,
//当点击或拖动选择时间时，显示默认加载的提示信息，该属性只在周/天视图里可用。
selectHelper: true,
//当点击页面日历以外的位置时，自动取消当前的选中状态。
unselectAuto: true,
/*
events: {
url: '',
type: 'post'
},
*/
/*
添加日程事件
start: 被选中区域的开始时间
end: 被选中区域的结束时间
jsEvent: jascript对象
view: 当前视图对象
*/
select: function(start, end, jsEvent, view){
//添加日程事件
var $win = $('#addCalendarWin');
$win.find('input[name="start"]').val(start.format('YYYY-MM-DD HH:mm'));
$win.find('input[name="end"]').val(end.format('YYYY-MM-DD HH:mm'));
$win.rhui('window').show();
},
/*
修改日程事件
当点击日历中的某一日程时，触发此事件
data: 日程信息
jsEvent: jascript对象
view: 当前视图对象
*/
eventClick: function(data, jsEvent, view){
//修改日程事件
var $win = $('#editCalendarWin');
$win.find('input[name="id"]').val(data.id);
$win.find('input[name="title"]').val(data.title);
$win.find('textarea[name="content"]').val(data.cntent);
$win.find('input[name="start"]').val(data.start.format('YYYY-MM-DD HH:mm'));
$win.find('input[name="end"]').val(data.end.format('YYYY-MM-DD HH:mm'));
$win.rhui('window').show();
}
});
//初始化新建日程窗口
(function(){
var $win = $('#addCalendarWin');
//初始化日期控件
$win.find('input[name="start"]').datetimepicker({format: 'Y-m-d H:i'});
$win.find('input[name="end"]').datetimepicker({format: 'Y-m-d H:i'});
$win.rhui('window', {
title: '新建日程',
width: 400,
height: 265,
buttons: [{
text: '确定',
cls: 'rhui-btn-primary',
click: function(toolbar, win){
alert('日程已新建');
}
},{
text: '取消',
click: function(toolbar, win){
win.hide();
}
}]
}).hide();
})();
//初始化修改日程窗口
(function(){
var $win = $('#editCalendarWin');
//初始化日期控件
$win.find('input[name="start"]').datetimepicker({format: 'Y-m-d H:i'});
$win.find('input[name="end"]').datetimepicker({format: 'Y-m-d H:i'});
$win.rhui('window', {
title: '修改日程',
width: 400,
height: 265,
buttons: [{
text: '确定',
cls: 'rhui-btn-primary',
click: function(toolbar, win){
alert('日程已修改');
}
},{
text: '删除',
cls: 'rhui-btn-danger',
click: function(toolbar, win){
alert('日程已删除');
}
},{
text: '取消',
click: function(toolbar, win){
win.hide();
}
}]
}).hide();
})();
});
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- swiperLeft/swiperRight以及js长按事件
- JavaScript 对象
- 60行JS实现俄罗斯方块
- javascript深入理解js闭包
- javascript textContent与innerText的异同分析
- JS HTML DOM
- js 控制frame的元素
- (礼拜四log)点击某元素外的时候，该元素隐藏的办法
- javaScript学习思维导向图
- moment.js
- js数组基本知识
- Angular.js中使用$watch监听模型变化
- 关于js的函数重载的问题
- javascript与浏览器学习（一）
- JS实现简单面向对象的颜色选择器实例
- javascript中字符和ascii互换
- jsp中四种范围变量
- javascript常见数字进制转换实例分析
- 返回JSON出现Infinite recursion无限循环错误的解决
- SignalR的Javascript客户端API使用方式整理