[update] configuration updated

DHTMLX · Sep 17, 2024 · 32f8148 · 32f8148
1 parent 3c16f27
commit 32f8148
Show file tree

Hide file tree

Showing 6 changed files with 129 additions and 33 deletions.
diff --git a/docs/api/overview/booking-api-overview.md b/docs/api/overview/booking-api-overview.md
@@ -48,16 +48,19 @@ new booking.Booking("#root", {
 | Name                                      | Description                                      |
 | ----------------------------------------- | ------------------------------------------------ |
 | [](../events/booking-confirmslot-event.md)  | @getshort(../events/booking-confirmslot-event.md)  |
+| [](../events/booking-filterdata-event.md)  | @getshort(../events/booking-filterdata-event.md)    |
+| [](../events/booking-selectitem-event.md)  | @getshort(../events/booking-selectitem-event.md)    |
+| [](../events/booking-selectitemdate-event.md)  | @getshort(../events/booking-selectitemdate-event.md)  |
 | [](../events/booking-selectslot-event.md)   | @getshort(../events/booking-selectslot-event.md)   |
-| [](../events/booking-setfilter-event.md)    | @getshort(../events/booking-setfilter-event.md)    |
 
 ## Booking properties
 
 | Name                                      | Description                                      |
 | ----------------------------------------- | ------------------------------------------------ |
 | [](../config/booking-data.md)         | @getshort(../config/booking-data.md)         |
 | [](../config/booking-cardshape.md)    | @getshort(../config/booking-cardshape.md)    |
-| [](../config/booking-filteredcards.md)| @getshort(../config/booking-filteredcards.md)|
 | [](../config/booking-filtershape.md)  | @getshort(../config/booking-filtershape.md)  |
 | [](../config/booking-formshape.md)    | @getshort(../config/booking-formshape.md)    |
 | [](../config/booking-infoshape.md)    | @getshort(../config/booking-infoshape.md)    |
+| [](../config/booking-slotgap.md)    | @getshort(../config/booking-slotgap.md)        |
+| [](../config/booking-slotsize.md)    | @getshort(../config/booking-slotsize.md)      |
diff --git a/docs/guides/configuration.md b/docs/guides/configuration.md
@@ -52,7 +52,7 @@ To hide any information block from cards' display, set the appropriate parameter
 
 Example:
 
-~~~jsx
+~~~jsx {36}
     const data = [
     {
         id: "ee828b5d-a034-420c-889b-978840015d6a",
@@ -100,16 +100,68 @@ Example:
 
 ## Filling cards with slots
 
-A slot is a time unit available for booking. Available slots are displayed for the next five days starting from the current day or from the start date from the filter. 
+A slot is a time unit available for booking. Available slots for cards are displayed for the next five days starting from the current day or from the start date from the filter. 
+
+### Adding slots for booking
 
-To add booking slots to a card, use the `slots` parameter of the [`data`](/api/config/booking-data) property. You can apply one common slots rule to all days of the required card and specific rules to selected days or even dates. 
+To add booking slots to a card, add an object to the `slots` array of the [`data`](/api/config/booking-data) property.
+In the example below, the slots are added for the specified card for Tuesdays and Fridays from 12 a.m. to 6 p.m and each slot duration is 30 minutes with 10-minutes gap between slots. 
+
+~~~jsx {16-23}
+const data = [
+    {
+        id: "5cf364d8-9997-4d8c-9586-48f90f3cb736",
+        title: "Debra Weeks",
+        category: "Allergist",
+        subtitle: "7 years of experience",
+        details: 
+                "Silverstone Medical Center (Vanderbilt Avenue 13, Chestnut, New Zealand)",
+        preview:
+				"https://files.webix.com/30d/d34de82e0a8e3b561988a46ce1e86743/stock-photo-doc.jpg",
+        price: "37 $",
+        review: {
+            star: 1,
+            count: 40,
+        },
+        slots: [
+            {
+                from: 12,
+                to: 18,
+                size: 50,
+                gap: 10,
+                days: [2, 5],
+            },
+
+            {...}, //other slots
+        ],
+    },]
+
+new booking.Booking("#root", {
+	data,
+	// other parameters
+});
+~~~
+
+### Defining slot rules
+
+Parameters of each object in the `slots` array of the [`data`](/api/config/booking-data) property allow specifying the next settings: 
+
+- slots start and end time
+- slot sizes (duration in minutes)
+- slot gaps (the length between slot)
+- days to which slots should be applied
+
+When applying these rules, you can apply one common rule to all days of the required card or apply different rules (specific rules to selected days or even dates), namely, you can:  
+
+- set the same parameters to all days of a specific card, which means you can add slots with the same duration, the same start and end time to all days of the selected card
+- set different slot duration and slot gaps to the same card by applying different parameters to days of the week of the same card
 
 For example, if you want to add booking slots with the same parameters to all days of the selected card, i.e., add slots with the same duration, the same start and end time to all days of the selected card, you should add one object to the `slots` array with the required parameters. 
 
 Example:
 
 ~~~jsx
-const cards = [
+const data = [
     {
         id: "5cf364d8-9997-4d8c-9586-48f90f3cb736",
         title: "Debra Weeks",
@@ -146,7 +198,7 @@ But if you need to add slots with one set of parameters to some days of the week
 Example:
 
 ~~~jsx 
-const cards = [
+const data = [
     {
         id: "5cf364d8-9997-4d8c-9586-48f90f3cb736",
         title: "Debra Weeks",
@@ -196,21 +248,21 @@ new booking.Booking("#root", {
 });
 ~~~
 
-:::note
+:::info
 In case you have common slots parameters and specific parameters for some days, you should be aware of the following: 
 - Slot parameters specified for days will override common parameters defined for all days. 
 - Slot parameters specified for dates will override parameters defined for specific days and all days. 
 - If several slots objects are created for the same day, make sure that slots time ranges (**from** and **to**) do not overlap, otherwise, all slots data for these days will not be applied.  
 :::
 
-## Marking slots as used or available
+### Marking slots as used or available
 
 To mark slots as used (booked) and make them not visible for a user, use the `usedSlots` parameter of the [`data`](/api/config/booking-data) property.
 
 Example:
 
 ~~~jsx
-const cards = [
+const data = [
     {
         id: "5cf364d8-9997-4d8c-9586-48f90f3cb736",
         title: "Debra Weeks",
@@ -243,14 +295,14 @@ new booking.Booking("#root", {
 });
 ~~~
 
-To mark available slots, use the `availableSlots` parameter of the `cards` property.
+To mark available slots, use the `availableSlots` parameter of the [`data`](/api/config/booking-data) property.
 
 If available slots are specified here, all slots from the `slots` array are ignored (i.e., become unavailable).
 
 Example:
 
 ~~~jsx
-const cards = [
+const data = [
     {
         id: "5cf364d8-9997-4d8c-9586-48f90f3cb736",
         title: "Debra Weeks",
@@ -285,9 +337,9 @@ new booking.Booking("#root", {
 
 ## Configuring the Booking editor 
 
-To configure the fields that should be displayed in the Booking editor, use the [`formShape`](/api/config/booking-formshape) property.
+To configure the fields that should be displayed in the Booking editor dialog, use the [`formShape`](/api/config/booking-formshape) property.
 
-To add a new filed, add a new object to the array. To make a field required for filling, set the `required` parameter to *true*. 
+To add a new field, add a new object to the array. To make a field required for filling, set the `required` parameter to *true*. 
 
 ~~~jsx 
 const formShape = [
@@ -315,7 +367,7 @@ new booking.Booking("#root", {
 });
 ~~~
 
-To manage information that is displayed on the left side of the Booking editor, apply the [`infoShape`](/api/config/booking-infoshape) property. You can hide necessary fields from display by setting values to *false*.
+To manage information that is displayed on the left side of the Booking editor dialog, apply the [`infoShape`](/api/config/booking-infoshape) property. You can hide necessary fields from display by setting values to *false*.
 
 ~~~jsx {1-7,10}
 const infoShape = {

diff --git a/docs/guides/initialization.md b/docs/guides/initialization.md
@@ -53,7 +53,7 @@ new booking.Booking("#root", {
 ### Configuration properties
 
 :::info
-The full list of properties to configure **Booking** can be found [**here**](api/overview/properties-overview.md).
+The full list of properties to configure **Booking** can be found [**here**](api/overview/booking-properties-overview.md).
 :::
 
 ## Example

diff --git a/docs/guides/localization.md b/docs/guides/localization.md
@@ -73,13 +73,11 @@ Besides the ***en*** locale, Booking also includes the built-in ***de*** locale.
 ~~~jsx
 const de = {
 	lang: "de",
-	booking: booking: {
+	booking: {
 		//Filter bar
 		"What date would be best?":
-			"Welches Datum würde Ihnen am besten passen?",
+		"Welches Datum würde Ihnen am besten passen?",
 		"What time would be best?": "Welche Zeit würde Ihnen am besten passen?",
-		"Choose a date": "Wählen Sie bitte das Datum",
-		"Choose a time": "Wählen Sie bitte die Zeit",
 		Search: "Suchen",
 		filterCategoryName: "Fachgebiet",
 		filterTitleName: "Spezialist/in",
@@ -93,14 +91,11 @@ const de = {
 		reviews: "Bewertungen",
 
 		// Slots
-		"Select the time slot to book online":
-			"Wählen Sie bitte das Zeitfenster aus, um online zu buchen",
 		"Unfortunately, there are no slots available for the selected date.":
 			"Leider sind keine Termine für den ausgewählten Tag verfügbar.",
 		"Click here": "Klicken bitte Sie hier",
 		"if you want to open a specialist card and choose from other free slots.":
 			"wenn Sie eine Facharztkarte öffnen und aus weiteren freien Zeitfenstern wählen möchten.",
-		"Select date & time": "Wählen Sie bitte das Datum und die Zeit aus",
 		minutes: "Minuten",
 		Confirm: "Bestätigen",
 
@@ -109,7 +104,6 @@ const de = {
 		Name: "Name",
 		Email: "Email",
 		Description: "Beschreibung",
-		"Type something...": "Schreiben Sie bitte etwas...",
 		"Book an appointment": "Vereinbaren Sie bitte einen Termin",
 		"Booking your appointment": "Buchen Sie bitte Ihren Termin",
 		"Please do not close the window":
@@ -121,14 +115,69 @@ const de = {
 		"Please go back and try again.":
 			"Bitte gehen Sie zurück und versuchen Sie noch einmal.",
 		"Go back": "Gehen Sie zurück",
-		" is required": " ist erforderlich",
 	},
+		calendar: {
+			monthFull: [
+				"Januar",
+				"Februar",
+				"März",
+				"April",
+				"Mai",
+				"Juni",
+				"Juli",
+				"August",
+				"September",
+				"Oktober",
+				"November",
+				"Dezember",
+			],
+			monthShort: [
+				"Jan",
+				"Feb",
+				"Mrz",
+				"Apr",
+				"Mai",
+				"Jun",
+				"Jul",
+				"Aug",
+				"Sep",
+				"Okt",
+				"Nov",
+				"Dez",
+			],
+			dayFull: [
+				"Sonntag",
+				"Montag",
+				"Dienstag",
+				"Mittwoch",
+				"Donnerstag",
+				"Freitag",
+				"Samstag",
+			],
+			dayShort: ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"],
+			hours: "Stunden",
+			minutes: "Minuten",
+			done: "Fertig",
+			clear: "Entfernen",
+			today: "Heute",
+
+			weekStart: 1,
+			timeFormat: 24,
+			dateFormat: "%d.%n.%Y",
+		},
+
+		core: {
+			ok: "OK",
+			cancel: "Abbrechen",
+		},
 };
 ~~~
 </details>
 
 ## Applying locales
 
+TBD!!!
+
 You can access built-in locales via the booking object.  ???
 
 Example:

diff --git a/docs/guides/working-with-server.md b/docs/guides/working-with-server.md
diff --git a/sidebars.js b/sidebars.js
@@ -111,7 +111,6 @@ module.exports = {
 				"guides/customization",
 				"guides/localization",
 				"guides/loading-data",
-				"guides/working-with-server",
 				"guides/working-with-hotkeys",
 			],
 		},