So far I've been doing an synchronous ajax call to fetch events from database and then initialize the calendar afterwards using the variable returned from the ajax (Solution 1).
I have read that doing synchronous calls are usually considered bad though since it freezes the browser so I have tried another option where put the ajax call directly inside the events array of FullCalendar calendar initialization (Solution 2). This gives a nice experience upon first load since the browser isn't locked up due to the asynchronous ajax and you can see the calendar as it builds up.
This has a downside however, every time you change view, it re renders the events giving the user a less smooth experience compared to the first one. Here are the code the two solutions that I tried so far:
Solution 1:
$(document).ready(function(){
$.ajax({
url: 'script.php',
type: 'POST',
async: false,
success: function(response){
json_events = response;
}
});
$('#calendar').fullCalendar({
events: JSON.parse(JSON.stringify(json_events)),
});
});
Solution 2:
$(document).ready(function(){
$('#calendar').fullCalendar({
events: {
url: 'script.php',
type: 'POST',
success : function(response){
}
}
});
});
Are there any other solutions to this "problem"? Right not I like Solution 1 more since you don't have to deal with the re rendering of events as you use the calendar but it would be nice to not have the initial freeze upon loading the page.
Edit: script.php
$events = array();
$query = mysqli_query($link, "SELECT * FROM calendar");
while($fetch = mysqli_fetch_array($query,MYSQLI_ASSOC)) {
$e = array();
$e['id'] = $fetch['id'];
$e['start'] = $fetch['startdate'];
$e['end'] = $fetch['enddate'];
array_push($events, $e);
}
echo json_encode($events);
Would this work? (for aDyson in comments)
events: {
url: 'script2.php',
type: 'POST',
data : {
calendar_id : calendarId
},
success : function(response){
}
}
script2.php
$calend_id = $_POST['calendar_id'];
$start = $_POST['start'];
$end = $_POST['end'];
$events = array();
$query = mysqli_query($link, "SELECT startdate,enddate,id FROM calendar WHERE calendar_id = '$calend_id' AND startdate >= '$start' AND enddate <= '$end'");
while($fetch = mysqli_fetch_array($query,MYSQLI_ASSOC)) {
$e = array();
$e['id'] = $fetch['id'];
$e['start'] = $fetch['startdate'];
$e['end'] = $fetch['enddate'];
array_push($events, $e);
}
echo json_encode($events);