1.将wdCalendar文件夹考入项目中

2.在页面中添加引用,见3中head标签中定义

3.配置xgCalendar,两段代码放在一起就是完整的页面

body>
<div>
<div></div>
<div id="calhead" style="padding-left: 1px; padding-right: 1px;">
<div class="cHead">
<div class="ftitle">日历控件</div>
<div id="loadingpannel" class="ptogtitle loadicon" style="display: none;">加载数据中...</div>
<div id="errorpannel" class="ptogtitle loaderror" style="display: none;">很抱歉,无法加载数据,请稍后再试</div>
</div>
<div id="caltoolbar" class="ctoolbar">
<div id="faddbtn" class="fbutton">
<%--<div> *******************此处可以去掉注释
<span title='Click to Create New Event' class="addcal">新增
</span>
</div>--%>
</div>
<div class="btnseparator"></div>
<div id="showtodaybtn" class="fbutton">
<div>
<span title='Click to back to today ' class="showtoday">Today</span>
</div>
</div>
<div class="btnseparator"></div> <div id="showdaybtn" class="fbutton">
<div><span title='Day' class="showdayview">天</span></div>
</div>
<div id="showweekbtn" class="fbutton fcurrent">
<div><span title='Week' class="showweekview">周</span></div>
</div>
<div id="showmonthbtn" class="fbutton">
<div><span title='Month' class="showmonthview">月</span></div> </div>
<div class="btnseparator"></div>
<div id="showreflashbtn" class="fbutton">
<div><span title='Refresh view' class="showdayflash">刷新</span></div>
</div>
<div class="btnseparator"></div>
<div id="sfprevbtn" title="Prev" class="fbutton">
<span class="fprev"></span> </div>
<div id="sfnextbtn" title="Next" class="fbutton">
<span class="fnext"></span>
</div>
<div class="fshowdatep fbutton">
<div>
<input type="hidden" name="txtshow" id="hdtxtshow" />
<span id="txtdatetimeshow">Loading</span> </div>
</div> <div class="clear"></div>
</div>
</div>
<div style="padding: 1px;"> <div class="t1 chromeColor">
 
</div>
<div class="t2 chromeColor">
 
</div>
<div id="dvCalMain" class="calmain printborder">
<div id="gridcontainer" style="overflow-y: visible;">
</div>
</div>
<div class="t2 chromeColor">
 
</div>
<div class="t1 chromeColor">
 
</div>
</div> </div> </body>

