Kendo UI Scheduler usage

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

Create a new Angular project (ng new SchedulerDemo)
Install the Smart Component Library (scl install)

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

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

path: ‘schedule’
formId: 'schedule;

After generation ensure that the setConfiguration call is done with the JSON layout file name (that will be created on step #5):

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

4. Install the npm modules:

@progress/kendo-angular-intl
@progress/kendo-angular-dateinputs
@progress/kendo-angular-buttons
@progress/kendo-angular-label
@progress/kendo-angular-scheduler

using the command in the terminal:

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 the JSON layout in the /assets folder (schedule.layout.json)

6. Add the settings for the Smart DataSource:

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

7. Add a custom component in the JSON layout:

8. 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 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 the schedule.component.ts file (the custom component that was generated) and add the SmartCustomComponent annotation with the placeholder from the JSON layout:

This should be placed above the @Component annotation.

11. The class will extend the AbstractFormChild class. Implement the required method handleLayoutChange (the method can be left empty)

12. Add the variables:

13. In the constructor, add the following to the parameters:

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 the ngOnInit method get the Smart DataSource instance:

and subscribe to the scheduler events from the schedule.service.ts (the readonly ReplaySubject schedule variable):

This way when the events are fetched from the Smart DataSOurce in the service, they will be updated in the custom component (which contains the Kendo Scheduler component)

15. Go to the scheduler.form.ts file -> @NgModule annotation and add the ScheduleComponent (the custom component) to the declarations and entryComponents sections. Also add it in the SchedulerFormModule's static entryComponents array:

16. Add the ScheduleService to the scheduler.form.ts file -> @NgModule annotation.

17. For the custom component HTML template, add in schedule.component.html:

The Kendo DatePicker element is used to select a date, which is then passed to the Kendo Scheduler element. This way when the user selects a date, the Kendo Scheduler will react to it.

The Kendo Scheduler displays the events that are bound with the kendoSchedulerBinding attribute.

The attributes kendoSchedulerSlotSelectable [(slotSelection)]="selectedSlot" allow the user to select a slot in the scheduler table. Nothing will happen when a slot is selected, excepting the slot will be coloured differently, for the user to see the selection.

The final project structure should look like in the screenshot below:

Please check the relevant code files attached to this page for further reference.