在 Fullcalendar 4 中未动态填充事件数据

Question

我有一个数据库，其中包含一个月/期间的所有事件。我使用了 http.get 并获得了 JSON 文件。该文件具有附加数据，必须先对其进行修改或格式化，然后才能将其用作事件。例如：对于事件标题： name +id 。 所以我已经对其进行了相应的格式化并将其作为字符串存储在局部变量中。我正在尝试将此变量分配为事件数据。但这并没有被填充。

我已经尝试使用 Array.to(var) 将字符串转换为 Array。结果还是一样。我还尝试将其存储在 uri 中并传递与事件数据相同的 url: uri。这也未能显示该事件。 阅读有关 addEvent 方法的完整日历文档。但我对 Angular 8 比较陌生，所以不知道如何实现它。

所以，没有错误，但我似乎错过了大局。我会把我正在做的所有事情都说出来。 有一个接口evtdata：

export interface Evtdata {

  startRecur?: any,
  endRecur?: any,
  startTime?: any,
  endTime?: any,
  title?: any,
  daysOfWeek?: any

}

更新的组件：

this.options$ = this.evts.getEventDat().pipe(
      map(data => {
        for (var i = 0; i < this.data.length; i++) {
                this.eventdat[i].startRecur = "\""+data[i].startDate+"\"";
                this.eventdat[i].endRecur = "\""+data[i].endDate+"\"";
                this.eventdat[i].startTime ="\""+ data[i].startTime+"\"";
                this.eventdat[i].endTime = "\""+data[i].endTime+"\"";
                this.eventdat[i].title ="\""+ data[i].name + " " + data[i].wwid+" "+data[i].sId+"\"";
                this.eventdat[i].daysOfWeek ="\""+ "[" + data[i].workDays + "]"+"\"";
              }
            return {
             businessHours: {
                daysOfWeek: [1, 2, 3, 4, 5],
                startTime: '00:00',
                endTime: '24:00',
              },
              editable: true,
              customButtons: {
              },
              header: {
                left: 'prev,next',
                center: 'title',
                right: 'dayGridMonth,listView,timeGridWeek,timeGridDay'
              },
              plugins: [dayGridPlugin, interactionPlugin, listPlugin, bootstrapPlugin, timeGrigPlugin],
              events: this.eventdat
            }

      })

    );

日历.html

<full-calendar
 *ngIf="options$ | async"

  #fullcalendar
  themeSystem="bootstrap"
  [businessHours]="(options$ | async).businessHours"
  [editable]="true"
  [events]="(options$ | async).events"
  [header]="(options$ | async).header"
  [customButtons]="(options$ | async).customButtons"
  [plugins]="(options$ | async).plugins"
  (addEventSource)="addEventSource($event)"
  (eventClick)="eventClick($event)"
  (setProp)="setProp($event)"

></full-calendar>

我添加了多个日志来显示数据，数据正在保存并按所需顺序执行。事件仍未填充。

Answer 1

您正在对数据进行各种操作，但我真正了解的很少。如果你在做一个 HTTP 调用，它会返回一个 Observable。然后，您可以在 map 运算符中 pipe 添加/删除/修改您需要的任何内容。然后，您可以在模板中使用async 管道来避免所有订阅问题。

ngOnInit() {
  this.options = this.evts.getEventDat().pipe(
    map(data => {
      // format your options object here, using the data object as needed
      // don't forget that this map operator is NOT the same as Array map
      // you can of course do an Array map in here as well if you need to
    })
  );
}

然后，在模板中：

<full-calendar
  *ngIf="options | async"

  #fullcalendar
  themeSystem="bootstrap"
  [businessHours]="(options | async).businessHours"
  [editable]="true"
  [events]="(options | async).events"
  [header]="(options | async).header"
  [customButtons]="(options | async).customButtons"
  [plugins]="(options | async).plugins"
  (eventClick)="eventClick($event)"
  (setProp)="setProp($event)"


></full-calendar>

我仍然不明白你的很多格式。感觉就像您正在尝试将 JSON 作为字符串来操作，而您不需要这样做。你可以把它当作一个对象来操作，这就是重点。

附：如果您需要在 JSON 和字符串表示法之间来回切换，请使用 JSON.parse(myString) 和 JSON.stringify(myObject)。