在ngAfterViewInit之后更新angular2-fullcalendar

时间:2017-02-26 20:18:51

标签: angular fullcalendar

好吧,这是新的东西,我还没有在与angular2-fullcalendar相关的任何线程中得到答案。

我能够编译angular2-fullcalendar

的文档中所说和所写的内容

在我初始化视图后尝试使用我的事件填充日历时出现问题。

情景1:

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

    1. 查看负载
    2. 显示日历
    3. 获取记录(来自服务器)
    4. 要求angular2-fullcalender更新我的观点。
    5. 没有错误,也没有显示事件。
    6. 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

      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.
          }
      

2 个答案:

答案 0 :(得分:3)

如果你查看那个npm包的implementation,你会发现它是非常基本的。我建议在你自己的Typescript中包装完整的日历,并自己处理FullCalendar事件和入口点,这样你就可以利用整个API

以下组件是我成功使用的组件,它使用JQuery。

import { Component, ViewContainerRef, Input, Output, EventEmitter } from '@angular/core';
import { Overlay } from 'angular2-modal'; 
import * as $ from 'jquery';
import 'fullcalendar';
import { Options } from 'fullcalendar';
import _ from 'lodash';

export interface IEvent {
    title: string;
    description: string;
    start: Date;
    end: Date;
    type: string;
    backgroundColor: string;
    textColor: string;
    className: string;
    borderColor: string;
}

declare var jQuery: any;

@Component({
    selector: 'calendar',
    template: `<div id='calendar'></div>`
})
export class CalendarComponent {

    @Input('height')
    public height: number;

    @Output('event-click')
    eventClick = new EventEmitter();

    @Output('month-changed')
    monthChanged = new EventEmitter();

    @Output('date-change')
    dateChange = new EventEmitter();

    calElement = null;

    addEvents(events: IEvent[]) {
        this.calElement = $('#calendar');
        if (!_.isNil(events)) {
            $('#calendar').fullCalendar('addEventSource', events);
        }
    }

    getCurrentMonth() {
        const currentdate = <any>$("#calendar").fullCalendar('getDate');
        return currentdate.month();
    }


    ngOnInit() {
        this.calElement = $('#calendar');
        let clickFunc = function (calEvent, jsEvent, view) {
            this.eventClick.emit(calEvent);
        };

        let eventRender = function (event, element) {
            const args = {event: event, view: element};
            this.dateChange.emit(args);
        };

         let viewRender = function (view, element) {
            this.monthChanged.emit(view.intervalStart.month());
        };

        let boundRender = eventRender.bind(this);
        let boundClick = clickFunc.bind(this);
        let boundView = viewRender.bind(this);

        let options: any = {
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,basicWeek,basicDay listMonth,listWeek,listDay'
            },

            defaultView: 'month',
            aspectRatio: 1,
            eventRender: boundRender,
            eventClick: boundClick,
            viewRender: boundView
        };

        if (this.height > 0) {
            options.height = this.height;
        }

        this.calElement.fullCalendar(options);
    }
}

答案 1 :(得分:3)

1:NPM安装

npm install fullcalendar

npm i angular2-fullcalendar

npm install jquery

npm install moment

2:从angular2-fullcalendar移除node_modules并将其放在app文件夹

3:打开Systemjs.config.js添加以下代码段map部分。

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

我附上以下文件仅供参考。

4:从app.module.ts

打开CalendarComponent导入angular2-fullcalendar
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

导入3件事,现在你看到我们之前做过的systemjs.config.js的重要性了。 在课程中使用booking.component.ts的连续

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

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

calOptions: any = {};

将calOptions初始化为空,请记住不为空。

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来更新事件。

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