[update] Migration doc from v2.3.1 to v3.1.1

.github/workflows/main.yml

@@ -18,13 +18,13 @@ jobs:
     # Steps represent a sequence of tasks that will be executed as part of the job
     steps:
       # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - id: vars
         run: echo ::set-output name=short_ref::${GITHUB_REF#refs/*/}
 
-      - uses: actions/setup-node@v2
+      - uses: actions/setup-node@v4
         with:
-          node-version: '16.15.0'
+          node-version: '18.19.0'
 
       - run: yarn install
       - run: yarn build

docs/ajax/api/ajax_get_method.md

@@ -25,9 +25,9 @@ A "promise" of the data object.
 
 @example:
 dhx.ajax.get(url).then(function (data) {
-	console.log(data);
+    console.log(data);
 }).catch(function (err) {
-	console.log(err);
+    console.log(err);
 });
 
 @descr:

docs/ajax/api/ajax_post_method.md

@@ -25,9 +25,9 @@ A "promise" of the data object.
 
 @example:
 dhx.ajax.post(url, {name: "foo", title: "bar"}).then(function (data) {
-	console.log(data);
+    console.log(data);
 }).catch(function (err) {
-	console.log(err);
+    console.log(err);
 });
 
 @descr:

docs/ajax/api/ajax_put_method.md

@@ -26,9 +26,9 @@ A "promise" of the data object.
 
 @example:
 dhx.ajax.put(url, {id: "1", updated: true}).then(function (data) {
-	console.log(data);
+    console.log(data);
 }).catch(function (err) {
-	console.log(err);
+    console.log(err);
 });
 
 @descr:

docs/calendar/api/calendar_beforechange_event.md

@@ -20,8 +20,8 @@ Return `true` to allow changing date selection, `false` to prevent changing date
 
 @example:
 calendar.events.on("beforeChange",function(date, oldDate, byClick){
-	if (date > new Date())
-    	return false;
+    if (date > new Date())
+        return false;
 });
 
 @descr:

docs/calendar/api/calendar_css_config.md

@@ -15,15 +15,15 @@ description: You can explore the css config of Calendar in the documentation of
 
 ~~~html
 <style>
-	.custom {
+    .custom {
         --dhx-color-primary: #118d8d;
     }
 </style>
 
 <script>
-	const calendar = new dhx.Calendar("calendar_container", { 
-		css: "custom dhx_widget--bordered"
-	});
+    const calendar = new dhx.Calendar("calendar_container", { 
+        css: "custom dhx_widget--bordered"
+    });
 </script>
 ~~~
 

docs/calendar/api/calendar_disableddates_config.md

@@ -19,18 +19,18 @@ and must return a boolean value to define whether a passed date should be blocke
 
 @example:
 const calendar = new dhx.Calendar("calendar_container", {
-	disabledDates: function(date) {
-		const disabled = {
-			0: true,
-			1: true,
-			2: false,
-			3: false,
-			4: false,
-			5: false,
-			6: true
-		}
-		return disabled[date.getDay()];
-	}
+    disabledDates: function(date) {
+        const disabled = {
+            0: true,
+            1: true,
+            2: false,
+            3: false,
+            4: false,
+            5: false,
+            6: true
+        }
+        return disabled[date.getDay()];
+    }
 });
 
 

docs/calendar/api/calendar_range_config.md

@@ -14,8 +14,8 @@ description: You can explore the range config of Calendar in the documentation o
 
 @example:
 const calendar = new dhx.Calendar("calendar_container", {
-	css: "dhx_widget--bordered",
-	range: true
+    css: "dhx_widget--bordered",
+    range: true
 });
 
 @descr:

docs/calendar/api/calendar_showdate_method.md

@@ -23,19 +23,19 @@ calendar.showDate(new Date(2020,11,12));
 The **modes** are:
 
 <table>
-	<tbody>
+    <tbody>
         <tr>
-			<td><b>"calendar"</b></td>
-			<td>shows the days of a month, the default mode</td>
-		</tr>
+            <td><b>"calendar"</b></td>
+            <td>shows the days of a month, the default mode</td>
+        </tr>
         <tr>
-			<td><b>"month"</b></td>
-			<td>allows selecting a month of a year</td>
-		</tr>
+            <td><b>"month"</b></td>
+            <td>allows selecting a month of a year</td>
+        </tr>
         <tr>
-			<td><b>"year"</b></td>
-			<td>allows selecting a year</td>
-		</tr>
+            <td><b>"year"</b></td>
+            <td>allows selecting a year</td>
+        </tr>
     </tbody>
 </table>
 

docs/calendar/configuring.md

@@ -66,19 +66,19 @@ The dates, for which the function returns *true*, are dimmed in the calendar.
 
 ~~~js
 const calendar = new dhx.Calendar("calendar_container", {
-	disabledDates: function(date) {
-		const disabled = {
-			0: true,
-			1: true,
-			2: false,
-			3: false,
-			4: false,
-			5: false,
-			6: true
-		}
-		return disabled[date.getDay()];
-	},
-	css: "dhx_widget--bordered"
+    disabledDates: function(date) {
+        const disabled = {
+            0: true,
+            1: true,
+            2: false,
+            3: false,
+            4: false,
+            5: false,
+            6: true
+        }
+        return disabled[date.getDay()];
+    },
+    css: "dhx_widget--bordered"
 });
 ~~~
 
@@ -106,22 +106,22 @@ You can highlight certain dates in the calendar. Set the [](calendar/api/calenda
 
 ~~~js
 const calendar = new dhx.Calendar("calendar_container", {
-	mark: function(date) {
-		if (date.getDay() === 6) {
-			return "highlight-date";
-		}
-	},
-	css: "dhx_widget--bordered"
+    mark: function(date) {
+        if (date.getDay() === 6) {
+            return "highlight-date";
+        }
+    },
+    css: "dhx_widget--bordered"
 });
 ~~~
 
 Where "highlight-date" is a CSS class like this:
 
 ~~~html
 <style>
-	.highlight-date {
-		color: #fff;
-	}
+    .highlight-date {
+        color: #fff;
+    }
 </style>
 ~~~
 
@@ -212,8 +212,8 @@ You have a possibility to create a calendar in the range mode that allows you to
 
 ~~~js
 const calendar = new dhx.Calendar("calendar_container", {
-	css: "dhx_widget--bordered",
-	range: true,
+    css: "dhx_widget--bordered",
+    range: true,
     value: ["25/06/20", "07/07/20"]
 });
 ~~~
@@ -243,7 +243,7 @@ You can change it to the 12-hour format via the [](calendar/api/calendar_timefor
 
 ~~~js
 const calendar = new dhx.Calendar("calendar_container", {
-	timePicker: true,
+    timePicker: true,
     timeFormat: 12 // the 12-hour format for the timepicker
 });
 ~~~

docs/calendar/customization.md

@@ -20,13 +20,13 @@ For this you need to take the following steps:
 
 ~~~html
 <style>
-	.my_first_class {
-		/*some styles*/
-	}
+    .my_first_class {
+        /*some styles*/
+    }
 
     .my_second_class {
-		/*some styles*/
-	}
+        /*some styles*/
+    }
 </style>
 ~~~
 
@@ -42,15 +42,15 @@ For example:
 
 ~~~html
 <style>
-	.custom {
+    .custom {
         --dhx-color-primary: #118d8d;
     }
 </style>
 
 <script>
-	const calendar = new dhx.Calendar("calendar_container", { 
-		css: "custom dhx_widget--bordered"
-	});
+    const calendar = new dhx.Calendar("calendar_container", { 
+        css: "custom dhx_widget--bordered"
+    });
 </script>
 ~~~
 
@@ -64,19 +64,19 @@ You can apply custom styling to dates selected in a calender as well as to [date
 
 ~~~html
 <style>
-	/* system style for selected dates */
-	.dhx_calendar-day--selected::before {
-		background-color: #ff5252;
-	}
-
-	/* system style for a date range */
-	.dhx_calendar-day--in-range:after {
-		background-color: #ffe7e7;
- 	}
+    /* system style for selected dates */
+    .dhx_calendar-day--selected::before {
+        background-color: #ff5252;
+    }
+
+    /* system style for a date range */
+    .dhx_calendar-day--in-range:after {
+        background-color: #ffe7e7;
+     }
 </style>
 
 <script>
-	const calendar1 = new dhx.Calendar("calendar1", {css: "dhx_widget--bordered"});
-	const calendar2 = new dhx.Calendar("calendar2", {css: "dhx_widget--bordered"});
+    const calendar1 = new dhx.Calendar("calendar1", {css: "dhx_widget--bordered"});
+    const calendar2 = new dhx.Calendar("calendar2", {css: "dhx_widget--bordered"});
 </script>
 ~~~

docs/calendar/datepicker.md

@@ -36,16 +36,16 @@ popup.attach(calendar);
 ~~~js
 const dateInput = document.getElementById("date-input");
 dateInput.addEventListener("click", function() {
-	popup.show(dateInput);
+    popup.show(dateInput);
 });
 ~~~
 
 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:
 
 ~~~js
 calendar.events.on("change", function() {
-	dateInput.value = calendar.getValue();
-	popup.hide();
+    dateInput.value = calendar.getValue();
+    popup.hide();
 });
 ~~~
 

docs/calendar/localizing_calendar.md

@@ -16,17 +16,17 @@ The default locale for Calendar looks like this:
 
 ~~~js
 const en = {
-	// short names of months
-	monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", 
+    // short names of months
+    monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", 
                  "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
     // full names of months
-	months: ["January", "February", "March", "April", "May", "June", 
+    months: ["January", "February", "March", "April", "May", "June", 
             "July", "August", "September", "October", "November", "December"],
     // short names of days
-	daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
+    daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
     // full names of days
-	days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", 
-    			"Friday", "Saturday"]
+    days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", 
+                "Friday", "Saturday"]
 };
 ~~~
 
@@ -38,17 +38,17 @@ To use a different locale, your need to:
 
 ~~~js
 const de = {
-	// short names of months
-	monthsShort: ["Jan", "Feb", "Mär", "Apr", "Mai", "Jun", 
-    			 "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"],
+    // short names of months
+    monthsShort: ["Jan", "Feb", "Mär", "Apr", "Mai", "Jun", 
+                 "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"],
     // full names of months             
-	months: ["Januar", "Februar", "März", "April", "Mai", "Juni", 
-    		"Juli", "August", "September", "Oktober", "November", "Dezember"],
+    months: ["Januar", "Februar", "März", "April", "Mai", "Juni", 
+            "Juli", "August", "September", "Oktober", "November", "Dezember"],
     // short names of days
-	daysShort: ["Son", "Mon", "Die", "Mit", "Don", "Fre", "Sam"],
+    daysShort: ["Son", "Mon", "Die", "Mit", "Don", "Fre", "Sam"],
     // full names of days
-	days: ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", 
-    			"Freitag", "Samstag"]
+    days: ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", 
+                "Freitag", "Samstag"]
 };
 ~~~