[update] grammar and style in Calendar articles

docs/calendar/configuring.md

@@ -8,17 +8,17 @@ description: You can explore the configuration of Calendar in the documentation
 
 ## Calendar modes
 
-There are several modes of displaying Calendar, which are set via the [](calendar/api/calendar_mode_config.md) property:
+Calendar supports several display modes. Set the [](calendar/api/calendar_mode_config.md) property to choose one:
 
-- **"calendar"** - the default mode. The current date (year and month) is shown in the calendar
+- `"calendar"` - the default mode. The calendar shows the current date (year and month).
 
 ~~~js
 const calendar = new dhx.Calendar("calendar_container");
 ~~~
 
 ![Calendar in default day mode showing the month grid for July 2019 in DHTMLX Suite](/img/calendar/calendar_mode.png)
 
-- **"month"** - only months of the current year are shown in the calendar 
+- `"month"` - the calendar shows only months of the current year. 
 
 ~~~js
 const calendar = new dhx.Calendar("calendar_container", {
@@ -28,7 +28,7 @@ const calendar = new dhx.Calendar("calendar_container", {
 
 ![Calendar in month mode listing the twelve months of 2019 in DHTMLX Suite](/img/calendar/month_mode.png)
 
-- **"year"** - only years are shown, including the current one
+- `"year"` - the calendar shows only years, including the current one.
 
 ~~~js
 const calendar = new dhx.Calendar("calendar_container", {
@@ -40,12 +40,12 @@ const calendar = new dhx.Calendar("calendar_container", {
 
 **Related sample**: [Calendar. Calendar modes](https://snippet.dhtmlx.com/n9q0tc0q)
 
-You can also show the calendar in one of the modes using the [](calendar/api/calendar_showdate_method.md) method.
+Call the [](calendar/api/calendar_showdate_method.md) method to show the calendar in one of the modes.
 
 ## Date format
 
-There is a possibility to specify the format of dates in the calendar via the [](calendar/api/calendar_dateformat_config.md) property. The default format is "%d/%m/%y". 
-The full list of available characters used to make formats is provided in the [API reference](calendar/api/calendar_dateformat_config.md).
+Set the [](calendar/api/calendar_dateformat_config.md) property to specify the date format in the calendar. The default format is "%d/%m/%y". 
+The [API reference](calendar/api/calendar_dateformat_config.md) lists all characters available for formats.
 
 ~~~js
 const calendar = new dhx.Calendar("calendar_container", {
@@ -61,8 +61,8 @@ const calendar = new dhx.Calendar("calendar_container", {
 
 **Related sample**: [Calendar. Marked and disabled dates](https://snippet.dhtmlx.com/ic5oeiga)
 
-To disable certain dates, use the [](calendar/api/calendar_disableddates_config.md) setting. The value of the property must be a function that takes a *date* as a parameter and returns a *boolean* value.
-The dates, for which the function returns *true*, are dimmed in the calendar.
+The [](calendar/api/calendar_disableddates_config.md) setting accepts a function that takes a `date` as a parameter and returns a `boolean` value.
+The calendar dims every date for which the function returns `true`.
 
 ~~~js
 const calendar = new dhx.Calendar("calendar_container", {
@@ -88,7 +88,7 @@ const calendar = new dhx.Calendar("calendar_container", {
 
 **Related sample**: [Calendar. The days of this month only](https://snippet.dhtmlx.com/4wi5hbtr)
 
-A default calendar shows both the days of the current month and several days of the previous and next months. You can choose the mode of displaying just the current month by setting the value of the [](calendar/api/calendar_thismonthonly_config.md) configuration property to *true*:
+A default calendar shows both the days of the current month and several days of the previous and next months. Set the [](calendar/api/calendar_thismonthonly_config.md) configuration property to `true` to show only the current month:
 
 ~~~js
 const calendar = new dhx.Calendar("calendar_container", {
@@ -102,7 +102,7 @@ const calendar = new dhx.Calendar("calendar_container", {
 
 **Related sample**: [Calendar. Marked and disabled dates](https://snippet.dhtmlx.com/ic5oeiga)
 
-You can highlight certain dates in the calendar. Set the [](calendar/api/calendar_mark_config.md) property for that. The value of the property must be a function that takes a *date* as a parameter and returns a *string* with the name of a CSS class for marked dates or an empty string for other dates.
+Set the [](calendar/api/calendar_mark_config.md) property to highlight dates in the calendar. The property takes a function that receives a `date` and returns a `string`. Return the name of a CSS class to mark the date, or an empty string to leave it unmarked.
 
 ~~~js
 const calendar = new dhx.Calendar("calendar_container", {
@@ -115,7 +115,7 @@ const calendar = new dhx.Calendar("calendar_container", {
 });
 ~~~
 
-Where "highlight-date" is a CSS class like this:
+Where `highlight-date` is a CSS class like this:
 
 ~~~html
 <style>
@@ -127,7 +127,7 @@ Where "highlight-date" is a CSS class like this:
 
 ## Initial calendar date
 
-By default, a calendar shows a month with the current date. If for some reason you want to open some other date, set the [](calendar/api/calendar_date_config.md) property. It accepts a Date object as a value. It is either the same as [](calendar/api/calendar_value_config.md) (by default), or shows the current date if **value** is not specified.
+The default view is the month that contains the current date. To open a different date, set the [](calendar/api/calendar_date_config.md) property. The property accepts a Date object as a value. Its default equals [](calendar/api/calendar_value_config.md); if you do not specify `value`, the calendar shows the current date.
 
 ~~~js
 const calendar = new dhx.Calendar("calendar_container", {
@@ -139,12 +139,12 @@ const calendar = new dhx.Calendar("calendar_container", {
 
 ## Initially selected date
 
-If you want to create a calendar with an initially selected date, set the [](calendar/api/calendar_value_config.md) property in the configuration object. The property can accept a value in several formats:
+To create a calendar with an initially selected date, set the [](calendar/api/calendar_value_config.md) property in the configuration object. The property can accept a value in several formats:
 
-- as a Date object
-- as a string
-- as an array of Date values for the range mode
-- as an array of string values for the range mode
+- A Date object
+- A string
+- An array of Date values for the range mode
+- An array of string values for the range mode
 
 ~~~js
 // selects a date
@@ -182,10 +182,10 @@ const calendar = new dhx.Calendar("calendar_container", {
 
 **Related sample**: [Calendar. Value initialization](https://snippet.dhtmlx.com/epjjww3l)
 
-The specified date will be highlighted with a round blue marker in the calendar. By default, no date is selected initially.
+The calendar highlights the specified date with a round blue marker. No date is selected initially.
 
 :::note
-Please note that the format of date in the Calendar is defined by the dateFormat option. So, check that you've set the format of date you want to use in the calendar both in the [](calendar/api/calendar_value_config.md) and in the [](calendar/api/calendar_dateformat_config.md) property. Otherwise, the default format ("%d/%m/%y") will be used.
+The `dateFormat` option defines the date format in the Calendar. Check that you set the same date format both in the [](calendar/api/calendar_value_config.md) and in the [](calendar/api/calendar_dateformat_config.md) property. Otherwise, the calendar uses the default format ("%d/%m/%y").
 :::
 
 ## Numbers of weeks
@@ -194,7 +194,7 @@ Please note that the format of date in the Calendar is defined by the dateFormat
 
 **Related sample**: [Calendar. Numbers of weeks](https://snippet.dhtmlx.com/9692gk6n)
 
-If you want to display the numbers of weeks in the calendar, enable the [](calendar/api/calendar_weeknumbers_config.md) property. By default, the numbers are not shown as the property is set to *false*.
+To display week numbers in the calendar, enable the [](calendar/api/calendar_weeknumbers_config.md) property. The property defaults to `false`.
 
 ~~~js
 const calendar = new dhx.Calendar("calendar_container", {
@@ -208,7 +208,7 @@ const calendar = new dhx.Calendar("calendar_container", {
 
 **Related sample**: [Calendar. Range](https://snippet.dhtmlx.com/2mrj53h0)
 
-You have a possibility to create a calendar in the range mode that allows you to select a range of dates in the calendar. To do this, you need to use the [range:true](calendar/api/calendar_range_config.md) option in the calendar configuration object and define an array with the start and end dates of the range.
+You can create a calendar in the range mode that allows you to select a range of dates. Use the [range:true](calendar/api/calendar_range_config.md) option in the calendar configuration object and define an array with the start and end dates of the range.
 
 ~~~js
 const calendar = new dhx.Calendar("calendar_container", {
@@ -219,7 +219,7 @@ const calendar = new dhx.Calendar("calendar_container", {
 ~~~
 
 :::note
-The **value** option should have the array type and contain a pair of values (either Date values or string values) for both dates.
+The `value` option must be an array that contains a pair of values (either Date values or string values) for both dates.
 :::
 
 ## Start of the week
@@ -228,7 +228,7 @@ The **value** option should have the array type and contain a pair of values (ei
 
 **Related sample**: [Calendar. Week start](https://snippet.dhtmlx.com/kaxmurh9)
 
-By default, the first day of the week is Sunday, as the **weekStart:"sunday"** configuration option is used. It is also possible to set Monday as the start of the week, by applying "monday" as a value of the [](calendar/api/calendar_weekstart_config.md) setting:
+The default first day of the week is Sunday (`weekStart:"sunday"`). You can also set Monday as the first day of the week. Apply `"monday"` as the value of the [](calendar/api/calendar_weekstart_config.md) setting:
 
 ~~~js
 const calendar = new dhx.Calendar("calendar_container", {
@@ -238,8 +238,8 @@ const calendar = new dhx.Calendar("calendar_container", {
 
 ## Timepicker
 
-You can add a timepicker into a calendar by enabling the [](calendar/api/calendar_timepicker_config.md) property. By default, a timepicker uses the 24-hour format.
-You can change it to the 12-hour format via the [](calendar/api/calendar_timeformat_config.md) property. It accepts either 12 or 24 value to select the desired time format.
+Enable the [](calendar/api/calendar_timepicker_config.md) property to add a timepicker to a calendar. The default timepicker format is 24-hour.
+Set the [](calendar/api/calendar_timeformat_config.md) property to switch to the 12-hour format. The property accepts either 12 or 24 to select the time format.
 
 ~~~js
 const calendar = new dhx.Calendar("calendar_container", {
@@ -260,7 +260,7 @@ const calendar = new dhx.Calendar("calendar_container", {
 
 **Related sample**: [Calendar. Calendar width](https://snippet.dhtmlx.com/azm0u5ns)
 
-You can set the desired width of a calendar using the [](calendar/api/calendar_width_config.md) configuration property. The default width of Calendar is 250px.
+Set the [](calendar/api/calendar_width_config.md) configuration property to change the calendar width. The default Calendar width is 250px.
 
 ~~~js
 const calendar = new dhx.Calendar("calendar_container", {

docs/calendar/customization.md

@@ -8,15 +8,15 @@ description: You can explore the customization of Calendar in the documentation
 
 ## Styling Calendar
 
-There is a possibility to make changes in the look and feel of a calendar. For example, change its background color:
+You can change the look and feel of a calendar. For example, change its background color:
 
 ![Calendar month view styled with a custom teal primary color in DHTMLX Suite](/img/calendar/styled_calendar.png)
 
 **Related sample**: [Calendar. Styling (custom CSS)](https://snippet.dhtmlx.com/2045cbe1)
 
-For this you need to take the following steps:
+Follow these steps:
 
-- add a new CSS class(es) with desired settings in the <style> section of your HTML page or in your file with styles (don't forget to include your file on the page in this case)
+- Add one or more CSS classes in the `<style>` section of your HTML page or in a separate stylesheet linked on the page:
 
 ~~~html
 <style>
@@ -30,7 +30,7 @@ For this you need to take the following steps:
 </style>
 ~~~
 
-- specify the name of the created CSS class (or names of classes separated by spaces) as the value of the [](calendar/api/calendar_css_config.md) property in the Calendar configuration:
+- Assign the class name (or several names separated by spaces) to the [](calendar/api/calendar_css_config.md) property:
 
 ~~~js
 const calendar = new dhx.Calendar("calendar_container", {
@@ -60,7 +60,7 @@ For example:
 
 **Related sample**: [Calendar. Custom styles for selected date](https://snippet.dhtmlx.com/9u0ix3na)
 
-You can apply custom styling to dates selected in a calender as well as to [date ranges](calendar/operating_calendar.md#linking-two-calendars). There are system styles you need to change for this purpose:
+You can style selected dates and [date ranges](calendar/operating_calendar.md#linking-two-calendars) with your own CSS. Override these system styles:
 
 ~~~html
 <style>

docs/calendar/datepicker.md

@@ -6,32 +6,32 @@ description: You can explore the DatePicker of Calendar in the documentation of
 
 # DatePicker
 
-You can use DHTMLX Calendar as a date picker by putting it inside a popup. 
+Put DHTMLX Calendar inside a popup to create a date picker. 
 
 ![Calendar used as a date picker popup attached to a date input field in DHTMLX Suite](/img/calendar/date_picker.png)
 
-First, you should create a popup and then attach a calendar into it. Follow the steps below:
+Follow the steps below:
 
-1\. Create an input to enter a date into and give it the id "date-input":
+1\. Create an input field for the date and give it the id `date-input`:
 
 ~~~html
 <input type="text" id="date-input" style="width: 200px;" readonly/>
 ~~~
 
-2\. Use corresponding object constructors to create a calendar and a popup objects. Note that in this case *null* is used instead of container for Calendar:
+2\. Use the `Calendar` and `Popup` constructors to create the two objects. Note that `Calendar` takes `null` instead of a container:
 
 ~~~js
 const calendar = new dhx.Calendar(null, {dateFormat: "%d/%m/%y"});
 const popup = new dhx.Popup();
 ~~~
 
-3\. Attach the calendar to the popup using the [](popup/api/popup_attach_method.md) method of Popup:
+3\. Call the [](popup/api/popup_attach_method.md) method of `Popup` to attach the calendar:
 
 ~~~js
 popup.attach(calendar);
 ~~~
 
-4\. Use the [](popup/api/popup_show_method.md) method of Popup inside a click handler to define that a popup with calendar will open on click in the "date-input" input:
+4\. Add a click handler to the `date-input` field. Inside the handler, call the [](popup/api/popup_show_method.md) method of `Popup` to open the popup:
 
 ~~~js
 const dateInput = document.getElementById("date-input");
@@ -40,7 +40,7 @@ dateInput.addEventListener("click", function() {
 });
 ~~~
 
-5\. Define the logic of closing the popup with calendar using the [](popup/api/popup_hide_method.md) method of Popup. For example, on selecting a new date in the calendar:
+5\. Close the popup with the [](popup/api/popup_hide_method.md) method of `Popup`. For example, close it when the user selects a new date:
 
 ~~~js
 calendar.events.on("change", function() {