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
