Fullcalendar - Can we add custom data to our event Json Data?

Question

I want to send a type in my Event Json Response.

Here is my code:

$('#calendar').fullCalendar({

eventSources: [ 

{"id":"46_l","title":"CustomEvent-Chargement","start":"2013-12-02","end":"2013-12-03","className":"customEventsClass","type":1},
{"id":"46_d","title":"Custom Event-Livraison","start":"2013-12-11","end":"2013-12-12","className":"customEventsClass","type":2}

]

});

You see I send a type in JSON Response array, is this possible? What parameter can we use for sending our custom data?

Answer 1

As per the documentation :

Non-standard Fields

In addition to the fields above, you may also include your own non-standard fields in each Event Object. FullCalendar will not modify or delete these fields. For example, developers often include a description field for use in callbacks such as eventRender .

Example:

$('#calendar').fullCalendar({
    events: [
        {
            title: 'My Event',
            start: '2010-01-01',
            type: 1 // Custom field
        }
    ],
    eventRender: function(event, element) {
        console.log(event.type); // Writes "1"
    }
});

Answer 2

Try It with events: instead of eventSources:

$('#calendar').fullCalendar({

 events: [ 

{"id":"46_l","title":"CustomEvent-Chargement","start":"2013-12-02","end":"2013-12-03","className":"customEventsClass","type":1},
{"id":"46_d","title":"Custom Event-Livraison","start":"2013-12-11","end":"2013-12-12","className":"customEventsClass","type":2}

]

});

Answer 3

In the new version you should do this:

eventRender: function (info) {
    info.el.firstChild.innerHTML = info.event.extendedProps.type + " " + info.event.extendedProps.customEventsClass;
}

Answer 4

In version 4 custom data is in extendedProps .

In short e.event.extendedProps

Answer 5

You can also pass url endpoint to events as long as the url returns json response

            cId.fullCalendar({
             header: {
                right: '',
                center: 'prev, title, next',
                left: ''
             },

            theme: true, //Do not remove this as it ruin the design
            selectable: true,
            selectHelper: true,
            editable: true,
             //it will load data from this url
            events: "{{ url('api/events') }}",
//               events: getData(),

            //Add Events
        });

and in your controller or function

  $events = $request->user()->events()->select('title','color','date')->get();

   //        dd($even,$events)
          $eventsResponse = [];
 //        created_at->format('Y-m-d')
          foreach ($events as $event)
          {
           $eventsResponse[] = [
            'title'=>$event->title,
            'color'=>$event->color,
            'start'=> Carbon::parse($event->date)->toDateTimeString(),
           ];
        }

       return $eventsResponse;