我正在更新
fullcalendar& fullcalendar-scheduler
FROM v2.8.0
& v1.3.2
TO v3.0.0
& v1.4.0
我在最新版本中遇到了一个奇怪的问题:月/周视图的列标题显示为 object Object
,而不是< strong>周日,周一,周二等
在 timelineWeek 和 timelineMonth 查看模式中,它会显示天数OK。
在2.8.0及更高版本中1.3.2一切都还可以。
有人可以给我一个建议吗?
我正在以各种方式转换fullcalendar配置,没有任何改变......
我看到最新版本3.1.0&amp; 1.5.0同样的问题发生了。
我包含的CSS文件是:
1)&#39; fullcalendar / dist / fullcalendar.css&#39;;
2)&#39; fullcalendar-scheduler / dist / scheduler.css&#39 ;;
3)这个不包括在内:&#39; fullcalendar / dist / fullcalendar.print.css&#39 ;;
我从Typescript(Angular2)中消耗这两个组件 与初始化相关的代码如下所示:
export class Scheduler implements AfterViewInit, OnInit {
@Input() resources: any[];
@Input() events: any[];
@Input() resourceLabelText: string;
@Input() slotLabelFormat: any;
@Input() titleFormat: any;
@Input() eventBackgroundColor: any;
@Input() columnFormat: any;
@Input() buttonIcons: any;
@Input() header: any;
@Input() style: any;
@Input() styleClass: string;
@Input() weekends: boolean;
@Input() hiddenDays: number[];
@Input() fixedWeekCount: boolean;
@Input() weekNumbers: boolean;
@Input() businessHours: any;
@Input() height: any;
@Input() eventLimit: any;
@Input() defaultDate: any;
@Input() nowIndicator: boolean;
@Input() slotLabelInterval: any;
@Input() snapDuration: any;
@Input() eventConstraint: any;
@Input() locale: any;
@Input() defaultView: string = 'timelineWeek';
@Input() editable: boolean = true;
@Input() aspectRatio: number = 1.35;
@Input() allDaySlot: boolean = true;
@Input() slotDuration: any = '24:00:00';
@Input() scrollTime: any = '06:00:00';
@Input() minTime: any = '00:00:00';
@Input() maxTime: any = '24:00:00';
@Input() slotEventOverlap: boolean = true;
@Input() dragRevertDuration: number = 500;
@Input() dragOpacity: number = .75;
@Input() dragScroll: boolean = true;
@Input() rtl: boolean = false;
@Input() eventStartEditable: boolean = true;
@Input() eventDurationEditable: boolean = true;
@Input() contentHeight: any = 350;
@Input() eventOverlap: any = false;
@Input() resourceAreaWidth: string = '250';
@Output() onDayClick: EventEmitter<any> = new EventEmitter();
@Output() onEventClick: EventEmitter<any> = new EventEmitter();
schedule: any;
ngOninit(){
this.events = this.createEventsCollection();
this.resources = this.createResourcessCollection();
this.columnFormat = {
month: 'dddd',
week: 'ddd, MMM dS',
day: 'dddd'
};
this.slotLabelFormat = {
month: 'MMMM YYYY',
week: 'dddd, D',
day: 'dddd'
};
this.header = {
left: 'today prev,next',
center: 'title',
right: 'timelineWeek,month'
};
}
ngAfterViewInit(){
this.schedule = jQuery(this.el.nativeElement.querySelector('#calendar'));
let options = {
resources: this.resources,
resourceAreaWidth: this.resourceAreaWidth,
resourceLabelText: this.resourceLabelText,
titleFormat: this.titleFormat,
slotLabelFormat: this.slotLabelFormat,
eventBackgroundColor: this.eventBackgroundColor,
buttonIcons: this.buttonIcons,
theme: true,
schedulerLicenseKey: this.schedulerLicenseKey,
columnFormat: this.columnFormat,
timeFormat: this.timeFormat,
header: this.header,
isRTL: this.rtl,
weekends: this.weekends,
hiddenDays: this.hiddenDays,
fixedWeekCount: this.fixedWeekCount,
weekNumbers: this.weekNumbers,
businessHours: this.businessHours,
height: this.height,
contentHeight: this.contentHeight,
aspectRatio: this.aspectRatio,
eventLimit: this.eventLimit,
defaultDate: this.defaultDate,
editable: this.editable,
eventStartEditable: this.eventStartEditable,
eventDurationEditable: this.eventDurationEditable,
defaultView: this.defaultView,
allDayslot: this.allDaySlot,
slotDuration: this.slotDuration,
slotLabelInterval: this.slotLabelInterval,
snapDuration: this.snapDuration,
scrollTime: this.scrollTime,
minTime: this.minTime,
maxTime: this.maxTime,
slotEventOverlap: this.slotEventOverlap,
nowIndicator: this.nowIndicator,
dragRevertDuration: this.dragRevertDuration,
dragOpacity: this.dragOpacity,
dragScroll: this.dragScroll,
eventOverlap: this.eventOverlap,
eventConstraint: this.eventConstraint,
firstDay: 0, //(Sunday=0, Monday=1, Tuesday=2, etc.)
events: (start, end, timezone, callback) => {
callback(this.events);
},
dayClick: (date, jsEvent, view, resourceObj) => {
this.onDayClick.emit({
'date': date,
'jsEvent': jsEvent,
'view': view,
'resourceObj': resourceObj
});
},
eventClick: (calEvent, jsEvent, view) => {
this.onEventClick.emit({
'calEvent': calEvent,
'jsEvent': jsEvent,
'view': view
});
}
};
if (this.locale) {
for (var prop in this.locale) {
options[prop] = this.locale[prop];
}
}
this.initialized = true;
this.schedule.fullCalendar(options);
}
}