使用FullCalendar做一个自己的日程管理（三）- 持久化篇

FullCalendar is a drag-n-drop jQuery plugin for displaying events on a full-sized calendar.

---

本文示例下载地址：FullCalendar示例

---

数据库设计

以下是一个比较简单的数据库表的设计，除了FullCalendar中Event需要的一些内容（”ID标识”、”日程内容”、”开始时间”、”结束时间”和”全天标识”）外，”颜色”可以用来区分日程的紧急程度，”用户ID”可以帮助我们按照用户来检索日程集合，”是否完成”可以通过Event的className来为日程添加特殊标识.

CREATE TABLE `Schedule` (
  `id` varchar(32) NOT NULL COMMENT 'ID',
  `title` varchar(100) DEFAULT NULL COMMENT '日程内容',
  `startTime` datetime DEFAULT NULL COMMENT '开始时间',
  `endTime` datetime DEFAULT NULL COMMENT '结束时间',
  `allDay` varchar(2) DEFAULT NULL COMMENT '是否全天，1 - 是，0 - 不是',
  `color` varchar(20) DEFAULT NULL COMMENT '颜色',
  `userID` varchar(32) DEFAULT NULL COMMENT '用户ID',
  `isFinish` varchar(2) DEFAULT '0' COMMENT '是否完成，1 - 是，0 - 不是',
  `createTime` datetime DEFAULT NULL COMMENT '创建时间',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

实体类

首先是和数据库Schedule表对应的实体类。

public class Schedule
{
    private static final long serialVersionUID = 1L;
    private java.lang.String 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;//创建时间

    public AbstractCRMSchedule()
    {

    }
    public java.lang.String getId()
    {
        return this.id;
    }
    public void setId(java.lang.String 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;
    }
}

然后需要定义一个Event类，用来转换成对应的JSON来传给FullCalendar进行展示，所以需要和FullCalendar定义的Event参数进行匹配。

• id — id
• title — title
• startTime — start
• endTime — end
• allDay — allDay
• color — color
• isFinish — className

public class Event
{
    private java.lang.String 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 className;
    public java.lang.String getId() 
    {
        return id;
    }
    public void setId(java.lang.String 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;
    }
}

接口API设计

（1）添加 / 修改

HTTP方法：POST

接口地址：.../create?{参数名}={值}&{参数名}={值}...

URL参数说明表：

参数名       数据类型      是否可空        参数描述

id          string       不可空        日程标识，如果是添加可以为空
title       string       不可空        日程内容
start       string       不可空        日程开始时间
end         string       可以为空       日程结束时间
color       string       不可空        日程紧急程度，有默认值
allDay      string       不可空        全天标识
className   string       不可空        样式名称，有默认值 

接口返回内容：

//失败
{
"code":1,
"data":null,
"desc":"ERROR!"
}

或

//成功
{
"code":0,
"data":{Event.id},
"desc":"SUCCESS!"
}

（2）根据ID获取Event的基本信息

HTTP方法：POST

接口地址：.../getScheduleInfoByID?{参数名}={值}

URL参数说明表：

参数名       数据类型      是否可空        参数描述

id          string       不可空        被选择的日程标识

接口返回内容：

//失败
{
"code":1,
"data":null,
"desc":"ERROR!"
}

或

//成功
{
"code":0,
"data":{Event.id},
"desc":"SUCCESS!"
}

（3）Event数据源

HTTP方法：GET

接口地址：.../scheduleList

接口返回内容：

//失败
{
"code":1,
"data":null,
"desc":"ERROR!"
}

或

//成功
{
"code":0,
"data":{Events},
"desc":"SUCCESS!"
}

FullCalendar的配置

（1）配置数据源

FullCalendar中events的写法可以改为：

events: 
{
    url: 'scheduleList',  
    type: 'get' 
}

（2）配置事件操作

1.”鼠标点击事件”和”鼠标选择事件”

这两种事件在触发时，可以使用Boodstrap或者FancyBox的弹出层展示基本数据的录入模块，内容校验通过且用户在点击保存时，触发”添加”的Ajax请求，通过对应API完成信息录入。

2.鼠标悬浮事件

当鼠标经过或者离开Event数据时，我们可以”隐藏 / 显示”浮动DIV来展示Event更多的内容，并让浮动DIV的位置跟随鼠标，可以有很好的交互效果。

3.”鼠标拖动事件”和”鼠标拖拽事件”

这两种事件在触发时，首先需要根据被拖动Event的ID和对应的API查询当前Event的基本信息，然后使用Boodstrap或者FancyBox的弹出层展示基本数据给用户，用户在编辑完成之后，并在内容校验通过且用户在点击修改时，触发”修改”的Ajax请求，通过对应API完成信息的修改。

查看原文