Fullcalendar dynamic data parameter and elaborate response

Question

I'm using fullcalendar with events retrieved by ajax call. The URL has a dynamic parameter that is the room id because I would like to show the calendar based on room choice. I have two problems:

events is called before the user can choose the room (room selection and calendar is loaded at the same time), so the ajax URL is not valid because there isn't the room id. Is it possible to avoid the first loading?

The ajax response is in a particolar format like this:

{
  "status":true,"success":true,"result":
[
  {
     "id":2,"title":"test","start":"2017-07-06T10:30:00","end":"2017-07-06T11:30:00"
  },
  {
    "id":3,"title":"test","start":"2017-07-07T16:30:00","end":"2017-07-07T17:30:00"
  }
 ],
"error":null
}

so I have to use only result field but eventDataTransform doesn't work with a JSON different from event format. Do you know if is it possible to elaborate the response before using it for the event?(I also use status and error to show message) This is my actual code:

     var calendar = $('#calendar').fullCalendar({
        selectOverlap: false,
        height: 600,
        defaultView: 'agendaDay',
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaDay'
        },
        slotMinutes: 30,
        minTime: '08:00:00',
        maxTime: '18:00:00',
        firstDay: 1,
        editable: true,
        weekends: false,
        //this allow the click on month agenda and go to day agenda
        dayClick: function(date, jsEvent, view) {
            if(view.name == 'month') {
                $('#calendar').fullCalendar('changeView', 'agendaDay');
                $('#calendar').fullCalendar('gotoDate', date);      
            }
        },
         eventDataTransform: function(eventData){
                   return eventData.result;
               },
        //load room reservation
        events: {
            url: '/booking/reservation/',
            data: function () { // a function that returns an object
                return {
                    idRoom: bookingForm.room,
                };
            }
        }
    });

bookingForm.room is loaded on select event:

roomTable.off('select')
    .on( 'select', function ( e, dt, type, indexes ) {
        bookingForm.room = roomTable.rows( indexes ).data().toArray()[0].idRoom;
        $("#calendar").fullCalendar("refetchEvents");
    } );

luca · Accepted Answer

I resolved with Fullcalendar events as a function where I can elaborate each single event field. This is my final code

success: function(doc) {
    if (doc.status && doc.success && bookingForm.room){
        var events = [];
        var color = [];
        for (index = 0; index < doc.result.length; ++index) {
            //change the color if user is the owner of event
            if (doc.result[index].owner == document.getElementById('username').innerHTML)
                color = '#3c8dbc';
            else 
                color = '#FF0000';
            events.push({
                editable: false,
                id: doc.result[index].id,
                title: doc.result[index].title,
                start: doc.result[index].start, 
                end: doc.result[index].end,
                color: color,
            });
        }
        callback(events);
    }
}

instead the first call to web service has done with a roomId initialize with -1 so it return no result

Fullcalendar dynamic data parameter and elaborate response

Answers (2)

Related Questions