项目中的实际应用
Model模型的创建
package com.foreknow.model;
public class Schedule {
private static final long serialVersionUID = 1L;
private java.lang.Integer id;// ID
private java.lang.String title;// 日程内容
private java.util.Date startTime;// 开始时间
private java.util.Date endTime;// 结束时间
private java.lang.String allDay;// 是否全天，1 - 是，0 - 不是
private java.lang.String color;// 颜色
private java.lang.String userID;// 用户ID
private java.lang.String isFinish;// 是否完成，1 - 是，0 - 不是
private java.util.Date createTime;// 创建时间
private java.lang.String startTimeStr;//开始时间String
public java.lang.String getStartTimeStr() {
return startTimeStr;
}
public void setStartTimeStr(java.lang.String startTimeStr) {
this.startTimeStr = startTimeStr;
}
public java.lang.String getEndTimeStr() {
return endTimeStr;
}
public void setEndTimeStr(java.lang.String endTimeStr) {
this.endTimeStr = endTimeStr;
}
public static long getSerialversionuid() {
return serialVersionUID;
}
private java.lang.String endTimeStr;//结束时间String
public Schedule() {
}
public java.lang.Integer getId() {
return this.id;
}
public void setId(java.lang.Integer id) {
this.id = id;
}
public java.lang.String getTitle() {
return this.title;
}
public void setTitle(java.lang.String title) {
this.title = title;
}
public java.util.Date getStartTime() {
return this.startTime;
}
public void setStartTime(java.util.Date startTime) {
this.startTime = startTime;
}
public java.util.Date getEndTime() {
return this.endTime;
}
public void setEndTime(java.util.Date endTime) {
this.endTime = endTime;
}
public java.lang.String getAllDay() {
return this.allDay;
}
public void setAllDay(java.lang.String allDay) {
this.allDay = allDay;
}
public java.lang.String getColor() {
return this.color;
}
public void setColor(java.lang.String color) {
this.color = color;
}
public java.lang.String getUserID() {
return this.userID;
}
public void setUserID(java.lang.String userID) {
this.userID = userID;
}
public java.util.Date getCreateTime() {
return this.createTime;
}
public void setCreateTime(java.util.Date createTime) {
this.createTime = createTime;
}
public java.lang.String getIsFinish() {
return isFinish;
}
public void setIsFinish(java.lang.String isFinish) {
this.isFinish = isFinish;
}
}
事物模型Model
作用：主要将从数据库查询的信息封装到Event事物类中以便于与前台进行交互
package com.foreknow.model;
public class Event {
private java.lang.Integer id;
private java.lang.String title;
private java.lang.String start;
private java.lang.String end;
private java.lang.String color;
private java.lang.String allDay;
private java.lang.String isFinish;
public java.lang.String getIsFinish() {
return isFinish;
}
public void setIsFinish(java.lang.String isFinish) {
this.isFinish = isFinish;
}
private java.lang.String className;
public java.lang.Integer getId()
{
return id;
}
public void setId(java.lang.Integer id)
{
this.id = id;
}
public java.lang.String getTitle()
{
return title;
}
public void setTitle(java.lang.String title)
{
this.title = title;
}
public java.lang.String getStart()
{
return start;
}
public void setStart(java.lang.String start)
{
this.start = start;
}
public java.lang.String getEnd()
{
return end;
}
public void setEnd(java.lang.String end)
{
this.end = end;
}
public java.lang.String getColor()
{
return color;
}
public void setColor(java.lang.String color)
{
this.color = color;
}
public java.lang.String getAllDay()
{
return allDay;
}
public void setAllDay(java.lang.String allDay)
{
this.allDay= allDay;
}
public java.lang.String getClassName()
{
return className;
}
public void setClassName(java.lang.String className)
{
this.className = className;
}
}
Mapping的创建（工厂以及单例模式）
工厂接口
package com.foreknow.mapping;
import java.sql.ResultSet;
import java.sql.SQLException;
public interface EntityMapping {
/**
* 可以根据传入的ResultSet返回一个对象(Object)
*/
public Object mapping(ResultSet rs)throws SQLException;
}
实现类
package com.foreknow.mapping;
import java.sql.ResultSet;
import java.sql.SQLException;
import com.foreknow.model.Schedule;
public class ScheduleMapping implements EntityMapping {
@Override
public Object mapping(ResultSet rs) throws SQLException {
Schedule schedule = new Schedule();
schedule.setId(rs.getInt("id"));
schedule.setTitle(rs.getString("title"));
schedule.setStartTime(rs.getDate("startTime"));
schedule.setEndTime(rs.getDate("endTime"));
schedule.setAllDay(rs.getString("allDay"));
schedule.setColor(rs.getString("color"));
schedule.setUserID(rs.getString("userID"));
schedule.setIsFinish(rs.getString("isFinish"));
schedule.setCreateTime(rs.getDate("createTime"));
return schedule;
}
}
MappingFactory工厂类
package com.foreknow.mapping;
import java.util.HashMap;
import java.util.Map;
/**
* 1.使用单例
* 2.要将xxxMapping保存到Map集合中
*
*
*/
public class MappingFactory {
private static MappingFactory mappingFactory = null;
private Map<String, EntityMapping> maps = new HashMap<>();
public static final String ADMIN_MAPPING="adminMapping";
public static final String GUESTBOOK_MAPPING="guestbookMapping";
public static final String SCHEDULE_MAPPING="scheduleMapping";
private MappingFactory() {
}
public static MappingFactory getInstance() {
if (mappingFactory == null) {
mappingFactory = new MappingFactory();
mappingFactory.maps.put(ADMIN_MAPPING, new AdminMapping());
mappingFactory.maps.put(GUESTBOOK_MAPPING, new GuestbookMapping());
mappingFactory.maps.put(SCHEDULE_MAPPING, new ScheduleMapping());
}
return mappingFactory;
}
/**
* 根据key从Map容器中获取到Value对象
* @param key
* @return EntityMapping 因为PersonMapping（）实现了EntityMapping接口
*/
public EntityMapping getMap(String key){
return maps.get(key);//new PersonMapping()
}
}
DAO的创建
接口
package com.foreknow.dao;
import java.sql.SQLException;
import java.util.List;
import com.foreknow.model.Schedule;
public interface ScheduleDao {
/**
* 查询所有信息
* @return
*/
public List<Object> all()throws SQLException;
/**
* 根据id查询用户信息
* @param userID
* @return
*/
public List<Object> listByUserID(String userID)throws SQLException;
/**
* 添加信息
* @param versionBean
*/
public void save(Schedule versionBean)throws SQLException;
/**
* 修改信息
* @param versionBean
*/
public void update(Schedule versionBean)throws SQLException;
}
DAO实现类
package com.foreknow.dao.impl;
import java.sql.SQLException;
import java.util.List;
import com.foreknow.dao.ScheduleDao;
import com.foreknow.mapping.EntityMapping;
import com.foreknow.mapping.MappingFactory;
import com.foreknow.model.Schedule;
public class ScheduleDaoImpl extends BaseDAO implements ScheduleDao {
@Override
public List<Object> all()throws SQLException {
String sql = "select * from Schedule";
EntityMapping mapping = mappingFactory.getMap(MappingFactory.SCHEDULE_MAPPING);
List<Object> list = jdbcTemplate.query(sql, mapping);
return list;
}
@Override
public List<Object> listByUserID(String userID)throws SQLException {
String sql = "select * from Schedule where userID = ?";
EntityMapping mapping = mappingFactory.getMap(MappingFactory.SCHEDULE_MAPPING);
List<Object> list = jdbcTemplate.query(sql, mapping, userID);
return list;
}
@Override
public void save(Schedule versionBean)throws SQLException {
String sql = "insert into Schedule (id,title,startTime,endTime,allDay,color,userID,isFinish,createTime)values(?,?,?,?,?,?,?,?,?)";
jdbcTemplate.update(sql, versionBean.getId(),versionBean.getTitle(), versionBean.getStartTime(), versionBean.getEndTime(),
versionBean.getAllDay(), versionBean.getColor(), versionBean.getUserID(), versionBean.getIsFinish(),
versionBean.getCreateTime());
}
@Override
public void update(Schedule versionBean)throws SQLException {
String sql = "update Schedule set title = ?,startTime = ?,endTime = ?,allDay = ?,color = ?,userID = ?,isFinish = ?,createTime = ? where id = ?";
jdbcTemplate.update(sql, versionBean.getTitle(),versionBean.getStartTime(),versionBean.getEndTime(),versionBean.getAllDay(),versionBean.getColor(),versionBean.getUserID(),versionBean.getIsFinish(),versionBean.getCreateTime(),versionBean.getId());
}
}
Service的创建
接口
package com.foreknow.service;
import java.util.List;
import com.foreknow.model.Schedule;
public interface ScheduleService {
/**
* 查询所有信息
* @return
*/
public List<Object> allInfo();
/**
* 根据id查询用户信息
* @param userID
* @return
*/
public List<Object> listQueryByUserID(String userID);
/**
* 添加信息
* @param versionBean
*/
public void saveInfo(Schedule versionBean);
/**
* 修改信息
* @param versionBean
*/
public void updateInfo(Schedule versionBean);
}
Service实现类
package com.foreknow.service.impl;
import java.sql.Connection;
import java.sql.SQLException;
import java.util.Date;
import java.util.List;
import com.foreknow.dao.impl.ScheduleDaoImpl;
import com.foreknow.db.DBManager;
import com.foreknow.model.Schedule;
import com.foreknow.service.ScheduleService;
public class ScheduleServiceImpl implements ScheduleService {
@Override
public List<Object> allInfo() {
DBManager dbManager = DBManager.getInstance();
Connection connection = dbManager.getConnection();
//要将DBManager的connection注入到JdbcTemplate中
//实例化dao并调用dao中的登录方法
ScheduleDaoImpl daoImpl=new ScheduleDaoImpl();
daoImpl.setConnection(connection);
List<Object> list = null;
try {
list = daoImpl.all();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return list;
}
@Override
public List<Object> listQueryByUserID(String userID) {
DBManager dbManager = DBManager.getInstance();
Connection connection = dbManager.getConnection();
//要将DBManager的connection注入到JdbcTemplate中
//实例化dao并调用dao中的登录方法
ScheduleDaoImpl daoImpl=new ScheduleDaoImpl();
daoImpl.setConnection(connection);
List<Object> list = null;
try {
list = daoImpl.listByUserID(userID);
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return list;
}
@Override
public void saveInfo(Schedule versionBean) {
DBManager dbManager = DBManager.getInstance();
Connection connection = dbManager.getConnection();
//要将DBManager的connection注入到JdbcTemplate中
//实例化dao并调用dao中的登录方法
ScheduleDaoImpl daoImpl=new ScheduleDaoImpl();
daoImpl.setConnection(connection);
Date now = new Date();
versionBean.setCreateTime(now);
versionBean.setIsFinish("0");
try {
daoImpl.save(versionBean);
connection.commit();
} catch (SQLException e) {
try {
connection.rollback();
} catch (SQLException e1) {
// TODO Auto-generated catch block
e1.printStackTrace();
}
e.printStackTrace();
}
}
@Override
public void updateInfo(Schedule versionBean) {
DBManager dbManager = DBManager.getInstance();
Connection connection = dbManager.getConnection();
//要将DBManager的connection注入到JdbcTemplate中
//实例化dao并调用dao中的登录方法
ScheduleDaoImpl daoImpl=new ScheduleDaoImpl();
daoImpl.setConnection(connection);
try {
daoImpl.update(versionBean);
connection.commit();
} catch (SQLException e) {
try {
connection.rollback();
} catch (SQLException e1) {
e1.printStackTrace();
}
e.printStackTrace();
}
}
}
查询日程信息的Controller的创建
package com.foreknow.controller;
import java.io.IOException;
import java.io.PrintWriter;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.foreknow.model.Event;
import com.foreknow.model.Schedule;
import com.foreknow.service.ScheduleService;
import com.foreknow.service.impl.ScheduleServiceImpl;
import com.google.gson.Gson;
@WebServlet(name="/ScheduleController",urlPatterns="/scheduleList")
public class ScheduleController extends HttpServlet {
private static final long serialVersionUID = 1L;
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// 服务器端向客户端返回的内容的类型（MIME）
resp.setContentType("text/html;charset=utf-8");
PrintWriter out = resp.getWriter();
Gson gson = new Gson();
ScheduleService service = new ScheduleServiceImpl();
String userID = "admin";
List<Object> scheduleList = service.listQueryByUserID(userID);
List<Event> list = new ArrayList<>();
if (scheduleList != null) {
for (int i = 0; i < scheduleList.size(); i++) {
Event event = new Event();
SimpleDateFormat format = null;
Schedule schedule = (Schedule) scheduleList.get(i);
if (schedule.getAllDay().equals(1)) {
format = new SimpleDateFormat("yyyy-MM-dd");
} else {
format = new SimpleDateFormat("yyyy-MM-dd HH:mm");
}
event.setStart(format.format(schedule.getStartTime()));
if (schedule.getEndTime() != null) {
event.setEnd(format.format(schedule.getEndTime()));
}
event.setId(schedule.getId());
event.setTitle(schedule.getTitle());
if (schedule.getIsFinish().equals("0")) {
event.setClassName("unFinish");
} else {
event.setClassName("onFinish");
}
event.setColor(schedule.getColor());
event.setIsFinish(schedule.getIsFinish());
list.add(event);
}
}
out.println(gson.toJson(list));
}
}
前台与查询日程后台的交互
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="/WebDemoMVC/css/bootstrap.min.css?_v=1472701731737" media="screen" rel="stylesheet" type="text/css" />
<link href="/WebDemoMVC/js/fullcalendar.css?_v=1472701698015" media="screen" rel="stylesheet" type="text/css" />
<link href='js/fullcalendar.css' rel='stylesheet' />
<style>
#top {
background: #eee;
border-bottom: 1px solid #ddd;
padding: 0 10px;
line-height: 40px;
font-size: 12px;
}
#calendar {
margin: 40px auto;
padding: 0 10px;
}
.onFinish:before {
content:"【 已完成 】";
background-color:yellow;
color:green;
text-align:center;
font-weight:bold;
width:100%;
}
.unFinish:before {
content:"【 未完成 】";
background-color:yellow;
color:red;
text-align:center;
font-weight:bold;
}
</style>
</head>
<body>
<div id='top'>
Language:
<select id='lang-selector'></select>
</div>
<div id='calendar'></div>
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button onclick="hideModal('addModal');" type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="addModalLabel">新增</h4>
</div>
<div class="modal-body" id="addModalBody">
<form class="form-horizontal" id="addForm">
<div class="alert alert-info" role="alert"><strong>声明 !</strong> 如果日程时间精确到“天”请选择 <strong> 全天 </strong> ，如果精确到“时间”请选择 <strong> 非全天 </strong> ！</div>
<div class="form-group">
<label class="col-sm-2 control-label"> </label>
<div class="col-sm-10">
<div style="margin:auto;">
<p class="radio-p" class="allDayType">
<label class="js-radio-box" style="left:0%;">
<input type="radio" value="1" id="7allDayAdd" name="allDay" checked/><label class="genderLab" for="7allDayAdd" style="font-size: 15px;">全天</label>
<input type="radio" value="0" id="8allDayAdd" name="allDay" /><label class="genderLab" for="8allDayAdd" style="font-size: 15px;">非全天</label>
</label>
</p>
</div>
</div>
</div>
<div class="form-group onAllDay">
<label class="col-sm-2 control-label">开始时间:</label>
<div class="col-sm-10">
<input name="startTime" value="" type="text" class="Wdate form-control validate[required,maxSize[60]]" onfocus="WdatePicker({lang:'zh-cn',dateFmt:'yyyy-MM-dd'})" id="form-validation-field-0">
</div>
</div>
<div class="form-group onAllDay">
<label class="col-sm-2 control-label">结束时间:</label>
<div class="col-sm-10">
<input name="endTime" value="" type="text" class="Wdate form-control validate[required,maxSize[60]]" onfocus="WdatePicker({lang:'zh-cn',dateFmt:'yyyy-MM-dd'})" id="form-validation-field-0">
<span style="color:red;">如果是当天的日程，结束时间可以不填！</span>
</div>
</div>
<div class="form-group unAllDay" style="display:none;">
<label class="col-sm-2 control-label">开始时间:</label>
<div class="col-sm-10">
<input name="startTime" value="" type="text" class="Wdate form-control validate[required,maxSize[60]]" onfocus="WdatePicker({lang:'zh-cn',dateFmt:'yyyy-MM-dd HH:mm'})" id="form-validation-field-0">
</div>
</div>
<div class="form-group unAllDay" style="display:none;">
<label class="col-sm-2 control-label">结束时间:</label>
<div class="col-sm-10">
<input name="endTime" value="" type="text" class="Wdate form-control validate[required,maxSize[60]]" onfocus="WdatePicker({lang:'zh-cn',dateFmt:'yyyy-MM-dd HH:mm'})" id="form-validation-field-0">
<span style="color:red;">如果是当天的日程，结束时间可以不填！</span>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">内容:</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="title" id="" placeholder="请输入内容">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">类型:</label>
<div class="col-sm-10">
<select id="color" name="color" class="form-control">
<option value="#3a87ad">普通</option>
<option value="red">紧急</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">完成状态:</label>
<div class="col-sm-10">
<select id="isFinish" name="isFinish" class="form-control">
<option value="0">未完成</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" class="btn btn-success addBtn">提交</button>
</div>
</div>
</form>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
<div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="updatefLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button onclick="hideModal('updateModal');" type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="updateModalLabel">修改</h4>
</div>
<div class="modal-body" id="updateModalBody">
<form class="form-horizontal" id="updateForm">
<div class="alert alert-info" role="alert"><strong>声明 !</strong> 如果日程时间精确到“天”请选择 <strong> 全天 </strong> ，如果精确到“时间”请选择 <strong> 非全天 </strong> ！</div>
<div class="form-group">
<label class="col-sm-2 control-label"> </label>
<input type="hidden" class="form-control" name="id" id="updateID" value="">
<div class="col-sm-10">
<div style="margin:auto;">
<p class="radio-p" class="allDayType">
<label class="js-radio-box" style="left:0%;">
<input type="radio" value="1" id="7allDayUpdate" name="allDay" checked/><label class="genderLab" for="7allDayUpdate" style="font-size: 15px;">全天</label>
<input type="radio" value="0" id="8allDayUpdate" name="allDay" /><label class="genderLab" for="8allDayUpdate" style="font-size: 15px;">非全天</label>
</label>
</p>
</div>
</div>
</div>
<div class="form-group onAllDay">
<label class="col-sm-2 control-label">开始时间:</label>
<div class="col-sm-10">
<input name="startTime" value="" type="text" class="Wdate form-control validate[required,maxSize[60]]" onfocus="WdatePicker({lang:'zh-cn',dateFmt:'yyyy-MM-dd'})" id="form-validation-field-0">
</div>
</div>
<div class="form-group onAllDay">
<label class="col-sm-2 control-label">结束时间:</label>
<div class="col-sm-10">
<input name="endTime" value="" type="text" class="Wdate form-control validate[required,maxSize[60]]" onfocus="WdatePicker({lang:'zh-cn',dateFmt:'yyyy-MM-dd'})" id="form-validation-field-0">
<span style="color:red;">如果是当天的日程，结束时间可以不填！</span>
</div>
</div>
<div class="form-group unAllDay" style="display:none;">
<label class="col-sm-2 control-label">开始时间:</label>
<div class="col-sm-10">
<input name="startTime" value="" type="text" class="Wdate form-control validate[required,maxSize[60]]" onfocus="WdatePicker({lang:'zh-cn',dateFmt:'yyyy-MM-dd HH:mm'})" id="form-validation-field-0">
</div>
</div>
<div class="form-group unAllDay" style="display:none;">
<label class="col-sm-2 control-label">结束时间:</label>
<div class="col-sm-10">
<input name="endTime" value="" type="text" class="Wdate form-control validate[required,maxSize[60]]" onfocus="WdatePicker({lang:'zh-cn',dateFmt:'yyyy-MM-dd HH:mm'})" id="form-validation-field-0">
<span style="color:red;">如果是当天的日程，结束时间可以不填！</span>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">内容:</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="title" id="" placeholder="请输入内容">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">类型:</label>
<div class="col-sm-10">
<select id="color" name="color" class="form-control">
<option value="#3a87ad">普通</option>
<option value="red">紧急</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">完成状态:</label>
<div class="col-sm-10">
<select id="isFinish" name="isFinish" class="form-control">
<option value="0">未完成</option>
<option value="1">已完成</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" class="btn btn-success updateBtn">提交</button>
</div>
</div>
</form>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
</body>
<script src='js/jquery.min.js'></script>
<script src='js/bootstrap.min.js'></script>
<script src='js/moment.min.js'></script>
<script src='js/fullcalendar.min.js'></script>
<script src='js/lang-all.js'></script>
<script type="text/javascript">
$(document).ready(function() {
var initialLangCode = 'en';
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
weekends: true,
weekMode: 'liquid',
defaultView: 'month',
allDayText: '全天',
lang: initialLangCode,
businessHours: true,
defaultEventMinutes: 120,
eventLimit: true,
//点击或者拖动选中之后，点击日历外的空白区域是否取消选中状态 true为取消 false为不取消，只有重新选择时才会取消
unselectAuto: true,
eventClick : function( event ){
//do something here...
/* console.log('eventClick中选中Event的id属性值为：', event.id);
console.log('eventClick中选中Event的title属性值为：', event.title);
console.log('eventClick中选中Event的start属性值为：', event.start.format('YYYY-MM-DD HH:mm'));
console.log('eventClick中选中Event的end属性值为：', event.end==null?'无':event.end.format('YYYY-MM-DD HH:mm'));
console.log('eventClick中选中Event的color属性值为：', event.color);
console.log('eventClick中选中Event的className属性值为：', event.className); */
// ...
$("#updateForm").find(".onAllDay input[name=startTime]").val(event.start.format('YYYY-MM-DD'));
$("#updateForm").find(".unAllDay input[name=startTime]").val(event.start.format('YYYY-MM-DD HH:mm'));
if(event.end !== null){
$("#updateForm").find(".onAllDay input[name=endTime]").val(event.end.format('YYYY-MM-DD'));
$("#updateForm").find(".unAllDay input[name=endTime]").val(event.end.format('YYYY-MM-DD HH:mm'));
}
$("#updateForm").find("input[name=title]").val(event.title);
$("#updateForm").find("select[name=color]").val(event.color);
$("#updateForm").find("select[name=isFinish]").val(event.isFinish);
if(!event.allDay){
$("#updateForm").find("input[id=8allDayUpdate]").click();
}
$("#updateID").val(event.id);
$("#updateModal").modal('show');
},
dayClick : function( date ) {
//do something here...
console.log('dayClick触发的时间为：', date.format());
// ...
$("#addForm").find(".onAllDay input[name=startTime]").val(date.format('YYYY-MM-DD'));
$("#addForm").find(".unAllDay input[name=startTime]").val(date.format('YYYY-MM-DD HH:mm'));
$("#addModal").modal('show');
},
/* select: function( start, end ){
//alert(start);
//alert(end);
//do something here...
console.log('select触发的开始时间为：', start.format());
console.log('select触发的结束时间为：', end.format());
// ...
} */
//设置是否可被单击或者拖动选择
selectable: true,
//点击或者拖动选择时，是否显示时间范围的提示信息，该属性只在agenda视图里可用
selectHelper: true,
select: function(start, end) {
/* alert("11111111111111111111111111");
alert(start);
alert(end); */
var title = prompt('Event Title:');
var eventData;
if (title) {
eventData = {
title: title,
start: start,
end: end
};
$('#calendar').fullCalendar('renderEvent', eventData, false); // stick? = true
}
$('#calendar').fullCalendar('unselect');
},
eventMouseover : function( event ) {
//do something here...
console.log('鼠标经过 ...');
console.log('eventMouseover被执行，选中Event的title属性值为：', event.title);
// ...
},
eventMouseout : function( event ) {
//do something here...
console.log('eventMouseout被执行，选中Event的title属性值为：', event.title);
console.log('鼠标离开 ...');
// ...
},
//Event是否可被拖动或者拖拽
editable: true,
//Event被拖动时的不透明度
dragOpacity: 0.5,
eventDrop : function( event, dayDelta, revertFunc ) {
//do something here...
console.log('eventDrop --- start ---');
console.log('eventDrop被执行，Event的title属性值为：', event.title);
if(dayDelta._days != 0){
console.log('eventDrop被执行，Event的start和end时间改变了：', dayDelta._days+'天！');
}else if(dayDelta._milliseconds != 0){
console.log('eventDrop被执行，Event的start和end时间改变了：', dayDelta._milliseconds/1000+'秒！');
}else{
console.log('eventDrop被执行，Event的start和end时间没有改变！');
}
//revertFunc();
console.log('eventDrop --- end ---');
// ...
},
eventResize : function( event, dayDelta, revertFunc ) {
//do something here...
console.log(' --- start --- eventResize');
console.log('eventResize被执行，Event的title属性值为：', event.title);
if(dayDelta._days != 0){
console.log('eventResize被执行，Event的start和end时间改变了：', dayDelta._days+'天！');
}else if(dayDelta._milliseconds != 0){
console.log('eventResize被执行，Event的start和end时间改变了：', dayDelta._milliseconds/1000+'秒！');
}else{
console.log('eventResize被执行，Event的start和end时间没有改变！');
}
//revertFunc();
console.log('--- end --- eventResize');
// ...
},
events:
{
url: 'scheduleList',
type: 'post'
}
});
$('#lang-selector').append(
$('<option/>')
.attr('value', "en")
.prop('selected', "en" == initialLangCode)
.text("en")
).append(
$('<option/>')
.attr('value', "zh-cn")
.prop('selected', "zh-cn" == initialLangCode)
.text("zh-cn")
);
$('#lang-selector').on('change', function() {
if (this.value) {
$('#calendar').fullCalendar('option', 'lang', this.value);
}
});
});
</script>
</html>
创建日程管理(添加)Controller
package com.foreknow.controller;
import java.io.IOException;
import java.io.PrintWriter;
import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.time.chrono.JapaneseChronology;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.foreknow.model.Schedule;
import com.foreknow.service.ScheduleService;
import com.foreknow.service.impl.ScheduleServiceImpl;
import com.mysql.jdbc.Util;
/**
* Servlet implementation class ScheduleCreateController
*/
@WebServlet(name="/ScheduleCreateController",urlPatterns="/create")
public class ScheduleCreateController extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
PrintWriter out = response.getWriter();
Schedule schedule = new Schedule();
String title = request.getParameter("title");
String startTimeStr = request.getParameter("startTimeStr");
String endTimeStr = request.getParameter("endTimeStr");
String allDay = request.getParameter("allDay");
String color = request.getParameter("color");
String isFinish = request.getParameter("isFinish");
schedule.setTitle(title);
schedule.setStartTimeStr(startTimeStr);
schedule.setEndTimeStr(endTimeStr);
schedule.setAllDay(allDay);
schedule.setColor(color);
schedule.setIsFinish(isFinish);
ScheduleService scheduleService = new ScheduleServiceImpl();
String userID = "admin";
schedule.setUserID(userID);
if(schedule.getAllDay().endsWith("1")) {
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
try {
schedule.setStartTime(sdf.parse(schedule.getStartTimeStr()));
} catch (ParseException e) {
e.printStackTrace();
}
if(!schedule.getEndTimeStr().equals("")){
try {
schedule.setEndTime(sdf.parse(schedule.getEndTimeStr()));
} catch (ParseException e) {
e.printStackTrace();
}
}
}else {
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
try {
schedule.setStartTime(sdf.parse(schedule.getStartTimeStr()));
} catch (ParseException e) {
e.printStackTrace();
}
if(!schedule.getEndTimeStr().equals("")){
try {
schedule.setEndTime(sdf.parse(schedule.getEndTimeStr()));
} catch (ParseException e) {
e.printStackTrace();
}
}
}
if(schedule.getId()==null)
{
scheduleService.saveInfo(schedule);
//注意不能使用out.println();
out.print("SAVE");
}else
{
scheduleService.updateInfo(schedule);
//注意不能使用out.println();
out.print("UPDATE");
}
}
}
前台与创建日程交互
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="/WebDemoMVC/css/bootstrap.min.css?_v=1472701731737" media="screen" rel="stylesheet" type="text/css" />
<link href="/WebDemoMVC/js/fullcalendar.css?_v=1472701698015" media="screen" rel="stylesheet" type="text/css" />
<link href='js/fullcalendar.css' rel='stylesheet' />
<style>
#top {
background: #eee;
border-bottom: 1px solid #ddd;
padding: 0 10px;
line-height: 40px;
font-size: 12px;
}
#calendar {
margin: 40px auto;
padding: 0 10px;
}
.onFinish:before {
content:"【 已完成 】";
background-color:yellow;
color:green;
text-align:center;
font-weight:bold;
width:100%;
}
.unFinish:before {
content:"【 未完成 】";
background-color:yellow;
color:red;
text-align:center;
font-weight:bold;
}
</style>
</head>
<body>
<div id='top'>
Language:
<select id='lang-selector'></select>
</div>
<div id='calendar'></div>
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button onclick="hideModal('addModal');" type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="addModalLabel">新增</h4>
</div>
<div class="modal-body" id="addModalBody">
<form class="form-horizontal" id="addForm">
<div class="alert alert-info" role="alert"><strong>声明 !</strong> 如果日程时间精确到“天”请选择 <strong> 全天 </strong> ，如果精确到“时间”请选择 <strong> 非全天 </strong> ！</div>
<div class="form-group">
<label class="col-sm-2 control-label"> </label>
<div class="col-sm-10">
<div style="margin:auto;">
<p class="radio-p" class="allDayType">
<label class="js-radio-box" style="left:0%;">
<input type="radio" value="1" id="7allDayAdd" name="allDay" checked/><label class="genderLab" for="7allDayAdd" style="font-size: 15px;">全天</label>
<input type="radio" value="0" id="8allDayAdd" name="allDay" /><label class="genderLab" for="8allDayAdd" style="font-size: 15px;">非全天</label>
</label>
</p>
</div>
</div>
</div>
<div class="form-group onAllDay">
<label class="col-sm-2 control-label">开始时间:</label>
<div class="col-sm-10">
<input name="startTime" value="" type="text" class="Wdate form-control validate[required,maxSize[60]]" onfocus="WdatePicker({lang:'zh-cn',dateFmt:'yyyy-MM-dd'})" id="form-validation-field-0">
</div>
</div>
<div class="form-group onAllDay">
<label class="col-sm-2 control-label">结束时间:</label>
<div class="col-sm-10">
<input name="endTime" value="" type="text" class="Wdate form-control validate[required,maxSize[60]]" onfocus="WdatePicker({lang:'zh-cn',dateFmt:'yyyy-MM-dd'})" id="form-validation-field-0">
<span style="color:red;">如果是当天的日程，结束时间可以不填！</span>
</div>
</div>
<div class="form-group unAllDay" style="display:none;">
<label class="col-sm-2 control-label">开始时间:</label>
<div class="col-sm-10">
<input name="startTime" value="" type="text" class="Wdate form-control validate[required,maxSize[60]]" onfocus="WdatePicker({lang:'zh-cn',dateFmt:'yyyy-MM-dd HH:mm'})" id="form-validation-field-0">
</div>
</div>
<div class="form-group unAllDay" style="display:none;">
<label class="col-sm-2 control-label">结束时间:</label>
<div class="col-sm-10">
<input name="endTime" value="" type="text" class="Wdate form-control validate[required,maxSize[60]]" onfocus="WdatePicker({lang:'zh-cn',dateFmt:'yyyy-MM-dd HH:mm'})" id="form-validation-field-0">
<span style="color:red;">如果是当天的日程，结束时间可以不填！</span>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">内容:</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="title" id="" placeholder="请输入内容">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">类型:</label>
<div class="col-sm-10">
<select id="color" name="color" class="form-control">
<option value="#3a87ad">普通</option>
<option value="red">紧急</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">完成状态:</label>
<div class="col-sm-10">
<select id="isFinish" name="isFinish" class="form-control">
<option value="0">未完成</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" class="btn btn-success addBtn">提交</button>
</div>
</div>
</form>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
<div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="updatefLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button onclick="hideModal('updateModal');" type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="updateModalLabel">修改</h4>
</div>
<div class="modal-body" id="updateModalBody">
<form class="form-horizontal" id="updateForm">
<div class="alert alert-info" role="alert"><strong>声明 !</strong> 如果日程时间精确到“天”请选择 <strong> 全天 </strong> ，如果精确到“时间”请选择 <strong> 非全天 </strong> ！</div>
<div class="form-group">
<label class="col-sm-2 control-label"> </label>
<input type="hidden" class="form-control" name="id" id="updateID" value="">
<div class="col-sm-10">
<div style="margin:auto;">
<p class="radio-p" class="allDayType">
<label class="js-radio-box" style="left:0%;">
<input type="radio" value="1" id="7allDayUpdate" name="allDay" checked/><label class="genderLab" for="7allDayUpdate" style="font-size: 15px;">全天</label>
<input type="radio" value="0" id="8allDayUpdate" name="allDay" /><label class="genderLab" for="8allDayUpdate" style="font-size: 15px;">非全天</label>
</label>
</p>
</div>
</div>
</div>
<div class="form-group onAllDay">
<label class="col-sm-2 control-label">开始时间:</label>
<div class="col-sm-10">
<input name="startTime" value="" type="text" class="Wdate form-control validate[required,maxSize[60]]" onfocus="WdatePicker({lang:'zh-cn',dateFmt:'yyyy-MM-dd'})" id="form-validation-field-0">
</div>
</div>
<div class="form-group onAllDay">
<label class="col-sm-2 control-label">结束时间:</label>
<div class="col-sm-10">
<input name="endTime" value="" type="text" class="Wdate form-control validate[required,maxSize[60]]" onfocus="WdatePicker({lang:'zh-cn',dateFmt:'yyyy-MM-dd'})" id="form-validation-field-0">
<span style="color:red;">如果是当天的日程，结束时间可以不填！</span>
</div>
</div>
<div class="form-group unAllDay" style="display:none;">
<label class="col-sm-2 control-label">开始时间:</label>
<div class="col-sm-10">
<input name="startTime" value="" type="text" class="Wdate form-control validate[required,maxSize[60]]" onfocus="WdatePicker({lang:'zh-cn',dateFmt:'yyyy-MM-dd HH:mm'})" id="form-validation-field-0">
</div>
</div>
<div class="form-group unAllDay" style="display:none;">
<label class="col-sm-2 control-label">结束时间:</label>
<div class="col-sm-10">
<input name="endTime" value="" type="text" class="Wdate form-control validate[required,maxSize[60]]" onfocus="WdatePicker({lang:'zh-cn',dateFmt:'yyyy-MM-dd HH:mm'})" id="form-validation-field-0">
<span style="color:red;">如果是当天的日程，结束时间可以不填！</span>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">内容:</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="title" id="" placeholder="请输入内容">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">类型:</label>
<div class="col-sm-10">
<select id="color" name="color" class="form-control">
<option value="#3a87ad">普通</option>
<option value="red">紧急</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">完成状态:</label>
<div class="col-sm-10">
<select id="isFinish" name="isFinish" class="form-control">
<option value="0">未完成</option>
<option value="1">已完成</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" class="btn btn-success updateBtn">提交</button>
</div>
</div>
</form>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
</body>
<script src='js/jquery.min.js'></script>
<script src='js/bootstrap.min.js'></script>
<script src='js/moment.min.js'></script>
<script src='js/fullcalendar.min.js'></script>
<script src='js/lang-all.js'></script>
<script type="text/javascript">
$(document).ready(function() {
var initialLangCode = 'en';
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
weekends: true,
weekMode: 'liquid',
defaultView: 'month',
allDayText: '全天',
lang: initialLangCode,
businessHours: true,
defaultEventMinutes: 120,
eventLimit: true,
//点击或者拖动选中之后，点击日历外的空白区域是否取消选中状态 true为取消 false为不取消，只有重新选择时才会取消
unselectAuto: true,
eventClick : function( event ){
//do something here...
/* console.log('eventClick中选中Event的id属性值为：', event.id);
console.log('eventClick中选中Event的title属性值为：', event.title);
console.log('eventClick中选中Event的start属性值为：', event.start.format('YYYY-MM-DD HH:mm'));
console.log('eventClick中选中Event的end属性值为：', event.end==null?'无':event.end.format('YYYY-MM-DD HH:mm'));
console.log('eventClick中选中Event的color属性值为：', event.color);
console.log('eventClick中选中Event的className属性值为：', event.className); */
// ...
$("#updateForm").find(".onAllDay input[name=startTime]").val(event.start.format('YYYY-MM-DD'));
$("#updateForm").find(".unAllDay input[name=startTime]").val(event.start.format('YYYY-MM-DD HH:mm'));
if(event.end !== null){
$("#updateForm").find(".onAllDay input[name=endTime]").val(event.end.format('YYYY-MM-DD'));
$("#updateForm").find(".unAllDay input[name=endTime]").val(event.end.format('YYYY-MM-DD HH:mm'));
}
$("#updateForm").find("input[name=title]").val(event.title);
$("#updateForm").find("select[name=color]").val(event.color);
$("#updateForm").find("select[name=isFinish]").val(event.isFinish);
if(!event.allDay){
$("#updateForm").find("input[id=8allDayUpdate]").click();
}
$("#updateID").val(event.id);
$("#updateModal").modal('show');
},
dayClick : function( date ) {
//do something here...
console.log('dayClick触发的时间为：', date.format());
// ...
$("#addForm").find(".onAllDay input[name=startTime]").val(date.format('YYYY-MM-DD'));
$("#addForm").find(".unAllDay input[name=startTime]").val(date.format('YYYY-MM-DD HH:mm'));
$("#addModal").modal('show');
},
/* select: function( start, end ){
//alert(start);
//alert(end);
//do something here...
console.log('select触发的开始时间为：', start.format());
console.log('select触发的结束时间为：', end.format());
// ...
} */
//设置是否可被单击或者拖动选择
selectable: true,
//点击或者拖动选择时，是否显示时间范围的提示信息，该属性只在agenda视图里可用
selectHelper: true,
select: function(start, end) {
/* alert("11111111111111111111111111");
alert(start);
alert(end); */
var title = prompt('Event Title:');
var eventData;
if (title) {
eventData = {
title: title,
start: start,
end: end
};
$('#calendar').fullCalendar('renderEvent', eventData, false); // stick? = true
}
$('#calendar').fullCalendar('unselect');
},
eventMouseover : function( event ) {
//do something here...
console.log('鼠标经过 ...');
console.log('eventMouseover被执行，选中Event的title属性值为：', event.title);
// ...
},
eventMouseout : function( event ) {
//do something here...
console.log('eventMouseout被执行，选中Event的title属性值为：', event.title);
console.log('鼠标离开 ...');
// ...
},
//Event是否可被拖动或者拖拽
editable: true,
//Event被拖动时的不透明度
dragOpacity: 0.5,
eventDrop : function( event, dayDelta, revertFunc ) {
//do something here...
console.log('eventDrop --- start ---');
console.log('eventDrop被执行，Event的title属性值为：', event.title);
if(dayDelta._days != 0){
console.log('eventDrop被执行，Event的start和end时间改变了：', dayDelta._days+'天！');
}else if(dayDelta._milliseconds != 0){
console.log('eventDrop被执行，Event的start和end时间改变了：', dayDelta._milliseconds/1000+'秒！');
}else{
console.log('eventDrop被执行，Event的start和end时间没有改变！');
}
//revertFunc();
console.log('eventDrop --- end ---');
// ...
},
eventResize : function( event, dayDelta, revertFunc ) {
//do something here...
console.log(' --- start --- eventResize');
console.log('eventResize被执行，Event的title属性值为：', event.title);
if(dayDelta._days != 0){
console.log('eventResize被执行，Event的start和end时间改变了：', dayDelta._days+'天！');
}else if(dayDelta._milliseconds != 0){
console.log('eventResize被执行，Event的start和end时间改变了：', dayDelta._milliseconds/1000+'秒！');
}else{
console.log('eventResize被执行，Event的start和end时间没有改变！');
}
//revertFunc();
console.log('--- end --- eventResize');
// ...
},
events:
{
url: 'scheduleList',
type: 'post'
}
});
$('#lang-selector').append(
$('<option/>')
.attr('value', "en")
.prop('selected', "en" == initialLangCode)
.text("en")
).append(
$('<option/>')
.attr('value', "zh-cn")
.prop('selected', "zh-cn" == initialLangCode)
.text("zh-cn")
);
$('#lang-selector').on('change', function() {
if (this.value) {
$('#calendar').fullCalendar('option', 'lang', this.value);
}
});
$("#addForm").find("input[type=radio]").each(function(){
var $this = $(this);
$this.bind("click",function(){
if($this.val() == 1){
$("#addForm").find(".onAllDay").show();
$("#addForm").find(".unAllDay").hide();
}else{
$("#addForm").find(".onAllDay").hide();
$("#addForm").find(".unAllDay").show();
}
});
});
$(".addBtn").unbind("click").bind("click",function(){
//alert("333333333333333333333");
var title = $("#addForm").find("input[name=title]").val();
var startTime = "";
var endTime ="";
var allDay = $("#addForm").find("input[type=radio]:checked").val();
if(allDay == 1){
startTime = $("#addForm").find(".onAllDay input[name=startTime]").val();
endTime = $("#addForm").find(".onAllDay input[name=endTime]").val();
if(endTime == ""){
endTime = null;
}
}else{
startTime = $("#addForm").find(".unAllDay input[name=startTime]").val();
endTime = $("#addForm").find(".unAllDay input[name=endTime]").val();
if(endTime == ""){
endTime = null;
}
}
var color = $("#addForm").find("select[name=color]").val();
var isFinish = $("#addForm").find("select[name=isFinish]").val();
var addData = {
"title":title,
"startTimeStr":startTime,
"endTimeStr":endTime,
"allDay":allDay,
"color":color,
"isFinish":isFinish
};
$.ajax({
url: 'create',
type: 'post',
data: addData,
dataType: 'text',
success:function(d){
alert(d);
if(d == "SAVE"){
//alert("successfully!");
location.reload();
}else{
alert("error!");
}
}
});
});
});
</script>
</html>
