Angular4和Devextreme调度程序

时间：2017-07-12 15:08:31

标签： node.js angular devexpress scheduler devextreme

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

  

npm install --save devextreme devextreme-angular

以下是我在项目中获得的内容：

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>

当我使用

启动项目时
  

ng serve

但是我有一个问题...我的日历是空白的......你是否知道我怎样才能看到＆＃34; calendrier.service.ts＆＃34;

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

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)
你能看一下吗？

2 个答案:

答案 0 :(得分：3)

您使用了班级中错误的字段名称，它们是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>

答案 1 :(得分：1)

您需要将DxDataGrid模块导入模块：

@NgModule({
  imports: [
      CommonModule,
      DxDataGridModule
  ],
...
相关问题
最新问题