jsp+jquery + struts2 + hibernate + spring +dhtmlxScheduler日程的集成(一)

参看后台部分的：

jsp+jquery + struts2 + hibernate + spring +dhtmlxScheduler日程的集成(二)

 

1、在http://www.dhtmlx.com/docs/products/dhtmlxScheduler/index.shtml上下载 dhtmlxScheduler。
2、中文化：把sources下的locale_recurring_cn.js放到codebase下。
3、拷贝codebase目录到WebRoot下。 3、在jsp中添加：//我采用了jquery的ajax来更新。
    因为我需要年视图，所以加入了dhtmlxscheduler_year_view.js。

4、在用户点击年月日或下一个上一个，今天这些按钮时，我要刷新当前的数据，所以我用了两个INPUT来记录当前的视图     (年、月、日、周)和当前所在的日期。

5、读取数据dhtmlxScheduler采用xml文件来生成视图，后台需提供xml文件。

6、让scheduler读取后台传来的xml地址

7、自定义dhtmlxScheduler的处理函数如：增加，删除，编辑，保存等

-------------------------------------------------------------具体的操作：

1、主页面calendar.jsp：

 

<script type="text/javascript" src="js/jquery.js"></script>//jquery库

<script src="dhtmlxScheduler/dhtmlxscheduler.js" type="text/javascript" charset="utf-8"></script>//dhtmlxscheduler主js
<script src="dhtmlxScheduler/ext/dhtmlxscheduler_year_view.js" type="text/javascript" charset="utf-8"></script>//dhtmlxscheduler年视图js
<link rel="stylesheet" href="dhtmlxScheduler/dhtmlxscheduler.css" type="text/css" charset="utf-8">//dhtmlxscheduler CSS文件
<link rel="stylesheet" href="dhtmlxScheduler/ext/dhtmlxscheduler_ext.css" type="text/css" charset="utf-8">//dhtmlxscheduler CSS文件
<script src="dhtmlxScheduler/locale_cn.js" type="text/javascript" charset="utf-8"></script>//dhtmlxscheduler 本地化文件支持中文
<script type="text/javascript" src="js/base.js"></script>//这两个是我自己增加的，一个是封装一些基本操作的js函数。另外一个是弹出dialog的js文件
<script type="text/javascript" src="js/dialog.js"></script>

 

//定义一个form，该form定义了查询的所在的日期，例如2010-5-5，另外一个是视图模式（月，年，日，周），这两个参数主要是用于传参的，因为

用户可能查询任意时间和模型，所以必须将这些参数记住，传给后台，然后后台在传回来，用户改变日历日期或者视图模式，calendar.jsp重新跳转，所以

必须记下来，以便和其点击的一致。

<s:form>
    <s:hidden name="queryDate"></s:hidden>
    <s:hidden name="queryMode"></s:hidden>
</s:form>

 

//定义区域来放置日历。

<div id="scheduler_here" class="dhx_cal_container" style='width: 100%; height: 100%;'>
            <div class="dhx_cal_navline">
                <div class="dhx_cal_prev_button">
                    &nbsp;
                </div>
                <div class="dhx_cal_next_button">
                    &nbsp;
                </div>
                <div class="dhx_cal_today_button"></div>
                <div class="dhx_cal_date"></div>
                <div class="dhx_cal_tab" name="day_tab" style="right: 204px;"></div>
                <div class="dhx_cal_tab" name="week_tab" style="right: 140px;"></div>
                <div class="dhx_cal_tab" name="year_tab" style="right: 280px;"></div>
                <div class="dhx_cal_tab" name="month_tab" style="right: 76px;"></div>
            </div>
            <div class="dhx_cal_header">
            </div>
            <div class="dhx_cal_data">
            </div>
        </div>

 

//有了上边之后，下面我们来处理dhtmlxscheduler的初始化等。

<script type="text/javascript" charset="utf-8">

