dhtmlxscheduler使用

　　最近項目中需要一個日程管理的功能，找啊找，先是用的fullcalendar，不知道是人品還是版本問題，events接受背景JSON參數總是出錯，試了許多方法，也沒有試出什麼結果來。是以果斷換到了dhtmlxscheduler，這個插件網上搜尋結果較少，我也是自己從官方網站的文檔自己慢慢摸索，做了一個不算日程表的日程表。主要是樣式這些還沒搞懂，對于英文實在缺乏的我感到很吃力。現在已經萌生了重拾英語的想法。閑話不多說，留此文已做記錄，免得下次用到無從下手。

dhtmlxscheduler使用

　　結果是這樣的，樣式基本沒有改動，但功能齊全。springMVC+mysql。

dhtmlscheduler下載下傳位址：http://docs.dhtmlx.com/scheduler/index.html

dhtmlscheduler文檔位址：http://docs.dhtmlx.com/scheduler/api__refs__scheduler.html

可以删除一些不必要的，隻留需要的就可以了。

dhtmlxscheduler使用

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>" target="_blank" rel="external nofollow" >
    
    <title>日程管理</title>
   
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css" target="_blank" rel="external nofollow" >
	-->
	<!-- jquery -->
	<script type="text/javascript" src='<%=basePath %>static/js/jquery/jquery-1.11.0.min.js'></script>	
	<script src="${res}/static/js/artDialog/jquery.artDialog.js?skin=default" type="text/javascript"></script>
	<link rel="stylesheet" type="txt/css" href="${res}/static/css/yz.css" target="_blank" rel="external nofollow"  />
	<!-- dhtmlscheduler -->
	<script src="<%=basePath %>static/js/dhtmlxscheduler/codebase/dhtmlxscheduler.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" href="<%=basePath %>static/js/dhtmlxscheduler/codebase/dhtmlxscheduler.css" target="_blank" rel="external nofollow"  type="text/css" media="screen" title="no title" charset="utf-8">
	<script src="<%=basePath %>static/js/dhtmlxscheduler/codebase/sources/ext/dhtmlxscheduler_minical.js" type="text/javascript"></script>
	<script src="<%=basePath %>static/js/dhtmlxscheduler/codebase/sources/dhtmlxscheduler.js" type="text/javascript"></script>
	<script src="<%=basePath %>static/js/dhtmlxscheduler/codebase/ext/dhtmlxscheduler_minical.js" type="text/javascript"></script>
	<script src="<%=basePath %>static/js/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>

<script type="text/javascript" charset="utf-8">
$(function() {
    init();
    $("#dhx_minical_icon").click(show_minical);


	function init() {
		scheduler.config.multi_day = true;  
		scheduler.config.drag_move = false;
		scheduler.config.icons_edit = ['icon_custom', 'icon_save', 'icon_cancel'];
		scheduler.config.icons_select = ['icon_details', 'icon_delete'];
        scheduler.config.xml_date="%Y-%m-%d %H:%i";  
        scheduler.init('scheduler_here',new Date(),"month");  
		$.ajax({    
	        url: '/calendar/calendar',  
	        cache:false,    
	        success:function(data) {    
	            var events = [];    
	            var info = eval(data);    
	            for (var i = 0; i < info.length; i++) {
	                var ev = info[i];
	                var title = ev.event;
	                var start = ev.startDate;
	                var end = ev.endDate;
	                var id = ev.pid;
	                //組裝日程
	               events.push({
	                    id:id,
	                    text:title,
	                    start_date:start,
	                    end_date:end
	               });
	                 
	            }
	            scheduler.parse(events, "json");
	          },
	          error:function() {
	              alert('資料錯誤！');
	          }
	      });
	      
	      /**
	      *添加儲存事件資料操作
	      */
	      scheduler.attachEvent("onEventSave",function(id,ev,is_new){
    	if (!ev.text) {
    		alert("描述資訊不能為空！");
    		
        	return false;
    		}
    	if(ev.start_date>ev.end_date){
    		alert("開始時間不能在結束時間之後");
    		return false;
    	}
    		var parms = {pid:id,event:ev.text,startDate:ev.start_date,endDate:ev.end_date};
    		$.post("/calendar/add",parms,function(data,status){
    			if(data.result=="SUCCESS"){
    				
    				$.dialog({
						title: '消息',
						id: "T90" ,
					    time: 3 ,
					    icon: 'warning' ,
					    content: data.msg,
					    close:function(){
							$("#loginName").focus();
					    }
					});

    			}
    			if(data.result=="ERROR"){
    				$.dialog({
						title: '消息',
						id: "T90" ,
					    time: 3 ,
					    icon: 'warning' ,
					    content: data.msg ,
					    close:function(){
							$("#loginName").focus();
					    }
					});
    				scheduler.deleteEvent(id); 
    			}
    			
    		});
    		return true;
});		
	      /**
	      *添加删除事件資料操作
	      */
	      scheduler.attachEvent("onBeforeEventDelete", function(id,e){
	    	  var parms = {pid:id};
	    		$.post("/calendar/delete",parms,function(data,status){
	    			if(data.result=="SUCCESS"){
	    				$.dialog({
	    					title: '消息',
	    					id: "T90" ,
	    				    time: 3 ,
	    				    icon: 'warning' ,
	    				    content: data.msg ,
	    				    close:function(){
	    						$("#loginName").focus();
	    				    }
	    				});
	    			}
	    		});	    		
	    	    return true;
	    	});
	      /**
		      *添加編輯事件資料操作
		      */
	      scheduler.attachEvent("onEventChanged", function(id,ev){
	    	  var parms = {pid:id,event:ev.text,startDate:ev.start_date,endDate:ev.end_date};
	    		$.post("/calendar/add",parms,function(data,status){
	    			
	    			if(data.result=="SUCCESS"){
	    				$.dialog({
	    					title: '消息',
	    					id: "T90" ,
	    				    time: 3 ,
	    				    icon: 'warning' ,
	    				    content: data.msg ,
	    				    close:function(){
	    						$("#loginName").focus();
	    				    }
	    				});
	    			}
	    		});
	    		return true;
	    	});
	}
	//顯示迷你月曆表
	function show_minical(){
		if (scheduler.isCalendarVisible())
			scheduler.destroyCalendar();
		else
			scheduler.renderCalendar({
				position:"dhx_minical_icon",
				date:scheduler._date,
				navigation:true,
				handler:function(date,calendar){
					scheduler.setCurrentView(date);
					scheduler.destroyCalendar()
				}
			});
	}
});

