1. Home
  2. Forum
  3. Aurelia
  4. Resources not displayed

Resources not displayed

Hi,

I am currently searching for some new UI components for my new aurelia project and found the nice looking one's here. I was trying around a bit with the schedule control and it worked very nice until I tried to add resources. Unfortunately the resources are not displayed. Find the code of my template and viewmodel below. Am I missing something or doing something wrong?

Thank you for some advice.

schedule.html
<template>    
    <div>
        <ej-schedule id="Schedule1" e-width="100%" e-height="575px" e-show-appointment-navigator="false" e-orientation="horizontal"
        e-show-all-day-row="false" e-show-current-time-indicator="false" e-resources.bind="ResourceList" e-views.bind="AvailableViews"
        e-time-scale.bind="TimeScale" e-show-next-prev-month="false" e-current-view.bind="CurrentView" e-render-dates.bind="RenderDates"
        e-appointment-settings.bind="AppointmentList" e-current-date.bind="CurrentDate">
        </ej-schedule>
    </div>
</template>

schedule.js
export class DefaultSchedule {
  constructor() {

    this.Orientation = "horizontal";
    this.AvailableViews =  ["Month", "CustomView", "Agenda"];
    this.CurrentView = "CustomView";
    this.RenderDates = {
      start: new Date(2017, 1, 7),
      end: new Date(2017, 2, 14)
    };

    this.TimeScale = {
      enable: false
    };
    this.CurrentDate = new Date(2017, 1, 14);

    var appointmentData = [
      {
        Id: 100,
        Subject: "Mr. & Mrs. Schmidt",
        StartTime: "2017/2/15 14:00:00",
        EndTime: "2017/2/18 10:00:00",
        roomId: 5
      }, {
        Id: 101,
        Subject: "Mr. & Mrs. Smiso",
        StartTime: "2017/2/16 14:00:00",
        EndTime: "2017/2/19 10:00:00",
        roomId: 3
      }, {
        Id: 102,
        Subject: "Mr. & Mrs. Smith",
        StartTime: "2017/2/11 14:00:00",
        EndTime: "2017/2/18 10:00:00",
        roomId: 1
      }];

    this.AppointmentList = {

      // Schedule appointment dataSource
      dataSource: appointmentData,

      // Schedule dataSource field mapping
      id: "Id",
      subject: "Subject",
      startTime: "StartTime",
      endTime: "EndTime",
      resourceFields: "roomId"
    };

    var resourceData = [
      {
        roomName: "R100",
        id: 1,
        etage: 1
      }, {
        roomName: "R101",
        id: 2,
        etage: 1
      }, {
        roomName: "R102",
        id: 3,
        etage: 1
      }, {
        roomName: "R200",
        id: 4,
        etage: 2
      }, {
        roomName: "R201",
        id: 5,
        etage: 2
      }, {
        roomName: "R202",
        id: 6,
        etage: 2
      }, {
        roomName: "R203",
        id: 7,
        etage: 2
      }];

    this.ResourceList = [{
      resourceSettings: {
        text: "roomName",
        id: "id",
        dataSource: resourceData
      },
      field: "roomId",
      title: "Room(s)",
      name: "rooms",
      allowMultiple: false
    }];
  }
}

3 Replies
MP Mahesh Palanisamy Syncfusion Team February 20, 2017 12:09 PM UTC

Hi Dennis, 
 
Thank you for contacting Syncfusion support. 
 
We have analyzed your provided code and found that you have missed to define the ‘e-group’ property which could be the cause of the reported issue. Kindly refer the below code -  
 
<Code> 
schedule.html  
<template>     
    <div> 
        <ej-schedule id="Schedule1" e-width="100%" e-height="575px" e-show-appointment-navigator="false" e-orientation="horizontal" 
        e-show-all-day-row="false" e-show-current-time-indicator="false" e-resources.bind="ResourceList" e-group.bind="Group" e-views.bind="AvailableViews" 
        e-time-scale.bind="TimeScale" e-show-next-prev-month="false" e-current-view.bind="CurrentView" e-render-dates.bind="RenderDates" 
        e-appointment-settings.bind="AppointmentList" e-current-date.bind="CurrentDate"> 
        </ej-schedule> 
    </div> 
</template> 
 
schedule.js 
export class DefaultSchedule { 
    constructor() { 
… 
this.Group = { 
        resources: ['rooms'] 
    }; 
… 
} 
} 
</Code> 
 
Using the same code snippet, we have prepared the sample which can be downloaded from the below location: 

Kindly follow the below steps to run the sample, 

1.       Navigate to project folder  
2.       npm install 
3.       jspm install 
4.       gulp watch 
5.       Browse to http://localhost:9000 to see the sample. 

Kindly check the above sample and let us know, if you need any further assistance on this. 

Regards, 
Mahesh 


DK Dennis Keller February 20, 2017 08:47 PM UTC

Perfect. Thank you very much for the quick answer Mahesh.

KK Karthigeyan Krishnamurthi Syncfusion Team February 21, 2017 05:06 AM UTC

Hi Dennis,  
 
Thanks for your update. 
 
Please let us know if you need further assistance. 
 
Regards, 
Karthigeyan 


Loader.
Up arrow icon