fix docs and add ru version

uvarov-frontend · Aug 21, 2024 · 4829364 · 4829364
1 parent 8953cd6
commit 4829364
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 28 deletions.
diff --git a/docs/en/learn/getting-started/usage.mdx b/docs/en/learn/getting-started/usage.mdx
@@ -21,7 +21,7 @@ As an example in this documentation, an **«id»** attribute with the value **«
 </html>
 ```
 
-## JS
+## JavaScript
 If you installed VanillaCalendar using NPM or Yarn, you need to import JavaScript and the necessary styles. If you connected VanillaCalendar locally or used a CDN, you can skip this step.
 
 ```js
@@ -61,38 +61,38 @@ The full example with html and js files can be viewed in the sandbox by clicking
 ## TypeScript
 If you installed VanillaCalendar using NPM or Yarn and you use TypeScript, the usage is similar to JavaScript except that the types use different imports as shown below.
 
-```typescript
+```ts
 import VanillaCalendar from 'vanilla-calendar-pro';
 import type { IOptions, ISettings } from 'vanilla-calendar-pro/types';
 import 'vanilla-calendar-pro/build/vanilla-calendar.min.css';
 
 // use the types in your code
 import class Example {
-	init() {
-		const options: IOptions = {
-			settings: {
-				selected: {
-					dates: ['2024-08-20'],
-				},
-			},
-		};
-
-		const calendar = new VanillaCalendar('#calendar', options);
-		calendar.init();
-
-		const newOptions: IOptions['settings'] = {
-			selected: {
-				dates: ['2024-08-22'],
-			},
-		};
-
-		this.changeSetting(calendar, newOptions as ISettings);
-		calendar.update({ dates: true });
-	}
-
-	changeSetting(calendar: VanillaCalendar, settings: ISettings) {
-		calendar.settings = { ...calendar.settings, ...settings };
-	}
+  init() {
+    const options: IOptions = {
+      settings: {
+        selected: {
+          dates: ['2024-08-20'],
+        },
+      },
+    };
+
+    const calendar = new VanillaCalendar('#calendar', options);
+    calendar.init();
+
+    const newOptions: IOptions['settings'] = {
+      selected: {
+        dates: ['2024-08-22'],
+      },
+    };
+
+    this.changeSetting(calendar, newOptions as ISettings);
+    calendar.update({ dates: true });
+  }
+
+  changeSetting(calendar: VanillaCalendar, settings: ISettings) {
+    calendar.settings = { ...calendar.settings, ...settings };
+  }
 }
 ```
 

diff --git a/docs/ru/learn/getting-started/usage.mdx b/docs/ru/learn/getting-started/usage.mdx
@@ -21,7 +21,7 @@
 </html>
 ```
 
-## JS
+## JavaScript
 Если вы установили VanillaCalendar с помощью NPM или Yarn, вам нужно импортировать JavaScript и необходимые стили. Если вы подключили VanillaCalendar локально или использовали CDN, вы можете пропустить этот шаг.
 
 ```js
@@ -58,6 +58,44 @@ calendar.init();
 
 <Sandbox example="try-vanilla-calendar" />
 
+## TypeScript
+Если вы установили VanillaCalendar с помощью NPM или Yarn и используете TypeScript, его использование аналогично JavaScript, за исключением того, что типы используют разные импорты, как показано ниже.
+
+```ts
+import VanillaCalendar from 'vanilla-calendar-pro';
+import type { IOptions, ISettings } from 'vanilla-calendar-pro/types';
+import 'vanilla-calendar-pro/build/vanilla-calendar.min.css';
+
+// use the types in your code
+import class Example {
+  init() {
+    const options: IOptions = {
+      settings: {
+        selected: {
+          dates: ['2024-08-20'],
+        },
+      },
+    };
+
+    const calendar = new VanillaCalendar('#calendar', options);
+    calendar.init();
+
+    const newOptions: IOptions['settings'] = {
+      selected: {
+        dates: ['2024-08-22'],
+      },
+    };
+
+    this.changeSetting(calendar, newOptions as ISettings);
+    calendar.update({ dates: true });
+  }
+
+  changeSetting(calendar: VanillaCalendar, settings: ISettings) {
+    calendar.settings = { ...calendar.settings, ...settings };
+  }
+}
+```
+
 ## Локально или CDN
 
 Если вы хотите использовать CDN, вставьте скрипты и стили в ваш HTML-документ из раздела <a href="/docs/learn/getting-started/installation#cdn">«Подключение через CDN»</a>.