</script>

<body>
	<%@ include file="/WEB-INF/layouts/header.jsp"%>
   <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>
   <%@ include file="/WEB-INF/layouts/footer.jsp"%>
</body>  
  
</html>

這是jsp代碼，下面是calendarPo.java：

package com.glory.learn.po.studentLog;

import java.util.Date;

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.Table;
import javax.persistence.Temporal;
import javax.persistence.TemporalType;

import org.codehaus.jackson.map.annotate.JsonSerialize;

import com.glory.learn.util.CustomDateSerializer;

/**
 * 日程表
 * @param 
 * @param 
 * @return
 */
@Entity
@Table(name = "calendar_info")
public class CalendarPo {

	private Integer id;		//資料庫辨別
	private String pid;		//頁面ID
	private Integer studentId;		//學生Id
	private String event;	//事件
	private Date startDate;	//開始時間
	private Date endDate;	//結束時間
	
	@Id
	@Column(name = "id")
	@GeneratedValue(strategy = GenerationType.AUTO)
	public Integer getId() {
		return id;
	}
	public void setId(Integer id) {
		this.id = id;
	}
	
	@Column(name = "pid")
	public String getPid() {
		return pid;
	}
	public void setPid(String pid) {
		this.pid = pid;
	}
	@Column(name = "studentId")
	public Integer getStudentId() {
		return studentId;
	}
	public void setStudentId(Integer studentId) {
		this.studentId = studentId;
	}
	
	@Column(name = "event")
	public String getEvent() {
		return event;
	}
	public void setEvent(String event) {
		this.event = event;
	}
	
	@Column(name = "startDate")
	@Temporal(TemporalType.TIMESTAMP)
	@JsonSerialize(using = CustomDateSerializer.class)
	public Date getStartDate() {
		return startDate;
	}
	public void setStartDate(Date startDate) {
		this.startDate = startDate;
	}
	
	@Column(name = "endDate")
	@Temporal(TemporalType.TIMESTAMP)
	@JsonSerialize(using = CustomDateSerializer.class)
	public Date getEndDate() {
		return endDate;
	}
	public void setEndDate(Date endDate) {
		this.endDate = endDate;
	}
	
	
}

日期get方法上的@JsonSerialize(using = CustomDateSerializer.class)是讓json傳回的日期類型按指定的樣式傳回。CustomDateSerializer.java代碼如下：

package com.glory.learn.util;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;

import org.codehaus.jackson.JsonGenerator;
import org.codehaus.jackson.JsonProcessingException;
import org.codehaus.jackson.map.JsonSerializer;
import org.codehaus.jackson.map.SerializerProvider;

/**
 * 自定義傳回JSON 資料格中日期格式化處理
*
 * @author <a href="http://www.micmiu.com" target="_blank" rel="external nofollow" >Michael Sun</a>
*/
public class CustomDateSerializer extends JsonSerializer<Date> {

@Override

public void serialize(Date value, JsonGenerator jgen,



SerializerProvider provider) throws IOException,



JsonProcessingException {


SimpleDateFormat formatter = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");


String formattedDate = formatter.format(value);


jgen.writeString(formattedDate);

}

}

下面為controller代碼：

package com.glory.learn.action.student.log;

import java.util.List;

import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import com.glory.learn.bo.studentLog.CalendarBo;
import com.glory.learn.po.studentLog.CalendarPo;
import com.glory.learn.po.user.UserPo;
import com.glory.learn.util.Statics;
import com.glory.learn.vo.common.JsonResult;
import com.glory.learn.vo.common.Result;

