Trying to populate a jQuery FullCalendar from Grails

Question

I'm trying to display a jQuery FullCalendar (http://arshaw.com/fullcalendar) inside a Grails GSP and to populate it from a controller. Here is the Javascript code to initialize my calendar:

$('#container').fullCalendar({
  header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month,agendaWeek,agendaDay'
  },
  editable: false,
  firstDay: 1,
  events: '${createLink(controller: "myEvent", action: "events")}'

});

And my controller returns the following JSON (curtesy of Firebug):

[{"id":"1","title":"Devoxx 2010","allDay":true,"start":new Date(1289775600000),"end":new Date(1290121200000),"url":"http://www.devoxx.com"}]

And the problem is that I don't see anything appear in the calendar although I'm on the right month. No event is displayed and I don't get any errors. Any idea what may be missing?

Answer 1

${...} does not look correct in jquery to return a function, just the function or $(...)

Answer 2

If firebug is returning that exact string as you have it, it's not going to work because of the new Date() functions. The dates should already be a date. Not a function to create a date. For example, my json looks like the following:

[{"id":"Board_Meeting_0","title":"Board Meeting","start":"Fri, 20 Aug 2010 14:00:00 CDT","end":"Fri, 20 Aug 2010 15:00:00 CDT","allDay":false}]

Answer 3

Hi all,

I am having a similar problem. I am creating a JSON array in my servlet and am setting that as a request parameter. When I fetch this in my JSP my string looks like this:

My Javascri[pt is as given below:

        $(document).ready(function() {

        if (!this.JSON) {
            this.JSON = {};
        }


        alert($('#sampleData').val());

         $('#mycalendar').fullCalendar({
                // put your options and callbacks here
                header: {
        left: 'prevYear,prev,next,nextYear today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    editable: true,
                events: JSON.parse($('#sampleData').val())


    });

My alert prints:

[{"title":"json event test1","start":"25/20/2010","end":"25/22/2010"},{"title":"json event test2","start":"25/20/2010","end":"25/26/2010"}]

My Servlet does this:

 SimpleDateFormat sdf = new SimpleDateFormat("mm/dd/yyyy");

    JSONObject testObj1 = new JSONObject();
    testObj1.put("title", "json event test1");
    testObj1.put("start", sdf.format(today));
    testObj1.put("end", sdf.format(end));

    JSONObject testObj2 = new JSONObject();
    testObj2.put("title", "json event test2");
    testObj2.put("start", sdf.format(today));
    testObj2.put("end", sdf.format(end2));

    JSONArray eventsArray = new JSONArray();
    eventsArray.add(testObj1);
    eventsArray.add(testObj2);

    resp.sendRedirect("jsp/MyCalendarJsp.jsp?events="+eventsArray.toString());

Could you please let me know what is wrong?