FullCalendar.io events.push

Question

I am trying to push an event to the fullcalendar but it seems to stop my code from working all together.

$(document).ready(function() {

    // page is now ready, initialize the calendar...

    $('#calendar').fullCalendar({
      header: {
                   left: 'prev,next today',
                   center: 'title',
                   right: 'month,basicWeek,basicDay'
               },
      editable: false, // Don't allow editing of events
      handleWindowResize: true,
      weekends: false, // Hide weekends
      defaultView: 'agendaWeek', // Only show week view
      header: false, // Hide buttons/titles
      minTime: '08:00:00', // Start time for the calendar
      maxTime: '22:00:00', // End time for the calendar
      columnFormat: {
        week: 'ddd' // Only show day of the week names
      },
   displayEventTime: true,// Display event time
   events: [
        {
            title  : 'event1',
            start  : '2015-11-18T08:30:00',
        },
        {
            title  : 'event2',
            start  : '2015-11-19T08:30:00',
            end    : '2015-11-19T09:30:00',
        },
        {
            title  : 'event3',
            start  : '2015-11-20T12:30:00',
            allDay : false // will make the time show
        }
    ]
    events:push[
      {
        title: 'This is a Material Design event!',
        start: '2015-11-20T11:30:00',
        end: '2015-11-20T12:30:00',
        color: '#C2185B'
      }
    ];
 });
 events.push({
      title: 'This is a Material Design event!',
      start: 'someStartDate',
      end: 'someEndDate',
      color: '#C2185B'
  });


});

My question is am I doing this right, or have I misunderstood something in the documentation?

Answer 1

There are some erros in your code (ie events:push). You have to use your events as a function or eventsSource to get this. This exemple push one event to the callendar and render it in callback. Hope it helps.

$('#calendar').fullCalendar({
header: {
    left: 'prev,next today',
    center: 'title',
    right: 'month,basicWeek,basicDay'
},
editable: false, // Don't allow editing of events
handleWindowResize: true,
weekends: false, // Hide weekends
defaultView: 'agendaWeek', // Only show week view
minTime: '08:00:00', // Start time for the calendar
maxTime: '22:00:00', // End time for the calendar
columnFormat: {
    week: 'ddd' // Only show day of the week names
},
displayEventTime: true,// Display event time
events: function( start, end, timezone, callback ) { 
        var events =[        
           {
                title  : 'event1',
                start  : '2015-11-18T08:30:00',
            },
            {
                title  : 'event2',
                start  : '2015-11-19T08:30:00',
                end    : '2015-11-19T09:30:00',
            },
            {
                title  : 'event3',
                start  : '2015-11-20T12:30:00',
                allDay : false // will make the time show
            }];
            events.push({
                    title: 'This is a Material Design event!',
                start: '2015-11-20T08:30:00',
                end: '2015-11-20T08:30:00',
                color: '#C2185B'
            });
            callback(events);
    }
 });