如何在完整日历 angular js 指令中显示从数据库中获取的事件？

Question

谁能帮我解决以下错误 - source is undefined 和 $scope.event is undefined ，这是我的代码 -

    $scope.eventList = function(callback) {
        service.event_list($scope, function (response) {
            var events = [];
            angular.forEach(response,function(event,key){
                $scope.events.push({
                    id: event.id,
                    title: event.name,
                    start: event.start_date_time
                });
            });
            callback(events);
            console.log($scope.events);
        });
    }
    $scope.eventSources = [$scope.events, $scope.eventList];

我正在从我的日历视图中调用 eventList 函数，就像这样 -

<div ng-controller="eventController" data-ng-init="eventList()" class="main-container">

已更新

app.controller('eventController', function($scope,$http, factoryInfo, service, $routeParams, Lightbox, $route, Upload, $compile) {

    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();

    $scope.changeTo = 'Hungarian';
    /* event source that pulls from google.com */
    $scope.eventSource = {
        url: "http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic",
        className: 'gcal-event',           // an option!
        currentTimezone: 'America/Chicago' // an option!
    };

    $scope.events = [];

    $scope.eventList = function(callback) {

        service.event_list($scope, function (response) {
            var events = [];
            angular.forEach(response,function(event,key){
                console.log(event.name);
                $scope.events.push({
                    id: event.id,
                    title: event.name,
                    start: event.start_date_time
                });
            });

            callback(events);
        });
    }
    $scope.eventSources = [$scope.events, $scope.eventList];

        /* $scope.events = [
         {title: 'All Day Event',start: new Date(y, m, 1)},
         {title: 'Long Event',start: new Date(y, m, d - 5),end: new Date(y, m, d - 2)},
         {id: 999,title: 'Repeating Event',start: new Date(y, m, d - 3, 16, 0),allDay: false},
         {id: 999,title: 'Repeating Event',start: new Date(y, m, d + 4, 16, 0),allDay: false},
         {title: 'Birthday Party',start: new Date(y, m, d + 1, 19, 0),end: new Date(y, m, d + 1, 22, 30),allDay: false},
         {title: 'Click for Google',start: new Date(y, m, 28),end: new Date(y, m, 29),url: 'http://google.com/'}
         ];*/

        /* event source that calls a function on every view switch */
        $scope.eventsF = function (start, end, timezone, callback) {
            var s = new Date(start).getTime() / 1000;
            var e = new Date(end).getTime() / 1000;
            var m = new Date(start).getMonth();
            var events = [{
                title: 'Feed Me ' + m,
                start: s + (50000),
                end: s + (100000),
                allDay: false,
                className: ['customFeed']
            }];
            callback(events);
        };

        $scope.calEventsExt = {
            color: '#f00',
            textColor: 'yellow',
            events: [
                {
                    type: 'party',
                    title: 'Lunch',
                    start: new Date(y, m, d, 12, 0),
                    end: new Date(y, m, d, 14, 0),
                    allDay: false
                },
                {
                    type: 'party',
                    title: 'Lunch 2',
                    start: new Date(y, m, d, 12, 0),
                    end: new Date(y, m, d, 14, 0),
                    allDay: false
                },
                {
                    type: 'party',
                    title: 'Click for Google',
                    start: new Date(y, m, 28),
                    end: new Date(y, m, 29),
                    url: 'http://google.com/'
                }
            ]
        };
        /* alert on eventClick */
        $scope.alertOnEventClick = function (date, jsEvent, view) {
            $scope.alertMessage = (date.title + ' was clicked ');
        };

        /* Render Tooltip */
        $scope.eventRender = function (event, element, view) {
            element.attr({
                'tooltip': event.title,
                'tooltip-append-to-body': true
            });
            $compile(element)($scope);
        };

        $scope.changeLang = function () {
            if ($scope.changeTo === 'Hungarian') {
                $scope.uiConfig.calendar.dayNames = ["Vasárnap", "Hétfő", "Kedd", "Szerda", "Csütörtök", "Péntek", "Szombat"];
                $scope.uiConfig.calendar.dayNamesShort = ["Vas", "Hét", "Kedd", "Sze", "Csüt", "Pén", "Szo"];
                $scope.changeTo = 'English';
            } else {
                $scope.uiConfig.calendar.dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
                $scope.uiConfig.calendar.dayNamesShort = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
                $scope.changeTo = 'Hungarian';
            }
        };
        /* event sources array*/
        $scope.eventSources = [$scope.events, $scope.eventSource, $scope.eventsF];
        $scope.eventSources2 = [$scope.calEventsExt, $scope.eventsF, $scope.events];


        //clear search field value
        $scope.clearstudentList = function () {
            $scope.searchValue = '';
        }

        $scope.page = 1;
        $scope.type = ($routeParams.type) ? ($routeParams.type) : '';
        $scope.event_id = ($routeParams.activity_id) ? ($routeParams.event_id) : '';
        $scope.service = ($routeParams.service) ? ($routeParams.service) : '';
        $scope.serverPath = factoryInfo.serverPath;
});

