fullcalendar 的帮助文档 可见地址:http://arshaw.com/fullcalendar/docs/
jQuery日历FullCalendar插件是一个非常不错的日历工具,可用于制作日程表或计划安排
$('#calendar').fullCalendar({ events: { url: '<%=request.getContextPath()%>/displayAction.do?method=testJson' //你的controller的地址 type: 'POST', error: function() { alert('there was an error while fetching events!'); }, color:'yellow',// 背景色 textColor:'black'// 文字颜色 } });
java代码
public ModelAndView testJson(HttpServletRequest request, HttpServletResponse response) { String strvalue = "[{\"id\":111,\"title\":\"Event1\",\"start\":\"2012-03-10\",\"url\":\"http:\\/\\/yahoo.com\\/\"},{\"id\":222,\"title\":\"Event2\",\"start\":\"2012-03-20\",\"end\":\"2012-03-22\",\"url\":\"http:\\/\\/yahoo.com\\/\"}]"; response.setCharacterEncoding("UTF-8"); System.out.println("strvalue="+strvalue); try { response.getWriter().print(strvalue); } catch (IOException e) { e.printStackTrace(); } return null; }
$('#calendar').fullCalendar({ events:function(start, end, callback) { $.ajax({ url:"<%=request.getContextPath()%>/displayAction.do?method=getTitle", cache:false, success:function(doc) { eval("var j=" + doc); var events = []; var info = j.eventinfo; for (var i = 0; i < info.length; i++) { var ev = info[i]; var title = ev.title; var evtstart = new Date(Date.parse(ev.start)); var evtend = new Date(Date.parse(ev.end)); events.push({ title:title, start:evtstart, end:evtend, id:1 }); } callback(events); }, error:function() { alert('sdf') } }) } })
java代码
public ModelAndView getTitle(HttpServletRequest request, HttpServletResponse response) { String strvalue = "{ 'eventinfo':[{day: '3/3/2012',eventtitle:'test1'},{day: '3/8/2012',eventtitle:'test2'} ]} "; response.setCharacterEncoding("UTF-8"); System.out.println("strvalue="+strvalue); try { response.getWriter().print(strvalue); } catch (IOException e) { e.printStackTrace(); } return null; }