diff --git a/docs/guides/integration_with_angular.md b/docs/guides/integration_with_angular.md index 4758405..36683c2 100644 --- a/docs/guides/integration_with_angular.md +++ b/docs/guides/integration_with_angular.md @@ -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 @@ -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 */ @@ -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() { @@ -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" // ... diff --git a/docs/guides/integration_with_react.md b/docs/guides/integration_with_react.md index e343508..905575a 100644 --- a/docs/guides/integration_with_react.md +++ b/docs/guides/integration_with_react.md @@ -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 @@ -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: diff --git a/docs/guides/integration_with_svelte.md b/docs/guides/integration_with_svelte.md index 771fdc6..2b49021 100644 --- a/docs/guides/integration_with_svelte.md +++ b/docs/guides/integration_with_svelte.md @@ -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 @@ -77,7 +77,7 @@ 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: diff --git a/docs/guides/integration_with_vue.md b/docs/guides/integration_with_vue.md index 691a538..c4a5546 100644 --- a/docs/guides/integration_with_vue.md +++ b/docs/guides/integration_with_vue.md @@ -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 @@ -79,7 +79,7 @@ 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: diff --git a/docs/how_to_start.md b/docs/how_to_start.md index 3db9c95..56d23ed 100644 --- a/docs/how_to_start.md +++ b/docs/how_to_start.md @@ -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: @@ -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