Skip to content

Commit

Permalink
[update] Angular integration guide (#23)
Browse files Browse the repository at this point in the history
  • Loading branch information
serhiipylypchuk1991 authored Aug 25, 2024
1 parent a12e56f commit 6d5f05b
Showing 1 changed file with 29 additions and 2 deletions.
31 changes: 29 additions & 2 deletions docs/guides/integration_with_angular.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,10 @@ Create a new **my-angular-event-calendar-app** project using Angular CLI. Run th
ng new my-angular-event-calendar-app
~~~

:::note
If you want to follow this guide, disable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering) when creating new Angular app!
:::

The command above installs all the necessary tools, so you don't need to run any additional commands.

### Installation of dependencies
Expand Down Expand Up @@ -105,6 +109,30 @@ export class EventCalendarComponent implements OnInit, OnDestroy {
}
~~~

#### Adding styles

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:

~~~css title="event-calendar.component.css"
/* import Event Calendar styles */
@import "@dhx/trial-eventcalendar/dist/event-calendar.css";

/* specify styles for initial page */
html,
body {
margin: 0;
padding: 0;
height: 100%;
}

/* specify styles for the Event Calendar container */
.widget {
position: relative;
width: 100%;
height: 100%;
}
~~~

#### Loading data

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:
Expand Down Expand Up @@ -184,7 +212,7 @@ import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation
encapsulation: ViewEncapsulation.None,
selector: "event-calendar",
styleUrls: ["./event-calendar.component.css"],
template: `<div #container class="widget"></div>`,
template: `<div #container class="widget"></div>`
})

export class EventCalendarComponent implements OnInit, OnDestroy {
Expand Down Expand Up @@ -263,7 +291,6 @@ import { EventCalendarComponent } from "./event-calendar/event-calendar.componen
@NgModule({
declarations: [AppComponent, EventCalendarComponent],
imports: [BrowserModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
Expand Down

0 comments on commit 6d5f05b

Please sign in to comment.