在Full Calender JS中单击Ajax调用事件

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

完整日历文档中的示例：

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