Rewrite guides using skills

docs/guides/initialization.md

@@ -6,42 +6,48 @@ description: You can learn about the initialization in the documentation of the
 
 # Initialization
 
-This guide will give you detailed instructions on how to create Booking on a page to enrich your application with rich features of this tool. Take the following steps to get a ready-to-use component:
+This guide walks you through creating a Booking instance on a page. Take the following steps to get a working component:
 
-1. [Include the Booking source files on a page](#including-source-files).
-2. [Create a container for Booking](#creating-container).
-3. [Initialize Booking with a constructor](#initializing-booking).
+1. [Include the Booking source files](#include-source-files).
+2. [Create a container](#create-a-container).
+3. [Initialize Booking with the constructor](#initialize-booking).
 
-## Including source files
+## Include source files
 
-[Download the package](https://dhtmlx.com/docs/products/dhtmlxBooking/) and unpack it into a folder of your project.
+The Booking widget ships as two files that you load on the page.
 
-To create Booking, you need to include 2 source files on your page:
+[Download the package](https://dhtmlx.com/docs/products/dhtmlxBooking/) and unpack it into a folder of your project. Add the following files to your page:
 
-- *booking.js*
-- *booking.css*
+- *booking.js* — Booking source code
+- *booking.css* — Booking stylesheet
 
-Make sure that you set correct relative paths to the source files:
+Set correct relative paths to the source files.
+
+The following code snippet includes the Booking files from a *dist/* folder:
 
 ~~~html title="index.html"
 <script type="text/javascript" src="./dist/booking.js"></script>  
 <link rel="stylesheet" href="./dist/booking.css">
 ~~~
 
-## Creating container
+## Create a container
+
+Add an HTML element that hosts the Booking widget and assign it an ID, for example *root*.
 
-Add a container for Booking and give it an ID, for example *"root"*:
+The following code snippet creates a container with the ID *root*:
 
 ~~~jsx title="index.html"
 <div id="root"></div>
 ~~~
 
-## Initializing Booking
+## Initialize Booking
+
+Call the `booking.Booking` constructor with two parameters:
 
-Initialize Booking using the **booking.Booking** constructor. It takes two parameters:
+- container — the selector or ID of the HTML container that hosts the widget
+- config — an object with configuration properties (see [Configuration properties](#configuration-properties))
 
-- an HTML container (the ID of the HTML container)
-- an object with configuration properties. [See the full list here](#configuration-properties)
+The following code snippet initializes Booking inside the `#root` container:
 
 ~~~jsx title="index.html"
 // create Booking
@@ -53,11 +59,11 @@ new booking.Booking("#root", {
 ### Configuration properties
 
 :::info
-The full list of properties to configure **Booking** can be found [**here**](api/overview/booking-properties-overview.md).
+For the full list of properties used to configure Booking, see the [Properties overview](/api/overview/booking-properties-overview).
 :::
 
 ## Example
 
-In this snippet you can see how to initialize **JavaScript Booking** with initial settings:
+The snippet below initializes Booking with a set of initial properties:
 
 <iframe src="https://snippet.dhtmlx.com/6it4ohez?mode=result" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>

docs/guides/integration-with-angular.md

@@ -6,136 +6,155 @@ description: You can learn about the integration with Angular in the documentati
 
 # Integration with Angular
 
+DHTMLX Booking integrates with Angular through a custom component that wraps the widget constructor. This guide walks you through scaffolding a new Angular project, installing Booking, and rendering the widget with data and events. For the complete reference implementation, see the [Angular example on GitHub](https://github.com/DHTMLX/angular-booking-demo).
+
 :::tip
-You should be familiar with basic concepts and patterns of **Angular** before reading this documentation. To refresh your knowledge, please refer to the [**Angular documentation**](https://v17.angular.io/docs).
+This guide assumes familiarity with Angular core concepts. For an introduction, see the [Angular documentation](https://v17.angular.io/docs).
 :::
 
-DHTMLX Booking is compatible with **Angular**. We have prepared code examples on how to use DHTMLX Booking with **Angular**. For more information, refer to the corresponding [**Example on GitHub**](https://github.com/DHTMLX/angular-booking-demo).
+## Create a project
 
-## Creating a project
+Scaffold a new Angular app with Angular CLI before adding the Booking integration.
 
 :::info
-Before you start to create a new project, install [**Angular CLI**](https://v17.angular.io/cli) and [**Node.js**](https://nodejs.org/en/).
+Install [Angular CLI](https://v17.angular.io/cli) and [Node.js](https://nodejs.org/en/) before you start.
 :::
 
-Create a new **my-angular-booking-app** project using Angular CLI. Run the following command for this purpose:
+The following command creates a new *my-angular-booking-app* project:
 
 ~~~json
 ng new my-angular-booking-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!
+Disable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering) when prompted by the CLI. The Booking widget mounts to the DOM on the client side.
 :::
 
-The command above installs all the necessary tools, so you don't need to run any additional commands.
+The command installs all necessary tools. No additional commands are required.
+
+### Install dependencies
 
-### Installation of dependencies
+Switch to the project directory.
 
-Go to the new created app directory:
+The following command opens the newly created app folder:
 
 ~~~json
 cd my-angular-booking-app
 ~~~
 
-Install dependencies and start the dev server. For this, use the [**yarn**](https://yarnpkg.com/) package manager:
+Install the dependencies and start the dev server with the [yarn](https://yarnpkg.com/) package manager.
+
+The following commands install dependencies and launch the dev server:
 
 ~~~json
 yarn
 yarn start
 ~~~
 
-The app should run on a localhost (for instance `http://localhost:3000`).
+The app runs on a localhost, for example *http://localhost:3000*.
+
+## Add Booking to the app
 
-## Creating Booking
+Stop the dev server before installing the Booking package, then create an Angular component that wraps the widget.
 
-Now you should get the DHTMLX Booking source code. First of all, stop the app and proceed with installing the Booking package.
+### Step 1. Install the package
 
-### Step 1. Package installation
+Download the [trial Booking package](/how-to-start/#installing-trial-booking-via-npm-or-yarn) and follow the steps in the package README. The trial version stays active for 30 days.
 
-Download the [**trial Booking package**](/how-to-start/#installing-trial-booking-via-npm-or-yarn) and follow steps mentioned in the README file. Note that trial Booking is available 30 days only.
-
-### Step 2. Component creation
+### Step 2. Create the Booking component
 
-Now you need to create an Angular component, to add Booking into the application. Create  the ***booking*** folder in the ***src/app/*** directory, add a new file into it and name it ***booking.component.ts***. Then complete the steps described below.
+Create a *booking* folder in the *src/app/* directory and add a *booking.component.ts* file inside it. Complete the steps below to wire the widget.
 
-#### Import source files
+#### Import the source files
 
-Open the file and import Booking source files. Note that:
+Import the Booking class with the path that matches your distribution:
 
-- if you use PRO version and install the Booking package from a local folder, the imported path looks like this:
+- *dhx-booking-package* — PRO version installed from a local folder
+- *@dhx/trial-booking* — trial version
+
+The following code snippet imports Booking from the PRO package:
 
 ~~~jsx
 import { Booking } from 'dhx-booking-package';
 ~~~
 
-- if you use the trial version of Booking, specify the following path:
+The following code snippet imports Booking from the trial package:
 
 ~~~jsx
 import { Booking } from '@dhx/trial-booking';
 ~~~
 
 :::info
-In this tutorial you can see how to configure the **trial** version of Booking.
+This tutorial uses the trial version of Booking.
 :::
 
 #### Set the container and initialize Booking
 
-To display Booking on the page, you need to set the container to render the component inside and initialize Booking using the corresponding constructor:
+Define the host container in the component template and instantiate Booking in `ngOnInit()`. Call [`destructor()`](#) in `ngOnDestroy()` to unmount the widget when Angular removes the component.
+
+The following code snippet declares a Booking component with a container element and lifecycle hooks:
 
 ~~~jsx {1,8,12-13,18-19} title="booking.component.ts"
 import { Booking } from '@dhx/trial-booking';
 import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation } from '@angular/core';
 
 @Component({
     encapsulation: ViewEncapsulation.None,
-    selector: "booking", // a template name used in the "app.component.ts" file as <booking />
-    styleUrls: ["./booking.component.css"], // include a css file
+    selector: "booking", // used in app.component.ts as <booking />
+    styleUrls: ["./booking.component.css"],
     template: `<div #container class="widget"></div>`,
 })
 
 export class BookingComponent implements OnInit, OnDestroy {
-    // initialize container for Booking
+    // host container for Booking
     @ViewChild('container', { static: true }) booking_container!: ElementRef;
 
     private _booking!: Booking;
 
     ngOnInit() {
-        // initialize the Booking component
+        // create the Booking instance
         this._booking = new Booking(this.booking_container.nativeElement, {});
     }
 
     ngOnDestroy(): void {
-        this._booking.destructor(); // destruct Booking
+        this._booking.destructor(); // unmount Booking
     }
 }
 ~~~
 
-#### Adding styles
+#### Add the styles
+
+Booking requires both the widget stylesheet and a sized container.
 
-To display Booking correctly, you need to provide the corresponding styles. For this purpose, you can create the ***booking.component.css*** file in the **src/app/booking/** directory and specify important styles for Booking and its container:
+Create a *booking.component.css* file in the *src/app/booking/* directory.
+
+The following code snippet imports the Booking stylesheet and sets full height for the page and the widget container:
 
 ~~~css title="booking.component.css"
 /* import Booking styles */
 @import "@dhx/trial-booking/dist/booking.css";
 
-/* specify styles for initial page */
+/* page styles */
 html,
 body {
     margin: 0;
     padding: 0;
     height: 100%;
 }
 
-/* specify styles for the Booking container */
+/* Booking container */
 .widget {
     height: 100%;
 }
 ~~~
 
-#### Loading data
+#### Load data
+
+To load card data into Booking, prepare a dataset matching the [`data`](/api/config/booking-data) property. For the full data format and loading scenarios, see the [Loading data](/guides/loading-data) guide.
 
-To add data into Booking, you need to provide a data set. You can create the ***data.ts*** file in the ***src/app/booking/*** directory and add some data into it:
+Create a *data.ts* file in the *src/app/booking/* directory.
+
+The following code snippet defines a `getData()` helper that returns a sample dataset:
 
 ~~~jsx title="data.ts"
 export function getData() : any {
@@ -218,7 +237,9 @@ export function getData() : any {
 }
 ~~~
 
-Then open the ***booking.component.ts*** file. Import the file with data and specify the corresponding data properties to the configuration object of Booking within the `ngOnInit()` method, as shown below.
+Open *booking.component.ts*, import the dataset, and pass it to the Booking configuration inside `ngOnInit()`.
+
+The following code snippet wires `getData()` into the Booking constructor:
 
 ~~~jsx {2,18,20} title="booking.component.ts"
 import { Booking } from '@dhx/trial-booking';
@@ -238,7 +259,7 @@ export class BookingComponent implements OnInit, OnDestroy {
     private _booking!: Booking;
 
     ngOnInit() {
-        const data = getData(); // initialize data property
+        const data = getData(); // load the dataset
         this._booking = new Booking(this.booking_container.nativeElement, {
             data
         });
@@ -250,22 +271,24 @@ export class BookingComponent implements OnInit, OnDestroy {
 }
 ~~~
 
-Now the Booking component is ready to use. When the element will be added to the page, it will initialize the Booking with data. You can provide necessary configuration settings as well. Visit our [Booking API docs](/api/overview/booking-properties-overview/) to check the full list of available properties.
+The Booking component now renders with the loaded data. To customize the widget further, pass extra configuration properties — see the full list in the [Properties overview](/api/overview/booking-properties-overview/).
 
-#### Handling events
+#### Handle events
 
-When a user makes some action in the Booking, 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/booking-events-overview/).
+A user action in the widget triggers an event. Subscribe to an event with `booking.api.on(eventName, handler)` to react to the action. For the full list of events, see the [Events overview](/api/overview/booking-events-overview/).
 
-Open the ***booking.component.ts*** file and complete the `ngOnInit()` method as in:
+Open *booking.component.ts* and extend `ngOnInit()` with an event subscription.
+
+The following code snippet logs the slot ID when a user selects a slot:
 
 ~~~jsx {7-10} title="booking.component.ts"
 // ...
 ngOnInit() {
     this._booking = new Booking(this.booking_container.nativeElement, {
-        date: new Date(2024, 5, 10),
+        start: new Date(2024, 5, 10),
     });
 
-    // output the id of the selected slot
+    // log the selected slot id
     this._booking.api.on("select-slot", (obj) => {
         console.log(obj.id);
     });
@@ -276,23 +299,27 @@ ngOnDestroy(): void {
 }
 ~~~
 
-### Step 3. Adding Booking into the app
+### Step 3. Register Booking in the app
+
+Add the `BookingComponent` to the application bootstrap. Open *src/app/app.component.ts* and replace the default code.
 
-To add the ***BookingComponent*** component into the app, open the ***src/app/app.component.ts*** file and replace the default code with the following one:
+The following code snippet renders the Booking component inside `AppComponent`:
 
 ~~~jsx {5} title="app.component.ts"
 import { Component } from "@angular/core";
 
 @Component({
     selector: "app-root",
-    template: `<booking/>` // a template created in the "booking.component.ts" file 
+    template: `<booking/>` // template defined in booking.component.ts
 })
 export class AppComponent {
     name = "";
 }
 ~~~
 
-Then create the ***app.module.ts*** file in the ***src/app/*** directory and specify the *BookingComponent* as shown below:
+Create *app.module.ts* in *src/app/* and declare both components.
+
+The following code snippet registers `AppComponent` and `BookingComponent` in the root module:
 
 ~~~jsx {4-5,8} title="app.module.ts"
 import { NgModule } from "@angular/core";
@@ -309,7 +336,9 @@ import { BookingComponent } from "./booking/booking.component";
 export class AppModule {}
 ~~~
 
-The last step is to open the ***src/main.ts*** file and replace the existing code with the following one:
+Open *src/main.ts* and bootstrap the root module.
+
+The following code snippet starts the application with `AppModule`:
 
 ~~~jsx title="main.ts"
 import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
@@ -319,8 +348,8 @@ platformBrowserDynamic()
     .catch((err) => console.error(err));
 ~~~
 
-After that, you can start the app to see Booking loaded with data on a page.
+Start the app to see Booking loaded with data on the page.
 
 ![Booking initialization](../assets/trial-booking.png)
 
-Now you know how to integrate DHTMLX Booking with Angular. You can customize the code according to your specific requirements. The final example you can find on [**GitHub**](https://github.com/DHTMLX/angular-booking-demo).
+Customize the code to match your project requirements. The complete reference implementation is available on [GitHub](https://github.com/DHTMLX/angular-booking-demo).