How to load data from ajax to zabuto calendar plug

问题:

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 use this function load data when click nav prev month or next month. (use two action action and action_nav). This is snipped code

<script>   
    $(document).ready(function () {
    function load_data() {
                    var list = '';
                    $.ajax({
                        type: "POST",
                        url: "../BUS/WebService.asmx/LOAD_DATA",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        cache: false,
                        success: function (data) {
                            list = $.parseJSON(data.d);
                            console.log(list);
                        }
                    });
                    return list;
                }
       function myNavFunction(id) {
                //code in here
            }

            function myDateFunction(id) {
                //code in here
            }
    $("#my_calendar").zabuto_calendar({
                    data: load_data(),
                    action: function () {
                           return myDateFunction(this.id);
                    },
                    action_nav: function () {
                           return myNavFunction(this.id);
                    }
                });

    });

    </script>

When i test this, data not show, the data from ajax as { "date": "2016-06-01", "title": 2, "badge": true },{ "date": "2016-06-04", "title": 1, "badge": true },{ "date": "2016-06-10", "title": 1, "badge": true } Thank you so much.

回答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 () {
function load_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();
});

回答2:

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

function initZabuto(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);
        }
    });
}