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