Skip to content

Commit

Permalink
Fix new demo descriptions after review (#3059)
Browse files Browse the repository at this point in the history
  • Loading branch information
vladaskorohodova authored Nov 30, 2023
1 parent 66c9fd3 commit 96725f9
Show file tree
Hide file tree
Showing 4 changed files with 18 additions and 18 deletions.
12 changes: 6 additions & 6 deletions JSDemos/Demos/Calendar/MultipleSelection/description.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
This demo shows different selection modes and date availability options in Calendar.
This demo applies different selection modes and date availability options to the Calendar component.

## Selection Modes

The selected value or values are stored in the [value](/Documentation/ApiReference/UI_Components/dxCalendar/Configuration/#value) property. The following [selection modes](/Documentation/ApiReference/UI_Components/dxCalendar/Configuration/#selectionMode) are available:

- *'single'*
A user can select only one date at a time.
A user can select only a single date at any given time.

- *'multiple'*
A user can select multiple dates at a time.
A user can select multiple dates simultaneously.

- *'range'*
A user can select a range of dates. The first and the last date in the range are stored in the [value](/Documentation/ApiReference/UI_Components/dxCalendar/Configuration/#value) property.
Expand All @@ -19,12 +19,12 @@ If you enable [selectWeekOnClick](/Documentation/ApiReference/UI_Components/dxCa

Use the [min](/Documentation/ApiReference/UI_Components/dxCalendar/Configuration/#min) and [max](/Documentation/ApiReference/UI_Components/dxCalendar/Configuration/#max) properties to specify the range of available dates. In this demo, these properties limit the range to three days before and after the current date. Enable the "Set minimum date" and "Set maximum date" checkboxes to apply the properties.

If you need to disable specific dates, use the [disabledDates](/Documentation/ApiReference/UI_Components/dxCalendar/Configuration/#disabledDates) property. Toggle the "Disable weekends" checkbox to see how this setting affects the component's behavior. You can specify either an array of predefined dates or a function that determines whether a date is available.
If you need to disable specific dates, use the [disabledDates](/Documentation/ApiReference/UI_Components/dxCalendar/Configuration/#disabledDates) property. Toggle the "Disable weekends" checkbox to see how this setting affects component behavior. You can specify either an array of predefined dates or a function that determines whether a date is available.

In cases of *'multiple'* and *'range'* [selection modes](/Documentation/ApiReference/UI_Components/dxCalendar/Configuration/#selectionMode), the behavior of disabled dates in Calendar is the following:
When using *'multiple'* and *'range'* [selection modes](/Documentation/ApiReference/UI_Components/dxCalendar/Configuration/#selectionMode), the behavior of disabled dates in the Calendar is as follows:

- If you specify the [value](/Documentation/ApiReference/UI_Components/dxCalendar/Configuration/#value) property programmatically, disabled dates are selected in the values array.

- If you use UI to change selection (clicks on dates or weeks, the Enter key), you cannot select disabled dates in *'multiple'* mode. In *'range'* mode, disabled dates cannot start or end a range, but can be included in the middle.
- If you use the UI to change selection (click on dates or weeks, the Enter key), you cannot select disabled dates in *'multiple'* mode. In *'range'* mode, disabled dates cannot start or end a range, but can be included in the middle.

To clear selected values, call the Calendar [clear()](/Documentation/ApiReference/UI_Components/dxCalendar/Methods/#clear) method.
6 changes: 3 additions & 3 deletions JSDemos/Demos/Scheduler/WorkShifts/description.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
This demo shows how to use the [offset](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#offset) property that specifies the minute offset within Scheduler, indicating the starting point of a day. The offset is a multiple of 5 and can range from -1440 minutes (-24 hours) to 1440 minutes (24 hours).
This demo uses the Scheduler component’s [offset](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#offset) property to indicate the starting point of a day. The Scheduler’s offset can be set in multiples of 5 and can range from -1440 minutes (-24 hours) to 1440 minutes (24 hours).

For instance, if you set the offset to -120, like the **First shift** in the demo, the day starts at 10:00 PM on the previous day instead of 00:00. If you set the offset to 360, like the **Second shift**, the day starts at 6:00 AM.
For instance, if you set the offset to -120, like the **First shift** in this demo, the day begins at 10:00 PM on the previous day instead of 00:00. If you set the offset to 360, like the **Second shift**, the day begins at 6:00 AM.

You can also combine this property with [startDayHour](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#startDayHour), [endDayHour](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#endDayHour), and [cellDuration](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#cellDuration) to get the necessary result.
You can also combine this property with [startDayHour](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#startDayHour), [endDayHour](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#endDayHour), and [cellDuration](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#cellDuration) to obtain desired display results.
10 changes: 5 additions & 5 deletions JSDemos/Demos/TabPanel/Overview/description.md
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
The [TabPanel](/Documentation/ApiReference/UI_Components/dxTabPanel/) UI component consists of [Tabs](/Documentation/ApiReference/UI_Components/dxTabs/) and [MultiView](/Documentation/ApiReference/UI_Components/dxMultiView/) components. The TabPanel automatically synchronizes the selected tab with the currently displayed view and vice versa.
The [TabPanel](/Documentation/ApiReference/UI_Components/dxTabPanel/) UI component includes both the [Tabs](/Documentation/ApiReference/UI_Components/dxTabs/) and [MultiView](/Documentation/ApiReference/UI_Components/dxMultiView/) components. The TabPanel automatically synchronizes the selected tab with the currently displayed view (and vice versa).

To get started with the DevExtreme TabPanel component, refer to the following tutorial for step-by-step instructions: [Getting Started with TabPanel](/Documentation/Guide/UI_Components/TabPanel/Getting_Started_with_TabPanel/).
To get started with the DevExtreme TabPanel component, refer to the following step-by-step tutorial: [Getting Started with TabPanel](/Documentation/Guide/UI_Components/TabPanel/Getting_Started_with_TabPanel/).

## Generate Similar Tabs Based on a Data Source

To generate similar tabs and views, bind the TabPanel to data. Use the [items](/Documentation/ApiReference/UI_Components/dxTabPanel/Configuration/items/) or [dataSource](/Documentation/ApiReference/UI_Components/dxTabPanel/Configuration/#dataSource) property to do this. Both these properties can work with local arrays, but **dataSource** also accepts a [DataSource](/Documentation/ApiReference/Data_Layer/DataSource/) object. You can use this object if you need to process the local array or fetch the array from a remote data source. In this demo, the **dataSource** property is set to a local array.
To generate similar tabs and views, bind the TabPanel to data (using the [items](/Documentation/ApiReference/UI_Components/dxTabPanel/Configuration/items/) or [dataSource](/Documentation/ApiReference/UI_Components/dxTabPanel/Configuration/#dataSource) property). Both these properties can work with local arrays, but **dataSource** also accepts a [DataSource](/Documentation/ApiReference/Data_Layer/DataSource/) object. You can use this object if you need to process the local array or fetch the array from a remote data source. In this demo, the **dataSource** property is set to a local array.

Each object in the **items[]** or **dataSource** array can contain predefined fields, such as **title** or **icon** (see the [items[]](/Documentation/ApiReference/UI_Components/dxTabPanel/Configuration/items/) section for the full list). The TabPanel automatically recognizes these fields and creates the default tab and view appearance based on them.

## Customize Tab Contents and Appearance

You can initialize a tab’s contents (text, icons and badges) with values from underlying data objects.
You can initialize tab contents (text, icons and badges) with values from underlying data objects.

Use the drop-down editors on the right to change the tab [position](/Documentation/ApiReference/UI_Components/dxTabPanel/Configuration/#tabsPosition), [styling mode](/Documentation/ApiReference/UI_Components/dxTabPanel/Configuration/#stylingMode), and [icon position](/Documentation/ApiReference/UI_Components/dxTabPanel/Configuration/#iconPosition).
Use the drop-down editors on the right to change tab [position](/Documentation/ApiReference/UI_Components/dxTabPanel/Configuration/#tabsPosition), [styling mode](/Documentation/ApiReference/UI_Components/dxTabPanel/Configuration/#stylingMode), and [icon position](/Documentation/ApiReference/UI_Components/dxTabPanel/Configuration/#iconPosition).
8 changes: 4 additions & 4 deletions JSDemos/Demos/Tabs/Selection/description.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
This demo shows how to process tab selection and uses SelectBox and MultiView components to emulate the page content. Both these components are bound to Tabs, and vice versa.
This demo processes tab selection and uses SelectBox and MultiView components to emulate page content. Both these components are bound to Tabs, and vice versa.

You can use the following properties to configure the selection:
You can use the following properties to configure selection:

- [selectedIndex](/Documentation/ApiReference/UI_Components/dxTabs/Configuration/#selectedIndex)
The index of the selected item.
Expand All @@ -12,10 +12,10 @@ The selected item.
An array of selected items.

- [selectedItemKeys](/Documentation/ApiReference/UI_Components/dxTabs/Configuration/#selectedItemKeys)
An array of selected items' keys.
An array of selected item keys.

- [selectionMode](/Documentation/ApiReference/UI_Components/dxTabs/Configuration/#selectionMode)
Specifies whether the component enables users to select only a single item or multiple items.
Specifies whether the component allows users to select only a single item or multiple items.

- [onSelectionChanged](/Documentation/ApiReference/UI_Components/dxTabs/Configuration/#onSelectionChanged)
A function that is executed when a collection item is selected or selection is canceled.

0 comments on commit 96725f9

Please sign in to comment.