I am updating
fullcalendar & fullcalendar-scheduler
FROM v2.8.0
& v1.3.2
TO v3.0.0
& v1.4.0
I've got a strange problem in newest versions: the Column header for month / week view are shown as object Object
, instead of Sunday, Monday, Tuesday, etc
In timelineWeek and timelineMonth view modes it displays the name of days OK.
In version 2.8.0 & 1.3.2 all was OK.
Can someone give me a suggestion please?
I was turning fullcalendar configurations in all ways and nothing changes...
I saw in latest versions 3.1.0 & 1.5.0 the same problem happens.
EDIT: [added code]
CSS files which I have included are:
1) 'fullcalendar/dist/fullcalendar.css';
2) 'fullcalendar-scheduler/dist/scheduler.css';
3) this one is not included: 'fullcalendar/dist/fullcalendar.print.css';
I am consuming these 2 components from Typescript (Angular2) The code related for initialization looks like:
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);
}
}