Jquery实现超酷的日程安排插件

2018-07-20    来源:open-open

容器云强势上线!快速搭建集群,上万Linux镜像随意使用

这是一款功能超强大的插件,它可以自由管理自己的日程安排,有3种模式,分别为日,周,月,这样的话管理起来就非常清晰,如果想要保存数据,那就要配合后台程序了。

<script type="text/javascript">
    $(document).ready(function() {
        //[id,title,start,end,全天日程,跨日日程,循环日程,theme,'','']          
       var view="week";          
        ? __CURRENTDATA=[['6147','你好啊',new Date(1338427800000),new Date(1338431400000),0,0,1,0,1,'','']];
        var op = {
            view: view,
            theme:3,
            showday: new Date(),
            EditCmdhandler:Edit,
            DeleteCmdhandler:Delete,
            ViewCmdhandler:View,    
            onWeekOrMonthToDay:wtd,
            onBeforeRequestData: cal_beforerequest,
            onAfterRequestData: cal_afterrequest,
            onRequestDataError: cal_onerror, 
            url: "calendar.php?mode=get" ,  
            quickAddUrl: "calendar.php?mode=quickadd" ,  
            quickUpdateUrl: "calendar.php?mode=quickupdate" ,  
            quickDeleteUrl:  "calendar.php?mode=quickdelete" //快速删除日程的
           /* timeFormat:" hh:mm t", //t表示上午下午标识,h 表示12小时制的小时,H表示24小时制的小时,m表示分钟
            tgtimeFormat:"ht" //同上 */             
        };
        var $dv = $("#calhead");
        var _MH = document.documentElement.clientHeight;
        var dvH = $dv.height() + 2;
        op.height = _MH - dvH;
        op.eventItems =__CURRENTDATA;

        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").BCalGoToday(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("操作成功!");
                    window.setTimeout(function(){ $("#loadingpannel").hide();},2000);
                break;
            }              

        }
        function cal_onerror(type,data)
        {
            $("#errorpannel").show();
        }
        function Edit(data)
        {
           var eurl="";   
            if(data)
            {
                var url = StrFormat(eurl,data);
                OpenModelWindow(url,{ width: 600, height: 400, caption:"管理日程",onclose:function(){
                   $("#gridcontainer").BCalReload();
                }});
            }
        }    
        function View(data)
        {
            var vurl="";   
            if(data)
            {
                var url = StrFormat(vurl,data);
                OpenModelWindow(url,{ width: 600, height: 400, caption: "查看日程"});
            }                
        }    
        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");
        }
        //显示日视图
        $("#showdaybtn").click(function(e) {
            //document.location.href="#day";
            $("#caltoolbar div.fcurrent").each(function() {
                $(this).removeClass("fcurrent");
            })
            $(this).addClass("fcurrent");
            var p = $("#gridcontainer").BCalSwtichview("day").BcalGetOp();
            if (p && p.datestrshow) {
                $("#txtdatetimeshow").text(p.datestrshow);
            }
        });
        //显示周视图
        $("#showweekbtn").click(function(e) {
            //document.location.href="#week";
            $("#caltoolbar div.fcurrent").each(function() {
                $(this).removeClass("fcurrent");
            })
            $(this).addClass("fcurrent");
            var p = $("#gridcontainer").BCalSwtichview("week").BcalGetOp();
            if (p && p.datestrshow) {
                $("#txtdatetimeshow").text(p.datestrshow);
            }

        });
        //显示月视图
        $("#showmonthbtn").click(function(e) {
            //document.location.href="#month";
            $("#caltoolbar div.fcurrent").each(function() {
                $(this).removeClass("fcurrent");
            })
            $(this).addClass("fcurrent");
            var p = $("#gridcontainer").BCalSwtichview("month").BcalGetOp();
            if (p && p.datestrshow) {
                $("#txtdatetimeshow").text(p.datestrshow);
            }
        });

        $("#showreflashbtn").click(function(e){
            $("#gridcontainer").BCalReload();
        });

        //点击新增日程
        $("#faddbtn").click(function(e) {
            var url ="";
            OpenModelWindow(url,{ width: 500, height: 400, caption: "新增日程"});
        });
        //点击回到今天
        $("#showtodaybtn").click(function(e) {
            var p = $("#gridcontainer").BCalGoToday().BcalGetOp();
            if (p && p.datestrshow) {
                $("#txtdatetimeshow").text(p.datestrshow);
            }

        });
        //上一个
        $("#sfprevbtn").click(function(e) {
            var p = $("#gridcontainer").BCalPrev().BcalGetOp();
            if (p && p.datestrshow) {
                $("#txtdatetimeshow").text(p.datestrshow);
            }

        });
        //下一个
        $("#sfnextbtn").click(function(e) {
            var p = $("#gridcontainer").BCalNext().BcalGetOp();
            if (p && p.datestrshow) {
                $("#txtdatetimeshow").text(p.datestrshow);
            }
        });
        $("#changetochinese").click(function(e){
            location.href="?lang=zh-cn";
        });
        $("#changetoenglish").click(function(e){
            location.href="?lang=en-us";
        });
         $("#changetoenglishau").click(function(e){
            location.href="?lang=en-au";
        });

    });
</script>

标签: idc

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点!
本站所提供的图片等素材,版权归原作者所有,如需使用,请与原作者联系。

上一篇:把数字转换成人民币大写的形式Java类

下一篇:Java String字符串补0或空格