Question

我试图以全日历（角度5）显示数据库中的数据，但是我不能。它仅显示强类型的对象。尽管当我为结果创建console.log时，它会显示一个包含我需要显示的所有数据的数组。

这是我的服务

 getEventsCalendar(id) {
    var year = new Date();
    var fullYear = year.getFullYear();

    var data: any = [
      {
        title: 'jour férié',
        date: new Date('08-15-' + fullYear +''),
        backgroundColor: 'orange',
        textColor: 'black',
        borderColor: 'orange'
      }

    ];

    this.getConges(id).subscribe(s => {
      s.forEach(c => {
        var object = {
          title: c.typeConge,
          start:  new Date(),
          end: new Date('08-28-2018')
        };


        data.push(object);
      });
    });

    return Observable.of(data);

  }

我还尝试创建一个包含强类型对象的数组，以及另一个包含动态数据的数组，然后将它们合并，但是它也不起作用。

这是组件：

import { ConsultantService } from './../../services/consultant.service';
import { Component, OnInit, ViewChild } from '@angular/core';
import { CalendarComponent } from 'ng-fullcalendar';
import { Options } from 'fullcalendar';
import { AuthenticationService } from '../../services/authentication.service';

@Component({
  selector: 'app-cra',
  templateUrl: './cra.component.html',
  styleUrls: ['./cra.component.css']
})
export class CraComponent implements OnInit {

  calendarOptions: Options;
  @ViewChild(CalendarComponent) ucCalendar: CalendarComponent;

  myId;
  events;
  constructor(private consultantService: ConsultantService, private authService: AuthenticationService) { }

  ngOnInit() {

    this.authService.authUser().subscribe(s => {
      if(s != null){
        this.consultantService.getUserId(s.email).subscribe(s => 
        {
          this.myId= s[0];
          this.consultantService.getEventsCalendar(this.myId).subscribe(data => {
            this.calendarOptions = {
              header: {
                left: '',
                center: 'title',
                right: ''
              },
              locale: 'fr',
              events: data
            };
          });
        })
      }
    });

  }
}

console.log显示以下结果：

[{“ title”：“ jourférié”，“ date”：“ 2018-08-14T22：00：00.000Z”，“ backgroundColor”：“ orange”，“ textColor”：“ black”，“ borderColor” ：“ orange”}，{“ title”：“Congéspayés”，“开始”：“ 2018-08-18T17：34：51.209Z”，“ end”：“ 2018-08-27T22：00：00.000Z”} ]

Answer 1

尝试以下工作代码：

      data = [
      {
        description : 'description for Conference',
        title       : 'Event1',
        start       : '2018-12-08',
        color       : '#57ce64'
      },
      {
        description : 'description for Conference',
        title       : 'Event2',
        start       : '2018-12-07',
        color       : '#fabb3e'
      },
      {
        description: 'description for Conference',
        title : 'Event2',
        start : '2018-12-10',
        end   : '2018-12-12',
        color : '#019efb'
      }
   ];

   ngOnInit() {
    this.calendarOptions = {
    editable: true,
    eventLimit: false,
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month,agendaWeek,agendaDay'
    },
    events:this.data

  };
}

有关更多信息，请检查此链接： Full-calendar Hacks

Angular 5 FullCalendar不显示动态数据

1 个答案: