您的位置:首页 > Web前端 > HTML

dhtmlxscheduler日历日程控件使用

2014-09-12 18:12 323 查看
最近项目需要做一个会议日程安排的功能,通过日历控件查询日程安排。找到了dhtmlxScheduler这个控件,java下的官方网站http://javaplanner.com/docs/index.html ,最终效果是这样的:



由于网上关于这个控件的中文资料比较少,分享自己经验供同样需求的人使用。
项目框架是spring MVC + hibernate,使用此控件方法如下:

首先是准备工作,下载并导入各种相关的包:
dhtmlxScheduler library files (控件的js/css文件);

javaplanner.jar file (you can download it here).

然后,处理需要在控件中显示的日程,分为两部分:建立表结构和定义对应实体类。日程bean(即上图表示Event的类,在我的项目中是会议Meeting类)继承DHXEvent类,日程类会继承DHXEvent类中的四个变量,分别是id,start_date,end_date,text,id为整型。

Meeting.java
import java.util.Date;

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.FetchType;
import javax.persistence.GeneratedValue;
import javax.persistence.Id;
import javax.persistence.JoinColumn;
import javax.persistence.ManyToOne;
import javax.persistence.PrePersist;
import javax.persistence.PreUpdate;
import javax.persistence.Table;
import javax.persistence.Temporal;
import javax.persistence.TemporalType;
import javax.validation.constraints.NotNull;

import org.apache.commons.lang3.StringUtils;
import org.hibernate.annotations.Cache;
import org.hibernate.annotations.CacheConcurrencyStrategy;
import org.hibernate.annotations.DynamicInsert;
import org.hibernate.annotations.DynamicUpdate;
import org.hibernate.annotations.GenericGenerator;
import org.hibernate.annotations.NotFound;
import org.hibernate.annotations.NotFoundAction;
import org.hibernate.search.annotations.Analyze;
import org.hibernate.search.annotations.DateBridge;
import org.hibernate.search.annotations.Field;
import org.hibernate.search.annotations.Index;
import org.hibernate.search.annotations.Resolution;
import org.hibernate.search.annotations.Store;
import org.hibernate.validator.constraints.Length;

import com.dhtmlx.planner.DHXEvent;
import com.fasterxml.jackson.annotation.JsonFormat;
import com.fasterxml.jackson.annotation.JsonIgnore;
import com.thinkgem.jeesite.common.persistence.DataEntity;
import com.thinkgem.jeesite.modules.sys.entity.User;
import com.thinkgem.jeesite.modules.sys.utils.UserUtils;

