AngularJS FullCalendar - 在初始加载时未加载事件

Question

问题

我正在努力让我的活动在加载时填充完整日历。当我更改月份时，事件工作正常，但是当应用程序首次加载时，它们似乎不会出现。

代码

以下是我的日历UIConfig的代码：

//THIS CALLS MY GET METHOD.
var holidaysnew = getUserEventsById.getUserEventsById();

$scope.uiConfig = {
    calendar: {
        viewRender: function (view, element) {
            holidaysnew.forEach(function (hol) {

                $scope.eventSources[0].events.push({
                    end: $filter('dateFilter')(hol.HOLIDAY_END),
                    start: $filter('dateFilter')(hol.HOLIDAY_START),
                    title: hol.HOLIDAY_TITLE,
                    color: $filter('colorEventFilter')(hol.HOLIDAY_EVENT_STATE_ID)
                });
            });
        },
        height: 850,
        editable: true,
        header: {
            left: '',
            center: '',
            right: ''
        },
    }
};

现在，viewRender会在我改变月份时遇到负载。奇怪的是它只在您点击新月时才有效。

Answer 1

@Ben问题是你正在服务中进行http调用。但是这里的日历不会等待http响应。因此，在您收到http响应之后，首先加载日历，这是您第一次没有得到响应的原因。您需要更改加载以下事件的方式。

$scope.uiConfig = {
    calendar: {
        events: function(start, end, timezone, callback) {

            $http({
                method  : "GET",
                url     : 'your_url_to_fatch_events',
                data    : {start: startDate, end: endDate, id: userId}
            }).then(
                function (olidaysnew) {
                    var events = [];
                    // or make your events
                    olidaysnew.forEach(function (hol) {
                        events.push({
                            end: $filter('dateFilter')(hol.HOLIDAY_END),
                            start: $filter('dateFilter')(hol.HOLIDAY_START),
                            title: hol.HOLIDAY_TITLE,
                            color: $filter('colorEventFilter')(hol.HOLIDAY_EVENT_STATE_ID)
                        });

                    )}
                    callback(events);
                }
            )
        },
        height: 850,
        editable: true,
        header: {
            left: '',
            center: '',
            right: ''
        },
    }
}