Ajax Call on事件在Full Calender JS中单击

Question

我正在处理Full Calender，我创建了四个事件Falahar,snakes, salad and lunch，如下所示：

<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>  

这四个事件显示在日历上，现在我想要的是

  

当我点击任何事件时，我想调用一个警告的AJAX   此事件的名称

我该如何表演？

Answer 1

您可以使用fullcalendar

的 eventClick 选项

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

 });

Answer 2

fullcalendar文档中的示例：

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

    }
});

只需按照以下方式修改：

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