Question

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

我已经尝试使用Array.to（var）将字符串转换为Array。结果仍然相同。 Ive还尝试将其存储在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
            }

      })

    );

calendar.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。然后，您可以在pipe运算符中map进行添加/删除/修改所需的任何操作。然后，您可以使用模板中的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作为字符串来处理，这是不需要的。您可以将其作为一个对象进行操作，这很重要。

P.S。如果需要在JSON和字符串表示法之间来回切换，请使用JSON.parse（myString）和JSON.stringify（myObject）。

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

1 个答案: