Ajax вызова на события мыши в полном Календаре 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, который предупреждает название этого события

Как ча n Я выполняю его?

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

Пример из документации 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); 
     } 
    });