javascript - Angular UI 日历 : events are not displayed in the calendar

Question

事件未显示在日历上，网络上的许多示例与此类似，但仍然不起作用

我已经包含了fullcalendar的css和js文件

这是我的index.html

<div class="container">
<div style="width:60%;" ui-calendar='$ctrl.uiConfig.calendar' ng-model="$ctrl.eventSources">
	
</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

events 是一个对象数组。尝试像这样初始化它:

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