Ajax 在 Fullcalendar 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>

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

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

我该如何执行？

Answer 1

您可以使用 eventClick 选项 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
            }

 });

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);
      }
    });

Ajax 在 Fullcalendar JS 中调用事件点击

Ajax Call on event click in Full Calender JS

javascript

ajax

jquery

fullcalendar