Skip to content
Merged

Next #47

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
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ setConfig(config: object): void;
- `config` - (erforderlich) ein Objekt der Booking-Konfiguration. Die vollständige Liste der Eigenschaften finden Sie [hier](api/overview/booking-properties-overview.md)

:::info
Die Methode führt ein flaches Zusammenführen auf der obersten Ebene durch: Jede übergebene Eigenschaft ersetzt die vorhandene vollständig verschachtelte Objekte wie `cardShape` oder `filterShape` werden nicht tief zusammengeführt. Um zuvor gesetzte Werte innerhalb eines verschachtelten Objekts beizubehalten, übergeben Sie das gesamte Objekt erneut. Die Methode zerstört anschließend die aktuelle Komponente und initialisiert eine neue.
Die Methode führt ein flaches Zusammenführen auf der obersten Ebene durch: Jede übergebene Eigenschaft ersetzt die vorhandene vollständig; verschachtelte Objekte wie `cardShape` oder `filterShape` werden nicht tief zusammengeführt. Um zuvor gesetzte Werte innerhalb eines verschachtelten Objekts beizubehalten, übergeben Sie das gesamte Objekt erneut. Die Methode zerstört anschließend die aktuelle Komponente und initialisiert eine neue.
:::

### Beispiel {#example}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -255,7 +255,7 @@ new booking.Booking("#root", {

Um unterschiedliche Parameter für ausgewählte Wochentage oder genaue Daten zu verwenden, fügen Sie dem `slots`-Array mehrere Objekte hinzu und setzen Sie den Parameter `days` oder `dates` für jede Regel.

Das folgende Code-Snippet kombiniert drei Regeln eine gemeinsame Regel, eine Wochentags-Regel für Dienstag und Freitag sowie eine Regel für Mittwoch, Donnerstag und ein genaues Datum:
Das folgende Code-Snippet kombiniert drei Regeln: eine gemeinsame Regel, eine Wochentags-Regel für Dienstag und Freitag sowie eine Regel für Mittwoch, Donnerstag und ein genaues Datum:

