Question

事件没有显示在日历上，网上很多例子与此类似，但仍然无法正常工作

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

这是我的index.html

＆＃13;

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

＆＃13;

这是我的controller.js文件

＆＃13;

'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
  });

})();

＆＃13;

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

angular-ui-calendar：活动未显示在日历中

1 个答案: