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" ></div> <div class="dhx_cal_tab" name="week_tab" ></div> <div class="dhx_cal_tab" name="month_tab" ></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();
}
作者：根艮哏艮根
链接：https://www.jianshu.com/p/db8025f21ea5