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 Cancel reply
This site uses Akismet to reduce spam. Learn how your comment data is processed.
You Might Also Like
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’ );