Skip to content

Rewrite the overview guide with custom skill #32

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.

Sign up for GitHub

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

Open
serhiipylypchuk1991 wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Rewrite the overview guide with custom skill #32

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
222 changes: 115 additions & 107 deletions docs/guides/configuration.md
View file
Open in desktop

Large diffs are not rendered by default.

34 changes: 17 additions & 17 deletions docs/guides/initialization.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,42 +6,42 @@ 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:
Follow these steps to add Booking to your page:

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 on a page](#include-source-files).
2. [Create a container for Booking](#create-a-container).
3. [Initialize Booking with a 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.

To create Booking, you need to include 2 source files on your page:
Include two source files on your page:

- *booking.js*
- *booking.css*
- `booking.js`
- `booking.css`

Make sure that you set correct relative paths to the source files:
Set the correct relative paths to the source files:

~~~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 a container for Booking and give it an ID, for example *"root"*:
Add a container for Booking and give it an ID, for example `"root"`:

~~~jsx title="index.html"
<div id="root"></div>
~~~

## Initializing Booking
## Initialize Booking

Initialize Booking using the **booking.Booking** constructor. It takes two parameters:
Initialize Booking with the `booking.Booking` constructor. It takes two parameters:

- an HTML container (the ID of the HTML container)
- an object with configuration properties. [See the full list here](#configuration-properties)
- an HTML container ID
- an object with configuration properties — see [Configuration properties](#configuration-properties)

~~~jsx title="index.html"
// create Booking
Expand All @@ -53,11 +53,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).
See the [full list of configuration properties](api/overview/booking-properties-overview.md).
:::

## Example

In this snippet you can see how to initialize **JavaScript Booking** with initial settings:
The snippet below initializes Booking with sample data and configuration:

<iframe src="https://snippet.dhtmlx.com/6it4ohez?mode=result" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>
78 changes: 39 additions & 39 deletions docs/guides/integration-with-angular.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,63 +7,63 @@ description: You can learn about the integration with Angular in the documentati
# Integration with Angular

:::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).
Familiarize yourself with the basic concepts of **Angular** before reading this guide. To refresh your knowledge, 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).
DHTMLX Booking is compatible with **Angular**. For code examples, see the [**Example on GitHub**](https://github.com/DHTMLX/angular-booking-demo).

## Creating a project
## Create a project

:::info
Before you start to create a new project, install [**Angular CLI**](https://v17.angular.io/cli) and [**Node.js**](https://nodejs.org/en/).
Before creating a new project, install [**Angular CLI**](https://v17.angular.io/cli) and [**Node.js**](https://nodejs.org/en/).
:::

Create a new **my-angular-booking-app** project using Angular CLI. Run the following command for this purpose:
Create a new **my-angular-booking-app** project using Angular CLI:

~~~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 creating the Angular app.
:::

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.

### Installation of dependencies
### Install dependencies

Go to the new created app directory:
Go to the app directory:

~~~json
cd my-angular-booking-app
~~~

Install dependencies and start the dev server. For this, use the [**yarn**](https://yarnpkg.com/) package manager:
Install dependencies and start the dev server using the [**yarn**](https://yarnpkg.com/) package manager:

~~~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`.

## Creating Booking
## Create Booking

Now you should get the DHTMLX Booking source code. First of all, stop the app and proceed with installing the Booking package.
Get the DHTMLX Booking source code. Stop the app and install the Booking package.

### Step 1. Package installation
### Step 1. Install the package

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

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.
### Step 2. Create the component

Create an Angular component to add Booking to the application. Create the `booking` folder in the `src/app/` directory, add a new file into it, and name it `booking.component.ts`.

#### Import source files

Open the file and import Booking source files. Note that:
Open the file and import Booking source files:

- if you use PRO version and install the Booking package from a local folder, the imported path looks like this:
- if you use PRO version and install the Booking package from a local folder, use the following import path:

~~~jsx
import { Booking } from 'dhx-booking-package';
Expand All @@ -76,12 +76,12 @@ 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:
Create the container and initialize Booking with the constructor. The following code snippet sets up the component:

~~~jsx {1,8,12-13,18-19} title="booking.component.ts"
import { Booking } from '@dhx/trial-booking';
Expand All @@ -95,7 +95,7 @@ import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation
})

export class BookingComponent implements OnInit, OnDestroy {
// initialize container for Booking
// Booking container
@ViewChild('container', { static: true }) booking_container!: ElementRef;

private _booking!: Booking;
Expand All @@ -111,9 +111,9 @@ export class BookingComponent implements OnInit, OnDestroy {
}
~~~

#### Adding styles
#### Add styles

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 the `booking.component.css` file in the `src/app/booking/` directory and add the following styles:

~~~css title="booking.component.css"
/* import Booking styles */
Expand All @@ -133,15 +133,15 @@ body {
}
~~~

#### Loading data
#### Load data

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 and add sample data:

~~~jsx title="data.ts"
export function getData() : any {
function getDate(addDays : any, hoursValue = 0, minutesValue = 0) {
const date = new Date();
const secondsValue = 0; // round to minutes
const secondsValue = 0; // rounded to minutes
const msValue = 0;

date.setDate(date.getDate() + addDays);
Expand Down Expand Up @@ -218,7 +218,7 @@ 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 data file, and pass data to the Booking configuration in `ngOnInit()`:

~~~jsx {2,18,20} title="booking.component.ts"
import { Booking } from '@dhx/trial-booking';
Expand Down Expand Up @@ -250,13 +250,13 @@ 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 is ready to use. When added to the page, it initializes with data. Provide additional configuration settings as needed. See the [Booking API docs](/api/overview/booking-properties-overview/) for the full list of available properties.

#### 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/).
Booking fires an event when a user performs an action. Use these events to detect actions and run custom code. See the [full list of events](/api/overview/booking-events-overview/).

Open the ***booking.component.ts*** file and complete the `ngOnInit()` method as in:
Open `booking.component.ts` and update the `ngOnInit()` method to listen for events:

~~~jsx {7-10} title="booking.component.ts"
// ...
Expand All @@ -265,7 +265,7 @@ ngOnInit() {
date: new Date(2024, 5, 10),
});

// output the id of the selected slot
// log the id of the selected slot
this._booking.api.on("select-slot", (obj) => {
console.log(obj.id);
});
Expand All @@ -276,9 +276,9 @@ ngOnDestroy(): void {
}
~~~

### Step 3. Adding Booking into the app
### Step 3. Add Booking to the app

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:
To add `BookingComponent` to the app, open `src/app/app.component.ts` and replace the default code with the following:

~~~jsx {5} title="app.component.ts"
import { Component } from "@angular/core";
Expand All @@ -292,7 +292,7 @@ export class AppComponent {
}
~~~

Then create the ***app.module.ts*** file in the ***src/app/*** directory and specify the *BookingComponent* as shown below:
Create the `app.module.ts` file in the `src/app/` directory and specify `BookingComponent`:

~~~jsx {4-5,8} title="app.module.ts"
import { NgModule } from "@angular/core";
Expand All @@ -309,7 +309,7 @@ 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 replace the existing code with the following:

~~~jsx title="main.ts"
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
Expand All @@ -319,8 +319,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.

![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 meet your project requirements. The complete example is available on [**GitHub**](https://github.com/DHTMLX/angular-booking-demo).
Loading