大师网-带你快速走向大师之路 解决你在学习过程中的疑惑,带你快速进入大师之门。节省时间,提升效率

初探dhtmlxScheduler日程管理框架

dhtmlxScheduler是一个JavaScript日程安排控件,类似于Google日历,日历事件通过Ajax动态加载,支持通过拖放功能调整事件日期和时间,事件可以按天,周,月三个种视图显示。
官方网站:http://www.dhtmlx.com/
官方在线帮助文档:http://docs.dhtmlx.com/doku.php?id=dhtmlxscheduler:toc
官方源码下载地址:http://www.dhtmlx.com/x/download/regular/dhtmlxScheduler.zip

闲的时候写了一个dhtmlxScheduler入门级别的小例子(基本只是实现了增删改查功能),大神请自动忽略,下面先看看效果图:

1.显示已经添加好的日程计划

TIM截图20180914153447.png

2.添加、编辑、删除日程界面

TIM截图20180914153609.png

界面就是这些了,是不是有点简陋了,嘿嘿,毕竟是入门级别的

3.页面代码

需要引入对应的js和css,下所示;

<script src="${ctx }/dhtmlxscheduler/codebase/dhtmlxscheduler.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" href="${ctx }/dhtmlxscheduler/codebase/dhtmlxscheduler.css" type="text/css" media="screen" title="no title" charset="utf-8">
    <script src="${ctx }/dhtmlxscheduler/codebase/sources/ext/dhtmlxscheduler_minical.js" type="text/javascript"></script>
    <script src="${ctx }/dhtmlxscheduler/codebase/sources/dhtmlxscheduler.js" type="text/javascript"></script>
    <script src="${ctx }/sdhtmlxscheduler/codebase/ext/dhtmlxscheduler_minical.js" type="text/javascript"></script>
    <script src="${ctx }/dhtmlxscheduler/codebase/sources/locale/locale_cn.js" type="text/javascript"></script>
<style type="text/css" media="screen">
   html, body{
      margin:0px;
      padding:0px;
      height:100%;
      overflow:hidden;
   }   
</style>
<body>
     <div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:64%;'>
      <div class="dhx_cal_navline">
         <div class="dhx_cal_prev_button"> </div>
         <div class="dhx_cal_next_button"> </div>
         <div class="dhx_cal_today_button"></div>
         <div class="dhx_cal_date"></div>
         <div class="dhx_minical_icon" id="dhx_minical_icon"> </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="month_tab" style="right:76px;"></div>
      </div>
      <div class="dhx_cal_header">
      </div>
      <div class="dhx_cal_data">
      </div>
   </div>
</body>

其余关于框架方面的知识需要您去看看官方文档了

4.js代码展示

主要采用的是ajax技术进行前后台交互,实现异步更新和提交数据,其核心代码如下:

        /**
          *添加保存事件数据操作(新增日程)
          */
        scheduler.attachEvent("onEventAdded",function(event_id,ev,is_new){
                if (!ev.text) {
                    alert("描述信息不能为空!");
                    return false;
                }
                if(ev.start_date>ev.end_date){
                    alert("开始时间不能在结束时间之后");
                    return false;
                }
                var parms = {eventId:event_id,event:ev.text,startDate:ev.start_date,endDate:ev.end_date};
                $.ajax({
                    url:"${ctx}/addCalendar",
                    dataType:'json',
                    type:"post",
                    data:{"calendarInfo":JSON.stringify(parms)},
                    success:function(data){
                        
                    },
                    error:function(){
                        
                    }
                });
            return true;
        }); 

        /**
          *添加删除事件数据操作
          */
          scheduler.attachEvent("onBeforeEventDelete", function(event_id,ev){
              $.ajax({
                    url:"${ctx}/delCalendar",
                    dataType:'json',
                    type:"post",
                    data:{"event_id":event_id},
                    success:function(data){
                        
                    },
                    error:function(){
                        
                    }
                });
                return true;
            });
            /**
              *添加编辑事件数据操作
              */
          scheduler.attachEvent("onEventChanged", function(event_id,ev){
                if (!ev.text) {
                    alert("描述信息不能为空!");
                    return false;
                }
                if(ev.start_date>ev.end_date){
                    alert("开始时间不能在结束时间之后");
                    return false;
                }
                var parms = {eventId:ev.event_id,event:ev.text,startDate:ev.start_date,endDate:ev.end_date};
                $.ajax({
                    url:"${ctx}/addCalendar",
                    dataType:'json',
                    type:"post",
                    data:{"calendarInfo":JSON.stringify(parms)},
                    success:function(data){
                        
                    },
                    error:function(){
                        
                    }
                });
                return true;
            });
    

5.后台代码

后台只负责将前台数据获取后,然后存入到数据库中,本文的框架采用的是jFinal,代码如下:

/**
     * 返回用户所有日程信息(json格式)
     * @param session
     * @param response
     * @return
     */
    public void getPage() {
        int id=getParaToInt();
        String sql="select * from calendar_info where status=1";
        List<CalendarInfo> list=CalendarInfo.dao.find(sql);
        renderJson(JSON.toJSON(list));
    }
    
    
    /**
     * 添加OR修改
     * @param session
     * @param calendarPo
     * @param id
     * @return
     */
    public void addCalendar(){
        String jsonStr= getPara("calendarInfo");
        if (jsonStr==null) {
            //日程信息添加失败,请重新输入!
        }
        JSONObject jsonObject = JSONObject.parseObject(jsonStr);
        CalendarInfo calendarInfo = JSONObject.toJavaObject(jsonObject, CalendarInfo.class);
        //根据当前登录人的id和日程id来查询是否存在日程,存在则编辑,不存在则新增
        String  sql="select * from calendar_info where event_id=? and user_id=? and status=1";
        CalendarInfo calendarInfo2= CalendarInfo.dao.findFirst(sql,calendarInfo.getEventId(),"1");
        if(calendarInfo2!=null){
            //编辑
            CalendarInfo.dao.findById(calendarInfo2.getId())
            .set("event", calendarInfo.getEvent())
            .set("start_date", calendarInfo.getStartDate())
            .set("end_date", calendarInfo.getEndDate())
            .update();
        }else{
            //新增
            calendarInfo.setUserId(1);
            calendarInfo.save();
        }
        
        
    }
    /**
     * 删除
     * @Title: delCalendar 
     * @Description: TODO  void
     * @author Liu_xg
     * @date 2018年9月4日上午11:55:28
     */
    public void delCalendar(){
        String  event_id=getPara("event_id");
        CalendarInfo.dao.findById(event_id).set("status", -1).update();
    }

下载源码请点击这里