Fullcalendar display event from ajax call

Question

I have read many posts about my problem but none of them answer my question. Here my code :

EDIT

events: {
      url: 'AJAX_selectEvent.do',
      data: function() {
        return {
          "rcn": document.getElementById("rcn").value
        }
      },
      error: function(data) {
        console.log(data);
        alert("Ajax call error");
      }
    },

Here is my data from JAVA :

[{"id":"0","resourceId":"p","start":"2019-07-08","end":"2019-07-09","title":"50602378"},{"id":"1","resourceId":"p","start":"2019-06-18","end":"2019-06-19","title":"50602503"},{"id":"2","resourceId":"p","start":"2019-06-26","end":"2019-06-27","title":"50603191"},{"id":"3","resourceId":"p","start":"2019-06-24","end":"2019-06-25","title":"50603192"},{"id":"4","resourceId":"p","start":"2019-06-13","end":"2019-06-14","title":"50604130"}

As you can see I'm fetching JSON data from the parameter "rcn". In my success function I can see it but it won't display in the calendar. I'm getting a warning :

VM1236 main.js:5162 undefined (26) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}
(anonymous) @ VM1236 main.js:5162
wrappedFailure @ VM1236 main.js:3406
success @ RECHERCHE_getInfo.do:87
u @ VM1234 jquery.min.js:2
fireWith @ VM1234 jquery.min.js:2
k @ VM1234 jquery.min.js:2
(anonymous) @ VM1234 jquery.min.js:2
XMLHttpRequest.send (async)
send @ VM1234 jquery.min.js:2
ajax @ VM1234 jquery.min.js:2
events @ RECHERCHE_getInfo.do:63
unpromisify @ VM1236 main.js:3410
fetch @ VM1236 main.js:4183
fetchSource @ VM1236 main.js:5137
fetchSourcesByIds @ VM1236 main.js:5126
fetchDirtySources @ VM1236 main.js:5106
reduceEventSources @ VM1236 main.js:5069
reduce @ VM1236 main.js:5528
Calendar.reduce @ VM1236 main.js:6652
Calendar.dispatch @ VM1236 main.js:6610
(anonymous) @ VM1236 main.js:6583
Calendar.batchRendering @ VM1236 main.js:6673
Calendar.hydrate @ VM1236 main.js:6580
Calendar @ VM1236 main.js:6490
(anonymous) @ RECHERCHE_getInfo.do:32

With a console.dir(data), I can see (of course with the 26 rows) :

Array(26) {id: "0", title: "50602378", start: "08/07/19", end: "09/07/0019", resourceId: "p"}

Can you help me to understand why am I getting a warning from the callback(events) and why it don't display the events please ?

EDIT : The new error even if I changed my jquery version 1 to 2 and the library

Uncaught TypeError: e.class is not a constructor
at constructor.instantiateView (fullcalendar.min.js:9)
at constructor.renderView (fullcalendar.min.js:9)
at constructor.initialRender (fullcalendar.min.js:9)
at constructor.render (fullcalendar.min.js:9)
at HTMLDivElement.<anonymous> (fullcalendar.min.js:6)
at Function.each (jquery-2.0.0.min.js:4)
at init.each (jquery-2.0.0.min.js:4)
at init.t.fn.fullCalendar (fullcalendar.min.js:6)
at HTMLDocument.<anonymous> (RECHERCHE_getInfo.do:32)
at l (jquery-2.0.0.min.js:4)

<script src="//code.jquery.com/jquery-2.0.0.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script>
<script type="text/javascript" src="jslib/utils.js" ></script>
<script type="text/javascript" src="jslib/core/main.js" ></script>
<script type="text/javascript" src="jslib/core/locales-all.js" ></script>
<script type="text/javascript" src="jslib/interaction/main.js" ></script>
<script type="text/javascript" src="jslib/daygrid/main.js" ></script>
<script type="text/javascript" src="jslib/timegrid/main.js" ></script>
<script type="text/javascript" src="jslib/list/main.js" ></script>
<script type="text/javascript" src="jslib/timeline/main.js" ></script>
<script type="text/javascript" src="jslib/resource-common/main.js" ></script>
<script type="text/javascript" src="jslib/resource-timeline/main.js" ></script>

Thanks

start: "08/07/19", end: "09/07/0019" - these dates are not in a valid format. I don't know if it's the cause of your issue but they certainly won't be recognised by fullCalendar. Check the docs (it looks like you are using version 3 of fullCalendar, so this is the article you need to read to understand what constitutes a valid date string: fullcalendar.io/docs/v3/moment) — ADyson
Anyway re your warning...which line exactly is throwing the warning? I'm not entirely sure the code in your "success" function makes sense...you seem to be treating the returned data as if it's some kind of HTML or XML, yet your ajax config says you're returning JSON. What does the raw data returned by the server actually look like? It's hard to be sure what the problem is without seeing a sample of that. — ADyson
@ADyson Thanks for your reply, sorry for my late answer (I was sick). I changed my date format according to fullcalender v3 (yyyy-MM-dd). But it still won't display and i'm still having the same warning without information. In my success function I'm looking for values with the attribut (key because this is json). — AHn

ADyson ADyson · Accepted Answer · 2019-08-05T09:38:30

I can't reproduce your exact warning. I made a demo of your code using the sample data you provided as being output by Java, but pasting into a dummy endpoint URL at myjson.com. See http://jsfiddle.net/fpz1m2w4/ . With fullCalendar v3 this produces an error

callback is not a function

The root of this is you specified your events function's arguments incorrectly. As per the v3 docs the arguments should be function( start, end, timezone, callback ) - you didn't specify all the arguments, so the variable you are calling callback actually contains the timezone. JavaScript just uses the position of the arguments to work out what to pass to it, not the names - the names can actually be whatever you like (so function(a, b, c, d) would work just the same, albeit a little unclear to maintain).

If you fix that, then the code should work - demo: http://jsfiddle.net/fpz1m2w4/1/.

However, I actually don't think any of this is necessary. Your Java (since you changed the date format) appears to produce the data in the correct format expected by fullCalendar already. So you don't need to do all this extra processing. You're essentially re-creating an array with an identical structure, so clearly that's a bit pointless.

(Also, as a side note, code like $(this).attr('id') is not required to access an attribute of your response - the JSON data gets parsed into a normal JS object, so this.id would produce the same result. The .attr() syntax is only required if you're trying to fetch from a jQuery object (representing a HTML element) or an XML node, which have a more complex structure.)

Instead you should be able to just use the events as a JSON feed pattern, where you simply give fullCalendar the server URL, and some simple options such as a callback to get your rcn value, and fullCalendar will take care of constructing the AJAX request, receiving the response and loading the data into the calendar.

Here's the code you would need:

events: {
  url: "AJAX_selectEvent.do",
  data: function() {
    return {
      "rcn": document.getElementById("rcn").value
    }
  },
  error: function(data) {
    console.log(data);
    alert("Ajax call error");
  }
}

And here's a demo using the dummy URL: http://jsfiddle.net/fpz1m2w4/4/

Fullcalendar display event from ajax call

1 Answers