diff --git a/docs/api/api_overview.md b/docs/api/api_overview.md index dae6910..855d4bd 100644 --- 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 new file mode 100644 index 0000000..30938dc --- /dev/null +++ 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 index 93da1de..574c9a8 100644 --- 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 index 28a43fc..80ffbf3 100644 --- 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: - \ No newline at end of file + diff --git a/sidebars.js b/sidebars.js index 80929b2..74f400c 100644 --- 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",