jquery的fullCalendar日历插件
想查询数据库的title(日程标题),className(标题的颜色）,start（开始的时间)，end(日程结束时间)，返回到jsp页面的fullCalendar插件中，返回数据测试过（日期的还没写）没问题，但是回传到events那里无法更新界面的个人日程事件，请问是什么回事？？
title那些已经用alert方法测试过，没有问题。
下面这个是他原来的events的赋值方法，我只修改了他events部分,难道别的地方也要修改吗？
下面代码是整个fullCalendar（）
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="f" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<!--[if IE 9 ]><![endif]-->
个人日程管理
<!-- Vendor CSS -->
<!-- CSS -->
Calendar FullCalendar is a jQuery plugin that provides a full-sized, drag & drop event calendar like the one below. It uses AJAX to fetch events on-the-fly and is easily configured to use your own feed format. It is visually customizable with a rich API.
<ul class="dropdown-menu dropdown-menu-right"> <li> <a href="">Refresh</a> </li> <li> <a href="">Manage Widgets</a> </li> <li> <a href="">Widgets Settings</a> </li> </ul> </li> </ul> </div> <div id="calendar"></div> <!-- Add event --> <div class="modal fade" id="addNew-event" data-backdrop="static" data-keyboard="false"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Add an Event</h4> </div> <div class="modal-body"> <form class="addEvent" role="form" method="method"> <div class="form-group"> <label for="eventName">Event Name</label> <div class="fg-line"> <input type="text" class="input-sm form-control" id="eventName" placeholder="eg: Sports day"> </div> </div> <div class="form-group"> <label for="eventName">Tag Color</label> <div class="event-tag"> <span data-tag="bgm-teal" class="bgm-teal selected"></span> <span data-tag="bgm-red" class="bgm-red"></span> <span data-tag="bgm-pink" class="bgm-pink"></span> <span data-tag="bgm-blue" class="bgm-blue"></span> <span data-tag="bgm-lime" class="bgm-lime"></span> <span data-tag="bgm-green" class="bgm-green"></span> <span data-tag="bgm-cyan" class="bgm-cyan"></span> <span data-tag="bgm-orange" class="bgm-orange"></span> <span data-tag="bgm-purple" class="bgm-purple"></span> <span data-tag="bgm-gray" class="bgm-gray"></span> <span data-tag="bgm-black" class="bgm-black"></span> </div> </div> <input type="hidden" id="getStart" /> <input type="hidden" id="getEnd" /> </form> </div> <div class="modal-footer"> <button type="submit" class="btn btn-link" id="addEvent">Add Event</button> <button type="button" class="btn btn-link" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> <!-- Javascript Libraries --> <script src="vendors/bower_components/jquery/dist/jquery.min.js"></script> <script src="vendors/bower_components/bootstrap/dist/js/bootstrap.min.js"></script> <script src="vendors/bower_components/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js"></script> <script src="vendors/bower_components/Waves/dist/waves.min.js"></script> <script src="vendors/bootstrap-growl/bootstrap-growl.min.js"></script> <script src="vendors/bower_components/bootstrap-sweetalert/lib/sweet-alert.min.js"></script> <script src="vendors/bower_components/moment/min/moment.min.js"></script> <script src="vendors/bower_components/fullcalendar/dist/fullcalendar.min.js"></script> <!-- Placeholder for IE9 --> <!--[if IE 9 ]> <script src="vendors/bower_components/jquery-placeholder/jquery.placeholder.min.js"></script> <![endif]--> <script src="js/functions.js"></script> <script src="js/demo.js"></script> <script type="text/javascript"> $(document).ready(function() { var date = new Date(); var d = date.getDate(); var m = date.getMonth(); var y = date.getFullYear(); var cId = $('#calendar'); //Change the name if you want. I'm also using thsi add button for more actions //Generate the Calendar 形成日程表 cId.fullCalendar({ header: { right: '', center: 'prev, title, next', left: '' }, theme: true, //Do not remove this as it ruin the design selectable: true, selectHelper: true, editable: true, //Add Events 增加最新的个人日程事件 重要！ events: function(start,end,callback){ var params = '{}'; $.ajax({ url:"${ctx}/selectcalendar", type:"post", data:params, contentType:"application/json;charset:utf-8", dataType: "json", success: function(data){ var events = []; for(var i=0;i<data.length;i++) events.push({ title:data[i].title, start:new Date(2017,10,20), end:new Date(2017,10,22), allDay:true, className:data[i].className }); alert(events[5].title); callback(events); } }); }, //On Day Select 具体某一天选择 select: function(start, end, allDay) { $('#addNew-event').modal('show'); $('#addNew-event input:text').val(''); $('#getStart').val(start); $('#getEnd').val(end); } }); //Create and ddd Action button with dropdown in Calendar header. 在日历页眉中创建下拉按钮和DDD操作按钮 var actionMenu = '<ul class="actions actions-alt" id="fc-actions">' + '<li class="dropdown">' + '<a href="" data-toggle="dropdown"><i class="zmdi zmdi-more-vert"></i></a>' + '<ul class="dropdown-menu dropdown-menu-right">' + '<li class="active">' + '<a data-view="month" href="">Month View</a>' + '</li>' + '<li>' + '<a data-view="basicWeek" href="">Week View</a>' + '</li>' + '<li>' + '<a data-view="agendaWeek" href="">Agenda Week View</a>' + '</li>' + '<li>' + '<a data-view="basicDay" href="">Day View</a>' + '</li>' + '<li>' + '<a data-view="agendaDay" href="">Agenda Day View</a>' + '</li>' + '</ul>' + '</div>' + '</li>'; cId.find('.fc-toolbar').append(actionMenu); //Event Tag Selector 事件标签选择器 (function(){ $('body').on('click', '.event-tag > span', function(){ $('.event-tag > span').removeClass('selected'); $(this).addClass('selected'); }); })(); //Add new Event 增加新事件 重要！ $('body').on('click', '#addEvent', function(){ var eventName = $('#eventName').val(); var tagColor = $('.event-tag > span.selected').attr('data-tag'); if (eventName != '') { //Render Event 给予事件 $('#calendar').fullCalendar('renderEvent',{ title: eventName, start: $('#getStart').val(), end: $('#getEnd').val(), allDay: true, className: tagColor },true ); //Stick the event $('#addNew-event form')[0].reset() $('#addNew-event').modal('hide'); } else { $('#eventName').closest('.form-group').addClass('has-error'); } }); //Calendar views 日程表展示 $('body').on('click', '#fc-actions [data-view]', function(e){ e.preventDefault(); var dataView = $(this).attr('data-view'); $('#fc-actions li').removeClass('active'); $(this).parent().addClass('active'); cId.fullCalendar('changeView', dataView); }); }); </script>