/**
* @author MuQiong
* Class Description
* 会议实体
*/
@Entity
@Table(name = "oa_meeting")
@DynamicInsert @DynamicUpdate
@Cache(usage = CacheConcurrencyStrategy.READ_WRITE)
public class Meeting extends DHXEvent {
private static final long serialVersionUID = 1L;

private User user;//创建用户
private Room room;//会议房间
//private String text;//会议主题
private String description;//会议描述
private String status;//处理状态
private String location;//和平里or二基地
private String opinion;//审批意见
private int attendance;//参会人数

private User createBy;	// 创建者
private Date createDate;// 创建日期
private User updateBy;	// 更新者
private Date updateDate;// 更新日期
private String delFlag; // 删除标记(0:正常;1:删除;2:审核)

public Meeting(){
super();
this.delFlag = DataEntity.DEL_FLAG_NORMAL;
}

public Meeting(int id){
this();
this.id = id;
this.delFlag = DataEntity.DEL_FLAG_NORMAL;
}

public Meeting(int id, User user, Room room){
this(id);
this.user = user;
this.room = room;
this.delFlag = DataEntity.DEL_FLAG_NORMAL;
}

@PrePersist
public void prePersist(){
User user = UserUtils.getUser();
if (StringUtils.isNotBlank(user.getId())){
this.updateBy = user;
this.createBy = user;
}
this.updateDate = new Date();
this.createDate = this.updateDate;
}

@PreUpdate
public void preUpdate(){
User user = UserUtils.getUser();
if (StringUtils.isNotBlank(user.getId())){
this.updateBy = user;
}
this.updateDate = new Date();
}

public void setId(int id){
this.id = id;
}
@Id
@GenericGenerator(name = "idGenerator", strategy = "increment")
@GeneratedValue(generator = "idGenerator")
public Integer getId(){
return id;
}

public void setUser(User user){
this.user = user;
}

@ManyToOne
@JoinColumn(name="user_id")
@NotFound(action = NotFoundAction.IGNORE)
@NotNull
public User getUser(){
return user;
}

public void setRoom(Room room){
this.room = room;
}

@ManyToOne
@JoinColumn(name="room_id")
@NotFound(action = NotFoundAction.IGNORE)
@NotNull
public Room getRoom(){
return room;
}

public void setStartDate(Date startDate){
this.start_date = startDate;
}
@Temporal(TemporalType.TIMESTAMP)
@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
public Date getStartDate(){
return start_date;
}

public void setEndDate(Date endDate){
this.end_date = endDate;
}

@Temporal(TemporalType.TIMESTAMP)
@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
public Date getEndDate(){
return end_date;
}

public void setTitle(String title){
this.text = title;
}
@Column(name = "text")
public String getTitle(){
return text;
}

public void setDescription(String description){
this.description = description;
}

public String getDescription(){
return description;
}

public void setStatus(String status){
this.status = status;
}

public String getStatus(){
return status;
}

public void setLocation(String location){
this.location = location;
}

public String getLocation(){
return location;
}

public void setOpinion(String opinion){
this.opinion = opinion;
}

public String getOpinion(){
return opinion;
}

public void setAttendance(int attendance){
this.attendance = attendance;
}

public int getAttendance(){
return this.attendance;
}

@JsonIgnore
@ManyToOne(fetch=FetchType.LAZY)
@NotFound(action = NotFoundAction.IGNORE)
public User getCreateBy() {
return createBy;
}

public void setCreateBy(User createBy) {
this.createBy = createBy;
}

@Temporal(TemporalType.TIMESTAMP)
@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
public Date getCreateDate() {
return createDate;
}

public void setCreateDate(Date createDate) {
this.createDate = createDate;
}

@JsonIgnore
@ManyToOne(fetch=FetchType.LAZY)
@NotFound(action = NotFoundAction.IGNORE)
public User getUpdateBy() {
return updateBy;
}

public void setUpdateBy(User updateBy) {
this.updateBy = updateBy;
}

@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
@Field(index=Index.YES, analyze=Analyze.NO, store=Store.YES)
@DateBridge(resolution = Resolution.DAY)
public Date getUpdateDate() {
return updateDate;
}

public void setUpdateDate(Date updateDate) {
this.updateDate = updateDate;
}

@Length(min=1, max=1)
@Field(index=Index.YES, analyze=Analyze.NO, store=Store.YES)
public String getDelFlag() {
return delFlag;
}

public void setDelFlag(String delFlag) {
this.delFlag = delFlag;
}

}
数据库用的mySQL:
CREATE TABLE oa_meeting
(
id int(64) NOT NULL COMMENT '编号',
user_id varchar(64) NOT NULL COMMENT '创建用户编号',
room_id varchar(64) NOT NULL COMMENT '会议房间编号',
start_date datetime COMMENT '开始时间',
end_date datetime COMMENT '结束时间',
text varchar(64) COMMENT '会议主题',
description varchar(64) COMMENT '会议描述',
status varchar(64) COMMENT '处理状态',
location varchar(64) COMMENT '会议室区域',
opinion varchar(64) COMMENT '审批意见',
attendance int(32) COMMENT '参会人数',
create_by varchar(64) COMMENT '创建者',
create_date datetime COMMENT '创建时间',
update_by varchar(64) COMMENT '更新者',
update_date datetime COMMENT '更新时间',
del_flag char(1) DEFAULT '0' NOT NULL COMMENT '删除标记',
PRIMARY KEY (id)
) COMMENT = '会议室预订表';
下一步,利用hibernate连接数据库,hibernate配置文件和hibernateUtils类如下:

hibernate.cfg.xml<!--省略了需要的mapping class这个根据自己需要处理的实体添上就可以了-->
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE hibernate-configuration PUBLIC
"-//Hibernate/Hibernate Configuration DTD 3.0//EN"
"http://hibernate.sourceforge.net/hibernate-configuration-3.0.dtd">
<hibernate-configuration>
<session-factory>
<property name="cache.use_second_level_cache">false</property>
<property name="connection.driver_class">com.mysql.jdbc.Driver</property>
<property name="connection.url">jdbc:mysql://localhost:3306/jeesite</property>
<property name="connection.username">root</property>
<property name="connection.password">root</property>
<property name="connection.pool_size">1</property>
<property name="dialect">org.hibernate.dialect.MySQLDialect</property>
<property name="current_session_context_class">thread</property>
<property name="cache.provider_class">org.hibernate.cache.NoCacheProvider</property>
<property name="show_sql">true</property>
<property name="format_sql">true</property>
<property name="use_sql_comments">true</property>

<property name="hibernate.connection.provider_class">org.hibernate.connection.C3P0ConnectionProvider</property>
<property name="hibernate.c3p0.max_size">20</property>
<property name="hibernate.c3p0.min_size">5</property>
<property name="automaticTestTable">Test</property>
<property name="hibernate.c3p0.max_statements">100</property>
<property name="hibernate.c3p0.idle_test_period">120</property>
<property name="hibernate.c3p0.acquire_increment">1</property>
<property name="c3p0.testConnectionOnCheckout">true</property>
<property name="c3p0.idleConnectionTestPeriod">18000</property>
<property name="c3p0.maxIdleTime">25000</property>

