Json feed

[eddippo]

How can I feed the calendar with an external Json file with events? Thanks in advance

[twinssbc]

@eddippo if the json file is stored in the server side, then your back end code needs to read it and send to the backend. If the json file is stored in the client side, then you need to call some File api to read the file into an array and pass it to the calendar.

[eddippo]

Ok....I have a database in a server side with a php requesting a mysql query. I get all data in a json object through $http.get. In order to pass mysql datestamp to java i'm using UNIX_TIMESTAMP() function in mysql query. The query is successfully loaded into events array with the same format (I think so) as shown in createRandomEvents() function in example. The issue is that object is logged into console , but events are not shown in calendar...what's wrong?

This is part of my code:

$scope.loadEvents = function () {
            $scope.calendar.eventSource = loadAgenda();
        };
 function loadAgenda () {
            $http.get('https://www.anything.com/calendar_connection.php')
            .success(function(data){
                var events = [];
                $scope.datos = data.agenda;
                var startTime;
                var endTime;
                    angular.forEach($scope.datos, function(agenda){
                        startTime = new Date (agenda.Comienzo * 1000); //UnixTime to Java to get correct date
                        endTime = new Date (agenda.Final * 1000); 
                        events.push({
                            startTime : startTime,
                            endTime : endTime,
                            title : agenda.Evento,
                            allDay: true // allDay true by now, only for testing purposes
                        })
                    })
                console.log (events); //See results in console
                return events;

            });

        };

[twinssbc]

@eddippo If you pass allDay event, you need to specify UTC time for startTime and endTime. Also allDay events are displayed at the top of the calendar, not at the bottom part which has hourly rows.

[eddippo]

So....Which method do you think it would be the best practice to convert mysql datestamp to this calendar format?

[eddippo]

Is there any example with json feeding?

[twinssbc]

@eddippo It depends on your backend, if your backend returns the date time as a string or epoch. You need to use the javascript function to convert it into javascript Date object. Once you got that javascript Date object, below is the method you can format it as UTC time.

var returnDate = XXX;
var startTime = new Date(Date.UTC(returnDate.getFullYear(), returnDate.getMonth(), returnDate.getDay()));

There's no example about how to retrieve json response, as this is out of scope. But I think your method is correct. Just needs to adjust the returned date a bit.

[eddippo]

Ok.....I think that the problem is not all data received from my server side query, the response is a well formed json file..I tried this to see what was happening, with the function in the script createRandomEvents() in this way:

function loadAgenda() {
            $http.get('https://www.anything.com/calendar_connection.php')
            .success(function(data){
             var events = [];
            for (var i = 0; i < 20; i += 1) {
                var date = new 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
                    });
                }
            }
            console.log(events); //console output
            return events;
        })

I wanted to test that if a can connect to my server side, calendar will load random events if everything works right, and the problem is that the connection is succesful and I get the full array of events (example events) but isn't returned to the calendar, BUT if i get rid of this lines

$http.get('https://www.anything.com/calendar_connection.php')
            .success(function(data){
})

everything is working fine, all events are shown to the calendar...so how can I inject the events array to the calendar?

[twinssbc]

@eddippo This is because you actually wrap the return events statement in your success callback function, it's no longer the return result of your loadAgenda function. So that events array isn't assigned to your scope variable. I assume you assign the return variable of loadAgenda to a scope variable? For example,

$scope.events = loadAgent();

Since now you make your function behave in async way, you need to directly change the variable in your callback. In your success callback, you directly set the $scope.events

$http.get('https://www.anything.com/calendar_connection.php')
            .success(function(data){
                var events = [];
                .....
                $scope.events = events;
});

[eddippo]

OK....I'm starting to see it clear and the easiest way to do what I need is $scope.calendar.eventSource = events; into my success callback and now it works fine!.... Sorry I'm a newbie programmer and I like very much this framework, but sometimes is find to understand step by step the whole thing. My following step is to make it a CRUD powered calendar; I've been reading api documentation and I think the best way is to create a factory or a service to connect server side, and make all operations through controllers, I'm working on this part, and I see it clear. But I still don't understand the difference between .factory and .service. What do you think it would be the best option? Thanks folk!

[twinssbc]

@eddippo Here is a detailed explanation about the difference between .factory and .service. http://stackoverflow.com/questions/14324451/angular-service-vs-angular-factory

[eddippo]

Thanks a lot!