2.2K
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
33 comments
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
Hi,
I followed your guide to refresh calendar events but the new events are still not showing.
I have no error in the console.
I initiate events using [events]=”displayedEvents” from HTML then using the callback (datesRender)=”handleDateChange($event)” to search for events matching the new date range.
My code looks like that :
handleDateChange(arg): void {
this.myService.fetchEvents(arg.view.currentStart, arg.view.currentEnd).subscribe(events => {
const calendarApi = this.calendarComponent.getApi();
// test
calendarApi.removeAllEvents();
calendarApi.addEventSource(events);
calendarApi.rerenderEvents();
calendarApi.refetchEvents();
}
}
Any idea ?
Okay, you are refreshing full-calendar on date change?
Yes, using the datesRender from the HTML declaration event.
Yes i am using the datesRender event.
For the record i am using full-calendar 4 and Angular 9.
Okay fine and I will update you on this but you know, full-calendar has been update to v 5.
Thanks
Yes I know 🙂 I tried to migrate when the v5 came out but i think it was still bugged. Now I am not sure I have time to migrate all my full-calebdar screens… Maybe we can communicate via mail or skype if you don’t mind ?
yes skype is fine and my skype id is: ajay.malhotra70
Thanks
Hi Ajay,
I am using full calendar in Angular 8, I have assigned it the events array, it displays all the events of a user,
calendarOptions: CalendarOptions = {
initialView: ‘dayGridMonth’,
showNonCurrentDates: false,
fixedWeekCount: false,
events: this.calendarEvents
};
now we have a dropdown list where user can select only one category events to be reflected, depending upon the value selected by user I need to assign specific events array,
I was trying it in an if condition like below,
if(this.timeline_val == ‘STTR’){
this.calendarOptions = {
initialView: ‘dayGridMonth’,
showNonCurrentDates: false,
fixedWeekCount: false,
events: this.calendarEvents1
};
But it is not getting overwritten, with events1 value.
Can you please help? How do I reassign events array in Angular?
Hi! This is a nice code..! I have used this in one of my project, but now I am facing some issues.
Actually, I have added color code to the dates (i.e Green is for available slots, Red is for Non Available slots), But on first load the color code is not working although the calendar is working fine but when I move to next month from the calendar and again come on current month then the color code will work.
I have to update the calendar according to select box selection. Each laboratory should have its own calendar. If you say I will share my code as well but please help me out.
Yes I will update you soon, thanks.
Amazing Post
It resolved my issue that I was facing for a long time
Thanks a ton
That’s great 🙂