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