CODEWITHSUNDEEP
fullcalendar
ai dee
ai dee

Reputation: 47

Fullcalendar V4: How to parse json received from ajax into event list

I'm trying to retrieve a list of events from an ajax call. I use the following code.

document.addEventListener("DOMContentLoaded", function()
 { var calendarEl = document.getElementById("id_d_agenda_1");
   var calendar = new FullCalendar.Calendar(calendarEl, {
     plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list' ],
     header: {
       left: 'prev,next today',
       center: 'title',
       right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
     },
     defaultDate: '2019-08-12',
     editable: true,
     navLinks: true, // can click day/week names to navigate views
     eventLimit: true, // allow "more" link when too many events
           selectMirror: true,
     select: function(arg) {
       var title = prompt('Event Title:');
       if (title) {
         calendar.addEvent({
           title: title,
            start: arg.start,
                end: arg.end,
                allDay: arg.allDay
               })
             }
            calendar.unselect()
           },
     events: function(arg) {
       $.ajax({
           url: 'd.php',
           dataType: 'json',
           data: {
              cmd:'getdata',
              start:arg.startStr,
              end:arg.endStr,
              tz:arg.timeZone,
              component:'d_agenda_1',
           },
           success: function(doc) {
                $(doc).each(function() {
                   calendar.addEvent( this );
                })
           }
       }) 
    } 
  })
     calendar.render(); 
});

While debugging my javascript I can see the rows of events appear in 'doc'. First I tried to bulk add them to the agenda, but that didn't seem to work. Now I'm adding them one-by-one, buth they still don't appear. I have checked the this variable in the debugger and it shows a single event: title:"value", start:"2019-08-01". In fact I'm using the sample list that comes with the package. Can someone point me to the right direction in what I'm doing wrong?

other options I tried (with no luck ;-): I tried to leave the jquery out, but with similar effect:

    success: function(doc) {
            doc.forEach(function(value) {
               calendar.addEvent( value );
            })
       }

    success: function(doc) {
         $(doc).each(function() {
            calendar.addEvent({
                  title:this.title,
                  start:this.start
               });
       })

Not sure if it's helpful, but I added the selectable option and tested the select option. The calendar.addevent on the select: doesn't add the event either. Since this is copied from the sample i'm quite confused now. Fun part is that if you replace the ajax part with a regular [] expression that all works well. Even the selectable options, so there's definitely something wrong with my ajax implementation, in regards to this component.

Upvotes: 3

Views: 753

Answers (1)

Nasser Ali Karimi
Nasser Ali Karimi

Reputation: 4663

According to the DOCS you need to have a successCallback that will return the events to the calendar.

Here is the docs https://fullcalendar.io/docs/events-function

Here is a simple Demo https://codepen.io/nasser-ali-karimi/pen/gOOJrWV?editors=0010

And in short, I can say that you need to set the events like this.

events: function(info, successCallback, failureCallback) {
      successCallback([
        {"resourceId":"a","title":"event 1","start":"2019-11-23","end":"2019-11-25"},
        {"resourceId":"b","title":"event 3","start":"2019-11-24T12:00","end":"2019-11-25T06:00"},
        {"resourceId":"b","title":"event 4","start":"2019-11-24T07:30","end":"2019-11-24T09:30"},
        {"resourceId":"b","title":"event 5","start":"2019-11-24T10:00","end":"2019-11-24T15:00"},
        {"resourceId":"a","title":"event 2","start":"2019-11-24T09:00","end":"2019-11-24T14:00"}
      ])
    }

you didn't mention the events data that comes from Ajax request, so I can say you need to provide the data like what said on docs.

Addition

Note: Event's date are on 11/28 and 11,29 so navigate to those dates to see the events.

Demo https://codepen.io/nasser-ali-karimi/pen/qBBGVbG?editors=0010

events: function(info, successCallback, failureCallback) {
    var arrevents = [];
    jQuery.get( "https://api.myjson.com/bins/16ubhe", function( data ) {
      
      // var response = JSON.parse(data);
      // $.each(response, function(k, v) {
      //     arrevents.push(v);
      // });
      arrevents = data;
      successCallback(arrevents);
    });
},

Upvotes: 3

Related Questions