//初始化
            function init()
            {
                scheduler.config.multi_day = true;               
                scheduler.config.xml_date="%Y-%m-%d %H:%i";           
                //初始日期和模式   

//后台的日期和模式参数，这里进行解析，并且将根据该模式，来设定日历的数据读取范围 //例如日期为 2010-05-05，模式为月模式，那么现实给用户的应该是2010-05-01至2010-05-30范围的数据

将这些参数传给dhtmlxScheduler的init函数
                scheduler.init('scheduler_here', new Date(
                parseInt("<%= request.getAttribute("queryDate")%>".substring(0, 4)),
                parseInt("<%= request.getAttribute("queryDate")%>".substring(5, 7) ) - 1,
                parseInt("<%= request.getAttribute("queryDate")%>".substring(8, 10))),
                 "<%= request.getAttribute("queryMode")%>");
//自定义dhtmlxScheduler的处理函数，包括增加，改变，删除前提示，编辑保存等。
                scheduler.attachEvent("onEventAdded", addEvent);//定义方法       
                scheduler.attachEvent("onEventChanged", changeEvent);
                scheduler.attachEvent("onBeforeEventDelete", deleteEvent);
                //scheduler.attachEvent("onEdit", function(){alert('ok');});
                 var date = "<%= request.getAttribute("queryDate")%>"; //传来的日期参数
                 var dd = "&queryDate=" + date + "&queryMode=" + "<%= request.getAttribute("queryMode")%>";//生成URL来连接后台Action。
                 $.ajax(
                {
                type: "POST",
                url: "calendar.action",//后台Action
                   data:'cmd=filePath' + dd,//参数
                //dataType: "json",
                success:
                function(data)
                {
                    var json= eval("("+data+")");
                            if(json.result == 'ok')
                            {
                    scheduler.load(json.path); //读取成功时，用后台传来的xml文件地址，让dhtmlxScheduler加载 ，后台的代码见（二）。
                            }
                            else
                            {
                                alert("读取失败！");
                            }
                },
                error:
                function()
                {
                    alert('无法连接服务器');
                }
                });
               
               
                //选择时跳转 ，用户选择了日期，或者改变了模式（年，月，周，日）等都需要重新让当前页刷新并加载新的数据。
                scheduler.setCurrentView=function(B,E)
                {
               
                if(E == null)
                E = "<%= request.getAttribute("queryMode")%>";               
                    var ss = B.getFullYear() + "-" + (B.getMonth()  + 1)+ "-" + B.getDate();                   
                    var u = "calendar.action?cmd=query&queryDate="+ss+"&queryMode="+E;
                    window.location.href =u;
                }
               
                //打开详细信息，弹出自己的dialog，（不想用其本身提供的窗口，这个和我的数据不对称，舍弃）
                 scheduler.showLightbox = function(id)
                 {
                     var dialog = new Dialog(
                    {
                        id:'calendarDialog',
                        url:'calendar.action?cmd=detail&serial=' + id,//ACTION
                        title:"工作安排详细信息",
                        width : '700',
                        height:'450',
                        ok : function()
                        { //点击详细信息窗口的保存按钮时，检查是否填写了一些信息。
                            var form = getIFrameDialogDoc('calendarDialog').forms[0];
                            if(form.title.value == null || form.title.value == '')
                            {
                                alertMsg("请填写主题");//填出自己的提示信息
                                return;
                            }

//保存自己定义的表单的，利用AJAX的保存。
                            var d = $(form).serialize()
                            $.ajax(
                            {
                                type: "POST",
                                url: "calendar.action",
                                data: d,
                                //dataType: "json",
                                success:
                                    function(data)
                                    {
                                        var json= eval("("+data+")");
                                        //alert(json.result);
                                        if(json.result == 'ok')
                                        {
                                            alertMsg('保存成功');
                                            closeDialog('calendarDialog');
                                            var u = "calendar.action?cmd=query&queryDate="+document.getElementsByName("queryDate")[0].value+
                                                "&queryMode="+document.getElementsByName("queryMode")[0].value;               
                                                        window.location.replace(u);//保存成功后，需要刷新数据
                                        }
                                        else
                                        {
                                            alertMsg(json.text);
                                        }
                                    },
                                error:
                                    function()
                                    {
                                    alert('error');
                                    }
                            });

                        }
                    });   
                 }              
            }
           
           
            //新增处理 ，得到填写的数据，然后利用ajax提交到后台
            var addEvent = function addEvent(event_id, e)
            {
                var text = e.text;
                if(text == '')
                {
                    alert("标题不能为空");
                    return;
                }               
                var B = e.start_date;//alert(dateStart);
                var ss = B.getFullYear() + "-" + (B.getMonth() + 1) + "-" + B.getDate() + " " + B.getHours() + ":" + B.getMinutes() + ":" + B.getSeconds();     
                var B = e.end_date;//alert(dateStart);
                var ss1 = B.getFullYear() + "-" + (B.getMonth() + 1) + "-" + B.getDate() + " " + B.getHours() + ":" + B.getMinutes() + ":" + B.getSeconds();     
               
                var dd = "cmd=editPost&startDate=" + ss + "&endDate=" + ss1 + "&title=" + e.text;
 
                $.ajax(
                {
                   type: "POST",
                   url: "calendar.action",
                   data: dd,
                   //dataType: "json",
                   success:function(data)
                   {
                          var json= eval("("+data+")");
                    if(json.result == 'ok')
                    {
                        var u = "calendar.action?cmd=query&queryDate="+document.getElementsByName("queryDate")[0].value+
                        "&queryMode="+document.getElementsByName("queryMode")[0].value;               
                                window.location.replace(u);
                    }
                    else
                    {
                        alert("添加失败！");
                    }
                    //alert(e.id);
                },
                   error:function(){alert('无法连接服务器');}
                });
            }
            //修改处理 得到填写的数据，然后利用ajax提交到后台
            changeEvent = function (event_id, e)
            {
                try
                {
                var text = e.text;
                if(text == '')
                {
                    alert("标题不能为空");
                    return;
                }
               
                var B = e.start_date;//alert(dateStart);
                var ss = B.getFullYear() + "-" + (B.getMonth() + 1) + "-" + B.getDate() + " " + B.getHours() + ":" + B.getMinutes() + ":" + B.getSeconds();     
                var B = e.end_date;//alert(dateStart);
                var ss1 = B.getFullYear() + "-" + (B.getMonth() + 1) + "-" + B.getDate() + " " + B.getHours() + ":" + B.getMinutes() + ":" + B.getSeconds();     
 
                var dd = "cmd=editPost&startDate=" + ss + "&endDate=" + ss1 + "&serial=" + e.id + "&title=" + e.text;
                $.ajax(
                {
                   type: "POST",
                   url: "calendar.action",
                   data: dd,
                   success:function(data){var json= eval("("+data+")");
                    if(json.result == 'ok')
                    {
                                           
                    }
                    else
                    {
                        alert("更新失败！");
                    }},
                   error:function(){alert('无法连接服务器');}
                });
                }
                catch(e)
                {
                alert(e);
                }
            }
           
            //删除 利用ajax提交到后台
            deleteEvent = function (event_id, event_object)
            {
                var dd = "cmd=del&serial=" + event_id ;
                $.ajax(
                {
               type: "POST",
               url: "calendar.action",
               data: dd,
               success:function(data){var json= eval("("+data+")");
                if(json.result == 'ok')
                {
                    var u = "calendar.action?cmd=query&queryDate="+document.getElementsByName("queryDate")[0].value+
                        "&queryMode="+document.getElementsByName("queryMode")[0].value;
               
                                window.location.href = u;
                }
                else
                {
                    alert("删除失败！");
                }},
               error:function(){alert('无法连接服务器');}
                });
            }
           
            </script>

 

