Events array not displaying on ionic-calendar

Question

I am trying to push an array of Events objects into the Events[] array, with the attributes title, startTime and endTime.

The array of objects seem to be pushed to the events array upon printing console.log(events). However, it is not rendering on my calendar.

Link to plugin used: https://github.com/twinssbc/Ionic-Calendar

 $scope.loadEvents = function () {
        $scope.calendar.eventSource = getEvents();  
};

//I replaced CreateRandomEvents() with getEvents().


 function getEvents(object){

        TimeSlotsModel.all()
            .then(function (result) {
                vm.data = result.data.data;

                var events = [];

                 angular.forEach(vm.data, function(value,key) {

                    var eventName = value.name;
                    var startDate = new Date(value.startDate);
                    var endDate = new Date(value.endDate);

                    var selectedStartingTime =new Date(value.startTime * 1000 );
                    var selectedEndingTime = new Date(value.endTime * 1000);

                    //timing is not right, needs fixing
                    startTime = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate(),selectedStartingTime.getHours(), selectedStartingTime.getUTCMinutes());
                    endTime = new Date(endDate.getFullYear(), endDate.getMonth(), endDate.getDate(),selectedEndingTime.getUTCHours(), selectedEndingTime.getUTCMinutes());                     
                    // console.log(startTime);
                    events.push({
                        title: 'Event -' + eventName,
                        startTime: startTime,
                        endTime: endTime,
                        allDay: false
                    });

            console.log(events);
            console.log(value);
             //value is the object!!
            })
             return events;

            })

         }

The original function provided is this:

     function createRandomEvents() {
        var events = [];
        for (var i = 0; i < 20; i += 1) {
            var date = new Date(); //(if not parameters are passed through, Date(); returns today's date)
            var eventType = Math.floor(Math.random() * 2);
            var startDay = Math.floor(Math.random() * 90) - 45;
            var endDay = Math.floor(Math.random() * 2) + startDay;
            var startTime;
            var endTime;
            if (eventType === 0) {
                startTime = new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate() + startDay));
                if (endDay === startDay) {
                    endDay += 1;
                }
                endTime = new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate() + endDay));
                events.push({
                    title: 'All Day - ' + i,
                    startTime: startTime,
                    endTime: endTime,
                    allDay: true
                });
            } else {
                var startMinute = Math.floor(Math.random() * 24 * 60);
                var endMinute = Math.floor(Math.random() * 180) + startMinute;
                startTime = new Date(date.getFullYear(), date.getMonth(), date.getDate() + startDay, 0, date.getMinutes() + startMinute);
                endTime = new Date(date.getFullYear(), date.getMonth(), date.getDate() + endDay, 0, date.getMinutes() + endMinute);
                events.push({
                    title: 'Event - ' + i,
                    startTime: startTime,
                    endTime: endTime,
                    allDay: false
                });
            }
        }
        return events;
    }
})

Could anyone point out to me what I am doing wrong?

EDIT: HTML File Used:

<ion-view view-title={{viewTitle}} >
        <ion-nav-buttons side="right">
            <button class="button " ng-disabled="isToday()" ng-click="today()">Today</button>
            <button class="button" ng-click="changeMode('month')">M</button>
            <button class="button" ng-click="changeMode('week')">W</button>
            <button class="button" ng-click="changeMode('day')">D</button>
            <button class="button" ng-click="loadEvents()">Load Events</button>
        </ion-nav-buttons>




        <ion-content scroll="false" class="main-content ">

<!-- <ion-header-bar align-title="left" class="bar-positive">
{{viewTitle}} -->

            <calendar ng-model="calendar.currentDate" 
                      calendar-mode="calendar.mode" 
                      event-source="calendar.eventSource"
                      show-weeks="calendar.showWeeks"
                      range-changed="reloadSource(startTime, endTime)"
                      event-selected="onEventSelected(event)" 
                      title-changed="onViewTitleChanged(title)"
                      time-selected="onTimeSelected(selectedTime)"

                      ></calendar>

        </ion-content>

    </ion-view>
    </div>
  </ion-content>
</ion-view>

Have you confirmed that there's even anything in `vm.data`? `vm.data = result.data.data` looks a bit odd. — Roddy of the Frozen Peas, Dec 30 '15 at 17:15
Looks like this one: [Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference](https://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron) — Andreas, Dec 30 '15 at 17:16
Hi, I realised that the arrays were actually being pushed by checking using console.log(events). But my main issue was that it was not rendering on my calendar. Thanks for your help. — cornstar94, Dec 30 '15 at 17:25
That's a totally different issue - where's your HTML template that handles the data binding? — Foreign Object, Dec 30 '15 at 17:33
Did you update the `loadEvents` function to use `getEvents` instead of `createRandomEvents`? — Foreign Object, Dec 30 '15 at 17:44
Please refer to my repo on github if necessary https://github.com/cornstar94/finalproj — cornstar94, Dec 30 '15 at 18:08

Foreign Object · Answer 1 · 2015-12-30T18:42:04.040

After looking over you're repo - your problem is likely related to getEvents returning (also, you're not explicitly returning from getEvents) before TimeSlotsModel, because TimeSlotsModel.all() is asynchronous - try setting it up like this:

function getEvents(object){
           var deferred = $q.defer();

            TimeSlotsModel.all()
                .then(function (result) {
                    vm.data = result.data.data;

                    var events = [];

                     angular.forEach(vm.data, function(value,key) {

                        var eventName = value.name;
                        var startDate = new Date(value.startDate);
                        var endDate = new Date(value.endDate);

                        var selectedStartingTime =new Date(value.startTime * 1000 );
                        var selectedEndingTime = new Date(value.endTime * 1000);

                        //timing is not right, needs fixing
                        startTime = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate(),selectedStartingTime.getHours(), selectedStartingTime.getUTCMinutes());
                        endTime = new Date(endDate.getFullYear(), endDate.getMonth(), endDate.getDate(),selectedEndingTime.getUTCHours(), selectedEndingTime.getUTCMinutes());                     
                        // console.log(startTime);
                        events.push({
                            title: 'Event -' + eventName,
                            startTime: startTime,
                            endTime: endTime,
                            allDay: false
                        });

                console.log(events);
                console.log(value);

                })

                deferred.resolve(events);


                })

                return deferred.promise;
             }

Or, just call TimeSlotModel.all().then(... where you call getEvents.

Hi @Foreign , It has managed to print out the events array in my console, however the calendar still does not appear to render my events. — cornstar94, Dec 31 '15 at 10:09

Events array not displaying on ionic-calendar

1 Answers1