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

、classNameプロパティで代わりにCSSクラスを使用します。

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

例：

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