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本身会极大的节省 ...
随机推荐
- 先装Net Framework 后 装 IIS的处理办法
先装IIS话,后面装Net Framework时候会自动注册 处理aspx和ashx等的处理扩展程序 先装Net Framework 后 装 IIS.扩展程序注册在命令:aspnet_regiis - ...
- MVC5移除不常用Nuget命令
---移除JQuery.* 和bootstartp Uninstall-Package bootstrap Uninstall-Package Microsoft.jQuery.Unobtrusive ...
- 无法从带有索引像素格式的图像创建graphics对象(转)
大家在用 .NET 做图片水印功能的时候, 很可能会遇到 “无法从带有索引像素格式的图像创建graphics对象”这个错误,对应的英文错误提示是“A Graphics object cannot be ...
- ORACLE控制文件一致性【weber出品】
一.首先控制文件有什么作用呢? 控制文件记录了如下信息:1.数据库的创建时间2.数据文件的位置3.日志文件的位置等作用是指导数据库 找到数据文件,日志文件并将数据库启动到 open 状态. 与其用文字 ...
- HTML解析利器 - HtmlAgilityPack
HtmlAgilityPack 是CodePlex 上的一个开源项目.它提供了标准的DOM API 和XPath 导航--即使 HTML 不是适当的格式! 使用HtmlAgilityPack操作HTM ...
- 后缀自动机/回文自动机/AC自动机/序列自动机----各种自动机(自冻鸡) 题目泛做
题目1 BZOJ 3676 APIO2014 回文串 算法讨论: cnt表示回文自动机上每个结点回文串出现的次数.这是回文自动机的定义考查题. #include <cstdlib> #in ...
- Cocos2d-x 3.x部署到安卓
一.前期准备 下载下列软件: Python2.7 (https://www.python.org/downloads/) Cocos2d-x 3.x (http://www.cocos2d-x.org ...
- 利用JS实现HTML TABLE的分页
有时候table的列数太长,不利于使用者查询,所以利用JS做了一个table的分页,以下为相关代码 一.JS代码 <script type="text/javascript" ...
- CSS3选择器小结
CSS3 选择器小结 一 通用选择器 1 *{}通配选择符(CSS2):适合所有元素对象. 2 E类型(HTML)选择符(CSS1):以文档语言对象类型DOM作为选择符. 3 E#myid是id ...
- java 编码转换
在网络中爬取到的数据,编码可能与当前编译器的编码不相同,而导致可能产生显示乱码的问题.那么如何将网络的编码,转换为当前编译器认可的编码(一般为UTF-8),就是个问题了. 主要使用了两个方法: Str ...