Can I trigger an eventClick from outside the calendar?

Question

I'm creating a "summary" list of events on the page alongside the calendar. I want to trigger the eventClick handler of an event when I click on the entry in the summary. The markup for a summary entry is

 <dd id="E45">9:00am-10:00am</dd> 

where the id is fullCalendar's event ID.

How can I trigger an eventClick (on the correct event) when the user clicks on the dd?

Answer 1

Is <DD> a dynamic tag?

Are you using ASP.NET or PHP or doing this all on the client side (javascript)?

Answer 2

Ok , Not sure exactly what you are trying to do.

You can define the eventClick: in the fullcalendar declaration. The calEvent parameter includes the ID from the Event Object. So could you add a new function and then call that same function passing the ID from your <DD ID="1"> that matches the event click?

        $('#calendar').fullCalendar({
            header: {
                left: 'prev, next today',
                center: 'title',
                right: 'month, basicWeek, basicDay'
            }
            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');

                eClick(calEvent.id);
            }
          });
    function eventClick(id) {
        alert('Event ID: ' + id);
        ' Your event click code would go here.
    }

Answer 3

Thanks for the response. I don't think I was clear enough, though, about what I'm trying to do.

I don't want the fullCalendar instance to have to know in advance that its eventClick event might be triggered from an event outside of itself.

If "summary" and "calendar" are two separate divs and the fullCalendar has been instantiated in the "calender" div and a summary object has been instantiated in the "summary" div, then I'd like to do something like this to trigger the eventClick of the calendar (and pass the correct arguments) when a dd is clicked in the summary.

$("#summary dd").click($("#calendar").fullCalendar.trigger("eventClick", ???????));

This would not be in the fullCalendar code.

Answer 4

Hello Dave,

try this :

$("#summary dd").click(function() {
    var eventId = $(this).attr('id');
    var events = $('#calendar').fullCalendar('clientEvents',eventId);
    if (events.length > 0) {
        $("#calendar").fullCalendar.trigger('eventClick', events[0]);
    }
});