Question

我正在努力应对来自两个不同资源的事件。我知道，由于ajax是异步的，我不能获得多个回调，我的代码证明了 - 通过重新加载页面，我得到一个或其他查询的随机结果。但必须有一些解决方法，对吗？我只是想得到两个事件和假期的组合数组，所以我可以将它作为一个实例传递给fullcalendar。非常感谢！

var events = [];
            var vaca = [];
            var now = moment();
            var nextMonth = now.clone().add(1, 'month');
            $.ajax({
                type: "GET",
                url: "/home/GetEvents",
                success: function (data) {
                    $.each(data, function (i, v) {
                        //alert(v.id);
                        events.push({
                            title: v.title,
                            description: "Project Type: " + v.projectType,
                            start: moment(v.onSite),
                            end: v.onSiteTill != null ? moment(v.onSiteTill).add('days', 1) : null,
                            color: v.color,
                            allDay: true
                        });

                    })

                    GenerateCalendar(events);

                },
                error: function (error) {
                    alert('failed');

                }

            })

 $.ajax({
                type: "GET",
                url: "/home/GetVacations",
                success: function (data2) {
                    $.each(data2, function (i, v) {
                        //alert(v.who);
                        vaca.push({
                            title: v.who,
                            description: ("Who or what: " + v.who + ". Vacation because " + v.why).link("Vacation/Edit/" + v.id),
                            start: moment(v.fromWhen),
                            // add one day due to excluding end date in callendar
                            end: v.tillWhen != null ? moment(v.tillWhen).add('days', 1) : null,
                            color: "#cc0000",
                            allDay: true
                        });

                    })

                    GenerateCalendar(vaca);

                },

                error: function (error) {
                    alert('failed');

                }

            })

Answer 1

首先生成日历，然后进行2次调用以渲染事件。您可以使用FullCalendar renderEvent或renderEvents来实现此目的。

我创建了一个基本的工作示例here。

Answer 2

您可以从第一次AJAX调用调用下一个Ajax调用。示例代码参考：

            $.ajax({url: URL, data : {//data
            }).done( function( data ) {
                // Handles successful responses only
            }).fail( function( error) {
                console.log( error);
            }).then( function( data ) {   // Promise finished
                $.ajax( { //2nd ajax
                    url :  URL,
                    data : { DATA }
                }).done( function( data ) {
                        // 2nd call finished
                }).fail( function( reason ) {
                     console.log( error);
                });
            });

Fullcalendar - 两个Ajax回调

2 个答案: