Ajax Call on event click in Full Calender JS

Question

I am working on Full Calender, I have created four events Falahar,snakes, salad and lunch as follow :

<script>

    $(document).ready(function() {

        $('#calendar').fullCalendar({
            defaultDate: '2015-06-16',
            editable: true,
            eventLimit: true, // allow "more" link when too many events
            events: [
                {
                    title: 'Falahar',
                    start: '2015-06-18'
                },
                {
                    title: 'Salad',
                    start: '2015-06-18'
                },
                {
                    title: 'Lunch',
                    start: '2015-06-18'
                },
                {
                    title: 'Snacks',
                    start: '2015-06-18'
                },
            ]
        });

    });

</script>  

These four events are shown on calendar, now I want is that

When I click on any event then I want to call an AJAX which alerts the name of this event

How can I perform it ?

Answer 1

Example from the fullcalendar documentation:

$('#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');

    }
});

Simply modify yours as follows:

    $('#calendar').fullCalendar({
        defaultDate: '2015-06-16',
        editable: true,
        eventLimit: true, // allow "more" link when too many events
        events: [
            {
                title: 'Falahar',
                start: '2015-06-18'
            },
            {
                title: 'Salad',
                start: '2015-06-18'
            },
            {
                title: 'Lunch',
                start: '2015-06-18'
            },
            {
                title: 'Snacks',
                start: '2015-06-18'
            },
        ],
      eventClick: function(event) {
         alert('Event' + event.title);
      }
    });

Answer 2

You can use eventClick option of fullcalendar

$('#calendar').fullCalendar({
            defaultDate: '2015-06-16',
            editable: true,
            eventLimit: true, // allow "more" link when too many events
            events: [
                {
                    title: 'Falahar',
                    start: '2015-06-18'
                },
                {
                    title: 'Salad',
                    start: '2015-06-18'
                },
                {
                    title: 'Lunch',
                    start: '2015-06-18'
                },
                {
                    title: 'Snacks',
                    start: '2015-06-18'
                },
            ],
            eventClick:function(event){
                 //do the ajax call
            }

 });