[update] integration guides

Author: serhiipylypchuk1991

docs/guides/integration_with_angular.md

@@ -37,35 +37,35 @@ cd my-angular-event-calendar-app
 Install dependencies and start the dev server. For this, use the [**yarn**](https://yarnpkg.com/) package manager:
 
 ~~~json
-yarn install
+yarn
 yarn start
 ~~~
 
 The app should run on a localhost (for instance `http://localhost:3000`).
 
 ## Creating Event Calendar
 
-Now you should get the DHTMLX Event Calendar code. First of all, stop the app and proceed with installing the Event Calendar package.
+Now you should get the DHTMLX Event Calendar source code. First of all, stop the app and proceed with installing the Event Calendar package.
 
 ### 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.
 
 ### Step 2. Component creation
 
-Now you need to create a component, to add an 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
 
 Open the file and import Event Calendar source files. Note that:
 
-- if you use PRO version and install the Event Calendar package from a local folder, the imported paths look like this:
+- if you use PRO version and install the Event Calendar package from a local folder, the imported path looks like this:
 
 ~~~jsx
 import { EventCalendar } from 'dhx-eventcalendar-package';
 ~~~
 
-- if you use the trial version of Event Calendar, specify the following paths:
+- if you use the trial version of Event Calendar, specify the following path:
 
 ~~~jsx
 import { EventCalendar } from '@dhx/trial-eventcalendar';
@@ -149,8 +149,8 @@ import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation
 
 @Component({
     encapsulation: ViewEncapsulation.None,
-    selector: "event-calendar", // a template name used in the "app.component.ts" file as <event-calendar />
-    styleUrls: ["./event-calendar.component.css"], // include a css file
+    selector: "event-calendar", 
+    styleUrls: ["./event-calendar.component.css"],
     template: `<div #container class="widget"></div>`,
 })
 
@@ -160,15 +160,15 @@ export class EventCalendarComponent implements OnInit, OnDestroy {
     private _calendar!: EventCalendar;
 
     ngOnInit() {
-        const events = getData();
+        const events = getData(); // initialize data property
         this._calendar = new EventCalendar(this.calendar_container.nativeElement, {
             events, // apply event data
             date: new Date(2024, 5, 10),
         });
     }
 
     ngOnDestroy(): void {
-        this._calendar.destructor(); // destruct Event Calendar
+        this._calendar.destructor(); 
     }
 }
 ~~~
@@ -182,8 +182,8 @@ import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation
 
 @Component({
     encapsulation: ViewEncapsulation.None,
-    selector: "event-calendar", // a template name used in the "app.component.ts" file as <event-calendar />
-    styleUrls: ["./event-calendar.component.css"], // include a css file
+    selector: "event-calendar", 
+    styleUrls: ["./event-calendar.component.css"], 
     template: `<div #container class="widget"></div>`,
 })
 
@@ -203,14 +203,14 @@ export class EventCalendarComponent implements OnInit, OnDestroy {
     }
 
     ngOnDestroy(): void {
-        this._calendar.destructor(); // destruct Event Calendar
+        this._calendar.destructor(); 
     }
 }
 ~~~
 
-The `this._calendar.parse(data)` method provides data reloading on each applied change.
+The `parse(data)` method provides data reloading on each applied change.
 
-Now the Event Calendar component is ready. When the element will be added to the page, it will initialize the Event Calendar object with data. You can provide necessary configuration settings as well. Visit our [Event Calendar API docs](/api/overview/properties_overview/) to check the full list of available properties.
+Now the Event Calendar component is ready to use. When the element will be added to the page, it will initialize the Event Calendar with data. You can provide necessary configuration settings as well. Visit our [Event Calendar API docs](/api/overview/properties_overview/) to check the full list of available properties.
 
 #### Handling events
 

docs/guides/integration_with_react.md

