FullCalendar, events are not updated

Question

Here is my jquery code:

<script type="text/javascript">
$('#refresh').on('click', function(){
    var json_events;
    $.ajax({
        url: 'ajaxRefresh.php',
        type: 'POST',
        data: 'type=fetch',
        success: function(response){
            json_events = response;
            console.log(response);
        }
    });
    $('#calendar').fullCalendar({
        events: json_events
    });
})
</script>

Everything is in order, except that the calendar does not update when I press the button.

I did console.log to check if my JSON returned by ajax was ok. And I got:

[{"id":"10","title":"Rugby","start":"2017-05-16T00:01:00+05:30","end":"2017-05-19T00:01:00+05:30","allDay":false}]

Thanks in advance for your precious help.

PS: I turned on 'fr.js' because I need my calendar to be in French.

Answer 1

In fact, you have the wrong approach. This should work better:

$('#calendar').fullCalendar({
    events: function( start, end, timezone, callback ) { 
      $.ajax({
        url: 'ajaxRefresh.php',
        type: 'POST',
        data: 'type=fetch',
        success: function(response){
            console.log(response);
            callback(response); //sends the events to fullCalendar
        }
      });
    }
});

$('#refresh').on('click', function(){
  $("#calendar").refetchEvents();
});

, fullCalendar. / . , PHP "start" "end" , . , , , , , .

, "", "refetchEvents" , , ​​ "" .

. https://fullcalendar.io/docs/event_data/events_function/ https://fullcalendar.io/docs/event_data/refetchEvents/ .

https://fullcalendar.io/docs/event_data/events_json_feed/ - PHP , , "ajax" "events: ajaxRefresh.php" events fullCalendar.

Answer 2

datetime javascript. javascript datetime

: -

var d = new Date("2015-03-25T12:00:00-06:30");

Answer 3

,

<script type="text/javascript">
$('#refresh').on('click', function(){
$.ajax({
    url: 'ajaxRefresh.php',
    type: 'POST',
    data: 'type=fetch',
    success: function (data) {
                var events = [];
                var myCalendar = $('#calendar');
                myCalendar.fullCalendar();
                $('#calendar').fullCalendar('removeEvents');  //reset existing data in calendar
                $.each(data.d, function (index, value) {
                    events.push({
                        id: value.id,
                        title: value.title,
                        start: FormatDate(value.start),
                        end: FormatDate(value.end),
                        allDay: value.allDay, 
                        color: '#1C84C6',
                    });
                    myCalendar.fullCalendar('renderEvent', events[index]); //inserts the event into calendar plugin
                });
            }
   });
})

 function FormatDate(data) {
        var pattern = /Date\(([^)]+)\)/;
        var results = pattern.exec(data);
        return new Date(parseFloat(results[1]));
    }
</script>