Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[update] integration guides / minor fix #28

Merged
merged 1 commit into from
Sep 23, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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
Loading