Skip to content

Commit

Permalink
[update] integration guides / minor fix
Browse files Browse the repository at this point in the history
  • Loading branch information
serhiipylypchuk1991 committed Sep 22, 2024
1 parent 2a50846 commit 4baa84c
Show file tree
Hide file tree
Showing 5 changed files with 17 additions and 11 deletions.
10 changes: 5 additions & 5 deletions docs/guides/integration_with_angular.md
Original file line number Diff line number Diff line change
Expand Up @@ -53,11 +53,11 @@ Now you should get the DHTMLX Event Calendar source code. First of all, stop the

### Step 1. Package installation

Download the [**trial Event Calendar package**](/how_to_start/#installing-event-calendar-via-npm-and-yarn) and follow steps mentioned in the README file. Note that trial Event Calendar is available 30 days only.
Download the [**trial Event Calendar package**](/how_to_start/#installing-trial-event-calendar-via-npm-and-yarn) and follow steps mentioned in the README file. Note that trial Event Calendar is available 30 days only.

### Step 2. Component creation

Now you need to create an Angular component, to add Event Calendar into the application. Create the **event-calendar** folder in the **src/app/** directory, add a new file into it and name it **event-calendar.component.ts**. Then complete the steps described below.
Now you need to create an Angular component, to add Event Calendar into the application. Create the ***event-calendar*** folder in the ***src/app/*** directory, add a new file into it and name it ***event-calendar.component.ts***. Then complete the steps described below.

#### Import source files

Expand Down Expand Up @@ -111,7 +111,7 @@ 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:
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 */
Expand All @@ -133,7 +133,7 @@ body {

#### 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:
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:

~~~jsx title="data.ts"
export function getData() {
Expand Down Expand Up @@ -242,7 +242,7 @@ Now the Event Calendar component is ready to use. When the element will be added

When a user makes some action in the Event Calendar, it invokes an event. You can use these events to detect the action and run the desired code for it. See the [full list of events](/api/overview/events_overview/).

Open the **event-calendar.component.ts** file and complete the `ngOnInit()` method as in:
Open the ***event-calendar.component.ts*** file and complete the `ngOnInit()` method as in:

~~~jsx {7-9} title="event-calendar.component.ts"
// ...
Expand Down
4 changes: 2 additions & 2 deletions docs/guides/integration_with_react.md
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ Now you should get the DHTMLX Event Calendar source code. First of all, stop the

### Step 1. Package installation

Download the [**trial Event Calendar package**](/how_to_start/#installing-event-calendar-via-npm-and-yarn) and follow steps mentioned in the README file. Note that trial Event Calendar is available 30 days only.
Download the [**trial Event Calendar package**](/how_to_start/#installing-trial-event-calendar-via-npm-and-yarn) and follow steps mentioned in the README file. Note that trial Event Calendar is available 30 days only.

### Step 2. Component creation

Expand All @@ -73,7 +73,7 @@ import { EventCalendar } from 'dhx-eventcalendar-package';
import 'dhx-eventcalendar-package/dist/event-calendar.css';
~~~

Note that depending on the used package, the source files can be minified. In this case make sure that you are importing the CSS file as **event-calendar.min.css**.
Note that depending on the used package, the source files can be minified. In this case make sure that you are importing the CSS file as ***event-calendar.min.css***.

- if you use the trial version of Event Calendar, specify the following paths:

Expand Down
4 changes: 2 additions & 2 deletions docs/guides/integration_with_svelte.md
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ Now you should get the DHTMLX Event Calendar source code. First of all, stop the

### Step 1. Package installation

Download the [**trial Event Calendar package**](/how_to_start/#installing-event-calendar-via-npm-and-yarn) and follow steps mentioned in the README file. Note that trial Event Calendar is available 30 days only.
Download the [**trial Event Calendar package**](/how_to_start/#installing-trial-event-calendar-via-npm-and-yarn) and follow steps mentioned in the README file. Note that trial Event Calendar is available 30 days only.

### Step 2. Component creation

Expand All @@ -77,7 +77,7 @@ import 'dhx-eventcalendar-package/dist/event-calendar.css';
</script>
~~~

Note that depending on the used package, the source files can be minified. In this case make sure that you are importing the CSS file as **event-calendar.min.css**.
Note that depending on the used package, the source files can be minified. In this case make sure that you are importing the CSS file as ***event-calendar.min.css***.

- if you use the trial version of Event Calendar, specify the following paths:

Expand Down
4 changes: 2 additions & 2 deletions docs/guides/integration_with_vue.md
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ Now you should get the DHTMLX Event Calendar source code. First of all, stop the

### Step 1. Package installation

Download the [**trial Event Calendar package**](/how_to_start/#installing-event-calendar-via-npm-and-yarn) and follow steps mentioned in the README file. Note that trial Event Calendar is available 30 days only.
Download the [**trial Event Calendar package**](/how_to_start/#installing-trial-event-calendar-via-npm-and-yarn) and follow steps mentioned in the README file. Note that trial Event Calendar is available 30 days only.

### Step 2. Component creation

Expand All @@ -79,7 +79,7 @@ import 'dhx-eventcalendar-package/dist/event-calendar.css';
</script>
~~~

Note that depending on the used package, the source files can be minified. In this case make sure that you are importing the CSS file as **event-calendar.min.css**.
Note that depending on the used package, the source files can be minified. In this case make sure that you are importing the CSS file as ***event-calendar.min.css***.

- if you use the trial version of Event Calendar, specify the following paths:

Expand Down
6 changes: 6 additions & 0 deletions docs/how_to_start.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ This clear and comprehensive tutorial will guide your through the steps you need

## Step 1. Including source files

[Download the package](https://dhtmlx.com/docs/products/dhtmlxEventCalendar/download.shtml) and unpack it into the folder of your project.

Start from creating an HTML file and call it *index.html*. Then proceed to include Event Calendar source files into the created file.

There are two necessary files:
Expand Down Expand Up @@ -37,6 +39,10 @@ There are two necessary files:

You can import JavaScript Event Calendar into your project using `yarn` or `npm` package manager.

:::info
If you want to integrate Event Calendar into React, Angular, Svelte or Vue projects, refer to the corresponding [**integration guides**](/category/backend-and-frameworks-integration/) for more information.
:::

#### Installing trial Event Calendar via npm and yarn

:::info
Expand Down

0 comments on commit 4baa84c

Please sign in to comment.