Externally triggering FullCalendar's 'dayClick' method?

Question

I'm using Arshaw's FullCalendar and I'm looking to simulate a user clicking on a cell once the page has loaded. I'm trying to do this so I could potentially go to a URL such as /Calendar/AddEvent and the calendar will automatically open a dialog with my add event form in.

Take the following set up: (Fiddle here)

HTML

<div>
    <div id="calendar" data-year="2013" data-month="04" ></div>
</div>

jQuery

$('#calendar').fullCalendar({
        firstDay: 1,
        selectable: true,
        dayClick: function (start, allDay, jsEvent, view) {
                    alert('You clicked me!');
        }
    });

By default, the cell for today has the class .fc-today which I've tried to take advantage of by doing the following:

$('.fc-today').trigger('click');

This doesn't seem to work though. Is there anyway I could do something like

$('#calendar').fullCalendar('dayClick', date)

Any help is appreciated.

Answer 1

I ran into this issue in my usecase as well, and this is what I found works for me, after digging around in the fullcalendar source code. You need to manually create a mousedown and mouseup event (technically the mouseup is optional, but you can use it to reset the 'clicked' state of the td), which contains the coordinates of the X and Y position of the element you want to "click". Also important is the which parameter, which needs to be set to 1 so that it passes the isPrimaryMouseButton check.

With this in mind, the code would look like this (note I changed the $('#click') to use a mousedown event so that it only runs once):

$('#click').on('mousedown', function () { 
    var today = $('td.fc-today');
    var down = new $.Event("mousedown");
    var up = new $.Event("mouseup");
    down.which = up.which = 1;
    down.pageX = up.pageX = today.offset().left;
    down.pageY = up.pageY = today.offset().top;
    today.trigger(down);
    today.trigger(up); //this is optional if you just want the dayClick event, but running this allows you to reset the 'clicked' state of the <td>
});

Here is a working fiddle: http://jsfiddle.net/vyxte25r/