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本身会极大的节省 ...
随机推荐
- SQL Server链接MySQL实践
最近在访问多数据库的时候进行了SQLServer链接MySQL数据的实践,现总结如下: 一. 安装mysql-connector-odbc驱动: 1. 在SQL Server服务器的机器上安装mys ...
- UIScrollView的属性
属性 作用 CGPoint contentOffSet 监控目前滚动的位置 CGSize contentSize 滚动范围的大小 UIEdgeInsets contentInset 视图在scroll ...
- gitosis随记
0.创建git用户 useradd -m git passwd git 1.安装脚本工具(gitosis依赖python) apt-get install python-setuptools 2.gi ...
- HDU 5903 - Square Distance [ DP ] ( BestCoder Round #87 1002 )
题意: 给一个字符串t ,求与这个序列刚好有m个位置字符不同的由两个相同的串拼接起来的字符串 s, 要求字典序最小的答案 分析: 把字符串折半,分成0 - n/2-1 和 n/2 - n-1 d ...
- Opencv 函数
1.cvLoadImage:将图像文件加载至内存: 2.cvNamedWindow:在屏幕上创建一个窗口: 3.cvShowImage:在一个已创建好的窗口中显示图像: 4.cvWaitKey:使程序 ...
- c#中serialPort1_DataReceived串口接收事件处理
1.缓冲区不定字节读取(波特率很高也没问题) //Thread.sleep(1000);//处理事件这块可以加上延时确保不定数的数据可以全部收到缓冲后,才去读缓冲内容--单位:毫秒 byte[] da ...
- CSS样式总结
CSS: Cascading Style Sheet,层叠样式表 Css由三部分组成:选择符.样式属性.值: 基本语法:选择符 {样式属性:值:样式属性:值.....} 一,选择器 常用的选择器有:标 ...
- PHP接收JSON格式的数据
在API服务中,目前流行采用json形式来交互. 给前端调用的接口输出Json数据,这个比较简单,只需要组织好数据,用json_encode($array) 转化一下,前端就得到json格式的数据. ...
- Java之集合类
出处:http://blog.csdn.net/zhangerqing 一.集合类简介 数组是很常用的一种的数据结构,我们用它可以满足很多的功能,但是,有时我们会遇到如下这样的问题: 1.我们需要该容 ...
- VIJOS 1052贾老二算算术 (高斯消元)
描述 贾老二是个品学兼优的好学生,但由于智商问题,算术学得不是很好,尤其是在解方程这个方面.虽然他解决 2x=2 这样的方程游刃有余,但是对于 {x+y=3 x-y=1} 这样的方程组就束手无策了.于 ...