[add] editorValidation property and related guides

DHTMLX · Oct 31, 2023 · f331f78 · f331f78
1 parent 1476833
commit f331f78
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 1 deletion.
diff --git a/docs/api/api_overview.md b/docs/api/api_overview.md
@@ -92,6 +92,7 @@ new eventCalendar.EventCalendar("#root", {
 | [](api/config/js_eventcalendar_config_config.md)     | @getshort(api/config/js_eventcalendar_config_config.md)     |
 | [](api/config/js_eventcalendar_date_config.md)       | @getshort(api/config/js_eventcalendar_date_config.md)       |
 | [](api/config/js_eventcalendar_editorshape_config.md)| @getshort(api/config/js_eventcalendar_editorshape_config.md)|
+| [](api/config/js_eventcalendar_editorvalidation_config.md)| @getshort(api/config/js_eventcalendar_editorvalidation_config.md)|
 | [](api/config/js_eventcalendar_events_config.md)     | @getshort(api/config/js_eventcalendar_events_config.md)     |
 | [](api/config/js_eventcalendar_locale_config.md)     | @getshort(api/config/js_eventcalendar_locale_config.md)     |
 | [](api/config/js_eventcalendar_mode_config.md)       | @getshort(api/config/js_eventcalendar_mode_config.md)       |

diff --git a/docs/api/config/js_eventcalendar_editorvalidation_config.md b/docs/api/config/js_eventcalendar_editorvalidation_config.md
@@ -0,0 +1,37 @@
+---
+sidebar_label: editorValidation
+title: mode Config
+description: You can learn about the editorValidation config in the documentation of the DHTMLX JavaScript Event Calendar library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Event Calendar.
+---
+
+# mode
+
+### Description
+
+@short: Optional. A callback that returns and applies validation rules to editor fields
+
+### Usage
+
+~~~jsx {}
+editorValidation?: (event: object) => string | false; 
+~~~
+
+### Parameters
+
+The callback function takes an object with the event data:
+
+- `event` - the event data object
+
+### Example
+
+~~~jsx {3-5}
+// create Event Calendar
+new eventCalendar.EventCalendar("#root", {
+    editorValidation: event => {
+        if (!event.Text) return "Text is required";
+    }
+	// other configuration parameters
+});
+~~~
+
+**Change log:** The ***editorValidation*** property was added in v2.2
diff --git a/docs/api/overview/properties_overview.md b/docs/api/overview/properties_overview.md
@@ -13,6 +13,7 @@ description: You can explore a properties overview in the documentation of the D
 | [](../config/js_eventcalendar_config_config.md)     | @getshort(../config/js_eventcalendar_config_config.md)     |
 | [](../config/js_eventcalendar_date_config.md)       | @getshort(../config/js_eventcalendar_date_config.md)       |
 | [](../config/js_eventcalendar_editorshape_config.md)| @getshort(../config/js_eventcalendar_editorshape_config.md)|
+| [](../config/js_eventcalendar_editorvalidation_config.md)| @getshort(../config/js_eventcalendar_editorvalidation_config.md)|
 | [](../config/js_eventcalendar_events_config.md)     | @getshort(../config/js_eventcalendar_events_config.md)     |
 | [](../config/js_eventcalendar_locale_config.md)     | @getshort(../config/js_eventcalendar_locale_config.md)     |
 | [](../config/js_eventcalendar_mode_config.md)       | @getshort(../config/js_eventcalendar_mode_config.md)       |

diff --git a/docs/guides/configuration.md b/docs/guides/configuration.md
@@ -10,6 +10,7 @@ You can configure the *Event Calendar* appearance and functionality via correspo
 
 - configure the timetable grid via the [`config`](api/config/js_eventcalendar_config_config.md) property
 - configure the editor fields via the [`editorShape`](api/config/js_eventcalendar_editorshape_config.md) property
+- configure validation of the editor fields via the [`editorValidation`](api/config/js_eventcalendar_editorvalidation_config.md) property
 - set the initial sidebar state via the [`sidebar`](api/config/js_eventcalendar_sidebar_config.md) property
 - set the initial view mode via the [`mode`](api/config/js_eventcalendar_mode_config.md) property
 - set the initial theme via the [`theme`](api/config/js_eventcalendar_theme_config.md) property
@@ -482,6 +483,20 @@ new eventCalendar.EventCalendar("#root", {
 Unless you specify the editor settings via the [`editorShape`](api/config/js_eventcalendar_editorshape_config.md) property, the widget will apply a [**defaultEditorShape**](api/config/js_eventcalendar_editorshape_config.md#default-config) set of parameters!
 :::
 
+### Editor fields validation
+
+To validate data entered into editor fields, you can use the [`editorValidation`](api/config/js_eventcalendar_editorvalidation_config.md) property. See the example below for more details: 
+
+~~~jsx {3-5}
+// create Event Calendar
+new eventCalendar.EventCalendar("#root", {
+    editorValidation: event => {
+        if (!event.Text) return "Text is required";
+    }
+	// other configuration parameters
+});
+~~~
+
 ## Sidebar
 
 To configure a sidebar state, you can use the [`sidebar`](api/config/js_eventcalendar_sidebar_config.md) property. There are 3 available states:
@@ -566,4 +581,4 @@ new eventCalendar.EventCalendar("#root", {
 
 In this snippet you can see how to configure Event Calendar:
 
-<iframe src="https://snippet.dhtmlx.com/qw45r367?mode=result&tag=event_calendar" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>
+<iframe src="https://snippet.dhtmlx.com/qw45r367?mode=result&tag=event_calendar" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>
diff --git a/sidebars.js b/sidebars.js
@@ -161,6 +161,7 @@ module.exports = {
 						"api/config/js_eventcalendar_config_config",
 						"api/config/js_eventcalendar_date_config",
 						"api/config/js_eventcalendar_editorshape_config",
+						"api/config/js_eventcalendar_editorvalidation_config",
 						"api/config/js_eventcalendar_events_config",
 						"api/config/js_eventcalendar_locale_config",
 						"api/config/js_eventcalendar_mode_config",