edit doc


Triggered when the user clicks an event.

function( eventClickInfo ) { }

eventClickInfo is a plain object with the following properties:


The associated Event Object.


The HTML element for this event.


The native JavaScript event with low-level information such as click coordinates.


The current View Object.

Unlike some other event-related interactions, eventClick does not require the interaction plugin.

Here is an example demonstrating some of these properties:

var calendar = new Calendar(calendarEl, {

  eventClick: function(info) {
    alert('Event: ' + info.event.title);
    alert('Coordinates: ' + info.jsEvent.pageX + ',' + info.jsEvent.pageY);
    alert('View: ' + info.view.type);

    // change the border color just for fun
    info.el.style.borderColor = 'red';


View a simple demo of eventClick.

Cancelling Default Behavior

Normally, if the Event Object has its url property set, a click on the event will cause the browser to visit the event’s url (in the same window/tab). You can prevent this by calling .preventDefault() on the given native JS event.

Often, developers want an event’s url to open in a different tab or a popup window. The following example shows how to do this:

var calendar = new Calendar(calendarEl, {
  events: [
      title: 'My Event',
      start: '2010-01-01',
      url: 'https://google.com/'
    // other events here
  eventClick: function(info) {
    info.jsEvent.preventDefault(); // don't let the browser navigate

    if (info.event.url) {

The window.open function can take many other options.