Events aren't rendered

[ajmyyra]

Hi,

There seems to be a problem with event rendering in the calendar. Even though eventSources is correctly populated with Angular, it doesn't show the events. According to Fullcalendar documentation at http://fullcalendar.io/docs/event_data/Event_Source_Object/ , the form seems to be correct and no errors are returned.

On the we page we have just the calendar:

Contents of $scope.eventSources: [ { "events": [ { "id": "562e65c5fb0cc1110a6ea143", "title": "Test event 2", "start": "2015-10-15T15:00:00.000Z", "end": "2015-10-20T12:00:00.000Z", "description": "Second event for testing the system", "allDay": false }, { "id": "562e65c5fb0cc1110a6ea144", "title": "Test event 3", "start": "2015-11-01T09:00:00.000Z", "end": "2015-11-08T12:00:00.000Z", "description": "Third event for testing the system", "allDay": false }, { "id": "562e65c5fb0cc1110a6ea142", "title": "Test event 1", "start": "2016-01-01T09:00:00.000Z", "end": "2016-01-01T12:00:00.000Z", "description": "First event for testing the system", "allDay": false } ] } ] Angular version is 1.2.1. Has anyone seen anything similar and has been able to solve it?

[ajmyyra]

Oh, forgot about HTML tags. Here's the div again:

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

[chapati23]

+1, same problem. angular version 1.4.7

[projectgheist]

+1, same problem. also angular version 1.4.7

EDIT: Apparently in my case as I was async fetching the events it didn't pick up the changes to the events. A quick fix (a hacky one at that), change line#101 in src/calendar.js to:

var array = angular.isFunction(arraySource) ? arraySource() : $scope.eventSources;

as this will link to the actual model reference instead of a copy (I believe)

[mpellerin42]

same problem with branch "angular-1.3.x" and angular 1.3.14.

Also tested with master branch and angular 1.3.14, same problem: events are not rendered.

[mpellerin42]

OK, I found a solution : the problem comes from demo documentation which is not compatible with last version of fullcalendar. In fullcalendar documentation : http://fullcalendar.io/docs/event_data/events_array/ they exmplain that using eventSources require "to write things a little differently" :

$('#calendar').fullCalendar({

    eventSources: [

        // your event source
        {
            events: [ // put the array in the `events` property
                {
                    title  : 'event1',
                    start  : '2010-01-01'
                },
                {
                    title  : 'event2',
                    start  : '2010-01-05',
                    end    : '2010-01-07'
                },
                {
                    title  : 'event3',
                    start  : '2010-01-09T12:30:00',
                }
            ],
            color: 'black',     // an option!
            textColor: 'yellow' // an option!
        }

        // any other event sources...

    ]

});

Writing the eventSource in my ng-model this way solved the problem of event rendering for me.

[cloidjgreen]

Dear Mathilde,

I see what you are saying but even sitting here looking at it it is a bit to cryptic for me.

Are you injecting this as a function event source bound to $scope in the the controller??

If you could paste in how you implemented this in the context of the angular.controller it would be very helpful.

Thanks

[mpellerin42]

I have a directive with a template containing these lines:

        <div ui-calendar="calendarController.uiConfig.calendar"
             calendar="theCalendar"
             ng-model="calendarController.eventSources"
             class="calendar-container">
        </div>

And in my controller, I have :

// initialization of eventSources
this.eventSources = [];
[...]
// loading events
this.eventSources.push({events : this.currentCalendar.days}); // this.currentCalendar.days is an array of objects containing title and start date.

[cloidjgreen]

Thanks

[cloidjgreen]

Hi Mathilde,

I ended up with two big problems:

I was loading jquery before angular and that screws up the use of the internal jquery:lite that angular-io uses for calendar and other apps big time

and for some stupid reason I was setting the html element:attribute to ' ngModel="eventSources" ' instead of ' ng-model="eventSources" '

As you can tell I am just getting started with this! 😀

Thank you for your help

I will now continue to muddle on throught.

On Thu, Nov 12, 2015 at 2:19 AM, Mathilde Pellerin <notifications@github.com

wrote:

I have a directive with a template containing these lines:

    <div ui-calendar="calendarController.uiConfig.calendar"
         calendar="theCalendar"
         ng-model="calendarController.eventSources"
         class="calendar-container">
    </div>

And in my controller, I have :

// initialization of eventSources this.eventSources = []; [...] // loading events this.eventSources.push({events : this.currentCalendar.days}); // this.currentCalendar.days is an array of objects containing title and start date.

— Reply to this email directly or view it on GitHub https://github.com/angular-ui/ui-calendar/issues/340#issuecomment-156031288 .

Cloid John Green

[eduardonunesp]

Same here, when passing objects like:

        $scope.eventSources = [];

        $timeout(function() {
          $scope.eventSources.push({
            color: '#f0f',
            events: []
          })
        }, 1000);

        $timeout(function() {
          $scope.eventSources[0].events.push({
            title: 'foo',
            start: new Date(),
            end: new Date()
          });
        }, 2000);

[eduardonunesp]

But if have one event at least it works:

        $timeout(function() {
          $scope.eventSources.push({
            color: '#f0f',
            events: []
          })
        }, 1000);

        $timeout(function() {
          $scope.eventSources[0].events.push({
            title: 'foo',
            start: new Date(),
            end: new Date()
          });
        }, 2000);

        $timeout(function() {
          $scope.eventSources[0].events.push({
            title: 'foo 2',
            start: new Date(),
            end: new Date()
          });
        }, 3000);

Only the second one is rendered

[leonardobazico]

@mathilde-pellerin thanks!

[ricardocamacho]

@eduardonunesp I'm having the same problem as yours, it works when I have at least one event, but when I don't have events and I try to push the first one, it doesn't render. Could you please tell me how did you solve this issue?

[cloidjgreen]

If this was addressed to me I have moved on from this code and am implementing all things calender through web components, polymer specifically.

The problems I have had with angular UI components almost all revolved around the jquery lite implementation being run where full jquery was needed.

Look at the loading order of jquery and angular ui on your booting web page.

On Mon, Oct 10, 2016 at 11:40 PM, Ricardo Camacho notifications@github.com wrote:

@eduardonunesp https://github.com/eduardonunesp I'm having the same problem as yours, it works when I have at least one event, but when I don't have events and I try to push the first one, it doesn't render. How did you solve this issue?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/angular-ui/ui-calendar/issues/340#issuecomment-252811799, or mute the thread https://github.com/notifications/unsubscribe-auth/AC_4fdEzl7VQR9YOwweaYr52iB6NXtVLks5qyxM9gaJpZM4GWfXn .

Name: Cloid John Green Phone: 612 819-4363 EMail: cloidjgreen@gmail.com

[rodrigopk]

@eduardonunesp @ricardocamacho I had that same problem after updating fullcalendar to v3.0.1, using angular v.1.5.8. Solved it by regressing fullcalendar to v.2.7.1.

[bostondevin]

I solved it simply by doing an ng-if - it needs to wait til the data is there

<div ui-calendar ng-model="eventSources" ng-if="eventSources.length > 0"></div>

[iammelvin]

@bostondevin it worked ,Thanks

[shennero]

@bostondevin did you have to do anything special to get the calendar to render when using ng-if? When I do that, the calendar just doesn't render at all even after the condition is satisfied.