Fullcalendar: Json not reflecting in the fullcalendar - php

Question

I am trying to fetch events from an external php file onto the full calendar view. I had asked a similar question sometime back but I am still struggling with this thing.
CODE (JS):
<script>
$(document).ready(function() {
$('#ccategory').change(function(){
var id = $(this).val();
var user = $('#current_user').val();
var calendar = $('#calendar').fullCalendar({
events: {
url: '<?php echo get_site_url(); ?>/get_calcat_calendar.php',
data: function() { // a function that returns an object
return {
dynamic_value1: id,
dynamic_value2: user
};
}
error: function() {
alert('There was an error while fetching events.');
}
}
});
});
});
</script>
Also I am going to add the file which is generating the json file below:
PHP CODE:
while($row = mysqli_fetch_assoc($result)){
$title = get_the_title($row['ID']);
$url = get_permalink($row['ID']);
$e = array();
$e['title'] = $title;
$e['url'] = $url;
$e['start'] = $row['start_date'];
$e['end'] = $row['end_date'];
$e['color'] = '#33cc33';
array_push($events, $e);
}
echo json_encode($events);
exit();
This is the code which I am using the fetch the json from the database. Any help will be greatly appreciated. Thank You
REQUIREMENT UPDATE:
[{"title":"Timeout72","url":"http:\/\/www.goawebsites.com\/goacalendar\/event\/timeout72\/","start":"2017-11-29","end":"2017-12-31","color":"#33cc33"}]
<div id='calendar'></div>
OTHER CALENDAR SCRIPT:
<script>
$(document).ready(function() {
var user_id = $('#current_user').val();
$('#calendar').fullCalendar({
displayEventTime: false,
events: [
<?php foreach($result as $r) { ?>
{
<?php $title = get_the_title($r['event_id']); ?>
<?php $url = get_permalink($r['event_id']); ?>
title: '<?php echo html_entity_decode($title); ?>',
start: '<?php echo $r['start_date'] ?>',
end: '<?php echo $r['end_date']." 23:59:59" ?>',
url: '<?php echo $url; ?>',
color: '#33cc33'
},
<?php } ?>
]
});
});
</script>

Answer 1

This should be more like what you need:
1) When you first set up your calendar, define your extra "user" and "category" data parameters dynamically (using a callback function).
2) Inside your category "change" event, all you need to do now is simply tell the calendar to refetch the events. There is no need to completely re-initialise the calendar, as you have been doing.
I can't see all of the code, including where you first initialise the calendar, so this may not be 100% accurate, but this is the general idea:
$(document).ready(function() {
$('#calendar').fullCalendar({
events: {
url: '<?php echo get_site_url(); ?>/get_calcat_calendar.php',
data: function() { //using a callback function here allows fullCalendar to fetch the latest values of these parameters every time it makes a new request to the server, rather than them being supplied statically at initialisation
return {
id: $('#ccategory').val(),
user: $('#current_user').val()
};
},
error: function() {
alert('There was an error while fetching events.');
}
}
});
$('#ccategory').change(function() {
//just tell the calendar re-fetch the events. It will automatically get the latest category ID value and send it to the server as a parameter
$("#calendar").fullCalendar("refetchEvents");
});
});
This is based on the pattern shown in the "Dynamic data parameter" section in the documentation at https://fullcalendar.io/docs/event_data/events_json_feed/