Bonjour,
Lorsque j'essaie d'intégrer angular_jqxscheduler, je reçois l'erreur : “Cannot read property ‘dataAdapter’ of undefined”.
Voici mes fichiers :
//—————————————————————–
scheduler.component.ts
//—————————————————————–
//—————————————————————–
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79 /// <reference path=”../used/jqwidgets.d.ts” /> import { Component, ViewChild, AfterViewInit } from ‘@angular/core’; import { jqxSchedulerComponent } from ‘../used/angular_jqxscheduler’; @Component({ selector: ‘scheduler-app’, template: <jqxScheduler #schedulerReference></jqxScheduler> }) export class SchedulerComponent implements AfterViewInit { @ViewChild(‘schedulerReference’) scheduler: jqxSchedulerComponent; ngAfterViewInit(): void { this.scheduler.createComponent(this.schedulerSettings); this.scheduler.ensureAppointmentVisible(‘id1’); } generateAppointments(): any { let appointments = new Array(); let appointment1 = { id: “id1”, description: “George brings projector for presentations.”, location: “”, subject: “Quarterly Project Review Meeting”, calendar: “Room 1”, start: new Date(2016, 10, 23, 9, 0, 0), end: new Date(2016, 10, 23, 16, 0, 0) }; appointments.push(appointment1); return appointments; } source = { dataType: “array”, dataFields: [ { name: ‘id’, type: ‘string’ }, { name: ‘description’, type: ‘string’ }, { name: ‘location’, type: ‘string’ }, { name: ‘subject’, type: ‘string’ }, { name: ‘calendar’, type: ‘string’ }, { name: ‘start’, type: ‘date’ }, { name: ‘end’, type: ‘date’ } ], id: ‘id’, localData: this.generateAppointments() } dataAdapter = new $.jqx.dataAdapter(this.source); schedulerSettings: jqwidgets.SchedulerOptions = { date: new $.jqx.date(2016, 11, 23), width: 800, height: 600, source: this.dataAdapter, view: ‘weekView’, showLegend: true, appointmentDataFields: { from: “start”, to: “end”, id: “id”, description: “description”, location: “location”, subject: “subject”, resourceId: “calendar”, }, resources: { colorScheme: “scheme05”, dataField: “calendar”, source: new $.jqx.dataAdapter(this.source) }, views: [ ‘dayView’, ‘weekView’, ‘monthView’ ] }; }
components-routing.module.ts
//—————————————————————–
//————————————————
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26 import { NgModule } from ‘@angular/core’; import { Routes, RouterModule } from ‘@angular/router’; import { SchedulerComponent } from ‘./scheduler.component’; const routes: Routes = [ { path: ”, data: { title: ‘Components’ }, children: [ { path: ‘scheduler’, component: SchedulerComponent, data: { title: ‘Scheduler’ } }, ] } ]; @NgModule({ imports: [RouterModule.forChild(routes)], exports: [RouterModule] }) export class ComponentsRoutingModule {}
components.module.ts
//————————————————
//———————————————–
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18 import { NgModule } from ‘@angular/core’; import { ComponentsRoutingModule } from ‘./components-routing.module’; import { ModalModule } from ‘ng2-bootstrap/modal’; import { SchedulerComponent } from ‘./scheduler.component’; import { jqxSchedulerComponent } from “../used/angular_jqxscheduler”; @NgModule({ imports: [ ComponentsRoutingModule, ModalModule.forRoot(), TabsModule, ], declarations: [ SchedulerComponent, jqxSchedulerComponent ] }) export class ComponentsModule { }
app.component.ts
//———————————————–
//———————————————–
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7 import { Component } from ‘@angular/core’; @Component({ selector: ‘body’, template: ‘<router-outlet></router-outlet>’ }) export class AppComponent { }
app.module.ts
//———————————————–
//————————————————-
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23 import { NgModule } from ‘@angular/core’; import { BrowserModule } from ‘@angular/platform-browser’; import { LocationStrategy, HashLocationStrategy } from ‘@angular/common’; import { AppComponent } from ‘./app.component’; import { AppRoutingModule } from ‘./app.routing’; @NgModule({ imports: [ BrowserModule, AppRoutingModule, DropdownModule.forRoot(), TabsModule.forRoot(), ], declarations: [ AppComponent, ], providers: [{ provide: LocationStrategy, useClass: HashLocationStrategy }], bootstrap: [ AppComponent ] }) export class AppModule { }
app.routing.ts
//————————————————-
//——————————————————-
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29 import { NgModule } from ‘@angular/core’; import { Routes, RouterModule } from ‘@angular/router’; import { FullLayoutComponent } from ‘./layouts/full-layout.component’; export const routes: Routes = [ { path: ”, redirectTo: ‘home’, pathMatch: ‘full’, }, { path: ”, component: FullLayoutComponent, data: { title: ‘Accueil’ }, children: [ { path: ‘components’, loadChildren: ‘./components/components.module#ComponentsModule’ } ] } ]; @NgModule({ imports: [ RouterModule.forRoot(routes) ], exports: [ RouterModule ] }) export class AppRoutingModule {}
index.ts
//——————————————————-
//——————————————————-
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3 export * from ‘./app.component’; export * from ‘./app.module’;
main.ts
//——————————————————-
//——————————————————–
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5 import { platformBrowserDynamic } from ‘@angular/platform-browser-dynamic’; import { AppModule } from ‘./app.module’; const platform = platformBrowserDynamic(); platform.bootstrapModule(AppModule);
index.html
//——————————————————–
//———————————————-
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14 <!doctype html> <html> <head> <base href=”./”> <meta charset=”utf-8″> </head> <body> <script> window.__theme = ‘bs4’; </script> <!– App Loading… –> </body> </html>
main.ts
//———————————————–
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10 import ‘./polyfills.ts’; import { platformBrowserDynamic } from ‘@angular/platform-browser-dynamic’; import { enableProdMode } from ‘@angular/core’; import { environment } from ‘./environments/environment’; import { AppModule } from ‘./app/’; if (environment.production) { enableProdMode(); } platformBrowserDynamic().bootstrapModule(AppModule);
Partager