Web日程管理FullCalendar
fullcalendar是一款jQuery日程管理控件，提供了丰富的属性设置和方法调用，官网下载地址http://fullcalendar.io/download，眼下最新版本号是2.3.2。
仅仅要调用$('#calendar').fullcalendar(options)就可以初始化，初始化配置中events、eventSources、select和eventClick是必须设置项。
events和eventSources是数据源配置项，存储数组对象，能够是Arrays/Functions/URLs，点击详情。如
$('#calendar').fullCalendar({
events: {
url: 'http://<数据源路径>',
type: 'post'
}
});
eventSources和events类似。只是eventSources用于多个数据源的情况，是events数组。点击详情。
如
$('#calendar').fullCalendar({
eventSources: [
'/feed1.php',
'/feed2.php'
]
});
select是时间段选择事件。当选择某个时间段时触发。用于新建日程。点击详情。
eventClick是日程点击事件，当某个日程被点击是触发，用户查看或者更新日程，点击详情。
<!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: 用于切换到上一月/周/日视图的button
next: 用于切换到下一月/周/日视图的button
prevYear: 用于切换到上一年视图的button
nextYear: 用于切换到下一年视图的button
假设不想显示头部信息。能够设置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>
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">
Web日程管理FullCalendar的更多相关文章
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（86）-日程管理-fullcalendar插件用法
前言 本文分享fullcalendar用法,最后面提供代码下载 说到日程管理,基于JQuery的插件FullCalendar当之无愧,完整的API稳定和调用方式,非常易于扩展!可以用于系统的个人历程管 ...
- 日程管理 FullCalendar
日程管理,采用著名组件FullCalendar日历插件实现FullCalendar提供了丰富的属性设置和方法调用,开发者可以根据FullCalendar提供的API快速完成一个日历日程的开发1.实现按 ...
- fullcalendar插件日程管理
日程管理-fullcalendar插件用法 前言 本文分享fullcalendar用法,最后面提供代码下载 说到日程管理,基于JQuery的插件FullCalendar当之无愧,完整的API稳定和 ...
- jquery.fullCalendar官方文档翻译(一款小巧好用的日程管理日历, 可集成Google Calendar)
1. 使用方式, 引入相关js, css后, $(‘#div_name’).fullCalendar({//options}); 接受的是一个option对象 2. 普通属性 2.1. year, ...
- RDIFramework.NET V3.3 Web版新增日程管理功能模块
功能描述 在RDIFramework.NET V3.3 Web版本我们新增了日程管理.基于月.周.日的日历视图,把安排到每一天的具体时间点,让每一天的时间都充分利用:甚至您也可以把个人非工作事项也安排 ...
- FullCalendar（日程管理控件）
(以下是我学习FullCalendar控件时,网络上收集的一些资料) jQuery.fullCalendar官方网址: http://arshaw.com/fullcalendar/ http://a ...
- 日程管理控件 glDatePicker
之前接触过一款日程管理控件,叫 FullCalendar,功能很强大,会列出每天的事项,可选择编辑并且可以定制自己的日历,然而,有时候,我们的网页上只需要一个简单的日历,迷你但实用,有日程安排的日期高 ...
- [Asp.net]Calendar+JqueryUi实现日程管理（右键菜单，添加，编辑，删除，源码）
引言 出差终于回来了,这篇文章算是这个月的博客的开篇吧. 上篇文章:[Asp.net]Calendar+JqueryUi实现日程管理——添加日程 上篇文章主要贴了一些该项目的界面,这里面,将主要代码也 ...
- 表格搞定 Asp.net Web 状态管理
最近在网上搜罗了 ASP.NET WEB 状态管理方面的一些内容,终于把这些内容整合总结了一下. 1. 希望自己通过整理,能够掌握一些,为自己投资. 2. 以便自己忘记,又要浪费时间搜罗. 3. 希望 ...
随机推荐
- jQuery判断文本框是否为空
1.引用jQuery库 <script src="/static/js/jquery_v1.6.1.js" type="text/javascript"& ...
- pojo和JavaBean的区别
javabean可以处理业务,pojo不可以. pojo就是get 和set 例如: Student{ id; name; get();... set();...} javabean可以实现业务逻辑 ...
- myisam和innodb区别
InnoDB MyIsam 事务 支持 不支持 锁 行锁 表锁 索引 B+树,数据和索引在一个文件中,必须有主键,如果不指定,会自动生成一个隐藏字段作 ...
- 阿里云 centos vim 显示中文 乱码
开始以为是vim 设置编码的问题 :网上搜 改 .vimrc 无效!!! 后转战 是不是系统里面没有中文字体 1.先从你本机 C:\Windows\Fonts 拷贝或者网络上下载你想要安装的 ...
- Android 中文 API （29） —— CompoundButton
前言 本章内容是android.widget.CompoundButton,翻译来自德罗德,再次感谢德罗德 !期待你一起参与Android API 的中文翻译,联系我over140@gmail.com ...
- C#执行oracle返回游标类型的存储过程
存储过程代码为: create or replace procedure proc_test(pCursor OUT pak_pub.ut_cursor) AS begin -- 使用游标 open ...
- 如何将BarTender内容锁定不让改动
条码标签代表的是产品的特性等,具有相当的精确性,所以需要保证它的正确性.而使用BarTender软件,可以帮助小伙伴将设计的条码标签内容锁定,保护它而不被人改动.下面,小编就教教大家如何实现BarTe ...
- Java中权限修饰符public、private、protected和default的区别
1.public 可以修饰类.成员变量和成员函数,没有任何限制,同一个包中,或者不同包中的类都可以自由访问 2.private 可以修饰成员变量和成员函数,只能在本类中使用 3.default (不写 ...
- sql restore mode
refer : https://msdn.microsoft.com/en-us/library/ms189272.aspx SELECT name, recovery_model_desc FROM ...
- Unity 网络斗地主 牌的一些算法
Unity 网络斗地主 牌的一些算法 在这儿说一下,我的项目是用svn的方式,上传在https://v2.svnspot.com/18666451713.doudizhu这个svn上,大家可以下载T ...