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>