From 8953cd640753c0621a672ddd4e1a3351f75ef0a9 Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Tue, 20 Aug 2024 23:11:46 -0400 Subject: [PATCH 1/2] docs: add TypeScript usage with Types imports demo --- docs/en/learn/getting-started/usage.mdx | 38 +++++++++++++++++++++++++ 1 file changed, 38 insertions(+) diff --git a/docs/en/learn/getting-started/usage.mdx b/docs/en/learn/getting-started/usage.mdx index d6baf6d8..aa20430c 100644 --- a/docs/en/learn/getting-started/usage.mdx +++ b/docs/en/learn/getting-started/usage.mdx @@ -58,6 +58,44 @@ 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 +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 }; + } +} +``` + ## Locally or via CDN If you want to use CDN, insert the scripts and styles into your HTML document from the «Connection via CDN». From 4829364ebd3f3da78a60d20e52031d271952270d Mon Sep 17 00:00:00 2001 From: Yury Uvarov Date: Wed, 21 Aug 2024 10:01:39 +0300 Subject: [PATCH 2/2] fix docs and add ru version --- docs/en/learn/getting-started/usage.mdx | 54 ++++++++++++------------- docs/ru/learn/getting-started/usage.mdx | 40 +++++++++++++++++- 2 files changed, 66 insertions(+), 28 deletions(-) diff --git a/docs/en/learn/getting-started/usage.mdx b/docs/en/learn/getting-started/usage.mdx index aa20430c..2bce4b05 100644 --- 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 **« ``` -## 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 index ae752da4..15e84118 100644 --- a/docs/ru/learn/getting-started/usage.mdx +++ b/docs/ru/learn/getting-started/usage.mdx @@ -21,7 +21,7 @@ ``` -## JS +## JavaScript Если вы установили VanillaCalendar с помощью NPM или Yarn, вам нужно импортировать JavaScript и необходимые стили. Если вы подключили VanillaCalendar локально или использовали CDN, вы можете пропустить этот шаг. ```js @@ -58,6 +58,44 @@ calendar.init(); +## 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-документ из раздела «Подключение через CDN».