How use Scheduler component on html component

For Angular 5 Scheduler project please see the Angular 5 Scheduler Quick Start tutorial:
https://code.daypilot.org/87636/angular-5-scheduler

It includes the basic setup required in Angular 5.

You can also generate a customized project using the UI Builder:
https://builder.daypilot.org/

Not work this example

\angular5-scheduler.20171103\angular5-scheduler>ng serve --port 4500
Your global Angular CLI version (6.1.5) is greater than your local
version (1.5.0). The local Angular CLI version is used.

To disable this warning use "ng config -g cli.warnings.versionMismatch false".
module.js:549
throw err;
^

Error: Cannot find module '@angular-devkit/core'
at Function.Module._resolveFilename (module.js:547:15)
at Function.Module._load (module.js:474:25)
at Module.require (module.js:596:17)
at require (internal/module.js:11:18)
at Object.<anonymous> (C:\Users\gabri\Downloads\angular5-scheduler.20171103\angular5-scheduler\node_modules\@angular-devkit\schematics\src\tree\virtual.js:10:16)
at Module._compile (module.js:652:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)

I want use " <daypilot-scheduler [config]="config" [events]="events" #scheduler></daypilot-scheduler>" on my dashboard component html, but not retreive data from data.service

Before running the project, you need to install the dependencies:

npm install

You don't need to use the data service. You can specify the resources using the "config" object:

config: any = {
  // ...
  resources: [
    {
      "name": "Resource 1",
      "id": "R1"
    },
    {
      "name": "Resource 2",
      "id": "R2"
    }
  ]
};

And events using the "events" object:

events: any[] = [
  {
    "id": 1,
    "resource": "R1",
    "start": "2018-09-04T00:00:00",
    "end": "2018-09-08T00:00:00",
    "text": "Event 1"
  },
  {
    "id": 2,
    "resource": "R1",
    "start": "2018-09-06T00:00:00",
    "end": "2018-09-11T00:00:00",
    "text": "Event 2"
  }
];

I did it, i use angular usually and i have not problems with other components.
I need service beacuse i retrieve data from API

Still not work
https://imgur.com/a/1zDX7YH

This is the source of scheduler.component.ts generated using the UI Builder and modified not to use the data service:

import {Component, ViewChild, AfterViewInit} from '@angular/core';
import {DayPilot, DayPilotSchedulerComponent} from 'daypilot-pro-angular';
import {DataService} from './data.service'; {}

@Component({
  selector: 'scheduler-component',
  template: `<daypilot-scheduler [config]="config" [events]="events" #scheduler></daypilot-scheduler>`,
  styles: [``]
})
export class SchedulerComponent implements AfterViewInit {

  @ViewChild('scheduler')
  scheduler: DayPilotSchedulerComponent;

  events: any[] = [
    {
      "id": 1,
      "resource": "R1",
      "start": "2018-09-04T00:00:00",
      "end": "2018-09-08T00:00:00",
      "text": "Event 1"
    },
    {
      "id": 2,
      "resource": "R1",
      "start": "2018-09-06T00:00:00",
      "end": "2018-09-11T00:00:00",
      "text": "Event 2"
    }
  ];

  config: any = {
    locale: "en-us",
    cellWidthSpec: "Fixed",
    cellWidth: 40,
    crosshairType: "Header",
    timeHeaders: [{"groupBy":"Month"},{"groupBy":"Day","format":"d"}],
    scale: "Day",
    days: DayPilot.Date.today().daysInMonth(),
    startDate: DayPilot.Date.today().firstDayOfMonth(),
    showNonBusiness: true,
    businessWeekends: false,
    floatingEvents: true,
    eventHeight: 30,
    eventMovingStartEndEnabled: false,
    eventResizingStartEndEnabled: false,
    timeRangeSelectingStartEndEnabled: false,
    groupConcurrentEvents: false,
    eventStackingLineHeight: 100,
    allowEventOverlap: true,
    timeRangeSelectedHandling: "Enabled",
    onTimeRangeSelected: function (args) {
      var dp = this;
      DayPilot.Modal.prompt("Create a new event:", "Event 1").then(function(modal) {
        dp.clearSelection();
        if (!modal.result) { return; }
        dp.events.add(new DayPilot.Event({
          start: args.start,
          end: args.end,
          id: DayPilot.guid(),
          resource: args.resource,
          text: modal.result
        }));
      });
    },

    resources: [
      {
        "name": "Resource 1",
        "id": "R1"
      },
      {
        "name": "Resource 2",
        "id": "R2"
      }
    ]
  };

  constructor(private ds: DataService) {
  }

  ngAfterViewInit(): void {
  }

}

Does this work for you?

Not work
https://imgur.com/a/4I5yvT1

Can you please post the complete source of your component (as text)?

Of course
https://pastebin.com/eh1m7UY0

Thanks - it looks like you have turned off the automatic change detection using

changeDetection: ChangeDetectionStrategy.OnPush

This prevents ngDoCheck() from running - and it's used to detect changes in the configuration.

You'll need to turn it on (remove the "changeDetection" property from the @Component decorator) or use the direct API to load the events:

  ngAfterViewInit(): void {
    this.scheduler.control.update({events: this.events});
  }

Thanks a lot, now work, if have problems, i write here

Update: It looks like this can be fixed inside DayPilot, please hold on.

Okei, thanks

OK, this should be fixed now and the events load properly with "changeDetection: ChangeDetectionStrategy.OnPush". However, later changes won't be detected automatically.

The fix is available in the latest sandbox build (2018.3.3395):

https://npm.daypilot.org/

Great
Thanks

Gabriele