Node.js Angular4和Devextreme调度程序_Node.js_Angular_Devexpress_Scheduler_Devextreme

Node.js Angular4和Devextreme调度程序

node.js angular devexpress

Node.js Angular4和Devextreme调度程序,node.js,angular,devexpress,scheduler,devextreme,Node.js,Angular,Devexpress,Scheduler,Devextreme,我尝试在我的项目中使用devexpress的调度器插件。使用angular Cli创建项目并使用以下命令安装devexpress插件后： npm安装--保存devextreme devextreme 以下是我在项目中得到的： calendrier.component.css /deep/ .options { padding: 20px; background-color: #f5f5f5; margin-top: 20px; } /deep/ .caption {

我尝试在我的项目中使用devexpress的调度器插件。使用angular Cli创建项目并使用以下命令安装devexpress插件后：

npm安装--保存devextreme devextreme

以下是我在项目中得到的：

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>

压延机

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>


牛角板
加载。。。

当我使用

ng发球

但是我有个问题。。。我的日历是空的。。。你知道我怎么看“Calendarrier.service.ts”上的活动吗

以下是我的控制台上的内容：

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)

compiler.es5.js:1689未捕获错误：模板分析错误：
无法绑定到“dataSource”，因为它不是“dx scheduler”的已知属性。
1.如果“dx调度器”是一个角度组件，并且具有“数据源”输入，则验证它是否是此模块的一部分。
2.如果“dx scheduler”是一个Web组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到此组件的“@NgModule.schemas”以抑制此消息。
3.若要允许任何属性，请将“无错误模式”添加到此组件的“@NgModule.schemas”。（“][dataSource]=“任命数据”
[currentDate]=“currentDate”
startDateExpr=“StartDate”
“”：ng:///AppModule/CalendarierComponent。html@2:4
无法绑定到“currentDate”，因为它不是“dx调度器”的已知属性。
1.如果“dx调度程序”是一个角度组件，并且具有“currentDate”输入，则验证它是否是此模块的一部分。
2.如果“dx scheduler”是一个Web组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到此组件的“@NgModule.schemas”以抑制此消息。
3.若要允许任何属性，请将“无错误模式”添加到此组件的“@NgModule.schemas”。("
style=“高度：100%；显示：块”
[dataSource]=“任命数据”
[错误->][currentDate]=“currentDate”
startDateExpr=“StartDate”
endDateExpr=“EndDate”
“”：ng:///AppModule/CalendarierComponent。html@3:4
无法绑定到“视图”，因为它不是“dx调度器”的已知属性。
1.如果“dx调度程序”是一个角度组件，并且具有“视图”输入，则验证它是否是此模块的一部分。
2.如果“dx scheduler”是一个Web组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到此组件的“@NgModule.schemas”以抑制此消息。
3.若要允许任何属性，请将“无错误模式”添加到此组件的“@NgModule.schemas”。("
endDateExpr=“EndDate”
textExpr=“Text”
[错误->][视图]=“[‘议程’、‘工作周’]”
currentView=“工作周”
[firstDayOfWeek]=“1”
“”：ng:///AppModule/CalendarierComponent。html@7:4
无法绑定到“firstDayOfWeek”，因为它不是“dx调度器”的已知属性。
1.如果“dx调度程序”是一个角度组件，并且具有“firstDayOfWeek”输入，则验证它是否是此模块的一部分。
2.如果“dx scheduler”是一个Web组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到此组件的“@NgModule.schemas”以抑制此消息。
3.若要允许任何属性，请将“无错误模式”添加到此组件的“@NgModule.schemas”。("
[视图]=“议程”、“工作周”
currentView=“工作周”
[错误->][firstDayOfWeek]=“1”
[startDayHour]=“9”
[endDayHour]=“19”
“”：ng:///AppModule/CalendarierComponent。html@9:4
无法绑定到“startDayHour”，因为它不是“dx调度器”的已知属性。
1.如果“dx调度程序”是一个角度组件，并且具有“startDayHour”输入，则验证它是否是此模块的一部分。
2.如果“dx scheduler”是一个Web组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到此组件的“@NgModule.schemas”以抑制此消息。
3.若要允许任何属性，请将“无错误模式”添加到此组件的“@NgModule.schemas”。("
currentView=“工作周”
[firstDayOfWeek]=“1”
[错误->][startDayHour]=“9”
[endDayHour]=“19”
[资源]=“资源数据”
“”：ng:///AppModule/CalendarierComponent。html@10:4
无法绑定到“endDayHour”，因为它不是“dx调度器”的已知属性。
1.如果“dx调度程序”是一个角度组件，并且具有“endDayHour”输入，则验证它是否是此模块的一部分。
2.如果“dx scheduler”是一个Web组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到此组件的“@NgModule.schemas”以抑制此消息。
3.若要允许任何属性，请将“无错误模式”添加到此组件的“@NgModule.schemas”。("
[firstDayOfWeek]=“1”
[startDayHour]=“9”
[错误->][endDayHour]=“19”
[资源]=“资源数据”
>
“”：ng:///AppModule/CalendarierComponent。html@11:4
无法绑定到“资源”，因为它不是“dx调度程序”的已知属性。
1.如果“dx调度程序”是一个角度组件，并且具有“资源”输入，则验证它是否是此模块的一部分。
2.如果“dx scheduler”是一个Web组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到此组件的“@NgModule.schemas”以抑制此消息。
3.若要允许任何属性，请将“无错误模式”添加到此组件的“@NgModule.schemas”。("
[startDayHour]=“9”
[endDayHour]=“19”
[错误->][资源]=“资源数据”
>
“”：ng:///AppModule/CalendarierComponent。html@12:4
“dx计划程序”不是已知元素：
1.如果“dx调度程序”是一个角度组件，则验证它是否是此模块的一部分。
2.如果“dx scheduler”是一个Web组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到此组件的“@NgModule.schemas”以抑制此消息。（“[ERROR->]您使用了类中错误的字段名，它们是appointmentsData
和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>

您使用了类中错误的字段名，它们是任命数据
和资源数据
：
<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>

您需要将DxDataGrid模块导入到您的模块中：
@NgModule({
  imports: [
      CommonModule,
      DxDataGridModule
  ],
...

您需要将DxDataGrid模块导入到您的模块中：
@NgModule({
  imports: [
      CommonModule,
      DxDataGridModule
  ],
...

谢谢你的评论，我已经更新了我的问题。我的控制台中有一些错误。你知道它们来自哪里吗