//页面的处理基本就这些了，如果在复杂一点的，自己搞吧，我只是抛砖引玉，做简单的说明。

<body onload="init();">//在body中加载init函数。

后台的源代码在下一个中贴。

 

 

 

 

评论

25 楼 洋葱pp奥特曼 2017-08-26  

大神您好！刚项目有遇到这个功能，能否发一份完整例子到我的邮箱：[e-mail] 万分感激！！！

24 楼 wjm0113 2014-02-24  

楼主，我最近也在搞日程这块，想用这个控件，希望楼主能把代码发我一下么?[e-mail]，非常感谢

23 楼 u012219312 2013-10-17  

求楼主 完整代码 [e-mail]

22 楼 hh790404465 2013-10-15  

求完整项目，谢谢！ [e-mail]

21 楼 爱脸红的Boy 2013-09-11  

[e-mail]  楼主好人  求一份

20 楼 daniel235 2013-05-03  

[e-mail]

19 楼 daniel235 2013-05-03  

你好楼主，求一份源码

18 楼 cong5331 2013-04-27  

求一份完整的代码，最近在做这个，新手很蛋疼，邮箱：[e-mail]

17 楼 shuaipay 2012-12-17  

求一份原代码。谢谢咯！[e-mail]

16 楼 chiww 2012-11-03  

楼主 我在弄一个OA系统，可否分享一下完整源代码。感激不尽。好人一生平安 ~~  majia-hi007#163.com

15 楼 heshuzhen1931 2012-10-02  

楼主，小弟刚在学这方面的，遇到很多问题，，，，楼主可以共享一下嘛？小弟不胜感激
[e-mail]

14 楼 limei0501 2012-06-27  

求一份完整的DEMO学习！万分感谢 邮箱： [e-mail]

13 楼 mowenzheng 2012-06-12  

求完整DEMO [e-mail]
好人一生平安呀

12 楼 jiangzhong 2012-02-23  

您好，请问你这个日历能否学习下 正在搞这个 头疼
如果可以 请发[e-mail]

11 楼 58180030 2011-12-21  

你好楼主，能不能共享下完整的demo，我项目中需要用，拜托楼主了。[e-mail]

10 楼 heterhbg 2011-10-28  

求dialog.js，拜托楼主
[e-mail]

9 楼 qq87419980 2011-09-29  

求楼主供销dialog.js文件，谢谢了。
[e-mail]

8 楼 1234567890QAZXSWEDCVFR 2011-09-19  

求共享 [e-mail]  3Q

7 楼 yanslover 2011-09-14  

求共享 [e-mail]  3Q

6 楼 a6399380 2011-08-18  

求共享   [e-mail]  谢谢