These days, I developed a program to define a schedule by using FullCalendar, if you want to know how to use FullCalendar, please refer to http://arshaw.com/fullcalendar, of course, you can find the a lot of material from Google
The following outlines the specific realization of my requirements :
The user can set a particular event ( such as vacation ) by dragging the mouse to complete the schedule set
Environment : Tomcat 5 + Mysql + JDK6
Framework : Appfuse 1.9.4 framework (hibernate + spring + struts)
Development Tools : Eclipse 3.3 + WTP
Implementation steps:
- Download gson-1.5.jar
- Event class definitions:
public class Event {
private Long id;
private String title;
private String start;
private String end;
/ / Generate getters and setters
}
- Create a new Servlet, Servlet will get access to the database and schedule data collection package to the Event , and response output gson object
public void doGet(HttpServletRequest request, HttpServletResponse response){
List<Event> events = new ArrayList();
………..
Iterator<String[]> iter = calList.iterator();
while (iter.hasNext()) {
String[] str = iter.next();
evt = new Event();
evt.setId(Long.valueOf(str[0]));
evt.setStart(str[1]);
evt.setEnd(str[2]);
evt.setTitle(“vacation”);
events.add(evt);
}String json = new Gson().toJson(events); //use Gson class to construct a json object
response.setContentType(“application/json;charset=gb2312″);
// request.setCharacterEncoding(“UTF-8″);
response.getWriter().write(json);}
- Jsp page file configuration:
<link rel=’stylesheet’ type=’text/css’
href='<%=request.getContextPath()%>/scripts/fullcalendar/fullcalendar.css’ />
<script type=’text/javascript’
src='<%=request.getContextPath()%>/scripts/fullcalendar/jquery/jquery.js’></script>
<script type=’text/javascript’
src='<%=request.getContextPath()%>/scripts/fullcalendar/jquery/jquery-ui-custom.js’></script>
<script type=’text/javascript’
src='<%=request.getContextPath()%>/scripts/fullcalendar/fullcalendar.js’></script>
<script type=’text/javascript’
src='<%=request.getContextPath()%>/scripts/json2.js’></script><script type=’text/javascript’>
var eventCounter = 0;
$(document).ready(function() {var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();var calendar = $(‘#calendar’).fullCalendar({
header: {
left: ‘prev,next today’,
center: ‘title’,
right:”
},
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
var title = “vacation”;
eventCounter = eventCounter + 1;
if (title) {
calendar.fullCalendar(‘renderEvent’, //renderEvent is the servlet implemented in the former step
{
id: eventCounter,
title: title,
start: start,
end: end,
allDay: allDay
},
true // make the event “stick”
);
}
calendar.fullCalendar(‘unselect’);
},
editable: true,
events: “<%=request.getContextPath()%>/calendarEvent”,
eventClick: function(calEvent, jsEvent, view) {
var title = confirm(‘<fmt:message key=”message.cal.remind”/>’);
if (title) {
calendar.fullCalendar(‘removeEvents’,calEvent.id);
}
}
});});
function saveCalendar(){
var evt = $(‘#calendar’).fullCalendar(‘getEvents’); // Get all events
var jsonCal = “”;
for(var i = 0; i < evt.length ; i++)
{
if(i > 0)
jsonCal = jsonCal + ‘,{\”start\”:\”‘+formatDate(evt[i].start)+’\”,\”end\”:\”‘+formatDate(evt[i].end)+’\”}’;
else
jsonCal = ‘{\”start\”:\”‘+formatDate(evt[i].start)+’\”,\”end\”:\”‘+formatDate(evt[i].end)+’\”}’;
}
jsonCal = ‘[‘ + jsonCal + ‘]’;
document.getElementById(“lgcRemark1″).value = jsonCal; //generate json format
}</script>
<body>
<div id=’calendar’></div><html:submit styleClass=”button” property=”method.save”
onclick=”saveCalendar();bCancel=false”>
<fmt:message key=”button.save” />
</html:submit>
- Demo
