Refetch FullCalendar Events and Resources on select change event
10KViews
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
21 Comments
Leave a Reply
This site uses Akismet to reduce spam. Learn how your comment data is processed.
How to implement Full Calendar in Angular 9?
Hello to all, welcome to therichpost.com. In this post, I will tell you, How to implement Fullcalendar in Angular 9?...
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...
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’ );
how to refetechEvents calendar can you guide me
Hi, did you check the code or you have some other requirement?
yes sir
new events add but not refetech auto events and not remove all events calendar
You need this on select onchange?
have u any example of code
Please tell me proper requirement so I will share you code.
What is full requirement?
Filters: events, I have one click event and inside of it I am reloading the fullcalendar. But after the reloading I would like to hide current element on which the click not working.
Okay means, you want only clicked event details?
But somehow its not working. Below is my code
$.ajax({
url: “index.php?calendar/get_event/”+$scope.selectedevent,
success: function (response) {
let test=JSON.parse(response);
console.log(test);
// $(‘#calendar’).fullCalendar(‘refetchEvents’,test);
$(‘#calendar’).fullCalendar(‘removeEvent’,test);
$(‘#calendar’).fullCalendar(‘renderEvent’,test,true);
// $(‘#calendar’).hide();
}
});
Okay means, you want only clicked event details?
no sir Problem is that after changing it is not updated in fullcalendar
fisearch to events on top of calender
Email me your code and other things and I will check:
therichposts@gmail.com
Thank you
Email me your code and other things.
your email?
therichposts@gmail.com
how to refetechEvents calendar can you guide me
how to rerenderEvents calendar can you guide me