How to refresh the calendar when year changed function fired

[SethuICOMM]

Hi,

Am new to year calendar plugin and want to enable the color based on dates assigned the datasource. Have successfully worked ajax function and build the datasource. i want to assign the datasource dynamically and refresh the mouseover content based on the year selection. now the mouseover content is append the existing content and visible the same. $(function() {

load_data(rs);

    function load_data(monyear) {
        $.ajax({
            type: "POST",
            url: "AppWBYearlyView.aspx/GetAllBookingDetails",
            data: JSON.stringify({ Booker: BookedBy, Mnyear: monyear }),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            async: false,
            success: function (response) {
                $.each(response.d, function (index) {
                    newFeeds1.push({
                        id: response.d[index].id,
                        name: response.d[index].name,
                        location: response.d[index].location,
                        // startDate: new Date(response.d[index].startDate.substring(7,11), month.indexOf(response.d[index].startDate.substring(3,6)), response.d[index].startDate.substring(0,2)),
                        //endDate: new Date(response.d[index].endDate.substring(7,11), month.indexOf(response.d[index].startDate.substring(3,6)), response.d[index].endDate.substring(0,2))
                        startDate: new Date(response.d[index].stYear, response.d[index].stMon - 1, response.d[index].stDay),
                        endDate: new Date(response.d[index].edYear, response.d[index].edMon - 1, response.d[index].edDay),
                        CreatedRole: response.d[index].CreatedRole
                    })

                });
            },
            failure: function (response) {
                alert(response.d);
            },
            error: function (response) {
                alert(response.responseText);
            }
        });
    }

    console.log(newFeeds1);

    document.querySelector('.calendar').addEventListener('periodChanged', function (e) {
          console.log("New year selected: " + e.currentYear);
         })

    calendar = new Calendar('#calendar', {  
        enableContextMenu: true,
        enableRangeSelection: true, 
        mouseOnDay: function(e) {
            if(e.events.length > 0) {
                var content = '';

                for (var i in e.events) {                        
                    content += '<div class="event-tooltip-content">'
                                    + '<div class="event-name" style="color:' + e.events[i].color + '">' + e.events[i].name + '</div>'
                                    + '<div class="event-location">' + e.events[i].location + '</div>'
                                     + '<div class="event-location">Created By:' + e.events[i].CreatedRole + '</div>'
                                + '</div>';
                }

                $(e.element).popover({ 
                    trigger: 'manual',
                    container: 'body',
                    html:true,
                    content: content,
                    placement: 'auto right'
                });

                $(e.element).popover('show');
            }
        },
        mouseOutDay: function(e) {
            if(e.events.length > 0) {
                $(e.element).popover('hide');
            }
        },
        clickDay: function (e) { 
            let dateString = moment(e.date).format("DD-MMM-YYYY");
            var content = '';
            for (var i in e.events) { 
                if (i > 0) {
                    content +=  '<div style="border-bottom: 1px solid #e2e7eb;margin-bottom:2px !important;"></div>';
                }
                content += '<div class="timeline"><div class="timeline-body"><div class="timeline-header"> <span class="username">'
                            + e.events[i].name + '</span></div><div class="timeline-content"><p>' + e.events[i].location + '</p></div>'
                            + '<div class="timeline-footer"><div class="row"><div class="col-md-6 col-sm-6"> Created By : <b>' + e.events[i].CreatedRole + '</b></div></div></div>'
                            + '</div></div>';

            }
            $('#lblPurpose').html('Diary Entries for ' + dateString);
            $('#mbody').html(content);
            $('#myModal').modal('show');   
        },
        yearChanged: function (e) {
            alert(e.currentYear)
            //load_data(e.currentYear)
            e.preventRendering = true;

        },

        dayContextMenu: function(e) {
            $(e.element).popover('hide');
        },
        dataSource: newFeeds1 
    });

  });

Kindly helpme out

[SethuICOMM]

document.querySelector('.calendar').addEventListener('yearChanged', function (e) { console.log("New year selected: " + e.currentYear); load_data(e.currentYear); //$('#calendar').data('calendar').setDataSource(newFeeds1);

        calendar = new Calendar('#calendar', {
            dataSource: newFeeds1
        });
    })