FullCalendar in Ionic3 with Angular 4

问题描述：

如何在Ionic 3和Angular 4的事件（例如，单击）中初始化fullCalendar？FullCalendar in Ionic3 with Angular 4

设置可变日历选项时，此代码的工作：

calendarOptions: Object = { 
    fixedWeekCount: true, 
    editable: true 
    };

但是，当我打电话给函数，不工作：

buildCalendar(): void{ 
    this.calendarOptions: Object = { 
    fixedWeekCount: true, 
    editable: true 
    }; 
}

的HTML代码，其中的日历被称为

<angular2-fullcalendar 
      [options]="calendarOptions" 
      (initialized)="onCalendarInit($event)"></angular2-fullcalendar>

buildCalendar调用的角度代码：

getAging(): void { 

    this.myProvider.getAging() 
     .subscribe(
     (response) => { 
//do something... 
     }, (error) => { 
     console.log(`Backend returned code ${error.status}, body was: ${error.error}`); 
     },() => { 
     console.log('aging complete'); 
     this.buildCalendar(); 
     } 
    ) 

    }

PS：getAging（）在页面加载时被调用。

而我需要初始化fullCalender，从后端（API）加载数据后。

那么它是离子2还是离子3？而且你在离子中使用它真的很重要吗？它是有角度的。什么是buildCalendar，它叫什么名字？而这个.calendarOptions是如何使用的？请提供http://stackoverflow.com/help/mcve。 – estus

@estus抱歉，我编辑我的问题。我提到了Ionic，因为我不知道它是否有与Angular不同的操作。 –

将插件安装到我的离子3后，我得到一个没有这样的文件calendar.js的问题。你是如何解决这个问题的？谢谢 – ACES

答

这个问题并非一般的FullCalendar，而是特定的angular2-fullcalendar组件及其工作方式。

如果是指this one，问题很明显;它不会监视options输入并使用setTimeout黑客来覆盖输入中的初始更改（并且此处不需要100 ms的延迟）。

由于该组件非常简单，因此第一方根据自己的需求来实施它，而不是依赖第三方解决方案。

对于此特定组件，应使用ngIf。它有助于防止组件被编译，直到选项准备好：

<angular2-fullcalendar *ngIf="calendarOptions" 
      [options]="calendarOptions" 
      (initialized)="onCalendarInit($event)"></angular2-fullcalendar>

FullCalendar in Ionic3 with Angular 4

相关推荐