how to integrate jquery fullcalendar with jsp

Question

events: [
    {
     title: 'All Day Event',
     start: new Date(2010,2,13)
    },
    {
     title: 'Long Event',
     start: new Date(y, m, d-5),
     end: new Date(y, m, d-2)
    }
]

How to make this array in JSP after getting data from database?

Answer 1

Well your question is vague, but in general the easiest thing to do is bind your data as a Bean or a Map into the request as an attribute, or something; it depends on what framework you're using. Once you've done that, you just refer to the fields via JSTL EL expressions:

events: [
  <c:forEach var='event' items='${myData.events}'>
    { title: '${event.title}', start: new Date(${event.timestamp}) },
  </c:forEach>
  null
];

The trailing "null" is to put something there for IE; you could also code the loop to avoid the stray trailing comma.

In my applications, I always write a "jsQuote" EL function that does something analogous to "fn:escapeXml" for Javascript string constant syntax. It's dangerous to just dump stuff like your event title directly into the Javascript source like that, but there's no function in the standard JSP libraries to perform string escaping for Javascript. It's easy to write one however. Thus in my code that line would look like this:

  {title: '${xyz:jsQuote(event.title)}', start: new Date(${event.timestamp}) },

You don't have to worry about "timestamp" if it's a "long" or a "Long" in your data.

Again, all this depends completely on what your data looks like.

Answer 2

1. Create a Javabean class Event which look like this

   public class Event {
       private String title;
       private Date start;
       private Date end;
       // Add/generate getters and setters.
   }
   

2. Create a Servlet which uses Google Gson to convert it to JSON.

   protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOexception {
       List<Event> events = eventDAO.list();
       String json = new Gson().toJson(events);
       response.setContentType("application/json");
       response.setCharacterEncoding("UTF-8");
       response.getWriter().write(json);
   }
   

   Map this on an url-pattern of for example /jsonGetEvents.

3. In jQuery use the $.getJSON function:

   $.getJSON('jsonGetEvents', function(events) {
       // `events` is a JSON string. Do your thing with it. This examples loops over it.
       $.each(events, function(index, event) {
           var title = event.title;
           var start = event.start;
           var end = event.end;
       });
   });