最近项目中需要一个日程管理的功能，找啊找，先是用的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+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>日程管理</title>
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<!-- 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" />
<!-- 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" 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">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;
这插件功能还有许多没有搞清楚，这只是最基本的功能，界面也还不美观，有懂的朋友请指导下，不胜感激。
版权声明：本文为博主原创文章，未经博主允许不得转载。
相关推荐
基于springboot大学生就业信息管理系统源码数据库文档.zip
基于java的驾校收支管理可视化平台的开题报告
时间序列 原木 间隔5秒钟 20241120
毕业设计&课设_基于 Vue 的电影在线预订与管理系统：后台 Java（SSM）代码，为毕业设计项目.zip
基于springboot课件通中小学教学课件共享平台源码数据库文档.zip
基于java的网上购物商城的开题报告
Delphi人脸检测与识别Demo1fdef-main.zip
基于java的咖啡在线销售系统的开题报告
基于java的自助医疗服务系统的开题报告.docx
内容概要：本文档全面介绍了Visual Basic（VB）编程语言的基础知识和高级应用。首先概述了VB的基本特性和开发环境，随后详细讲述了VB的数据类型、变量、运算符、控制结构、数组、过程与函数、变量作用域等内容。接着介绍了窗体设计、控件使用、菜单与工具栏的设计，文件操作、数据库访问等关键知识点。最后讨论了VB的学习方法、发展历史及其在桌面应用、Web应用、数据库应用、游戏开发和自动化脚本编写等领域的广泛应用前景。 适合人群：初学者和中级程序员，尤其是希望快速掌握Windows桌面应用开发的人群。 使用场景及目标：①掌握VB的基础语法和开发环境；②学会使用VB创建复杂的用户界面和功能完整的应用程序；③理解数据库操作、文件管理和网络编程等高级主题。 其他说明：Visual Basic是一种简单易学且功能强大的编程语言，尤其适合用于开发Windows桌面应用。文中不仅覆盖了基础知识，还包括了大量的实用案例和技术细节，帮助读者快速提升编程技能。
基于java的疫情期间高校防控系统开题报告.docx
基于springboot+vue社区老年人帮扶系统源码数据库文档.zip
基于java的超市商品管理系统的开题报告.docx
基于SpringBoot房屋买卖平台源码数据库文档.zip
xdu限通院23微处理器系统与应用大作业（两只老虎），适应于汇编语言keil软件，
<项目介绍> - 新闻类网站系统，基于SSM（Spring、Spring MVC、MyBatis）+MySQL开发，高分成品毕业设计，附带往届论文 - 不懂运行，下载完可以私聊问，可远程教学 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。 下载后请首先打开README.md文件（如有），仅供学习参考, 切勿用于商业用途。 --------
基于java的学生网上请假系统的开题报告.docx
社会经济繁荣发展的今天，电子商务得到了飞速发展，网上交易越来越彰显出其独特的优越性，在人们的日常生活中，出现了各种类型的交易网站。其中一个就是车辆易主交易网站，它是一个服务于用户买卖二手车辆的交易网站，为用户提供了平等互利、方便快捷的网上交易平台，通过这一类型的网站，用户可自由出售和购买车辆。 本课题主要根据车辆本身的特性，充分发挥互联网的特点与优势，构建一个以二手车辆为商品、基于互联网平台的车辆易主业务交易管理系统，并根据车辆易主业务交易管理系统的应用需求，进行需求分析，进而对网站系统作规划设计。采用IDEA为运行平台，以SSH为框架，运用HTML语言、JSP技术、MySql数据库、JSP与后台数据库链接等关键技术建设二手车网上交易系统，构建车辆易主交易系统的会员注册与登录，网站首页展示、用户发布商品车辆，用户求购商品车辆，分页浏览、购物系统、用户后台管理、管理员用户后台管理等功能，并使这些功能得以实现并更好为用户服务。网站整体构建完成且测试成功后，用户可以进入网站进行注册、登录，登录后，用户可以在网站上发布自己的闲置车辆或者寻找想要购买的车辆，还可以收藏车辆，管理发布和收藏的车辆，
SQLite3的向量扩展库，windows dll，版本0.1.5
基于C++实现（控制台）商品库存管理系统