<head id="Head1">
<title>日历控件</title> //**********************************引用
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link href="wdCalendar/css/dailog.css" rel="stylesheet" type="text/css" />
<link href="wdCalendar/css/calendar.css" rel="stylesheet" type="text/css" />
<link href="wdCalendar/css/dp.css" rel="stylesheet" type="text/css" />
<link href="wdCalendar/css/alert.css" rel="stylesheet" type="text/css" />
<link href="wdCalendar/css/main.css" rel="stylesheet" type="text/css" />
<script src="wdCalendar/src/jquery.js" type="text/javascript"></script>
<script src="wdCalendar/src/Plugins/Common.js" type="text/javascript"></script>
<script src="wdCalendar/src/Plugins/datepicker_lang_US.js" type="text/javascript"></script>
<script src="wdCalendar/src/Plugins/jquery.datepicker.js" type="text/javascript"></script>
<script src="wdCalendar/src/Plugins/jquery.alert.js" type="text/javascript"></script>
<script src="wdCalendar/src/Plugins/jquery.ifrmdailog.js" defer="defer" type="text/javascript"></script>
<script src="wdCalendar/src/Plugins/wdCalendar_lang_US.js" type="text/javascript"></script>
<script src="wdCalendar/src/Plugins/jquery.calendar.js" type="text/javascript"></script> <script type="text/javascript">
$(document).ready(function () {
var view = "week"; var DATA_FEED_URL = "datafeed.ashx"; //*****************配置用于处理请求的处理程序 var op = {
view: view,
theme: 3,
showday: new Date(),
EditCmdhandler: Edit,
DeleteCmdhandler: Delete,
ViewCmdhandler: View,
onWeekOrMonthToDay:wtd,
DIYquickAspx: "edit.aspx", //自定义快速添加、新建和更新时弹出的窗口,使用quickAddUrl时该属性无效。注:bug quickAdd //Hand设置无效,所以找的替代方法。需要在jQuery.Calendar.js中加段代码
onBeforeRequestData: cal_beforerequest,
onAfterRequestData: cal_afterrequest,
onRequestDataError: cal_onerror,
autoload: true,
enableDrag: false, //不想让磁贴被随意拖动,所以设置false
extParam: [],
url: DATA_FEED_URL + "?method=list",
//quickAddUrl: DATA_FEED_URL + "?method=add",//设置此字段将使用默认快速添加窗口,能掩盖DIYquickAspx部分功能,即自定/ //义快速添加窗口的使用
quickUpdateUrl: DATA_FEED_URL + "?method=update",
quickDeleteUrl: DATA_FEED_URL + "?method=remove"
};
//**********************************调用op设置的参数的方法,比如:$("#gridcontainer").BcalGetOp().DIYquickAspx
var $dv = $("#calhead");
var _MH = document.documentElement.clientHeight;
var dvH = $dv.height() + 2;
op.height = _MH - dvH;
op.eventItems = []; var p = $("#gridcontainer").bcalendar(op).BcalGetOp();
if (p && p.datestrshow) {
$("#txtdatetimeshow").text(p.datestrshow);
} $("#caltoolbar").noSelect(); $("#hdtxtshow").datepicker({
picker: "#txtdatetimeshow", showtarget: $("#txtdatetimeshow"),
onReturn: function (r) {
var p = $("#gridcontainer").gotoDate(r).BcalGetOp();
if (p && p.datestrshow) {
$("#txtdatetimeshow").text(p.datestrshow);
}
}
});
function cal_beforerequest(type) {
var t = "数据加载中...";
switch (type) {
case 1:
t = "数据加载中...";
break;
case 2:
case 3:
case 4:
t = "该请求处理...";
break;
}
$("#errorpannel").hide();
$("#loadingpannel").html(t).show();
}
function cal_afterrequest(type) {
switch (type) {
case 1:
$("#loadingpannel").hide();
break;
case 2:
case 3:
case 4:
$("#loadingpannel").html("Success!");
window.setTimeout(function () { $("#loadingpannel").hide(); }, 2000);
break;
} }
function cal_onerror(type, data) {
$("#errorpannel").show();
}
function Edit(data) {
var eurl = $("#gridcontainer").BcalGetOp().DIYquickAspx+"?id={0}&start={2}&end={3}&isallday={4}&title={1}";
if (data) {
var url = StrFormat(eurl, data);
OpenModelWindow(url, {
width: 600, height: 400, caption: "Manage The Calendar", onclose: function () {
$("#gridcontainer").reload();
}
});
}
} function View(data) {
var str = "";
$.each(data, function (i, item) {
str += "[" + i + "]: " + item + "\n";
});
document.write(str);
}
function Delete(data, callback) {
$.alerts.okButton = "确定";
$.alerts.cancelButton = "取消";
hiConfirm("是否删除该日历?", '确认', function (r) { r && callback(0); });
}
function wtd(p) {
if (p && p.datestrshow) {
$("#txtdatetimeshow").text(p.datestrshow);
}
$("#caltoolbar div.fcurrent").each(function () {
$(this).removeClass("fcurrent");
})
$("#showdaybtn").addClass("fcurrent");
}
//to show day view
$("#showdaybtn").click(function (e) {
//document.location.href="#day";
$("#caltoolbar div.fcurrent").each(function () {
$(this).removeClass("fcurrent");
})
$(this).addClass("fcurrent");
var p = $("#gridcontainer").swtichView("day").BcalGetOp();
if (p && p.datestrshow) {
$("#txtdatetimeshow").text(p.datestrshow);
}
});
//to show week view
$("#showweekbtn").click(function (e) {
//document.location.href="#week";
$("#caltoolbar div.fcurrent").each(function () {
$(this).removeClass("fcurrent");
})
$(this).addClass("fcurrent");
var p = $("#gridcontainer").swtichView("week").BcalGetOp();
if (p && p.datestrshow) {
$("#txtdatetimeshow").text(p.datestrshow);
} });
//to show month view
$("#showmonthbtn").click(function (e) {
//document.location.href="#month";
$("#caltoolbar div.fcurrent").each(function () {
$(this).removeClass("fcurrent");
})
$(this).addClass("fcurrent");
var p = $("#gridcontainer").swtichView("month").BcalGetOp();
if (p && p.datestrshow) {
$("#txtdatetimeshow").text(p.datestrshow);
}
}); //给刷新按钮添加单击事件
$("#showreflashbtn").click(function (e) {
$("#gridcontainer").reload();
}); //Add a new event 新增
$("#faddbtn").click(function (e) {
var url = $("#gridcontainer").BcalGetOp().DIYquickAspx;
OpenModelWindow(url, { width: 500, height: 400, caption: "Create New Calendar" });
});
//go to today
$("#showtodaybtn").click(function (e) {
var p = $("#gridcontainer").gotoDate().BcalGetOp();
if (p && p.datestrshow) {
$("#txtdatetimeshow").text(p.datestrshow);
}
});
//previous date range
$("#sfprevbtn").click(function (e) {
var p = $("#gridcontainer").previousRange().BcalGetOp();
if (p && p.datestrshow) {
$("#txtdatetimeshow").text(p.datestrshow);
} });
//next date range
$("#sfnextbtn").click(function (e) {
var p = $("#gridcontainer").nextRange().BcalGetOp();
if (p && p.datestrshow) {
$("#txtdatetimeshow").text(p.datestrshow);
}
});
});
</script>
</head>

