完整日历月/周视图列标题是对象对象

时间:2017-01-26 15:20:19

标签: jquery fullcalendar fullcalendar-scheduler

我正在更新

  

fullcalendar& fullcalendar-scheduler

FROM v2.8.0& v1.3.2 TO v3.0.0& v1.4.0

我在最新版本中遇到了一个奇怪的问题:月/周视图的列标题显示为 object Object ,而不是< strong>周日,周一,周二等

month view mode

timelineWeek timelineMonth 查看模式中,它会显示天数OK。

timelineWeek view mode

在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);
  }
}

0 个答案:

没有答案