FullCalendar события не обновляются

вот мой код jquery:

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

все в порядке на самом деле, за исключением thaat календарь не обновляется, когда я нажимаю на кнопку.

Я сделал консоль.войдите, чтобы увидеть, был ли мой JSON, возвращенный ajax, в порядке. И я получил:

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

заранее спасибо за вашу драгоценную помощь.

PS: я включил ' fr.потому что мне нужно, чтобы мой календарь был на французском.

3 ответов


вы получили ваш подход неправильный путь вокруг действительно. Это должно работать лучше:

$('#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 должен принимать параметры" начало "и" конец " и возвращать данные только для дат, которые в настоящее время отображаются в календаре. Таким образом, вы не загрузите больше данных, чем вам действительно нужно, что улучшит производительность, особенно если приложение работает в течение многих лет и собирает много данных, большинство из которых пользователи больше не будут просматривать после определенного момента.

и затем, когда вы нажимаете "обновить", он запускает метод" refetchEvents "вручную, который просто вызывает ту же функцию, которую вы предоставили параметру" events " снова в качестве дополнительного вызова.

см.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" полностью из кода на стороне клиента, и просто написать "события:" ajaxRefresh.php " как свойство events в fullCalendar.


время не является допустимым javascript datetime. вам нужно преобразовать начало и конец в javascript datetime

пример:

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


мой измененный код для вашей проблемы,

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