Fullcalendar：angularjsでイベントを動的にバインド/追加する方法

Question

イベントを動的に追加/バインドするためにfullcalendarを最適化する方法を教えてください。私は角度のための有用なリソースを見つけることができません。ほとんどのドキュメントはjqueryです。以下は私のセットアップです。私はeventRender関数を追加しましたが、埋められません。私のhtmlでの助けをありがとう。..

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; 
      } 
     } 
    } 
}; 

カレンダー

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

UPDATEカレンダー上

現在表示

Answer 1

Fullcalendarは、イベントの配列を含むeventSourceオブジェクトを受け入れます。

あなたは既に$scope.projectsにイベントの配列を作成しています。あなたはalreay uiCalendarConfigを注入しました

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

ので、あなたが今、あなたのカレンダーにEVENTSOURCEを追加することができます：

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

すべてこれはちょうどあなたの後に起こるべきそのように今、あなただけのEventSourceに追加することができますforEachループ。

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>