~~~jsx {}
const data = [
Expand Down Expand Up @@ -563,7 +563,7 @@ const defaultFilterShape = {

### Filter-Eingabefelder ausblenden {#hide-filter-input-fields}

Das Widget zeigt standardmäßig alle Eingabefelder an Text, Zeit und Datum. Um ein Feld auszublenden, setzen Sie den entsprechenden Parameter der Eigenschaft [`filterShape`](api/config/booking-filtershape.md) auf `false`.
Das Widget zeigt standardmäßig alle Eingabefelder an: Text, Zeit und Datum. Um ein Feld auszublenden, setzen Sie den entsprechenden Parameter der Eigenschaft [`filterShape`](api/config/booking-filtershape.md) auf `false`.

Das folgende Code-Snippet blendet den Datumsfilter aus:

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -278,7 +278,7 @@ export class BookingComponent implements OnInit, OnDestroy {
}
~~~

Die Booking-Komponente rendert nun mit den geladenen Daten. Um das Widget weiter anzupassen, übergeben Sie zusätzliche Konfigurationseigenschaften — die vollständige Liste finden Sie in der [Eigenschaftenübersicht](api/overview/booking-properties-overview.md).
Die Booking-Komponente rendert nun mit den geladenen Daten. Um das Widget weiter anzupassen, übergeben Sie zusätzliche Konfigurationseigenschaften. Die vollständige Liste finden Sie in der [Eigenschaftenübersicht](api/overview/booking-properties-overview.md).

#### Events verarbeiten {#handle-events}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ Diese Anleitung zeigt, wie Sie das DHTMLX Booking-Widget mit [DHTMLX Event Calen

Der Kern der Integration ist die Konvertierung von Event Calendar-Ereignissen in Booking-Slots. Beachten Sie die folgenden Punkte, bevor Sie beginnen.

**Event Calendar-Ereignisse vs. Booking-Slots.** Event Calendar verwaltet Ereignisse – sowohl einzelne als auch wiederkehrende. Booking generiert aus diesen Ereignissen verfügbare Zeitslots. Das [folgende Snippet](#example) generiert Booking-Slots aus dem Zeitplan eines Arztes, indem es JSON-Daten serverseitig konvertiert.
**Event Calendar-Ereignisse vs. Booking-Slots.** Event Calendar verwaltet sowohl einzelne als auch wiederkehrende Ereignisse. Booking generiert aus diesen Ereignissen verfügbare Zeitslots. Das [folgende Snippet](#example) generiert Booking-Slots aus dem Zeitplan eines Arztes, indem es JSON-Daten serverseitig konvertiert.

**Einschränkung bei wiederkehrenden Ereignissen.** Booking unterstützt nur wöchentlich wiederkehrende Ereignisse, die im Event Calendar als `FREQ=WEEKLY;INTERVAL=1` definiert sind. Da Event Calendar beliebige Wiederholungsmuster unterstützt, sollten Sie die anderen Wiederholungsoptionen im Event Calendar-Formular ausblenden.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -274,7 +274,7 @@ export default function BookingComponent(props) {
}
~~~

Die Booking-Komponente rendert nun mit den geladenen Daten. Um das Widget weiter anzupassen, übergeben Sie zusätzliche Konfigurationseigenschaften — die vollständige Liste finden Sie in der [Eigenschaften-Übersicht](api/overview/booking-properties-overview.md).
Die Booking-Komponente rendert nun mit den geladenen Daten. Um das Widget weiter anzupassen, übergeben Sie zusätzliche Konfigurationseigenschaften. Die vollständige Liste finden Sie in der [Eigenschaften-Übersicht](api/overview/booking-properties-overview.md).

#### Events behandeln {#handle-events}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -282,7 +282,7 @@ onDestroy(() => {
<div bind:this={container} class="widget"></div>
~~~

Die Booking-Komponente rendert nun mit den geladenen Daten. Um das Widget weiter anzupassen, übergeben Sie zusätzliche Konfigurationseigenschaften — die vollständige Liste finden Sie in der [Übersicht der Eigenschaften](api/overview/booking-properties-overview.md).
Die Booking-Komponente rendert nun mit den geladenen Daten. Um das Widget weiter anzupassen, übergeben Sie zusätzliche Konfigurationseigenschaften. Die vollständige Liste finden Sie in der [Übersicht der Eigenschaften](api/overview/booking-properties-overview.md).

#### Events verarbeiten {#handle-events}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -291,7 +291,7 @@ export default {
</template>
~~~

Die Booking-Komponente rendert nun mit den geladenen Daten. Um das Widget weiter anzupassen, übergeben Sie zusätzliche Konfigurationseigenschaften — die vollständige Liste finden Sie in der [Übersicht der Eigenschaften](api/overview/booking-properties-overview.md).
Die Booking-Komponente rendert nun mit den geladenen Daten. Um das Widget weiter anzupassen, übergeben Sie zusätzliche Konfigurationseigenschaften. Die vollständige Liste finden Sie in der [Übersicht der Eigenschaften](api/overview/booking-properties-overview.md).

#### Events verarbeiten {#handle-events}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -130,7 +130,7 @@ const en = {
~~~

:::info
Neben der `en`-Locale enthält Booking zwei weitere integrierte Locales `de` (Deutsch) und `cn` (Chinesisch).
Neben der `en`-Locale enthält Booking zwei weitere integrierte Locales: `de` (Deutsch) und `cn` (Chinesisch).
:::

<details>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ Die Karten, Slots und die Server-Sync-Logik von DHTMLX Booking liegen alle im du

- Das aktuelle API für [Methoden](api/overview/booking-methods-overview.md), [Events](api/overview/booking-events-overview.md) und [Eigenschaften](api/overview/booking-properties-overview.md) nachschlagen, einschließlich der [Event Bus](api/overview/booking-internal-eventbus-overview.md)- und [state](api/overview/booking-internal-state-overview.md)-Methoden.
- Sofort lauffähigen [Initialisierungscode](guides/initialization.md) für eine neue Booking-Instanz aus einer Beschreibung der benötigten Karten und Slots generieren.
- Kartenfelder mit [`cardShape`](api/config/booking-cardshape.md) und [`cardTemplate`](api/config/booking-cardtemplate.md) umschalten oder ersetzen — und dasselbe für den Informationsblock des Buchungsdialogs mit [`infoShape`](api/config/booking-infoshape.md) und [`infoTemplate`](api/config/booking-infotemplate.md).
- Kartenfelder mit [`cardShape`](api/config/booking-cardshape.md) und [`cardTemplate`](api/config/booking-cardtemplate.md) umschalten oder ersetzen sowie dasselbe für den Informationsblock des Buchungsdialogs mit [`infoShape`](api/config/booking-infoshape.md) und [`infoTemplate`](api/config/booking-infotemplate.md) tun.
- [Slot-Regeln](guides/configuration.md#fill-cards-with-slots) (Größe, Abstand, Tage und Daten) und ihre Prioritätsreihenfolge ausarbeiten sowie Slots als [belegt oder verfügbar](guides/configuration.md#mark-slots-as-used-or-available) markieren.
- Die [Filterleiste](guides/configuration.md#configure-the-filter) konfigurieren: Textfelder, Zeitbereiche und den `autoApply`-Modus.
- Die [Server-Synchronisierung](guides/saving-reservations.md) verdrahten: Kartendaten mit [`setConfig()`](api/methods/booking-setconfig-method.md) laden und Reservierungen über [`setConfirmHandler()`](api/methods/booking-setconfirmhandler-method.md) senden.
Expand All @@ -51,7 +51,7 @@ So bleiben Booking-Vorschläge an die aktuellen Slot-Regeln und die Reservierung

## MCP-Setup, Tool für Tool {#mcp-setup-tool-by-tool}

Die meisten Booking-Teams registrieren den MCP-Endpunkt einmal, wenn sie das Reservierungs-Backend aufsetzen, und verwenden diese Registrierung danach in jedem weiteren Projekt wieder. Die Mechanik unterscheidet sich von Tool zu Toolbei den einen ein CLI-Befehl, bei den anderen eine JSON-Konfigurationsdatei —, aber alle zeigen auf diese Adresse:
Die meisten Booking-Teams registrieren den MCP-Endpunkt einmal, wenn sie das Reservierungs-Backend aufsetzen, und verwenden diese Registrierung danach in jedem weiteren Projekt wieder. Die Mechanik unterscheidet sich von Tool zu Tool: bei den einen ist es ein CLI-Befehl, bei den anderen eine JSON-Konfigurationsdatei. Alle zeigen jedoch auf diese Adresse:

~~~jsx
https://docs.dhtmlx.com/mcp
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ fetch("/server/url")
~~~

:::info
Die Methode [`setConfirmHandler()`](api/methods/booking-setconfirmhandler-method.md) ist eine Kurzform, die intern das Ereignis [`confirm-slot`](api/events/booking-confirmslot-event.md) über `widget.api.on("confirm-slot", handler)` abonniert. Beide Ansätze registrieren einen Handler mit derselben Callback-Signatur — verwenden Sie `widget.api.on("confirm-slot", handler)` direkt, wenn Sie mehrere Abonnenten hinzufügen möchten.
Die Methode [`setConfirmHandler()`](api/methods/booking-setconfirmhandler-method.md) ist eine Kurzform, die intern das Ereignis [`confirm-slot`](api/events/booking-confirmslot-event.md) über `widget.api.on("confirm-slot", handler)` abonniert. Beide Ansätze registrieren einen Handler mit derselben Callback-Signatur. Verwenden Sie `widget.api.on("confirm-slot", handler)` direkt, wenn Sie mehrere Abonnenten hinzufügen möchten.
:::

## UTC-Daten in die lokale Zeitzone konvertieren {#convert-utc-data-to-the-local-timezone}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ Passen Sie das Booking-Widget über CSS-Custom-Properties an. Das Widget stellt

Das Booking-Widget verwendet CSS-Custom-Properties für Layout-Dimensionen und gemeinsame Theme-Tokens. Überschreiben Sie diese Variablen in Ihrem eigenen CSS, um das Erscheinungsbild anzupassen.

Der folgende Code-Ausschnitt zeigt eine Teilmenge der Booking-spezifischen Variablen, die das Widget bereitstellt (mit ihren Desktop-Werten; intern definiert das Widget einige davon je nach Bildschirmgröße neu — Desktop, Tablet und Mobil):
Der folgende Code-Ausschnitt zeigt eine Teilmenge der Booking-spezifischen Variablen, die das Widget bereitstellt (mit ihren Desktop-Werten; intern definiert das Widget einige davon für Desktop, Tablet und Mobil neu):

~~~css
.wx-booking {
Expand All @@ -31,7 +31,7 @@ In zukünftigen Versionen von Booking können sich Variablennamen ändern. Über

## Eingebautes Theme anwenden {#apply-the-built-in-theme}

Das Widget bietet ein eingebautes Theme das Material-Theme.
Das Widget bietet ein eingebautes Theme, das Material-Theme.

Wenden Sie das Theme an, indem Sie die entsprechende CSS-Klasse zum Widget-Container hinzufügen.

Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
sidebar_label: Erste Schritte
title: Erste Schritte
description: Erfahren Sie, wie Sie mit DHTMLX Booking beginnen – in der Dokumentation der DHTMLX JavaScript Booking-Bibliothek. Lesen Sie Entwickler-Guides und API-Referenz, probieren Sie Code-Beispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX Booking herunter.
description: Erfahren Sie in der Dokumentation der DHTMLX JavaScript Booking-Bibliothek, wie Sie mit DHTMLX Booking beginnen. Lesen Sie Entwickler-Guides und API-Referenz, probieren Sie Code-Beispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX Booking herunter.
---

# Erste Schritte {#how-to-start}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -255,7 +255,7 @@ new booking.Booking("#root", {

선택한 요일이나 특정 날짜에 다른 파라미터를 사용하려면 `slots` 배열에 여러 객체를 추가하고 각 규칙에 `days` 또는 `dates` 파라미터를 설정합니다.

다음 코드 예제는 세 가지 규칙을 조합합니다 공통 규칙, 화요일과 금요일에 대한 요일 규칙, 수요일, 목요일 및 특정 날짜 하나에 대한 규칙:
다음 코드 예제는 세 가지 규칙을 조합합니다: 공통 규칙, 화요일과 금요일에 대한 요일 규칙, 수요일, 목요일 및 특정 날짜 하나에 대한 규칙:

~~~jsx {}
const data = [
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -278,7 +278,7 @@ export class BookingComponent implements OnInit, OnDestroy {
}
~~~

Booking 컴포넌트가 이제 로드된 데이터와 함께 렌더링됩니다. 위젯을 추가로 커스터마이징하려면 추가 구성 속성을 전달하십시오 전체 목록은 [속성 개요](api/overview/booking-properties-overview.md)를 참조하십시오.
Booking 컴포넌트가 이제 로드된 데이터와 함께 렌더링됩니다. 위젯을 추가로 커스터마이징하려면 추가 구성 속성을 전달하십시오. 전체 목록은 [속성 개요](api/overview/booking-properties-overview.md)를 참조하십시오.

#### Events 처리 {#handle-events}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -274,7 +274,7 @@ export default function BookingComponent(props) {
}
~~~

이제 Booking 컴포넌트가 로드된 데이터와 함께 렌더링됩니다. 위젯을 더 커스터마이즈하려면 추가 구성 속성을 전달하십시오 전체 목록은 [속성 개요](api/overview/booking-properties-overview.md)를 참조하십시오.
이제 Booking 컴포넌트가 로드된 데이터와 함께 렌더링됩니다. 위젯을 더 커스터마이즈하려면 추가 구성 속성을 전달하십시오. 전체 목록은 [속성 개요](api/overview/booking-properties-overview.md)를 참조하십시오.

#### 이벤트 처리 {#handle-events}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ CSS 커스텀 속성을 통해 Booking 위젯을 커스터마이즈합니다.

Booking 위젯은 레이아웃 치수와 공유 테마 토큰에 CSS 커스텀 속성을 사용합니다. 이러한 변수를 자신의 CSS에서 재정의하여 외관을 커스터마이즈할 수 있습니다.

다음 코드 스니펫은 위젯이 노출하는 Booking 전용 변수의 일부를 보여줍니다(데스크톱 값으로 표시되며, 위젯은 내부적으로 화면 크기에 따라 일부 값을 재정의합니다 — 데스크톱, 태블릿, 모바일):
다음 코드 스니펫은 위젯이 노출하는 Booking 전용 변수의 일부를 보여줍니다(데스크톱 값으로 표시되며, 위젯은 내부적으로 데스크톱, 태블릿, 모바일 화면 크기에 따라 일부 값을 재정의합니다):

~~~css
.wx-booking {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ new booking.Booking("#root", {
<iframe src="https://snippet.dhtmlx.com/6mxd7918?mode=result" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>

:::info
Вы также можете настроить внешний вид карточки с помощью свойства [`cardTemplate`](api/config/booking-cardtemplate.md). Если применены оба свойства`cardTemplate` и `cardShape`, `cardTemplate` переопределит настройки `cardShape`.
Вы также можете настроить внешний вид карточки с помощью свойства [`cardTemplate`](api/config/booking-cardtemplate.md). Если применены оба свойства, `cardTemplate` и `cardShape`, то `cardTemplate` переопределит настройки `cardShape`.
:::

**Полезные статьи:**
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ setConfig(config: object): void;
- `config` - (обязательный) объект конфигурации Booking. Полный список свойств смотрите [здесь](api/overview/booking-properties-overview.md)

:::info
Метод выполняет поверхностное слияние на верхнем уровне: каждое переданное свойство полностью заменяет существующее вложенные объекты, такие как `cardShape` или `filterShape`, не объединяются рекурсивно. Чтобы сохранить ранее установленные значения внутри вложенного объекта, передайте его целиком. После этого метод уничтожает текущий компонент и инициализирует новый.
Метод выполняет поверхностное слияние на верхнем уровне: каждое переданное свойство полностью заменяет существующее, а вложенные объекты, такие как `cardShape` или `filterShape`, не объединяются рекурсивно. Чтобы сохранить ранее установленные значения внутри вложенного объекта, передайте его целиком. После этого метод уничтожает текущий компонент и инициализирует новый.
:::

### Пример {#example}
Expand Down
Loading
Loading