@@ -18,15 +18,15 @@ DHTMLX Event Calendar is compatible with **React**. We have prepared code exampl
 Before you start to create a new project, install [**Vite**](https://vitejs.dev/) (optional) and [**Node.js**](https://nodejs.org/en/).
 :::
 
-You can create a basic **React** project or use **React with Vite**:
+You can create a basic **React** project or use **React with Vite**. Let's name the project as **my-react-event-calendar-app**:
 
 ~~~json
 npx create-vite my-react-event-calendar-app --template react
 ~~~
 
 ### Installation of dependencies
 
-Go to the app directory. Let's name the project as **my-react-event-calendar-app** and run:
+Go to the new created app directory:
 
 ~~~json
 cd my-react-event-calendar-app
@@ -37,8 +37,8 @@ Install dependencies and start the dev server. For this, use a package manager:
 - if you use [**yarn**](https://yarnpkg.com/), run the following commands:
 
 ~~~json
-yarn install
-yarn dev
+yarn
+yarn start
 ~~~
 
 - if you use [**npm**](https://www.npmjs.com/), run the following commands:
@@ -52,7 +52,7 @@ The app should run on a localhost (for instance `http://localhost:3000`).
 
 ## Creating Event Calendar
 
-Now you should get the DHTMLX Event Calendar code. First of all, stop the app and proceed with installing the Event Calendar package.
+Now you should get the DHTMLX Event Calendar source code. First of all, stop the app and proceed with installing the Event Calendar package.
 
 ### Step 1. Package installation
 
@@ -93,7 +93,7 @@ import { useEffect, useRef } from "react";
 import { EventCalendar } from "@dhx/trial-eventcalendar";
 import "@dhx/trial-eventcalendar/dist/event-calendar.css";
 
-export default function CalendarComponent(props) {
+export default function EventCalendarComponent(props) {
     let container = useRef(); // initialize container for Event Calendar
 
     useEffect(() => {
@@ -146,7 +146,7 @@ export function getData() {
 
 Then open the ***App.js*** file and import data. After this you can pass data into the new created `<EventCalendar/>` components as **props**:
 
-~~~jsx {2,5-6} title="App.jsx"
+~~~jsx {2,5-6} title="App.js"
 import EventCalendar from "./EventCalendar";
 import { getData } from "./data";
 
@@ -165,12 +165,12 @@ import { useEffect, useRef } from "react";
 import { EventCalendar } from "@dhx/trial-eventcalendar";
 import "@dhx/trial-eventcalendar/dist/event-calendar.css";
 
-export default function CalendarComponent(props) {
+export default function EventCalendarComponent(props) {
     let container = useRef(); 
 
     useEffect(() => {
         const calendar = new EventCalendar(container.current, {
-            events: props.events,
+            events: props.events, // apply event data
             date: props.date,
             // other configuration properties
         });
@@ -191,7 +191,7 @@ import { useEffect, useRef } from "react";
 import { EventCalendar } from "@dhx/trial-eventcalendar";
 import "@dhx/trial-eventcalendar/dist/event-calendar.css";
 
-export default function CalendarComponent(props) {
+export default function EventCalendarComponent(props) {
     let container = useRef(); 
 
     let events = props.events;
@@ -211,9 +211,9 @@ export default function CalendarComponent(props) {
 }
 ~~~
 
-The `calendar.parse(data)` method provides data reloading on each applied change.
+The `parse(data)` method provides data reloading on each applied change.
 
-Now the Event Calendar component is ready. When the element will be added to the page, it will initialize the Event Calendar object with data. You can provide necessary configuration settings as well. Visit our [Event Calendar API docs](/api/overview/properties_overview/) to check the full list of available properties.
+Now the Event Calendar component is ready. When the element will be added to the page, it will initialize the Event Calendar with data. You can provide necessary configuration settings as well. Visit our [Event Calendar API docs](/api/overview/properties_overview/) to check the full list of available properties.
 
 #### Handling events
 
@@ -239,9 +239,9 @@ useEffect(() => {
 
 ### Step 3. Adding Event Calendar into the app
 
-To add the component into the app, open the **App.jsx** file and replace the default code with the following one:
+To add the component into the app, open the **App.js** file and replace the default code with the following one:
 
-~~~jsx title="App.jsx"
+~~~jsx title="App.js"
 import EventCalendar from "./EventCalendar";
 import { getData } from "./data";