AngularJS ui-calendar – model with events

Question

I’m trying to set up a calendar according to the instructions. The calendar itself shows up on the page, but it doesn’t display any events.

Code in template:

<div ui-calendar ng-model="eventSources">

Code in my controller:

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

$scope.eventSources = [
    {
    "title": 'All Day Event',
    "start": new Date(y, m, d)},
{
    "title": 'Long Event',
    "start": new Date(y, m, d - 5),
    "end": new Date(y, m, d - 2)}];

When I loop through eventSources in the template it works:

<li ng-repeat="e in eventSources">
    {{e.title}} {{e.start}}
</li>

The calendar doesn’t show anything, though. There are no errors in console, too. Does any of you has an idea of what’s going on here?

Answer 1

This is how i load events using "eventsources:" i have an array of eventsources: You have 2 ways to do this:

1- JSON (faster because events are already JSON formatted no need to iterate) 2- Ajax call (Slower because you have to iterate the xml here)

 var othersources = {       
                     jsonsource: {               
                                    url: ajaxcallURL(_url,"7"),
                                    type: 'POST',                               
                                    //error: function() { alert('something broke with courses...'); },
                                    data:{                                                                  
                                        'func':func,
                                        'year':y
                                    },
                                    cache: false,              
                                    color: '#C1272D',
                                    textColor: 'white'                             
                                 },
                   ajaxcallsource: {               
                            events: function(start, end, callback) {
                            $.ajax({
                                type: 'POST',
                                url: ajaxcallURL(_url,"7"),             
                                data: {
                                    // our hypothetical feed requires UNIX timestamps
                                    start: Math.round(start.getTime() / 1000),
                                    end: Math.round(end.getTime() / 1000),                                  
                                    'func':func,
                                    'year':y                    
                                },          
                                success: function(doc) {    

                                    var events = [];
                                    var allday = null; //Workaround
                                    var Editable = null; //Workaround  
                                    $(doc).find('event').each(function() 
                                    {                       
                                        if($(this).attr('allDay') == "false") //Workaround 
                                                allday = false; //Workaround 
                                        if($(this).attr('allDay') == "true") //Workaround 
                                                allday = true; //Workaround
                                        if($(this).attr('editable') == "false") //Workaround 
                                                Editable = false; //Workaround 
                                        if($(this).attr('editable') == "true") //Workaround 
                                                Editable = true; //Workaround                       

                                        events.push({
                                            id: $(this).attr('id'),
                                            title: $(this).attr('title'),
                                            start: $(this).attr('start'),
                                            end: $(this).attr('end'),                       
                                            allDay: allday,
                                            editable: Editable
                                        });                             
                                    });                                             
                                    callback(events); 
                                }
                            });             
                        },                
                            cache: false,
                            //error: function() { alert('something broke with courses...'); },
                            color: '#C1272D',
                            textColor: 'white',
                            //className: 'course'
                       }
   } //othersources array close

Inside the calendar properties:

eventSources:[othersources.jsonsource,ajaxcallsource],

Good Luck

Answer 2

Using Just an array of events is the issue here. uiCalendar only takes an array of eventSources. http://arshaw.com/fullcalendar/docs/event_data/eventSources/

I believe that we should make it flexible enough to allow for all of the api sources however.