Therichpost

How to Refetch FullCalendar Events and Resources on select change event?

·

therichpost Avatar
therichpost
fullcalendar

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

Other Posts

Comments

33 responses to “How to Refetch FullCalendar Events and Resources on select change event?”

  1. jasmeen Avatar
    jasmeen

    Good post. It’s working

  2. therichpost Avatar
    therichpost

    Thank you jasmeen.

  3. Mario Lopes Avatar
    Mario Lopes

    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());

    }
    });

  4. therichpost Avatar
    therichpost

    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’ );

  5. sanaat Avatar
    sanaat

    how to refetechEvents calendar can you guide me

  6. Ajay Malhotra Avatar
    Ajay Malhotra

    Hi, did you check the code or you have some other requirement?

  7. sanaat Avatar
    sanaat

    yes sir
    new events add but not refetech auto events and not remove all events calendar

  8. Ajay Avatar
    Ajay

    You need this on select onchange?

  9. sanaat Avatar
    sanaat

    have u any example of code

  10. Ajay Avatar
    Ajay

    Please tell me proper requirement so I will share you code.
    What is full requirement?

  11. sanaat Avatar
    sanaat

    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.

  12. sanaat Avatar
    sanaat

    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();

    }
    });

  13. Ajay Avatar
    Ajay

    Okay means, you want only clicked event details?

  14. Ajay Avatar
    Ajay

    Okay means, you want only clicked event details?

  15. sanaat Avatar
    sanaat

    no sir Problem is that after changing it is not updated in fullcalendar
    fisearch to events on top of calender

  16. Ajay Avatar
    Ajay

    Email me your code and other things and I will check:
    therichposts@gmail.com

    Thank you

  17. Ajay Avatar
    Ajay

    Email me your code and other things.

  18. sanaat Avatar
    sanaat

    your email?

  19. peeet Avatar
    peeet

    how to refetechEvents calendar can you guide me

  20. peeet Avatar
    peeet

    how to rerenderEvents calendar can you guide me

  21. Ajay Avatar
    Ajay

    therichposts@gmail.com

  22. Vincent Avatar
    Vincent

    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 ?

  23. Ajay Malhotra Avatar
    Ajay Malhotra

    Okay, you are refreshing full-calendar on date change?

  24. Vincent Avatar
    Vincent

    Yes, using the datesRender from the HTML declaration event.

  25. Vincent Avatar
    Vincent

    Yes i am using the datesRender event.
    For the record i am using full-calendar 4 and Angular 9.

  26. Ajay Malhotra Avatar
    Ajay Malhotra

    Okay fine and I will update you on this but you know, full-calendar has been update to v 5.
    Thanks

  27. Vincent Avatar
    Vincent

    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 ?

  28. Ajay Malhotra Avatar
    Ajay Malhotra

    yes skype is fine and my skype id is: ajay.malhotra70

    Thanks

  29. Priyanka Ingole Avatar
    Priyanka Ingole

    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?

  30. Gaurav Avatar
    Gaurav

    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.

  31. Ajay Malhotra Avatar
    Ajay Malhotra

    Yes I will update you soon, thanks.

  32. cand1 Avatar
    cand1

    Amazing Post
    It resolved my issue that I was facing for a long time
    Thanks a ton

  33. Ajay Malhotra Avatar
    Ajay Malhotra

    That’s great 🙂

Leave a Reply