Page Comparison

For displaying the data from a Smart DataSource in a Kendo UI Scheduler component, please follow the steps:

1. create Create a new Angular project (ng new SchedulerDemo)

2. install Install the Smart Component Library (scl install)

• specify the serviceURI: https://jenkins.consultingwerkcloud.com:8871/registered

3. generate Generate a new JSON layout-based form (scheduler.form.ts) with the following settings:

...

this.setFormConfiguration('frontend://assets/schedule.layout.json');

4. install Install the npm modules:

• @progress/kendo-angular-intl

• @progress/kendo-angular-dateinputs

• @progress/kendo-angular-buttons

• @progress/kendo-angular-label

• @progress/kendo-angular-scheduler

...

npm install --save @progress/kendo-angular-intl @progress/kendo-angular-dateinputs @progress/kendo-angular-buttons @progress/kendo-angular-label @progress/kendo-angular-scheduler

5. create Create the JSON layout in the /assets folder (schedule.layout.json)

6. add Add the settings for the Smart DataSource:

"dataSources": {
      "ScheduleDataSource": {
        "objectName": "ScheduleDataSource",
        "entityName": "Consultingwerk.ConferenceApp.Backend.Presentations.ConferencePresentationBusinessEntity",
        "tableRef": "eConferencePresentation"
      }
 },

7. add Add a custom component in the JSON layout:

"schedule": {
    "componentType": "custom",
    "componentOptions": {
        "placeholderId": "schedule"
    }
}

8. from From the terminal, go to the /src/app/forms/scheduler and run the command

ng generate component schedule, to generate the Angular component for the custom component (added in the JSON layout)

9. in In the /forms/scheduler folder create the file schedule.service.ts with the following content:

...

• setDatasource method sets the datasource from which the data will be retrieved. It is set from the .ts file of the form component.

• getSchedule method is used to get the data

• convertToSchedulerEvent method transforms an object as it comes from the backend into an object of type SchedulerEvent (as the Kendo Scheduler expects the array of events to be)

10. open Open the schedule.component.ts file (the custom component that was generated) and add the SmartCustomComponent annotation with the placeholder from the JSON layout:

...

• schedulerService is the service that was created on step #9, to get and compute the events from the backend

• dsRegistry is used to get the instance of the ScheduleDataSource created on step #6

14. in In the ngOnInit method get the Smart DataSource instance:

...