Отображение пользовательских выбранных дат из базы данных в нескольких календарях JQuery на странице

Question

Я работаю в системе входа в систему, где пользователь может зарегистрировать несколько продуктов с привязанными к ним календарями доступности. Весь сайт работает на ajax response.

Проблема заключается в том, что когда пользователь выбирает загруженный продукт в первый раз и просматривает календарь, ранее сохраненные даты отображаются в порядке выбора. Но после этого, независимо от того, на сколько продуктов он переключается, он показывает одинаковые даты в календаре.

Ниже мой код:

jQuery(document).ready(function ($) {

// Click Function On Calendar Tab
$("#tabCalendar").click(function(){
    var productId = $("#productId").val();
    $.ajax({
        type:'POST',
        url:'../ajax/listing_availabily_dates_fetch.php',
        data: "&productId=" + productId,
        datatype: 'json',
        success:function(response){
            startTheCalendar(response);
        }
    });
});

function startTheCalendar(response){
    $("#show-next-month").calendar({
        num_next_month: 11,
        num_prev_month: 0,
        unavailable: response, // This is where dates should update
        onSelectDate: function(date, month, year, thisEvent){
            var dateData = [year, month, date].join('-');
            selected = response;
            dateClickEvent(dateData, thisEvent);
        }
    });
}

// function dateClickEvent(dateData, thisEvent) {}


});

Ищу помощи.

Answer 1

Я искал решение в неверном направлении или, может быть, более сложное.Я подумал, что было бы проще, если бы я мог обновить данные плагина, для чего я даже начал создавать пользовательскую функцию в самом плагине.

К моему удивлению и в отсутствие какой-либо помощи это было довольно просто:

HTML:

<div id="calendar-holder">
    <div id="calendar" ></div>
</div>

JQuery:

function startTheCalendar(response){

    $("#calendar-holder").html("");
    $("#calendar-holder").html('<div id="calendar" ></div>');

    if(response == ""){ response = []; }

    $("#show-next-month").calendar({
        num_next_month: 11,
        num_prev_month: 0,
        unavailable: response, // This is where dates should update
        onSelectDate: function(date, month, year, thisEvent){
            var dateData = [year, month, date].join('-');
            selected = response;
            dateClickEvent(dateData, thisEvent);
        }
    });
}

Мне просто нужно было удалить данные плагина из HTML и снова заполнить их.