From 7e54ce4e311fe2e27d2852291b4c1dbad80f9d7c Mon Sep 17 00:00:00 2001 From: Anton Yudin Date: Thu, 4 Sep 2025 14:28:11 +0300 Subject: [PATCH 1/4] algolia add --- .github/workflows/main.yml | 23 ++++++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index f0872905..982db3f7 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -41,4 +41,25 @@ jobs: push: true tags: registry.webix.io/suite-docs-alt:${{ steps.vars.outputs.short_ref }} - - run: curl "https://docs.dhtmlx.com/hooks/restart-docker?token=${{ secrets.RESTART_TOKEN }}&project=docs-suite-alt-${{ steps.vars.outputs.short_ref }}" \ No newline at end of file + - run: curl "https://docs.dhtmlx.com/hooks/restart-docker?token=${{ secrets.RESTART_TOKEN }}&project=docs-suite-alt-${{ steps.vars.outputs.short_ref }}" + + algolia-crawl: + runs-on: ubuntu-latest + needs: build + steps: + - name: Checkout Repo + uses: actions/checkout@v4 + + - name: Wait for Deployment + run: sleep 30 + + - name: Algolia Crawler Creation and Crawl + uses: algolia/algoliasearch-crawler-github-actions@v1.0.10 + with: + crawler-user-id: ${{ secrets.CRAWLER_USER_ID }} + crawler-api-key: ${{ secrets.CRAWLER_API_KEY }} + algolia-app-id: ${{ secrets.ALGOLIA_APP_ID }} + algolia-api-key: ${{ secrets.ALGOLIA_API_KEY }} + site-url: 'https://docs.dhtmlx.com/suite/' + crawler-name: 'Suite Docs Crawler' + override-config: true \ No newline at end of file From b4214522f9a432807bb9b9a6f445919ff6f3515a Mon Sep 17 00:00:00 2001 From: Anton Yudin Date: Thu, 4 Sep 2025 14:30:25 +0300 Subject: [PATCH 2/4] algolia fix --- .github/workflows/main.yml | 37 ++++++++++++++++++------------------- 1 file changed, 18 insertions(+), 19 deletions(-) diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index 982db3f7..e587673a 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -42,24 +42,23 @@ jobs: tags: registry.webix.io/suite-docs-alt:${{ steps.vars.outputs.short_ref }} - run: curl "https://docs.dhtmlx.com/hooks/restart-docker?token=${{ secrets.RESTART_TOKEN }}&project=docs-suite-alt-${{ steps.vars.outputs.short_ref }}" +algolia-crawl: + runs-on: ubuntu-latest + needs: build + steps: + - name: Checkout Repo + uses: actions/checkout@v4 - algolia-crawl: - runs-on: ubuntu-latest - needs: build - steps: - - name: Checkout Repo - uses: actions/checkout@v4 - - - name: Wait for Deployment - run: sleep 30 + - name: Wait for Deployment + run: sleep 30 - - name: Algolia Crawler Creation and Crawl - uses: algolia/algoliasearch-crawler-github-actions@v1.0.10 - with: - crawler-user-id: ${{ secrets.CRAWLER_USER_ID }} - crawler-api-key: ${{ secrets.CRAWLER_API_KEY }} - algolia-app-id: ${{ secrets.ALGOLIA_APP_ID }} - algolia-api-key: ${{ secrets.ALGOLIA_API_KEY }} - site-url: 'https://docs.dhtmlx.com/suite/' - crawler-name: 'Suite Docs Crawler' - override-config: true \ No newline at end of file + - name: Algolia Crawler Creation and Crawl + uses: algolia/algoliasearch-crawler-github-actions@v1.0.10 + with: + crawler-user-id: ${{ secrets.CRAWLER_USER_ID }} + crawler-api-key: ${{ secrets.CRAWLER_API_KEY }} + algolia-app-id: ${{ secrets.ALGOLIA_APP_ID }} + algolia-api-key: ${{ secrets.ALGOLIA_API_KEY }} + site-url: 'https://docs.dhtmlx.com/suite/' + crawler-name: 'Suite Docs Crawler' + override-config: true \ No newline at end of file From 41f2b581e230fd5ec8370e3b362bb78367993857 Mon Sep 17 00:00:00 2001 From: Anton Yudin Date: Thu, 4 Sep 2025 14:34:27 +0300 Subject: [PATCH 3/4] algolia fix2 --- .github/workflows/main.yml | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index e587673a..4abc5f80 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -42,7 +42,8 @@ jobs: tags: registry.webix.io/suite-docs-alt:${{ steps.vars.outputs.short_ref }} - run: curl "https://docs.dhtmlx.com/hooks/restart-docker?token=${{ secrets.RESTART_TOKEN }}&project=docs-suite-alt-${{ steps.vars.outputs.short_ref }}" -algolia-crawl: + + algolia-crawl: runs-on: ubuntu-latest needs: build steps: From 4789234a0df529a2b7110ea573ddf21a38cc4c53 Mon Sep 17 00:00:00 2001 From: Masha_Rudenko Date: Mon, 29 Sep 2025 10:10:39 +0300 Subject: [PATCH 4/4] [update] remove the unused calendar folder --- docs/calendar2/api/api_overview.md | 51 ---- .../api/calendar_beforechange_event.md | 35 --- .../api/calendar_cancelclick_event.md | 21 -- docs/calendar2/api/calendar_change_event.md | 32 -- docs/calendar2/api/calendar_clear_method.md | 19 -- docs/calendar2/api/calendar_css_config.md | 42 --- docs/calendar2/api/calendar_date_config.md | 29 -- .../api/calendar_dateformat_config.md | 51 ---- .../api/calendar_datemouseover_event.md | 34 --- .../api/calendar_destructor_method.md | 17 -- .../api/calendar_disableddates_config.md | 44 --- .../api/calendar_getcurrentmode_method.md | 31 -- .../calendar2/api/calendar_getvalue_method.md | 46 --- docs/calendar2/api/calendar_link_method.md | 23 -- docs/calendar2/api/calendar_mark_config.md | 45 --- docs/calendar2/api/calendar_mode_config.md | 26 -- .../api/calendar_modechange_event.md | 23 -- .../api/calendar_monthselected_event.md | 25 -- docs/calendar2/api/calendar_paint_method.md | 15 - docs/calendar2/api/calendar_range_config.md | 25 -- .../calendar2/api/calendar_setvalue_method.md | 52 ---- .../calendar2/api/calendar_showdate_method.md | 59 ---- .../api/calendar_thismonthonly_config.md | 29 -- .../api/calendar_timeformat_config.md | 32 -- .../api/calendar_timepicker_config.md | 29 -- docs/calendar2/api/calendar_value_config.md | 61 ---- .../api/calendar_weeknumbers_config.md | 26 -- .../api/calendar_weekstart_config.md | 27 -- docs/calendar2/api/calendar_width_config.md | 27 -- .../api/calendar_yearselected_event.md | 25 -- docs/calendar2/configuring.mdx | 282 ------------------ docs/calendar2/customization.mdx | 81 ----- docs/calendar2/datepicker.mdx | 49 --- .../calendar_modes.md | 56 ---- .../calendar_stylization.md | 87 ------ .../current_month_only.md | 10 - .../functionality_and_features/date_picker.md | 20 -- .../dates_format.md | 11 - .../disabled_dates.md | 9 - .../functionality_and_features/events.md | 67 ----- .../highlighted_dates.md | 11 - .../initial_date.md | 12 - .../localization.md | 72 ----- .../functionality_and_features/ranges_mode.md | 23 -- .../selected_date.md | 117 -------- .../functionality_and_features/start_day.md | 9 - .../functionality_and_features/timepicker.md | 9 - .../functionality_and_features/tooltips.md | 10 - .../week_numbers.md | 10 - .../functionality_and_features/width.md | 8 - docs/calendar2/handling_events.md | 62 ---- docs/calendar2/how_to_start.mdx | 79 ----- docs/calendar2/index.md | 134 --------- docs/calendar2/localizing_calendar.mdx | 72 ----- docs/calendar2/operating_calendar.md | 183 ------------ 55 files changed, 2484 deletions(-) delete mode 100644 docs/calendar2/api/api_overview.md delete mode 100644 docs/calendar2/api/calendar_beforechange_event.md delete mode 100644 docs/calendar2/api/calendar_cancelclick_event.md delete mode 100644 docs/calendar2/api/calendar_change_event.md delete mode 100644 docs/calendar2/api/calendar_clear_method.md delete mode 100644 docs/calendar2/api/calendar_css_config.md delete mode 100644 docs/calendar2/api/calendar_date_config.md delete mode 100644 docs/calendar2/api/calendar_dateformat_config.md delete mode 100644 docs/calendar2/api/calendar_datemouseover_event.md delete mode 100644 docs/calendar2/api/calendar_destructor_method.md delete mode 100644 docs/calendar2/api/calendar_disableddates_config.md delete mode 100644 docs/calendar2/api/calendar_getcurrentmode_method.md delete mode 100644 docs/calendar2/api/calendar_getvalue_method.md delete mode 100644 docs/calendar2/api/calendar_link_method.md delete mode 100644 docs/calendar2/api/calendar_mark_config.md delete mode 100644 docs/calendar2/api/calendar_mode_config.md delete mode 100644 docs/calendar2/api/calendar_modechange_event.md delete mode 100644 docs/calendar2/api/calendar_monthselected_event.md delete mode 100644 docs/calendar2/api/calendar_paint_method.md delete mode 100644 docs/calendar2/api/calendar_range_config.md delete mode 100644 docs/calendar2/api/calendar_setvalue_method.md delete mode 100644 docs/calendar2/api/calendar_showdate_method.md delete mode 100644 docs/calendar2/api/calendar_thismonthonly_config.md delete mode 100644 docs/calendar2/api/calendar_timeformat_config.md delete mode 100644 docs/calendar2/api/calendar_timepicker_config.md delete mode 100644 docs/calendar2/api/calendar_value_config.md delete mode 100644 docs/calendar2/api/calendar_weeknumbers_config.md delete mode 100644 docs/calendar2/api/calendar_weekstart_config.md delete mode 100644 docs/calendar2/api/calendar_width_config.md delete mode 100644 docs/calendar2/api/calendar_yearselected_event.md delete mode 100644 docs/calendar2/configuring.mdx delete mode 100644 docs/calendar2/customization.mdx delete mode 100644 docs/calendar2/datepicker.mdx delete mode 100644 docs/calendar2/functionality_and_features/calendar_modes.md delete mode 100644 docs/calendar2/functionality_and_features/calendar_stylization.md delete mode 100644 docs/calendar2/functionality_and_features/current_month_only.md delete mode 100644 docs/calendar2/functionality_and_features/date_picker.md delete mode 100644 docs/calendar2/functionality_and_features/dates_format.md delete mode 100644 docs/calendar2/functionality_and_features/disabled_dates.md delete mode 100644 docs/calendar2/functionality_and_features/events.md delete mode 100644 docs/calendar2/functionality_and_features/highlighted_dates.md delete mode 100644 docs/calendar2/functionality_and_features/initial_date.md delete mode 100644 docs/calendar2/functionality_and_features/localization.md delete mode 100644 docs/calendar2/functionality_and_features/ranges_mode.md delete mode 100644 docs/calendar2/functionality_and_features/selected_date.md delete mode 100644 docs/calendar2/functionality_and_features/start_day.md delete mode 100644 docs/calendar2/functionality_and_features/timepicker.md delete mode 100644 docs/calendar2/functionality_and_features/tooltips.md delete mode 100644 docs/calendar2/functionality_and_features/week_numbers.md delete mode 100644 docs/calendar2/functionality_and_features/width.md delete mode 100644 docs/calendar2/handling_events.md delete mode 100644 docs/calendar2/how_to_start.mdx delete mode 100644 docs/calendar2/index.md delete mode 100644 docs/calendar2/localizing_calendar.mdx delete mode 100644 docs/calendar2/operating_calendar.md diff --git a/docs/calendar2/api/api_overview.md b/docs/calendar2/api/api_overview.md deleted file mode 100644 index 0ee194be..00000000 --- a/docs/calendar2/api/api_overview.md +++ /dev/null @@ -1,51 +0,0 @@ ---- -sidebar_label: API overview -title: Calendar API overview -description: DHTMLX Calendar is a smart datepicker solution for websites or applications that allows selecting dates, ranges of dates, and time. It's easily configurable and highly customizable. ---- - - ## Methods - -| Name | Description | -| ------------------------------------------------------ | ------------------------------------------------------------------------------ | -| [todo](calendar/api/calendar_clear_method.md) | clears the value set in the calendar | -| [todo](calendar/api/calendar_destructor_method.md) | removes a calendar instance and releases occupied resources | -| [todo](calendar/api/calendar_getcurrentmode_method.md) | returns the current mode of displaying Calendar | -| [todo](calendar/api/calendar_getvalue_method.md) | returns the selected date | -| [todo](calendar/api/calendar_link_method.md) | links a calendar to another calendar for selecting a date range | -| [todo](calendar/api/calendar_paint_method.md) | repaints a calendar on a page | -| [todo](calendar/api/calendar_setvalue_method.md) | selects a date in the calendar | -| [todo](calendar/api/calendar_showdate_method.md) | shows a specified date and/or opens the calendar in one of the available modes | - - - ## Events - -| Name | Description | -| ---------------------------------------------------- | -------------------------------------------------- | -| [todo](calendar/api/calendar_beforechange_event.md) | fires before the change of date selection | -| [todo](calendar/api/calendar_cancelclick_event.md) | fires when the user clicks on the "Cancel" control | -| [todo](calendar/api/calendar_change_event.md) | fires on change of date selection | -| [todo](calendar/api/calendar_datemouseover_event.md) | fires when the mouse pointer is over a date | -| [todo](calendar/api/calendar_modechange_event.md) | fires on change of the calendar mode | -| [todo](calendar/api/calendar_monthselected_event.md) | fires after a month was selected in the calendar | -| [todo](calendar/api/calendar_yearselected_event.md) | fires after a year was selected in the calendar | - - - ## Properties - -| Name | Description | -| ---------------------------------------------- | ------------------------------------------------------------------------------- | -| [todo](calendar/api/calendar_css_config.md) | adds style classes to Calendar | -| [todo](calendar/api/calendar_date_config.md) | defines the date that will be opened when the calendar is created | -| [todo](calendar/api/calendar_dateformat_config.md) | defines the format of dates in Calendar | -| [todo](calendar/api/calendar_disableddates_config.md) | allows disabling some date intervals, day labels are dimmed | -| [todo](calendar/api/calendar_mark_config.md) | adds a CSS class to specific days | -| [todo](calendar/api/calendar_mode_config.md) | the mode of Calendar initialization | -| [todo](calendar/api/calendar_range_config.md) | enables/disables the possibility to select a range of dates on the calendar | -| [todo](calendar/api/calendar_thismonthonly_config.md) | hides dates of the previous/next months relative to the currently displayed one | -| [todo](calendar/api/calendar_timeformat_config.md) | defines the time format for a timepicker in the calendar | -| [todo](calendar/api/calendar_timepicker_config.md) | adds a timepicker into the calendar | -| [todo](calendar/api/calendar_value_config.md) | selects the day (adds a round blue marker) | -| [todo](calendar/api/calendar_weeknumbers_config.md) | defines whether to show the numbers of weeks | -| [todo](calendar/api/calendar_weekstart_config.md) | sets the starting day of the week | -| [todo](calendar/api/calendar_width_config.md) | sets the width of the calendar | diff --git a/docs/calendar2/api/calendar_beforechange_event.md b/docs/calendar2/api/calendar_beforechange_event.md deleted file mode 100644 index 7689333f..00000000 --- a/docs/calendar2/api/calendar_beforechange_event.md +++ /dev/null @@ -1,35 +0,0 @@ ---- -sidebar_label: beforeChange -title: beforeChange ---- - -@short: fires before the change of date selection - -@signature: beforeChange: (date: Date, oldDate: Date, byClick: boolean) => boolean | void; - -@params: -- date Date the newly selected date -- oldDate Date the previously selected date -- byClick boolean defines whether the change happened because of a click on a date (true), or due to an API call (false) - -@returns: -- result boolean true - to allow changing date selection, false - to prevent changing date selection - -@example: -calendar.events.on("BeforeChange",function(date, oldDate, click){ - if (date > new Date()) - return false; -}); - - - -@descr: -You can block selection of particular dates by returning *false* from the event handler. - -@related: -calendar/handling_events.md - -**Related sample**: -- [Calendar. Events](https://snippet.dhtmlx.com/7kj7fiek) - -@relatedapi:calendar/api/calendar_change_event.md \ No newline at end of file diff --git a/docs/calendar2/api/calendar_cancelclick_event.md b/docs/calendar2/api/calendar_cancelclick_event.md deleted file mode 100644 index f5b99c88..00000000 --- a/docs/calendar2/api/calendar_cancelclick_event.md +++ /dev/null @@ -1,21 +0,0 @@ ---- -sidebar_label: cancelClick -title: cancelClick ---- - -@short: fires when the user clicks on the "Cancel" control - -@signature: cancelClick: () => void; - -@example: -calendar.events.on("CancelClick", function() { - // your logic here -}); - - - -@descr: - -**Related sample**: -- [Calendar. Events](https://snippet.dhtmlx.com/7kj7fiek) - diff --git a/docs/calendar2/api/calendar_change_event.md b/docs/calendar2/api/calendar_change_event.md deleted file mode 100644 index ab15ebf5..00000000 --- a/docs/calendar2/api/calendar_change_event.md +++ /dev/null @@ -1,32 +0,0 @@ ---- -sidebar_label: change -title: change ---- - -@short: fires on change of date selection - -@signature: change: (date: Date, oldDate: Date, byClick: boolean) => void; - -@params: -- date Date the newly selected date -- oldDate Date the previously selected date -- click boolean defines whether the change happened because of a click on a date (true), or due to an API call (false) - - -@example: -calendar.events.on("Change",function(date, oldDate, click){ - console.log("Change selection from "+oldDate+" to "+date); - console.log(click); -}); - - - -@descr: - -@relatedapi:calendar/api/calendar_beforechange_event.md - -@related: -calendar/handling_events.md - -**Related sample**: -- [Calendar. Events](https://snippet.dhtmlx.com/7kj7fiek) \ No newline at end of file diff --git a/docs/calendar2/api/calendar_clear_method.md b/docs/calendar2/api/calendar_clear_method.md deleted file mode 100644 index 9165908e..00000000 --- a/docs/calendar2/api/calendar_clear_method.md +++ /dev/null @@ -1,19 +0,0 @@ ---- -sidebar_label: clear -title: clear ---- - -@short: clears the value set in the calendar - -@signature: clear(): void; - -@example: -calendar.clear() - - - -@descr: - -**Related sample**: [Calendar. Clear value](https://snippet.dhtmlx.com/zu2n05at) - -@changelog: added in v6.4 diff --git a/docs/calendar2/api/calendar_css_config.md b/docs/calendar2/api/calendar_css_config.md deleted file mode 100644 index bc510745..00000000 --- a/docs/calendar2/api/calendar_css_config.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -sidebar_label: css -title: css ---- - -@short: adds style classes to Calendar - -@signature: css?: string; - -@example: - - -var calendar = new dhx.Calendar({ - css:"my_first_class my_second_class" -}); - - - -@descr: -**Related sample**: [Calendar. Styling (custom CSS)](https://snippet.dhtmlx.com/2045cbe1) - -Note, that the DHTMLX library provides [a set of own CSS classes](helpers/base_elements.md#list-of-css-classes-for-styling-a-widget) that you can also apply to change the appearance of Calendar: - -~~~js -var calendar = new dhx.Calendar({ - css: "dhx_widget--bg_white dhx_widget--bordered" -}); -~~~ - - - -@related: -calendar/customization.md#stylingcalendar -calendar/how_to_start.md#initialize-calendar \ No newline at end of file diff --git a/docs/calendar2/api/calendar_date_config.md b/docs/calendar2/api/calendar_date_config.md deleted file mode 100644 index 432d6ea7..00000000 --- a/docs/calendar2/api/calendar_date_config.md +++ /dev/null @@ -1,29 +0,0 @@ ---- -sidebar_label: date -title: date ---- - -@short: defines the date that will be opened when the calendar is created - -@signature: date?: Date | string; - - -@example: -var calendar = new dhx.Calendar("calendar_container", { - value: new Date(), - date: new Date(2019, 0, 1) -}); - - - -@descr: -By default, it is either the same as calendar/api/calendar_value_config.md, or shows the current date, if **value** is not specified. - - -@relatedapi: -calendar/api/calendar_value_config.md - -@related: calendar/how_to_start.md#initialize-calendar -calendar/configuring.md#initialcalendardate - -**Related sample**: [Calendar. Date initialization](https://snippet.dhtmlx.com/fyg6l65t) \ No newline at end of file diff --git a/docs/calendar2/api/calendar_dateformat_config.md b/docs/calendar2/api/calendar_dateformat_config.md deleted file mode 100644 index 398f4e2c..00000000 --- a/docs/calendar2/api/calendar_dateformat_config.md +++ /dev/null @@ -1,51 +0,0 @@ ---- -sidebar_label: dateFormat -title: dateFormat ---- - -@short: defines the format of dates in Calendar - -@signature: dateFormat?: string; - -@default: "%d/%m/%y" - -@example: -var calendar = new dhx.Calendar("calendar_container", { - dateFormat:"%d.%m.%Y" -}); - - -@descr: -dhtmlxCalendar uses the following characters for setting a date format: - -| Character | Definition -|---------------|-----------------------------------------------| -|**%d** |day as a number with leading zero, 01..31 | -|**%j** |day as a number, 1..31 | -|**%D** |short name of the day, Su Mo Tu... | -|**%l** |full name of the day, Sunday Monday Tuesday... | -|**%m** |month as a number with leading zero, 01..12 | -|**%n** |month as a number, 1..12 | -|**%M** |short name of the month, Jan Feb Mar... | -|**%F** |full name of the month, January February March...| -|**%y** |year as a number, 2 digits | -|**%Y** |year as a number, 4 digits | -|**%h** |hours 12-format with leading zero, 01..12) | -|**%g** |hours 12-format, 1..12) | -|**%H** |hours 24-format with leading zero, 00..23 | -|**%G** |hours 24-format, 0..23 | -|**%i** |minutes with leading zero, 01..59 | -|**%s** |seconds with leading zero, 01..59 | -|**%a** |am or pm | -|**%A** |AM or PM | -|**%u** |milliseconds | - - - -@relatedapi: -calendar/api/calendar_setvalue_method.md - -@related: calendar/how_to_start.md#initialize-calendar -calendar/configuring.md#dateformat - -**Related sample**: [Calendar. Date format](https://snippet.dhtmlx.com/2co9z3bi) \ No newline at end of file diff --git a/docs/calendar2/api/calendar_datemouseover_event.md b/docs/calendar2/api/calendar_datemouseover_event.md deleted file mode 100644 index b231a7a6..00000000 --- a/docs/calendar2/api/calendar_datemouseover_event.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -sidebar_label: dateMouseOver -title: dateMouseOver ---- - -@short: fires when the mouse pointer is over a date - -@signature: dateMouseOver: (date: Date, e: MouseEvent) => void; - -@params: -- date Date the date under the pointer -- e Event a native event object - -@example: -calendar.events.on("DateMouseOver", function(date, e) { - dhx.tooltip(date, {node: e.target, position: "bottom"}); -}); - - - -@descr: - - - - -@related: -calendar/operating_calendar.md#showingtooltips -calendar/handling_events.md - -**Related sample**: -- [Calendar. Events](https://snippet.dhtmlx.com/7kj7fiek) - - -@changelog: added in v6.4 \ No newline at end of file diff --git a/docs/calendar2/api/calendar_destructor_method.md b/docs/calendar2/api/calendar_destructor_method.md deleted file mode 100644 index 0355bb86..00000000 --- a/docs/calendar2/api/calendar_destructor_method.md +++ /dev/null @@ -1,17 +0,0 @@ ---- -sidebar_label: destructor -title: destructor ---- - -@short: removes a calendar instance and releases occupied resources - -@signature: destructor(): void; - -@example: -calendar.destructor(); - - -@descr: - -**Related sample**: -- [Calendar. Destructor](https://snippet.dhtmlx.com/f0kqjb13) \ No newline at end of file diff --git a/docs/calendar2/api/calendar_disableddates_config.md b/docs/calendar2/api/calendar_disableddates_config.md deleted file mode 100644 index 74c36ff3..00000000 --- a/docs/calendar2/api/calendar_disableddates_config.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -sidebar_label: disabledDates -title: disabledDates ---- - -@short: allows disabling some date intervals, day labels are dimmed - -```todoapi -function disabledDates; -disabledDates?: (a: Date) => boolean; -``` - -@example: -var calendar = new dhx.Calendar("calendar", { - disabledDates: function(date) { - var disabled = { - 0: true, - 1: true, - 2: false, - 3: false, - 4: false, - 5: false, - 6: true - } - return disabled[date.getDay()]; - } -}); - - -@descr: -The function passed to the method receives one parameter: - -- **date** (*Date*) - a date object - -and must return a boolean value to define whether a passed date should be blocked (if *true*, the date is inactive). - -**Related sample**: -- [Calendar. Marked and disabled dates](https://snippet.dhtmlx.com/ic5oeiga) - -@related: -calendar/how_to_start.md#initialize-calendar -calendar/configuring.md#disableddates - -@changelog: added in v6.4 \ No newline at end of file diff --git a/docs/calendar2/api/calendar_getcurrentmode_method.md b/docs/calendar2/api/calendar_getcurrentmode_method.md deleted file mode 100644 index b96cc091..00000000 --- a/docs/calendar2/api/calendar_getcurrentmode_method.md +++ /dev/null @@ -1,31 +0,0 @@ ---- -sidebar_label: getCurrentMode -title: getCurrentMode ---- - -@short: returns the current mode of displaying Calendar - -```todoapi -string getCurrentMode(); -getCurrentMode(): ViewMode; -export declare type ViewMode = "calendar" | "year" | "month" | "timepicker"; -``` - - -@returns: -- mode string the current mode of the calendar ("calendar", "year", "month", "timepicker") - - -@example: -var mode = calendar.getCurrentMode(); // -> "calendar" - - - -@descr: - -**Related sample**: [Calendar. Get current mode](https://snippet.dhtmlx.com/fadykqoc) - -@related: calendar/operating_calendar.md#gettingcurrentmode - - - diff --git a/docs/calendar2/api/calendar_getvalue_method.md b/docs/calendar2/api/calendar_getvalue_method.md deleted file mode 100644 index 7e23fb75..00000000 --- a/docs/calendar2/api/calendar_getvalue_method.md +++ /dev/null @@ -1,46 +0,0 @@ ---- -sidebar_label: getValue -title: getValue ---- - -@short: returns the selected date - -```todoapi -Date|Date[]|string|string[] getValue(boolean asDate); -getValue(asDatObj?: boolean): Date | Date[] | string | string[]; -``` - -@params: -- asDate boolean defines whether a date will be returned as a Date object - -@returns: -- date Date,Date[],string,string[] the selected date - - -@example: - -var date = calendar.getValue(); // -> "03/06/19" - -var date = calendar.getValue(true); // -> Fri Jan 11 2019 18:09:15 GMT+0300 - -// for a range calendar as an array of Date values -var date = calendar.getValue(true); -// -> [Mon Jun 03 2019 00:00:00 GMT+0300, Wed Jun 19 2019 00:00:00 GMT+0300] - -// for a range calendar as an array of string values -var date = calendar.getValue(); // -> ["03/06/19", "19/06/19"] - - - -@descr: - - -@relatedapi: -calendar/api/calendar_setvalue_method.md - -@related: -calendar/operating_calendar.md#gettingselecteddate -calendar/configuring.md#rangemode - -**Related sample**: -- [Calendar. Getting selected date](https://snippet.dhtmlx.com/k2vrfqj0) \ No newline at end of file diff --git a/docs/calendar2/api/calendar_link_method.md b/docs/calendar2/api/calendar_link_method.md deleted file mode 100644 index 67809e16..00000000 --- a/docs/calendar2/api/calendar_link_method.md +++ /dev/null @@ -1,23 +0,0 @@ ---- -sidebar_label: link -title: link ---- - -@short: links a calendar to another calendar for selecting a date range - -@signature: link(calendar: object): void; - -@params: -- calendar2 object an object of a calendar to link to - -@example: -calendar.link(calendar2); - - -@descr: - -See the code and result in the live example below: - - -#### See also -@related:calendar/operating_calendar.md#linkingtwocalendars //todo \ No newline at end of file diff --git a/docs/calendar2/api/calendar_mark_config.md b/docs/calendar2/api/calendar_mark_config.md deleted file mode 100644 index 931e95c0..00000000 --- a/docs/calendar2/api/calendar_mark_config.md +++ /dev/null @@ -1,45 +0,0 @@ ---- -sidebar_label: mark -title: mark ---- - -@short: adds a CSS class to specific days - -todoanton возможно не подставилась signature -```todoapi -function mark; -mark?: (a: Date) => string; -``` - -@example: - - -var calendar = new dhx.Calendar("calendar", { - mark: function(date) { - if (date.getDay() === 6) { - return "highlight-date"; - } - }, - css: "dhx_widget--bordered" -}); - - - - -@descr: -The function passed to the method receives one parameter: - -- **date** (*Date*) - a date object - -and must return a string with the name of the CSS class or an empty string. - -@related: -calendar/how_to_start.md#initialize-calendar -calendar/configuring.md#highlighteddates - -**Related sample**: -- [Calendar. Marked Dates](https://snippet.dhtmlx.com/ic5oeiga) \ No newline at end of file diff --git a/docs/calendar2/api/calendar_mode_config.md b/docs/calendar2/api/calendar_mode_config.md deleted file mode 100644 index 0172f46d..00000000 --- a/docs/calendar2/api/calendar_mode_config.md +++ /dev/null @@ -1,26 +0,0 @@ ---- -sidebar_label: mode -title: mode ---- - -@short: the mode of Calendar initialization - -@signature: mode?: "calendar" | "year" | "month" | "timepicker"; - -@default: -"calendar" - -@example: -var calendar = new dhx.Calendar("calendar_container", { - mode: "month" -}); - - - -@descr: - -@related: -calendar/how_to_start.md#initialize-calendar -calendar/configuring.md#calendarmodes - -**Related sample**: [Calendar. Calendar modes](https://snippet.dhtmlx.com/n9q0tc0q) \ No newline at end of file diff --git a/docs/calendar2/api/calendar_modechange_event.md b/docs/calendar2/api/calendar_modechange_event.md deleted file mode 100644 index dfac0bd1..00000000 --- a/docs/calendar2/api/calendar_modechange_event.md +++ /dev/null @@ -1,23 +0,0 @@ ---- -sidebar_label: modeChange -title: modeChange ---- - -@short: fires on change of the calendar mode - -@signature: modeChange: (mode: string) => void; - -@params: -- mode string the calendar mode ("calendar", "year", "month", "timepicker") - -@example: -calendar.events.on("ModeChange", function(mode) { - console.log("Selected mode: " + mode); -}); - - -@descr: - -**Related sample**: -- [Calendar. Events](https://snippet.dhtmlx.com/7kj7fiek) - diff --git a/docs/calendar2/api/calendar_monthselected_event.md b/docs/calendar2/api/calendar_monthselected_event.md deleted file mode 100644 index b38de7b8..00000000 --- a/docs/calendar2/api/calendar_monthselected_event.md +++ /dev/null @@ -1,25 +0,0 @@ ---- -sidebar_label: monthSelected -title: monthSelected ---- - -@short: fires after a month was selected in the calendar - -@signature: monthSelected: (month: number) => void; - -@params: -- month number the number of the selected month (from 0 to 11) - -@example: -calendar.events.on("MonthSelected", function(month) { - console.log("Selected month: " + (month + 1)); -}); - - - -@descr: - -**Related sample**: -- [Calendar. Events](https://snippet.dhtmlx.com/7kj7fiek) - - diff --git a/docs/calendar2/api/calendar_paint_method.md b/docs/calendar2/api/calendar_paint_method.md deleted file mode 100644 index eda6879a..00000000 --- a/docs/calendar2/api/calendar_paint_method.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -sidebar_label: paint -title: paint ---- - -@short: repaints a calendar on a page - -@signature: paint(): void; - -@example: -calendar.paint(); - - - -@descr: diff --git a/docs/calendar2/api/calendar_range_config.md b/docs/calendar2/api/calendar_range_config.md deleted file mode 100644 index 7ae7920c..00000000 --- a/docs/calendar2/api/calendar_range_config.md +++ /dev/null @@ -1,25 +0,0 @@ ---- -sidebar_label: range -title: range ---- - -@short: enables/disables the possibility to select a range of dates on the calendar - -@signature: {'range?: boolean;'}; - -@example: -var calendar = new dhx.Calendar("calendar", { - css: "dhx_widget--bordered", - range: true -}); - -@related: -calendar/how_to_start.md#initialize-calendar -calendar/configuring.md#rangemode - - -@descr: -added in v6.2 - -**Related sample**: [Calendar. Range](https://snippet.dhtmlx.com/2mrj53h0) - diff --git a/docs/calendar2/api/calendar_setvalue_method.md b/docs/calendar2/api/calendar_setvalue_method.md deleted file mode 100644 index 5f2f1536..00000000 --- a/docs/calendar2/api/calendar_setvalue_method.md +++ /dev/null @@ -1,52 +0,0 @@ ---- -sidebar_label: setValue -title: setValue ---- - -@short: selects a date in the calendar - -@signature: setValue(value: Date | Date[] | string | string[]): boolean; - -@params: -- date Date,Date[],string,string[] the date to select - -@returns: -- result boolean defines, whether a date has been successfully added into the calendar - - -@example: -// sets the current date -calendar.setValue(new Date()); - -// sets the current date as an array of Date value -calendar.setValue([new Date()]); - -// sets a date as a string -calendar.setValue("30/05/19"); - -// sets a date as an array of string value -calendar.setValue(["30/05/19"]); - -//sets dates as an array of Date values(for the range mode) -calendar.setValue([new Date(2019,05,03), new Date(2019,05,19)]); - -//sets dates as an array of string values(for the range mode) -calendar.setValue(["03/06/19", "15/06/19"]); - - - -@descr: -{{note Please note that the format of date in the Calendar is defined by the [](calendar/api/calendar_dateformat_config.md) option. So, check that you've set the format of date you want to use in the calendar both in the -**setValue()** method and in the **dateFormat** property. Otherwise, the default format (**"%d/%m/%y"**) will be used.}} - - -@relatedapi: -calendar/api/calendar_dateformat_config.md -calendar/api/calendar_getvalue_method.md - -**Related sample**: -- [Calendar. Preset selected date](https://snippet.dhtmlx.com/vmg11002) - -@related: -calendar/operating_calendar.md#selectingdate, -calendar/configuring.md#rangemode \ No newline at end of file diff --git a/docs/calendar2/api/calendar_showdate_method.md b/docs/calendar2/api/calendar_showdate_method.md deleted file mode 100644 index 681d5262..00000000 --- a/docs/calendar2/api/calendar_showdate_method.md +++ /dev/null @@ -1,59 +0,0 @@ ---- -sidebar_label: showDate -title: showDate ---- - -@short: shows a specified date and/or opens the calendar in one of the available modes - -@signature: showDate(date?: Date, mode?: ViewMode): void; - -@params: -- date Date the date that should be shown in the calendar -- mode string optional, the mode in which the calendar will be opened - - - -@example: -calendar.showDate(new Date(2020,11,12)); - - - -@descr: -The **modes** are: - - - - - - - - - - - - - - - - -
"calendar"shows the days of a month, the default mode
"month"allows selecting a month of a year
"year"allows selecting a year
- -~~~js -// shows the month of the specified date -calendar.showDate(new Date(2020,11,12),"month"); - -// shows the current month -calendar.showDate(null,"month"); - -// shows the current year together with previous/next years -calendar.showDate(new Date(2020,11,12),"year"); - -// shows the current year -calendar.showDate(null,"year"); -~~~ - -**Related sample**: -- [Calendar. Showing particular calendar date and mode](https://snippet.dhtmlx.com/nyfzc8cl) - -@related: -calendar/operating_calendar.md#changingcalendarmode diff --git a/docs/calendar2/api/calendar_thismonthonly_config.md b/docs/calendar2/api/calendar_thismonthonly_config.md deleted file mode 100644 index 3bc0542b..00000000 --- a/docs/calendar2/api/calendar_thismonthonly_config.md +++ /dev/null @@ -1,29 +0,0 @@ ---- -sidebar_label: thisMonthOnly -title: thisMonthOnly ---- - -@short: hides dates of the previous/next months relative to the currently displayed one - -@signature: {'thisMonthOnly?: boolean;'} - -@default: false - -@type: boolean - -@example: -var calendar = new dhx.Calendar("calendar_container", { - thisMonthOnly:true -}); - - - -@descr: - - -@related: -calendar/how_to_start.md#initialize-calendar -calendar/configuring.md#displayingonlycurrentmonth - -**Related sample**: -- [Calendar. The days of this month only](https://snippet.dhtmlx.com/4wi5hbtr) diff --git a/docs/calendar2/api/calendar_timeformat_config.md b/docs/calendar2/api/calendar_timeformat_config.md deleted file mode 100644 index 38a76952..00000000 --- a/docs/calendar2/api/calendar_timeformat_config.md +++ /dev/null @@ -1,32 +0,0 @@ ---- -sidebar_label: timeFormat -title: timeFormat ---- - -@short: defines the time format for a timepicker in the calendar - -@signature: timeFormat?: 24 | 12; - -@default: 24 - - - -@example: -var calendar = new dhx.Calendar("calendar_container", { - timePicker: true, - timeFormat: 12 -}); - - - -@descr: -The time format can be presented either in the 12-hour or in the 24-hour format. - - -@relatedapi: -calendar/api/calendar_timepicker_config.md - -@related: calendar/how_to_start.md#initialize-calendar -calendar/configuring.md#timepicker - -**Related sample**: [Calendar. Time format](https://snippet.dhtmlx.com/9xi24if2) \ No newline at end of file diff --git a/docs/calendar2/api/calendar_timepicker_config.md b/docs/calendar2/api/calendar_timepicker_config.md deleted file mode 100644 index f03343df..00000000 --- a/docs/calendar2/api/calendar_timepicker_config.md +++ /dev/null @@ -1,29 +0,0 @@ ---- -sidebar_label: timePicker -title: timePicker ---- - -@short: adds a timepicker into the calendar - -@signature: timePicker?: boolean; - -@default: false - -@example: -var calendar = new dhx.Calendar("calendar_container", { - timePicker: true -}); - - -@descr: -You can define the format of displaying time in a timepicker via the [](calendar/api/calendar_timeformat_config.md) property. - - -@relatedapi: -calendar/api/calendar_timeformat_config.md - -**Related sample**: -- [Calendar. Timepicker In Calendar](https://snippet.dhtmlx.com/jkbfb202) - -@related: calendar/how_to_start.md#initialize-calendar -calendar/configuring.md#timepicker \ No newline at end of file diff --git a/docs/calendar2/api/calendar_value_config.md b/docs/calendar2/api/calendar_value_config.md deleted file mode 100644 index b9b28c39..00000000 --- a/docs/calendar2/api/calendar_value_config.md +++ /dev/null @@ -1,61 +0,0 @@ ---- -sidebar_label: value -title: value ---- - -@short: selects the day (adds a round blue marker) - -@signature: value?: Date | Date[] | string | string[]; - -@example: -// selects a date -var calendar = new dhx.Calendar("calendar_container", { - value: new Date(2019,01,10) -}); - -// selects a date as an array of Date value -var calendar = new dhx.Calendar("calendar_container", { - value: [new Date(2019,01,10)] -}); - -// selects a date as a string -var calendar = new dhx.Calendar("calendar_container", { - value: ("10/02/19") -}); - -// selects a date as an array of string value -var calendar = new dhx.Calendar("calendar_container", { - value: (["10/02/19"]) -}); - -// selects dates as an array of Date values(for the range mode) -var calendar = new dhx.Calendar("calendar_container", { - value: ([new Date(2019,05,03), new Date(2019,05,19)]), - range: true -}); - -// selects dates as an array of string values(for the range mode) -var calendar = new dhx.Calendar("calendar_container", { - value: (["03/06/19", "15/06/19"]), - range: true -}); - - - - -@descr: -If the property is not specified in the configuration object, nothing is selected in the calendar on initialization. - -{{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 **value** and in the **dateFormat** property. Otherwise, the default format ("%d/%m/%y") will be used.}} - -@related: -calendar/how_to_start.md#selectinitialdateoptional -calendar/configuring.md#initiallyselecteddate - -@relatedapi: -calendar/api/calendar_dateformat_config.md -calendar/api/calendar_getvalue_method.md -calendar/api/calendar_range_config.md - -**Related sample**: -- [Calendar. Value initialization](https://snippet.dhtmlx.com/epjjww3l) \ No newline at end of file diff --git a/docs/calendar2/api/calendar_weeknumbers_config.md b/docs/calendar2/api/calendar_weeknumbers_config.md deleted file mode 100644 index 2de9c8d7..00000000 --- a/docs/calendar2/api/calendar_weeknumbers_config.md +++ /dev/null @@ -1,26 +0,0 @@ ---- -sidebar_label: weekNumbers -title: weekNumbers ---- - -@short: defines whether to show the numbers of weeks - -@signature: weekNumbers?: boolean; - -@default: false - -@example: -var calendar = new dhx.Calendar("calendar_container", { - weekNumbers: true -}); - - - -@descr: - -**Related sample**: -- [Calendar. Numbers of weeks](https://snippet.dhtmlx.com/9692gk6n) - -@related: -calendar/how_to_start.md#initialize-calendar -calendar/configuring.md#numbersofweeks diff --git a/docs/calendar2/api/calendar_weekstart_config.md b/docs/calendar2/api/calendar_weekstart_config.md deleted file mode 100644 index 7cf74c77..00000000 --- a/docs/calendar2/api/calendar_weekstart_config.md +++ /dev/null @@ -1,27 +0,0 @@ ---- -sidebar_label: weekStart -title: weekStart ---- - -@short: sets the starting day of the week - -@signature: weekStart?: "sunday" | "monday"; - -@default: "sunday" - -@example: -var calendar = new dhx.Calendar("calendar_container", { - weekStart:"monday" -}); - - - -@descr: - - -@related: -calendar/how_to_start.md#initialize-calendar -calendar/configuring.md#startoftheweek - - -**Related sample**: [Calendar. Week start](https://snippet.dhtmlx.com/kaxmurh9) \ No newline at end of file diff --git a/docs/calendar2/api/calendar_width_config.md b/docs/calendar2/api/calendar_width_config.md deleted file mode 100644 index 04b7da9a..00000000 --- a/docs/calendar2/api/calendar_width_config.md +++ /dev/null @@ -1,27 +0,0 @@ ---- -sidebar_label: width -title: width ---- - -@short: sets the width of the calendar - -@signature: width?: string | number; - -@default: "250px" - -@example: -var calendar = new dhx.Calendar("calendar_container", { - width: "300px" -}); - - - -@descr: - - -**Related sample**: -- [Calendar. Calendar width](https://snippet.dhtmlx.com/azm0u5ns) - -@related: -calendar/how_to_start.md#initialize-calendar -calendar/configuring.md#widthofcalendar diff --git a/docs/calendar2/api/calendar_yearselected_event.md b/docs/calendar2/api/calendar_yearselected_event.md deleted file mode 100644 index 48753ccd..00000000 --- a/docs/calendar2/api/calendar_yearselected_event.md +++ /dev/null @@ -1,25 +0,0 @@ ---- -sidebar_label: yearSelected -title: yearSelected ---- - -@short: fires after a year was selected in the calendar - -@signature: yearSelected: (year: number) => void; - -@params: -- year number the number of the selected year - - -@example: -calendar.events.on("YearSelected", function(year) { - console.log("Selected year: " + year); -}); - - - -@descr: - -**Related sample**: -- [Calendar. Events](https://snippet.dhtmlx.com/7kj7fiek) - diff --git a/docs/calendar2/configuring.mdx b/docs/calendar2/configuring.mdx deleted file mode 100644 index 456e309f..00000000 --- a/docs/calendar2/configuring.mdx +++ /dev/null @@ -1,282 +0,0 @@ ---- -sidebar_label: Configuration -title: Configuration ---- - -import { Note } from '@site/src/components'; - - -## Calendar modes - -There are several modes of displaying Calendar, which are set via the [](calendar/api/calendar_mode_config.md) property: - -- "calendar" - the default mode. The current date (year and month) is shown in the calendar - -~~~js -var calendar = new dhx.Calendar("calendar_container"); -~~~ - -![](../assets/calendar/calendar_mode.png) - -- "month" - only months of the current year are shown in the calendar - -~~~js -var calendar = new dhx.Calendar("calendar_container", { - mode: "month" -}); -~~~ - -![](../assets/calendar/month_mode.png) - -- "year" - only years are shown, including the current one - -~~~js -var calendar = new dhx.Calendar("calendar_container", { - mode: "year" -}); -~~~ - -![](../assets/calendar/year_mode.png) - -**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. - -## 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). - -~~~js -var calendar = new dhx.Calendar("calendar_container", { - dateFormat:"%d.%m.%Y" -}); -~~~ - -**Related sample**: [Calendar. Date format](https://snippet.dhtmlx.com/2co9z3bi) - - -## Disabled dates - -![](../assets/calendar/blocked_dates.png) - -**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. - -~~~js -var calendar = new dhx.Calendar("calendar", { - disabledDates: function(date) { - var disabled = { - 0: true, - 1: true, - 2: false, - 3: false, - 4: false, - 5: false, - 6: true - } - return disabled[date.getDay()]; - }, - css: "dhx_widget--bordered" -}); -~~~ - -## Displaying only current month - -![](../assets/calendar/this_month_only.png) - -**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*: - -~~~js -var calendar = new dhx.Calendar("calendar_container", { - thisMonthOnly:true -}); -~~~ - -## Highlighted dates - -![](../assets/calendar/marked_dates.png) - -**Related sample**: [Calendar. Marked 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. - -~~~js -var calendar = new dhx.Calendar("calendar", { - mark: function(date) { - if (date.getDay() === 6) { - return "highlight-date"; - } - }, - css: "dhx_widget--bordered" -}); -~~~ - -Where "highlight-date" is a CSS class like this: - -~~~html - -~~~ - -## 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. - -~~~js -var calendar = new dhx.Calendar("calendar_container", { - date: new Date(2019, 0, 1) -}); -~~~ - -**Related sample**: [Calendar. Date initialization](https://snippet.dhtmlx.com/fyg6l65t) - -## 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: - -- 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 - -~~~js -// selects a date -var calendar = new dhx.Calendar("calendar_container", { - value: new Date(2019,01,10) -}); - -// selects a date as an array of Date value -var calendar = new dhx.Calendar("calendar_container", { - value: [new Date(2019,01,10)] -}); - -// selects a date as a string -var calendar = new dhx.Calendar("calendar_container", { - value: ("10/02/19") -}); - -// selects a date as an array of string value -var calendar = new dhx.Calendar("calendar_container", { - value: (["10/02/19"]) -}); - -// selects dates as an array of Date values(for the range mode) -var calendar = new dhx.Calendar("calendar_container", { - value: ([new Date(2019,05,03), new Date(2019,05,19)]), - range: true -}); - -// selects dates as an array of string values(for the range mode) -var calendar = new dhx.Calendar("calendar_container", { - value: (["03/06/19", "15/06/19"]), - range: true -}); -~~~ - -**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. - -:::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.1 -::: - -## Numbers of weeks - -![](../assets/calendar/week_numbers.png) - -**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*. - -~~~js -var calendar = new dhx.Calendar("calendar_container", { - weekNumbers: true -}); -~~~ - -## Range mode - -![](../assets/calendar/range_mode.png) - -**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) option in the calendar configuration object and define an array with the start and end dates of the range. - -~~~js -var calendar = new dhx.Calendar("calendar", { - css: "dhx_widget--bordered", - range: true, - value: ["25/06/20", "07/07/20"] -}); -~~~ - - -:::note -The value option should have the array type and contain a pair of values (either Date values or string values) for both dates. -1 -::: - -## Start of the week - -![](../assets/calendar/weekstart_monday.png) - -**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: - -~~~js -var calendar = new dhx.Calendar("calendar_container", { - weekStart: "monday" -}); -~~~ - -## 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. - - -~~~js -var calendar = new dhx.Calendar("calendar", { - timePicker: true, - timeFormat: 12 // the 12-hour format for the timepicker -}); -~~~ - -![](../assets/calendar/timepicker_format.png) - -**Related sample**: [Calendar. Timepicker In Calendar](https://snippet.dhtmlx.com/jkbfb202) - -**Related sample**: [Calendar. Time format](https://snippet.dhtmlx.com/9xi24if2) - -## Width of calendar - -![](../assets/calendar/calendar_width.png) - -**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. - -~~~js -var calendar = new dhx.Calendar("calendar_container", { - width: "400", - css: "dhx_widget--bordered" -}); -~~~ - - - diff --git a/docs/calendar2/customization.mdx b/docs/calendar2/customization.mdx deleted file mode 100644 index fae496cd..00000000 --- a/docs/calendar2/customization.mdx +++ /dev/null @@ -1,81 +0,0 @@ ---- -sidebar_label: Customization -title: Customization ---- - -Styling Calendar ------------ - -There is a possibility to make changes in the look and feel of a calendar. For example, change its background color: - -![](../assets/calendar/styled_calendar.png) - -**Related sample**: [Calendar. Styling (custom CSS)](https://snippet.dhtmlx.com/2045cbe1) - -For this you need to take the following 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) - -~~~js - -~~~ - -- 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: - -~~~js -var calendar = new dhx.Calendar({ - css:"my_first_class my_second_class" -}); -~~~ - -For example: - -~~~js - - -var calendar = new dhx.Calendar("calendar", { - css: "bg-grey dhx_calendar--bordered" -}); -~~~ - - -Styling selected dates -------------------- - -![](../assets/calendar/calendar_range_styling.png) - -**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: - -~~~js - - -var calendar1 = new dhx.Calendar("calendar1", {css: "dhx_widget--bordered"}); -var calendar2 = new dhx.Calendar("calendar2", {css: "dhx_widget--bordered"}); -~~~ - - - diff --git a/docs/calendar2/datepicker.mdx b/docs/calendar2/datepicker.mdx deleted file mode 100644 index 4ca18cc7..00000000 --- a/docs/calendar2/datepicker.mdx +++ /dev/null @@ -1,49 +0,0 @@ ---- -sidebar_label: DatePicker -title: DatePicker ---- - -You can use dhtmlxCalendar as a date picker by putting it inside a popup. - -![Date picker](./../assets/calendar/date_picker.png) - -First, you should create a popup and then attach a calendar into it. Follow the steps below: - -1\. create an input to enter a date into and give it the id "date-input": - -~~~html - -~~~ - -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: - -~~~js -var 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: - -~~~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: - -~~~js -var dateInput = document.getElementById("date-input"); -dateInput.addEventListener("click", function() { - 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(); -}); -~~~ - -**Related sample**: [Calendar. Date picker](https://snippet.dhtmlx.com/mj7jr6ro) \ No newline at end of file diff --git a/docs/calendar2/functionality_and_features/calendar_modes.md b/docs/calendar2/functionality_and_features/calendar_modes.md deleted file mode 100644 index 97b4b7d8..00000000 --- a/docs/calendar2/functionality_and_features/calendar_modes.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -sidebar_label: Calendar modes -title: Calendar modes ---- - -## Calendar modes (calendar | month | year) - -There are several modes of displaying Calendar, which are set via the [](../api/calendar_mode_config.md) property: - -- "calendar" - the default mode. The current date (year and month) is shown in the calendar -- "month" - only months of the current year are shown in the calendar -- "year" - only years are shown, including the current one - - - -:::note See also -You can also show the calendar in one of the modes using the [](../api/calendar_showdate_method.md) method. -::: - -## Changing calendar mode - -You can show a particular date in the calendar and/or open Calendar in a certain mode via the [](../api/calendar_showdate_method.md) method. It takes two parameters: - -- **date** - (*Date*) the date that should be shown in the calendar. Use null if you need to show current month or year -- **mode** - (*string*) optional, the mode in which the calendar will be opened - -There are the following calendar modes available: - -- **"calendar"** - allows selecting among days of a month (default) -- **"month"** - allows selecting a month -- **"year"** - allows selecting a year - - - -Calendar can be also attached to an input, a click on which will show Calendar in one of the modes. To learn more about input options please read [How to create Date picker](/date_picker.md) article. - -:::note See also -For more options please read about [](../api/calendar_modechange_event.md) event. -::: - -## Getting current mode - -There is a possibility to get the current mode of displaying Calendar via the [](../api/calendar_getcurrentmode_method.md) method. The method returns one of the available calendar modes: - -- month -- year -- calendar -- timepicker - - - -## ?Display days of the current month only? (сейчас отдельная страница) - -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 [](../api/calendar_thismonthonly_config.md) configuration property to *true*. - - diff --git a/docs/calendar2/functionality_and_features/calendar_stylization.md b/docs/calendar2/functionality_and_features/calendar_stylization.md deleted file mode 100644 index 512a8d87..00000000 --- a/docs/calendar2/functionality_and_features/calendar_stylization.md +++ /dev/null @@ -1,87 +0,0 @@ ---- -sidebar_label: Customization and styling Calendar -title: Customization and styling Calendar ---- - -## Calendar stylization - - - -There is a possibility to make changes in the look and feel of a calendar. For example, change its background color. - -For this you need to take the following 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) - -- 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. - -``` -There is a possibility to make changes in the look and feel of a calendar. For example, change its background color: - -![](../../assets/calendar/styled_calendar.png) - -**Related sample**: [Calendar. Styling (custom CSS)](https://snippet.dhtmlx.com/2045cbe1) - -For this you need to take the following 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) - -~~~js - -~~~ - -- 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: - -~~~js -var calendar = new dhx.Calendar({ - css:"my_first_class my_second_class" -}); -~~~ - -For example: - -~~~js - - -var calendar = new dhx.Calendar("calendar", { - css: "bg-grey dhx_calendar--bordered" -}); -~~~ -``` - -## Styling selected dates - -![](../../assets/calendar/calendar_range_styling.png) - -**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: - -~~~js - - -var calendar1 = new dhx.Calendar("calendar1", {css: "dhx_widget--bordered"}); -var calendar2 = new dhx.Calendar("calendar2", {css: "dhx_widget--bordered"}); -~~~ diff --git a/docs/calendar2/functionality_and_features/current_month_only.md b/docs/calendar2/functionality_and_features/current_month_only.md deleted file mode 100644 index a231ba83..00000000 --- a/docs/calendar2/functionality_and_features/current_month_only.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -sidebar_label: Display days of the current month only -title: Display days of the current month only ---- - -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 [](../api/calendar_thismonthonly_config.md) configuration property to *true*. - - - diff --git a/docs/calendar2/functionality_and_features/date_picker.md b/docs/calendar2/functionality_and_features/date_picker.md deleted file mode 100644 index 546922ca..00000000 --- a/docs/calendar2/functionality_and_features/date_picker.md +++ /dev/null @@ -1,20 +0,0 @@ ---- -sidebar_label: How to create Date picker -title: How to create Date picker ---- - -You can use DHTMLX Calendar as a date picker by putting it inside a popup. - -First, you should create a popup and then attach a calendar into it. Follow the steps below. - -1\. Create an input to enter a date into and give it the id "date-input". - -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. - -3\. Attach the calendar to the popup using the [](popup/api/popup_attach_method.md) method of Popup. - -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. - -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. - - diff --git a/docs/calendar2/functionality_and_features/dates_format.md b/docs/calendar2/functionality_and_features/dates_format.md deleted file mode 100644 index c2b396ba..00000000 --- a/docs/calendar2/functionality_and_features/dates_format.md +++ /dev/null @@ -1,11 +0,0 @@ ---- -sidebar_label: Format of dates -title: Format of dates ---- -There is a possibility to specify the format of dates in the calendar via the [dateFormat](calendar/api/calendar_dateformat_config.md) property `dateFormat:"%d.%m.%Y"`. The full list of available characters used to make formats is provided in the API reference. - -The default format is: "%d/%m/%y". - - - -https://snippet.dhtmlx.com/2co9z3bi diff --git a/docs/calendar2/functionality_and_features/disabled_dates.md b/docs/calendar2/functionality_and_features/disabled_dates.md deleted file mode 100644 index 5105a9b2..00000000 --- a/docs/calendar2/functionality_and_features/disabled_dates.md +++ /dev/null @@ -1,9 +0,0 @@ ---- -sidebar_label: Disabled dates -title: Disabled dates ---- - -To disable certain dates, use the [disabledDates](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. - - diff --git a/docs/calendar2/functionality_and_features/events.md b/docs/calendar2/functionality_and_features/events.md deleted file mode 100644 index 5b1ab129..00000000 --- a/docs/calendar2/functionality_and_features/events.md +++ /dev/null @@ -1,67 +0,0 @@ ---- -sidebar_label: Event handling -title: Event Handling ---- - -## Attaching event listeners - -You can attach event listeners with the **calendar.events.on()** method of the *events* module: - -~~~js -calendar.events.on("Change",function(date, oldDate, click){ - console.log("Change selection from "+oldDate+" to "+date); - console.log(click); -}); -~~~ - -For example, Calendar can be attached to an input that will display the date selected in Calendar: - -~~~html - -~~~ - -~~~js -var calendar = new dhx.Calendar("calendar_container"); -calendar.events.on("Change",(date)=>{ - document.getElementById("date").value = date.getFullYear() + - "-" + (date.getMonth() + 1) + "-" +date.getDate(); -}); -~~~ - -Several handlers can be attached to one event, and all of them will be executed. - -{{note The names of events are case-insensitive.}} - -**Related sample**: [Calendar. Events](https://snippet.dhtmlx.com/7kj7fiek) - -## Detaching event listeners - -To detach an event listener, use **calendar.events.detach()**: - -~~~js -calendar.events.on("Change",function(date, oldDate, click){ - console.log("Change selection from "+oldDate+" to "+date); - console.log(click); -}); -calendar.events.detach("Change"); -~~~ - -## Calling events - -To call an event, use **calendar.events.fire()**: - -~~~js -calendar.events.fire("name",args); -// where args is an array of arguments -~~~ - - -## The list of events - -You can find the full list of events in the Calendar API. - -https://docs.dhtmlx.com/suite/calendar__api__calendar_yearselected_event.html - -https://docs.dhtmlx.com/suite/calendar__api__calendar_monthselected_event.html - - diff --git a/docs/calendar2/functionality_and_features/highlighted_dates.md b/docs/calendar2/functionality_and_features/highlighted_dates.md deleted file mode 100644 index 1d40f41b..00000000 --- a/docs/calendar2/functionality_and_features/highlighted_dates.md +++ /dev/null @@ -1,11 +0,0 @@ ---- -sidebar_label: Highlighted dates -title: Highlighted dates ---- - -You can highlight certain dates in the calendar. Set the [mark](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. - - - -https://snippet.dhtmlx.com/ic5oeiga?_ga=2.144401136.490903351.1616397244-1096441635.1613394954 diff --git a/docs/calendar2/functionality_and_features/initial_date.md b/docs/calendar2/functionality_and_features/initial_date.md deleted file mode 100644 index 5075ae30..00000000 --- a/docs/calendar2/functionality_and_features/initial_date.md +++ /dev/null @@ -1,12 +0,0 @@ ---- -sidebar_label: Initial calendar date -title: 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 date property. It accepts a Date object as a value. It is either the same as value (by default), or shows the current date if value is not specified. - - - - - - -https://snippet.dhtmlx.com/fyg6l65t diff --git a/docs/calendar2/functionality_and_features/localization.md b/docs/calendar2/functionality_and_features/localization.md deleted file mode 100644 index af9bf3d5..00000000 --- a/docs/calendar2/functionality_and_features/localization.md +++ /dev/null @@ -1,72 +0,0 @@ ---- -sidebar_label: Calendar localization -title: Calendar localization ---- - -You can apply different languages to the interface of DHTMLX Calendar. You just need to translate the corresponding strings for Calendar labels and apply a ready locale to the component. - - - -https://snippet.dhtmlx.com/tn40a0w8 - -## Default locale - -The default locale for Calendar provides full and short names of months and full and short names of days of a week in English. - -## Custom locale - -To use a different locale, your need to: - -- define necessary language settings: provide full and short names of months, as well as full and short names of days of a week; -- apply the language settings by calling the **dhx.i18n.setLocale()** method before Calendar initialization. - - - -https://snippet.dhtmlx.com/tn40a0w8 - - - -## Вариант оформления 1 фрейм + 1 код блока со ссылкой - - -You can apply different languages to the interface of DHTMLX Calendar. You just need to translate the corresponding strings for Calendar labels and apply a ready locale to the component. - - - -https://snippet.dhtmlx.com/tn40a0w8 - -## Default locale - -The default locale for Calendar provides full and short names of months and full and short names of days of a week in English. - -## Custom locale - -To use a different locale, your need to: - -- define necessary language settings: provide full and short names of months, as well as full and short names of days of a week; -- apply the language settings by calling the **dhx.i18n.setLocale()** method before Calendar initialization. - -~~~js -//define language settings -const de = { - // 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"], - // short names of days - daysShort: ["Son", "Mon", "Die", "Mit", "Don", "Fre", "Sam"], - // full names of days - days: ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", - "Freitag", "Samstag"] -}; - -//apply language settings -dhx.i18n.setLocale("calendar", de); -const calendar = new dhx.Calendar("calendar", { - css: "dhx_widget--bordered" -}); -~~~ - -`RELATED SAMPLE:` [Calendar. Localization](https://snippet.dhtmlx.com/3u7f1oug) diff --git a/docs/calendar2/functionality_and_features/ranges_mode.md b/docs/calendar2/functionality_and_features/ranges_mode.md deleted file mode 100644 index f1597d0e..00000000 --- a/docs/calendar2/functionality_and_features/ranges_mode.md +++ /dev/null @@ -1,23 +0,0 @@ ---- -sidebar_label: Date ranges in one and two calendars -title: Date ranges in one and two calendars ---- - -## Date ranges in one calendar - - - -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) option in the calendar configuration object and define an array with the start and end dates of the range. - -The value option should have the array type and contain a pair of values (either Date values or string values) for both dates. - -## Date ranges in two calendars - - - -You can create two calendars and link them to provide the ability of selecting a date range. The first calendar will be used for setting the start date of the range, while the end date of the range will be specified in the -second calendar. - -Use the [](calendar/api/calendar_link_method.md) method and pass as a parameter the object of the second calendar to link the first calendar to. - -In the example the [Change](calendar/api/calendar_change_event.md) event is intended to output the start and end dates of the selected range. diff --git a/docs/calendar2/functionality_and_features/selected_date.md b/docs/calendar2/functionality_and_features/selected_date.md deleted file mode 100644 index 98a02402..00000000 --- a/docs/calendar2/functionality_and_features/selected_date.md +++ /dev/null @@ -1,117 +0,0 @@ ---- -sidebar_label: Work with selected date -title: Work with selected date ---- - -## 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: - -- 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 - -~~~js -// selects a date -var calendar = new dhx.Calendar("calendar_container", { - value: new Date(2019,01,10) -}); - -// selects a date as an array of Date value -var calendar = new dhx.Calendar("calendar_container", { - value: [new Date(2019,01,10)] -}); - -// selects a date as a string -var calendar = new dhx.Calendar("calendar_container", { - value: ("10/02/19") -}); - -// selects a date as an array of string value -var calendar = new dhx.Calendar("calendar_container", { - value: (["10/02/19"]) -}); - -// selects dates as an array of Date values(for the range mode) -var calendar = new dhx.Calendar("calendar_container", { - value: ([new Date(2019,05,03), new Date(2019,05,19)]), - range: true -}); - -// selects dates as an array of string values(for the range mode) -var calendar = new dhx.Calendar("calendar_container", { - value: (["03/06/19", "15/06/19"]), - range: true -}); -~~~ - -**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. - -:::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. -::: - -## How to set the selected date in the calendar - -To select a date in a calendar, call the [](calendar/api/calendar_setvalue_method.md) method. The method has one mandatory parameter - a date that should be selected, which can be passed 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 - -~~~js -// selects the current date -calendar.setValue(new Date()); - -// sets the current date as an array of Date value -calendar.setValue([new Date()]); - -// sets a date as a string -calendar.setValue("30/05/19"); - -// sets a date as an array of string value -calendar.setValue(["30/05/19"]); - -//sets dates as an array of Date values(for the range mode) -calendar.setValue([new Date(2019,05,03), new Date(2019,05,19)]); - -//sets dates as an array of string values(for the range mode) -calendar.setValue(["03/06/19", "15/06/19"]); -~~~ - -In case a date has been successfully added into the calendar, the method will return *true*. - -**Related sample**: [Calendar. Preset selected date](https://snippet.dhtmlx.com/vmg11002) - -{{note Please note that the format of date in the Calendar is defined by the [](calendar/api/calendar_dateformat_config.md) option. So, check that you've set the format of date you want to use in the calendar both in the -**setValue()** method and in the **dateFormat** property. Otherwise, the default format (**"%d/%m/%y"**) will be used.}} - -## How to get the selected date in the calendar - -To get the selected date, call the [](calendar/api/calendar_getvalue_method.md) method. The method returns selected date either as a string (default) or as a Date object. -To get a date as an object, pass the *true* parameter to the method. - -~~~js -var date1 = calendar.getValue(); // -> "20/08/19" - -var date2 = calendar.getValue(true); // -> Tue Aug 20 2019 00:00:00 GMT+0300 -~~~ - -**Related sample**: [Calendar. Getting selected date](https://snippet.dhtmlx.com/k2vrfqj0) - -If you work with a calendar in the [range mode](calendar/configuring.md#range-mode) the **getValue()** method returns either an array of Date values or an array of string values with the start and end dates of the range. - -~~~js -// for a range calendar as an array of Date values -var date = calendar.getValue(true); -// -> [Mon Jun 03 2019 00:00:00 GMT+0300, Wed Jun 19 2019 00:00:00 GMT+0300] - -// for a range calendar as an array of string values -var date = calendar.getValue(); // -> ["03/06/19", "19/06/19"] -~~~ - - diff --git a/docs/calendar2/functionality_and_features/start_day.md b/docs/calendar2/functionality_and_features/start_day.md deleted file mode 100644 index b3abf8bd..00000000 --- a/docs/calendar2/functionality_and_features/start_day.md +++ /dev/null @@ -1,9 +0,0 @@ ---- -sidebar_label: Changing the start day of the week -title: Changing the start day of the week ---- - -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 [weekStart](calendar/api/calendar_weekstart_config.md) setting. - - - diff --git a/docs/calendar2/functionality_and_features/timepicker.md b/docs/calendar2/functionality_and_features/timepicker.md deleted file mode 100644 index 491cf7f8..00000000 --- a/docs/calendar2/functionality_and_features/timepicker.md +++ /dev/null @@ -1,9 +0,0 @@ ---- -sidebar_label: Timepicker in Calendar -title: Timepicker in Calendar ---- - -You can add a timepicker into a calendar by enabling the [timePicker](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 [timeFormat](calendar/api/calendar_timeformat_config.md) property. It accepts either 12 or 24 value to select the desired time format. - - diff --git a/docs/calendar2/functionality_and_features/tooltips.md b/docs/calendar2/functionality_and_features/tooltips.md deleted file mode 100644 index 0d796e94..00000000 --- a/docs/calendar2/functionality_and_features/tooltips.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -sidebar_label: Showing tooltips -title: Showing tooltips ---- - -You can add tooltips for dates and show them on the [dateMouseOver](calendar/api/calendar_datemouseover_event.md) event. For example, you can add tooltips to mark some special days. - - - -https://snippet.dhtmlx.com/7kj7fiek diff --git a/docs/calendar2/functionality_and_features/week_numbers.md b/docs/calendar2/functionality_and_features/week_numbers.md deleted file mode 100644 index f449a66a..00000000 --- a/docs/calendar2/functionality_and_features/week_numbers.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -sidebar_label: Showing the week numbers -title: Showing the week numbers ---- - -If you want to display the week numbers in the calendar, enable the [weekNumbers](calendar/api/calendar_weeknumbers_config.md) property. By default, the numbers are not shown as the property is set to false. - - - -https://snippet.dhtmlx.com/9692gk6n diff --git a/docs/calendar2/functionality_and_features/width.md b/docs/calendar2/functionality_and_features/width.md deleted file mode 100644 index fa695d35..00000000 --- a/docs/calendar2/functionality_and_features/width.md +++ /dev/null @@ -1,8 +0,0 @@ ---- -sidebar_label: Width of Calendar -title: Width of Calendar ---- - -You can set the desired width of a calendar using the [width](calendar/api/calendar_width_config.md) configuration property. The default width of Calendar is 250px. - - diff --git a/docs/calendar2/handling_events.md b/docs/calendar2/handling_events.md deleted file mode 100644 index 2f55e9bb..00000000 --- a/docs/calendar2/handling_events.md +++ /dev/null @@ -1,62 +0,0 @@ ---- -sidebar_label: Event handling -title: Event Handling ---- - -## Attaching event listeners - -You can attach event listeners with the **calendar.events.on()** method of the *events* module: - -~~~js -calendar.events.on("Change",function(date, oldDate, click){ - console.log("Change selection from "+oldDate+" to "+date); - console.log(click); -}); -~~~ - -For example, Calendar can be attached to an input that will display the date selected in Calendar: - -~~~html - -~~~ - -~~~js -var calendar = new dhx.Calendar("calendar_container"); -calendar.events.on("Change",(date)=>{ - document.getElementById("date").value = date.getFullYear() + - "-" + (date.getMonth() + 1) + "-" +date.getDate(); -}); -~~~ - -Several handlers can be attached to one event, and all of them will be executed. - -{{note The names of events are case-insensitive.}} - -**Related sample**: [Calendar. Events](https://snippet.dhtmlx.com/7kj7fiek) - -## Detaching event listeners - -To detach an event listener, use **calendar.events.detach()**: - -~~~js -calendar.events.on("Change",function(date, oldDate, click){ - console.log("Change selection from "+oldDate+" to "+date); - console.log(click); -}); -calendar.events.detach("Change"); -~~~ - -## Calling events - -To call an event, use **calendar.events.fire()**: - -~~~js -calendar.events.fire("name",args); -// where args is an array of arguments -~~~ - - -## The list of events - -You can find the full list of events in the **Calendar API** - diff --git a/docs/calendar2/how_to_start.mdx b/docs/calendar2/how_to_start.mdx deleted file mode 100644 index 266ad1e6..00000000 --- a/docs/calendar2/how_to_start.mdx +++ /dev/null @@ -1,79 +0,0 @@ ---- -sidebar_label: Calendar initialization -title: Calendar Initialization ---- -## Calendar basic initialization - -To use DHTMLX Calendar in your application, you need to take the following simple steps: - -- [Download the DHTMLX Calendar package](https://dhtmlx.com/docs/products/dhtmlxCalendar/download.shtml) and unpack it into a folder of your project -- [Include source files](#include-source-files) -- [Initialize Calendar](#initialize-calendar) with the object constructor -- Select initial date (optional) - -### Include source files - -Create an HTML file and place full paths to JS and CSS files of DHTMLX Calendar into the header of the created file. The Calendar component can be used standalone or as a part of the Suite library. - -**If you use DHTMLX Calendar standalone**, you need to include JS/CSS files from Calendar package: - -- *calendar.js* -- *calendar.css* - -**If you use DHTMLX Calendar as a part of the Suite package**, you need to include JS/CSS files from the DHTMLX Suite library: - -- suite.js -- suite.css - -### Initialize Calendar - -Basic Calendar initialization means creating a container. In this case you initialize Calendar with the `dhx.Calendar` object constructor. The constructor takes two parameters: - -- the HTML container for Calendar - -- an object with configuration properties. If this argument is not passed to the constructor, the settings will be default - -~~~html - - - - How to Start with dhtmlxCalendar - - - - - - - -
- - - - - -~~~ - -`RELATED SAMPLE:` [Calendar. Initialization](https://snippet.dhtmlx.com/xcw19e52) - -### Select initial date (optional) - -You can specify what date should be selected in the calendar both before and after initialization of the component. Please follow the links to read related articles. There are several options to do it: - -- via the **value configuration** option -- with the help of the **setValue** method - -## Configuration properties - -Have a look at the list of properties that you can specify in the Calendar configuration object: [Calendar API overview](calendar/api/api_overview.md#properties). - -## Initialization in a popup -This variant presupposes that you create a popup first and then attach a calendar into it, thus creating a date picker. Please follow the link and read the related article: [DatePicker](calendar/datepicker.md). - -![](../assets/calendar/date_picker.png) - -## Initialization inside Form and Toolbar diff --git a/docs/calendar2/index.md b/docs/calendar2/index.md deleted file mode 100644 index a0e0f4c6..00000000 --- a/docs/calendar2/index.md +++ /dev/null @@ -1,134 +0,0 @@ ---- -sidebar_label: Overview2 -title: Calendar2 -description: DHTMLX Calendar is a smart datepicker solution for websites or applications that allows selecting dates, ranges of dates, and time. It's easily configurable and highly customizable. ---- - -DHTMLX Calendar is a component that allows users to view and select dates. You can create the Calendar in several modes and use a timepicker in it. The useful date picker feature is implemented in the Calendar and ready for usage. - -This component is a great solution for your website or application. Check [online samples for DHTMLX Calendar](https://snippet.dhtmlx.com/all?tag=calendar). - -![DHTMLX Calendar](../assets/calendar/calendar_mode.png) - -## API reference - -[Calendar API](api/api_overview) - -## Related resources - -- To get just DHTMLX Calendar, download it from [our website](https://dhtmlx.com/docs/products/dhtmlxCalendar/download.shtml) -- To get the whole JavaScript library of UI components [download DHTMLX Suite](https://dhtmlx.com/docs/products/dhtmlxSuite/download.shtml) -- There are also [online samples for dhtmlxCalendar](https://snippet.dhtmlx.com/all?tag=calendar) - -## Guides 1 - -You can read the following articles to find out how to add the Calendar to the page, configure and work with it. Covers all the possible ways you can use this widget. - -- [Initialization](how_to_start) -- [Configuration](configuring) -- [Localization](localizing_calendar) -- [Work with Calendar](operating_calendar) -- [DatePicker](datepicker) -- [Customization](customization) -- [Event Handling](handling_events) - -## Guides 2 -You can read the following articles to find out how to add the Calendar to the page, configure and work with it. - -### How to start -Covers the initialization of Calendar on a page -- [Initialization](how_to_start) - -### How to localize -Covers languages interface settings. You can set the language you need in an easy way. -- [Localization](localizing_calendar) - -### How to work with -Covers the ways of specifying date format, design of the widget, customization, modes, working with two calendars. Includes the operations that can be performed with Calendar and available events. -- Initialization settings -- Configuration settings -- Applying features -- Styling features - -## Guides 3 - -### Creating Calendar -Read how to initialize the Calendar on a page. -- [Initialization](how_to_start) - -### Localizing Calendar -Study how to set languages interface. -- [Localization](localizing_calendar) - -### Exploring Calendar settings -Read how to create Calendar settings. -- Date settings - - -- Styling settings - - -- Spesial settings - - - -### Developing with Calendar solutions -Explore how to work with the solutions the Calendar provides to you. -- DatePicker (Initialization in a popup) -- Showing tooltips -- Getting current mode -- Showing tooltips -- Getting current mode -- Getting selected date -- Attaching event listeners -- Detaching event listeners -- Calling events -- The list of events - -## Guides 4 - -### Creating Calendar - -Read how to initialize the Calendar on a page. -- [Initialization](how_to_start) - -### Localizing Calendar - -Study how to set languages interface. -- [Localization](localizing_calendar) - -### Exploring Calendar settings -Read how to create Calendar settings. -- Calendar modes -- Changing calendar mode -- Initial calendar date -- Initially selected date -- Selecting date (переименовать в Set date) -- Date format -- Numbers of weeks -- Start of the week -- Disabled dates -- Displaying only current month -- Styling Calendar -- Styling selected dates -- Width of calendar -- Highlighted dates -- Range mode -- Linking 2 calendars -- Range mode of 2 calendars - -### Developing with Calendar solutions - -Explore how to work with the solutions the Calendar provides to you. -- DatePicker (Initialization in a popup) -- Showing tooltips -- Getting current mode -- Showing tooltips -- Getting current mode -- Getting selected date -- Attaching event listeners -- Detaching event listeners -- Calling events -- The list of events - -## Migration to Newer Versions - -Please check ... article to learn about new upgrades. - diff --git a/docs/calendar2/localizing_calendar.mdx b/docs/calendar2/localizing_calendar.mdx deleted file mode 100644 index ddcfd979..00000000 --- a/docs/calendar2/localizing_calendar.mdx +++ /dev/null @@ -1,72 +0,0 @@ ---- -sidebar_label: Localization2insidebar -title: Localization2 ---- - -You can apply different languages to the interface of DHTMLX Calendar. You just need to translate the corresponding strings for Calendar labels and apply a ready locale to the component. - - - -Default locale ------------- - -The default locale for Calendar provides full and short names of months and full and short names of days of a week in English. - -Custom locale ------------- - -To use a different locale, your need to: - -- define necessary language settings: provide full and short names of months, as well as full and short names of days of a week; -- apply the language settings by calling the **dhx.i18n.setLocale()** method before Calendar initialization. - - - - - - - -## Вариант оформления 1 фрейм + 1 код блока со ссылкой - - -You can apply different languages to the interface of DHTMLX Calendar. You just need to translate the corresponding strings for Calendar labels and apply a ready locale to the component. - - - -Default locale ------------- - -The default locale for Calendar provides full and short names of months and full and short names of days of a week in English. - -Custom locale ------------- - -To use a different locale, your need to: - -- define necessary language settings: provide full and short names of months, as well as full and short names of days of a week; -- apply the language settings by calling the **dhx.i18n.setLocale()** method before Calendar initialization. - -~~~js -//define language settings -const de = { - // 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"], - // short names of days - daysShort: ["Son", "Mon", "Die", "Mit", "Don", "Fre", "Sam"], - // full names of days - days: ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", - "Freitag", "Samstag"] -}; - -//apply language settings -dhx.i18n.setLocale("calendar", de); -const calendar = new dhx.Calendar("calendar", { - css: "dhx_widget--bordered" -}); -~~~ - -`RELATED SAMPLE:` [Calendar. Localization](https://snippet.dhtmlx.com/3u7f1oug) \ No newline at end of file diff --git a/docs/calendar2/operating_calendar.md b/docs/calendar2/operating_calendar.md deleted file mode 100644 index 105fe681..00000000 --- a/docs/calendar2/operating_calendar.md +++ /dev/null @@ -1,183 +0,0 @@ ---- -sidebar_label: Work with Calendar -title: Work with Calendar -description: description ---- - -## Changing calendar mode - -You can show a particular date in the calendar and/or open Calendar in a certain mode via the [](calendar/api/calendar_showdate_method.md) method. It takes two parameters: - -- **date** - (*Date*) the date that should be shown in the calendar -- **mode** - (*string*) optional, the mode in which the calendar will be opened - -There are the following calendar modes available: - -- **"calendar"** - allows selecting among days of a month (default) - -~~~js -calendar.showDate(new Date(2020,11,12),"calendar"); -~~~ - -- **"month"** - allows selecting a month - -~~~js -calendar.showDate(new Date(2020,11,12),"month"); - -// shows the current month -calendar.showDate(null,"month"); -~~~ - -**Related sample**: [Calendar. Showing particular calendar date and mode](https://snippet.dhtmlx.com/nyfzc8cl) - -- **"year"** - allows selecting a year - -~~~js -calendar.showDate(new Date(2020,11,12),"year"); - -// shows the current year -calendar.showDate(null,"year"); -~~~ - -For example, Calendar can be attached to an input, a click on which will show Calendar in one of the modes: - -~~~html - -~~~ - -~~~js -var calendar = new dhx.Calendar("calendar_container"); -function showCalendar(){ - calendar.showDate(new Date(11,11,11),"month"); -}; -~~~ - -## Getting current mode - -There is a possibility to get the current mode of displaying Calendar via the [getCurrentMode()](calendar/api/calendar_getcurrentmode_method.md) method. The method returns one of the available calendar modes: - -- month -- year -- calendar -- timepicker - -~~~js -var mode = calendar.getCurrentMode(); // -> "calendar" -~~~ - -**Related sample**: [Calendar. Get current mode](https://snippet.dhtmlx.com/fadykqoc) - -## Getting selected date - -To get the selected date, call the [](calendar/api/calendar_getvalue_method.md) method. The method returns selected date either as a string (default) or as a Date object. -To get a date as an object, pass the *true* parameter to the method. - -~~~js -var date1 = calendar.getValue(); // -> "20/08/19" - -var date2 = calendar.getValue(true); // -> Tue Aug 20 2019 00:00:00 GMT+0300 -~~~ - -**Related sample**: [Calendar. Getting selected date](https://snippet.dhtmlx.com/k2vrfqj0) - -If you work with a calendar in the [range mode](calendar/configuring.md#range-mode) the **getValue()** method returns either an array of Date values or an array of string values with the start and end dates of the range. - -~~~js -// for a range calendar as an array of Date values -var date = calendar.getValue(true); -// -> [Mon Jun 03 2019 00:00:00 GMT+0300, Wed Jun 19 2019 00:00:00 GMT+0300] - -// for a range calendar as an array of string values -var date = calendar.getValue(); // -> ["03/06/19", "19/06/19"] -~~~ - -## Linking two calendars - -You can create two calendars and link them to provide the ability of selecting a date range. The first calendar will be used for setting the start date of the range, while the end date of the range will be specified in the -second calendar. - -![](../assets/calendar/date_range.png) - -Use the [](calendar/api/calendar_link_method.md) method and pass as a parameter the object of the second calendar to link the first calendar to. -In the example below the [Change](calendar/api/calendar_change_event.md) event is intended to output the start and end dates of the selected range: - -~~~js -var calendar = new dhx.Calendar("calendar1", { css: "dhx_calendar--bordered" }); -var calendar2 = new dhx.Calendar("calendar2", { css: "dhx_calendar--bordered" }); - -calendar.link(calendar2); - -calendar.events.on("change", function (date) { - document.querySelector("#resultFrom").innerHTML = - "Date from: " + calendar.getValue() + "
"; -}); - -calendar2.events.on("change", function (date) { - document.querySelector("#resultTo").innerHTML = - "Date to: " + calendar2.getValue() + "
"; -}); -~~~ - -**Related sample**: [Calendar. Date range](https://snippet.dhtmlx.com/dxo54017) - -## Selecting date - -To select a date in a calendar, call the [](calendar/api/calendar_setvalue_method.md) method. The method has one mandatory parameter - a date that should be selected, which can be passed 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 - -~~~js -// selects the current date -calendar.setValue(new Date()); - -// sets the current date as an array of Date value -calendar.setValue([new Date()]); - -// sets a date as a string -calendar.setValue("30/05/19"); - -// sets a date as an array of string value -calendar.setValue(["30/05/19"]); - -//sets dates as an array of Date values(for the range mode) -calendar.setValue([new Date(2019,05,03), new Date(2019,05,19)]); - -//sets dates as an array of string values(for the range mode) -calendar.setValue(["03/06/19", "15/06/19"]); -~~~ - -In case a date has been successfully added into the calendar, the method will return *true*. - -**Related sample**: [Calendar. Preset selected date](https://snippet.dhtmlx.com/vmg11002) - - -{{note Please note that the format of date in the Calendar is defined by the [](calendar/api/calendar_dateformat_config.md) option. So, check that you've set the format of date you want to use in the calendar both in the -**setValue()** method and in the **dateFormat** property. Otherwise, the default format (**"%d/%m/%y"**) will be used.}} - -## Showing tooltips - -You can add tooltips for dates and show them on the [](calendar/api/calendar_datemouseover_event.md) event. For example, you can add tooltips to mark some special days: - -![](../assets/calendar/tooltips.png) - -~~~js -var special_days = { - "20__8": "Mum's birthday", - "28__8": "Trip to Canada" -} - -calendar.events.on("DateMouseOver", function(date, e) { - var key = date.getDate() + "__" + (date.getMonth() + 1); - if (key in special_days) { - dhx.tooltip(special_days[key], {node: e.target, position: "bottom"}); - } -}); -~~~ - - - - -