Angular4 and Devextreme scheduler - node.js

Question

i try to use the devexpress's scheduler plugin into my project.
After creating a project using angular Cli and installing the devexpress plugin using this command :
npm install --save devextreme devextreme-angular
Here is what i've get in my project :
calendrier.component.css
/deep/ .options {
padding: 20px;
background-color: #f5f5f5;
margin-top: 20px;
}
/deep/ .caption {
font-size: 18px;
font-weight: 500;
}
/deep/ .option {
margin-top: 10px;
display: inline-block;
width: 19%;
}
/deep/ .switcher-mode {
width: 100%;
}
/deep/ .option > span {
margin-right: 10px;
}
/deep/ .option > .dx-selectbox {
display: inline-block;
vertical-align: middle;
}
calendrier.component.html
<dx-scheduler
style="height: 100%; display: block"
[dataSource]="appointmentsData"
[currentDate]="currentDate"
startDateExpr="StartDate"
endDateExpr="EndDate"
textExpr="Text"
[views]="['agenda','workWeek']"
currentView="workWeek"
[firstDayOfWeek]="1"
[startDayHour]="9"
[endDayHour]="19"
[resources]="resourcesData"
></dx-scheduler>
calendrier.component.ts
import { NgModule, Component, enableProdMode } from '#angular/core';
import {BrowserModule} from '#angular/platform-browser';
import {platformBrowserDynamic} from '#angular/platform-browser-dynamic';
import {Appointment, Resource, Service} from './calendrier.service';
import {DxSchedulerModule, DxCheckBoxModule, DxSelectBoxModule} from 'devextreme-angular';
if(!/localhost/.test(document.location.host)) {
enableProdMode();
}
#Component({
selector: 'calendrier',
templateUrl: './calendrier.component.html',
styleUrls: ['./calendrier.component.css'],
providers: [Service]
})
export class CalendrierComponent {
appointmentsData: Appointment[];
currentDate: Date = new Date(2015, 4, 25);
resourcesData: Resource[];
switchModeNames: string[];
constructor(service: Service) {
this.switchModeNames = ["Tabs", "Drop-Down Menu"];
this.appointmentsData = service.getAppointments();
this.resourcesData = service.getResources();
}
}
#NgModule({
imports: [
BrowserModule,
DxSchedulerModule,
DxCheckBoxModule,
DxSelectBoxModule
],
declarations: [CalendrierComponent],
bootstrap: [CalendrierComponent]
})
export class CalendrierModule {}
platformBrowserDynamic().bootstrapModule(CalendrierModule)
calendrier.component.service
import { Injectable } from "#angular/core";
export class Appointment {
text: string;
ownerId: number[];
startDate: Date;
endDate: Date;
allDay?: boolean;
recurrenceRule?: string;
}
export class Resource {
text: string;
id: number;
color: string;
}
let appointments: Appointment[] = [
{
text: "Website Re-Design Plan",
ownerId: [4],
startDate: new Date(2015, 4, 25, 9, 30),
endDate: new Date(2015, 4, 25, 11, 30)
}, {
text: "Book Flights to San Fran for Sales Trip",
ownerId: [2],
startDate: new Date(2015, 4, 25, 12, 0),
endDate: new Date(2015, 4, 25, 13, 0),
allDay: true
}, {
text: "Install New Router in Dev Room",
ownerId: [1],
startDate: new Date(2015, 4, 25, 14, 30),
endDate: new Date(2015, 4, 25, 15, 30)
}, {
text: "Approve Personal Computer Upgrade Plan",
ownerId: [3],
startDate: new Date(2015, 4, 26, 10, 0),
endDate: new Date(2015, 4, 26, 11, 0)
}, {
text: "Final Budget Review",
ownerId: [1],
startDate: new Date(2015, 4, 26, 12, 0),
endDate: new Date(2015, 4, 26, 13, 35)
}, {
text: "New Brochures",
ownerId: [4],
startDate: new Date(2015, 4, 26, 14, 30),
endDate: new Date(2015, 4, 26, 15, 45)
}, {
text: "Install New Database",
ownerId: [2],
startDate: new Date(2015, 4, 27, 9, 45),
endDate: new Date(2015, 4, 27, 11, 15)
}, {
text: "Approve New Online Marketing Strategy",
ownerId: [3, 4],
startDate: new Date(2015, 4, 27, 12, 0),
endDate: new Date(2015, 4, 27, 14, 0)
}, {
text: "Upgrade Personal Computers",
ownerId: [2],
startDate: new Date(2015, 4, 27, 15, 15),
endDate: new Date(2015, 4, 27, 16, 30)
}, {
text: "Customer Workshop",
ownerId: [3],
startDate: new Date(2015, 4, 28, 11, 0),
endDate: new Date(2015, 4, 28, 12, 0),
allDay: true
}, {
text: "Prepare 2015 Marketing Plan",
ownerId: [1, 3],
startDate: new Date(2015, 4, 28, 11, 0),
endDate: new Date(2015, 4, 28, 13, 30)
}, {
text: "Brochure Design Review",
ownerId: [4],
startDate: new Date(2015, 4, 28, 14, 0),
endDate: new Date(2015, 4, 28, 15, 30)
}, {
text: "Create Icons for Website",
ownerId: [3],
startDate: new Date(2015, 4, 29, 10, 0),
endDate: new Date(2015, 4, 29, 11, 30)
}, {
text: "Upgrade Server Hardware",
ownerId: [4],
startDate: new Date(2015, 4, 29, 14, 30),
endDate: new Date(2015, 4, 29, 16, 0)
}, {
text: "Submit New Website Design",
ownerId: [1],
startDate: new Date(2015, 4, 29, 16, 30),
endDate: new Date(2015, 4, 29, 18, 0)
}, {
text: "Launch New Website",
ownerId: [2],
startDate: new Date(2015, 4, 29, 12, 20),
endDate: new Date(2015, 4, 29, 14, 0)
}, {
text: "Stand-up meeting",
ownerId: [1, 2, 3, 4],
startDate: new Date(2015, 4, 25, 9, 0),
endDate: new Date(2015, 4, 25, 9, 15),
recurrenceRule: "FREQ=DAILY;BYDAY=MO,TU,WE,TH,FR;UNTIL=20150530"
}
];
let resources: Resource[] = [
{
text: "Samantha Bright",
id: 1,
color: "#cb6bb2"
}, {
text: "John Heart",
id: 2,
color: "#56ca85"
}, {
text: "Todd Hoffman",
id: 3,
color: "#1e90ff"
}, {
text: "Sandra Johnson",
id: 4,
color: "#ff9747"
}
];
#Injectable()
export class Service {
getAppointments(): Appointment[] {
return appointments;
}
getResources(): Resource[] {
return resources;
}
}
index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CroissantBoard</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.1.4/css/dx.spa.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.1.4/css/dx.common.css" />
<link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/17.1.4/css/dx.light.css" />
<script src="https://unpkg.com/core-js#2.4.1/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js#0.6.25/dist/zone.js"></script>
<script src="https://unpkg.com/reflect-metadata#0.1.3/Reflect.js"></script>
<script src="https://unpkg.com/systemjs#0.19.31/dist/system.js"></script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<calendrier>Loading...</calendrier>
</div>
</body>
</html>
when i launch the project using
ng serve
But i have a problem... my calendar is blank ... did you have an idea of how can i see the events who's on the "calendrier.service.ts"
Here is what i've got on my console :
compiler.es5.js:1689 Uncaught Error: Template parse errors:
Can't bind to 'dataSource' since it isn't a known property of 'dx-scheduler'.
1. If 'dx-scheduler' is an Angular component and it has 'dataSource' input, then verify that it is part of this module.
2. If 'dx-scheduler' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '#NgModule.schemas' of this component. ("<dx-scheduler
style="height: 100%; display: block"
[ERROR ->][dataSource]="appointmentsData"
[currentDate]="currentDate"
startDateExpr="StartDate"
"): ng:///AppModule/CalendrierComponent.html#2:4
Can't bind to 'currentDate' since it isn't a known property of 'dx-scheduler'.
1. If 'dx-scheduler' is an Angular component and it has 'currentDate' input, then verify that it is part of this module.
2. If 'dx-scheduler' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '#NgModule.schemas' of this component. ("
style="height: 100%; display: block"
[dataSource]="appointmentsData"
[ERROR ->][currentDate]="currentDate"
startDateExpr="StartDate"
endDateExpr="EndDate"
"): ng:///AppModule/CalendrierComponent.html#3:4
Can't bind to 'views' since it isn't a known property of 'dx-scheduler'.
1. If 'dx-scheduler' is an Angular component and it has 'views' input, then verify that it is part of this module.
2. If 'dx-scheduler' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '#NgModule.schemas' of this component. ("
endDateExpr="EndDate"
textExpr="Text"
[ERROR ->][views]="['agenda','workWeek']"
currentView="workWeek"
[firstDayOfWeek]="1"
"): ng:///AppModule/CalendrierComponent.html#7:4
Can't bind to 'firstDayOfWeek' since it isn't a known property of 'dx-scheduler'.
1. If 'dx-scheduler' is an Angular component and it has 'firstDayOfWeek' input, then verify that it is part of this module.
2. If 'dx-scheduler' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '#NgModule.schemas' of this component. ("
[views]="['agenda','workWeek']"
currentView="workWeek"
[ERROR ->][firstDayOfWeek]="1"
[startDayHour]="9"
[endDayHour]="19"
"): ng:///AppModule/CalendrierComponent.html#9:4
Can't bind to 'startDayHour' since it isn't a known property of 'dx-scheduler'.
1. If 'dx-scheduler' is an Angular component and it has 'startDayHour' input, then verify that it is part of this module.
2. If 'dx-scheduler' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '#NgModule.schemas' of this component. ("
currentView="workWeek"
[firstDayOfWeek]="1"
[ERROR ->][startDayHour]="9"
[endDayHour]="19"
[resources]="resourcesData"
"): ng:///AppModule/CalendrierComponent.html#10:4
Can't bind to 'endDayHour' since it isn't a known property of 'dx-scheduler'.
1. If 'dx-scheduler' is an Angular component and it has 'endDayHour' input, then verify that it is part of this module.
2. If 'dx-scheduler' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '#NgModule.schemas' of this component. ("
[firstDayOfWeek]="1"
[startDayHour]="9"
[ERROR ->][endDayHour]="19"
[resources]="resourcesData"
></dx-scheduler>
"): ng:///AppModule/CalendrierComponent.html#11:4
Can't bind to 'resources' since it isn't a known property of 'dx-scheduler'.
1. If 'dx-scheduler' is an Angular component and it has 'resources' input, then verify that it is part of this module.
2. If 'dx-scheduler' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '#NgModule.schemas' of this component. ("
[startDayHour]="9"
[endDayHour]="19"
[ERROR ->][resources]="resourcesData"
></dx-scheduler>
"): ng:///AppModule/CalendrierComponent.html#12:4
'dx-scheduler' is not a known element:
1. If 'dx-scheduler' is an Angular component, then verify that it is part of this module.
2. If 'dx-scheduler' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<dx-scheduler
style="height: 100%; display: block"
[dataSource]="appointmentsData"
"): ng:///AppModule/CalendrierComponent.html#0:0
at syntaxError (http://localhost:4200/vendor.bundle.js:260856:34)
at TemplateParser.webpackJsonp.../../../compiler/#angular/compiler.es5.js.TemplateParser.parse (http://localhost:4200/vendor.bundle.js:271969:19)
at JitCompiler.webpackJsonp.../../../compiler/#angular/compiler.es5.js.JitCompiler._compileTemplate (http://localhost:4200/vendor.bundle.js:286019:39)
at http://localhost:4200/vendor.bundle.js:285939:62
at Set.forEach (native)
at JitCompiler.webpackJsonp.../../../compiler/#angular/compiler.es5.js.JitCompiler._compileComponents (http://localhost:4200/vendor.bundle.js:285939:19)
at http://localhost:4200/vendor.bundle.js:285826:19
at Object.then (http://localhost:4200/vendor.bundle.js:260846:148)
at JitCompiler.webpackJsonp.../../../compiler/#angular/compiler.es5.js.JitCompiler._compileModuleAndComponents (http://localhost:4200/vendor.bundle.js:285825:26)
at JitCompiler.webpackJsonp.../../../compiler/#angular/compiler.es5.js.JitCompiler.compileModuleAsync (http://localhost:4200/vendor.bundle.js:285754:37)
could you take a look please ?

Answer 1

You are using the wrong field names from your class, they are appointmentsData and resourcesData:
<dx-scheduler
style="height: 100%; display: block"
[currentDate]="currentDate"
startDateExpr="StartDate"
endDateExpr="EndDate"
textExpr="Text"
[views]="['agenda','workWeek']"
currentView="workWeek"
[firstDayOfWeek]="1"
[startDayHour]="9"
[endDayHour]="19"
[dataSource]="appointmentsData" // <-- here
[resources]="resourcesData" // <-- and here
></dx-scheduler>

Answer 2

You need to import the DxDataGrid module into your module:
#NgModule({
imports: [
CommonModule,
DxDataGridModule
],
...