2

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

month view mode

In timelineWeek and timelineMonth view modes it displays the name of days OK.

timelineWeek view mode

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);
  }
}
mihai
  • 2,746
  • 3
  • 35
  • 56

0 Answers0