Fullcalender资源-时间轴角度组件未呈现资源和事件

时间:2019-07-02 12:41:36

标签: angular fullcalendar fullcalendar-scheduler

我正在为项目设置@fullcalendar/resource-timeline并通过提供数据的服务进行设置。但是将数据呈现到时间轴日历似乎存在问题。

scheduler.service.ts

    import { Injectable } from '@angular/core';
    import { HttpClient } from '@angular/common/http';
    import { GlobalService } from '@gp_core/_services/global.service';
    import {map} from 'rxjs/operators';

    export class Resources {
      id?: number;
      title?: string;
    }

    export class Events {
      id?: string;
      resourceId?: string;
      start?: string;
      end?: string;
      description?: string;
      title?: string;
    }

    export class Scheduler {
      resources?: Resources[];
      events?: Events[];
    }

    @Injectable({ providedIn: 'root' })
    export class SchedulerService {
      constructor( private http: HttpClient, private _config: GlobalService ) {}
      getAllBookings() {
        return this.http.get<Scheduler>( this._config.getBaseUrl() + 'schedular?city=1&gender=female&date=01&month=07&year=2019&zone=0' )
          .map(( res: any ) => res );
      }
    }

scheduler.component.ts

    import { Component, OnInit, ViewChild } from '@angular/core';

    import { Resources, Events, SchedulerService } from '@gp/core/_services/scheduler.service';

    import { FullCalendarComponent } from '@fullcalendar/angular';
    import { EventInput } from '@fullcalendar/core';
    import interactionPlugin from '@fullcalendar/interaction';
    import resourceTimelinePlugin from '@fullcalendar/resource-timeline';


    @Component({
      selector: 'app-scheduler',
      templateUrl: './scheduler.component.html',
      styleUrls: ['./scheduler.component.scss']
    })
    export class SchedulerComponent implements OnInit {

      @ViewChild('calendar', { static: false }) calendarComponent: FullCalendarComponent; // the #calendar in the template

      calendarPlugins = [resourceTimelinePlugin];

      resources: Resources[];
      events: Events[];

      constructor( private _scheduler: SchedulerService ) {}
      ngOnInit() {
        this._scheduler.getAllBookings().subscribe( (res) => {
          this.resources = res.data['resources'];
          this.events = res.data['events'];
        });
      }
    }

scheduler.component.html

    <full-calendar
            #calendar
            defaultView="resourceTimeline"
            [plugins]="calendarPlugins"
            [resources]="beauticians"
            [events]="bookings">
    </full-calendar>

我希望这能显示计划的fullcalender.io资源时间轴,但会出现以下错误

    SchedulerComponent.html:10 ERROR TypeError: Cannot read property '_raw' of null
        at Object.handleResources [as resources] (main.js:860)
        at main.js:6900
        at Calendar.batchRendering (main.js:6741)
        at Calendar.mutateOptions (main.js:6877)
        at FullCalendarComponent.ngAfterContentChecked (fullcalendar-angular.js:376)
        at callProviderLifecycles (core.js:24917)
        at callElementProvidersLifecycles (core.js:24886)
        at callLifecycleHooksChildrenFirst (core.js:24868)
        at checkAndUpdateView (core.js:35072)
        at callViewAction (core.js:35433)

0 个答案:

没有答案