Fullcalendar: How to dynamically bind/add events with angularjs

Question

how can I optimize my fullcalendar to dynamically add/bind events. I cannot find any usefull resources for angular. Most of the docs are jquery. Below is my set up. I have added the eventRender function but not filled. Thanks for the help..

 function clearCalendar(){
        if(uiCalendarConfig.calendars.myCalendar != null){
            uiCalendarConfig.calendars.myCalendar.fullCalendar('removeProjects');
            uiCalendarConfig.calendars.myCalendar.fullCalendar('unselect')

        }
    }

function populate() {
        clearCalendar();
        $http.get('/projs', {
            cache: false,
            params: {}
        }).then(function data) {

            angular.forEach(data.data, function (value) { 
                $scope.projects.push({ 
                    projectID : value.projectID,
                    client : value.client,
                    title: value.title,
                    description: value.description, 
                    start: new moment(value.startAt),
                    end: new moment(value.endAt),
                    employees: value.employees,
                    allDay: value.isFullDay,
                    stick: true  
                });
            });
        });
    }
    populate();


$scope.uiConfig = {
    calendar: {
        height: 500,
        editable: true,
        displayEventTime: true,
        header: {
            left: 'month, agendaWeek, agendaDay',
            center: 'title',
            right: 'today prev,next'
        },

        selectable: true,
        selectHelper: true,

        select: function(start, end){
            $scope.showSelected = false;
            var fromDate = moment(start).format('DD/MM/YYYY LT');
            var endDate  = moment(end).format('DD/MM/YYYY LT');

            $scope.Project = { 
                ProjectID : 0,
                Client: '',
                Title : '',
                Description: '',
                Employees: '',
                StartAt : fromDate,
                EndAt : endDate,
                IsFullDay : false
            }

            $scope.ShowModal()
        },

        eventClick: function (project) { 
            $scope.showSelected = true;
            $scope.SelectedProject = project;

            var fromDate = moment(project.start).format('DD/MM/YYYY LT');
            var endDate  = moment(project.end).format('DD/MM/YYYY LT');

            $scope.Project = { 
                ProjectID : project.projectID, 
                Client : project.client,
                Title : project.title,
                Description: project.description,
                Employees: project.employees,
                StartAt : fromDate,
                EndAt : endDate,
                IsFullDay : false   
            }
            $scope.ShowModal()
        },

        eventRender: function(event, element, view) {

        },

        eventAfterAllRender: function (){
            if($scope.projects.length > 0 && isFirstTime) {
                uiCalendarConfig.calendars.myCalendar.fullCalendar('gotoDate', $scope.projects[0].start);
                isFirstTime = false;
            }
        }
    }
};

calendar in my html

    <div class="col-md-8">
        <div id="calendar" ui-calendar="uiConfig.calendar" ng-model="eventSource" calendar="myCalendar"></div>
    </div>

UPDATE

current display on calendar

Answer 1

Fullcalendar accepts an eventSource object containing an array of events.

You're already building this array of events in $scope.projects. Now you can just add it to an eventSource like so:

  $scope.eventSource = {
    events: $scope.projects
  };

You've alreay injected uiCalendarConfig so you can now add the eventSource to your calendar:

uiCalendarConfig.calendars['myCalendar'].fullCalendar('addEventSource', $scope.eventSource);

All this should happen just after your forEach loop.

function ctrl($scope, uiCalendarConfig, $timeout) {
  $scope.eventSource = {};
  $scope.config =  {
    calendar:{
      editable: true,
      header:{
        left: '',
        center: 'title',
        right: ''
      },
      dayClick: dayClick
    }
  };
  $scope.projects = [
    { 
      projectID : 123,
      client : 321,
      title: "test",
      description: "test", 
      start: moment(),
      end: moment(),
      allDay: true,
      stick: true 
    }
  ];
  $scope.eventSource = {
    events: $scope.projects
  };
  
  function dayClick(date, jsEvent, view) {
    var source = [
      {
        projectID : 58,
        client : 85,
        title: "new",
        description: "new", 
        start: date.format().toString(),
        allDay: true,
        stick: true 
      }
    ];
    uiCalendarConfig.calendars['projects'].fullCalendar('addEventSource', source);
  }
}

angular.module('app', ['ui.calendar']);
angular.module('app')
  .controller('ctrl', ctrl);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-calendar/1.0.0/calendar.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.css" />
<div ng-app="app">
  <div ng-controller="ctrl">
    <div calendar="projects" ui-calendar="config.calendar" ng-model="eventSource"></div>
    {{hello}}
  </div>
</div>