Customizing scheduler with templates does not render anything

Question

Test

Attachment: Screenshot_2_408d0d31.zip

Balasubramanian Sattanathan · Accepted Answer

Hi Konnos Kall, 

Thanks for the update. 

We have validated your shared code snippet and we suspect that the resource data source is not properly added inside the getSchedulerData method. And also we let you know that you have provided the rowAutoHeight property as true. So if the resource data is minimal(height is some pixel), the scheduler will be rendered look like shared screenshots. We have prepared a sample with your code snippet for your reference. 

Sample: https://stackblitz.com/edit/angular-dttnyp-jcy4m5?file=app.component.ts 

Kindly refer to the above sample and let us know if this is helpful. 

Regards, 
Balasubramanian S

Konnos Kall · Answer

Here the ts code

 @ViewChild('timelineSchedule')
  public scheduleObj: ScheduleComponent;
  public selectedDate: Date = new Date();

  public currentView: string = 'TimelineMonth';
  public views: Array<string> = ['TimelineWeek', 'TimelineMonth'];
  public rowAutoHeight: Boolean = true;
  public eventSettings: EventSettingsModel = {
    dataSource: []
  };
  public group: GroupModel = {
    resources: ['Vehicles']
  };

  public allowMultipleOwner: Boolean = true;
  public ownerDataSource: Object[] = [

  ];

  constructor(
    private schedulerService: SchedulerService,
    
    private translate: TranslateService,
    private notifications: NotificationsService,
    private router: Router
  ) { }
  schedulerData: any[] = [];
  isLoading: boolean;



  public async getSchedulerData() {
    try {
      this.isLoading = true;
      const data = await this.schedulerService.getVehiclesbyReservations().toPromise();
      console.log(data);
      this.schedulerData = await data.vehicles;

      let i = 1;
      let reservationData = [];
      this.schedulerData.forEach(data => {
        let brand = data?.brand;
        let carModel = data?.carModel;
        let generationYear = data?.generationYear;
        let reservations = data?.reservations;
        this.ownerDataSource.push({ vehicleName: brand + " " + carModel + " " + generationYear, vehicleID: i, vehicleColor: '#500ade' });

        reservations.forEach(reservation => {
          reservationData.push({
            Id: i,
            Subject: brand + " " + carModel + " " + generationYear,
            StartTime: reservation.startDate,
            EndTime: reservation.endDate,
            PickUpLocation: reservation.pickupLocation,
            ReturnLocation: reservation.returnLocation,
            entryID: i
          })
        });


        i++;

      })
      this.eventSettings.dataSource = reservationData;
      console.log(this.eventSettings.dataSource);
      this.isLoading = false;
    } catch (error) {
      console.log(error);
    }

  }

Balasubramanian Sattanathan · Answer

Hi Konnos Kall, Greetings from Syncfusion Support. We have tried to replicate your reported scenario “Customizing scheduler with templates does not render anything” at our side. But unfortunately, we are unable to reproduce it at our side. Since the Scheduler rendered properly. For your reference, we have prepared a sample based on that by making use of the resourceHeaderTemplate like the below code snippet.

Sample: https://stackblitz.com/edit/angular-dttnyp-jkzb4e?file=app.component.html UG: https://ej2.syncfusion.com/angular/documentation/schedule/resources/#simple-resource-header-customization Kindly try and refer the above links and let us know the below details if the solution isn’t helpful. Replicate your problem in the above sample or Share a sample (if possible) illustrating the problem which would help us to proceed further. Regards, Balasubramanian S

Konnos Kall · Answer

Hello. Thank you for your example. I copied and try it exactly with your data etc. Im getting an error here:

 public eventSettings: EventSettingsModel = {
    dataSource: <Object[]>extend([], resourceData.concat(timelineResourceData), null, true)
  };

With the following messages:

core.js:6228 ERROR TypeError: exclude.indexOf is not a function

(anonymous) @ default~scheduler-scheduler-module~testscheduler-testscheduler-module.js:1

core.js:6228 ERROR Error: Uncaught (in promise): TypeError: exclude.indexOf is not a function

TypeError: exclude.indexOf is not a function

Also angular make the true in the end red and popups this message Argument of type 'true' is not assignable to parameter of type 'string[]'.