Add extra fields to fullcalendar

Question

I need to create more fields for my calendar ( fullcalendar hooked up to mysql with php ). And I have been reading up on eventRender but I'm not entirely sure of the syntax and where I should put it.

Currently I have the following;

$calendar.fullCalendar({
  timeslotsPerHour : 4,
  defaultView:'agendaWeek',
  allowCalEventOverlap : true,
  overlapEventsSeparate: true,
  firstDayOfWeek : 1,
  businessHours :{start: 8, end: 18, limitDisplay: true },
  daysToShow : 7,
        theme: true,
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },

        editable: true,
        events: "json-events.php",
  eventRender : function(calEvent, $event) {
       calEvent.distributor  //this is my new field

  },

But I its not working and I can't find any working examples to compare it with. Thanks

---

Thanks for the feedback I have been able to add my custom fields using the eventRender. So now not just body and description are being passed.

My main issue now is passing the date values to the database as these are not being saved. Does anyone know of any examples where this is being used. I would really really appreciated it.

Answer 1

In version 4 of fullcalendar, to get non-standard field is changed a little bit. Now it accepts just one parameter as Event Object:

 events: [
{
  title: 'My Event',
  start: '2010-01-01',
  description: 'This is a cool event'
}
// more events here
],
eventRender: function(info) {
  console.log(info.event.extendedProps.description);
}

Note: You can access an additional field in this way: info.event.extendedProps.description

Check documentation

Answer 2

you can include your own non-standard fields in each Event Object. FullCalendar will not modify or delete these fields.,this example help you eventRender

and see Event Object

Answer 3

Here is how I used eventRender to add some categories to each event. Then I can filter events based on category name

eventRender: function(event, element) {
        element.attr("categories",event.categoryname)
    }

Simply awesome calendar