在ngAfterViewInit之后更新angular2-fullcalendar [英] update angular2-fullcalendar after ngAfterViewInit

问题描述

好的，这是新事物，在与angular2-fullcalendar相关的任何线程中我都没有得到答案.

Alright, this is something new and I haven't got it answered in any threads related to angular2-fullcalendar.

我能够汇编 angular2-fullcalendar 本文档中所说的内容和所写内容

I am able to compile what is said and written on this documentation of angular2-fullcalendar

初始化视图后，尝试用事件填充日历时会出现问题.

Problem occurs when i am trying to populate calendar with my events, after the view has been initialised.

方案1:

1. 查看负载
2. 显示日历
3. 显示事件(硬编码)

方案2:

1. 查看负载
2. 显示日历
3. 从服务器获取记录
4. 要求angular2-fullcalender更新我的视图.
5. 没有错误，也不显示事件.

HTML:

<angular2-fullcalendar [options]="some" id="mycal" #mycal></angular2-fullcalendar>

工作示例:场景1

event: any[] = 
          [{
            title: 'Long Event',
            start: '2017-02-21',
            end: '2017-02-22'
          },{
            title: 'Long Event',
            start: '2017-02-16T16:00:00',
            end: '2017-02-17'
          }];
calOptions: Options = {};
ngOnInit() 
{
 this.some.events = this.event;
}

不起作用的示例:场景2

Not working example: Scenario 2

event: any[] = 
          [{
            title: 'Long Event',
            start: '2017-02-21',
            end: '2017-02-22'
          },{
            title: 'Long Event',
            start: '2017-02-16T16:00:00',
            end: '2017-02-17'
          }];
ngOnInit() { this.getBookings(); }

getBookings() {

        this._service.getEvents().subscribe(values => {

this.updateCalendar();

}, () => console.log('error'))

updateCalendar()
    {
this.calOptions.events = this.event;
      //$(this.element.nativeElement).fullCalendar('updateEvents',this.event) //I tried doing the query way too, but it failed.
    }

推荐答案

1:NPM安装

npm install fullcalendar

npm i angular2-fullcalendar

npm install jquery

npm install moment

'moment': 'npm:moment',
'jquery':'npm:jquery/dist/jquery.js',
'fullcalendar':'npm:fullcalendar/dist/fullcalendar.js'

我已附上以下文件，仅供参考.

I have attached the file below for reference purpose only.

import { CalendarComponent } from './angular2-fullcalendar/src/calendar/calendar';

将CalendarComponent添加到声明数组.

@NgModule({
  imports: [...],
  declarations: [
    CalendarComponent
  ],
  providers: [...],
  bootstrap: [...]
})

5现在该显示日历了.选择您自己的组件.例如，我将使用booking.component.html

<angular2-fullcalendar [options]="calOptions" id="mycal" #mycal></angular2-fullcalendar>

在booking.component.ts

import { Options } from 'fullcalendar'
import * as $ from 'jquery';
import * as moment from "moment

导入这三件事，现在您会看到我们之前所做的systemjs.config.js的重要性. 继续与课程中的booking.component.ts

Import the 3 things, now u see the importance the systemjs.config.js that we did earlier. Contniue with booking.component.ts in the class,

@ViewChild('mycal', { read: ElementRef }) myCal: ElementRef;

从第5步开始，html中有#mycal，即上述声明中的'mycal'.

From the step 5 beginning, there is #mycal in the html, that is 'mycal' in the above statment.

calOptions: any = {};

将calOptions初始化为空，请记住不要为空.

Initialising the calOptions to be empty, remember not null.

Contructor()
{
var events = [ {
          title: 'All Day Event',
          start: '2016-09-01'
        },
        {
          title: 'Long Event',
          start: '2016-09-07',
          end: '2016-09-10'
        }];
this.UpdateCalendar(events);
}

UpdateCalendar(events)
{
this.calOptions.events = events
$(this.myCal.nativeElement).fullCalendar('addEventSource', events)
}

在上面的构造函数中，我们要显示一些事件，我们正在调用updateCalendar来更新事件.

In the above, in constructor we have some events to be displayed, we are calling updateCalendar to update the events.

对此的更多参考: https://gist.github.com/shah- smit/85aff341cd4a20494910ab2c17e82777/edit

这篇关于在ngAfterViewInit之后更新angular2-fullcalendar的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！