xgCalendar在ASP.NET中的使用

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,wdCalendar)