FullCalendar 的学习笔记（二）
下面是一个.NET webForm的具体列子
注意引用了artDialog 以及异步请求数据的json格式字符串
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link href='fullcalendar/fullcalendar.css' rel='stylesheet' />
<link href='fullcalendar/fullcalendar.print.css' rel='stylesheet' media='print' />
<script type="text/javascript" src='fullcalendar/lib/jquery-1.10.2.min.js'></script> <script type="text/javascript" src='fullcalendar/lib/jquery-ui.custom.min.js'></script>
<script type="text/javascript" src='fullcalendar/fullcalendar.min.js'></script>
<script type="text/javascript" src="artDialog/artDialog.source.js?skin=default"></script>
<script type="text/javascript" src="artDialog/plugins/iframeTools.source.js"></script>
<script src="urlParams.js" type ="text/javascript"></script> <script type="text/javascript"> var newdate;//定义一个时间
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear(); var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title', //不显示则为空
right: 'month,agendaWeek,agendaDay'
},
monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
today: ["今天"],
firstDay: 1,
buttonText: {
today: '今天',
month: '月',
week: '周',
day: '日'
},
editable: false,
timeFormat: 'HH:mm',
axisFormat: 'HH:mm',
viewDisplay: function(view) {
newdate=$.fullCalendar.formatDate(view.start,"yyyy-MM-dd HH:mm:ss"); }, events: function (start, end, callback) {
var t1=$.fullCalendar.formatDate(start, "yyyy-MM-dd hh:mm:ss")
var t2=$.fullCalendar.formatDate(end, "yyyy-MM-dd hh:mm:ss")
$.ajax({
type: "get",
async: false,
url: "GetDutyAction.ashx?tmp=" + (new Date()).valueOf(),
data: { start: t1, end: t2 },
success: function (data) {
var date = jQuery.parseJSON(data); //此处虽然allDay有值但是 由于是字符串false 而不是关键字false 默认显示整日
callback(date); <!-- 还有一种加载方式
obj=jQuery.parseJSON(data);
for(var i=0;i<obj.length;i++)
{
var newobj = new Object();
newobj.title=obj[i].title
....
$('#calendar').fullCalendar('renderEvent', newobj); //核心的更新代码
}
-->
} });
}, dayClick: function (date, allDay, jsEvent, view) { var obj = new Object();
art.dialog.open('DutyEdit.aspx', { //duty自由定义只需要设置需要返回值的一些控件
title: '添加值班',
lock: true,
width: 550,
height: 340,
fixed: true, //固定定位
opacity: 0.6, // 透明度
// 在open()方法中，init会等待iframe加载完毕后执行
init: function () {
var iframe = this.iframe.contentWindow;
var top = art.dialog.top;// 引用顶层页面window对象
if(date.getDate()==1 )
{
iframe.document.getElementById('tr_ld').style.display="";
}
var start = iframe.document.getElementById('txt_date');
start.value = $.fullCalendar.formatDate(date, "yyyy-MM-dd");
},
okVal: '提交值班',
ok: function () {
var iframe = this.iframe.contentWindow;
if (!iframe.document.body) {
alert('iframe还没加载完毕呢');
return false;
}; var amuser=iframe.document.getElementById('txt_AMUser').value; var starttime = iframe.document.getElementById('txt_date').value; $.ajax({
type: "get",
async: false,
url: "SetDutyAction.ashx",
data: { user:amuser,start:starttime,type:'0'},
success: function (data) {
obj=jQuery.parseJSON(data);
} });
//此处我是需要插入多条值班信息
if(obj.length>0)
{
for(var i=0;i<obj.length;i++)
{
$('#calendar').fullCalendar('renderEvent', obj[i]); //核心的更新代码
}
} $('#calendar').fullCalendar('unselect');
art.dialog({
title: '提醒',
width: 150,// 必须指定一个像素宽度值或者百分比，否则浏览器窗口改变可能导致artDialog收缩
content: '值班添加至后台！',
icon: 'face-smile',
time: 1
});
return true;
},
cancel: true
});
},
eventClick: function (calEvent, jsEvent, view) { art.dialog.open('DutyEdit.aspx', {
title: '更新日程',
lock: true,
width: 550,
height: 340,
//background: '#600', // 背景色
opacity: 0.6, // 透明度
// 在open()方法中，init会等待iframe加载完毕后执行
init: function () {
var iframe = this.iframe.contentWindow;
var top = art.dialog.top;// 引用顶层页面window对象
iframe.document.getElementById('txt_date').value=$.fullCalendar.formatDate(calEvent.start, "yyyy-MM-dd"); },
okVal: '修改值班',
ok: function () { var iframe = this.iframe.contentWindow;
if (!iframe.document.body) {
alert('iframe还没加载完毕呢')
return false;
}; calEvent.dutyuser=iframe.document.getElementById('txt_User').value ;
calEvent.title="上午值班："+calEvent.dutyuser;
calEvent.dutyUid=iframe.document.getElementById('Hidden1').value if (calEvent.dutyuser == '') {
alert("人员不能为空");
return false;
}
$.ajax({
type: "get",
async: false,
url: "SetDutyAction.ashx",
data: { id:calEvent.id,name:calEvent.dutyuser,userid:calEvent.dutyUid,type:'1'},
success: function (data) {
} });
$('#calendar').fullCalendar('updateEvent', calEvent);
////弹出提示
art.dialog({
title: '提醒',
width: 150,// 必须指定一个像素宽度值或者百分比，否则浏览器窗口改变可能导致artDialog收缩
content: '值班已更新！',
icon: 'face-smile',
time: 1
}); return true;
},
cancel: true,
//删除日程，保存到数据库
button: [{
name: '删除日程',
callback: function () {
$.ajax({
type: "get",
async: false,
url: "SetDutyAction.ashx", //.net ajax异步请求删除数据库数据
data: { id:calEvent.id,type:'2'},
success: function (data) {
} });
$('#calendar').fullCalendar('removeEvents', calEvent.id);
art.dialog({
title: '提醒',
width: 150,// 必须指定一个像素宽度值或者百分比，否则浏览器窗口改变可能导致artDialog收缩
content: '值班已删除！',
icon: 'face-smile',
time: 1
});
return true;
}
}]
});
}
});
}); </script>
<style type="text/css"> body {
margin-top: 40px auto;
text-align: center;
font-size: 14px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
} #calendar {
width: 900px;
margin: 0 auto;
} </style>
</head>
<body>
<form id="form1" runat="server">
<div ><span id="title" style="font-size:25px; font-weight:bolder;">值班表</span></div>
<div id='calendar'></div> </form>
</body>
</html>
DataSet ds = db.ExecuteDataSet(dbcom);
if (ds.Tables[].Rows.Count > )
{
DateTime start1 = DateTime.Parse(dr["StartDate"].ToString());
DateTime end1 = DateTime.Parse(dr["EndDate"].ToString());
result += "{\"id\":\"" + dr["ID"].ToString() + "\",\"title\":\"" + title + "\",\"dutyuser\":\"" + dr["DutyUser"].ToString() + "\",\"dutyUid\":\"" + dr["DutyUserID"].ToString() + "\",";
result += "\"start\":\"" + start1.ToString("yyyy-MM-dd hh:mm:ss") + "\",\"end\":\"" + end1.ToString("yyyy-MM-dd hh:mm:ss") + "\",\"status\":\"" + dr["Status"].ToString() + "\",\"allDay\":\"false\"" + color + "},";
}
result = result.TrimEnd(',') + "]";
}
FullCalendar 的学习笔记（二）的更多相关文章
- WPF的Binding学习笔记(二)
原文: http://www.cnblogs.com/pasoraku/archive/2012/10/25/2738428.htmlWPF的Binding学习笔记(二) 上次学了点点Binding的 ...
- AJax 学习笔记二(onreadystatechange的作用)
AJax 学习笔记二(onreadystatechange的作用) 当发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态XMLHttpRequest对象提供了on ...
- [Firefly引擎][学习笔记二][已完结]卡牌游戏开发模型的设计
源地址:http://bbs.9miao.com/thread-44603-1-1.html 在此补充一下Socket的验证机制:socket登陆验证.会采用session会话超时的机制做心跳接口验证 ...
- JMX学习笔记(二)-Notification
Notification通知,也可理解为消息,有通知,必然有发送通知的广播,JMX这里采用了一种订阅的方式,类似于观察者模式,注册一个观察者到广播里,当有通知时,广播通过调用观察者,逐一通知. 这里写 ...
- java之jvm学习笔记二(类装载器的体系结构)
java的class只在需要的时候才内转载入内存,并由java虚拟机的执行引擎来执行,而执行引擎从总的来说主要的执行方式分为四种, 第一种,一次性解释代码,也就是当字节码转载到内存后,每次需要都会重新 ...
- Java IO学习笔记二
Java IO学习笔记二 流的概念 在程序中所有的数据都是以流的方式进行传输或保存的,程序需要数据的时候要使用输入流读取数据,而当程序需要将一些数据保存起来的时候,就要使用输出流完成. 程序中的输入输 ...
- 《SQL必知必会》学习笔记二)
<SQL必知必会>学习笔记(二) 咱们接着上一篇的内容继续.这一篇主要回顾子查询,联合查询,复制表这三类内容. 上一部分基本上都是简单的Select查询,即从单个数据库表中检索数据的单条语 ...
- NumPy学习笔记 二
NumPy学习笔记 二 <NumPy学习笔记>系列将记录学习NumPy过程中的动手笔记,前期的参考书是<Python数据分析基础教程 NumPy学习指南>第二版.<数学分 ...
- Learning ROS for Robotics Programming Second Edition学习笔记(二) indigo tools
中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS for Robotics Pr ...
- Redis学习笔记二 （BitMap算法分析与BitCount语法）
Redis学习笔记二 一.BitMap是什么 就是通过一个bit位来表示某个元素对应的值或者状态,其中的key就是对应元素本身.我们知道8个bit可以组成一个Byte,所以bitmap本身会极大的节省 ...
随机推荐
- SuperSocket学习笔记（二）
上一篇博客SuperSocket学习笔记(一)说明了怎么快速搭建一个服务器端,这篇文章我想深挖一下SuperSocket 1. 每一个客户端连接到服务器端时,服务器端会将客户端的信息保存到一个Sess ...
- 自定义HttpHandler
1.创建自定义类型 2.继承IHttpHandler接口,并实现 3.配置Web.Config文件,注册类型 4.访问 public class QuickMsgSatisticsHandler : ...
- SqlDbType与DbType这间的转换关系
SqlDbType => DbType SqlDbType.BigInt DbType.Int64 SqlDbType.Binary DbType.Binary SqlDbType.Bit Db ...
- Js得到radiobuttonlist选中值，设置默认值
JS 代码 var vRbtid=document.getElementById("rbtid"); //得到所有radio var vRbtidList= v ...
- sqlserver2005重新安装(安装汇编错误,安装程序无法连接到数据库服务进行服务配置)
2014-01-09 16:41 1687人阅读 评论(1) 收藏 举报 分类: 数据库(1) 版权声明:本文为博主原创文章,未经博主允许不得转载. sqlserver2005重新安装(安装汇编错误, ...
- Oracle11g R2学习系列 之九 PL/SQL语言
这是个重头戏,如果精通了PL/SQL,毫不夸张的说明精通了Oracle了.PL/SQL由以下三个部分组成(Definition,Manipulation,Control): DDL:数据定义语言,Cr ...
- Ubuntu 修改 Apache2 用户组 方法
检查/etc/apache2/envvars文件,发现其中需要使用/etc/apache2/envvars文件中的以下几个环境变量 export APACHE_RUN_USER=www-data ex ...
- 1169 二叉树遍历（XCOJ DFS）
给出一棵二叉树的中序与后序排列.求出它的先序排列.(约定树结点用不同的大写字母表示,长度≤8). 样例输入 BADC BDCA 样例输出 ABCD #include <iostream> ...
- mysql 5.7 内存使用监控
5.7 中的performance_schema 已经有能力监控mysql 的内存使用情况了,对于这一点也是要通过instrument 来实现的,由于内存这一块没有对应的consumer 所以只要 配 ...
- SGU 294 He's Circles
题意:一个项链有n个珠子,每个珠子为黑色或白色.问有多少种不同的项链? 注意,n的数量十分大,因此,我们枚举i(1<=i<=n),令L=n/i,求出L的欧拉函数,则这些数和L互质,因此gc ...