FullCalendar

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

Refetch FullCalendar Events and Resources on select change event

fullcalendar
2.59KViews

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 full stack developer. I love coding. I know Wordpress, Core php, Angularjs, Angular 2, Angular 6, Angular 7, laravel, Codeigniter, Shopify, Squarespace, Jquery, Google Map Api, Vuejs, Reactjs, Bigcommerce etc.

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

Leave a Reply

Positive SSL