how to integrate jquery calendar with jsp
i have a problem to load the event data from mysql to jquery fullcalendar..the example given is in php and i dont know how to do it java.. this is the sample code:
111, 'title' => "Event1", 'start' => "$year-$month-10", 'url' => "http://yaho开发者_运维知识库o.com/" ) )); ?>You need to create a Servlet
for that. Create a class which extends HttpServlet
and write code in doGet()
accordingly that it writes the desired JSON string to the response. You can use Google Gson to convert Java objects to a JSON string.
For example:
// Gather data.
Map<String, Object> map = new HashMap<String, Object>();
map.put("id", 111);
map.put("title", "event1");
map.put("start", new SimpleDateFormat("yyyy-MM-10").format(new Date()));
map.put("url", "http://yahoo.com/");
// Convert to JSON string.
String json = new Gson().toJson(map);
// Write JSON string.
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
response.getWriter().write(json);
Then just map this servlet in web.xml
on the desired url-pattern
.
Instead of a Map
you could even create your Javabean class Event
:
public class Event {
private Long id;
private String title;
private Date start;
private URL url;
// Add/generate getters/setters.
}
You could even use Gson to convert it:
Event event = eventDAO.find(request.getParameter("id"));
String json = new Gson().toJson(event);
This way you can more easy collect them all in a List<Event>
which is preferable above a List<Map<String, String>>
:
List<Event> events = eventDAO.list();
String json = new Gson().toJson(events);
In your servlet put this script:
map.put("id", 111);
map.put("title", "event1");
map.put("start", new SimpleDateFormat("yyyy-MM-10").format(new Date()));
map.put("url", "http://yahoo.com/");
// Convert to JSON string.
String json = new Gson().toJson(map);
// Put json between [] to be formatted by Fullcalendar
json = "[" + json + "]";
// Write JSON string.
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
response.getWriter().write(json);
First you need to invoke the servlet from jQuery - you do this with $.ajax(). Then you need to pass the result to the calendar. The following works fine:
$.ajax({
url: 'app',
dataType: "json",
success: function(response) {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
events: [response]
});
}
});
Greetings, Sorin
精彩评论