<mapping class="……
……
……
<!--  <mapping class="com.thinkgem.jeesite.modules.*" />-->
<!-- <mapping class="com.thinkgem.jeesite" file="" jar="" package="hibernate.cfg.xml"
resource="Event.hbm.xml" /> -->
</session-factory>
</hibernate-configuration>
HibernateUtil.java

import org.hibernate.SessionFactory;
import org.hibernate.cfg.Configuration;
import org.hibernate.cfg.ImprovedNamingStrategy;
import org.hibernate.service.ServiceRegistry;
import org.hibernate.service.ServiceRegistryBuilder;

/**
* @author MuQiong
* @version 2014-9-4 上午11:26:52
* hibernate 工具类 for日历查询
*/

public class HibernateUtil {

private static final SessionFactory sessionFactory = buildSessionFactory();

private static SessionFactory buildSessionFactory() {
try {
Configuration cfg = new Configuration().setNamingStrategy(
ImprovedNamingStrategy.INSTANCE).configure();
ServiceRegistry serviceRegistry = new ServiceRegistryBuilder()
.applySettings(cfg.getProperties()).buildServiceRegistry();

return cfg.buildSessionFactory(serviceRegistry);
} catch (Throwable e) {
throw new ExceptionInInitializerError(e);
}
}

private HibernateUtil() {
}

public static SessionFactory getSessionFactory() {
return sessionFactory;
}
}
下一步,写一个service类继承DHXEventsManager类,该类负责利用HibernateUtil实现对实体的CRUD功能,这里暂时只完成了读取数据即getEvents方法。
MeetingEventsManager.java
/**
* @author MuQiong
* 日历查询会议室预定情况service
*/
@Service
@Transactional(readOnly = true)
public class MeetingEventsManager extends DHXEventsManager {

public MeetingEventsManager(HttpServletRequest request) {
super(request);
}

@Override
public Iterable getEvents() {
Session session = HibernateUtil.getSessionFactory().openSession();
List<Meeting> evs = new ArrayList<Meeting>();
try {
//	session.clear();
Criteria criteria = session.createCriteria(Meeting.class);
evs = criteria/*.setCacheMode(CacheMode.IGNORE)*/.list();
// System.out.println(evs.size());
} catch (RuntimeException e) {
e.printStackTrace();
} finally {
session.flush();
session.close();
}
return evs;
}

@Override
@Transactional(readOnly = false)
public DHXStatus saveEvent(DHXEv event, DHXStatus status) {
Session session = HibernateUtil.getSessionFactory().openSession();
try {
session = HibernateUtil.getSessionFactory().openSession();
session.beginTransaction();

if (status == DHXStatus.UPDATE)
session.update(event);
else if (status == DHXStatus.DELETE)
session.delete(event);
else if (status == DHXStatus.INSERT)
session.save(event);

session.getTransaction().commit();
} catch (RuntimeException e) {
e.printStackTrace();
} finally {
session.flush();
session.close();
}
return status;
}

@Override
@Transactional(readOnly = false)
public DHXEv createEvent(String id, DHXStatus status) {
return new DHXEvent();
}
}
后台的最后一步也是关键一步,spring的controller类,许多关于控件界面的设置都是在这里完成的,比如说,你可以这样s.calendars.attachMiniCalendar();添加选择日期控件,更多设置请参见http://javaplanner.com/docs/index.html
QueryController.java
/**
* @author MuQiong
* 日历查询controller
*/
@Controller
@RequestMapping(value = "${adminPath}/oa/query")
public class QueryController {
/*
* @Autowired private CustomEventsManager customEventsManager;
*/
@RequestMapping(value = {"list", "/"})
public ModelAndView scheduler(HttpServletRequest request) throws Exception {
DHXPlanner s = new DHXPlanner("/jeesite/static/dhtmlxScheduler/",
DHXSkin.TERRACE);
s.config.setScrollHour(8);
s.setWidth(900);
s.config.setTimeStep(60);
s.config.setFirstHour(8);
s.config.setLastHour(19);
s.config.setLimitTimeSelect(true);

// clear default lightbox fields
s.lightbox.clear();
// contact details field
DHXLightboxText title = new DHXLightboxText("text", "会议主题");
title.setFocus(true);
title.setHeight(40);
s.lightbox.add(title);
// time field
DHXLightboxTime time = new DHXLightboxTime("time", "时长");
s.lightbox.add(time);

s.load("meetings", DHXDataFormat.JSON);
s.data.dataprocessor.setURL("meetings");
ModelAndView mnv = new ModelAndView("modules/oa/queryList");
mnv.addObject("body", s.render());

return mnv;
}

@RequestMapping("/meetings")
@ResponseBody public String meetings(HttpServletRequest request) {
MeetingEventsManager evs = new MeetingEventsManager(request);
return evs.run();
}
}
最后就是前端页面jsp文件了
queryList.jsp
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<body>
<div class="content" id="content">
<div class="scheduler" id="scheduler">${body}</div>
</div>
</body>
</html>
以上就完成简单的基本功能了。
如果有什么问题,希望指出。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: