rendering data on angular ui-calendar in day view

Question

$scope.calandarCall = function(allTasks) {
  $scope.tasks = allTasks;
  $scope.guestname = [];
  for (var i = 0; i < $scope.tasks.length; i++) {
    $scope.guestname.push($scope.tasks[i].name);
  }
  $scope.uiConfig = {
    calendar: {
      height: 450,
      editable: true,
      allDaySlot: false,
      defaultView: "agendaWeek",
      header: {
        left: 'agendaDay',
        center: 'title',
        right: 'today prev,next'
      },
      slotEventOverlap: false,
      hiddenTime: [7, 8],
      dayNamesShort: $scope.guestname,

      eventClick: $scope.alertEventOnClick,
      eventDrop: $scope.alertOnDrop,
      eventResize: $scope.alertOnResize,
      eventRender: $scope.eventRender
    }
  };
  var obj = {};
  for (var i = 0; i < $scope.tasks.length; i++) {
    obj = {
      title: $scope.tasks[i].service,
      start: $scope.tasks[i].startDateTime,
    }
    $scope.eventSources[0].events.push(obj);
  }
}
$scope.eventSources = [];

$scope.eventSources = [
  // your event source
  {
    events: [], // put the array in the `events` property
    color: 'black', // an option!
    textColor: 'yellow' // an option!
  }
  // any other event sources...
]

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

I have existing data in the form of object array and want to implement angular-ui calendar in day view against the guest name(i.e.,time vs guest name) that references the scheduled activity time for them.

1. How do I render the existing data on the ui?
2. How do I add new activity using calendar?