【java web】 fullCalendar日历控件！【精】

第一次写博文！

最近研究了一下fullCalendar  ，后台用的是java spring mvc， 前端是基于ace框架 分享给大家 【增删改查】有实时的下拉框选中，显示条件信息

dao层代码就不写了 都是增删改查，我就写一下 action还有servicede impl了 还有web前端的

上代码

model层代码

package com.model;import java.io.Serializable;import java.util.Date;import javax.persistence.Column;import javax.persistence.Entity;import javax.persistence.GeneratedValue;import javax.persistence.Id;import javax.persistence.OneToOne;import javax.persistence.Table;/** * 专家课程表 */@Entity@Table(name = "t_fullCalendar")public class FullCalendar implements Serializable {private static final long serialVersionUID = 8987284144577508074L;@Id@GeneratedValue@Column(name = "id", unique = true, nullable = false)private Integer id;// 主键@Column(name = "title", length = 100, nullable = false)private String title;// 标题;@Column(name = "startDate", length = 100, nullable = false, updatable = false)private String startDate;// 开始时间@Column(name = "endDate", length = 100, nullable = false, updatable = false)private String endDate;// 结束时间@Column(name = "ifAllDay", length = 100, nullable = false)private Boolean ifAllDay;// 是否全天@Column(name = "adminid", length = 100,updatable = false)private Integer adminid;// 用户id@Column(name = "adminName", length = 100,updatable = false)private String adminName;// 用户名字@Column(name = "color", length = 100)private String color;// 颜色状态   1绿色,2灰色,3橙色public Integer getId() {return id;}public void setId(Integer id) {this.id = id;}public String getTitle() {return title;}public void setTitle(String title) {this.title = title;}public void setIfAllDay(Boolean ifAllDay) {this.ifAllDay = ifAllDay;}public String getStartDate() {return startDate;}public void setStartDate(String startDate) {this.startDate = startDate;}public String getEndDate() {return endDate;}public void setEndDate(String endDate) {this.endDate = endDate;}public Boolean getIfAllDay() {return ifAllDay;}public Integer getAdminid() {return adminid;}public void setAdminid(Integer adminid) {this.adminid = adminid;}public String getAdminName() {return adminName;}public void setAdminName(String adminName) {this.adminName = adminName;}public String getColor() {return color;}public void setColor(String color) {this.color = color;}public FullCalendar() {super();}}

service层代码

package com.service.impl;import java.util.List;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Service;import org.springframework.transaction.annotation.Isolation;import org.springframework.transaction.annotation.Propagation;import org.springframework.transaction.annotation.Transactional;import com.dao.ExpertOneselfClientDao;import com.model.FullCalendar;import com.service.ExpertOneselfClientService;import com.service.FullCalendarClientService;@Service("expertOneselfServiceClient")public class IExpertOneselfClientService implements ExpertOneselfClientService {private ExpertOneselfClientDao expertOneselfClientDao;public ExpertOneselfClientDao getExpertOneselfClientDao() {return expertOneselfClientDao;}@Autowiredpublic void setExpertOneselfClientDao(ExpertOneselfClientDao expertOneselfClientDao) {this.expertOneselfClientDao = expertOneselfClientDao;}/** * 添加 */@Transactional(isolation = Isolation.READ_COMMITTED, propagation = Propagation.REQUIRED)public String insertCalendar(FullCalendar fullCalendar) {expertOneselfClientDao.insert(fullCalendar);return null;}/** * 修改 */@Transactional(isolation = Isolation.READ_COMMITTED, propagation = Propagation.REQUIRED)public String upCalendar(FullCalendar fullCalendar) {expertOneselfClientDao.saveOrUpdate(fullCalendar);return null;}/** * 删除 * @param end  * @param start  */@Transactional(isolation = Isolation.READ_COMMITTED, propagation = Propagation.REQUIRED)public String delCalendar(String name, String start, String end) {String sql = "delete from FullCalendar where adminName = '"+name+"' and startDate BETWEEN convert(date,'"+start+"') AND convert(date,'"+end+"') AND endDate  BETWEEN convert(date,'"+start+"') AND convert(date,'"+end+"')";expertOneselfClientDao.deleteSql(sql);return null;}/** * 查询专家 根据 用户id */public List<Object> queryAllById(String start, String end,Integer id) {List<Object> list = null;String hql = "from FullCalendar where adminId="+id+" and startDate BETWEEN convert(date,'"+start+"') AND convert(date,'"+end+"') AND endDate  BETWEEN convert(date,'"+start+"') AND convert(date,'"+end+"')";list = expertOneselfClientDao.query(hql);return list;}/** * 查询专家 */public List<Object> queryAll(String start, String end, String expertName) {List<Object> list = null;String hql = "from FullCalendar where startDate BETWEEN convert(date,'"+start+"') AND convert(date,'"+end+"') AND endDate  BETWEEN convert(date,'"+start+"') AND convert(date,'"+end+"') AND adminName = '"+expertName+"'";list = expertOneselfClientDao.query(hql);return list;}/** * 根于id改预约状态 * @param id * @return */public void bespeak(String id) {String sql = "update FullCalendar set color = '3' where id = "+id+"";expertOneselfClientDao.updateSql(sql);}}

action层代码

package com.action;import java.io.IOException;import java.text.ParseException;import java.text.SimpleDateFormat;import java.util.Date;import java.util.List;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import javax.servlet.http.HttpSession;import net.sf.json.JSONArray;import org.apache.log4j.Logger;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.RequestParam;import com.common.Constants;import com.model.FullCalendar;import com.service.impl.IExpertOneselfClientService;import com.service.impl.ILogTableTableService;/** * 专家日程Client----自己看自己的 *  * @author 裴广庭 *  */@Controller@RequestMapping(value = "/expertOneselfClient")public class ExpertOneselfClientAction {private ILogTableTableService logTableTableService;private Logger log = Logger.getLogger(ExpertOneselfClientAction.class);private IExpertOneselfClientService expertOneselfClientService;public IExpertOneselfClientService getExpertOneselfClientService() {return expertOneselfClientService;}@Autowiredpublic void setExpertOneselfClientService(IExpertOneselfClientService expertOneselfClientService) {this.expertOneselfClientService = expertOneselfClientService;}public ILogTableTableService getLogTableTableService() {return logTableTableService;}@Autowiredpublic void setLogTableTableService(ILogTableTableService logTableTableService) {this.logTableTableService = logTableTableService;}/** * 跳转到专家日程 *  * @return */@RequestMapping(value = "/main", method = RequestMethod.GET)public String main() {return "client/expertOneself/page/expertOneself_client";}/** * 显示专家日程 *  * @param request * @param response * @param session * @throws IOException */@RequestMapping(value = "/doList", method = RequestMethod.POST)public void doList(HttpServletRequest request,HttpServletResponse response, HttpSession session)throws IOException {Integer id = (Integer) session.getAttribute("id");String start = request.getParameter("start");String end = request.getParameter("end");List<Object> list = null;list = expertOneselfClientService.queryAllById(start, end, id);JSONArray datas = JSONArray.fromObject(list);response.setCharacterEncoding(Constants.ENCODING_UTF8);response.getWriter().print(datas.toString());}/** * 添加 *  * @param request * @param session * @param response * @param name * @param start * @param end * @param allDay * @throws IOException * @throws ParseException */@RequestMapping(value = "/fullCalendarAdd", method = RequestMethod.POST)public void fullCalendar(HttpServletRequest request, HttpSession session,HttpServletResponse response,@RequestParam(value = "titleName") String titleName,@RequestParam(value = "start") Date start,@RequestParam(value = "end") Date end,@RequestParam(value = "eightColor") String eightColor,// 时间段8-10@RequestParam(value = "tenColor") String tenColor,// 时间段10-12@RequestParam(value = "thirteenColor") String thirteenColor,// 时间段13-15@RequestParam(value = "fifteenColor") String fifteenColor,// 时间段15-17@RequestParam(value = "allDay") Boolean allDay) throws IOException,ParseException {Integer adminId = (Integer) session.getAttribute("id");String adminName = (String) session.getAttribute("adminName");String[] array = { eightColor, tenColor, thirteenColor, fifteenColor };for (int i = 0; i < array.length; i++) {UpdateStatement(array[i], i, adminId, adminName, titleName, start,end, eightColor, tenColor, thirteenColor, fifteenColor,allDay);}// 日志记录String name = (String) session.getAttribute("adminName");String state1 = "专家日程_添加";String jd = (String) session.getAttribute("jurisdiction");logTableTableService.log(name, state1, jd);log.info("doEdit  登录时间" + new Date() + "登录人"+ session.getAttribute("adminName"));}/** * 根据时间条件 依次添加数据库  * @param array 颜色状态 -- 1绿色,2灰色 * @param i4个时间状态个数 * @param adminId用户id * @param adminName用户名字 * @param titleName标题内容 * @param start几月几号  开始时间 * @param end几月几号结束时间 * @param eightColor8点-10点 * @param tenColor10点-12点 * @param thirteenColor13点-15点 * @param fifteenColor15点-17点 * @param allDay是否全天 */private void UpdateStatement(String array, int i, Integer adminId,String adminName, String titleName, Date start, Date end,String eightColor, String tenColor, String thirteenColor,String fifteenColor, Boolean allDay) {FullCalendar fullCalendar = new FullCalendar();if (i == 0) {SimpleDateFormat sf = new SimpleDateFormat("yyyy-MM-dd");String sDate = sf.format(start) + " 08:00:00";String eDate = sf.format(end) + " 10:00:00";fullCalendar.setTitle(titleName);fullCalendar.setStartDate(sDate);fullCalendar.setEndDate(eDate);fullCalendar.setIfAllDay(allDay);fullCalendar.setAdminid(adminId);fullCalendar.setAdminName(adminName);fullCalendar.setColor(eightColor);expertOneselfClientService.insertCalendar(fullCalendar);}else if(i == 1){SimpleDateFormat sf = new SimpleDateFormat("yyyy-MM-dd");String sDate = sf.format(start) + " 10:00:00";String eDate = sf.format(end) + " 12:00:00";fullCalendar.setTitle(titleName);fullCalendar.setStartDate(sDate);fullCalendar.setEndDate(eDate);fullCalendar.setIfAllDay(allDay);fullCalendar.setAdminid(adminId);fullCalendar.setAdminName(adminName);fullCalendar.setColor(tenColor);expertOneselfClientService.insertCalendar(fullCalendar);}else if(i == 2){SimpleDateFormat sf = new SimpleDateFormat("yyyy-MM-dd");String sDate = sf.format(start) + " 13:00:00";String eDate = sf.format(end) + " 15:00:00";fullCalendar.setTitle(titleName);fullCalendar.setStartDate(sDate);fullCalendar.setEndDate(eDate);fullCalendar.setIfAllDay(allDay);fullCalendar.setAdminid(adminId);fullCalendar.setAdminName(adminName);fullCalendar.setColor(thirteenColor);expertOneselfClientService.insertCalendar(fullCalendar);}else if(i == 3){SimpleDateFormat sf = new SimpleDateFormat("yyyy-MM-dd");String sDate = sf.format(start) + " 15:00:00";String eDate = sf.format(end) + " 17:00:00";fullCalendar.setTitle(titleName);fullCalendar.setStartDate(sDate);fullCalendar.setEndDate(eDate);fullCalendar.setIfAllDay(allDay);fullCalendar.setAdminid(adminId);fullCalendar.setAdminName(adminName);fullCalendar.setColor(fifteenColor);expertOneselfClientService.insertCalendar(fullCalendar);}}/** * 修改 *  * @param request * @param session * @param response * @param id * @param name * @param allDay * @throws IOException * @throws ParseException */@RequestMapping(value = "/fullCalendarEdit", method = RequestMethod.POST)public void fullCalendarEdit(HttpServletRequest request,HttpSession session, HttpServletResponse response,@RequestParam(value = "id") Integer id,@RequestParam(value = "name") String name,@RequestParam(value = "color") String color,@RequestParam(value = "allDay") Boolean allDay) throws IOException,ParseException {FullCalendar fullCalendar = new FullCalendar();fullCalendar.setId(id);fullCalendar.setTitle(name);fullCalendar.setIfAllDay(allDay);fullCalendar.setColor(color);expertOneselfClientService.upCalendar(fullCalendar);// 日志记录String name1 = (String) session.getAttribute("adminName");String state1 = "专家日程_修改";String jd = (String) session.getAttribute("jurisdiction");logTableTableService.log(name1, state1, jd);log.info("doEdit  登录时间" + new Date() + "登录人"+ session.getAttribute("adminName"));}/** * 删除 *  * @param request * @param session * @param response * @param id * @throws IOException * @throws ParseException */@RequestMapping(value = "/fullCalendarDel", method = RequestMethod.POST)public void fullCalendarDel(HttpServletRequest request,HttpSession session, HttpServletResponse response,@RequestParam(value = "name") String name) throws IOException,ParseException {String start = request.getParameter("start");String end = request.getParameter("end");expertOneselfClientService.delCalendar(name,start,end);// 日志记录String name1 = (String) session.getAttribute("adminName");String state1 = "专家日程_删除";String jd = (String) session.getAttribute("jurisdiction");logTableTableService.log(name1, state1, jd);log.info("doEdit  登录时间" + new Date() + "登录人"+ session.getAttribute("adminName"));}/** * 添加时查询当前用户当天是否添加过日程 *  * @param request * @param response * @param session * @throws IOException */@RequestMapping(value = "/queryCalendearByName", method = RequestMethod.POST)public void queryCalendearByName(HttpServletRequest request,HttpServletResponse response,HttpSession session)throws IOException {String adminName = (String) session.getAttribute("adminName");String start = request.getParameter("start");String end = request.getParameter("end");List<Object> list = expertOneselfClientService.queryAll(start,end,adminName);JSONArray jsonArray = JSONArray.fromObject(list);response.setCharacterEncoding(Constants.ENCODING_UTF8);response.getWriter().print(jsonArray.toString());}/** * 游客预约时  修改状态 *  * @param request * @param response * @param session * @throws IOException */@RequestMapping(value = "/bespeakExpert", method = RequestMethod.POST)public void bespeakExpert(HttpServletRequest request,HttpServletResponse response,HttpSession session)throws IOException {String id = request.getParameter("id");String userName = request.getParameter("userName");expertOneselfClientService.bespeak(id);response.getWriter().print("1");}}

前台jsp代码

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8" import="java.util.List"%><%@page import="com.model.FullCalendar"%> <%String root = request.getContextPath();  %><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="en"><link href="<%=root%>/Web/css/bootstrap.min.css" rel="stylesheet" /><link rel="stylesheet" href="<%=root%>/Web/css/font-awesome.min.css" /><link rel="stylesheet" href="<%=root%>/Web/css/fullcalendar.css" /><link rel="stylesheet" href="<%=root%>/Web/css/ace.min.css" /><link rel="stylesheet" href="<%=root%>/Web/css/ace-rtl.min.css" /><link rel="stylesheet" href="<%=root%>/Web/css/ace-skins.min.css" /><script src="<%=root%>/Web/js/ace-extra.min.js"></script><link rel="stylesheet" href="<%=root%>/Web/css/Lobibox.min.css"/><script type="text/javascript">var root = "<%=root%>"; //js中存放当前页面的root路径方便调用</script><body><div class="breadcrumbs" id="breadcrumbs"><ul class="breadcrumb" style="margin-top: 8px"><li><i class="icon-home home-icon"></i></li><li class="active">专家时间表</li></ul></div><div class="page-content"><div class="row"><div class="col-xs-12"><!-- PAGE CONTENT BEGINS --><div class="row"><div class="col-sm-9"><div id="calendar"></div></div></div><!-- PAGE CONTENT ENDS --></div><!-- /.col --></div><!-- /.row --></div><!-- /.page-content --><div id="caozuo" class="modal"><div class="modal-dialog" ><div class="modal-content"><div class="table"><div class="form-group"><label class="col-sm-3 control-label no-padding-right"for="form-field-1"> 创建一个新的日程</label><div class="col-sm-9"><textarea class="form-control input-focused" id="titleName" maxlength = "50" placeholder="日程名称"></textarea><div id="message" style="color: red;"></div></div></div><br/><br/><br/><br/><br/><div class="form-group"><label class="control-label col-xs-12 col-sm-3 no-padding-right">8:00-10:00</label><div class="col-xs-12 col-sm-9"><div><label> <input name="eightColor" value="1" checked type="radio" class="ace" /> <span class="lbl" style="color:green;font-weight:bold;"> 空闲  </span> </label><label> <input name="eightColor" value="2" type="radio" class="ace" /> <span class="lbl" style="color:gray;font-weight:bold;"> 锁定  </span> </label><label> <input name="eightColor" value="3" type="radio" class="ace" /> <span class="lbl" style="color:orange;font-weight:bold;"> 预约  </span> </label></div></div></div><br/><div class="form-group"><label class="control-label col-xs-12 col-sm-3 no-padding-right">10:00-12:00</label><div class="col-xs-12 col-sm-9"><div><label> <input name="tenColor" value="1" checked type="radio" class="ace" /> <span class="lbl" style="color:green;font-weight:bold;"> 空闲  </span> </label><label> <input name="tenColor" value="2" type="radio" class="ace" /> <span class="lbl" style="color:gray;font-weight:bold;"> 锁定  </span> </label><label> <input name="tenColor" value="3" type="radio" class="ace" /> <span class="lbl" style="color:orange;font-weight:bold;"> 预约  </span> </label></div></div></div><br/><div class="form-group"><label class="control-label col-xs-12 col-sm-3 no-padding-right">13:00-15:00</label><div class="col-xs-12 col-sm-9"><div><label> <input name="thirteenColor" value="1" checked type="radio" class="ace" /> <span class="lbl" style="color:green;font-weight:bold;"> 空闲  </span> </label><label> <input name="thirteenColor" value="2" type="radio" class="ace" /> <span class="lbl" style="color:gray;font-weight:bold;"> 锁定  </span> </label><label> <input name="thirteenColor" value="3" type="radio" class="ace" /> <span class="lbl" style="color:orange;font-weight:bold;"> 预约  </span> </label></div></div></div><br/><div class="form-group"><label class="control-label col-xs-12 col-sm-3 no-padding-right">15:00-17:00</label><div class="col-xs-12 col-sm-9"><div><label> <input name="fifteenColor" value="1" checked type="radio" class="ace" /> <span class="lbl" style="color:green;font-weight:bold;"> 空闲  </span> </label><label> <input name="fifteenColor" value="2" type="radio" class="ace" /> <span class="lbl" style="color:gray;font-weight:bold;"> 锁定  </span> </label><label> <input name="fifteenColor" value="3" type="radio" class="ace" /> <span class="lbl" style="color:orange;font-weight:bold;"> 预约  </span> </label></div></div></div><br/></div><div class="modal-footer"><button class="btn btn-sm btn-success"  id="onSubmit"><i class='icon-ok'></i> 添加</button><button class="btn btn-sm "  data-dismiss="modal" id="close"><i class="icon-remove"></i> 关闭</button></div></div></div></div><a href="#caozuo" id="jd" data-toggle='modal' class='tooltip-info' data-rel='tooltip' title='View'></a><script src="<%=root%>/Web/js/jquery-2.1.1.min.js"></script><script src="<%=root%>/Web/js/bootstrap.min.js"></script><script src="<%=root%>/Web/js/typeahead-bs2.min.js"></script><!-- page specific plugin scripts --><script src="<%=root%>/Web/js/jquery-ui-1.10.3.custom.min.js"></script><script src="<%=root%>/Web/js/jquery.ui.touch-punch.min.js"></script><script src="<%=root%>/Web/js/fullcalendar.min.js"></script><script src="<%=root%>/Web/js/bootbox.min.js"></script><script type="text/javascript" src="<%=root%>/Web/js/lobibox.min.js"></script><script type="text/javascript" src="<%=root%>/Web/js/demo.js"></script><script src="<%=root%>/Web/client/expertOneself/js/expertOneself_client.js"></script></body></html>

前台js代码

/** * 链接数据库 * @param url 连接地址 * @param data 传入参数 * @param method 回调方法 */var getAjaxFun = function (url, data, method) {    $.ajax({        async: false,        cache: false,        type: 'POST',        dataType: "json",        url: url,        data: data,        success: function (data) {   //请求成功            method(data);        },        // 请求的action路径        error: function () {        // 请求失败处理函数            Lobibox.alert('error', {                msg: "请求失败！"            });        }    });};(function ($) {    var calendar;    //日历初始化    function calendarInit() {        calendar = $('#calendar').fullCalendar({            firstDay: 1,//每周开始的日期：0为周日            isRTL: false,//是否从右至左组织日历            weekends: true,//是否显示周末            defaultView: 'month',//初始化时的默认视图，month、agendaWeek、agendaDay            allDaySlot: true,//agenda视图下是否显示all-day            allDayText: '今日',//agenda视图下all-day的显示文本            slotMinutes: 30,//agenda视图下两个相邻时间之间的间隔            eventLimit: true,            allDayDefault: false,            //设置头部信息，如果不想显示，可以设置header为false            header: {                //日历头部左边：初始化切换按钮                left: 'prev,next today',                //日历头部中间：显示当前日期信息                center: 'title',                //日历头部右边：初始化视图                right: 'month,agendaWeek,agendaDay'            },            editable: false,//是否可拖拽            droppable: false, //这允许事情被扔到日历上！！！            selectable: true,//是否选中对应元素            selectHelper: false,            events: calendearSelect,//初始化日程表            select: calendearAdd,            eventClick: calendearSelectEdit,            eventMouseover: calendearMouseover        });    }    //读取日历数据    function calendearSelect(start, end, callback) {        //只显示本页数据        var fstart = $.fullCalendar.formatDate(start, "yyyy-MM-dd HH:mm:ss");        var fend = $.fullCalendar.formatDate(end, "yyyy-MM-dd HH:mm:ss");        getAjaxFun(root + "/expertOneselfClient/doList", {            "start": fstart,            "end": fend        }, function (reData) {            var events = [];            for (var i = 0; i < reData.length; i++) {                var array_element = reData[i];                var title = array_element.adminName + ":" + array_element.title;                if (array_element != null) {                    var color = "";                    if (array_element.color == 1) {                        color = "green";                    } else if(array_element.color == 2){                        color = "gray";                    } else if(array_element.color == 3){                    color = "orange";                    }                    var tjson = {                        id: array_element.id,                        title: title,                        start: array_element.startDate,                        end: array_element.endDate,                        color: color,                        allDay: array_element.ifAllDay                    };                    events.push(tjson);                }            }            callback(events);        });    }    //添加    function calendearAdd(start, end, allDay) {    var aa = queryCalendearByName(start, end, allDay);    if(aa != ""){    Lobibox.alert('success', {    msg: "一个用户一天只能添加4条日程",    });    return;    }        document.getElementById("jd").click();        $("#titleName").val("");        $("#expertMe").html("");        $("#message").html("");        //摧毁上次绑定的事件        $("#onSubmit").unbind();        $("#onSubmit").click(function () {            if ($("#titleName").val() != "") {                calendar.fullCalendar('renderEvent',                    {                        title: $("#titleName").val(),                        start: start,                        end: end,                        allDay: allDay                    },                    true, // make the event "stick"                    document.getElementById("close").click()                );                Lobibox.alert('success', {                    msg: "添加成功",                    callback: function ($this, type, ev) {                        window.location.reload();                        //$('#calendar').fullCalendar('refetchEvents');                    }                });            } else {                $("#message").html("请输入日程");                return;            }            calendar.fullCalendar('unselect');            //var color = $("input[type='radio']:checked").val();            var one = "";            var two = "";            var three = "";            var four = "";            var eightColor = document.getElementsByName("eightColor");            var tenColor = document.getElementsByName("tenColor");            var thirteenColor = document.getElementsByName("thirteenColor");            var fifteenColor = document.getElementsByName("fifteenColor");            for (var i = 0; i < eightColor.length; i++) {                if (eightColor[i].checked)one = eightColor[i].value;            }            for (var i = 0; i < tenColor.length; i++) {                if (tenColor[i].checked)two = tenColor[i].value;            }            for (var i = 0; i < thirteenColor.length; i++) {                if (thirteenColor[i].checked)three = thirteenColor[i].value;            }            for (var i = 0; i < fifteenColor.length; i++) {                if (fifteenColor[i].checked)four = fifteenColor[i].value;            }            //val = 1 绿色空闲，val = 2 灰色锁定            $.ajax({                async: false,                cache: false,                type: 'POST',                dataType: "text",                data: {                    "titleName": $("#titleName").val(),                    "start": start,                    "end": end,                    "eightColor": one, //8点-10点                    "tenColor": two, //10点-12点                    "thirteenColor": three,//13点-15点                    "fifteenColor": four,//15点-17点                    "allDay": allDay                },                url: root + "/expertOneselfClient/fullCalendarAdd",                //请求的action路径                error: function () { //请求失败处理函数                    Lobibox.alert('error', {                        msg: "请求失败",                        callback: function ($this, type, ev) {                            window.location.reload();                        }                    });                }            });        });    }        //添加之前查询  这个专家 当日 是否添加过日程    function queryCalendearByName(start, end, allDay){    var judge;    var fstart = $.fullCalendar.formatDate(start, "yyyy-MM-dd HH:mm:ss");        var fend = $.fullCalendar.formatDate(end, "yyyy-MM-dd HH:mm:ss");    getAjaxFun(root + "/expertOneselfClient/queryCalendearByName", {            "start": fstart,            "end": fend        }, function (reData) {        judge = reData;        });    return judge;    }    //修改    function calendearSelectEdit(calEvent, jsEvent, view) {        var fstart = $.fullCalendar.formatDate(calEvent.start, "HH:mm");        var fend = $.fullCalendar.formatDate(calEvent.end, "HH:mm");        var start = $.fullCalendar.formatDate(calEvent.start, "yyyy-MM-dd HH:mm:ss");        var end = $.fullCalendar.formatDate(calEvent.end, "yyyy-MM-dd HH:mm:ss");        var str = "";        var reg = /[^:]*:([^:]*)/;        str = calEvent.title.replace(reg, "$1");        //截取冒号之前  取专家名字        var adminName = calEvent.title.substr(0, calEvent.title.indexOf(':'));        var form = $("<form class='form-inline'><lable>修改日程 </lable><div class='modal'></form>");        form.append("<textarea class='form-control input-focused' id='textarea' maxlength = '50' autocomplete=off placeholder='日程名称'>" + str + "</textarea><div id='messageEdit' style='color: red;'></div>");        form.append("时间段：");        form.append("<form class='form-inline'><label>" + fstart + "-" + fend + "  </label></form>");        if (calEvent.color == "green") {            form.append("<label class='blue'> <input name='colorEdit' value='1' checked type='radio' class='ace' /> <span class='lbl' style='color:green;font-weight:bold;'> 空闲  </span> </label>");            form.append("<label class='blue'> <input name='colorEdit' value='2' type='radio' class='ace' /> <span class='lbl' style='color:gray;font-weight:bold;'> 锁定   </span> </label>");            form.append("<label class='blue'> <input name='colorEdit' value='3' type='radio' class='ace' /> <span class='lbl' style='color:orange;font-weight:bold;'> 预订   </span> </label>");        } else if(calEvent.color == "gray"){            form.append("<label class='blue'> <input name='colorEdit' value='1' type='radio' class='ace' /> <span class='lbl' style='color:green;font-weight:bold;'> 空闲   </span> </label>");            form.append("<label class='blue'> <input name='colorEdit' value='2' checked type='radio' class='ace' /> <span class='lbl' style='color:gray;font-weight:bold;'> 锁定   </span> </label>");            form.append("<label class='blue'> <input name='colorEdit' value='3' type='radio' class='ace' /> <span class='lbl' style='color:orange;font-weight:bold;'> 预订   </span> </label>");        } else if(calEvent.color == "orange"){        form.append("<label class='blue'> <input name='colorEdit' value='1' type='radio' class='ace' /> <span class='lbl' style='color:green;font-weight:bold;'> 空闲   </span> </label>");            form.append("<label class='blue'> <input name='colorEdit' value='2' type='radio' class='ace' /> <span class='lbl' style='color:gray;font-weight:bold;'> 锁定   </span> </label>");            form.append("<label class='blue'> <input name='colorEdit' value='3' checked type='radio' class='ace' /> <span class='lbl' style='color:orange;font-weight:bold;'> 预订   </span> </label>");        }        form.append("<br/>");        form.append("<br/>");        var div = bootbox.dialog({            message: form,            buttons: {                "edit": {                    "label": "<i class='icon-ok'></i> 保存",                    "className": "btn btn-sm btn-success",                    "callback": function () {                        var val = $("#textarea").val();                        var color = $("input[name='colorEdit']:checked").val();                        if (val != "") {                            $.ajax({                                async: false,                                cache: false,                                type: "POST",                                dataType: "text",                                data: {                                    "id": calEvent.id,                                    "name": val,                                    "color": color,                                    "allDay": calEvent.allDay                                },                                url: root + "/expertOneselfClient/fullCalendarEdit",                                //请求的action路径                                error: function () { //请求失败处理函数                                    Lobibox.alert('error', {                                        msg: "请求失败"                                    });                                },                                success: function (data) {                                    if (data == "") {                                        Lobibox.alert('success', {                                            msg: "修改成功",                                            callback: function ($this, type, ev) {                                                window.location.reload();                                            }                                        });                                    }                                }                            });                            //calendar.fullCalendar('updateEvent', calEvent);                            div.modal("hide");                            return false;                        } else {                            $("#messageEdit").html("请输入日程");                            return false;                        }                    }                },                "delete": {                    "label": "<i class='icon-trash'></i> 删除",                    "className": "btn-sm btn-danger",                    "callback": function () {                        //截取冒号之前  取专家名字                        var adminName = calEvent.title.substr(0, calEvent.title.indexOf(':'));                        Lobibox.confirm({                            msg: "是否删除当天日程?",                            callback: function ($this, type, ev) {                                if (type == "yes") {                                    $.ajax({                                        async: false,                                        cache: false,                                        type: "POST",                                        dataType: "text",                                        data: {                                        "start": start,                                        "end": end,                                            "name": adminName                                        },                                        url: root + "/expertOneselfClient/fullCalendarDel",                                        //请求的action路径                                        error: function () { //请求失败处理函数                                            Lobibox.alert('error', {                                                msg: "请求失败"                                            });                                        },                                        success: function (data) {                                            if (data == "") {                                                Lobibox.alert('success', {                                                    msg: "删除成功",                                                    callback: function ($this, type, ev) {                                                        window.location.reload();                                                    }                                                });                                            }                                        }                                    });                                    calendar.fullCalendar('removeEvents', function (ev) {                                        return (ev._id == calEvent._id);                                    })                                }                            }                        });                    }                },                "close": {                    "label": "<i class='icon-remove'></i> 关闭",                    "className": "btn-sm"                }            }        });    }    //鼠标放上去显示信息    function calendearMouseover(calEvent, jsEvent, view) {        var str = "";        var reg = /[^:]*:([^:]*)/;        str = calEvent.title.replace(reg, "$1");        var fstart = $.fullCalendar.formatDate(calEvent.start, "yyyy-MM-dd HH:mm");        var fend = $.fullCalendar.formatDate(calEvent.end, "yyyy-MM-dd HH:mm");        $(this).attr('title', fstart + " - " + fend + " " + str);   //鼠标悬浮到title的时候可以设置展现哪些信息        $(this).css('font-weight', 'normal');    }    //添加绑定    function addBangDing() {        $('#expert').change(function () {            calendar.fullCalendar('refetchEvents');        });    }    calendarInit();     //日历初始化    addBangDing();})(window.jQuery);

以上就是 所有代码 

最后展示一下效果图！！