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

Question

Can anybody help me to resolve following error - source is undefined and $scope.event is undefined , here are my codes -

    $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];

I am calling eventList function from my calendar view like this -

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

Updated

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;
});

Can you show us more code? like how you are calling `eventList` and what function you are passing as `callback`. By the way `console.log($scope.events);` this line will not be executed as you are calling callback function. You can put this line before calling callback. — Bilal, Aug 17 '16 at 06:19
@Bilal , when I put console.log($scope.events); before callback , it throws 'callback is not a function' and 'eventPros.start is undefined' error . I am calling eventList() from view. — Sachin Vairagi, Aug 17 '16 at 06:24
I am following this link http://angular-ui.github.io/ui-calendar/ — Sachin Vairagi, Aug 17 '16 at 06:27
Yes you are calling `eventList()` without passing `callback`parameter in the function. if you want to call a callback function, you have to pass a function as a parameter like `eventList(function() { //something})` or already defined function. — Bilal, Aug 17 '16 at 06:28

gyc · Answer 1 · 2016-08-17T06:53:14.520

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

You initialize a local array.
You push to a $scope variable that doesn't exists (undefined error)
Your eventSources is initialized with undefined variables.

You need to push to events and not $scope.events and pass in events to eventSources.

You will also have to show us your calendar config block and the code where you call fullcalendar.addEventSource

EDIT:

Additionally, your code needs to be a lot cleaner.

You have an eventController that controls your div. Remove data-ng-init, it is bad practice to initialize data in the HTML. You initialize your events in the controller.

Your controller should look like this:

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

You pass in your event service and the uiCalendarConfig object that will help you call some methods.

I would advise against using $scope since apparently you're mixing $scope variables and local variables up.

The you need to configure you calendar:

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

Then after that you call your service an render the events:

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

And finally your HTML:

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

Thank you for your response , please check my updated question — Sachin Vairagi, Aug 17 '16 at 06:49
Thanks much @gys , I am newbie in angularjs , let me try your suggestion. — Sachin Vairagi, Aug 17 '16 at 07:02
@SachinVairagi After reviewing your code in depth, you're still missing the calendar config block and in the html and a lot of other stuff (what is callback?). Get the code from github https://github.com/angular-ui/ui-calendar/tree/master/demo — gyc, Aug 17 '16 at 07:04

Ruhul Amin · Accepted Answer · 2016-08-17T10:42:00.733

When you want to add your events as functions then make sure, start,timezone and callback parameters are given. You used $scope.eventList = function(callback) {} But it should be like this function( start, end, timezone, callback ) { } for more see http://fullcalendar.io/docs/event_data/events_function/

I am adding my whole code here. My Controller

 $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];

and my html

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

This will only help the OP, please help others by explaining what you changed, and why your version works! — AncientSwordRage, Aug 17 '16 at 08:35
@Pureferret , sure you are right , I've posted complete codes.Thank You! — Sachin Vairagi, Aug 17 '16 at 09:26
@SachinVairagi I'm actually talking to Ruhul. 90% of his answer is code, <10% explaination. — AncientSwordRage, Aug 17 '16 at 09:29
@Pureferret , okay no problem , complete codes may help others.Thanks! — Sachin Vairagi, Aug 17 '16 at 09:31
@Pureferret I just wanted to help others but wanted to save my time as well. But thanks for being good teacher. — Ruhul Amin, Aug 17 '16 at 10:21
@SachinVairagi It's my pleasure to know that my code helped you. — Ruhul Amin, Aug 17 '16 at 10:22

Sachin Vairagi · Answer 3 · 2016-08-17T14:28:28.250

Here is my final codes in controller

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];
});

And in HTML view

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

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

3 Answers3