Javascript 在日历函数中使用promises响应（需要来自ajax调用的数据）

Ajax呼叫承诺：

var promise = new Promise(function(resolve, reject) {
    jQuery.ajax({
            url:'<?php echo site_url();?>/MyController/ajax_cal',
            type:'POST',
            dataType: "JSON",
            success:function(results) {
                resolve(results); 
                //reject(Error(request.statusText)); // status is not 200 O K, so reject
            }
        });
  });

Calander javascript代码：

<!-- Calander Module starts-->
    var calendar = $('#calendar').calendar({

        console.log(data); /// want to use the data from ajax call on promises 
        events_source: data  , // here 
        view: 'month',
        tmpl_path: '<?php echo base_url();?>asserts/bootstrap_calender/tmpls/',
        tmpl_cache: false,
        day: '2017-02-14',
        onAfterEventsLoad: function(events) {
            if(!events) {
                return;
            }
            var list = $('#eventlist');
            list.html('');

            $.each(events, function(key, val) {
                $(document.createElement('li'))
                    .html('<a href="' + val.url + '">' + val.title + '</a>')
                    .appendTo(list);
            });
        },
        onAfterViewLoad: function(view) {
            $('.page-header h3').text(this.getTitle());
            $('.btn-group button').removeClass('active');
            $('button[data-calendar-view="' + view + '"]').addClass('active');
        },
        classes: {
            months: {
                general: 'label'
            }
        }
}); 
(function($) {
$('.btn-group button[data-calendar-nav]').each(function() {
        var $this = $(this);
        $this.click(function() {
            calendar.navigate($this.data('calendar-nav'));
        });
    });

    $('.btn-group button[data-calendar-view]').each(function() {
        var $this = $(this);
        $this.click(function() {
            calendar.view($this.data('calendar-view'));
        });
    });

    $('#first_day').change(function(){
        var value = $(this).val();
        value = value.length ? parseInt(value) : null;
        calendar.setOptions({first_day: value});
        calendar.view();
    });

    $('#language').change(function(){
        calendar.setLanguage($(this).val());
        calendar.view();
    });

    $('#events-in-modal').change(function(){
        var val = $(this).is(':checked') ? $(this).val() : null;
        calendar.setOptions({modal: val});
    });
    $('#format-12-hours').change(function(){
        var val = $(this).is(':checked') ? true : false;
        calendar.setOptions({format12: val});
        calendar.view();
    });
    $('#show_wbn').change(function(){
        var val = $(this).is(':checked') ? true : false;
        calendar.setOptions({display_week_numbers: val});
        calendar.view();
    });
    $('#show_wb').change(function(){
        var val = $(this).is(':checked') ? true : false;
        calendar.setOptions({weekbox: val});
        calendar.view();
    });
    $('#events-modal .modal-header, #events-modal .modal-footer').click(function(e){
        //e.preventDefault();
        //e.stopPropagation();
    });
}(jQuery));  
<!-- Calander Module ends-->

var calendar=$（'#calendar'）。日历({
console.log（data）；///想要使用来自ajax调用的数据吗
事件\u来源：数据，//此处
视图：“月”，
tmpl_路径：“断言/引导_日历/tmpls/”，
tmpl_缓存：false，
日期：2017-02-14，
onAfterEventsLoad:函数（事件）{
如果（！事件）{
返回；
}
变量列表=$（“#事件列表”）；
html（“”）；
$.each（事件、函数（键、值）{
$（document.createElement（'li'））
.html（“”）
.附件（清单）；
});
},
onAfterViewLoad：函数（视图）{
$（'.page header h3'）.text（this.getTitle（））；
$（'.btn组按钮'）。removeClass（'active'）；
$（'button[data calendar view=“”+view+“]”）addClass（'active'）；
},
课程：{
月份：{
概述：“标签”
}
}
}); 
（函数（$）{
$（'.btn组按钮[数据日历导航]）。每个（函数（）{
var$this=$（this）；
$this。单击（函数（）{
calendar.navigate（$this.data（'calendar-nav'））；
});
});
$（'.btn组按钮[数据日历视图]）。每个（函数（）{
var$this=$（this）；
$this。单击（函数（）{
calendar.view（$this.data（'calendar-view'））；
});
});
$（'first#u day'）。更改（函数（）{
var值=$（this.val（）；
value=value.length？parseInt（值）：空；
setOptions（{first_day:value}）；
calendar.view（）；
});
$（'#语言'）。更改（函数（）{
calendar.setLanguage（$（this.val（））；
calendar.view（）；
});
$（'#模式中的事件'）。更改（函数（）{
var val=$（this）.is（':checked'）？$（this）.val（）：null；
setOptions（{modal:val}）；
});
$（“#格式-12小时”）。更改（函数（）{
var val=$（this）.is（':checked'）？true:false；
setOptions（{format12:val}）；
calendar.view（）；
});
$（'#show_wbn'）。更改（函数（）{
var val=$（this）.is（':checked'）？true:false；
setOptions（{display_week_number:val}）；
calendar.view（）；
});
$（'#show_wb'）。更改（函数（）{
var val=$（this）.is（':checked'）？true:false；
setOptions（{weekbox:val}）；
calendar.view（）；
});
$（“#事件模式.模式页眉，#事件模式.模式页脚”）。单击（函数（e）{
//e、 预防默认值（）；
//e、 停止传播（）；
});
}（jQuery））；

