无法在角度完整日历上显示自定义事件

时间:2015-10-07 10:33:55

标签: javascript angularjs calendar fullcalendar

我推送从服务器加载的事件但不显示它们。它们的格式与所有示例中的格式相同,如果我在页面中打印它们,它们将以正确的格式显示...但从未在日历中显示..

这是我的代码

dashboardCtrl.controller('CalendarioCtrl', ['$scope', '$log', '$compile', 'uiCalendarConfig', 'SedutaGiuntaSrvc', 'ProgressivoSrvc', function ($scope, $log, $compile, uiCalendarConfig, SedutaGiuntaSrvc, ProgressivoSrvc) {
$scope.events = [];

/* lista delle sedute */
var loadSedutePerCalendario = function () {
    SedutaGiuntaSrvc.getSeduteCalendario().then(function (response) {
        if ('item' in response.data.response.result.items) {
            var sedute = convertToArray(response.data.response.result.items.item);
            angular.forEach(sedute, function (s, index) {
                if (index < sedute.length) {
                    var date = new Date(s.data);
                    var d = date.getDate();
                    var m = date.getMonth();
                    var y = date.getFullYear();
                   $scope.events.push({id: s.id, title: s.progressivo + '_' + y, start: new Date(y, m, d+1)}); 
                }
            });
        }
    });
};

loadSedutePerCalendario();

$scope.eventSources = [$scope.events];

        /* alert on eventClick */
        $scope.alertOnEventClick = function (date, jsEvent, view) {
            $scope.alertMessage = (date.title + ' was clicked ');
        };
        /* alert on Drop */
        $scope.alertOnDrop = function (event, delta, revertFunc, jsEvent, ui, view) {
            $scope.alertMessage = ('Event Droped to make dayDelta ' + delta);
        };
        /* alert on Resize */
        $scope.alertOnResize = function (event, delta, revertFunc, jsEvent, ui, view) {
            $scope.alertMessage = ('Event Resized to make dayDelta ' + delta);
        };
        /* add and removes an event source of choice */
        $scope.addRemoveEventSource = function (sources, source) {
            var canAdd = 0;
            angular.forEach(sources, function (value, key) {
                if (sources[key] === source) {
                    sources.splice(key, 1);
                    canAdd = 1;
                }
            });
            if (canAdd === 0) {
                sources.push(source);
            }
        };

        /* Change View */
        $scope.changeView = function (view, calendar) {
            uiCalendarConfig.calendars[calendar].fullCalendar('changeView', view);
        };
        /* Change View */
        $scope.renderCalender = function (calendar) {
            if (uiCalendarConfig.calendars[calendar]) {
                uiCalendarConfig.calendars[calendar].fullCalendar('render');
            }
        };
        /* Render Tooltip */
        $scope.eventRender = function (event, element, view) {
            element.attr({'tooltip': event.title,
                'tooltip-append-to-body': true});
            $compile(element)($scope);
        };
        /* config object */
        $scope.uiConfig = {
            calendar: {
                height: 450,
                editable: true,
                header: {
                    left: 'title',
                    center: '',
                    right: 'today prevYear prev,next nextYear'
                },
                eventClick: $scope.alertOnEventClick,
                eventDrop: $scope.alertOnDrop,
                eventResize: $scope.alertOnResize,
                eventRender: $scope.eventRender
            }
        };
    }]);

问题出在哪里?

这是我在页面中打印eventSources内容的原因

[{"id":1,"title":"1/2014","start":"2014-10-06T22:00:00.000Z","_id":1}]

我看过帖子Angularjs Full Calendar doesn't display events,但它并没有解决我的问题

2 个答案:

答案 0 :(得分:0)

eventSources必须是数组数组,它​​看起来像这样:

$scope.events = [{"id":1,"title":"1/2014","start":"2014-10-06T22:00:00.000Z","_id":1}];
$scope.eventSources = [$scope.events]

答案 1 :(得分:-1)

$scope.eventSources = [fetchEvents];
          function fetchEvents(start, end, timezone, callback) {
                    //ur data will be ppushed to scope events here
                      callback($scope.events);
                      });
         }