【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;
	}
	@Autowired
	public 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;
	}
	@Autowired
	public void setExpertOneselfClientService(
			IExpertOneselfClientService expertOneselfClientService) {
		this.expertOneselfClientService = expertOneselfClientService;
	}

	public ILogTableTableService getLogTableTableService() {
		return logTableTableService;
	}

	@Autowired
	public 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 i				4个时间状态个数
	 * @param adminId		用户id
	 * @param adminName		用户名字
	 * @param titleName		标题内容
	 * @param start			几月几号  开始时间
	 * @param end			几月几号	结束时间
	 * @param eightColor	8点-10点
	 * @param tenColor		10点-12点
	 * @param thirteenColor	13点-15点
	 * @param fifteenColor	15点-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);

以上就是 所有代码 

最后展示一下效果图！！