角UI的日曆：事件不會在日曆

Question

的事件不會在日曆上顯示顯示，在網絡上很多例子都與此類似，但它仍然不能正常工作

我已經包括fullcalendar的CSS和JS文件

這是我的index.html

<div class="container"> 
 
<div style="width:60%;" ui-calendar='$ctrl.uiConfig.calendar' ng-model="$ctrl.eventSources"> 
 
\t 
 
</div> 
 
</div>

這是我的controller.js文件

'use strict'; 
 
(function(){ 
 

 
class CalendarComponent { 
 
    constructor() { 
 

 
    this.uiConfig = { 
 
     calendar : { 
 
       editable : true, 
 
       header : { 
 
         left : 'prev,next,today', 
 
         center : 'title', 
 
         right : 'month,agendaWeek,agendaDay' 
 
         } 
 
        } 
 
       }; 
 
     
 
    this.thespian_events= [  
 
         events: [ 
 
           {title: "finger painting", start: "2016-07-26T10:06:30+05:30", allDay:true} 
 
           ], 
 

 
          color: 'blue' 
 
         ];    
 
    
 
    this.eventSources = [this.thespian_events]; 
 
       
 
    } 
 

 
} 
 

 
angular.module('sangamApp') 
 
    .component('calendar', { 
 
    templateUrl: 'app/calendar/calendar.html', 
 
    controller: CalendarComponent 
 
    }); 
 

 
})();

Answer 1

事件是對象的數組。嘗試初始化它像這樣：

this.thespian_events = [ 
    {title: "finger painting", start: "2016-07-26T10:06:30+05:30", allDay:true} 
    {title: "other event", start: "2016-08-26T10:06:30+05:30", allDay:true} 
]; 

的EventSource是一個對象，聲明是這樣的：

this.eventSources = { events: this.thespian_events }; 

對於顏色，使用一個CSS類，而不是className屬性：

this.thespian_events = [ 
    {title: "finger painting", start: "2016-07-26T10:06:30+05:30", allDay:true, className: 'finger-painting'} 
    {title: "other event", start: "2016-08-26T10:06:30+05:30", allDay:true, className: 'default-event'} 
]; 

和一個css例子：

.default-event > div { 
    background-color: yellow; 
    color: black; 
} 
.default-event > div :hover { 
    color: black; 
}