0

My problem is that when I open the page, the events are loaded with a callback (function().then) and this cause my calendar to not load the events passed in $scope.eventSources

View

<div id="calendar" ui-calendar="uiConfig.calendar" calendar="myCalendar1" class="calendar" ng-model="eventSources"></div>

Controller

function LogisticaCtrl($scope, LogisticaService, $stateParams, $state, uiCalendarConfig) { 
    /* Event sources array */
    $scope.eventSources = {};

    /* config object */
    $scope.uiConfig = {
        calendar:{
            editable: true,
            header: {
                left: 'prev,next',
                center: 'title',
                right: 'month'
            }
        }
    };

    $scope.getLogistica = function(usu_seqreg) {        
        LogisticaService.GetLogistica(usu_seqreg)
        .then(function (logistica) {            
            $scope.logistica = logistica;  
            $scope.eventSources = logistica.events;             
        });
    }; 

    $scope.getLogistica($stateParams.usu_seqreg);  
}

Angular version: 1.5
Fullcalendar version: v2.1.1
ui-calendar version: Unknown, but it seems like 1.0.0 (I compared the JS)

It is possible to load the events after? I tried some tricks but unsuccessful. The closest that I get was another function in the controller that destroy the calendar and recreate it in full javascript. But, even in this case, I need to execute this function with a button in the page.

Killer
  • 188
  • 3
  • 14
  • `$onInit()` - Called on each controller after all the controllers on an element have been constructed and had their bindings initialized – Joe Warner Mar 21 '18 at 20:27
  • @JoeWarner Hi. Sorry, I did not understand. I need to use $scope.$onInit = new function()? Im really sorry as I am new in angular at all. – Killer Mar 21 '18 at 20:33
  • no its a function built into angular 1.* :) $onInit() {yourcode you want to fire when the component it mounted} – Joe Warner Mar 21 '18 at 20:35
  • I don't have any experience using ui-calendar, but fullcalendar does have the option to pull in data via a promise before it renders. – BShaps Mar 21 '18 at 20:37
  • @JoeWarner I read something about it, and tried to use this in the end of the controller: ```$scope.$onInit = function() { console.log('test'); }; ``` but it doesnt worked (I also tried only $onInit, without the $scope). – Killer Mar 21 '18 at 20:47
  • do you connect that controller to the component – Joe Warner Mar 21 '18 at 20:48
  • @JoeWarner sure. ```
    ``` in the first line of the view. Using a button with ```ng-click=something()``` work as well (if something() is in the controller).
     – Killer Mar 21 '18 at 20:51
  • what does logistica.events look like? – Joe Warner Mar 21 '18 at 20:59
  • in json, events: [ { title: "Sergio Ronchi", start: "2018-03-22 00:00:00.000", end: "2018-03-22 00:00:00.000" } ] – Killer Mar 21 '18 at 22:01
  • I don't know it's the correct way, but if I'd be in your place, I'd have make a directive for fullcalendar, and add a watcher to re-render calendar if events are changing – Kiran Shinde Mar 22 '18 at 04:24
  • Can you show me an example, @Kenny ? Whatever example you have will help me understand. – Killer Mar 22 '18 at 05:32

0 Answers0