4.jquery.calendar.js的修改:

在 $.fn.bcalendar = function(option) {  var def = { 后添加属性定义: DIYquickAspx:"";同时在添加:

 //快速添加响应事件
function quickadd(start, end, isallday, pos) {
if ((!option.quickAddHandler && option.quickAddUrl == "") || option.readonly) {
/*********************************自己添加************************************************/
var startTime = dateFormat.call(start, i18n.xgcalendar.dateformat.fulldayvalue + " HH:mm");
var endTime = dateFormat.call(end, i18n.xgcalendar.dateformat.fulldayvalue + " HH:mm"); //将选的时间传到edit.aspx //中
var url = option.DIYquickAspx+"?startTime=" + startTime + "&endTime=" + endTime;
OpenModelWindow(url, { width: 500, height: 400, caption: "Create New Calendar" }); /*********************************自己添加************************************************/
return;
}

在此处调用函数和获取属性是通过:option.quickAddHandler和option.quickAddHandler.call的形式进行的。

在jquery.calendar.js中获取传递信息的方法:

function dayshow(e, data) {
if (data == undefined) {
data = getdata($(this));
}
alert(data[0]);}

通过自定义的这个快速添加弹出自定义的添加窗口,同时所选择的时间被设置。而且可以添加额外的控件。具体见代码。

实测运行通过:VS2013+MySQL



xgCalendar在ASP.NET中的使用的更多相关文章

  1. ASP.NET中常用的优化性能的方法

    1. 数据库访问性能优化 数据库的连接和关闭 访问数据库资源需要创建连接.打开连接和关闭连接几个操作.这些过程需要多次与数据库交换信息以通过身份验证,比较耗费服务器资源.ASP.NET中提供了连接池( ...

  2. asp.net中ashx生成验证码代码放在Linux(centos)主机上访问时无法显示问题

    最近有个项目加入了验证码功能,就从自己博客以前的代码中找到直接使用,直接访问验证码页面报错如下: 源代码:asp.net中使用一般处理程序生成验证码 Application Exception Sys ...

  3. ASP.NET中Session的sessionState 4种mode模式

    1. sessionState的4种mode模式 在ASP.NET中Session的sessionState的4中mode模式:Off.InProc.StateServer及SqlServer. 2. ...

  4. Asp.net中存储过程拖拽至dbml文件中,提示无法获得返回值

    Asp.net中存储过程拖拽至dbml文件中,提示无法获得返回值,去属性表中设置这时候会提示你去属性表中更改返回类型. 其实存储过程返回的也是一张表,只不过有时候存储过程有点复杂或者写法不规范的话不能 ...

  5. ASP.NET中后台数据和前台控件的绑定

    关于ASP.NET中后台数据库和前台的数据控件的绑定问题 最近一直在学习个知识点,自己创建了SQL Server数据库表,想在ASP.NET中连接数据库,并把数据库中的数据显示在前台,注意,这里的数据 ...

  6. asp.net中缓存的使用介绍一

    asp.net中缓存的使用介绍一 介绍: 在我解释cache管理机制时,首先让我阐明下一个观念:IE下面的数据管理.每个人都会用不同的方法去解决如何在IE在管理数据.有的会提到用状态管理,有的提到的c ...

  7. ASP.NET中Ajax的用法

    在ASP.NET中应用Ajax的格式如下: 前台代码(用JQuery库) $.ajax({ type: "POST", async: true, url: "../Aja ...

  8. Asp.Net中使用OpenRowSet操作Excel表,导入Sql Server(实例)

    有两种接口可供选择:Microsoft.Jet.OLEDB.4.0(以下简称 Jet 引擎)和Microsoft.ACE.OLEDB.12.0(以下简称 ACE 引擎). Jet 引擎大家都很熟悉,可 ...

  9. Asp.net中static变量和viewstate的使用方法(谨慎)

    在.Net平台下进行CS软件开发时,我们经常遇到以后还要用到某些变量上次修改后的值,为了简单起见,很多人都习惯用static来定义这些变量,我也是.这样非常方便,下一次调用某个函数时该变量仍然保存的是 ...

随机推荐

  1. Python学习(002)--Python介绍

    一. Python介绍 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解释程序,作为AB ...

  2. promise的生命周期

    每个promise都会经历一个短暂的生命周期: 先是处于进行中(pending)状态,此时操作并未完成,所以他也是未处理的(unsettled): 一旦异步惭怍执行结束,promise则 变为已处理( ...

  3. NSJSONSerialization的简单用法

    NSJSONSerialization 苹果官方给出的解析方式是性能最优越的,虽然用起来稍显复杂. 首先我们在上面已经有了我希望得到的信息的网站的API给我们的URL,在OC中,我要加载一个NSURL ...

  4. 【机器学习PAI实践十二】机器学习算法基于信用卡消费记录做信用评分

    背景 如果你是做互联网金融的,那么一定听说过评分卡.评分卡是信用风险评估领域常用的建模方法,评分卡并不简单对应于某一种机器学习算法,而是一种通用的建模框架,将原始数据通过分箱后进行特征工程变换,继而应 ...

  5. HDU 1590 Searching(求复数向量和的极限)

    Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submission( ...

  6. [python]自问自答:python -m参数? (转) ( python2.7 版本 )

    原文地址: http://www.cnblogs.com/xueweihan/p/5118222.html python -m xxx.py 作用是:把xxx.py文件当做模块启动 但是我一直不明白当 ...

  7. C templet and switch case with serial number

    /************************************************************************** * C templet and switch c ...

  8. Linux基础和网络管理上机试题 - imsoft.cnblogs

    一.(使用at命令实现任务的的自动化,要求用一条条的指令完成)      找出系统中任何以txt为后缀名的文档,并且进行打印.打印结束后给用户foxy发出邮件通知取件.指定时间为十二月二十五日凌晨两点 ...

  9. 生成html报告并整合自动发动邮件功能

    from HTMLTestRunner import HTMLTestRunnerfrom email.mime.text import MIMETextfrom email.header impor ...

  10. java并发编程-Executor框架 + Callable + Future

    from: https://www.cnblogs.com/shipengzhi/articles/2067154.html import java.util.concurrent.*; public ...