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

发布时间:2020-02-13 发布网站:编程之家
编程之家收集整理的这篇文章主要介绍了Jquery实现超酷的日程安排插件编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

下面是编程之家 jb51.cc 通过网络收集整理的代码片段。

编程之家小编现在分享给大家,也给大家做个参考。

<script type="text/javascript">
    $(document).ready(function() {
        //[id,title,start,end,全天日程,跨日日程,循环日程,theme,'','']          
       var view="week";          
         __CURRENTDATA=[['6147','你好啊',new Date(1338427800000),new Date(1338431400000),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,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,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>

以上是编程之家(jb51.cc)为你收集整理的全部代码内容,希望文章能够帮你解决所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

总结

以上是编程之家为你收集整理的Jquery实现超酷的日程安排插件全部内容,希望文章能够帮你解决Jquery实现超酷的日程安排插件所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢交流学习经验,点击链接加入编程之家官方QQ群:1065694478
编程之家官方公众号

微信公众号搜索 “ 程序精选 ” ,选择关注!

微信公众号搜索 “ 程序精选 ”
精选程序员所需精品干货内容!