Friday, October 30, 2020
therichposts@gmail.com
FullCalendar

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

Refetch FullCalendar Events and Resources on select change event

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

Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know Wordpress, Core php, Angularjs, Angular 2, Angular 6, Angular 7, Angular 8, Angular 9, Angular 10 Nodejs, laravel, Codeigniter, Shopify, Squarespace, Jquery, Google Map Api, Vuejs, Reactjs, Bigcommerce etc.

29 Comments

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

  • 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.

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

    }
    });

  • 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 ?

  • 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?

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.