---

我想在“calendar events\u source field”中获取动态数据（json格式）。我曾经使用过ajax调用，但是我知道在ajax调用之外无法访问变量。我使用Promissions成功地在ajax调用之外警告变量，但仍然无法在“calendar events\u source”字段中访问它。我不知道什么地方出了问题，也不知道如何使用它

解决此问题的一种方法是在有数据（在then块中）后创建日历元素。我可能会这样做，以便构建UI，然后触发抓取，然后在then（）函数中调用ONAFTEREVENTS加载接收到的事件，因为它似乎在构建日历。

解决此问题的一种方法是在有数据后创建日历元素（在then块中）。我可能这样做是为了构建UI，然后触发抓取，然后在then（）函数中调用afterevents加载接收到的事件，因为它似乎构建了日历。

我也尝试过同样的方法。我已经在承诺中创建了日历元素。但是它不起作用。那么您面临什么样的错误/问题呢？当我将日历元素放在“then”块中时，日历元素不会执行。否则，当放置在“then”块之外时，日历的动态数据（ajax输出）不起作用，但日历起作用。我没有找到日历函数，但它可以很好地处理ajax调用之外的一些静态内容（但我需要来自控制器的一些动态数据），我也尝试过同样的方法。我已经在承诺中创建了日历元素。但是它不起作用。那么您面临什么样的错误/问题呢？当我将日历元素放在“then”块中时，日历元素不会执行。否则，当放置在“then”块之外时，日历的动态数据（ajax输出）不起作用，但日历起作用。我没有找到日历函数，但它与ajax调用之外的一些静态内容配合得很好（但我需要控制器中的一些动态数据）

<!-- Calander Module starts-->
    var calendar = $('#calendar').calendar({

        console.log(data); /// want to use the data from ajax call on promises 
        events_source: data  , // here 
        view: 'month',
        tmpl_path: '<?php echo base_url();?>asserts/bootstrap_calender/tmpls/',
        tmpl_cache: false,
        day: '2017-02-14',
        onAfterEventsLoad: function(events) {
            if(!events) {
                return;
            }
            var list = $('#eventlist');
            list.html('');

            $.each(events, function(key, val) {
                $(document.createElement('li'))
                    .html('<a href="' + val.url + '">' + val.title + '</a>')
                    .appendTo(list);
            });
        },
        onAfterViewLoad: function(view) {
            $('.page-header h3').text(this.getTitle());
            $('.btn-group button').removeClass('active');
            $('button[data-calendar-view="' + view + '"]').addClass('active');
        },
        classes: {
            months: {
                general: 'label'
            }
        }
}); 
(function($) {
$('.btn-group button[data-calendar-nav]').each(function() {
        var $this = $(this);
        $this.click(function() {
            calendar.navigate($this.data('calendar-nav'));
        });
    });

    $('.btn-group button[data-calendar-view]').each(function() {
        var $this = $(this);
        $this.click(function() {
            calendar.view($this.data('calendar-view'));
        });
    });

    $('#first_day').change(function(){
        var value = $(this).val();
        value = value.length ? parseInt(value) : null;
        calendar.setOptions({first_day: value});
        calendar.view();
    });

    $('#language').change(function(){
        calendar.setLanguage($(this).val());
        calendar.view();
    });

    $('#events-in-modal').change(function(){
        var val = $(this).is(':checked') ? $(this).val() : null;
        calendar.setOptions({modal: val});
    });
    $('#format-12-hours').change(function(){
        var val = $(this).is(':checked') ? true : false;
        calendar.setOptions({format12: val});
        calendar.view();
    });
    $('#show_wbn').change(function(){
        var val = $(this).is(':checked') ? true : false;
        calendar.setOptions({display_week_numbers: val});
        calendar.view();
    });
    $('#show_wb').change(function(){
        var val = $(this).is(':checked') ? true : false;
        calendar.setOptions({weekbox: val});
        calendar.view();
    });
    $('#events-modal .modal-header, #events-modal .modal-footer').click(function(e){
        //e.preventDefault();
        //e.stopPropagation();
    });
}(jQuery));  
<!-- Calander Module ends-->