dhtmlxscheduler使用

阅读更多

　　最近项目中需要一个日程管理的功能，找啊找，先是用的fullcalendar，不知道是人品还是版本问题，events接受后台JSON参数总是出错，试了许多方法，也没有试出什么结果来。所以果断换到了dhtmlxscheduler，这个插件网上搜索结果较少，我也是自己从官方网站的文档自己慢慢摸索，做了一个不算日程表的日程表。主要是样式这些还没搞懂，对于英文实在缺乏的我感到很吃力。现在已经萌生了重拾英语的想法。闲话不多说，留此文已做记录，免得下次用到无从下手。

　　结果是这样的，样式基本没有改动，但功能齐全。springMVC+mysql。

dhtmlscheduler下载地址：http://docs.dhtmlx.com/scheduler/index.html

dhtmlscheduler文档地址：http://docs.dhtmlx.com/scheduler/api__refs__scheduler.html

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

 

<%@ 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+"/";
%>



  
    
    
    
   
	
	
		
	
	
	
	
    
	
	
	
	






	<%@ include file="/WEB-INF/layouts/header.jsp"%>
   

      

         

         

         

         

         

         

         

         

      
      

      
      

      
   
   <%@ include file="/WEB-INF/layouts/footer.jsp"%>
  
  

这是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 Michael Sun
*/
public class CustomDateSerializer extends JsonSerializer {

@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 getPage(HttpSession session,HttpServletResponse response) {
		UserPo userPo = (UserPo) session.getAttribute(Statics.USERPO);
		List 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;

这插件功能还有许多没有搞清楚，这只是最基本的功能，界面也还不美观，有懂的朋友请指导下，不胜感激。

 

 

版权声明：本文为博主原创文章，未经博主允许不得转载。