Refetch FullCalendar Events and Resources on select change event
7.66KViews
Hello to all, welcome to therichpost.com. In this post, I will tell you, How to Refetch FullCalendar Events and Resources on select change event? fullcalendar is the best A JavaScript event calendar. Customizable and open source.
In this post, we will Refetch FullCalendar Events and Resources on select change event.
Here are the events:
//remove old data
$('#fullCalendar').fullCalendar('removeEvents');
//Getting new event json data
$("#fullCalendar").fullCalendar('addEventSource', response);
//Updating new events
$('#fullCalendar').fullCalendar('rerenderEvents');
//getting latest Events
$('#fullCalendar').fullCalendar( 'refetchEvents' );
//getting latest Resources
$('#fullCalendar').fullCalendar( 'refetchResources' );
Here is the working code and you need to add this into your js script tags:
//Select change
$("select").on("change", function(){
id = this.value;
$.ajax({
url: 'url',
type: 'POST',
data: {
id: this.value
},
}).done(function(response) {
//remove old data
$('#fullCalendar').fullCalendar('removeEvents');
//Getting new event json data
$("#fullCalendar").fullCalendar('addEventSource', response);
//Updating new events
$('#fullCalendar').fullCalendar('rerenderEvents');
//getting latest Events
//$('#fullCalendar').fullCalendar( 'refetchEvents' );
//getting latest Resources
$('#fullCalendar').fullCalendar( 'refetchResources' );
});
})
There are so many tricks in fullcalendar and I will let you know all. Please do comment if you any query related to this post. Thank you. Therichpost.com
4 Comments
Leave a Reply
This site uses Akismet to reduce spam. Learn how your comment data is processed.
Angular 8 fullcalendar event tooltip
Hello to all, welcome to therichpost.com. In this post, I will tell you, Angular 8 fullcalendar event tooltip. angular 8...
How to implement Business Hours Fullcalendar in Angular 8?
Hello to all, welcome to therichpost.com. In this post, I will tell you, How to implement Business Hours Fullcalendar in...
Fullcalendar with select year and month dropdown
Hello to all, welcome to therichpost.com. In this post, I will tell you, Fullcalendar with select year and month dropdown...
Angular 8 Fullcalendar with dynamic events working code
Hello to all, welcome to therichpost.com. In this post, I will tell you, Angular 8 Fullcalendar with dynamic events working...
Good post. It’s working
Thank you jasmeen.
Hi
How to refresh it where I load one xml file like:
$(“#calendar”).fullCalendar({
header: {
left: ‘prev myCustomButton’,
center: ‘title’,
right: ‘next, month, basicWeek ,basicDay,agendaWeek,agendaDay’,
},
eventLimit: true,
businessHours: true,
editable: true,
events: function (start, end, timezone, callback) {
$.ajax({
url: ‘eventos_professor.xml’,
dataType: ‘xml’,
data: {
// our hypothetical feed requires UNIX timestamps
start: start.unix(),
end: end.unix()
},
success: function (doc) {
var events = [];
$(doc).find(‘event’).each(function () {
events.push({
title: $(this).attr(‘title’),
start: $(this).attr(‘start’), // will be parsed
end: $(this).attr(‘end’),
allDay: false,
backgroundColor: “#0073b7”,
borderColor: “#0073b7”
});
});
callback(events);
}
});
},
selectable: true,
dayClick: function (fecha, evento, vista) {
//alert(fecha.format());
$(“#myModal”).modal();
$(“#ContentPlaceHolder1_txtData”).val(fecha.format());
}
});
you can seperate the ajax function and in ajax success you can call below full calendar hooks:
//remove old data
$(‘#fullCalendar’).fullCalendar(‘removeEvents’);
//Getting new event json data
$(“#fullCalendar”).fullCalendar(‘addEventSource’, response);
//Updating new events
$(‘#fullCalendar’).fullCalendar(‘rerenderEvents’);
//getting latest Events
//$(‘#fullCalendar’).fullCalendar( ‘refetchEvents’ );