jsf listener on fullcalendar

Question

I want to use the FullCalendar jQuery Plugin with JSF.

But how can I add an f:ajax listener to an e.g. eventClick of the FullCalendar?

Here's the code where I want to add a listener to:

<ui:define name="content">
    <div id="calendar">
    <f:ajax event="eventClick" listener="#{scheduleController.onDateSelect}"/>
    </div>
</ui:define>

<ui:define name="jsFiles">
    <script>
        $(document).ready(function() {

            var calendar = $('#calendar').fullCalendar({
                header : {
                    left : 'prev,next today',
                    center : 'title',
                    right : 'month,agendaWeek,agendaDay'
                },
                selectable : true,
                selectHelper : true,
                select : function(start, end, allDay) {
                    var title = prompt('Event Title:');
                    if (title) {
                        calendar.fullCalendar('renderEvent', {
                            title : title,
                            start : start,
                            end : end,
                            allDay : allDay
                        }, true // make the event "stick"
                        );
                    }
                    calendar.fullCalendar('unselect');
                },
                editable : true,
                eventClick : function(event, element) {
                    event.title = "CLICKED!";
                    $('#calendar').fullCalendar('updateEvent', event);
                }
            });

        });
    </script>
</ui:define>

Answer 1

I'm afraid you can't do it directly. You can however for example add a hidden button, connect the ajax listener to it, and click the button from javascript. You can also try to send ajax yourself using the client side JSF API.

The first method is easier however - see here for more details.

One more possibility is to try out a4j library use the <a4j:jsFunction> tag.