Answer 1

var events = [];
$scope.events.push
$scope.eventSources = [$scope.events, $scope.eventList];

您初始化了一个本地数组。
您推送到一个不存在的 $scope 变量（未定义错误）
您的 eventSources 是用未定义的变量初始化的。

您需要推送到 events 而不是 $scope.events 并将 events 传递给 eventSources。

您还必须向我们展示您的日历配置块和调用 fullcalendar.addEventSource

的代码

编辑：

此外，您的代码需要更加简洁。

你有一个 eventController 控制着你的 div。删除 data-ng-init，在 HTML 中初始化数据是不好的做法。您在控制器中初始化事件。

您的控制器应如下所示：

function eventController($scope, eventService, uiCalendarConfig) {...}

您传入您的事件服务和 uiCalendarConfig 对象，这将帮助您调用一些方法。

我建议不要使用 $scope，因为显然你在混合 $scope 变量和局部变量。

您需要配置日历：

$scope.config =  {
    calendar:{
        lang: 'en',
        editable: true,
        header:{
            left: '',
            center: 'title',
            right: ''
        }
    }
};

然后你调用你的服务渲染事件：

    eventService.getEvents().then(function(events) {
        $scope.events = events.data;
        $scope.eventSource = {
            events: $scope.events
        };
    });

最后是你的 HTML:

<div ng-controller="eventController">
    <div calendar="calendarname" ui-calendar="config.calendar" ng-model="eventSource"></div>
</div>

Answer 2

当您想将事件添加为函数时，请确保已提供开始、时区和回调参数。你用了 $scope.eventList = function(callback) {} 但应该是这样 function( start, end, timezone, callback ) { } 更多请看 http://fullcalendar.io/docs/event_data/events_function/

我在这里添加我的全部代码。我的控制器

 $scope.events = [];
$scope.calendarConfig = {
    calendar: {
        allDaySlot: false,
        timezone: 'local',
        editable: true,
        lang: 'de',
        header: {
            left:   'title',
            center: 'Custom text',
            right:  'today prev,next'
        },
        eventClick: $scope.eventClick,
        eventResizeStop: $scope.alertResize,
        eventDragStop: $scope.alertDrag,
        eventRender: $scope.eventRender,
        dayClick: $scope.dayClick
    }
};


 $scope.myevents = function(start, end, timezone, callback) {


    eventsModel.get($scope.calendar_id,$scope.calendar_keyword) // eventsModel called to get events from Google calendar
        .success(function(data) {

          //  $rootScope.myobject = data;


            var events = [];


            angular.forEach(data,function(event,key){
                $scope.events.push({
                    id: event.id,
                    title: event.time,
                    start: event.start
                });
            });


                callback(events);
        });

}


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

和我的html

<div id="my_calendar" class="calendar" ng-model="eventSources" calendar="my_calendar" ui-calendar="calendarConfig.calendar"></div>

Answer 3

这是我在控制器中的最终代码

app.controller('eventController', function($scope,$http, factoryInfo, service) {

    $scope.events = [];

    $scope.uiConfig = {
        calendar: {
            allDaySlot: false,
            timezone: 'local',
            editable: true,
            header: {
                left:   'title',
                center: '',
                right:  'today prev,next'
            },
            eventClick: $scope.alertOnEventClick,
            eventDrop: $scope.alertOnDrop,
            eventResize: $scope.alertOnResize,
            eventRender: $scope.eventRender
        }
    };

    $scope.get_events = function(start, end, timezone, callback) {
        $scope.events = [];
        service.event_list($scope, function (response) {

            for (var i = 0; i < response.result.length; i++) {
                $scope.events.push({
                    title: response.result[i].name,
                    start: response.result[i].start_date_time,
                    end : response.result[i].end_date_time,
                    allDay: false
                });
            }

            callback($scope.events);
        });
    }
    $scope.eventSources = [$scope.events,$scope.get_events];
});

并在 HTML 视图中

<div ng-controller="eventController" class="main-container">
     <div class="calendar" ng-model="eventSources" calendar="myCalendar1" ui-calendar="uiConfig.calendar"></div>
</div>

如何在完整日历 angular js 指令中显示从数据库中获取的事件？

How to display the events fetched from database on the full calendar angular js directive?

angularjs

ui-calendar