How To Load Data From Ajax To Zabuto Calendar Plugin?

As title, I tried load data from ajax to zabuto calendar, but seem it's not working, ref of zabuto calendar http://zabuto.com/dev/calendar/examples/show_data.html. And i want to us

Solution 1:

Try the following: you need to place the calendar function in the success function of the ajax call because ajax is asynchronous

$(document).ready(function () {
functionload_data() {
                $.ajax({
                    type: "POST",
                    url: "../BUS/WebService.asmx/LOAD_DATA",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    cache: false,
                    success: function (data) {
                        var list = $.parseJSON(data.d);
                        $("#my_calendar").zabuto_calendar({
                           data: list;
                        });
                    },
                    error: function (data) {
                        console.log(data.d);
                    }
                });
            }


load_data();
});

Solution 2:

I solved the issue by the code as below. It works well in window's browser but not in a mobile browser.

functioninitZabuto(id, events, month){
    $('#zabuto_parent').empty().append("<div id='"+id+"'></div>");
    $("#"+id).zabuto_calendar({
        year:moment(month).format("YYYY"),
        month:moment(month).format("MM"),
        language:"cn",
        data: events,
        action: function () {
            zabutoDayClick(this.id);
        },
        action_nav: function () {
            zabutoMonthChange(this.id);
        }
    });
}

Solution 3:

This is the code I used to refresh Zabuto calendar after a modal. The problem with other options is that upon refresh, Zabuto would create a new batch of modals appended to the current body. This solutions clears all those "old" modals and opens room for the new. Key area is the success section of the modal update ajax.

$(document).ready(function () {
    $("#date-popover").popover({html: true, trigger: "manual"});
    $("#date-popover").hide();
    $("#date-popover").click(function (e) {
        $(this).hide();
    });
    load_calendar();
});

functionload_calendar() {
    $("#my-calendar").zabuto_calendar({
        show_next: 1,
        action: function () {
            returnmyDateFunction(this.id, false);
        },
        ajax: {
            url: "calendar-info.php",
            modal: true
        },
    });
}
        
functionmyDateFunction(id, fromModal) {
    $("#date-popover").hide();
    if (fromModal) {
        $("#" + id + "_modal").modal("hide");
        var date = $("#" + id).data("date");
        var optradio = $("#" + id + "_modal").find("input[name='optradio']:checked").val();
        $.ajax("calendar-update.php?status="+optradio+"&date="+date, {
            success: function(data) {
                $(".modal").remove();
                $('body').removeClass('modal-open');
                $('.modal-backdrop').remove();
                $("#my-calendar").empty();
                load_calendar();
            },
            error: function() {
                  alert("Problem!");
            }
        });
    }
    var hasEvent = $("#" + id).data("hasEvent");
    if (hasEvent && !fromModal) {
        returnfalse;
    }
    returntrue;
}