@Controller
@RequestMapping(value = "/student/calendar/")
public class CalendarController {
	
	@Autowired
	CalendarBo calendarBo;
	
	@RequestMapping(value = "list",method = RequestMethod.GET)
	public String goPage() {
		
		return "student/calendar/dhtmlcal";
	}
	
	
	/**
	 * 傳回使用者所有日程資訊（json格式）
	 * @param session
	 * @param response
	 * @return
	 */
	@RequestMapping(value = "calendar",method = RequestMethod.GET)
	public @ResponseBody List<CalendarPo> getPage(HttpSession session,HttpServletResponse response) {
		UserPo userPo = (UserPo) session.getAttribute(Statics.USERPO);
		List<CalendarPo> list = calendarBo.getByStudent(userPo.getId());
		
		return list;
	}
	
	/**
	 * 添加OR修改
	 * @param session
	 * @param calendarPo
	 * @param id
	 * @return
	 */
	@RequestMapping(value = "add")
	public @ResponseBody JsonResult addCalendar(HttpSession session,CalendarPo calendarPo){
		JsonResult jResult = new JsonResult();
		
		if (calendarPo==null) {
			jResult.setResult(Result.ERROR);
			jResult.setMsg("日程資訊添加失敗，請重新輸入！");
		}
		
		UserPo userPo = (UserPo) session.getAttribute(Statics.USERPO);
		CalendarPo cpoPo= calendarBo.getByPid(userPo.getId(), calendarPo.getPid());
		System.out.println(cpoPo);
		if(cpoPo!=null){
			cpoPo.setEvent(calendarPo.getEvent());
			cpoPo.setStartDate(calendarPo.getStartDate());
			cpoPo.setEndDate(calendarPo.getEndDate());
			calendarBo.updateCalendar(cpoPo);
			jResult.setResult(Result.SUCCESS);
			jResult.setMsg("日程資訊修改成功！");
		}else if (calendarBo.getByDate(calendarPo.getStartDate(), calendarPo.getEndDate(), userPo.getId())!=null) {
			jResult.setResult(Result.ERROR);
			jResult.setMsg("日程資訊時間沖突,請重新選擇時間");
		}else {
		
		calendarPo.setStudentId(userPo.getId());
		calendarBo.saveCalendar(calendarPo);
		jResult.setResult(Result.SUCCESS);
		jResult.setMsg("已添加日程！");		
		}
		return jResult;
	}
	
	/**
	 * 删除日程
	 * @param session
	 * @param pid
	 * @return
	 */
	@RequestMapping(value = "delete")
	public @ResponseBody JsonResult deleteCalendar(HttpSession session,String pid){
		JsonResult jResult = new JsonResult();
		
		UserPo userPo = (UserPo) session.getAttribute(Statics.USERPO);
		CalendarPo calendarPos = calendarBo.getByPid(userPo.getId(), pid);
		calendarBo.deleteCalendar(calendarPos);
		jResult.setResult(Result.SUCCESS);
		jResult.setMsg("已删除此日程");
		return jResult;
		
	}
}

添加時前台接受過來的也是标準時間，是以就沒有做日期轉換，有需要就肯定要轉換的。

如果你的Po參數跟插件的日程屬性比對，傳回json直接可以用，不用在組裝。我這邊是用fullcalendar寫好了，難得改。呵呵。資料庫表結構如下：

CREATE TABLE `calendar_info` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `pid` varchar(20) DEFAULT NULL,
  `studentId` int(11) DEFAULT NULL,
  `event` varchar(200) NOT NULL,
  `startDate` datetime NOT NULL,
  `endDate` datetime NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=43 DEFAULT CHARSET=utf8;

這插件功能還有許多沒有搞清楚，這隻是最基本的功能，界面也還不美觀，有懂的朋友請指導下，不勝感激。

dhtmlxscheduler使用

繼續閱讀

RxSwift Scheduler排程環境RxSwift Scheduler排程環境

Spark Scheduler子產品源碼分析之DAGScheduler一、DAGScheduler的建構二、Job的送出三、Stage的劃分四、Stage的送出

kubernetes叢集實戰——Pod排程、親和性與反親和性、Node屬性Taints、Pod屬性Tolerations

使用Scheduling Framework擴充kube-scheduler

k8s基礎(13)之scheduler排程器k8s基礎(13)之scheduler排程器

排程作業(Oracle Scheduler)

Quartz源碼解析 ---- 觸發器按時啟動原理

Oracle 10g Scheduler 特性 Oracle 10g Scheduler 特性

linux CFS Scheduler

初識Quartz之Scheduler元件

K8S單master部署三：APIserver+Controller-Manager+Scheduler未完待續~~~

Java實作日程圖（Samples）功能

openstack動态排程現狀

Rxjava學習(三線程排程器Scheduler)

RxJava學習篇之一：基礎Observable,Observer,Single,Subject,Scheduler