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本身会极大的节省 ...
随机推荐
- ORacle 复制表
create table r_register_company as select companyid,companyname,from grdata.r_register_company inser ...
- Oracle序列简单应用
/* --指定cache的值 如果指定CACHE值 oracle就可以预先在内存里面放置一些sequence 这样存取会快些 cache里面 的取完 oracle自动再取一 组到 cache 使用ca ...
- JSP 实现 之 调用java方法实现MySQL数据库备份和恢复
package cn.qm.db; import java.io.BufferedReader; import java.io.DataInputStream; import java.io.IOEx ...
- Contains Duplicate,Contains Duplicate II,Contains Duplicate III
217. Contains Duplicate Given an array of integers, find if the array contains any duplicates. Your ...
- C++中的int和short int
#include <iostream> #include <string> #include <cstring> //strcpy #include <cst ...
- CString与char *互转总结
1 前言 今天在网上看论坛,发现大家对CString与Char *互转各说一词,其实我发现提问者所说的情况与回答问题的人完全不是同一情况,这里做一总结. 首先大家得清楚一件事,一般在网上提出问题的人大 ...
- 自定义滚动条 niceScroll 配置参数
配置参数 当调用“niceScroll”你可以传递一些参数来定制视觉方面: cursorcolor - 十六进制改变光标颜色,默认值是“#000000” cursoropacitymin - 改变不透 ...
- HTML5实现“摇一摇”效果
在HTML5中,DeviceOrientation特性所提供的DeviceMotion事件封装了设备的运动传感器时间,通过改时间可以获取设备的运动状态.加速度等数据(另还有deviceOrientat ...
- android与PC互传文件 adb push
1- df 命令查看文件系统的磁盘空间占用情况 shell@android:/ # adb shell df 2- 找到data文件夹, 上传 adb push /data/Sogou Input_ ...
- meta 属性
几乎所有的网页里,我们可以看到类似下面这段的html代码:<head><meta http-equiv="content-Type" content=" ...