初探dhtmlxScheduler日程管理框架

weixin_34353714發表於2018-09-14
HTML框架

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.顯示已經新增好的日程計劃

4740566-f7eae322ad4cfa47.png
TIM截圖20180914153447.png

2.新增、編輯、刪除日程介面

4740566-0b96942070e74b8a.png
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();
    }

下載原始碼請點選這裡

相關文章