好吧,这是新的东西,我还没有在与angular2-fullcalendar相关的任何线程中得到答案。
的文档中所说和所写的内容在我初始化视图后尝试使用我的事件填充日历时出现问题。
情景1:
情景2:
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.
}
答案 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)
npm install fullcalendar
npm i angular2-fullcalendar
npm install jquery
npm install moment
angular2-fullcalendar
移除node_modules
并将其放在app
文件夹Systemjs.config.js
添加以下代码段map
部分。'moment': 'npm:moment',
'jquery':'npm:jquery/dist/jquery.js',
'fullcalendar':'npm:fullcalendar/dist/fullcalendar.js'
我附上以下文件仅供参考。
app.module.ts
CalendarComponent
导入angular2-fullcalendar
import { CalendarComponent } from './angular2-fullcalendar/src/calendar/calendar';
将CalendarComponent
添加到声明数组。
@NgModule({
imports: [...],
declarations: [
CalendarComponent
],
providers: [...],
bootstrap: [...]
})
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