zoukankan      html  css  js  c++  java
  • 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, {
                             600, height: 400, caption: "Manage  The Calendar", onclose: function () {
                                $("#gridcontainer").reload();
                            }
                        });
                    }
                }
    
    
                function View(data) {
                    var str = "";
                    $.each(data, function (i, item) {
                        str += "[" + i + "]: " + item + "
    ";
                    });
                    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, {  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, {  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








    
  • 相关阅读:
    POJ 3630 Phone List/POJ 1056 【字典树】
    HDU 1074 Doing Homework【状态压缩DP】
    POJ 1077 Eight【八数码问题】
    状态压缩 POJ 1185 炮兵阵地【状态压缩DP】
    POJ 1806 Manhattan 2025
    POJ 3667 Hotel【经典的线段树】
    状态压缩 POJ 3254 Corn Fields【dp 状态压缩】
    ZOJ 3468 Dice War【PD求概率】
    POJ 2479 Maximum sum【求两个不重叠的连续子串的最大和】
    POJ 3735 Training little cats【矩阵的快速求幂】
  • 原文地址:https://www.cnblogs.com/ggzone/p/4052418.html
Copyright © 2011-2022 走看看