javascript FullCalendar eventClick not working

Question

I want to add events and to set the eventClick

I tried to add event then set the eventClick but its not working

var calendar = $('#calendar');
calendar.fullCalendar('addEventSource', allEvents);


calendar.fullCalendar({
  eventClick: function() {
    alert(1);
  }
});

calendar.fullCalendar('refetchEvents');

i just noticed if i change the the ID calendar into myCalendar i dont have the calendar only buttons Today , < , > , and when i press TODAY its appear and the eventClick work

how to fix it?

Answer 1

$('#calendar').fullCalendar({
  eventClick: function(calEvent, jsEvent, view) {

    alert('Event: ' + calEvent.title);
    alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
    alert('View: ' + view.name);

    // change the border color just for fun
    $(this).css('border-color', 'red');

  }
});

As per the fullcalendar docs this will work for you.

Answer 2

You can set eventClick and other other attributes in options something like this:

var options = {
    defaultView: 'agendaWeek',
    header: {   
        right: 'today, prev, agendaWeek, month, next'
    },
    eventClick: function() {
        alert(2);
    }
};

then, set $('#calendar').fullCalendar(options) and add allEvents to calendar, according to FullCalendar documentation. Well, firstly you have to initialize the calendar and then adding events to the source, and by doing that you don't need to use refetchEvents again.

var calendar = $('#calendar').fullCalendar(options);
calendar.fullCalendar('addEventSource', allEvents);

Complete code can be seen here FullCalendar events and other options