初探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，下所示;

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

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 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();
    }

下载源码请点击这里