Skip to content

Commit 6d5f05b

Browse files
[update] Angular integration guide (#23)
1 parent a12e56f commit 6d5f05b

File tree

1 file changed

+29
-2
lines changed

1 file changed

+29
-2
lines changed

docs/guides/integration_with_angular.md

Lines changed: 29 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,10 @@ Create a new **my-angular-event-calendar-app** project using Angular CLI. Run th
2424
ng new my-angular-event-calendar-app
2525
~~~
2626

27+
:::note
28+
If you want to follow this guide, disable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering) when creating new Angular app!
29+
:::
30+
2731
The command above installs all the necessary tools, so you don't need to run any additional commands.
2832

2933
### Installation of dependencies
@@ -105,6 +109,30 @@ export class EventCalendarComponent implements OnInit, OnDestroy {
105109
}
106110
~~~
107111

112+
#### Adding styles
113+
114+
To display Event Calendar correctly, you need to provide the corresponding styles. For this purpose, you can create the **event-calendar.component.css** file in the **src/app/event-calendar/** directory and specify important styles for Event Calendar and its container:
115+
116+
~~~css title="event-calendar.component.css"
117+
/* import Event Calendar styles */
118+
@import "@dhx/trial-eventcalendar/dist/event-calendar.css";
119+
120+
/* specify styles for initial page */
121+
html,
122+
body {
123+
margin: 0;
124+
padding: 0;
125+
height: 100%;
126+
}
127+
128+
/* specify styles for the Event Calendar container */
129+
.widget {
130+
position: relative;
131+
width: 100%;
132+
height: 100%;
133+
}
134+
~~~
135+
108136
#### Loading data
109137

110138
To add data into Event Calendar, you need to provide a data set. You can create the **data.ts** file in the **src/app/event-calendar/** directory and add some data into it:
@@ -184,7 +212,7 @@ import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation
184212
encapsulation: ViewEncapsulation.None,
185213
selector: "event-calendar",
186214
styleUrls: ["./event-calendar.component.css"],
187-
template: `<div #container class="widget"></div>`,
215+
template: `<div #container class="widget"></div>`
188216
})
189217

190218
export class EventCalendarComponent implements OnInit, OnDestroy {
@@ -263,7 +291,6 @@ import { EventCalendarComponent } from "./event-calendar/event-calendar.componen
263291
@NgModule({
264292
declarations: [AppComponent, EventCalendarComponent],
265293
imports: [BrowserModule],
266-
providers: [],
267294
bootstrap: [AppComponent]
268295
})
269296
export class AppModule {}

0 commit comments

Comments
 (0)