Winkel-ui-Kalender: Ereignisse, die nicht im Kalender angezeigt werden

Question

die Ereignisse sind nicht auf dem Kalender angezeigt, viele Beispiele auf dem Netz waren dies ähnlich, aber noch ist es nicht funktioniert

i gehörte die CSS und JS-Dateien von fullcalendar

das ist mein index.html

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

dies ist mein controller.js

Datei

'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

Ereignisse ist ein Array von Objekten. Versuchen Sie es zu initialisieren, etwa so:

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

event ein Objekt ist, erklären wie folgt aus:

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

Für die Farbe, eine CSS-Klasse verwenden, anstatt mit der Eigenschaft 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'} 
]; 

Und ein CSS-Beispiel:

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