From 98626537099b5e20b78ff93be529f994d3812830 Mon Sep 17 00:00:00 2001 From: Maksim Lakatkou Date: Tue, 21 Apr 2026 16:10:56 +0200 Subject: [PATCH 01/42] [update] api_overview article Fix Scheduler others getshort references --- docs/api/api_overview.md | 32 ++++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/docs/api/api_overview.md b/docs/api/api_overview.md index 30c896c3..f366bc3c 100644 --- a/docs/api/api_overview.md +++ b/docs/api/api_overview.md @@ -441,22 +441,22 @@ description: You can explore an API overview in the documentation of the DHTMLX | [](api/template/xml_format.md) | @getshort(api/template/xml_format.md) | -## Scheduler others +## Scheduler others | Name | Description | |--------------------------------------------|---------------------------------------------| -| [](api/other/ajax.md) | @getshort(api/method/ajax_other.md) | -| [](api/other/config.md) | @getshort(api/method/config_other.md) | -| [](api/other/date.md) | @getshort(api/method/date_other.md) | -| [](api/other/env.md) | @getshort(api/method/env_other.md) | -| [i18n](api/other/i18n.md) | @getshort(api/method/i18n_other.md) | -| [](api/other/ical.md) | @getshort(api/method/ical_other.md) | -| [](api/other/json.md) | @getshort(api/method/json_other.md) | -| [](api/other/keys.md) | @getshort(api/method/keys_other.md) | -| [](api/other/locale.md) | @getshort(api/method/locale_other.md) | -| [](api/other/matrix.md) | @getshort(api/method/matrix_other.md) | -| [](api/other/skin.md) | @getshort(api/method/skin_other.md) | -| [](api/other/templates.md) | @getshort(api/method/templates_other.md) | -| [](api/other/tooltip.md) | @getshort(api/method/tooltip_other.md) | -| [](api/other/version.md) | @getshort(api/method/version_other.md) | -| [](api/other/xy.md) | @getshort(api/method/xy_other.md) | +| [](api/other/ajax.md) | @getshort(api/other/ajax.md) | +| [](api/other/config.md) | @getshort(api/other/config.md) | +| [](api/other/date.md) | @getshort(api/other/date.md) | +| [](api/other/env.md) | @getshort(api/other/env.md) | +| [](api/other/i18n.md) | @getshort(api/other/i18n.md) | +| [](api/other/ical.md) | @getshort(api/other/ical.md) | +| [](api/other/json.md) | @getshort(api/other/json.md) | +| [](api/other/keys.md) | @getshort(api/other/keys.md) | +| [](api/other/locale.md) | @getshort(api/other/locale.md) | +| [](api/other/matrix.md) | @getshort(api/other/matrix.md) | +| [](api/other/skin.md) | @getshort(api/other/skin.md) | +| [](api/other/templates.md) | @getshort(api/other/templates.md) | +| [](api/other/tooltip.md) | @getshort(api/other/tooltip.md) | +| [](api/other/version.md) | @getshort(api/other/version.md) | +| [](api/other/xy.md) | @getshort(api/other/xy.md) | From 3f345ed5af5bf45c098efae6f027d47ad259de51 Mon Sep 17 00:00:00 2001 From: Maksim Lakatkou Date: Tue, 21 Apr 2026 16:57:33 +0200 Subject: [PATCH 02/42] [update] handle empty links in nested folders Extend readFile to walk up directories when resolving paths --- docusaurus.config.js | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/docusaurus.config.js b/docusaurus.config.js index e7eeca68..04740229 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -78,10 +78,15 @@ const readFile = (workingDir, filePath) => { finalPath += !fs.existsSync(finalPath + '.md') ? '.mdx' : '.md'; } - const normalizedPath = path.normalize(finalPath); - - if (!fs.existsSync(finalPath)) { + const parentDir = path.dirname(workingDir); + if (parentDir !== workingDir) { + const parentResult = readFile(parentDir, filePath); + if (parentResult) { + return parentResult; + } + } + const clippedFilePath = filePath.split('/'); clippedFilePath.shift(); if (!clippedFilePath.length) { @@ -90,7 +95,7 @@ const readFile = (workingDir, filePath) => { return readFile(workingDir, clippedFilePath.join('/')); } - + const normalizedPath = path.normalize(finalPath); if (fileContentCache.has(normalizedPath)) { return fileContentCache.get(normalizedPath); } From c8d551fca1a8bb2021321748e662efa56a4780ca Mon Sep 17 00:00:00 2001 From: Maksim Lakatkou Date: Wed, 22 Apr 2026 10:17:01 +0200 Subject: [PATCH 03/42] [update] createtimelineview article Refresh code examples and normalize API prose formatting --- docs/api/method/createtimelineview.md | 136 +++++++++++++------------- 1 file changed, 67 insertions(+), 69 deletions(-) diff --git a/docs/api/method/createtimelineview.md b/docs/api/method/createtimelineview.md index cc62c18e..3226db6d 100644 --- a/docs/api/method/createtimelineview.md +++ b/docs/api/method/createtimelineview.md @@ -10,7 +10,7 @@ description: "creates the Timeline view in the scheduler" ::: ### Description -@short: Creates the Timeline view in the scheduler +@short: Creates the Timeline view in the scheduler. @signature: createTimelineView: (config: any) =\> void @@ -24,21 +24,21 @@ description: "creates the Timeline view in the scheduler" // the time scale from 8 AM to 8 PM with a 30-minute step scheduler.createTimelineView({ name: "timeline", - x_unit: "minute", - x_date: "%H:%i", - x_step: 30, - x_size: 24, + x_unit: "minute", + x_date: "%H:%i", + x_step: 30, + x_size: 24, x_start: 16, x_length: 48, fit_events_offset: 15, - y_unit:[ - {key:1, label:"Section A"}, - {key:2, label:"Section B"}, - {key:3, label:"Section C"}, - {key:4, label:"Section D"} + y_unit: [ + { key: 1, label: "Section A" }, + { key: 2, label: "Section B" }, + { key: 3, label: "Section C" }, + { key: 4, label: "Section D" } ], y_property: "section_id", - render: "bar" + render: "bar" }); ~~~ @@ -56,82 +56,80 @@ scheduler.createTimelineView({ The method requires the [timeline](guides/extensions-list.md#timeline) plugin to be activated. ::: - The configuration object of the Timeline view can have the following properties: -- name- (string) the view's id. If you specify the name of some already existing Timeline view, it will be overwritten -- render - ('cell', 'bar', 'tree', 'days') the view's mode. By default, 'cell' -- y_property - (string) the name of a data property that will be used to assign events to certain sections -- y_unit - (array of objects) defines sections of the view.
Each object in the array specifies a single section and takes these properties: - - children - (array) an array of nested items' objects (for 'Tree' mode only) - - key - (string) the section's id. This attribute is compared with the event's data property to assign the event to a section - - label - (string) the section's label - - open - (boolean) specifies whether the section will be opened initially (for 'Tree' mode only) -- days - (number) a number of items (days) in the Y-Axis. Applicable to the 'Days' mode only -- x_unit - (minute, hour, day, week, month, year) the measuring unit of the X-Axis. By default, 'minute' -- x_date - (string) the date format of the [X-Axis](guides/settings-format.md). If not specified, the [hour_date](api/config/hour_date.md) format is used -- x_step - (number) the X-Axis step in 'x_unit's. By default, 1 -- x_start - (number) the X-Axis offset in 'x_unit's. By default, 0 -- x_size - (number) the X-Axis length specified as the total number of 'x_step's. By default, 24 -- x_length - (number) the number of 'x_step's that will be scrolled at a time, when the user clicks on the 'next' button in the scheduler's header. Optional. By default, 1. +- `name` - (*string*) the view's id. If you specify the name of some already existing Timeline view, it will be overwritten +- `render` - (*'cell', 'bar', 'tree', 'days'*) the view's mode. By default, 'cell' +- `y_property` - (*string*) the name of a data property that will be used to assign events to certain sections +- `y_unit` - (*array of objects*) defines sections of the view. Each object in the array specifies a single section and takes these properties: + - `children` - (*array*) an array of nested items' objects (for 'Tree' mode only) + - `key` - (*string*) the section's id. This attribute is compared with the event's data property to assign the event to a section + - `label` - (*string*) the section's label + - `open` - (*boolean*) specifies whether the section will be opened initially (for 'Tree' mode only) +- `days` - (*number*) a number of items (days) in the Y-Axis. Applicable to the 'Days' mode only +- `x_unit` - (*minute, hour, day, week, month, year*) the measuring unit of the X-Axis. By default, 'minute' +- `x_date` - (*string*) the date format of the [X-Axis](guides/settings-format.md). If not specified, the [`hour_date`](api/config/hour_date.md) format is used +- `x_step` - (*number*) the X-Axis step in `x_unit`s. By default, 1 +- `x_start` - (*number*) the X-Axis offset in `x_unit`s. By default, 0 +- `x_size` - (*number*) the X-Axis length specified as the total number of `x_step`s. By default, 24 +- `x_length` - (*number*) the number of `x_step`s that will be scrolled at a time, when the user clicks on the 'next' button in the scheduler's header. Optional. By default, 1. It's a bit knotty parameter, and to not make a mistake, remember the following: - - You can use the parameter only if x_unit='minute' or x_unit='hour'. In other cases, the parameter doesn't need specifying at all. - - If x_unit='minute' or x_unit='hour' and you don't specify x_length, the X-Axis will display the time interval (not the whole day, as usual) - specified by the remaining scale parameters (x_start, x_step, x_size). This allows you to divide a day into equal time intervals and scroll them with the 'next' button. - - If x_unit='minute' or x_unit='hour' and you decide to set the parameter, set it to all day (i.e. x_length should be equal to the number of x_steps needed to fill the whole day) + - You can use the parameter only if `x_unit='minute'` or `x_unit='hour'`. In other cases, the parameter doesn't need specifying at all. + - If `x_unit='minute'` or `x_unit='hour'` and you don't specify `x_length`, the X-Axis will display the time interval (not the whole day, as usual) + specified by the remaining scale parameters (`x_start`, `x_step`, `x_size`). This allows you to divide a day into equal time intervals and scroll them with the 'next' button. + - If `x_unit='minute'` or `x_unit='hour'` and you decide to set the parameter, set it to all day (i.e. `x_length` should be equal to the number of `x_steps` needed to fill the whole day) to provide correct work of the 'next' button. -- first_hour - (number) sets the start hour of the cell's time interval. The attribute is applicable only if x_unit="day" -- last_hour - (number) sets the end hour of the cell's time interval. The attribute is applicable only if x_unit="day" -- show_unassigned (boolean) if false, events which belong to none of the sections won't be displayed. If true - such events will be placed to the first section. By default - false. Optional -- section_autoheight - (boolean) enables automatic height adjustment for cells. By default, true -- dy - (number) the minimum height of cells (if the section_autoheight property has value false, the height of cells will be equal to dy, otherwise the height of cells will be increased +- `first_hour` - (*number*) sets the start hour of the cell's time interval. The attribute is applicable only if `x_unit="day"` +- `last_hour` - (*number*) sets the end hour of the cell's time interval. The attribute is applicable only if `x_unit="day"` +- `show_unassigned` - (*boolean*) if *false*, events which belong to none of the sections won't be displayed. If *true* - such events will be placed to the first section. By default - *false*. Optional +- `section_autoheight` - (*boolean*) enables automatic height adjustment for cells. By default, *true* +- `dy` - (*number*) the minimum height of cells (if the `section_autoheight` property has value *false*, the height of cells will be equal to `dy`, otherwise the height of cells will be increased to fill all free space). By default, 50 -- dx - (number) the width of the column with the sections' names. By default, 200 -- event_dy - (number/string)the height of events. Can have the 'full' value and occupy the entire cell. By default, equal to scheduler.xy.bar_height-5 -- event_min_dy - (number) the minimum event height. By default, equal to scheduler.xy.bar_height-5 -- resize_events - (boolean) specifies whether the height of individual events should be decreased, to make the total height equal to the height of one single event (but not less than the value -of the event_min_dy property). By default, true -- fit_events - (boolean) specifies whether the section's height should be increased, to fit all events in this section, or should be fixed (the dy parameter). Available from -version 3.0. By default, true -- fit_events_offset - (number) adds extra space (in pixels) under the last event. It is applied when fit_events is set to true -- round_position- (boolean)'stretches' the events all over the entire cell width, no matter how long the event lasts. By default, false. For 'Bar' and 'Tree' modes only -- folder_events_available - (boolean) should be set as true, if you want to have the possibility to specify events not only for an individual holder, but also for the whole folder (any -level). Applicable to the 'Tree' mode only. By default, false -- folder_dy - (number) the height of folders in pixels (folders are sections that have child sections). Applicable to the 'Tree' mode only -- second_scale - (object) adds the second X-Axis on the top of the default one and serves to group time intervals on the original scale. Optional. Available from version 3.0.
The scale -object has the following properties: - - x_unit - (minute, hour, day, week, month, year) the measuring unit of the axis. By default, 'minute' - - x_date - (string) the date format of the [axis](guides/settings-format.md). If not specified, the [hour_date](api/config/hour_date.md) format is used -- scrollable - (boolean) enables horizontal scroll in the Timeline view, false by default. If false or undefined, date columns will shrink to fit the time scale into the viewport width. -If true, date columns will not shrink less than the column_width value, a horizontal scroll bar will appear when necessary. -- column_width - (number) defines the minimal width of timeline date columns, 100 by default -- scroll_position - (Date) renders timeline scrolled to a specific position, takes the same arguments as timeline.scrollTo(), i.e. the date you want timeline to be scrolled to after rendering -- autoscroll - (object) allows configuring sensibility and speed of autoscroll. The autoscroll object has the properties below: - - range_x - (number) horizontal autoscroll distance from the edge of the data area - - range_y - (number) vertical autoscroll distance from the edge of the data area - - speed_x - (number) horizontal autoscroll speed - - speed_y - (number) vertical autoscroll speed -- cell_template - (boolean) enables rendering a template specified for a timeline -- **smart_rendering** - (*boolean*) enables smart rendering functionality in a timeline (allows rendering only the rows, columns, and events visible on the screen, while other elements are being rendered +- `dx` - (*number*) the width of the column with the sections' names. By default, 200 +- `event_dy` - (*number/string*) the height of events. Can have the `full` value and occupy the entire cell. By default, equal to `scheduler.xy.bar_height-5` +- `event_min_dy` - (*number*) the minimum event height. By default, equal to `scheduler.xy.bar_height-5` +- `resize_events` - (*boolean*) specifies whether the height of individual events should be decreased, to make the total height equal to the height of one single event (but not less than the value +of the `event_min_dy` property). By default, *true* +- `fit_events` - (*boolean*) specifies whether the section's height should be increased, to fit all events in this section, or should be fixed (the `dy` parameter). Available from +version 3.0. By default, *true* +- `fit_events_offset` - (*number*) adds extra space (in pixels) under the last event. It is applied when `fit_events` is set to *true* +- `round_position` - (*boolean*) 'stretches' the events all over the entire cell width, no matter how long the event lasts. By default, *false*. For 'Bar' and 'Tree' modes only +- `folder_events_available` - (*boolean*) should be set as *true*, if you want to have the possibility to specify events not only for an individual holder, but also for the whole folder (any +level). Applicable to the 'Tree' mode only. By default, *false* +- `folder_dy` - (*number*) the height of folders in pixels (folders are sections that have child sections). Applicable to the 'Tree' mode only +- `second_scale` - (*object*) adds the second X-Axis on the top of the default one and serves to group time intervals on the original scale. Optional. Available from version 3.0. The scale +object has the following properties: + - `x_unit` - (*minute, hour, day, week, month, year*) the measuring unit of the axis. By default, 'minute' + - `x_date` - (*string*) the date format of the [axis](guides/settings-format.md). If not specified, the [`hour_date`](api/config/hour_date.md) format is used +- `scrollable` - (*boolean*) enables horizontal scroll in the Timeline view, false by default. If *false* or undefined, date columns will shrink to fit the time scale into the viewport width. +If *true*, date columns will not shrink less than the `column_width` value, a horizontal scroll bar will appear when necessary. +- `column_width` - (*number*) defines the minimal width of timeline date columns, 100 by default +- `scroll_position` - (*Date*) renders timeline scrolled to a specific position, takes the same arguments as `timeline.scrollTo()`, i.e. the date you want timeline to be scrolled to after rendering +- `autoscroll` - (*object*) allows configuring sensibility and speed of autoscroll. The autoscroll object has the properties below: + - `range_x` - (*number*) horizontal autoscroll distance from the edge of the data area + - `range_y` - (*number*) vertical autoscroll distance from the edge of the data area + - `speed_x` - (*number*) horizontal autoscroll speed + - `speed_y` - (*number*) vertical autoscroll speed +- `cell_template` - (*boolean*) enables rendering a template specified for a timeline +- `smart_rendering` - (*boolean*) enables smart rendering functionality in a timeline (allows rendering only the rows, columns, and events visible on the screen, while other elements are being rendered during scrolling of the timeline). Note that in a [scrollable timeline](views/timeline.md#horizontal-scroll) this setting is enabled by default. -- columns- (array) a list of columns for the left-hand panel. If not specified, the [timeline_scale_label](api/template/timelinename_scale_label.md) template will be used for the content of the panel. +- `columns` - (*array*) a list of columns for the left-hand panel. If not specified, the [`timeline_scale_label`](api/template/timelinename_scale_label.md) template will be used for the content of the panel. ## Dynamic change of properties -All defined timeline objects are stored in the **scheduler.matrix** object. -You can access the configuration of any timeline view by its name and change any property. Changes will be applied as soon as you update the scheduler: +All defined timeline objects are stored in the `scheduler.matrix` object. +You can access the configuration of any timeline view by its name and change any property. Changes will be applied as soon as you update the scheduler with `setCurrentView()`: ~~~js scheduler.getView('timeline').x_size = 12; scheduler.setCurrentView(); // redraws scheduler ~~~ - -where "timeline" is the name of the timeline view as specified in the [createTimelineView](api/method/createtimelineview.md) method: +where "timeline" is the name of the timeline view as specified in the [`createTimelineView()`](api/method/createtimelineview.md) method: ~~~js scheduler.createTimelineView({ - name:"timeline", + name: "timeline", ... }); ~~~ From 7f9ee223b4eb6918671ea6bb497d13013be817da Mon Sep 17 00:00:00 2001 From: Maksim Lakatkou Date: Wed, 22 Apr 2026 10:32:47 +0200 Subject: [PATCH 04/42] [update] extensions-list article Refresh extension links, add sample labels --- docs/guides/extensions-list.md | 148 ++++++++++++--------------------- 1 file changed, 51 insertions(+), 97 deletions(-) diff --git a/docs/guides/extensions-list.md b/docs/guides/extensions-list.md index 1ee9fe2c..08cf9f37 100644 --- a/docs/guides/extensions-list.md +++ b/docs/guides/extensions-list.md @@ -5,12 +5,12 @@ sidebar_label: "Full List of Extensions" # Full List of Extensions -dhtmlxScheduler includes a number of extensions which add extra functionality to the standard behavior. +dhtmlxScheduler includes a number of extensions which add extra functionality to the standard behavior. -To use an extension, you should activate it with the help of the [plugins](api/method/plugins.md) method. +To use an extension, activate it with the [`plugins()`](api/method/plugins.md) method. :::info -In v6.0, the extensions code files were removed from the **ext** folder of the scheduler's codebase and included into the *dhtmlxscheduler.js* file. +In v6.0, the extensions code files were removed from the **ext** folder of the scheduler's codebase and included into the *dhtmlxscheduler.js* file. If you use dhtmlxScheduler 5.3 and earlier versions, check the [migration article](migration.md#53---60). ::: @@ -29,12 +29,9 @@ scheduler.plugins({ Article: [Month View](views/month.md) - API: [active_link_view](api/config/active_link_view.md) - -[Month days as links](https://docs.dhtmlx.com/scheduler/samples/03_extensions/06_links_plugin.html) - +Sample: [Month days as links](https://docs.dhtmlx.com/scheduler/samples/03_extensions/06_links_plugin.html) ## Agenda View @@ -50,9 +47,7 @@ scheduler.plugins({ Article: [Agenda View](views/agenda.md) - -[Agenda view](https://docs.dhtmlx.com/scheduler/samples/03_extensions/03_agenda_view.html) - +Sample: [Agenda view](https://docs.dhtmlx.com/scheduler/samples/03_extensions/03_agenda_view.html) ## All Timed @@ -68,8 +63,7 @@ scheduler.plugins({ API: [all_timed](api/config/all_timed.md) - -[Displaying multi-day events in the regular way](https://docs.dhtmlx.com/scheduler/samples/03_extensions/26_multi_day_visible.html) +Sample: [Displaying multi-day events in the regular way](https://docs.dhtmlx.com/scheduler/samples/03_extensions/26_multi_day_visible.html) ## Collision @@ -81,13 +75,11 @@ scheduler.plugins({ }); ~~~ - #### Related resources Article: [Preventing Double Events in a Time Slot](guides/collisions.md) - -[Controlling the number of events in a time slot](https://docs.dhtmlx.com/scheduler/samples/03_extensions/15_collision.html) +Sample: [Controlling the number of events in a time slot](https://docs.dhtmlx.com/scheduler/samples/03_extensions/15_collision.html) ## Container Autoresize @@ -105,13 +97,11 @@ Article: [dhtmlxScheduler in Plain JS/HTML](guides/initialization.md#scheduler-a API: [container_autoresize](api/config/container_autoresize.md) - -[Autoresizing the scheduler container](https://docs.dhtmlx.com/scheduler/samples/03_extensions/28_container_autoresize.html) - +Sample: [Autoresizing the scheduler container](https://docs.dhtmlx.com/scheduler/samples/03_extensions/28_container_autoresize.html) ## Cookie -Saves the scheduler current state (mode and date ) in cookies. +Saves the scheduler current state (mode and date) in cookies. ~~~js scheduler.plugins({ @@ -121,8 +111,7 @@ scheduler.plugins({ #### Related resources -[Work with cookies](https://docs.dhtmlx.com/scheduler/samples/03_extensions/08_cookies_plugin.html) - +Sample: [Work with cookies](https://docs.dhtmlx.com/scheduler/samples/03_extensions/08_cookies_plugin.html) ## Daytimeline @@ -138,12 +127,11 @@ scheduler.plugins({ }); ~~~ - #### Related resources Article: [Timeline View](views/timeline.md) -[Days as Timeline rows](https://docs.dhtmlx.com/scheduler/samples/06_timeline/14_days_as_sections.html) +Sample: [Days as Timeline rows](https://docs.dhtmlx.com/scheduler/samples/06_timeline/14_days_as_sections.html) ## Drag-n-Drop between Schedulers @@ -164,7 +152,6 @@ scheduler.plugins({ Article: [Drag-and-drop between Schedulers](guides/drag-between.md) - ## Editors A code file for the [radio](guides/radio.md), [combo](guides/combo.md), [checkbox](guides/checkbox.md) controls of the lightbox. @@ -175,18 +162,15 @@ scheduler.plugins({ }); ~~~ - #### Related resources -Article: [](guides/lightbox-editors.md) - - -[Radio button in the lightbox](https://docs.dhtmlx.com/scheduler/samples/02_customization/14_radio_buttons_section.html) +Article: [Lightbox Editors](guides/lightbox-editors.md) +Sample: [Radio button in the lightbox](https://docs.dhtmlx.com/scheduler/samples/02_customization/14_radio_buttons_section.html) ## Expand -Adds the "expand" icon to the right corner of the scheduler. A click on this icon changes +Adds the "expand" icon to the right corner of the scheduler. A click on this icon changes the scheduler's size from original to 'full screen' and vice versa. ~~~js @@ -195,17 +179,13 @@ scheduler.plugins({ }); ~~~ - #### Related resources -API: [expand](api/method/expand.md), [collapse](api/method/collapse.md) - +API: [`expand()`](api/method/expand.md), [`collapse()`](api/method/collapse.md) Events: [onBeforeExpand](api/event/onbeforeexpand.md), [onBeforeCollapse](api/event/onbeforecollapse.md), [onExpand](api/event/onexpand.md), [onCollapse](api/event/oncollapse.md) - - -[Full-screen view](https://docs.dhtmlx.com/scheduler/samples/03_extensions/05_expand_plugin.html) +Sample: [Full-screen view](https://docs.dhtmlx.com/scheduler/samples/03_extensions/05_expand_plugin.html) ## Export service @@ -219,11 +199,9 @@ scheduler.plugins({ #### Related resources -Article: [Export to PDF](export/pdf.md) , [Export to PNG](export/png.md) - - -[Export to PDF/PNG](https://docs.dhtmlx.com/scheduler/samples/04_export/06_online_export.html) +Article: [Export to PDF](export/pdf.md), [Export to PNG](export/png.md) +Sample: [Export to PDF/PNG](https://docs.dhtmlx.com/scheduler/samples/04_export/06_online_export.html) ## Grid View @@ -239,14 +217,11 @@ scheduler.plugins({ }); ~~~ - #### Related resources Article: [Grid View](views/grid.md) - -[Grid view](https://docs.dhtmlx.com/scheduler/samples/03_extensions/27_grid_view.html) - +Sample: [Grid view](https://docs.dhtmlx.com/scheduler/samples/03_extensions/27_grid_view.html) ## HTML Templates @@ -262,7 +237,7 @@ scheduler.plugins({ Article: [Templates](guides/templates.md#specifying-templates-with-code) -[Specifying templates with HTML](https://docs.dhtmlx.com/scheduler/samples/03_extensions/09_html_templates_plugin.html) +Sample: [Specifying templates with HTML](https://docs.dhtmlx.com/scheduler/samples/03_extensions/09_html_templates_plugin.html) ## Keyboard Navigation @@ -279,9 +254,9 @@ scheduler.plugins({ Article: [Keyboard Navigation](guides/keyboard-navigation.md) -[Keyboard Navigation and WAI-ARIA - Flat Skin](https://docs.dhtmlx.com/scheduler/samples/13_accessibility/01_regular_skin_all_views.html) +Sample: [Keyboard Navigation and WAI-ARIA - Flat Skin](https://docs.dhtmlx.com/scheduler/samples/13_accessibility/01_regular_skin_all_views.html) -[Keyboard navigation in the scheduler](https://docs.dhtmlx.com/scheduler/samples/03_extensions/07_navigation_plugin.html) +Sample: [Keyboard navigation in the scheduler](https://docs.dhtmlx.com/scheduler/samples/03_extensions/07_navigation_plugin.html) ## Legacy @@ -311,7 +286,7 @@ scheduler.plugins({ Article: [Blocking and Marking Dates](guides/limits.md) -[Limiting dates for creating events](https://docs.dhtmlx.com/scheduler/samples/03_extensions/16_limitation.html) +Sample: [Limiting dates for creating events](https://docs.dhtmlx.com/scheduler/samples/03_extensions/16_limitation.html) ## Map View @@ -328,7 +303,7 @@ scheduler.plugins({ Article: [Map View](views/map.md) -[Map view](https://docs.dhtmlx.com/scheduler/samples/03_extensions/19_map_view.html) +Sample: [Map view](https://docs.dhtmlx.com/scheduler/samples/03_extensions/19_map_view.html) ## Mini Calendar (Date Picker) @@ -345,10 +320,10 @@ scheduler.plugins({ Article: [Mini Calendar (Date Picker)](guides/minicalendar.md), [Time and Date](guides/time.md#mini-calendar-in-the-lightbox) -[Mini calendar in the scheduler header](https://docs.dhtmlx.com/scheduler/samples/05_calendar/01_select.html) +Sample: [Mini calendar in the scheduler header](https://docs.dhtmlx.com/scheduler/samples/05_calendar/01_select.html) -## Multisection +## Multisection :::info This extension is available in PRO version only @@ -366,11 +341,9 @@ scheduler.plugins({ Article: [Timeline View](views/timeline.md), [Units View](views/units.md) - API: [multisection](api/config/multisection.md) - -[Multisection events in Timeline and Units view](https://docs.dhtmlx.com/scheduler/samples/12_multisection_events/01_multisection_events.html) +Sample: [Multisection events in Timeline and Units view](https://docs.dhtmlx.com/scheduler/samples/12_multisection_events/01_multisection_events.html) ## Multiselect @@ -385,10 +358,9 @@ scheduler.plugins({ #### Related resources -Article: lightbox_editors.md +Article: [Lightbox Editors](guides/lightbox-editors.md) - -[Multiselect control in the lightbox](https://docs.dhtmlx.com/scheduler/samples/03_extensions/21_multiselect_options.html) +Sample: [Multiselect control in the lightbox](https://docs.dhtmlx.com/scheduler/samples/03_extensions/21_multiselect_options.html) ## Multisource @@ -405,7 +377,7 @@ scheduler.plugins({ Article: [Loading Data](guides/loading-data.md#loading-data-from-multiple-sources) -[Loading data from multiple sources](https://docs.dhtmlx.com/scheduler/samples/03_extensions/13_multisource.html) +Sample: [Loading data from multiple sources](https://docs.dhtmlx.com/scheduler/samples/03_extensions/13_multisource.html) ## Outerdrag @@ -417,14 +389,11 @@ scheduler.plugins({ }); ~~~ - #### Related resources Article: [Drag-and-Drop Operations](guides/drag-between.md) - -[Integration with dhtmlxTree](https://docs.dhtmlx.com/scheduler/samples/10_integration/02_dhtmlxtree_outer_drag.html) - +Sample: [Integration with dhtmlxTree](https://docs.dhtmlx.com/scheduler/samples/10_integration/02_dhtmlxtree_outer_drag.html) ## PDF @@ -437,7 +406,7 @@ Provides export to a PDF document. ## Quick Info -Provides a popup with an event details. +Provides a popup with event details. ~~~js scheduler.plugins({ @@ -445,12 +414,11 @@ scheduler.plugins({ }); ~~~ - #### Related resources Article: [Mobile Responsive Scheduler](guides/touch-support.md) -[Touch-oriented scheduler](https://docs.dhtmlx.com/scheduler/samples/03_extensions/29_quick_info.html) +Sample: [Touch-oriented scheduler](https://docs.dhtmlx.com/scheduler/samples/03_extensions/29_quick_info.html) ## Readonly @@ -463,12 +431,11 @@ scheduler.plugins({ }); ~~~ - #### Related resources Article: [Read-only Mode](guides/readonly.md) -[Read-only lightbox](https://docs.dhtmlx.com/scheduler/samples/03_extensions/12_readonly_form.html) +Sample: [Read-only lightbox](https://docs.dhtmlx.com/scheduler/samples/03_extensions/12_readonly_form.html) ## Recurring @@ -481,13 +448,12 @@ scheduler.plugins({ }); ~~~ - #### Related resources Article: [Recurring Events](guides/recurring-events.md) -[Recurring events](https://docs.dhtmlx.com/scheduler/samples/03_extensions/01_recurring_events.html) - +Sample: [Recurring events](https://docs.dhtmlx.com/scheduler/samples/03_extensions/01_recurring_events.html) + ## Recurring Legacy @@ -513,12 +479,11 @@ scheduler.plugins({ }); ~~~ - #### Related resources Article: [Data Serialization to XML, JSON, iCal](export/serialization.md) -[Serialize scheduler events](https://docs.dhtmlx.com/scheduler/samples/04_export/01_serialize_data.html) +Sample: [Serialize scheduler events](https://docs.dhtmlx.com/scheduler/samples/04_export/01_serialize_data.html) ## Timeline @@ -535,14 +500,11 @@ scheduler.plugins({ }); ~~~ - #### Related resources Article: [Timeline View](views/timeline.md) - -[Bar mode](https://docs.dhtmlx.com/scheduler/samples/06_timeline/02_lines.html) - +Sample: [Bar mode](https://docs.dhtmlx.com/scheduler/samples/06_timeline/02_lines.html) ## Tooltip @@ -554,14 +516,11 @@ scheduler.plugins({ }); ~~~ - #### Related resources Article: [Tooltips](guides/tooltips.md) - -[Tooltips](https://docs.dhtmlx.com/scheduler/samples/03_extensions/20_tooltip.html) - +Sample: [Tooltips](https://docs.dhtmlx.com/scheduler/samples/03_extensions/20_tooltip.html) ## Treetimeline @@ -577,14 +536,11 @@ scheduler.plugins({ }); ~~~ - #### Related resources Article: [Timeline View](views/timeline.md) - -[Tree mode](https://docs.dhtmlx.com/scheduler/samples/06_timeline/03_tree.html) - +Sample: [Tree mode](https://docs.dhtmlx.com/scheduler/samples/06_timeline/03_tree.html) ## Units @@ -600,33 +556,33 @@ scheduler.plugins({ }); ~~~ - #### Related resources Article: [Units View](views/units.md) -[Units view](https://docs.dhtmlx.com/scheduler/samples/03_extensions/02_units_view.html) +Sample: [Units view](https://docs.dhtmlx.com/scheduler/samples/03_extensions/02_units_view.html) ## URL -Saves the scheduler's state (date, event's id, view) in URL. +Saves the scheduler's state (date, event's id, view) in the URL. -For example, -``` - 10_url_date_plugin.html#date=2014-08-01,mode=month or 10_url_date_plugin.html#event="15 +For example: + +```text +10_url_date_plugin.html#date=2027-08-01,mode=month +10_url_date_plugin.html#event=15 ``` + ~~~js scheduler.plugins({ url: true }); ~~~ - #### Related resources -[Saving the scheduler state in URL](https://docs.dhtmlx.com/scheduler/samples/03_extensions/10_url_date_plugin.html) - +Sample: [Saving the scheduler state in URL](https://docs.dhtmlx.com/scheduler/samples/03_extensions/10_url_date_plugin.html) ## Week Agenda @@ -642,12 +598,11 @@ scheduler.plugins({ }); ~~~ - #### Related resources Article: [Week Agenda View](views/weekagenda.md) -[WeekAgenda view](https://docs.dhtmlx.com/scheduler/samples/03_extensions/24_week_agenda.html) +Sample: [WeekAgenda view](https://docs.dhtmlx.com/scheduler/samples/03_extensions/24_week_agenda.html) ## Year @@ -664,5 +619,4 @@ scheduler.plugins({ Article: [Year View](views/year.md) - -[Year view](https://docs.dhtmlx.com/scheduler/samples/03_extensions/04_year_view.html) +Sample: [Year view](https://docs.dhtmlx.com/scheduler/samples/03_extensions/04_year_view.html) From f914426f97fca4c2f5c115d9517161f1d93867b9 Mon Sep 17 00:00:00 2001 From: Maksim Lakatkou Date: Wed, 22 Apr 2026 10:51:44 +0200 Subject: [PATCH 05/42] [update] recurring-events article Refresh recurring examples, fix custom block snippets, and update dates to 2027 --- docs/guides/recurring-events.md | 244 +++++++++++++++----------------- 1 file changed, 118 insertions(+), 126 deletions(-) diff --git a/docs/guides/recurring-events.md b/docs/guides/recurring-events.md index 0d794d15..295cec63 100644 --- a/docs/guides/recurring-events.md +++ b/docs/guides/recurring-events.md @@ -3,9 +3,9 @@ title: "Recurring Events" sidebar_label: "Recurring Events" --- -# Recurring Events +# Recurring Events -Recurring events are a common feature in event calendar applications, allowing users to create events that repeat at specified intervals. Starting from v7.1 the Scheduler uses [RFC-5545](https://datatracker.ietf.org/doc/html/rfc5545) based format for recurring events. +Recurring events are a common feature in event calendar applications, allowing users to create events that repeat at specified intervals. Starting from v7.1 the Scheduler uses the [RFC-5545](https://datatracker.ietf.org/doc/html/rfc5545) based format for recurring events. This article will explain how to use recurring events in the Scheduler and how to store them in the database. @@ -13,7 +13,7 @@ This article will explain how to use recurring events in the Scheduler and how t You can find the description of the legacy format of recurring events [here](guides/recurring-events-legacy.md) ::: -By default, Scheduler doesn't support recurring events. To provide such a support, you need to enable a special extension on the page - **recurring**: +By default, Scheduler doesn't support recurring events. To provide such support, you need to enable the `recurring` extension on the page: ~~~js scheduler.plugins({ @@ -21,7 +21,7 @@ scheduler.plugins({ }); ~~~ -Once the support for recurring events is activated, the lightbox starts looking as shown below: +Once the support for recurring events is activated, the lightbox starts looking as shown below: ![recurring_lightbox](/img/recurring_lightbox.png) @@ -30,22 +30,19 @@ Once the support for recurring events is activated, the lightbox starts looking The library provides the following option to configure recurring events: -- [repeat_date](api/config/repeat_date.md) - sets the date format of the 'End by' field in the 'recurring' lightbox - +- [`repeat_date`](api/config/repeat_date.md) - sets the date format of the 'End by' field in the 'recurring' lightbox ~~~js scheduler.config.repeat_date = "%m/%d/%Y"; ... -scheduler.init('scheduler_here', new Date(2019, 7, 5), "month"); +scheduler.init('scheduler_here', new Date(2027, 7, 5), "month"); ~~~ - -[Recurring events](https://docs.dhtmlx.com/scheduler/samples/03_extensions/01_recurring_events.html) - +**Related sample** [Recurring events](https://docs.dhtmlx.com/scheduler/samples/03_extensions/01_recurring_events.html) ## 'Recurring' lightbox -By default, once the recurring extension is enabled, the lightbox starts to have one more section - "Repeat event". +By default, once the recurring extension is enabled, the lightbox starts to have one more section - "Repeat event". And the default definition of the 'recurring' lightbox starts to be as in: ~~~js @@ -56,13 +53,12 @@ scheduler.config.lightbox.sections = [ ]; ~~~ - -[Recurring events](https://docs.dhtmlx.com/scheduler/samples/03_extensions/01_recurring_events.html) +**Related sample** [Recurring events](https://docs.dhtmlx.com/scheduler/samples/03_extensions/01_recurring_events.html) ## Format description -A recurring event is stored in the database as a single record that contains all fields of a regular event plus several additional properties: +A recurring event is stored in the database as a single record that contains all fields of a regular event plus several additional properties: 1. **start_date** - (_datetime_) defines the start date of the series 2. **end_date** - (_datetime_) defines the end date of the series @@ -83,15 +79,15 @@ Our format differs from the iCalendar format in the two key moments: In the iCalendar format, the start and end dates of a recurring series are typically included as a part of the **RRULE** string as **STDATE** and **DTEND** properties. In our format, **stdate** and **dtend** are stored as separate fields. This separation allows for easier manipulation and querying of recurring events by date without the need to parse the **RRULE** string. -Here is an example of the recurring event series which is set to repeat every Monday starting from June 1, 2024 up until December 1, 2024: +Here is an example of the recurring event series which is set to repeat every Monday starting from June 1, 2027 up until December 1, 2027: ~~~js { "id": 1, "text": "Weekly Team Meeting", - "start_date": "2024-06-03 09:00:00", + "start_date": "2027-06-03 09:00:00", "duration": 3600, - "end_date": "2024-12-02 10:00:00", + "end_date": "2027-12-02 10:00:00", "rrule": "FREQ=WEEKLY;INTERVAL=1;BYDAY=MO", "recurring_event_id": null, "original_start": null @@ -101,7 +97,7 @@ Here is an example of the recurring event series which is set to repeat every Mo #### Handling exceptions Exceptions, also referred to as modified or deleted occurrences of the series, are stored as separate event records that are linked to their parent series. -Exceptions have three additional properties: **recurring_event_id**, **original_start**, and **deleted**. +Exceptions have three additional properties: **recurring_event_id**, **original_start**, and **deleted**. These properties allow us to identify modified or deleted instances and their relationship to the parent series easily. :::note @@ -115,9 +111,9 @@ Here is the example of the recurring series with one modified and one deleted oc { "id": 1, "text": "Weekly Team Meeting", - "start_date": "2024-06-03 09:00:00", + "start_date": "2027-06-03 09:00:00", "duration": 3600, - "end_date": "2024-12-02 10:00:00", + "end_date": "2027-12-02 10:00:00", "rrule": "FREQ=WEEKLY;INTERVAL=1;BYDAY=MO", "recurring_event_id": null, "original_start": null @@ -125,45 +121,44 @@ Here is the example of the recurring series with one modified and one deleted oc { "id": 2, "text": "Special Team Meeting", - "start_date": "2024-06-10 09:00:00", - "end_date": "2024-06-10 11:00:00", + "start_date": "2027-06-10 09:00:00", + "end_date": "2027-06-10 11:00:00", "rrule": null, "recurring_event_id": 1, - "original_start": "2024-06-10 09:00:00" + "original_start": "2027-06-10 09:00:00" }, { "id": 3, "text": "Deleted Team Meeting", - "start_date": "2024-06-17 09:00:00", - "end_date": "2024-06-17 10:00:00", + "start_date": "2027-06-17 09:00:00", + "end_date": "2027-06-17 10:00:00", "rrule": null, "recurring_event_id": 1, - "original_start": "2024-06-17 09:00:00", + "original_start": "2027-06-17 09:00:00", "deleted": true } ] ~~~ -The repeated event scheduled for `2024-06-10 09:00:00` will be replaced with `Special Team Meeting` record, and the event scheduled for `2024-06-17 09:00:00` will be skipped. +The repeated event scheduled for `2027-06-10 09:00:00` will be replaced with the `Special Team Meeting` record, and the event scheduled for `2027-06-17 09:00:00` will be skipped. -Note, that **rrule** of the modified or deleted occurrences is ignored. +Note that **rrule** of the modified or deleted occurrences is ignored. **text**, **start_date**, and **end_date** of deleted instances are also ignored and the values of these fields won't affect the behavior of the Scheduler. -## Editing/deleting a certain occurrence in the series +## Editing/deleting a certain occurrence in the series -There is a possibility to delete or edit a particular occurrence in a series. +There is a possibility to delete or edit a particular occurrence in a series. ### Important tips - For each update of the recurring event a separate record is created in the DB. - Particular occurrences refer to the parent event through the **recurring_event_id** property. -- Once you have edited an occurrence in the series, the **original_start** field for this update -will store the Date, when the occurrence should have happened if it wasn't edited, instead of the real event length. -So if the occurrence has happened on July 27, 2024 at 15:00 and was moved to July 30, 2024 15:00, the time stamp would reflect the first date. +- Once you have edited an occurrence in the series, the **original_start** field for this update +will store the Date when the occurrence should have happened if it wasn't edited, instead of the real event length. +So if the occurrence has happened on July 27, 2027 at 15:00 and was moved to July 30, 2027 15:00, the time stamp would reflect the first date. - -### Server-side logic +### Server-side logic In addition to extra fields, a specific logic needs to be added to the server-side controller: @@ -191,7 +186,7 @@ Starting from version 4.2, Scheduler allows you to specify a custom HTML for the ### Default template of the control for the lightbox's recurring block -The default template of the control for the lightbox's recurring block looks like the following code, +The default template of the control for the lightbox's recurring block looks like the following code, where the `loc` object is a [locale](api/other/locale.md) object (region-specific labels) of the Scheduler: ~~~html @@ -211,62 +206,58 @@ where the `loc` object is a [locale](api/other/locale.md) object (region-specifi
-
- -
-
- - - - - - - -
- -
-
- -
- +
+
+ + + + + + + +
+
+ +
+
+ +
-
${loc.repeat_ends}
-
- -
-
- -
-
- -
+
+ +
+
+ +
+
+
@@ -276,8 +267,8 @@ where the `loc` object is a [locale](api/other/locale.md) object (region-specifi #### The main recurring select control -Basically, the recurring block of the lightbox contains the main recurring select control that has 5 -default types of recurrence with the following options: "Every day", "Every week", "Every month", +Basically, the recurring block of the lightbox contains the main recurring select control that has 5 +default types of recurrence with the following options: "Every day", "Every week", "Every month", "Every year", "Every weekday". Additionally, it includes the "Custom" option for creating the required type and the "Never" option to disable the recurrence: @@ -299,7 +290,7 @@ For the "Custom" repeat type there are special repeat type units: "Day", "Week", The "Week", "Month" and "Year" units have their own sections with specific repetition options (by default these sections are hidden until you select the required type): ~~~html -
+
- + +
+
+
-
-
@@ -375,9 +367,9 @@ input for the amount of repeat events. If the "ON" option is selected, there wil ### Example of a custom recurring block Let's create an example of a custom recurring block. Imagine that you want to remove the "monthly" and "yearly" repeat types and have the "no end date" option -for all events (i.e. remove the block for specifying the recurrence end). +for all events (i.e. remove the block for specifying the recurrence end). -1. Define the markup of a custom form and place it somewhere on the page +1. Define the markup of a custom form and place it somewhere on the page (you can start by copying the default template): ~~~html @@ -425,12 +417,11 @@ for all events (i.e. remove the block for specifying the recurrence end). 2. Set the **form** parameter of the "recurring" section to the id of your custom form: -~~~js +~~~js {3} scheduler.config.lightbox.sections = [ { name: "description", type: "textarea", map_to: "text", focus: true }, - { name: "recurring", type: "recurring", map_to: "rrule", - form: "my_recurring_form" }, /*!*/ - { name: "time", type: "time", map_to: "auto", height: 72 }, + { name: "recurring", type: "recurring", map_to: "rrule", form: "my_recurring_form" }, + { name: "time", type: "time", map_to: "auto", height: 72 } ]; ~~~ @@ -441,60 +432,61 @@ The resulting lightbox with a custom recurring block is shown in the image below The following snippet demonstrates how a lightbox with a custom recurring block given above can be implemented: **Related sample** [Lightbox with a custom recurring block](https://snippet.dhtmlx.com/0ha0edlk) - + ### Notes for changing the recurring block -Please, before starting to apply a custom configuration to the lightbox's recurring block, note the following things: +Please, before starting to apply a custom configuration to the lightbox's recurring block, note the following things: 1. The **name** attribute is hardcoded for all inputs: the inputs with different names will be ignored. 2. The **value** attribute is fixed for all inputs except for ones that imply direct input. 3. When you specify a new form, Scheduler doesn't use it directly and just replicates your HTML structure in the lightbox's template. -It means that all event handlers or custom properties that have been attached to DOMElements of your form from the code won't be applied to the form in the lightbox. -If you want to attach an event handler, you need either to specify it as an inline HTML attribute, or attach a handler to the form when it's shown in the lightbox. +It means that all event handlers or custom properties that have been attached to DOM elements of your form from the code won't be applied to the form in the lightbox. +If you want to attach an event handler, you need either to specify it as an inline HTML attribute, or attach a handler to the form when it's shown in the lightbox with `addEventListener()`. :::note Beware, Scheduler doesn't work with your original HTML form and just creates its copy in the lightbox's template. ::: - For example: - the following line will be copied to the lightbox: ~~~html - + ~~~ - the line below won't be copied to the lightbox: ~~~js -addEventListener(node, "click", function(){...}) +node.addEventListener("click", () => { + ... +}); ~~~ ## Custom confirmation modal {#customconfirmationmodal} -When a user edits or drags a recurring event, the scheduler displays a built-in modal that asks whether to modify just this occurrence, this and following events, or the entire series. You can replace it with your own UI by overriding `scheduler.ext.recurring.confirm`. +When a user edits or drags a recurring event, the Scheduler displays a built-in modal that asks whether to modify just this occurrence, this and following events, or the entire series. You can replace it with your own UI by overriding `scheduler.ext.recurring.confirm`. ~~~js -scheduler.ext.recurring.confirm = function(context) { - // context contains: - // - origin: "lightbox" | "dnd" - // - occurrence: the occurrence event object - // - series: the parent series event object - // - labels: { title, ok, cancel, occurrence, following, series } - // - options: ["occurrence", "following", "series"] - // - // Return one of: "occurrence", "following", "series", or null to cancel. - // Can return a Promise for async UI. - - return new Promise(function(resolve) { - myCustomDialog.show({ - title: context.labels.title, - options: context.options, - onSelect: function(choice) { resolve(choice); }, - onCancel: function() { resolve(null); } +scheduler.ext.recurring.confirm = (context) => { + // context contains: + // - origin: "lightbox" | "dnd" + // - occurrence: the occurrence event object + // - series: the parent series event object + // - labels: { title, ok, cancel, occurrence, following, series } + // - options: ["occurrence", "following", "series"] + // + // Return one of: "occurrence", "following", "series", or null to cancel. + // Can return a Promise for async UI. + + return new Promise((resolve) => { + myCustomDialog.show({ + title: context.labels.title, + options: context.options, + onSelect: (choice) => { resolve(choice); }, + onCancel: () => { resolve(null); } + }); }); - }); }; ~~~ From 0eee4c410917b83f6e9fda7bbad333fbed796999 Mon Sep 17 00:00:00 2001 From: Maksim Lakatkou Date: Wed, 22 Apr 2026 11:46:23 +0200 Subject: [PATCH 06/42] [update] loading-data article Refresh loading examples, modernize backend snippets, and update dates to 2027 --- docs/guides/loading-data.md | 258 +++++++++++++++++++++--------------- 1 file changed, 149 insertions(+), 109 deletions(-) diff --git a/docs/guides/loading-data.md b/docs/guides/loading-data.md index c6ef2939..0bb6a95c 100644 --- a/docs/guides/loading-data.md +++ b/docs/guides/loading-data.md @@ -7,42 +7,59 @@ sidebar_label: "Loading Data" dhtmlxScheduler can load data in several formats. Most applications use **JSON**. **iCalendar (.ics)** and **XML** are also supported for compatibility or import scenarios. -[Data formats overview](guides/data-formats.md) +### Related Guides + +- [Data formats overview](guides/data-formats.md) ## Loading data from an inline dataset -To load data from an inline dataset, use the [parse](api/method/parse.md) method: +To load data from an inline dataset, use the [`parse()`](api/method/parse.md) method: ~~~js -scheduler.init("scheduler_here", new Date(2026, 4, 1), "month"); +scheduler.init("scheduler_here", new Date(2027, 4, 1), "month"); ... scheduler.parse([ - {id: 1, text:"Meeting", start_date:"2026-05-11 14:00", end_date:"2026-05-11 17:00"}, - {id: 2, text:"Conference", start_date:"2026-05-15 12:00", end_date:"2026-05-18 19:00"}, - {id: 3, text:"Interview", start_date:"2026-05-24 09:00", end_date:"2026-05-24 10:00"} -],"json"); - + { id: "1", text: "Meeting", start_date: "2027-05-11 14:00", end_date: "2027-05-11 17:00" }, + { id: "2", text: "Conference", start_date: "2027-05-15 12:00", end_date: "2027-05-18 19:00" }, + { id: "3", text: "Interview", start_date: "2027-05-24 09:00", end_date: "2027-05-24 10:00" } +]); ~~~ -[Displaying events as a cascade](https://docs.dhtmlx.com/scheduler/samples/02_customization/24_cascade_event_display.html) +### Related samples + +- [Displaying events as a cascade](https://docs.dhtmlx.com/scheduler/samples/02_customization/24_cascade_event_display.html) + +### Related API -Related: [parse](api/method/parse.md), [Data formats](guides/data-formats.md) +- [`parse()`](api/method/parse.md) + +### Related Guides + +- [Data formats](guides/data-formats.md) ## Loading data from a data file -To load data from a file, use the [load](api/method/load.md) method: +To load data from a file, use the [`load()`](api/method/load.md) method: ~~~js -scheduler.init("scheduler_here", new Date(2026, 4, 1), "month"); +scheduler.init("scheduler_here", new Date(2027, 4, 1), "month"); ... -scheduler.load("data.json"); //loading data from a file +scheduler.load("data.json"); // loading data from a file ~~~ -[Basic initialization](https://docs.dhtmlx.com/scheduler/samples/01_initialization_loading/01_basic_init.html) +### Related samples + +- [Basic initialization](https://docs.dhtmlx.com/scheduler/samples/01_initialization_loading/01_basic_init.html) -Related: [load](api/method/load.md), [Data formats](guides/data-formats.md) +### Related API + +- [`load()`](api/method/load.md) + +### Related Guides + +- [Data formats](guides/data-formats.md) ## Loading data from a backend @@ -51,40 +68,51 @@ Load data from your backend by exposing a REST endpoint that returns Scheduler e - The server-side implementation depends on your stack. For example, in Node.js you can add a route that returns event data: ~~~js -app.get('/data', function(req, res){ - db.event.find().toArray(function(err, data){ - res.json(data); - }); +app.get("/data", async (request, response) => { + const events = await db.event.find().toArray(); + response.json(events); }); ~~~ -- On the client side, call [load](api/method/load.md) with the data URL: +- On the client side, call [`load()`](api/method/load.md) with the data URL: ~~~js -scheduler.init("scheduler_here", new Date(2026, 4, 1), "month"); +scheduler.init("scheduler_here", new Date(2027, 4, 1), "month"); scheduler.load("/data"); ~~~ :::note -For saving changes back to the server, use [DataProcessor](api/method/createdataprocessor.md). See [Server-Side Integration](guides/server-integration.md). +For saving changes back to the server, use [`createDataProcessor()`](api/method/createdataprocessor.md). See [Server-Side Integration](guides/server-integration.md). ::: -Related: [Server-Side Integration](guides/server-integration.md), [createDataProcessor](api/method/createdataprocessor.md) +### Related API + +- [`createDataProcessor()`](api/method/createdataprocessor.md) + +### Related Guides + +- [Server-Side Integration](guides/server-integration.md) ## Loading data from multiple sources -To load data from multiple sources, request the endpoints you need and combine the results before calling [parse](api/method/parse.md): +To load data from multiple sources, request the endpoints you need and combine the results before calling [`parse()`](api/method/parse.md): ~~~js Promise.all([ - fetch("/api/events").then(r => r.json()), - fetch("/api/holidays").then(r => r.json()) + fetch("/api/events").then((response) => response.json()), + fetch("/api/holidays").then((response) => response.json()) ]).then(([events, holidays]) => { - scheduler.parse([...events, ...holidays]); + scheduler.parse([...events, ...holidays]); }); ~~~ -Related: [parse](api/method/parse.md), [Data formats](guides/data-formats.md) +### Related API + +- [`parse()`](api/method/parse.md) + +### Related Guides + +- [Data formats](guides/data-formats.md) ## Data Properties @@ -99,68 +127,74 @@ To be correctly parsed, each event must include the following properties: The default date format for JSON and XML data is **'%Y-%m-%d %H:%i'** (see the [date format specification](guides/settings-format.md)) - To change it, use the [date_format](api/config/date_format.md) configuration option. +To change it, use the [`date_format`](api/config/date_format.md) configuration option. ~~~js -scheduler.config.date_format="%Y-%m-%d %H:%i"; +scheduler.config.date_format = "%Y-%m-%d %H:%i"; ... -scheduler.init("scheduler_here", new Date(2026, 4, 18), "week"); +scheduler.init("scheduler_here", new Date(2027, 4, 18), "week"); ~~~ ### Custom properties -You are not limited to the mandatory properties listed above and can add any custom ones to data items. +You are not limited to the mandatory properties listed above and can add any custom ones to data items. Extra data properties will be parsed as strings and loaded to the client side where you can use them according to your needs. See examples of data with custom properties [here](guides/data-formats.md) -Related: [Event object](guides/event-object-operations.md), [date_format](api/config/date_format.md) +### Related API + +- [`date_format`](api/config/date_format.md) + +### Related Guides + +- [Event object](guides/event-object-operations.md) ## Database Structure When you set up a database, the expected structure for scheduler events is the following: - **events table** - specifies scheduler events - - **id** - (*string/int/guid*) - the event id. Primary key, auto increment. -- **start_date** - (*DateTime*) - the start date of event, not nullable. -- **end_date** - (*DateTime*) - the start date of event, not nullable. -- **text** - (*string*) - the description of a task. +- **id** - (*string/int/guid*) the event id. Primary key, auto increment. +- **start_date** - (*DateTime*) the start date of the event, not nullable. +- **end_date** - (*DateTime*) the end date of the event, not nullable. +- **text** - (*string*) the description of a task. If you have recurring events, add the following fields: -- **events table** - specifies scheduler events - - **rrule** - (*string*) - recurrence rule in RFC-5545 format - - **duration** - (*number*) - duration of each occurrence in seconds - - **recurring_event_id** - (*string/int/guid*) - parent series id for modified/deleted occurrences - - **original_start** - (*DateTime*) - original start date of the edited/deleted occurrence - - **deleted** - (*boolean*) - marks deleted occurrences +- **rrule** - (*string*) recurrence rule in RFC-5545 format +- **duration** - (*number*) duration of each occurrence in seconds +- **recurring_event_id** - (*string/int/guid*) parent series id for modified/deleted occurrences +- **original_start** - (*DateTime*) original start date of the edited/deleted occurrence +- **deleted** - (*boolean*) marks deleted occurrences You can define any additional columns, they can be loaded to the client and made available for the client-side API. -Related: [Recurring Events](guides/recurring-events.md) +### Related Guides + +- [Recurring Events](guides/recurring-events.md) ## Dynamic loading -By default, dhtmlxScheduler loads all data at once. It may become problematic when you are using big event collections. +By default, dhtmlxScheduler loads all data at once. It may become problematic when you are using big event collections. In such situations you may use the dynamic loading mode and load data by parts, necessary to fill the current viewable area of the scheduler. ### Technique -To enable the dynamic loading, call the [setLoadMode](api/method/setloadmode.md) method: -[Enabling the dynamic loading](Enabling the dynamic loading) +To enable the dynamic loading, call the [`setLoadMode()`](api/method/setloadmode.md) method: + ~~~js scheduler.setLoadMode("month"); scheduler.load("/api/events"); ~~~ -As a parameter the method takes the loading mode that defines the size of the data to load: *day, week, month or year.* +As a parameter, the method takes the loading mode that defines the size of the data to load: *day, week, month or year.* For example, if you set the 'week' mode, the scheduler will request data just for the current week and load remaining ones on demand. - #### How loading modes work -The predefined loading modes specify the interval of loading data within the set period. For example, you open the Week View in the scheduler for the following dates: from 2026-02-02 to 2026-02-09. +The predefined loading modes specify the interval of loading data within the set period. For example, you open the Week View in the scheduler for the following dates: from 2027-02-02 to 2027-02-09. Depending on the chosen mode, the dynamic loading will go like this: - for the "day" mode @@ -169,7 +203,7 @@ Depending on the chosen mode, the dynamic loading will go like this: scheduler.setLoadMode("day"); ~~~ -Scheduler will request data by days, i.e.: from 2026-02-02 to 2026-02-09. +Scheduler will request data by days, i.e.: from 2027-02-02 to 2027-02-09. - for the "month" mode @@ -177,7 +211,7 @@ Scheduler will request data by days, i.e.: from 2026-02-02 to 2026-02-09. scheduler.setLoadMode("month"); ~~~ -Scheduler will request data by whole months, i.e.: from 2026-02-01 to 2026-03-01. +Scheduler will request data by whole months, i.e.: from 2027-02-01 to 2027-03-01. - for the "year" mode @@ -185,8 +219,7 @@ Scheduler will request data by whole months, i.e.: from 2026-02-01 to 2026-03-01 scheduler.setLoadMode("year"); ~~~ -Scheduler will request data by whole years, i.e.: from 2026-01-01 to 2027-01-01. - +Scheduler will request data by whole years, i.e.: from 2027-01-01 to 2028-01-01. In any case, the requested interval won't be smaller than the rendered one. @@ -200,7 +233,6 @@ The greater the loading interval is, the less the frequency of calls for dynamic The greater the loading interval is, the longer a request is being processed, since the more data are being loaded at once. - #### Request Generated requests look as in: @@ -209,21 +241,23 @@ Generated requests look as in: /api/events?from=DATEHERE&to=DATEHERE ~~~ -*where DATEHERE - a valid date value in the format defined by the [load_date](api/config/load_date.md) option.* +*where DATEHERE - a valid date value in the format defined by the [`load_date`](api/config/load_date.md) option.* -Related: [setLoadMode](api/method/setloadmode.md), [load_date](api/config/load_date.md) +### Related API +- [`setLoadMode()`](api/method/setloadmode.md) +- [`load_date`](api/config/load_date.md) ### Loading spinner When you deal with a large data size, it's useful to display the loading spinner. It will show users that the app is actually doing something. -To enable the loading spinner for the scheduler, set the [show_loading](api/config/show_loading.md) property to *true*. +To enable the loading spinner for the scheduler, set the [`show_loading`](api/config/show_loading.md) property to *true*. ~~~js scheduler.config.show_loading = true; ... -scheduler.init("scheduler_here", new Date(2026, 4, 10), "month"); +scheduler.init("scheduler_here", new Date(2027, 4, 10), "month"); ~~~ :::note @@ -232,79 +266,85 @@ To change the spinner image - replace 'imgs/loading.gif' with your custom image. ## Loading data with Timeline and Units sections from the server {#collections} -While loading data into [Timeline](views/timeline.md) and [Units](views/units.md) views, you need to set an array of sections that will be loaded into views. +While loading data into [Timeline](views/timeline.md) and [Units](views/units.md) views, you need to set an array of sections that will be loaded into views. -In order to load data containing Timeline and Units sections from the backend, you need to implement a more extended configuration: +In order to load data containing Timeline and Units sections from the backend, you need to implement a more extended configuration: -- during Timeline view initialization, instead of sections array you should use the [serverList](api/method/serverlist.md) method and pass the name of a collection as an argument: +- during Timeline view initialization, instead of sections array you should use the [`serverList()`](api/method/serverlist.md) method and pass the name of a collection as an argument: ~~~js scheduler.createTimelineView({ - .... - y_unit: scheduler.serverList("sections"), - ... + .... + y_unit: scheduler.serverList("sections"), + ... }); ~~~ -- to load data into scheduler, use the [load](api/method/load.md) method: +- to load data into scheduler, use the [`load()`](api/method/load.md) method: ~~~js scheduler.load("data.json"); ~~~ -If you fetch data manually (for example, to add headers), you can pass the same payload to [parse](api/method/parse.md): +If you fetch data manually (for example, to add headers), you can pass the same payload to [`parse()`](api/method/parse.md): ~~~js fetch("/api/timeline") - .then(r => r.json()) - .then(payload => scheduler.parse(payload, "json")); + .then((response) => response.json()) + .then((payload) => scheduler.parse(payload, "json")); ~~~ - while implementing scheduler data response on the backend, use the following format: ~~~js title="data.json" -{ - "data":[ - { - "id":"1", - "start_date":"2026-03-02 00:00:00", - "end_date":"2026-03-04 00:00:00", - "text":"dblclick me!", - "type":"1" - }, - { - "id":"2", - "start_date":"2026-03-09 00:00:00", - "end_date":"2026-03-11 00:00:00", - "text":"and me!", - "type":"2" - }, - { - "id":"3", - "start_date":"2026-03-16 00:00:00", - "end_date":"2026-03-18 00:00:00", - "text":"and me too!", - "type":"3" - }, - { - "id":"4", - "start_date":"2026-03-02 08:00:00", - "end_date":"2026-03-02 14:10:00", - "text":"Type 2 event", - "type":"2" - } - ], - "collections": { - "sections":[ - {"value":"1","label":"Simple"}, - {"value":"2","label":"Complex"}, - {"value":"3","label":"Unknown"} - ] - } +{ + "data":[ + { + "id":"1", + "start_date":"2027-03-02 00:00:00", + "end_date":"2027-03-04 00:00:00", + "text":"dblclick me!", + "type":"1" + }, + { + "id":"2", + "start_date":"2027-03-09 00:00:00", + "end_date":"2027-03-11 00:00:00", + "text":"and me!", + "type":"2" + }, + { + "id":"3", + "start_date":"2027-03-16 00:00:00", + "end_date":"2027-03-18 00:00:00", + "text":"and me too!", + "type":"3" + }, + { + "id":"4", + "start_date":"2027-03-02 08:00:00", + "end_date":"2027-03-02 14:10:00", + "text":"Type 2 event", + "type":"2" + } + ], + "collections": { + "sections":[ + {"value":"1","label":"Simple"}, + {"value":"2","label":"Complex"}, + {"value":"3","label":"Unknown"} + ] + } } ~~~ -In the above example the "data" array contains calendar events, and the "collections" hash contains collections that can be referenced via the [serverList](api/method/serverlist.md) method. +In the above example the "data" array contains calendar events, and the "collections" hash contains collections that can be referenced via the [`serverList()`](api/method/serverlist.md) method. + +### Related API + +- [`serverList()`](api/method/serverlist.md) -Related: [serverList](api/method/serverlist.md), [Timeline view](views/timeline.md), [Units view](views/units.md) +### Related Guides +- [Timeline view](views/timeline.md) +- [Units view](views/units.md) From 998a7da160a62a1f4cd9370850b431b6eaa10d63 Mon Sep 17 00:00:00 2001 From: Maksim Lakatkou Date: Wed, 22 Apr 2026 12:25:37 +0200 Subject: [PATCH 07/42] [update] addmarkedtimespan article Refresh marked timespan examples and clean article formatting --- docs/api/method/addmarkedtimespan.md | 115 +++++++++++++-------------- 1 file changed, 56 insertions(+), 59 deletions(-) diff --git a/docs/api/method/addmarkedtimespan.md b/docs/api/method/addmarkedtimespan.md index 925b89ba..009c4649 100644 --- a/docs/api/method/addmarkedtimespan.md +++ b/docs/api/method/addmarkedtimespan.md @@ -17,25 +17,25 @@ description: "marks dates, but with certain settings makes blocking (allows sett - `config` - (required) *object* - the configuration object of the timespan to mark/block ### Returns -- ` id` - (number) - the id of the added timespan +- `id` - (number) - the id of the added timespan ### Example ~~~jsx -//marks dates -scheduler.addMarkedTimespan({ - days: 5, // marks each Friday - zones: "fullday", // marks the entire day - css: "gray_section" // the name of applied CSS class +// marks dates +scheduler.addMarkedTimespan({ + days: 5, // marks each Friday + zones: "fullday", // marks the entire day + css: "gray_section" // the name of applied CSS class }); scheduler.updateView(); -//marks and blocks dates -scheduler.addMarkedTimespan({ - days: 5, +// marks and blocks dates +scheduler.addMarkedTimespan({ + days: 5, zones: "fullday", - css: "gray_section", - type: "dhx_time_block" //the hardcoded value + css: "gray_section", + type: "dhx_time_block" // the hardcoded value }); scheduler.updateView(); ~~~ @@ -49,16 +49,14 @@ scheduler.updateView(); The method is available from version 3.5. :::note - The method requires the [limit](guides/extensions-list.md#limit) plugin to be activated. +The method requires the [limit](guides/extensions-list.md#limit) plugin to be activated. ::: :::note -Note, marking (blocking) won't be applied just after you've called the method. You should call [updateView](api/method/updateview.md) to apply the marking. - -::: +Note, marking (blocking) won't be applied just after you've called the method. You should call [`updateView()`](api/method/updateview.md) to apply the marking. -
+::: ## Configuration object properties @@ -83,8 +81,8 @@ The configuration object can contain the following properties: ~~~js -//denies creating events from 3rd May,2012 till 'end_date' -start_date:new Date(2012,4,3) +// denies creating events from 2027-05-03 till 'end_date' +start_date: new Date(2027, 4, 3) ~~~ @@ -95,9 +93,9 @@ start_date:new Date(2012,4,3) ~~~js -//denies creating events from 'start_date' -// till 3rd September,2012 -end_date:new Date(2012,8,3) +// denies creating events from 'start_date' +// till 2027-09-03 +end_date: new Date(2027, 8, 3) ~~~ @@ -108,9 +106,9 @@ end_date:new Date(2012,8,3) ~~~js -days:[0, 2, 6] //limits Sunday,Tuesday and Saturday -days:"fullweek" //limits the entire week -days:new Date(2012,6,1) //blocks 1st July,2012 +days: [0, 2, 6] // limits Sunday, Tuesday and Saturday +days: "fullweek" // limits the entire week +days: new Date(2027, 6, 1) // blocks 2027-07-01 ~~~ @@ -121,9 +119,9 @@ days:new Date(2012,6,1) //blocks 1st July,2012 ~~~js -//2 limit blocks:04:00-08:00,12:00-15:00 -zones:[4*60,8*60,12*60,15*60] -zones:"fullday" //limits the entire day +// 2 limit blocks: 04:00-08:00, 12:00-15:00 +zones: [4 * 60, 8 * 60, 12 * 60, 15 * 60] +zones: "fullday" // limits the entire day ~~~ @@ -134,7 +132,7 @@ zones:"fullday" //limits the entire day ~~~js -css:"gray" //draws a DIV and applies the 'gray' css class to it +css: "gray" // draws a DIV and applies the 'gray' css class to it ~~~ @@ -145,8 +143,8 @@ css:"gray" //draws a DIV and applies the 'gray' css class to it ~~~js -//draws a DIV with this text over the marked range -html:"Blocked" +// draws a DIV with this text over the marked range +html: "Blocked" ~~~ @@ -157,7 +155,7 @@ html:"Blocked" ~~~js -type: "dhx_time_block" //events will be marked and blocked +type: "dhx_time_block" // events will be marked and blocked ~~~ @@ -168,23 +166,23 @@ type: "dhx_time_block" //events will be marked and blocked ~~~js -//results in 2 limitation blocks: 00:00-08:00, 17:00-24:00 -zones: [8*60, 17*60], invert_zones: true -//results in 2 limitation blocks: 00:00-08:00, 17:00-24:00 -zones: [0, 8*60, 17*60, 24*60], invert_zones: false +// results in 2 limitation blocks: 00:00-08:00, 17:00-24:00 +zones: [8 * 60, 17 * 60], invert_zones: true +// results in 2 limitation blocks: 00:00-08:00, 17:00-24:00 +zones: [0, 8 * 60, 17 * 60, 24 * 60], invert_zones: false ~~~ sections - allows blocking date(s) just for specific items of specific views.
BTW, the specified date(s) will be blocked just in the related view(s) + allows blocking date(s) just for specific items of specific views. The specified date(s) will be blocked only in the related view(s) ~~~js -//blocks dates just for the item with the id=5 in the Unit view -//and items with the id=2, id=3 in the Timeline view -sections: { unit: 5, timeline: [2,3]} +// blocks dates just for the item with the id=5 in the Unit view +// and items with the id=2, id=3 in the Timeline view +sections: { unit: 5, timeline: [2, 3] } ~~~ @@ -197,7 +195,7 @@ sections: { unit: 5, timeline: [2,3]} Note, *days*, *zones* and *start_date*, *end_date* properties are used in pairs to set the blocking interval and can't be mixed and used in some other variation. For example, you can't specify *zones*, *start_date* or *days*, *start_date*, *end_date* at the same time. - + ::: Therefore, there are 2 acceptable combinations with specific set of properties: @@ -226,15 +224,14 @@ Therefore, there are 2 acceptable combinations with specific set of properties: ~~~js -var config ={ - days: 1, - zones: [9*60, 15*60], - css: "cssClassName", +const config = { + days: 1, + zones: [9 * 60, 15 * 60], + css: "cssClassName", sections: { - unit: 5 + unit: 5 } -} - +}; ~~~ @@ -251,14 +248,14 @@ var config ={ ~~~js -var config ={ - start_date: new Date(2013,7,13), - end_date: new Date(2013,7,14), +const config = { + start_date: new Date(2027, 7, 13), + end_date: new Date(2027, 7, 14), css: "cssClassName", sections: { - unit: 5 + unit: 5 } -} +}; ~~~ @@ -266,7 +263,7 @@ var config ={ -## markTimespan() and addMarkedTimespan() comparison +## `markTimespan()` and `addMarkedTimespan()` comparison
@@ -275,19 +272,19 @@ addMarkedTimespan markTimespan
-requires calling the [updateView](api/method/updateview.md) method to draw a DIV for the time span +requires calling the [`updateView()`](api/method/updateview.md) method to draw a DIV for the time span -draws a DIV for the time span automatically +draws a DIV for the time span automatically
-the time span(s) exists all time along +the time span(s) exists all time along - the time span(s) will be hided just after any internal update occurs in the app + the time span(s) will be hided just after any internal update occurs in the app
-returns the ID of the configured time span(s) +returns the ID of the configured time span(s) -returns a DIV or an array of DIVs +returns a DIV or an array of DIVs
From 5bea7238269b9a1f7b1c7101f9465f8c0f5c39ba Mon Sep 17 00:00:00 2001 From: Maksim Lakatkou Date: Wed, 22 Apr 2026 12:46:17 +0200 Subject: [PATCH 08/42] [update] addevent article Refresh addEvent example and clean API prose --- docs/api/method/addevent.md | 28 +++++++++++++--------------- 1 file changed, 13 insertions(+), 15 deletions(-) diff --git a/docs/api/method/addevent.md b/docs/api/method/addevent.md index effac20f..7a20a8a6 100644 --- a/docs/api/method/addevent.md +++ b/docs/api/method/addevent.md @@ -17,17 +17,17 @@ description: "adds a new event" - `event` - (required) *object* - the event object ### Returns -- ` id` - (string) - the event's id +- `id` - (string) - the event's id ### Example ~~~jsx scheduler.addEvent({ - start_date: "16-06-2013 09:00", - end_date: "16-06-2013 12:00", - text: "Meeting", - holder: "John", // userdata - room: "5" // userdata + start_date: "2027-06-16 09:00", + end_date: "2027-06-16 12:00", + text: "Meeting", + holder: "John", // userdata + room: "5" // userdata }); ~~~ @@ -39,19 +39,17 @@ scheduler.addEvent({ :::note -The method invokes the [onEventAdded](api/event/oneventadded.md) or [onEventChanged](api/event/oneventchanged.md) event - +The method invokes the [`onEventAdded`](api/event/oneventadded.md) or [`onEventChanged`](api/event/oneventchanged.md) event. + ::: The event object can have the following properties: -- **start_date** - (*Date,string*) the date, when the event is scheduled to begin. If the property is specified as a string, the "%d-%m-%Y %H:%i" format should be used (to change the default format, -use the [api_date](api/config/api_date.md) option). For [recurring events](guides/recurring-events.md) the value of the **start_date** property must have the Date type. -- **end_date** - (*Date,string*) the date, when the event is scheduled to be completed. If the property is specified as a string, the "%d-%m-%Y %H:%i" format should be used (to change the default format, -use the [api_date](api/config/api_date.md) option). For [recurring events](guides/recurring-events.md) the value of the **end_date** property must have the Date type. -- **text** - (*string*) the event's text. -- **id** - (*string*) the event's id. If not specified, the id for the event will be generated automatically. -- **userdata** - (*hash*) a collection of custom properties presented as 'key-value' pairs. +- `start_date` - (*Date,string*) the date when the event is scheduled to begin. If the property is specified as a string, the "%d-%m-%Y %H:%i" format should be used (to change the default format, use the [`api_date`](api/config/api_date.md) option). For [recurring events](guides/recurring-events.md), the value of the `start_date` property must have the Date type. +- `end_date` - (*Date,string*) the date when the event is scheduled to be completed. If the property is specified as a string, the "%d-%m-%Y %H:%i" format should be used (to change the default format, use the [`api_date`](api/config/api_date.md) option). For [recurring events](guides/recurring-events.md), the value of the `end_date` property must have the Date type. +- `text` - (*string*) the event's text. +- `id` - (*string*) the event's id. If not specified, the id for the event will be generated automatically. +- `userdata` - (*hash*) a collection of custom properties presented as 'key-value' pairs. ### Related API - [api_date](api/config/api_date.md) From 08182c8f44621c46378c3a090a84cd64e7f1ad40 Mon Sep 17 00:00:00 2001 From: Maksim Lakatkou Date: Wed, 22 Apr 2026 12:57:09 +0200 Subject: [PATCH 09/42] [update] custom-details-form article Modernize custom lightbox examples and clean article formatting --- docs/guides/custom-details-form.md | 51 ++++++++++++++++-------------- 1 file changed, 27 insertions(+), 24 deletions(-) diff --git a/docs/guides/custom-details-form.md b/docs/guides/custom-details-form.md index e0ae8d88..603cc456 100644 --- a/docs/guides/custom-details-form.md +++ b/docs/guides/custom-details-form.md @@ -5,43 +5,46 @@ sidebar_label: "Fully Custom Lightbox" # Fully Custom Lightbox -To specify for the scheduler a fully custom lightbox you need to redefine the [showLightbox](api/method/showlightbox.md) method: +To specify a fully custom lightbox for the scheduler, redefine the [`showLightbox()`](api/method/showlightbox.md) method: ~~~js -scheduler.showLightbox = function(id){ +scheduler.showLightbox = (id) => { // id - id of event ... code to show any custom form ... -} +}; ~~~ -There are 2 helper methods you can use to simplify implementation: +There are 2 helper methods you can use to simplify the implementation: -- [startLightbox](api/method/startlightbox.md) - shows a custom lightbox in the specified HTML container centered on the screen. -- [endLightbox](api/method/endlightbox.md) - closes the lightbox +- [`startLightbox()`](api/method/startlightbox.md) - shows a custom lightbox in the specified HTML container centered on the screen +- [`endLightbox()`](api/method/endlightbox.md) - closes the lightbox -Let's assume that you have the **#custom_form** HTML container somewhere on the page. Then, to implement a custom lightbox you can use this: +Assume that you have the `#custom_form` HTML container somewhere on the page. Then you can implement a custom lightbox like this: ~~~js -var custom_form = document.getElementById("custom_form"); +const customForm = document.getElementById("custom_form"); -scheduler.showLightbox = function(id){ - var ev = scheduler.getEvent(id); - scheduler.startLightbox(id, custom_form ); +scheduler.showLightbox = (id) => { + const event = scheduler.getEvent(id); + scheduler.startLightbox(id, customForm); ...'here you need to set values in the form'... - //document.getElementById("some_input").value = ev.text; -} -//needs to be attached to the 'save' button -function save_form() { - var ev = scheduler.getEvent(scheduler.getState().lightbox_id); + // document.getElementById("some_input").value = event.text; +}; + +// needs to be attached to the 'save' button +const saveForm = () => { + const event = scheduler.getEvent(scheduler.getState().lightbox_id); ...'here you need to retrieve values from the form'... - //ev.text = document.getElementById("some_input").value; - scheduler.endLightbox(true, custom_form); -} -//needs to be attached to the 'cancel' button -function close_form(argument) { - scheduler.endLightbox(false, custom_form); -} + // event.text = document.getElementById("some_input").value; + scheduler.endLightbox(true, customForm); +}; + +// needs to be attached to the 'cancel' button +const closeForm = () => { + scheduler.endLightbox(false, customForm); +}; ~~~ +### Related samples -[Fully custom lightbox](https://docs.dhtmlx.com/scheduler/samples/02_customization/16_custom_form.html) +- [Fully custom lightbox](https://docs.dhtmlx.com/scheduler/samples/02_customization/16_custom_form.html) From 300221b4a4b229b63575c7b37d61c59a1a5279c1 Mon Sep 17 00:00:00 2001 From: Maksim Lakatkou Date: Wed, 22 Apr 2026 13:03:46 +0200 Subject: [PATCH 10/42] [update] localization article Clean localization guide and normalize locale examples --- docs/guides/localization.md | 95 ++++++++++++++++++------------------- 1 file changed, 46 insertions(+), 49 deletions(-) diff --git a/docs/guides/localization.md b/docs/guides/localization.md index ded9a829..50c4eade 100644 --- a/docs/guides/localization.md +++ b/docs/guides/localization.md @@ -3,22 +3,22 @@ title: "Localization" sidebar_label: "Localization" --- -# Localization +# Localization -The library supports scheduler's localization by providing a number of predefined locales and means of creating custom ones. By default, DHTMLX Scheduler uses [English locale](api/other/locale.md). +The library supports scheduler localization by providing a number of predefined locales and a way to create custom ones. By default, DHTMLX Scheduler uses the [English locale](api/other/locale.md). ## Activation -To set the desired language for the scheduler, you need to activate the necessary locale via the **setLocale** method of the [scheduler.i18n](api/other/i18n.md) object. +To set the desired language for the scheduler, activate the necessary locale via the `setLocale()` method of the [scheduler.i18n](api/other/i18n.md) object. ~~~js -scheduler.i18n.setLocale("fr"); +scheduler.i18n.setLocale("fr"); ~~~ You can use and update any of the [predefined locales](#included-locales) that are bundled with the dhtmlxscheduler.js file or define a custom locale. :::note -The locale can be switched dynamically but the changes will be applied only after a complete redrawing of the Scheduler either with the **scheduler.render()** or **scheduler.init()** call. +The locale can be switched dynamically, but the changes will be applied only after a complete redraw of the Scheduler with either the `scheduler.render()` or `scheduler.init()` call. ::: ~~~js @@ -26,14 +26,13 @@ scheduler.i18n.setLocale("fr"); scheduler.init("scheduler_here"); ~~~ +### Related samples +- [Localization](https://docs.dhtmlx.com/scheduler/samples/01_initialization_loading/07_locale_usage.html) -[Localization](https://docs.dhtmlx.com/scheduler/samples/01_initialization_loading/07_locale_usage.html) - - -## Included locales +## Included locales :::note -Both Common locale files and Recurring locale files reside in the **dhtmlxscheduler.js** file. +Both Common locale files and Recurring locale files reside in the `dhtmlxscheduler.js` file. ::: @@ -72,20 +71,20 @@ dhtmlxScheduler includes localization for the following languages: Ukrainianua -## Creating custom locale +## Creating custom locale :::note The [scheduler.i18n](api/other/i18n.md) object is added in v6.0. In previous versions, the [scheduler.locale](api/other/locale.md) object was used. For more information, see the [Migration article](migration.md#53---60). ::: -The easiest way to create a custom locale is to make a copy of the default (English) locale from the sample below, and translate all strings from it into the required language. +The easiest way to create a custom locale is to make a copy of the default English locale from the sample below and translate all strings into the required language. The custom locale can be applied to the Scheduler in two ways: -- either override the current locale via passing an object of the locale as a parameter to the **setLocale** method: +- either override the current locale by passing a locale object as a parameter to the `setLocale()` method: ~~~js -scheduler.i18n.setLocale(localeObject); +scheduler.i18n.setLocale(localeObject); ~~~ Note, if you provide a partial locale object, the scheduler will add your labels into the current locale: @@ -95,44 +94,43 @@ scheduler.i18n.setLocale({ labels: { day_tab: "Day", } -}); +}); ~~~ - or, if you need to switch between several locales, define the locale with a custom language code and switch the scheduler to it later: ~~~js -scheduler.i18n.addLocale("lang", localeObject); +scheduler.i18n.addLocale("lang", localeObject); scheduler.i18n.setLocale("lang"); ~~~ :::note -Note, activating a custom locale in the app will cause changes in the app's interface. Check and redefine (if required) all locale-dependent elements +Note, activating a custom locale in the app will cause changes in the app's interface. Check and redefine (if required) all locale-dependent elements to be sure that the scheduler looks fine in its new language. ::: -**Note**, +**Note** -- You can send your custom locale file to **support@dhtmlx.com** - so we will include it in the next release; -- The currently active locale is also available in the **scheduler.locale** object; -- **monthFull** - the full names of months starting from January; -- **monthShort** - the short names of months starting from January; -- **dayFull** - the full names of week days starting from Sunday; -- **dayShort** - the short names of week days starting from Sunday. +- You can send your custom locale file to **support@dhtmlx.com** so we can include it in the next release. +- The currently active locale is also available in the `scheduler.locale` object. +- `monthFull` - the full names of months starting from January +- `monthShort` - the short names of months starting from January +- `dayFull` - the full names of week days starting from Sunday +- `dayShort` - the short names of week days starting from Sunday - -[English locale definition](English locale definition) +### English locale definition ~~~js scheduler.i18n.setLocale({ - date:{ - month_full: ["January", "February", "March", "April", "May", "June", + date: { + month_full: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"], - month_short: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", + month_short: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], - day_full: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", + day_full: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"], day_short: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"] }, - labels:{ + labels: { dhx_cal_today_button: "Today", day_tab: "Day", week_tab: "Week", @@ -149,30 +147,30 @@ scheduler.i18n.setLocale({ section_time: "Time period", full_day: "Full day", - /*recurring events*/ - confirm_recurring:"Edit recurring event", - section_recurring:"Repeat event", - button_recurring:"Disabled", - button_recurring_open:"Enabled", + /* recurring events */ + confirm_recurring: "Edit recurring event", + section_recurring: "Repeat event", + button_recurring: "Disabled", + button_recurring_open: "Enabled", button_edit_series: "All events", button_edit_occurrence: "This event", button_edit_occurrence_and_following: "This and following events", - /*agenda view extension*/ + /* agenda view extension */ agenda_tab: "Agenda", date: "Date", description: "Description", - /*year view extension*/ + /* year view extension */ year_tab: "Year", /* week agenda extension */ week_agenda_tab: "Agenda", - /*grid view extension*/ + /* grid view extension */ grid_tab: "Grid", - /* touch tooltip*/ + /* touch tooltip */ drag_to_create: "Drag to create", drag_to_move: "Drag to move", @@ -228,20 +226,19 @@ scheduler.i18n.setLocale({ repeat_freq_year: "Year", repeat_on_date: "On date", repeat_ends: "Ends", - month_for_recurring: ["January", "February", "March", "April", "May", "June", + month_for_recurring: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"], - day_for_recurring: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", + day_for_recurring: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"] } }); ~~~ +### Related samples +- [Localization](https://docs.dhtmlx.com/scheduler/samples/01_initialization_loading/07_locale_usage.html) -[Localization](https://docs.dhtmlx.com/scheduler/samples/01_initialization_loading/07_locale_usage.html) - - -## Additional notes +## Additional notes -- If the **confirm_closing** or **confirm_deleting** label is not defined, the related confirm dialog will not be shown at all (auto-confirm); -- The **section_(name)** label refers to the lightbox section of the related name. -- The **new_event** label defines the default text of a new event. +- If the `confirm_closing` or `confirm_deleting` label is not defined, the related confirm dialog will not be shown at all (auto-confirm) +- The `section_(name)` label refers to the lightbox section of the related name +- The `new_event` label defines the default text of a new event From 641533cabacd32a0ad06473e9d616bd27c047798 Mon Sep 17 00:00:00 2001 From: Maksim Lakatkou Date: Wed, 22 Apr 2026 13:43:46 +0200 Subject: [PATCH 11/42] [update] onclick article Modernize onClick example and clean event description --- docs/api/event/onclick.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/api/event/onclick.md b/docs/api/event/onclick.md index 25d008ba..2ac6b24c 100644 --- a/docs/api/event/onclick.md +++ b/docs/api/event/onclick.md @@ -18,15 +18,15 @@ description: "fires when the user clicks the left mouse button on an event" - `e` - (required) *Event* - a native event object ### Returns -- ` result` - (boolean) - defines whether the default action of the event will be triggered (true) or canceled (false) +- `result` - (boolean) - defines whether the default action of the event will be triggered (`true`) or canceled (`false`) ### Example ~~~jsx -scheduler.attachEvent("onClick", function (id, e){ - //any custom logic here - return true; - }); +scheduler.attachEvent("onClick", (id, event) => { + // any custom logic here + return true; +}); ~~~ ### Related samples @@ -35,7 +35,7 @@ scheduler.attachEvent("onClick", function (id, e){ ### Details -The event is blockable. If non-true value is returned from the handler, the default reaction will be blocked ( by default, the selection bar appears). +The event is blockable. If a non-`true` value is returned from the handler, the default reaction will be blocked. By default, the selection bar appears. ### Related Guides - [Manipulations with Lightbox](guides/lightbox-editors-manipulations.md#opening-the-lightbox-on-a-single-click) From 68bf9183c6c1d5b46e29c58915d01524e1a0c601 Mon Sep 17 00:00:00 2001 From: Maksim Lakatkou Date: Wed, 22 Apr 2026 15:04:24 +0200 Subject: [PATCH 12/42] [update] updateview article Refresh updateView examples and clean method details --- docs/api/method/updateview.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/docs/api/method/updateview.md b/docs/api/method/updateview.md index 347e6382..32bd982e 100644 --- a/docs/api/method/updateview.md +++ b/docs/api/method/updateview.md @@ -14,18 +14,18 @@ description: "displays the specified view and date (doesn't invoke any events)" ### Parameters -- `date` - (optional) *Date* - the date to set -- `id` - (optional) *string* - the view name +- `date` - (optional) *Date* - the date to set +- `view` - (optional) *string* - the view name ### Example ~~~jsx -//displays the current view and date. Doesn't change anything, just refreshes +// displays the current view and date. Doesn't change anything, just refreshes scheduler.updateView(); -// displays the 4th July,2012 in the currently active view -scheduler.updateView(new Date(2012,7,4)); -// displays the 3rd May,2012 in the Week view -scheduler.updateView(new Date(2012,5,3), "week"); +// displays 2027-08-04 in the currently active view +scheduler.updateView(new Date(2027, 7, 4)); +// displays 2027-06-03 in the Week view +scheduler.updateView(new Date(2027, 5, 3), "week"); ~~~ ### Related samples @@ -33,9 +33,9 @@ scheduler.updateView(new Date(2012,5,3), "week"); ### Details -- Being invoked without parameters, the function will just refresh the current view. -- The names for default views are 'day', 'week', 'month'. To specify any other view - use its **name** parameter. -- The method is similar to [setCurrentView](api/method/setcurrentview.md). The only difference between methods is that unlike **updateView**, [setCurrentView](api/method/setcurrentview.md) generates the [onBeforeViewChange](api/event/onbeforeviewchange.md), [onViewChange](api/event/onviewchange.md) events. +- Being invoked without parameters, the function will just refresh the current view. +- The names for default views are 'day', 'week', 'month'. To specify any other view, use its `name` parameter. +- The method is similar to [`setCurrentView()`](api/method/setcurrentview.md). The only difference is that unlike `updateView()`, [`setCurrentView()`](api/method/setcurrentview.md) generates the [`onBeforeViewChange`](api/event/onbeforeviewchange.md) and [`onViewChange`](api/event/onviewchange.md) events. ### Related API - [setCurrentView](api/method/setcurrentview.md) From a6394b477dd6de3309e10097894ed3ca8c7501a8 Mon Sep 17 00:00:00 2001 From: Maksim Lakatkou Date: Wed, 22 Apr 2026 15:35:56 +0200 Subject: [PATCH 13/42] [update] multiple-per-page article Modernize multi-instance examples and fix scheduler setup samples --- docs/guides/multiple-per-page.md | 123 +++++++++++++++---------------- 1 file changed, 60 insertions(+), 63 deletions(-) diff --git a/docs/guides/multiple-per-page.md b/docs/guides/multiple-per-page.md index 087406d0..a9d881c6 100644 --- a/docs/guides/multiple-per-page.md +++ b/docs/guides/multiple-per-page.md @@ -3,7 +3,7 @@ title: "Creating Multiple Schedulers on a Page" sidebar_label: "Creating Multiple Schedulers on a Page" --- -# Creating Multiple Schedulers on a Page +# Creating Multiple Schedulers on a Page :::info This functionality is available in the Scheduler PRO version (Commercial (since October 6, 2021), Enterprise and Ultimate licenses) only. @@ -15,7 +15,7 @@ Now, for the PRO version, we should rephrase that statement and say: _more than ## Scheduler Instance Configuration -To create a new instance of dhtmlxScheduler, use the **Scheduler.getSchedulerInstance()** method: +To create a new instance of dhtmlxScheduler, use the `Scheduler.getSchedulerInstance()` method: ~~~js // Beware, 'Scheduler' in the command goes with the capital letter @@ -27,7 +27,7 @@ The method can take a configuration object as a parameter: ~~~js const scheduler = Scheduler.getSchedulerInstance({ plugins: { - recurring: true, + recurring: true }, container: "scheduler_here", config: { @@ -36,16 +36,11 @@ const scheduler = Scheduler.getSchedulerInstance({ }, data: { events: [ - { id:1, start_date: "2022-04-18 09:00", end_date: "2022-04-18 12:00", - text:"English lesson", subject: 'english' }, - { id:2, start_date: "2022-04-20 10:00", end_date: "2022-04-21 16:00", - text:"Math exam", subject: 'math' }, - { id:3, start_date: "2022-04-21 10:00", end_date: "2022-04-21 14:00", - text:"Science lesson", subject: 'science' }, - { id:4, start_date: "2022-04-23 16:00", end_date: "2022-04-23 17:00", - text:"English lesson", subject: 'english' }, - { id:5, start_date: "2022-04-22 09:00", end_date: "2022-04-22 17:00", - text:"Usual event" } + { id: 1, start_date: "2027-04-18 09:00", end_date: "2027-04-18 12:00", text: "English lesson", subject: 'english' }, + { id: 2, start_date: "2027-04-20 10:00", end_date: "2027-04-21 16:00", text: "Math exam", subject: 'math' }, + { id: 3, start_date: "2027-04-21 10:00", end_date: "2027-04-21 14:00", text: "Science lesson", subject: 'science' }, + { id: 4, start_date: "2027-04-23 16:00", end_date: "2027-04-23 17:00", text: "English lesson", subject: 'english' }, + { id: 5, start_date: "2027-04-22 09:00", end_date: "2027-04-22 17:00", text: "Usual event" } ] } }); @@ -53,24 +48,23 @@ const scheduler = Scheduler.getSchedulerInstance({ The config object can contain the following properties: -- **container** - (*string|HTMLElement*) an HTML container (or its id) that the Scheduler will be displayed in. If not specified, Scheduler will be initialized without a container. -- **config** - (*object*) an object with configuration settings of the Scheduler -- **xy** - (*object*) an object with [sizes of the scheduler's elements](api/other/xy.md) -- **templates** - (*object*) an object with templates -- **events** - (*object*) an object with event handlers. +- `container` - (*string|HTMLElement*) an HTML container (or its id) that the Scheduler will be displayed in. If not specified, Scheduler will be initialized without a container +- `config` - (*object*) an object with configuration settings of the Scheduler +- `xy` - (*object*) an object with [sizes of the scheduler's elements](api/other/xy.md) +- `templates` - (*object*) an object with templates +- `events` - (*object*) an object with event handlers - -You need to use the following format while specifying event handlers for a new instance of Scheduler: +You need to use the following format while specifying event handlers for a new Scheduler instance: ~~~js const scheduler = Scheduler.getSchedulerInstance({ events: { - onEventCreated: function(id, e){ - var task = scheduler.getEvent(id); - task.owner = null; + onEventCreated: (id) => { + const createdEvent = scheduler.getEvent(id); + createdEvent.owner = null; return true; }, - onClick: function(id, e){ + onClick: (id) => { alert(scheduler.getEvent(id).text); return true; } @@ -78,50 +72,51 @@ const scheduler = Scheduler.getSchedulerInstance({ }); ~~~ -- **data** - (*object|string*) an object with data to load or the URL to load data from -- **plugins** - (*object*) extensions that need to be activated -- **locale** - (*string|object*) a two-letter language code or an object of the locale that needs to be activated +- `data` - (*object|string*) an object with data to load or the URL to load data from +- `plugins` - (*object*) extensions that need to be activated +- `locale` - (*string|object*) a two-letter language code or an object of the locale that needs to be activated -**Note**, that calling the **Scheduler.getSchedulerInstance()** method without parameters will return the scheduler object with default configuration settings. +**Note**, calling the `Scheduler.getSchedulerInstance()` method without parameters will return the scheduler object with default configuration settings. Therefore, you need to configure your new instance, initialize it and populate with data, as usual. -Let's take a simple example: 2 schedulers, one under another: - +Let's take a simple example: 2 schedulers, one under another: ~~~js -window.addEventListener("DOMContentLoaded", function(){ - var scheduler1 = Scheduler.getSchedulerInstance(); - scheduler1.init('scheduler_here',new Date(2019,5,30),"week"); - scheduler1.load("/data/events") - - var scheduler2 = Scheduler.getSchedulerInstance(); - scheduler2.init('scheduler_here_2',new Date(2019,5,30),"month"); - scheduler2.load("/data/events") -)}; +window.addEventListener("DOMContentLoaded", () => { + const firstScheduler = Scheduler.getSchedulerInstance(); + firstScheduler.init("scheduler_here", new Date(2027, 5, 30), "week"); + firstScheduler.load("/data/events"); + + const secondScheduler = Scheduler.getSchedulerInstance(); + secondScheduler.init("scheduler_here_2", new Date(2027, 5, 30), "month"); + secondScheduler.load("/data/events"); +}); +~~~ +~~~html
-
+
~~~ ## Destructor of Scheduler and DataProcessor instances -Starting from version 6.0, the dhtmlxScheduler object has a [destructor](api/method/destructor.md) that can be used to dispose unnecessary instances of the Scheduler. +Starting from version 6.0, the dhtmlxScheduler object has a [`destructor()`](api/method/destructor.md) method that can be used to dispose unnecessary instances of the Scheduler. -The destructor of the scheduler instance can be used as follows: +The destructor of the Scheduler instance can be used as follows: ~~~js -var myScheduler = Scheduler.getSchedulerInstance(); - -//destroying a scheduler instance -myScheduler.destructor(); +const schedulerInstance = Scheduler.getSchedulerInstance(); + +// destroying a Scheduler instance +schedulerInstance.destructor(); ~~~ The destructor will implement the following tasks: - clear the data loaded into a scheduler instance -- destroy the dataProcessor (if it is attached to the scheduler) +- destroy the dataProcessor (if it is attached to the scheduler) - detach the scheduler from DOM - detach all DOM events attached via the [scheduler.event()](api/method/event.md) method @@ -132,30 +127,32 @@ Here is an example of using the destructor to dispose a scheduler instance while ~~~js @Component({selector: 'app-scheduler', template: `...`}) class MySchedulerComponent implements OnDestroy { - ngOnInit() { - this.$gantt = Scheduler.getSchedulerInstance(); - - // configure and init - } - - ngOnDestroy() { - this.$scheduler.destructor(); - this.$scheduler = null; - } + ngOnInit() { + this.$scheduler = Scheduler.getSchedulerInstance(); + + // configure and init + } + + ngOnDestroy() { + this.$scheduler.destructor(); + this.$scheduler = null; + } } ~~~ ### Detaching the dataProcessor -Calling the destructor of data processor will clear the dataProcessor instance and detach it from the scheduler. For example: +Calling the destructor of dataProcessor will clear the dataProcessor instance and detach it from the Scheduler. For example: ~~~js -var scheduler = Scheduler.getSchedulerInstance(); -var dp = new scheduler.DataProcessor("url"); -dp.init(scheduler); +const schedulerInstance = Scheduler.getSchedulerInstance(); +const dataProcessor = schedulerInstance.createDataProcessor({ + url: "url", + mode: "REST" +}); -// destroys data processor and detaches it from the scheduler -dp.destructor(); +// destroys dataProcessor and detaches it from the Scheduler +dataProcessor.destructor(); ~~~ :::note From 3aa5337884117426ed750201d68e3f5d4d316c38 Mon Sep 17 00:00:00 2001 From: Maksim Lakatkou Date: Wed, 22 Apr 2026 15:42:26 +0200 Subject: [PATCH 14/42] [update] onviewchange article Refresh onViewChange signature and example formatting --- docs/api/event/onviewchange.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/api/event/onviewchange.md b/docs/api/event/onviewchange.md index 4f4c45fc..ac9bbb55 100644 --- a/docs/api/event/onviewchange.md +++ b/docs/api/event/onviewchange.md @@ -10,18 +10,18 @@ description: "fires after the current view has been changed to some other one" @short: Fires after the current view has been changed to some other one -@signature: onViewChange: (new_mode: string, new_date: object) =\> void +@signature: onViewChange: (new_mode: string, new_date: Date) =\> void ### Parameters - `new_mode` - (required) *string* - a new view -- `new_date` - (required) *object* - a new date +- `new_date` - (required) *Date* - a new date ### Example ~~~jsx -scheduler.attachEvent("onViewChange", function (new_mode , new_date){ - //any custom logic here +scheduler.attachEvent("onViewChange", (new_mode, new_date) => { + // any custom logic here }); ~~~ From 503122a2a87ab01e1aaa473bf23fa6b08d1422cf Mon Sep 17 00:00:00 2001 From: Maksim Lakatkou Date: Wed, 22 Apr 2026 15:45:27 +0200 Subject: [PATCH 15/42] [update] setcurrentview article Refresh setCurrentView examples and clean method details --- docs/api/method/setcurrentview.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/docs/api/method/setcurrentview.md b/docs/api/method/setcurrentview.md index 50b43e97..2766120a 100644 --- a/docs/api/method/setcurrentview.md +++ b/docs/api/method/setcurrentview.md @@ -15,17 +15,17 @@ description: "displays the specified view and date" ### Parameters - `date` - (optional) *Date* - the date to display -- `view` - (optional) *string* - the name of a view to display +- `view` - (optional) *string* - the name of a view to display ### Example ~~~jsx -//displays the current view and date. Doesn't change anything, just refreshes +// displays the current view and date. Doesn't change anything, just refreshes scheduler.setCurrentView(); -// displays the 4th July,2012 in the currently active view -scheduler.setCurrentView(new Date(2012,7,4)); -// displays the 3rd May,2012 in the Week view -scheduler.setCurrentView(new Date(2012,5,3), "week"); +// displays 2027-08-04 in the currently active view +scheduler.setCurrentView(new Date(2027, 7, 4)); +// displays 2027-06-03 in the Week view +scheduler.setCurrentView(new Date(2027, 5, 3), "week"); ~~~ ### Related samples @@ -34,9 +34,9 @@ scheduler.setCurrentView(new Date(2012,5,3), "week"); ### Details -- The names for default views are 'day', 'week', 'month'. To specify any other view - use its name parameter. -- The method invokes the [onBeforeViewChange](api/event/onbeforeviewchange.md), [onViewChange](api/event/onviewchange.md). -- The method is similar to [updateView](api/method/updateview.md). The only difference between methods is that [updateView](api/method/updateview.md) **doesn't generate any events**. +- The names for default views are 'day', 'week', 'month'. To specify any other view, use its `name` parameter. +- The method invokes [`onBeforeViewChange`](api/event/onbeforeviewchange.md) and [`onViewChange`](api/event/onviewchange.md). +- The method is similar to [`updateView()`](api/method/updateview.md). The only difference is that [`updateView()`](api/method/updateview.md) doesn't generate any events. ### Related API - [onBeforeViewChange](api/event/onbeforeviewchange.md) From 11ec642b4fe99a790b462d498732eca5fcf925c2 Mon Sep 17 00:00:00 2001 From: Maksim Lakatkou Date: Wed, 22 Apr 2026 15:54:14 +0200 Subject: [PATCH 16/42] [update] onbeforeeventchanged article Modernize event example and clean parameter details --- docs/api/event/onbeforeeventchanged.md | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/docs/api/event/onbeforeeventchanged.md b/docs/api/event/onbeforeeventchanged.md index fe96d99b..e605810e 100644 --- a/docs/api/event/onbeforeeventchanged.md +++ b/docs/api/event/onbeforeeventchanged.md @@ -16,26 +16,25 @@ description: "fires when the event has been changed by drag-n-drop, but the chan - `ev` - (required) *object* - the event's data object after changes - `e` - (required) *Event* - a native event object -- `is_new` - (required) *boolean* - returns 'true', if the user changes a new event. 'false' - if the edited
event already exists +- `is_new` - (required) *boolean* - returns 'true' if the user changes a new event; 'false' if the edited event already exists - `original` - (required) *object* - the event's data object before changes ### Returns -- ` result` - (boolean) - defines whether the default action of the event will be triggered (true) or canceled (false) +- `result` - (boolean) - defines whether the default action of the event will be triggered (`true`) or canceled (`false`) ### Example ~~~jsx -scheduler.attachEvent("onBeforeEventChanged", function(ev, e, is_new, original){ - //any custom logic here +scheduler.attachEvent("onBeforeEventChanged", (ev, e, is_new, original) => { + // any custom logic here return true; }); ~~~ ### Details -The event occurs when a new "event" is added or an existing one is changed by drag-n-drop action. +The event occurs when a new event is added or an existing one is changed by drag-and-drop. - -- Beware that the 1st parameter of the handler function takes the data item object, not the data item's id (because newly created data items may not have ID yet). -- Unmodified event would be an empty object in case of creating new data items. -- The event is blockable: returning *false* from the handler will prevent data update. +- Beware that the first parameter of the handler function takes the data item object, not the data item's id, because newly created data items may not have an ID yet. +- The unmodified event will be an empty object when creating new data items. +- The event is blockable: returning `false` from the handler will prevent the data update. From f1c416f70822567a250137fdd1723472b99eb81e Mon Sep 17 00:00:00 2001 From: Maksim Lakatkou Date: Wed, 22 Apr 2026 16:04:51 +0200 Subject: [PATCH 17/42] [update] event_class article Modernize template example and clean return details --- docs/api/template/event_class.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/api/template/event_class.md b/docs/api/template/event_class.md index 53be794f..6da3040b 100644 --- a/docs/api/template/event_class.md +++ b/docs/api/template/event_class.md @@ -14,17 +14,17 @@ description: "specifies the CSS class that will be applied to the event's contai ### Parameters -- `start` - (required) *Date* - the date when an event is scheduled to begin +- `start` - (required) *Date* - the date when an event is scheduled to begin - `end` - (required) *Date* - the date when an event is scheduled to be completed - `ev` - (required) *object* - the event's object ### Returns -- ` css_class` - (string) - css class for related element +- `css_class` - (string) - the CSS class for the related element ### Example ~~~jsx -scheduler.templates.event_class = function(start,end,ev){ +scheduler.templates.event_class = (start, end, ev) => { return ""; }; ~~~ @@ -37,9 +37,9 @@ scheduler.templates.event_class = function(start,end,ev){ ### Details -In case of the Timeline view, the template is applied to 'Bar' and 'Tree' modes only. +In the Timeline view, the template is applied to 'Bar' and 'Tree' modes only. -Check the full information about customization of events colors in the related article [Custom Event's Color](guides/custom-events-color.md). +Check the full information about customizing event colors in the related article [Custom Event's Color](guides/custom-events-color.md). ### Related Guides - [Custom Event's Color](guides/custom-events-color.md) From eb9f2e2ef3d83fb2b831f5b82f63fbf849e96fca Mon Sep 17 00:00:00 2001 From: Maksim Lakatkou Date: Wed, 22 Apr 2026 16:20:18 +0200 Subject: [PATCH 18/42] [update] attachevent article Modernize attachEvent examples and clean handler details --- docs/api/method/attachevent.md | 33 +++++++++++++++++---------------- 1 file changed, 17 insertions(+), 16 deletions(-) diff --git a/docs/api/method/attachevent.md b/docs/api/method/attachevent.md index cfcd324e..95c46913 100644 --- a/docs/api/method/attachevent.md +++ b/docs/api/method/attachevent.md @@ -19,18 +19,18 @@ description: "attaches the handler to an inner event of dhtmlxScheduler" - `settings` - (optional) *object* - optional, an [object with settings](#properties-of-settings-object) for the event handler ### Returns -- `event` - (string) - id the id of the attached event handler +- `event` - (string) - the id of the attached event handler ### Example ~~~jsx -scheduler.attachEvent("onEventSave",function(id,ev){ +scheduler.attachEvent("onEventSave", (id, ev) => { if (!ev.text) { alert("Text must not be empty"); return false; } return true; -}) +}); ~~~ ### Related samples @@ -39,36 +39,37 @@ scheduler.attachEvent("onEventSave",function(id,ev){ ### Details -You can attach several handlers to the same event and all of them will be executed.
If some of handlers will return *false* - the related operation will be blocked.
-Event handlers are processed in the same order that they were attached. +You can attach several handlers to the same event, and all of them will be executed. +If some of the handlers return `false`, the related operation will be blocked. +Event handlers are processed in the same order in which they were attached. -All event listeners attached using [event](api/method/event.md) will be detached automatically when the [destructor](api/method/destructor.md) is called. +All event listeners attached using [`event()`](api/method/event.md) will be detached automatically when the [`destructor()`](api/method/destructor.md) is called. -## Properties of settings object +## Properties of settings object The settings object can contain two properties: -1\. **id** - (*string*) the id of the event handler +1\. `id` - (*string*) the id of the event handler For example, you can easily detach a handler from the specified event: -~~~js -scheduler.attachEvent("onClick", function(){ +~~~js {3} +scheduler.attachEvent("onClick", () => { console.log("event click"); -}, {id: "my-click"}); /*!*/ -... //after a while: +}, { id: "my-click" }); +// after a while: scheduler.detachEvent("my-click"); ~~~ -2\. **once** - (*boolean*) defines whether the event will be executed only once +2\. `once` - (*boolean*) defines whether the event will be executed only once Set the property to *true* if you want to capture the first triggering of the event, as in: -~~~js -scheduler.attachEvent("onClick", function(){ +~~~js {4} +scheduler.attachEvent("onClick", () => { console.log("capture next event click"); return true; -}, {once: true}); /*!*/ +}, { once: true }); ~~~ ### Related API From 3c5e558801d45d9378a9b2473441cf68570e3e93 Mon Sep 17 00:00:00 2001 From: Maksim Lakatkou Date: Wed, 22 Apr 2026 16:22:25 +0200 Subject: [PATCH 19/42] [dev] update highlighted code line background color --- src/css/custom.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/css/custom.css b/src/css/custom.css index ae494888..f5cceccb 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -178,7 +178,7 @@ span.token.comment { /* specify the comment background color */ span.token-line.theme-code-block-highlighted-line { - background-color: rgba(225, 212, 212, 0.075); + background-color: rgba(253, 253, 227); } /* end styles for block of code */ From 6bb334096acf334cb16f517bfd1a6f3cc47de2d9 Mon Sep 17 00:00:00 2001 From: Maksim Lakatkou Date: Wed, 22 Apr 2026 16:34:38 +0200 Subject: [PATCH 20/42] [update] header article Refresh header config examples and clean navigation details --- docs/api/config/header.md | 42 +++++++++++++++++++-------------------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/docs/api/config/header.md b/docs/api/config/header.md index 0ef7ba68..fbbfa562 100644 --- a/docs/api/config/header.md +++ b/docs/api/config/header.md @@ -31,11 +31,11 @@ scheduler.init("scheduler_here"); ### Details -When scheduler is initialized using this config, any HTML placed in the scheduler container prior to initialization will be removed and a generated markup will be put instead. +When Scheduler is initialized using this config, any HTML placed in the scheduler container prior to initialization will be removed and generated markup will be put instead. The value of this config can either be a plain array of elements, or a nested structure which describes a complex layout. -Note, that the height of the header/navigation bar is still controlled by the [scheduler.xy.nav_height](api/other/xy.md#illustration-images) option. +Note that the height of the header/navigation bar is still controlled by the [`scheduler.xy.nav_height`](api/other/xy.md#illustration-images) option. ~~~js @@ -71,21 +71,21 @@ scheduler.init("scheduler_here"); The supported values are: - - **\{rows: Array, css:string\}** - a container for a multi-row header - - **\{cols: Array, css:string\}** - a single row of a multi-row header - - **"prev","next","today"** - date navigation buttons - - **"date"** - the date label - - **"day", "week", "month", etc.** - view tabs - - **"spacer"** - a transparent element which takes the whole free space, can be used to push another element to the right side of the header - - **\{html: string, click: function, css: string\}** - an object for injecting custom buttons or icons into the header - - **"minicalendar"** - a [Mini Calendar](guides/minicalendar.md) toggle. +- `{rows: Array, css: string}` - a container for a multi-row header +- `{cols: Array, css: string}` - a single row of a multi-row header +- `"prev"`, `"next"`, `"today"` - date navigation buttons +- `"date"` - the date label +- `"day"`, `"week"`, `"month"`, etc. - view tabs +- `"spacer"` - a transparent element that takes the whole free space and can be used to push another element to the right side of the header +- `{html: string, click: function, css: string}` - an object for injecting custom buttons or icons into the header +- `"minicalendar"` - a [Mini Calendar](guides/minicalendar.md) toggle ~~~js scheduler.config.header = [ "day", "week", "month", - {html:"click me!", click:function(){alert("done!") }}, + { html: "click me!", click: () => { alert("done!"); } }, "date", "prev", "today", @@ -96,10 +96,10 @@ scheduler.init("scheduler_here"); #### Mini Calendar settings: -The "minicalendar" value will display a minicalendar button with the following click handler: +The `minicalendar` value will display a minicalendar button with the following click handler: -~~~ -function showCalendar () { +~~~js +function showCalendar() { if (scheduler.isCalendarVisible()) { scheduler.destroyCalendar(); } else { @@ -107,7 +107,7 @@ function showCalendar () { position: this, date: scheduler.getState().date, navigation: true, - handler: function (date, calendar) { + handler: (date, calendar) => { scheduler.setCurrentView(date); scheduler.destroyCalendar(); } @@ -116,14 +116,14 @@ function showCalendar () { }; ~~~ -If you want to call [renderCalendar](api/method/rendercalendar.md) with different parameters, you need to provide your own onclick handler for the minicalendar button: +If you want to call [`renderCalendar()`](api/method/rendercalendar.md) with different parameters, you need to provide your own `onclick` handler for the minicalendar button: -~~~ +~~~js scheduler.config.header = [ "day", "week", "month", - {view: "minicalendar", click: function () { + { view: "minicalendar", click: function() { if (scheduler.isCalendarVisible()) { scheduler.destroyCalendar(); } else { @@ -131,14 +131,14 @@ scheduler.config.header = [ position: this, date: scheduler.getState().date, navigation: true, - handler: function (date, calendar) { + handler: (date, calendar) => { scheduler.setCurrentView(date); scheduler.destroyCalendar(); } }); } - -}}, + + } }, "date", "prev", "today", From 4ec4efab63d8cbbca5b248bc3ef17487125ef2cc Mon Sep 17 00:00:00 2001 From: Maksim Lakatkou Date: Wed, 22 Apr 2026 16:38:40 +0200 Subject: [PATCH 21/42] [update] templates article Fix broken template examples and clean setup text --- docs/guides/templates.md | 21 ++++++++++----------- 1 file changed, 10 insertions(+), 11 deletions(-) diff --git a/docs/guides/templates.md b/docs/guides/templates.md index 465291f0..8d825ad1 100644 --- a/docs/guides/templates.md +++ b/docs/guides/templates.md @@ -5,7 +5,7 @@ sidebar_label: "Formatting Labels, Dates, Styles" # Formatting Labels, Dates, Styles -Follow the link of a view to see templates supported by it. +Follow the link of a view to see the templates supported by it. ### Default views @@ -33,29 +33,28 @@ Follow the link of a view to see templates supported by it. - [API templates](guides/common-templates.md#api-templates) -## Specifying Templates +## Specifying Templates -You can set templates in 2 ways: either from the code or from the HTML markup. +You can set templates in 2 ways: either from code or from HTML markup. ### Specifying templates with code -By default, templates can be defined as JS functions which take the event object or date arguments and must return an HTML string that will be inserted in the layout: +By default, templates can be defined as JS functions that take the event object or date arguments and must return an HTML string that will be inserted into the layout: ~~~js -scheduler.templates.event_text="function(start," end, event){ - return "" - +event.text+""; -} +scheduler.templates.event_text = (start, end, event) => { + return `${event.text}`; +}; ~~~ ### Specifying templates via markup -Alternatively, templates can be defined in the declarative way from HTML. This approach requires adding the [html_templates](guides/extensions-list.md#html-templates) extension to the page. -Once you've activate the extension on the page, you may specify templates as in: +Alternatively, templates can be defined declaratively from HTML. This approach requires adding the [html_templates](guides/extensions-list.md#html-templates) extension to the page. +Once you've activated the extension on the page, you may specify templates as follows: ~~~html
- {event.text} + {event.text}
~~~ From 188cefd7acb90ce5e638c93739e2fde4744e4312 Mon Sep 17 00:00:00 2001 From: Maksim Lakatkou Date: Wed, 22 Apr 2026 16:52:09 +0200 Subject: [PATCH 22/42] [update] pdf article Refresh PDF export examples and clean export method docs --- docs/export/pdf.md | 77 +++++++++++++++++++++++----------------------- 1 file changed, 38 insertions(+), 39 deletions(-) diff --git a/docs/export/pdf.md b/docs/export/pdf.md index 3a733f8c..db2f8c25 100644 --- a/docs/export/pdf.md +++ b/docs/export/pdf.md @@ -8,8 +8,7 @@ sidebar_label: "Export to PDF" *The article refers to exporting of dhtmlxScheduler 4.1+. If you use dhtmlxScheduler 4.0 or earlier versions, see details [here](export/pdf-legacy.md).* -Starting from version 4.1, dhtmlxScheduler provides a new approach for exporting the scheduler into the PDF format - -an [online export service](export/pdf.md#default-export-to-pdf). +Starting from version 4.1, dhtmlxScheduler provides a new approach for exporting the scheduler into the PDF format: an [online export service](export/pdf.md#default-export-to-pdf). :::info @@ -21,49 +20,50 @@ during the valid support period (12 months for all PRO licenses). There are several export services available. You can install them on your computer and export Scheduler to PDF locally. -Note that export services are not included into the Scheduler package, +Note that export services are not included in the Scheduler package, read the [corresponding article](https://dhtmlx.com/docs/products/dhtmlxScheduler/export.shtml) to learn the terms of using each of them. ## Limits on request size -There is a common API endpoint *https://export.dhtmlx.com/scheduler* which serves for export methods (*exportToPDF*, *exportToPNG*, etc.). **Max request size is 10 MB**. +There is a common API endpoint `https://export.dhtmlx.com/scheduler` that serves export methods such as `exportToPDF()` and `exportToPNG()`. Max request size is 10 MB. ## Default Export to PDF To export a scheduler as a PDF document, complete the following steps: -- To use the online export service, enable the export_api plugin via the [plugins](api/method/plugins.md) method: +- To use the online export service, enable the `export_api` plugin via the [`plugins()`](api/method/plugins.md) method: ~~~js scheduler.plugins({ - export_api: true + export_api: true }); ~~~ :::note -If you use the Scheduler version older than 7.0, you need to include the **https://export.dhtmlx.com/scheduler/api.js** file on your page to enable the online export service, e.g.: +If you use the Scheduler version older than 7.0, you need to include the `https://export.dhtmlx.com/scheduler/api.js` file on your page to enable the online export service, e.g.: -~~~js +~~~html ~~~ ::: -- Call the exportToPDF method to export Scheduler: +- Call the [`exportToPDF()`](#parameters-of-the-export-method) method to export Scheduler: -~~~html -/*!*/ +~~~html {1} + ~~~ -[Export to PDF/PNG](https://docs.dhtmlx.com/scheduler/samples/04_export/06_online_export.html) +### Related samples +- [Export to PDF/PNG](https://docs.dhtmlx.com/scheduler/samples/04_export/06_online_export.html) ## Parameters of the export method -The [exportToPDF()](api/method/exporttopdf.md) method takes as a parameter an object with a number of properties (all of the properties are optional): +The [`exportToPDF()`](api/method/exporttopdf.md) method takes an object with a number of properties as a parameter. All of the properties are optional: @@ -103,45 +103,44 @@ The [exportToPDF()](api/method/exporttopdf.md) method takes as a parameter an ob
- -[Calling the export method with optional properties](Calling the export method with optional properties) +### Calling the export method with optional properties ~~~js scheduler.exportToPDF({ - name:"myscheduler.pdf", - format:"A4", - orientation:"portrait", - zoom:1, - header:"

My company

", - footer:"

Bottom line

", - server:"https://myapp.com/myexport/scheduler" + name: "myscheduler.pdf", + format: "A4", + orientation: "portrait", + zoom: 1, + header: "

My company

", + footer: "

Bottom line

", + server: "https://myapp.com/myexport/scheduler" }); ~~~ ## Name of the output file -To set a custom name for the output file, use the **name** property in the in the parameter of the [exportToPDF](export/pdf.md#parameters-of-the-export-method) method: +To set a custom name for the output file, use the `name` property in the parameter of the [`exportToPDF()`](export/pdf.md#parameters-of-the-export-method) method: -~~~js +~~~js {2} scheduler.exportToPDF({ - name:"my_beautiful_scheduler.pdf"/*!*/ + name: "my_beautiful_scheduler.pdf" }); ~~~ ## Header/footer of the output file -To add a header/footer to the output PDF file, use the **header**/**footer** properties in the parameter of the [exportToPDF](export/pdf.md#parameters-of-the-export-method) method: +To add a header/footer to the output PDF file, use the `header`/`footer` properties in the parameter of the [`exportToPDF()`](export/pdf.md#parameters-of-the-export-method) method: :::note Note, you can use any HTML while specifying the parameters. While specifying images, remember that you need to set global paths as values of the "src" attribute. ::: -~~~js +~~~js {3-4} scheduler.exportToPDF({ - name:"myscheduler.pdf", - header:"

My company

",/*!*/ - footer:"

Bottom line

"/*!*/ + name: "myscheduler.pdf", + header: "

My company

", + footer: "

Bottom line

" }); ~~~ @@ -152,34 +151,34 @@ To apply a custom style for the scheduler, provide the stylesheet with your cust - through a link: -~~~js +~~~js {3} scheduler.exportToPDF({ - name:"calendar.pdf", - header:'' /*!*/ + name: "calendar.pdf", + header: '' }); ~~~ - or through the 'style' tag: -~~~js +~~~js {3} scheduler.exportToPDF({ - name:"calendar.pdf", - header:'' /*!*/ + name: "calendar.pdf", + header: '' }); ~~~ -Note, the aforementioned solution works for the global HTTP reference. If you have CSS classes specified in an Intranet/local environment, you can embed all styles as in: +Note, the aforementioned solution works for the global HTTP reference. If you have CSS classes specified in an intranet/local environment, you can embed all styles as follows: ~~~js scheduler.exportToPDF({ - header:"" + header: "" }); ~~~ ## Exporting HTML elements -While exporting the Scheduler to the PDF format, you should note that export of HTML elements is limited due to their possible insecurity. +While exporting the Scheduler to the PDF format, note that export of HTML elements is limited due to their possible insecurity. There are HTML elements which are not entirely allowed for export, such as ``, ``, `name - (string) the section's name (according to this name, the scheduler will take the section's label from locale.labels collection). For example for the 'time' section, the scheduler will take the label stored as scheduler.locale.labels.section_time. + (string) the section's name (according to this name, the scheduler will take the section's label from locale.labels collection). For example for the 'time' section, the scheduler will take the label stored as `scheduler.locale.labels.section_time`. height @@ -97,12 +97,12 @@ Each object in the **sections** array can have the following properties: -## Meaning of 'map_to:'auto' +## Meaning of `map_to: "auto"` -The 'map_to' property can take the 'auto' value. The 'auto' value relates to the following: +The `map_to` property can take the `"auto"` value. The `"auto"` value relates to the following: -- The control won't return any value and will directly change the value of the related event's properties according to the 'set_value()' method ([Custom Lightbox Control](guides/custom-lightbox-editor.md)). -- Generally, the 'auto' value is used for complex controls that work with multiple properties of an event +- The control won't return any value and will directly change the value of the related event's properties according to the `set_value()` method ([Custom Lightbox Control](guides/custom-lightbox-editor.md)). +- Generally, the `"auto"` value is used for complex controls that work with multiple properties of an event ### Related Guides - [Fully Custom Lightbox](guides/custom-details-form.md) From 9acf0b056cfe7bf5e70545b73186b0ef8ea7adb3 Mon Sep 17 00:00:00 2001 From: Maksim Lakatkou Date: Wed, 22 Apr 2026 17:06:55 +0200 Subject: [PATCH 25/42] [update] parse article Refresh parse example data and clean migration notes --- docs/api/method/parse.md | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/docs/api/method/parse.md b/docs/api/method/parse.md index 3099a8bc..7e101f67 100644 --- a/docs/api/method/parse.md +++ b/docs/api/method/parse.md @@ -20,8 +20,8 @@ description: "loads data from a client-side resource" ~~~jsx scheduler.parse([ - { start_date:"2020-05-13 6:00", end_date:"2020-05-13 8:00", text:"Event 1"}, - { start_date:"2020-06-09 6:00", end_date:"2020-06-09 8:00", text:"Event 2"} + { start_date: "2027-05-13 6:00", end_date: "2027-05-13 8:00", text: "Event 1" }, + { start_date: "2027-06-09 6:00", end_date: "2027-06-09 8:00", text: "Event 2" } ]); ~~~ @@ -29,16 +29,14 @@ scheduler.parse([ - [Coloring events](https://docs.dhtmlx.com/scheduler/samples/02_customization/01_events_coloring.html) - [Displaying events as a cascade](https://docs.dhtmlx.com/scheduler/samples/02_customization/24_cascade_event_display.html) -### Details - ## Migration -In v5.2 and upper, scheduler detects the format of data automatically. +In v5.2 and later, Scheduler detects the data format automatically. But before v5.2, the method included two parameters: -- **data** - (*object*) a string or object which represents data; -- **type** - (*string*) optional, ('json', 'xml', 'ical') the data type. The default value - 'xml' +- `data` - (*object*) a string or object that represents data +- `type` - (*string*) optional, (*'json', 'xml', 'ical'*) the data type. The default value is *'xml'* ### Related API - [onBeforeParse](api/event/onbeforeparse.md) @@ -49,4 +47,4 @@ But before v5.2, the method included two parameters: - [Examples of Data Formats](guides/data-formats.md) ### Change log -- The second **type** parameter of the method has been removed in v5.2. +- The second `type` parameter of the method was removed in v5.2. From a4868b717170ee2708afc3b3ad7980b0f2c2d965 Mon Sep 17 00:00:00 2001 From: Maksim Lakatkou Date: Wed, 22 Apr 2026 17:09:07 +0200 Subject: [PATCH 26/42] [update] ondblclick article Modernize onDblClick example and clean return details --- docs/api/event/ondblclick.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/api/event/ondblclick.md b/docs/api/event/ondblclick.md index a64b0955..d46b952b 100644 --- a/docs/api/event/ondblclick.md +++ b/docs/api/event/ondblclick.md @@ -18,17 +18,17 @@ description: "fires when the user double clicks on an event" - `e` - (required) *Event* - a native event object ### Returns -- ` result` - (boolean) - defines whether the default action of the event will be triggered (true) or canceled (false) +- `result` - (boolean) - defines whether the default action of the event will be triggered (`true`) or canceled (`false`) ### Example ~~~jsx -scheduler.attachEvent("onDblClick", function (id, e){ - //any custom logic here +scheduler.attachEvent("onDblClick", (id, e) => { + // any custom logic here return true; -}) +}); ~~~ ### Details -The event is blockable. Return *false* to cancel the default behaviour. +The event is blockable. Return `false` to cancel the default behavior. From 7d09f0c2a34553c1b5dd9a8b2de861e43c71a2ff Mon Sep 17 00:00:00 2001 From: Maksim Lakatkou Date: Wed, 22 Apr 2026 17:12:20 +0200 Subject: [PATCH 27/42] [update] event_bar_text article Modernize template example and clean return details --- docs/api/template/event_bar_text.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/api/template/event_bar_text.md b/docs/api/template/event_bar_text.md index 609bcc71..ade7fe1f 100644 --- a/docs/api/template/event_bar_text.md +++ b/docs/api/template/event_bar_text.md @@ -14,18 +14,18 @@ description: "specifies the event's text. Applied to multi-day events only" ### Parameters -- `start` - (required) *Date* - the date when an event is scheduled to begin +- `start` - (required) *Date* - the date when an event is scheduled to begin - `end` - (required) *Date* - the date when an event is scheduled to be completed - `event` - (required) *object* - the event's object ### Returns -- ` text` - (string) - html text for rendering in the scheduler +- `text` - (string) - HTML text for rendering in the Scheduler ### Example ~~~jsx -scheduler.templates.event_bar_text = function(start,end,event){ - return event.text; +scheduler.templates.event_bar_text = (start, end, event) => { + return event.text; }; ~~~ From 22fade532eb49c2fd3d952cddc0df7e0734c810f Mon Sep 17 00:00:00 2001 From: Maksim Lakatkou Date: Wed, 22 Apr 2026 17:18:37 +0200 Subject: [PATCH 28/42] [update] readonly article Refresh read-only guide examples and fix lightbox section setup --- docs/guides/readonly.md | 39 ++++++++++++++++++++------------------- 1 file changed, 20 insertions(+), 19 deletions(-) diff --git a/docs/guides/readonly.md b/docs/guides/readonly.md index c66c6f56..0f09cb5e 100644 --- a/docs/guides/readonly.md +++ b/docs/guides/readonly.md @@ -14,66 +14,67 @@ In this part we want to consider read-only mode in the context of 4 situations: ## Read-only mode for the entire scheduler -To make the entire scheduler read-only, set the [readonly](api/config/readonly.md) option to *true*. +To make the entire scheduler read-only, set the [`readonly`](api/config/readonly.md) option to `true`. ~~~js scheduler.config.readonly = true; ... -scheduler.init('scheduler_here',new Date(2019, 5,11),"month"); +scheduler.init('scheduler_here', new Date(2027, 5, 11), "month"); ~~~ + Note, when the entire scheduler is non-editable, users can't open the lightbox. ## Read-only mode for the entire lightbox -To leave for users the possibility to open the lightbox, but to forbid any editing inside it, set the [readonly_form](api/config/readonly_form.md) option to *true*: +To leave for users the possibility to open the lightbox, but to forbid any editing inside it, set the [`readonly_form`](api/config/readonly_form.md) option to `true`: ~~~js scheduler.config.readonly_form = true; ... -scheduler.init('scheduler_here',new Date(2019, 5,11),"month"); +scheduler.init('scheduler_here', new Date(2027, 5, 11), "month"); ~~~ :::note -The [readonly](api/config/readonly.md) option is provided in the [readonly](guides/extensions-list.md#readonly) extension and to use it, enable the extension on the page. +The [`readonly`](api/config/readonly.md) option is provided in the [readonly](guides/extensions-list.md#readonly) extension, and to use it, enable the extension on the page. ::: - -[Read-only lightbox](https://docs.dhtmlx.com/scheduler/samples/03_extensions/12_readonly_form.html) +### Related samples +- [Read-only lightbox](https://docs.dhtmlx.com/scheduler/samples/03_extensions/12_readonly_form.html) ## Read-only mode for a lightbox's section -To make a specific lightbox's section read-only, use the 'disabled' property of a DOM element of the related section object: +To make a specific lightbox's section read-only, use the `disabled` property of a DOM element of the related section object: ~~~js -scheduler.config.lightbox.sections="[" - {name:"description", height:200, map_to:"text", type:"textarea" , focus:true}, - {name:"time", height:72, type:"time", map_to:"auto"} +scheduler.config.lightbox.sections = [ + { name: "description", height: 200, map_to: "text", type: "textarea", focus: true }, + { name: "time", height: 72, type: "time", map_to: "auto" } ]; -scheduler.attachEvent("onLightbox", function(){ - var section = scheduler.formSection("description"); - section.control.disabled = true; +scheduler.attachEvent("onLightbox", () => { + const descriptionSection = scheduler.formSection("description"); + descriptionSection.control.disabled = true; }); ~~~ :::note -Note, you refer to the section through its type and all sections that have this type will be read-only at once +Note, you refer to the section through its type, and all sections that have this type will be read-only at once. ::: ## Read-only mode for specific events -To make specific events read-only, add the property 'read-only' to them and set it to true: +To make specific events read-only, add the `readonly` property to them and set it to `true`: ~~~js scheduler.getEvent(id).readonly = true; ~~~ :::note -The functionality is provided in the [readonly](guides/extensions-list.md#readonly) extension and to use it, enable the extension on the page. +The functionality is provided in the [readonly](guides/extensions-list.md#readonly) extension, and to use it, enable the extension on the page. ::: - -[Read-only events](https://docs.dhtmlx.com/scheduler/samples/03_extensions/14_readonly_event.html) +### Related samples +- [Read-only events](https://docs.dhtmlx.com/scheduler/samples/03_extensions/14_readonly_event.html) From ebd852f5d90a7426e169216d62503302d943bbf7 Mon Sep 17 00:00:00 2001 From: Maksim Lakatkou Date: Wed, 22 Apr 2026 17:31:09 +0200 Subject: [PATCH 29/42] [update] load article Modernize load callback example and clean migration notes --- docs/api/method/load.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/docs/api/method/load.md b/docs/api/method/load.md index 52191c83..8d6d9389 100644 --- a/docs/api/method/load.md +++ b/docs/api/method/load.md @@ -22,7 +22,7 @@ description: "loads data to the scheduler from an external data source" ~~~jsx scheduler.load("data"); // the format of loaded data is auto-detected // or -scheduler.load("data",function(){ +scheduler.load("data", () => { alert("Data has been successfully loaded"); }); ~~~ @@ -33,20 +33,20 @@ scheduler.load("data",function(){ ### Details -Pay attention that in case of dynamic loading the callback function that is passed as a second parameter will be called only during the initial loading of data. -While next portions of data will be loaded later, the callback function won't be called anymore. +Pay attention that in case of dynamic loading, the callback function that is passed as a second parameter will be called only during the initial loading of data. +While the next portions of data will be loaded later, the callback function won't be called anymore. -If you need to call the callback function each time data is loaded into Scheduler, you can make use of the [onLoadEnd](api/event/onloadend.md) event. +If you need to call the callback function each time data is loaded into Scheduler, you can use the [`onLoadEnd`](api/event/onloadend.md) event. ## Migration -In v5.2 and upper, scheduler detects the format of data automatically. +In v5.2 and later, Scheduler detects the data format automatically. But before v5.2, the method included three parameters: -- **url** - (*string*) the server-side URL (may be a static file or a server-side script which outputs data as XML) -- **type** - (*string*) ('json', 'xml', 'ical') the data type. The default value - 'xml' -- **callback** - (*function*) the callback function +- `url` - (*string*) the server-side URL (may be a static file or a server-side script that outputs data as XML) +- `type` - (*string*) (*'json', 'xml', 'ical'*) the data type. The default value is *'xml'* +- `callback` - (*function*) the callback function ### Related API - [onLoadEnd](api/event/onloadend.md) @@ -59,4 +59,4 @@ But before v5.2, the method included three parameters: - [Loading Data](guides/loading-data.md) ### Change log -- The second **type** parameter of the method has been removed in v5.2. +- The second `type` parameter of the method was removed in v5.2. From 0fdf1e84692624c2ffdf92ad463b2e95a3a2156b Mon Sep 17 00:00:00 2001 From: Maksim Lakatkou Date: Wed, 22 Apr 2026 17:39:09 +0200 Subject: [PATCH 30/42] [update] date article Refresh date helper examples and clean method descriptions --- docs/api/other/date.md | 125 +++++++++++++++++++++-------------------- 1 file changed, 63 insertions(+), 62 deletions(-) diff --git a/docs/api/other/date.md b/docs/api/other/date.md index 665bd69e..4349e4b3 100644 --- a/docs/api/other/date.md +++ b/docs/api/other/date.md @@ -15,123 +15,124 @@ description: "a set of date formatting methods" ### Details -The **date** object provides the following methods: +The `date` object provides the following methods: -- **add**(date, number, unit) - adds/subtracts the specified time interval to/from the date - - **date** - (Date) the date object that you need to add a time to/subtract a time from - - **number** - (number) the number of units to add. If this number is positive - the time will be added to the date, if negative - the time will be subtracted - - **unit** - ('minute', 'hour', 'day', 'week', 'month', 'year') the time unit +- `add()` - adds/subtracts the specified time interval to/from the date + - `date` - (Date) the date object that you need to add time to/subtract time from + - `number` - (number) the number of units to add. If this number is positive, the time will be added to the date; if negative, the time will be subtracted + - `unit` - ('minute', 'hour', 'day', 'week', 'month', 'year') the time unit ~~~js -//adds 1 year to the specified date: 29 June, 2019 -> 29 June, 2014 -var newDate = scheduler.date.add(new Date(2019, 05, 29), 1, 'year'); +// adds 1 year to the specified date: 29 June, 2027 -> 29 June, 2028 +const newDate = scheduler.date.add(new Date(2027, 5, 29), 1, 'year'); ~~~ -- **convert_to_utc**(date) - converts local time to UTC - - **date** - (Date) the date object to convert +- `convert_to_utc()` - converts local time to UTC + - `date` - (Date) the date object to convert ~~~js -//29 June, 2019 14:00 (local time) -> 29 June, 2019 12:00 (utc) -var time = scheduler.date.convert_to_utc(new Date(2019, 05, 29, 14, 00)); +// 29 June, 2027 14:00 (local time) -> 29 June, 2027 12:00 (UTC) +const time = scheduler.date.convert_to_utc(new Date(2027, 5, 29, 14, 0)); ~~~ -- **copy**(date)- makes a copy of a Date object - - **date** - (Date) the date object to copy +- `copy()` - makes a copy of a Date object + - `date` - (Date) the date object to copy ~~~js -var copy = scheduler.date.copy(new Date(2019, 05, 29));// -> 29 June, 2019 +const copy = scheduler.date.copy(new Date(2027, 5, 29)); // -> 29 June, 2027 ~~~ -- **date_part**(date) - resets the time part of the provided date to 00:00:00 - - **date** - (Date) the date object to format +- `date_part()` - resets the time part of the provided date to 00:00:00 + - `date` - (Date) the date object to format ~~~js -//29 June, 2019 14:30:10 -> 29 June, 2019 00:00:00 -var date = scheduler.date.date_part(new Date(2019, 05, 29, 14, 30, 10)); +// 29 June, 2027 14:30:10 -> 29 June, 2027 00:00:00 +const date = scheduler.date.date_part(new Date(2027, 5, 29, 14, 30, 10)); ~~~ -- **date_to_str**(format, utc) - returns a function that converts a Date object to a string of the specified format - - **format**> - (string) the date format (see [Date Format Specification](guides/settings-format.md)) - - **utc** - (boolean) specifies whether local time should be converted to UTC +- `date_to_str()` - returns a function that converts a Date object to a string of the specified format +Parameters: `format` - (string) the date format (see [Date Format Specification](guides/settings-format.md)) +`utc` - (boolean) specifies whether local time should be converted to UTC ~~~js -var formatFunc = scheduler.date.date_to_str("%d/%m/%Y"); -var date = formatFunc(new Date(2019, 05, 29)); // -> "29/06/2019" +const formatFunc = scheduler.date.date_to_str("%d/%m/%Y"); +const date = formatFunc(new Date(2027, 5, 29)); // -> "29/06/2027" ~~~ -- **day_start**(date) - resets the time part of the provided date to 00:00:00. Alias of the date_part method. Used by the Day view to set the display date and can be redefined to provide the default behaviour - - **date** - (Date) the date object to format +- `day_start()` - resets the time part of the provided date to 00:00:00. Alias of the `date_part()` method. Used by the Day view to set the display date and can be redefined to provide the default behavior +Parameters: `date` - (Date) the date object to format ~~~js -//29 June, 2019 14:30:10 -> 29 June, 2019 00:00:00 -var date = scheduler.date.day_start(new Date(2019, 05, 29, 14, 30, 10)); +// 29 June, 2027 14:30:10 -> 29 June, 2027 00:00:00 +const date = scheduler.date.day_start(new Date(2027, 5, 29, 14, 30, 10)); ~~~ ->**Note**, the date passed to the method will be actually changed. You may prevent the original date from being changed by wrapping the input date with *new Date*. For instance: +> **Note**, the date passed to the method will actually be changed. You may prevent the original date from being changed by wrapping the input date with `new Date()`. For instance: ~~~js -var date1 = new Date(2019, 05, 29, 14, 30, 10)) -var date2 = scheduler.date.day_start(new Date(date1)) +const originalDate = new Date(2027, 5, 29, 14, 30, 10); +const dayStartDate = scheduler.date.day_start(new Date(originalDate)); ~~~ -- **getISOWeek**(date)- returns the week number of the date - - **date** - (Date) the date object to format +- `getISOWeek()` - returns the week number of the date + - `date` - (Date) the date object to format ~~~js -var week = scheduler.date.getISOWeek(new Date(2019, 05, 29)); // ->26 +const week = scheduler.date.getISOWeek(new Date(2027, 5, 29)); // -> 26 ~~~ -- **getUTCISOWeek**(date) - returns the week number of the date, but previously converts local time to UTC - - **date** - (Date) the date object to format +- `getUTCISOWeek()` - returns the week number of the date, but previously converts local time to UTC + - `date` - (Date) the date object to format ~~~js -var week = scheduler.date.getUTCISOWeek(new Date(2019, 05, 29)); // ->26 +const week = scheduler.date.getUTCISOWeek(new Date(2027, 5, 29)); // -> 26 ~~~ -- **month_start**(date) - returns a Date object of the first day of the month for the specified date and clears the time part to zero - - **date** - (Date) the date object to format +- `month_start()` - returns a Date object of the first day of the month for the specified date and clears the time part to zero + - `date` - (Date) the date object to format ~~~js -//29 June, 2019 14:30 -> 01 June, 2019 00:00 -var firstDay = scheduler.date.month_start(new Date(2019, 05, 29, 14, 30)); +// 29 June, 2027 14:30 -> 01 June, 2027 00:00 +const firstDay = scheduler.date.month_start(new Date(2027, 5, 29, 14, 30)); ~~~ -- **str_to_date**(format,utc,parseExact) - returns a function that converts a string of the specified format to a Date object - - **format** - (string) the date format ( see [Date Format Specification](guides/settings-format.md)) - - **utc** - (boolean) specifies whether local time should be converted to UTC - - **parseExact** - (boolean) defines whether Scheduler identifies the format of a date automatically (*false*, default) or uses the format passed a user (*true*) + +- `str_to_date()` - returns a function that converts a string of the specified format to a Date object +Parameters: `format` - (string) the date format (see [Date Format Specification](guides/settings-format.md)) +`utc` - (boolean) specifies whether local time should be converted to UTC +`parseExact` - (boolean) defines whether Scheduler identifies the format of a date automatically (*false*, default) or uses the format passed by a user (*true*) ~~~js -var formatFunc = scheduler.date.str_to_date("%d/%m/%Y"); -var date = formatFunc("29/06/2019"); // -> 29 June, 2019 00:00:00 +const formatFunc = scheduler.date.str_to_date("%d/%m/%Y"); +const date = formatFunc("29/06/2027"); // -> 29 June, 2027 00:00:00 ~~~ -- **time_part**(date) - returns the time of a Date object as a number of seconds counted from the midnight (00:00:00) - - **date** - (Date) the date object to format +- `time_part()` - returns the time of a Date object as a number of seconds counted from midnight (00:00:00) + - `date` - (Date) the date object to format ~~~js -var time = scheduler.date.time_part(new Date(2019, 05, 29, 14, 30, 10)); -//time -> 52210 +const time = scheduler.date.time_part(new Date(2027, 5, 29, 14, 30, 10)); +// time -> 52210 ~~~ -- **to_fixed**(num) - adds the leading zero to numbers less than 10 and returns the result as a string. Doesn't affect numbers from 10 - - **num** - (number) the number to format +- `to_fixed()` - adds the leading zero to numbers less than 10 and returns the result as a string. Doesn't affect numbers from 10 + - `num` - (number) the number to format ~~~js -var num1 = scheduler.date.to_fixed(2);// ->"02" -var num2 = scheduler.date.to_fixed(10);// ->10 +const num1 = scheduler.date.to_fixed(2); // -> "02" +const num2 = scheduler.date.to_fixed(10); // -> 10 ~~~ -- **week_start**(date) - returns a Date object of the first day of the week for the specified date and clears the time part to zero - - **date** - (Date) the date object to format +- `week_start()` - returns a Date object of the first day of the week for the specified date and clears the time part to zero + - `date` - (Date) the date object to format ~~~js -//29 June, 2019 14:30 -> 24 June, 2019 00:00 -var weekStart = scheduler.date.week_start(new Date(2019, 05, 29, 14, 30)); +// 29 June, 2027 14:30 -> 28 June, 2027 00:00 +const weekStart = scheduler.date.week_start(new Date(2027, 5, 29, 14, 30)); ~~~ -- **year_start**(date) - returns a Date object of the first day of the year for the specified date and clears the time part to zero - - **date** - (Date) the date object to format +- `year_start()` - returns a Date object of the first day of the year for the specified date and clears the time part to zero + - `date` - (Date) the date object to format ~~~js -//29 June, 2019 14:30 -> 01 January, 2019 00:00 -var yearStart = scheduler.date.year_start(new Date(2019, 05, 29, 14, 30)); +// 29 June, 2027 14:30 -> 01 January, 2027 00:00 +const yearStart = scheduler.date.year_start(new Date(2027, 5, 29, 14, 30)); ~~~ From 3229866f7c9259d7d013cec232080af1f13076b1 Mon Sep 17 00:00:00 2001 From: Maksim Lakatkou Date: Wed, 22 Apr 2026 17:41:55 +0200 Subject: [PATCH 31/42] [update] onbeforeviewchange article Refresh event signature and clean view-change details --- docs/api/event/onbeforeviewchange.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/docs/api/event/onbeforeviewchange.md b/docs/api/event/onbeforeviewchange.md index a6abc6a9..e2845d66 100644 --- a/docs/api/event/onbeforeviewchange.md +++ b/docs/api/event/onbeforeviewchange.md @@ -10,23 +10,23 @@ description: "fires before the user changes the current view to some other one" @short: Fires before the user changes the current view to some other one -@signature: onBeforeViewChange: (old_mode: string, old_date: object, mode: string, date: object) =\> boolean +@signature: onBeforeViewChange: (old_mode: string, old_date: Date, mode: string, date: Date) =\> boolean ### Parameters - `old_mode` - (required) *string* - the currently active view -- `old_date` - (required) *object* - the currently active date +- `old_date` - (required) *Date* - the currently active date - `mode` - (required) *string* - the new view -- `date` - (required) *object* - the new date +- `date` - (required) *Date* - the new date ### Returns -- ` result` - (boolean) - defines whether the default action of the event will be triggered (true) or canceled (false) +- `result` - (boolean) - defines whether the default action of the event will be triggered (`true`) or canceled (`false`) ### Example ~~~jsx -scheduler.attachEvent("onBeforeViewChange", function(old_mode,old_date,mode,date){ - //any custom logic here +scheduler.attachEvent("onBeforeViewChange", (old_mode, old_date, mode, date) => { + // any custom logic here return true; }); ~~~ @@ -36,5 +36,5 @@ scheduler.attachEvent("onBeforeViewChange", function(old_mode,old_date,mode,date ### Details -- The event is blockable. Return *false* and the scheduler will leave the current view opened. -- The event also fires when the scheduler is initially being rendered on the page. In this case, the **old_mode** and **old_date** parameters are underfined. +- The event is blockable. Return `false`, and the Scheduler will leave the current view open. +- The event also fires when the Scheduler is initially rendered on the page. In this case, the `old_mode` and `old_date` parameters are undefined. From c760c7a480d1ca6feb29f7c1cd9fd014d4552dfc Mon Sep 17 00:00:00 2001 From: Maksim Lakatkou Date: Wed, 22 Apr 2026 21:05:37 +0200 Subject: [PATCH 32/42] [update] custom-skins article Clean skin customization examples and fix theme setup details --- docs/guides/custom-skins.md | 79 ++++++++++++++++++------------------- 1 file changed, 39 insertions(+), 40 deletions(-) diff --git a/docs/guides/custom-skins.md b/docs/guides/custom-skins.md index 6b376b95..5d8558f9 100644 --- a/docs/guides/custom-skins.md +++ b/docs/guides/custom-skins.md @@ -7,8 +7,8 @@ sidebar_label: "Skins Customization" Starting from v7.0 Scheduler skins use CSS variables that you can use for customization and styling. - -[Customize and switch between themes](https://docs.dhtmlx.com/scheduler/samples/07_skins/07_themes.html) +### Related samples +- [Customize and switch between themes](https://docs.dhtmlx.com/scheduler/samples/07_skins/07_themes.html) Key CSS Variables: @@ -88,40 +88,39 @@ The easiest method to customize the Scheduler's appearance is by overriding the ~~~html ~~~ - -[Customize and switch between themes](https://docs.dhtmlx.com/scheduler/samples/07_skins/07_themes.html) +### Related samples +- [Customize and switch between themes](https://docs.dhtmlx.com/scheduler/samples/07_skins/07_themes.html) By defining variables in this manner, you can redefine the default styles, ensuring that your custom styles are applied to the Scheduler. :::note -For correct inheritance of values across the entire theme, define variables at the :root element. +For correct inheritance of values across the entire theme, define variables at the `:root` element. ::: -It's important to define these styles at the **:root** element to ensure proper inheritance and application throughout the component. This approach guarantees that when a variable utilized by other variables is redefined, it correctly influences related styles across the component. +It's important to define these styles at the `:root` element to ensure proper inheritance and application throughout the component. This approach guarantees that when a variable used by other variables is redefined, it correctly influences related styles across the component. For instance, the variable `--dhx-scheduler-scale-color` inherits from the primary text color variable `--dhx-scheduler-container-color`. -- If you redefine `--dhx-scheduler-container-color` at the **:root** level, you ensure that `--dhx-scheduler-scale-color` reflects this change. +- If you redefine `--dhx-scheduler-container-color` at the `:root` level, you ensure that `--dhx-scheduler-scale-color` reflects this change. ~~~html ~~~ @@ -131,10 +130,10 @@ For instance, the variable `--dhx-scheduler-scale-color` inherits from the prima ~~~html ~~~ @@ -152,29 +151,29 @@ The latter can be used for deep customization of existing skins or for creating ## How to start -You can initialize **codebase/sources/less** as an NPM package. -The sources will contain two types of files: +You can initialize `codebase/sources/less` as an NPM package. +The sources will contain two types of files: -- style sheets; +- style sheets; - files with micro variables declaration which you can use for fine-tuning the scheduler view or for creating a new skin. ## How to build skins -In **codebase/sources/less/** run: +In `codebase/sources/less/` run: -~~~ +~~~sh > npm install ~~~ After install is completed, you can rebuild CSS files using the following commands: -~~~ +~~~sh > npm run build ~~~ -Or +Or -~~~ +~~~sh > npm run watch ~~~ @@ -182,11 +181,11 @@ The script will rebuild CSS files from sources and put them into the *codebase* ## Structure -The structure of the **less** folder for version 7.0 (may be changed in future versions) is given below: +The structure of the `less` folder for version 7.0 (may change in future versions) is given below: ### Images -- **./src/imgs** - svg icons used by all skins +- **./src/imgs** - SVG icons used by all skins - **./src/iconfont** - icons prebuilt into the web font ### Skin definitions @@ -209,11 +208,11 @@ The default set of variables is defined in the `terrace` skin, other skins redef ## Creating custom skin -In order to create a new skin, you can copy and rename one of the existing skins from the **sources/less/src/themes** folder. Follow the steps below: +In order to create a new skin, you can copy and rename one of the existing skins from the `sources/less/src/themes` folder. Follow the steps below: -1) Copy and rename one of the existing files from the **sources/less/src/themes** folder, e.g.: +1. Copy and rename one of the existing files from the `sources/less/src/themes` folder, for example: -~~~ +~~~text -> copy: codebase/sources/less/src/themes/material.less @@ -221,9 +220,9 @@ codebase/sources/less/src/themes/material.less codebase/sources/less/src/themes/custom.less ~~~ -2) Import the new file in **sources/less/src/themes/index.less**, like this: +2. Import the new file in `sources/less/src/themes/index.less`, like this: -~~~ +~~~less @import "./custom"; ~~~ @@ -239,13 +238,13 @@ And add the content as in: } ~~~ -Note that the skin variables should be defined under the `:root` elements, using the `data-scheduler-there` selector. +Note that the skin variables should be defined under the `:root` element, using the `data-scheduler-there` selector. -A new theme must include the **--dhx-scheduler-theme** variable with the theme name. +A new theme must include the `--dhx-scheduler-theme` variable with the theme name. -3) Rebuild skins by running: +3. Rebuild skins by running: -~~~ +~~~sh npm run build ~~~ From 49dc98286bdbcf100c65ca66595e21edd407aae0 Mon Sep 17 00:00:00 2001 From: Maksim Lakatkou Date: Wed, 22 Apr 2026 21:10:14 +0200 Subject: [PATCH 33/42] [update] event_text article Modernize template example and clean text template details --- docs/api/template/event_text.md | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/docs/api/template/event_text.md b/docs/api/template/event_text.md index 3c89be25..cd69abbd 100644 --- a/docs/api/template/event_text.md +++ b/docs/api/template/event_text.md @@ -14,20 +14,19 @@ description: "specifies the event's text" ### Parameters -- `start` - (required) *Date* - the date when an event is scheduled to begin +- `start` - (required) *Date* - the date when an event is scheduled to begin - `end` - (required) *Date* - the date when an event is scheduled to be completed - `event` - (required) *object* - the event object ### Returns -- ` text` - (string) - html text for rendering in the scheduler +- `text` - (string) - HTML text for rendering in the Scheduler ### Example ~~~jsx -scheduler.templates.event_text=function(start, end, event){ - return "" - +event.text+""; -} +scheduler.templates.event_text = (start, end, event) => { + return `${event.text}`; +}; ~~~ **Applicable views:** [Day view](views/day.md), [Week view](views/week.md), [Units view](views/units.md) @@ -37,7 +36,7 @@ scheduler.templates.event_text=function(start, end, event){ ### Details -Note that for Month and Timeline Views you need to use the [event_bar_text](api/template/event_bar_text.md) template to specify the event's text. +Note that for Month and Timeline views you need to use the [`event_bar_text`](api/template/event_bar_text.md) template to specify the event's text. ### Related Guides - [Day View Templates](views/day-view-templates.md) From ef50dc7a7be5e07a88eb622f4304617dade6e36a Mon Sep 17 00:00:00 2001 From: Maksim Lakatkou Date: Wed, 22 Apr 2026 21:12:59 +0200 Subject: [PATCH 34/42] [update] onbeforedrag article Modernize onBeforeDrag example and clean return details --- docs/api/event/onbeforedrag.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/api/event/onbeforedrag.md b/docs/api/event/onbeforedrag.md index 15405242..a407bfef 100644 --- a/docs/api/event/onbeforedrag.md +++ b/docs/api/event/onbeforedrag.md @@ -19,13 +19,13 @@ description: "fires when the user starts the drag/resize operation (version 2.1+ - `e` - (required) *Event* - a native event object ### Returns -- ` result` - (boolean) - defines whether the default action of the event will be triggered (true) or canceled (false) +- `result` - (boolean) - defines whether the default action of the event will be triggered (`true`) or canceled (`false`) ### Example ~~~jsx -scheduler.attachEvent("onBeforeDrag", function (id, mode, e){ - //any custom logic here +scheduler.attachEvent("onBeforeDrag", (id, mode, e) => { + // any custom logic here return true; }); ~~~ @@ -36,6 +36,6 @@ scheduler.attachEvent("onBeforeDrag", function (id, mode, e){ ### Details -The event fires when the user clicks inside the scheduler on the element that can be dragged. +The event fires when the user clicks inside the Scheduler on the element that can be dragged. -For the "create" mode, the id value is not provided ( a new event is not created yet ). +For the "create" mode, the `id` value is not provided, because a new event is not created yet. From 08d8f278afb6a9d5fc55512eafe9be3b6374376e Mon Sep 17 00:00:00 2001 From: Maksim Lakatkou Date: Wed, 22 Apr 2026 21:25:28 +0200 Subject: [PATCH 35/42] [update] dataprocessor article Modernize DataProcessor constructor example and clean method text --- docs/api/method/dataprocessor.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/api/method/dataprocessor.md b/docs/api/method/dataprocessor.md index 5172edb5..263cac56 100644 --- a/docs/api/method/dataprocessor.md +++ b/docs/api/method/dataprocessor.md @@ -14,17 +14,17 @@ description: "DataProcessor constructor" ### Parameters -- `url` - (required) *string* - url to the data feed +- `url` - (required) *string* - the URL to the data feed ### Example ~~~jsx -var dp = new scheduler.DataProcessor("php/update.php"); +const dataProcessor = new scheduler.DataProcessor("php/update.php"); ~~~ ### Details -You can find more information about DataProcessor, including its API [here](https://docs.dhtmlx.com/dataprocessor__index.html). +You can find more information about DataProcessor in the [Server-Side Integration](guides/server-integration.md) article. ### Change log -- added in version 6.0 +- Added in version 6.0 From 228b556dcc3285b1c1e98b7ad116c508d264f93c Mon Sep 17 00:00:00 2001 From: Maksim Lakatkou Date: Wed, 22 Apr 2026 21:28:38 +0200 Subject: [PATCH 36/42] [update] init article Refresh init example date and formatting --- docs/api/method/init.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/api/method/init.md b/docs/api/method/init.md index ce9d495b..bab8c794 100644 --- a/docs/api/method/init.md +++ b/docs/api/method/init.md @@ -21,7 +21,7 @@ description: "a constructor of a dhtmlxScheduler object" ### Example ~~~jsx -scheduler.init("scheduler_here",new Date(2010,0,6),"month"); +scheduler.init("scheduler_here", new Date(2027, 0, 6), "month"); ~~~ ### Related samples From bc41c476a771cfe673f6131060576bc0f5c70b6b Mon Sep 17 00:00:00 2001 From: Maksim Lakatkou Date: Wed, 22 Apr 2026 21:30:58 +0200 Subject: [PATCH 37/42] [update] oneventdrag article Modernize onEventDrag example and align event signature --- docs/api/event/oneventdrag.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/api/event/oneventdrag.md b/docs/api/event/oneventdrag.md index 95e6a9bc..cd4aca6f 100644 --- a/docs/api/event/oneventdrag.md +++ b/docs/api/event/oneventdrag.md @@ -10,7 +10,7 @@ description: "fires when the user drags/resizes events in the scheduler" @short: Fires when the user drags/resizes events in the scheduler -@signature: onEventDrag: (id: string, mode: string, ev: Event) =\> void; +@signature: onEventDrag: (id: string, mode: string, e: Event) =\> void; ### Parameters @@ -21,8 +21,8 @@ description: "fires when the user drags/resizes events in the scheduler" ### Example ~~~jsx -scheduler.attachEvent("onEventDrag", function (id, mode, e){ - //any custom logic here +scheduler.attachEvent("onEventDrag", (id, mode, e) => { + // any custom logic here }); ~~~ @@ -34,6 +34,6 @@ scheduler.attachEvent("onEventDrag", function (id, mode, e){ Modes description: -- **move** - the user drags the event over the scheduler. -- **resize** - the user resizes the event by drag-and-drop. -- **new-size** - the user creates a new event by drag-and-drop. +- `move` - the user drags the event over the Scheduler +- `resize` - the user resizes the event by drag-and-drop +- `new-size` - the user creates a new event by drag-and-drop From 78bb1fc91b254dab03f4d24c9f399829b4f4361a Mon Sep 17 00:00:00 2001 From: Alex Klimenkov Date: Fri, 24 Apr 2026 17:48:26 +0300 Subject: [PATCH 38/42] [dev] exclude next branch from github workflow --- .github/workflows/main.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index 252d419e..976c0d56 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -6,7 +6,7 @@ name: Deploy To Site on: # Triggers the workflow on push or pull request events but only for the master branch push: - branches: [ master, next, test ] + branches: [ master, test ] # A workflow run is made up of one or more jobs that can run sequentially or in parallel jobs: From b35d1d7bb29e6f96ca11f1e32b63885226e3ae5e Mon Sep 17 00:00:00 2001 From: Artyom Borisevich Date: Tue, 28 Apr 2026 10:53:42 +0300 Subject: [PATCH 39/42] [dev] upd translations for locales, upd dates --- docs/api/api_overview.md | 66 +- docs/api/config/active_link_view.md | 2 +- docs/api/config/agenda_end.md | 6 +- docs/api/config/agenda_start.md | 6 +- docs/api/config/api_date.md | 2 +- docs/api/config/auto_end_date.md | 2 +- docs/api/config/buttons_left.md | 2 +- docs/api/config/buttons_right.md | 2 +- docs/api/config/cascade_event_display.md | 2 +- docs/api/config/cascade_event_margin.md | 2 +- docs/api/config/check_limits.md | 2 +- docs/api/config/collision_limit.md | 2 +- docs/api/config/container_autoresize.md | 2 +- docs/api/config/date_format.md | 2 +- docs/api/config/day_date.md | 6 +- docs/api/config/dblclick_create.md | 2 +- docs/api/config/default_date.md | 2 +- docs/api/config/details_on_create.md | 2 +- docs/api/config/details_on_dblclick.md | 2 +- docs/api/config/display_marked_timespans.md | 2 +- docs/api/config/displayed_event_color.md | 2 +- docs/api/config/displayed_event_text_color.md | 2 +- docs/api/config/drag_create.md | 2 +- docs/api/config/drag_highlight.md | 2 +- docs/api/config/drag_in.md | 4 +- docs/api/config/drag_lightbox.md | 2 +- docs/api/config/drag_move.md | 2 +- docs/api/config/drag_out.md | 4 +- docs/api/config/drag_resize.md | 2 +- docs/api/config/edit_on_create.md | 2 +- docs/api/config/event_duration.md | 2 +- docs/api/config/first_hour.md | 2 +- docs/api/config/fix_tab_position.md | 2 +- docs/api/config/full_day.md | 2 +- docs/api/config/highlight_displayed_event.md | 2 +- docs/api/config/hour_date.md | 2 +- docs/api/config/hour_size_px.md | 2 +- docs/api/config/icons_edit.md | 2 +- docs/api/config/icons_select.md | 2 +- docs/api/config/include_end_by.md | 2 +- docs/api/config/last_hour.md | 2 +- docs/api/config/left_border.md | 2 +- docs/api/config/lightbox_recurring.md | 2 +- docs/api/config/limit_end.md | 10 +- docs/api/config/limit_start.md | 10 +- docs/api/config/limit_time_select.md | 2 +- docs/api/config/limit_view.md | 8 +- docs/api/config/load_date.md | 2 +- docs/api/config/map_end.md | 6 +- docs/api/config/map_error_position.md | 2 +- docs/api/config/map_infowindow_max_width.md | 2 +- docs/api/config/map_initial_position.md | 2 +- docs/api/config/map_initial_zoom.md | 2 +- docs/api/config/map_resolve_event_location.md | 2 +- docs/api/config/map_resolve_user_location.md | 2 +- docs/api/config/map_settings.md | 2 +- docs/api/config/map_start.md | 6 +- docs/api/config/map_type.md | 2 +- docs/api/config/map_view_provider.md | 2 +- docs/api/config/map_zoom_after_resolve.md | 2 +- docs/api/config/mark_now.md | 2 +- docs/api/config/max_month_events.md | 2 +- docs/api/config/minicalendar.md | 2 +- docs/api/config/month_date.md | 2 +- docs/api/config/month_day.md | 2 +- docs/api/config/month_day_min_height.md | 2 +- docs/api/config/multi_day.md | 2 +- docs/api/config/multi_day_height_limit.md | 2 +- docs/api/config/multisection.md | 2 +- docs/api/config/multisection_shift_all.md | 2 +- docs/api/config/now_date.md | 4 +- .../api/config/occurrence_timestamp_in_utc.md | 2 +- docs/api/config/parse_exact_format.md | 24 +- docs/api/config/positive_closing.md | 2 +- docs/api/config/preserve_scroll.md | 2 +- docs/api/config/prevent_cache.md | 2 +- docs/api/config/quick_info_detached.md | 2 +- docs/api/config/readonly.md | 2 +- docs/api/config/readonly_form.md | 2 +- docs/api/config/repeat_date.md | 2 +- docs/api/config/resize_month_events.md | 2 +- docs/api/config/resize_month_timed.md | 2 +- docs/api/config/rtl.md | 2 +- docs/api/config/select.md | 2 +- docs/api/config/separate_short_events.md | 2 +- docs/api/config/server_utc.md | 2 +- docs/api/config/show_loading.md | 2 +- docs/api/config/start_on_monday.md | 2 +- docs/api/config/time_step.md | 2 +- docs/api/config/tooltip_hide_timeout.md | 2 +- docs/api/config/tooltip_offset_x.md | 2 +- docs/api/config/tooltip_offset_y.md | 2 +- docs/api/config/tooltip_timeout.md | 2 +- docs/api/config/touch.md | 2 +- docs/api/config/touch_drag.md | 2 +- docs/api/config/touch_tip.md | 2 +- docs/api/config/undo_deleted.md | 2 +- docs/api/config/update_render.md | 2 +- docs/api/config/use_select_menu_space.md | 2 +- docs/api/config/week_agenda_select.md | 2 +- docs/api/config/week_date.md | 2 +- docs/api/config/wide_form.md | 2 +- docs/api/config/year_x.md | 2 +- docs/api/config/year_y.md | 2 +- docs/api/event/ondragend.md | 4 +- docs/api/event/onexternaldragin.md | 2 +- docs/api/event/onmousemove.md | 2 +- docs/api/method/addeventnow.md | 4 +- docs/api/method/addshortcut.md | 2 +- docs/api/method/alert.md | 2 +- docs/api/method/backbone.md | 2 +- docs/api/method/batchupdate.md | 2 +- docs/api/method/blocktime.md | 18 +- docs/api/method/callevent.md | 2 +- docs/api/method/checkcollision.md | 8 +- docs/api/method/checkinmarkedtimespan.md | 10 +- docs/api/method/checklimitviolation.md | 8 +- docs/api/method/confirm.md | 2 +- docs/api/method/copy.md | 2 +- docs/api/method/createdataprocessor.md | 10 +- docs/api/method/creategridview.md | 4 +- docs/api/method/createunitsview.md | 8 +- docs/api/method/deleteevent.md | 8 +- docs/api/method/deletemarkedtimespan.md | 2 +- docs/api/method/destroycalendar.md | 2 +- docs/api/method/destructor.md | 2 +- docs/api/method/detachevent.md | 2 +- docs/api/method/edit.md | 6 +- docs/api/method/editstop.md | 6 +- docs/api/method/eventremove.md | 2 +- docs/api/method/formsection.md | 10 +- docs/api/method/getactiondata.md | 4 +- docs/api/method/getevent.md | 8 +- docs/api/method/geteventenddate.md | 8 +- docs/api/method/getevents.md | 2 +- docs/api/method/geteventstartdate.md | 8 +- docs/api/method/geteventtext.md | 6 +- docs/api/method/getlabel.md | 10 +- docs/api/method/getrecdates.md | 17 +- docs/api/method/getrenderedevent.md | 8 +- docs/api/method/getshortcuthandler.md | 2 +- docs/api/method/getstate.md | 2 +- docs/api/method/getuserdata.md | 6 +- docs/api/method/getview.md | 2 +- docs/api/method/invertzones.md | 2 +- docs/api/method/iscalendarvisible.md | 2 +- docs/api/method/isonedayevent.md | 6 +- docs/api/method/linkcalendar.md | 2 +- docs/api/method/markcalendar.md | 2 +- docs/api/method/marktimespan.md | 18 +- docs/api/method/message.md | 2 +- docs/api/method/modalbox.md | 2 +- docs/api/method/removeshortcut.md | 2 +- docs/api/method/render.md | 2 +- docs/api/method/renderevent.md | 4 +- docs/api/method/resetlightbox.md | 6 +- docs/api/method/select.md | 6 +- docs/api/method/serialize.md | 10 +- docs/api/method/serverlist.md | 4 +- docs/api/method/setevent.md | 4 +- docs/api/method/seteventenddate.md | 8 +- docs/api/method/seteventstartdate.md | 8 +- docs/api/method/seteventtext.md | 6 +- docs/api/method/setlightboxsize.md | 2 +- docs/api/method/setloadmode.md | 2 +- docs/api/method/setuserdata.md | 6 +- docs/api/method/showevent.md | 6 +- docs/api/method/showlightbox.md | 6 +- docs/api/method/showquickinfo.md | 6 +- docs/api/method/toical.md | 4 +- docs/api/method/tojson.md | 2 +- docs/api/method/topdfrange.md | 6 +- docs/api/method/toxml.md | 2 +- docs/api/method/uid.md | 2 +- docs/api/method/unblocktime.md | 6 +- docs/api/method/unmarkcalendar.md | 8 +- docs/api/method/unmarktimespan.md | 2 +- docs/api/method/unselect.md | 6 +- docs/api/method/updatecalendar.md | 4 +- docs/api/method/updateevent.md | 6 +- docs/api/other/ajax.md | 10 +- docs/api/other/json.md | 2 +- docs/api/other/matrix.md | 4 +- docs/api/other/skin.md | 2 +- docs/api/other/tooltip.md | 2 +- docs/api/other/version.md | 2 +- docs/api/overview/others_overview.md | 2 +- docs/api/template/day_date.md | 2 +- docs/api/template/event_date.md | 2 +- docs/api/template/format_date.md | 2 +- docs/api/template/load_format.md | 2 +- docs/api/template/month_date.md | 2 +- docs/api/template/month_day.md | 2 +- docs/api/template/parse_date.md | 4 +- .../timelinename_second_scale_date.md | 4 +- docs/api/template/tooltip_date_format.md | 2 +- docs/api/template/week_agenda_scale_date.md | 2 +- docs/api/template/week_scale_date.md | 2 +- docs/api/template/xml_date.md | 8 +- docs/api/template/xml_format.md | 6 +- docs/api/template/year_date.md | 2 +- docs/export/excel.md | 10 +- docs/export/pdf-multi.md | 6 +- docs/export/png.md | 2 +- docs/export/serialization.md | 10 +- docs/guides/collisions.md | 12 +- docs/guides/combo.md | 2 +- docs/guides/custom-events-color.md | 18 +- docs/guides/custom-events-display.md | 6 +- docs/guides/custom-lightbox-editor.md | 8 +- docs/guides/customizing-edit-select-bars.md | 2 +- docs/guides/data-formats.md | 76 +- docs/guides/date-formats.md | 16 +- docs/guides/drag-between.md | 12 +- docs/guides/event-object-operations.md | 34 +- docs/guides/ical-export-import.md | 16 +- docs/guides/initialization.md | 24 +- docs/guides/keyboard-navigation.md | 6 +- docs/guides/lightbox-editors-manipulations.md | 56 +- docs/guides/limits.md | 4 +- docs/guides/live-update.md | 2 +- docs/guides/minicalendar.md | 36 +- docs/guides/multiselect.md | 8 +- docs/guides/multiuser-live-updates.md | 2 +- docs/guides/popups-and-modals.md | 6 +- docs/guides/quick-info.md | 2 +- docs/guides/radio.md | 20 +- docs/guides/recurring-events-legacy.md | 39 +- docs/guides/rtl-mode.md | 2 +- docs/guides/scheduler-markup.md | 6 +- docs/guides/select.md | 14 +- docs/guides/sizing-legacy.md | 15 +- docs/guides/sizing.md | 15 +- docs/guides/template.md | 4 +- docs/guides/tooltips-legacy.md | 2 +- docs/guides/tooltips.md | 10 +- .../angular/howtostart-angular.md | 10 +- .../dotnet/howtostart-dotnet-core.md | 16 +- docs/integrations/dotnet/howtostart-dotnet.md | 14 +- .../firebase/howtostart-firebase.md | 7 +- .../legacy/dhxlayout-integration.md | 96 --- docs/integrations/node/howtostart-nodejs.md | 4 +- docs/integrations/other/bootstrap.md | 2 +- .../other/dhxlayout-integration.md | 9 +- .../other/howtostart-connector.md | 10 +- docs/integrations/other/howtostart-php.md | 8 +- docs/integrations/other/jquery-integration.md | 2 +- .../salesforce/howtostart-salesforce.md | 2 +- docs/integrations/svelte/howtostart-svelte.md | 12 +- docs/integrations/vue/howtostart-vue.md | 12 +- docs/views/agenda-legacy.md | 8 +- docs/views/agenda.md | 4 +- docs/views/day.md | 2 +- docs/views/grid.md | 10 +- docs/views/map.md | 10 +- docs/views/month.md | 10 +- docs/views/timeline.md | 38 +- docs/views/units.md | 16 +- docs/views/week.md | 2 +- .../current/api/api_overview.md | 30 +- .../current/api/config/active_link_view.md | 2 +- .../current/api/config/agenda_end.md | 6 +- .../current/api/config/agenda_start.md | 6 +- .../current/api/config/api_date.md | 2 +- .../current/api/config/auto_end_date.md | 2 +- .../current/api/config/buttons_left.md | 2 +- .../current/api/config/buttons_right.md | 2 +- .../api/config/cascade_event_display.md | 2 +- .../api/config/cascade_event_margin.md | 2 +- .../current/api/config/check_limits.md | 2 +- .../current/api/config/collision_limit.md | 2 +- .../api/config/container_autoresize.md | 2 +- .../current/api/config/date_format.md | 2 +- .../current/api/config/day_date.md | 6 +- .../current/api/config/dblclick_create.md | 2 +- .../current/api/config/default_date.md | 2 +- .../current/api/config/details_on_create.md | 2 +- .../current/api/config/details_on_dblclick.md | 2 +- .../api/config/display_marked_timespans.md | 2 +- .../api/config/displayed_event_color.md | 2 +- .../api/config/displayed_event_text_color.md | 2 +- .../current/api/config/drag_create.md | 2 +- .../current/api/config/drag_highlight.md | 2 +- .../current/api/config/drag_in.md | 4 +- .../current/api/config/drag_lightbox.md | 2 +- .../current/api/config/drag_move.md | 2 +- .../current/api/config/drag_out.md | 4 +- .../current/api/config/drag_resize.md | 2 +- .../current/api/config/edit_on_create.md | 2 +- .../current/api/config/event_duration.md | 2 +- .../current/api/config/first_hour.md | 2 +- .../current/api/config/fix_tab_position.md | 2 +- .../current/api/config/full_day.md | 2 +- .../current/api/config/header.md | 58 +- .../api/config/highlight_displayed_event.md | 2 +- .../current/api/config/hour_date.md | 2 +- .../current/api/config/hour_size_px.md | 2 +- .../current/api/config/icons_edit.md | 2 +- .../current/api/config/icons_select.md | 2 +- .../current/api/config/include_end_by.md | 16 +- .../current/api/config/last_hour.md | 2 +- .../current/api/config/left_border.md | 2 +- .../current/api/config/lightbox.md | 69 +- .../current/api/config/lightbox_recurring.md | 2 +- .../current/api/config/limit_end.md | 10 +- .../current/api/config/limit_start.md | 10 +- .../current/api/config/limit_time_select.md | 2 +- .../current/api/config/limit_view.md | 8 +- .../current/api/config/load_date.md | 2 +- .../current/api/config/map_end.md | 6 +- .../current/api/config/map_error_position.md | 2 +- .../api/config/map_infowindow_max_width.md | 2 +- .../api/config/map_initial_position.md | 2 +- .../current/api/config/map_initial_zoom.md | 2 +- .../api/config/map_resolve_event_location.md | 2 +- .../api/config/map_resolve_user_location.md | 2 +- .../current/api/config/map_settings.md | 2 +- .../current/api/config/map_start.md | 6 +- .../current/api/config/map_type.md | 2 +- .../current/api/config/map_view_provider.md | 2 +- .../api/config/map_zoom_after_resolve.md | 2 +- .../current/api/config/mark_now.md | 2 +- .../current/api/config/max_month_events.md | 2 +- .../current/api/config/minicalendar.md | 2 +- .../current/api/config/month_date.md | 2 +- .../current/api/config/month_day.md | 2 +- .../api/config/month_day_min_height.md | 2 +- .../current/api/config/multi_day.md | 2 +- .../api/config/multi_day_height_limit.md | 2 +- .../current/api/config/multisection.md | 2 +- .../api/config/multisection_shift_all.md | 2 +- .../current/api/config/now_date.md | 4 +- .../api/config/occurrence_timestamp_in_utc.md | 2 +- .../current/api/config/parse_exact_format.md | 4 +- .../current/api/config/positive_closing.md | 2 +- .../current/api/config/preserve_scroll.md | 2 +- .../current/api/config/prevent_cache.md | 2 +- .../current/api/config/quick_info_detached.md | 2 +- .../current/api/config/readonly.md | 2 +- .../current/api/config/readonly_form.md | 2 +- .../current/api/config/repeat_date.md | 2 +- .../current/api/config/resize_month_events.md | 2 +- .../current/api/config/resize_month_timed.md | 2 +- .../current/api/config/rtl.md | 2 +- .../current/api/config/select.md | 2 +- .../api/config/separate_short_events.md | 2 +- .../current/api/config/server_utc.md | 2 +- .../current/api/config/show_loading.md | 2 +- .../current/api/config/start_on_monday.md | 2 +- .../current/api/config/time_step.md | 2 +- .../api/config/tooltip_hide_timeout.md | 2 +- .../current/api/config/tooltip_offset_x.md | 2 +- .../current/api/config/tooltip_offset_y.md | 2 +- .../current/api/config/tooltip_timeout.md | 2 +- .../current/api/config/touch.md | 2 +- .../current/api/config/touch_drag.md | 2 +- .../current/api/config/touch_tip.md | 2 +- .../current/api/config/undo_deleted.md | 2 +- .../current/api/config/update_render.md | 2 +- .../api/config/use_select_menu_space.md | 2 +- .../current/api/config/week_agenda_select.md | 2 +- .../current/api/config/week_date.md | 2 +- .../current/api/config/wide_form.md | 2 +- .../current/api/config/year_x.md | 2 +- .../current/api/config/year_y.md | 2 +- .../current/api/event/onbeforedrag.md | 28 +- .../current/api/event/onbeforeeventchanged.md | 28 +- .../current/api/event/onbeforeviewchange.md | 30 +- .../current/api/event/onclick.md | 28 +- .../current/api/event/oncontextmenu.md | 2 +- .../current/api/event/ondblclick.md | 22 +- .../current/api/event/ondragend.md | 4 +- .../current/api/event/oneventdrag.md | 32 +- .../current/api/event/onviewchange.md | 20 +- .../current/api/method/addevent.md | 48 +- .../current/api/method/addeventnow.md | 4 +- .../current/api/method/addmarkedtimespan.md | 202 ++--- .../current/api/method/addshortcut.md | 2 +- .../current/api/method/alert.md | 2 +- .../current/api/method/attachevent.md | 81 +- .../current/api/method/backbone.md | 2 +- .../current/api/method/batchupdate.md | 2 +- .../current/api/method/callevent.md | 2 +- .../current/api/method/checkcollision.md | 4 +- .../api/method/checkinmarkedtimespan.md | 10 +- .../current/api/method/checklimitviolation.md | 4 +- .../current/api/method/confirm.md | 2 +- .../current/api/method/copy.md | 2 +- .../current/api/method/createdataprocessor.md | 10 +- .../current/api/method/creategridview.md | 2 +- .../current/api/method/createtimelineview.md | 174 ++-- .../current/api/method/createunitsview.md | 8 +- .../current/api/method/dataprocessor.md | 16 +- .../current/api/method/deleteevent.md | 8 +- .../api/method/deletemarkedtimespan.md | 4 +- .../current/api/method/destroycalendar.md | 2 +- .../current/api/method/destructor.md | 2 +- .../current/api/method/detachevent.md | 2 +- .../current/api/method/edit.md | 6 +- .../current/api/method/editstop.md | 6 +- .../current/api/method/eventremove.md | 2 +- .../current/api/method/formsection.md | 10 +- .../current/api/method/getactiondata.md | 4 +- .../current/api/method/getevent.md | 8 +- .../current/api/method/geteventenddate.md | 8 +- .../current/api/method/getevents.md | 2 +- .../current/api/method/geteventstartdate.md | 8 +- .../current/api/method/geteventtext.md | 6 +- .../current/api/method/getlabel.md | 8 +- .../current/api/method/getrecdates.md | 17 +- .../current/api/method/getrenderedevent.md | 8 +- .../current/api/method/getshortcuthandler.md | 2 +- .../current/api/method/getstate.md | 2 +- .../current/api/method/getuserdata.md | 6 +- .../current/api/method/getview.md | 2 +- .../current/api/method/init.md | 18 +- .../current/api/method/invertzones.md | 2 +- .../current/api/method/iscalendarvisible.md | 2 +- .../current/api/method/isonedayevent.md | 6 +- .../current/api/method/linkcalendar.md | 2 +- .../current/api/method/load.md | 36 +- .../current/api/method/markcalendar.md | 2 +- .../current/api/method/marktimespan.md | 18 +- .../current/api/method/message.md | 2 +- .../current/api/method/modalbox.md | 2 +- .../current/api/method/parse.md | 28 +- .../current/api/method/removeshortcut.md | 2 +- .../current/api/method/render.md | 2 +- .../current/api/method/renderevent.md | 4 +- .../current/api/method/resetlightbox.md | 6 +- .../current/api/method/select.md | 6 +- .../current/api/method/serialize.md | 10 +- .../current/api/method/serverlist.md | 4 +- .../current/api/method/setcurrentview.md | 32 +- .../current/api/method/setevent.md | 4 +- .../current/api/method/setlightboxsize.md | 2 +- .../current/api/method/setloadmode.md | 2 +- .../current/api/method/setuserdata.md | 6 +- .../current/api/method/showevent.md | 6 +- .../current/api/method/showlightbox.md | 6 +- .../current/api/method/showquickinfo.md | 6 +- .../current/api/method/toical.md | 4 +- .../current/api/method/tojson.md | 2 +- .../current/api/method/topdfrange.md | 6 +- .../current/api/method/toxml.md | 2 +- .../current/api/method/uid.md | 2 +- .../current/api/method/unblocktime.md | 6 +- .../current/api/method/unmarkcalendar.md | 8 +- .../current/api/method/unmarktimespan.md | 2 +- .../current/api/method/unselect.md | 6 +- .../current/api/method/updatecalendar.md | 4 +- .../current/api/method/updateevent.md | 6 +- .../current/api/method/updateview.md | 32 +- .../current/api/other/ajax.md | 10 +- .../current/api/other/config.md | 2 +- .../current/api/other/date.md | 172 ++-- .../current/api/other/ical.md | 12 +- .../current/api/other/json.md | 3 +- .../current/api/other/matrix.md | 2 +- .../current/api/other/skin.md | 2 +- .../current/api/other/tooltip.md | 2 +- .../current/api/other/version.md | 2 +- .../current/api/template/day_date.md | 2 +- .../current/api/template/event_bar_text.md | 28 +- .../current/api/template/event_class.md | 30 +- .../current/api/template/event_date.md | 2 +- .../current/api/template/event_text.md | 31 +- .../current/api/template/format_date.md | 2 +- .../current/api/template/load_format.md | 3 +- .../current/api/template/month_date.md | 2 +- .../current/api/template/month_day.md | 2 +- .../current/api/template/parse_date.md | 6 +- .../timelinename_second_scale_date.md | 4 +- .../api/template/tooltip_date_format.md | 2 +- .../api/template/week_agenda_scale_date.md | 2 +- .../current/api/template/week_scale_date.md | 2 +- .../current/api/template/xml_date.md | 4 +- .../current/api/template/xml_format.md | 6 +- .../current/api/template/year_date.md | 2 +- .../current/export/excel.md | 8 +- .../current/export/pdf.md | 141 +-- .../current/export/serialization.md | 198 +++++ .../current/guides/backbone-integration.md | 52 -- .../current/guides/collisions.md | 99 +-- .../current/guides/combo.md | 110 +-- .../current/guides/custom-details-form.md | 56 +- .../current/guides/custom-events-color.md | 220 +++-- .../current/guides/custom-events-display.md | 71 +- .../current/guides/custom-lightbox-editor.md | 43 +- .../current/guides/custom-skins.md | 142 +-- .../guides/customizing-edit-select-bars.md | 78 +- .../current/guides/data-export.md | 12 - .../current/guides/data-formats.md | 113 +-- .../current/guides/datastore-integration.md | 73 -- .../current/guides/date-formats.md | 60 +- .../guides/dhtmlx-components-integration.md | 129 --- .../current/guides/dhxlayout-integration.md | 84 -- .../current/guides/drag-between.md | 72 ++ .../current/guides/event-object-operations.md | 89 +- .../current/guides/export.md | 198 ----- .../current/guides/extensions-list.md | 345 +++----- .../current/guides/filtering.md | 45 +- .../current/guides/guides.md | 77 -- .../current/guides/how-to-start.md | 240 ------ .../current/guides/ical-export-import.md | 96 +-- .../current/guides/initialization.md | 166 ++-- .../guides/integration-with-bootstrap.md | 48 -- .../guides/integration-with-dhtmlxmessage.md | 369 -------- .../current/guides/jquery-integration.md | 35 - .../current/guides/keyboard-navigation.md | 140 +-- .../guides/lightbox-editors-manipulations.md | 236 +++-- .../current/guides/limits.md | 92 +- .../current/guides/live-update.md | 76 +- .../current/guides/loading-data.md | 385 +++++---- .../current/guides/localization.md | 108 ++- .../current/guides/minicalendar.md | 220 ++--- .../current/guides/multiple-per-page.md | 159 ++-- .../current/guides/multiselect.md | 83 +- .../current/guides/multiuser-live-updates.md | 132 +-- .../current/guides/popups-and-modals.md | 377 ++++++++ .../current/guides/quick-info.md | 37 +- .../current/guides/radio.md | 125 ++- .../current/guides/readonly.md | 67 +- .../current/guides/recurring-events-legacy.md | 340 ++++---- .../current/guides/recurring-events.md | 610 +++++++------ .../current/guides/rtl-mode.md | 44 +- .../current/guides/scheduler-3.0.md | 54 -- .../current/guides/scheduler-integrations.md | 11 - .../current/guides/scheduler-markup.md | 96 +-- .../current/guides/scheduler-typescript.md | 28 - .../current/guides/select.md | 63 +- .../current/guides/sizing-legacy.md | 77 +- .../current/guides/sizing.md | 55 +- .../current/guides/template.md | 30 +- .../current/guides/templates.md | 57 +- .../current/guides/tooltips-legacy.md | 42 +- .../current/guides/tooltips.md | 140 +-- .../current/guides/views.md | 38 - .../current/integrations/ai-tools/index.md | 16 + .../integrations/ai-tools/mcp-server.md | 138 +++ .../firebase/howtostart-firebase.md | 283 ++++++ .../google-calendar/google-calendar-sync.md | 475 ++++++---- .../legacy/backbone-integration.md | 54 ++ .../current/integrations/legacy/dhtmlx-dnd.md | 72 ++ .../current/integrations/other/bootstrap.md | 47 + .../other/dhxlayout-integration.md | 89 ++ .../integrations/other/jquery-integration.md | 33 + .../integrations/react/configuration-props.md | 214 +++++ .../current/integrations/react/copyright.md | 116 +++ .../react/firebase-integration.md | 210 +++++ .../current/integrations/react/index.md | 42 + .../integrations/react/installation.md | 77 ++ .../integrations/react/js-scheduler-react.md | 103 ++- .../current/integrations/react/nextjs.md | 264 ++++++ .../current/integrations/react/overview.md | 486 +++++++++++ .../current/integrations/react/quick-start.md | 312 +++++++ .../current/integrations/react/remix.md | 271 ++++++ .../current/integrations/react/state/index.md | 40 + .../current/integrations/react/state/jotai.md | 597 +++++++++++++ .../current/integrations/react/state/mobx.md | 626 ++++++++++++++ .../integrations/react/state/redux-toolkit.md | 590 +++++++++++++ .../react/state/state-management-basics.md | 301 +++++++ .../integrations/react/state/valtio.md | 587 +++++++++++++ .../integrations/react/state/xstate.md | 550 ++++++++++++ .../integrations/react/state/zustand.md | 503 +++++++++++ .../salesforce/howtostart-salesforce.md | 160 ++-- .../current/views/agenda-legacy.md | 8 +- .../current/views/agenda.md | 4 +- .../current/views/day.md | 2 +- .../current/views/grid.md | 10 +- .../current/views/map.md | 12 +- .../current/views/month.md | 12 +- .../current/views/timeline.md | 28 +- .../current/views/units.md | 16 +- .../current/views/week.md | 2 +- .../current/whats-new.md | 104 ++- .../current/api/api_overview.md | 30 +- .../current/api/config/active_link_view.md | 2 +- .../current/api/config/agenda_end.md | 6 +- .../current/api/config/agenda_start.md | 6 +- .../current/api/config/api_date.md | 2 +- .../current/api/config/auto_end_date.md | 2 +- .../current/api/config/buttons_right.md | 2 +- .../api/config/cascade_event_display.md | 2 +- .../api/config/cascade_event_margin.md | 2 +- .../current/api/config/check_limits.md | 2 +- .../current/api/config/collision_limit.md | 2 +- .../api/config/container_autoresize.md | 2 +- .../current/api/config/date_format.md | 2 +- .../current/api/config/day_date.md | 6 +- .../current/api/config/dblclick_create.md | 2 +- .../current/api/config/default_date.md | 2 +- .../current/api/config/details_on_create.md | 2 +- .../current/api/config/details_on_dblclick.md | 2 +- .../api/config/display_marked_timespans.md | 2 +- .../api/config/displayed_event_color.md | 2 +- .../api/config/displayed_event_text_color.md | 2 +- .../current/api/config/drag_create.md | 2 +- .../current/api/config/drag_highlight.md | 2 +- .../current/api/config/drag_in.md | 4 +- .../current/api/config/drag_lightbox.md | 2 +- .../current/api/config/drag_move.md | 2 +- .../current/api/config/drag_out.md | 4 +- .../current/api/config/drag_resize.md | 2 +- .../current/api/config/edit_on_create.md | 2 +- .../current/api/config/event_duration.md | 2 +- .../current/api/config/first_hour.md | 2 +- .../current/api/config/fix_tab_position.md | 2 +- .../current/api/config/full_day.md | 2 +- .../current/api/config/header.md | 62 +- .../api/config/highlight_displayed_event.md | 2 +- .../current/api/config/hour_date.md | 2 +- .../current/api/config/hour_size_px.md | 2 +- .../current/api/config/icons_edit.md | 2 +- .../current/api/config/icons_select.md | 2 +- .../current/api/config/include_end_by.md | 16 +- .../current/api/config/last_hour.md | 2 +- .../current/api/config/left_border.md | 2 +- .../current/api/config/lightbox.md | 65 +- .../current/api/config/lightbox_recurring.md | 2 +- .../current/api/config/limit_end.md | 10 +- .../current/api/config/limit_start.md | 10 +- .../current/api/config/limit_time_select.md | 2 +- .../current/api/config/limit_view.md | 8 +- .../current/api/config/load_date.md | 2 +- .../current/api/config/map_end.md | 6 +- .../current/api/config/map_error_position.md | 2 +- .../api/config/map_infowindow_max_width.md | 2 +- .../api/config/map_initial_position.md | 2 +- .../current/api/config/map_initial_zoom.md | 2 +- .../api/config/map_resolve_event_location.md | 2 +- .../api/config/map_resolve_user_location.md | 2 +- .../current/api/config/map_settings.md | 2 +- .../current/api/config/map_start.md | 6 +- .../current/api/config/map_type.md | 2 +- .../current/api/config/map_view_provider.md | 2 +- .../api/config/map_zoom_after_resolve.md | 2 +- .../current/api/config/mark_now.md | 2 +- .../current/api/config/max_month_events.md | 2 +- .../current/api/config/minicalendar.md | 2 +- .../current/api/config/month_date.md | 2 +- .../current/api/config/month_day.md | 2 +- .../api/config/month_day_min_height.md | 2 +- .../current/api/config/multi_day.md | 2 +- .../api/config/multi_day_height_limit.md | 2 +- .../current/api/config/multisection.md | 2 +- .../api/config/multisection_shift_all.md | 2 +- .../current/api/config/now_date.md | 4 +- .../api/config/occurrence_timestamp_in_utc.md | 2 +- .../current/api/config/parse_exact_format.md | 24 +- .../current/api/config/positive_closing.md | 2 +- .../current/api/config/preserve_scroll.md | 2 +- .../current/api/config/prevent_cache.md | 2 +- .../current/api/config/quick_info_detached.md | 2 +- .../current/api/config/readonly.md | 2 +- .../current/api/config/readonly_form.md | 2 +- .../current/api/config/repeat_date.md | 2 +- .../current/api/config/resize_month_events.md | 2 +- .../current/api/config/resize_month_timed.md | 2 +- .../current/api/config/rtl.md | 2 +- .../current/api/config/select.md | 2 +- .../api/config/separate_short_events.md | 2 +- .../current/api/config/server_utc.md | 2 +- .../current/api/config/show_loading.md | 2 +- .../current/api/config/start_on_monday.md | 2 +- .../current/api/config/time_step.md | 2 +- .../api/config/tooltip_hide_timeout.md | 2 +- .../current/api/config/tooltip_offset_x.md | 2 +- .../current/api/config/tooltip_offset_y.md | 2 +- .../current/api/config/tooltip_timeout.md | 2 +- .../current/api/config/touch.md | 2 +- .../current/api/config/touch_drag.md | 2 +- .../current/api/config/touch_tip.md | 2 +- .../current/api/config/undo_deleted.md | 2 +- .../current/api/config/update_render.md | 2 +- .../api/config/use_select_menu_space.md | 2 +- .../current/api/config/week_agenda_select.md | 2 +- .../current/api/config/week_date.md | 2 +- .../current/api/config/wide_form.md | 2 +- .../current/api/config/xml_date.md | 2 +- .../current/api/config/year_x.md | 2 +- .../current/api/config/year_y.md | 2 +- .../current/api/event/onbeforedrag.md | 24 +- .../current/api/event/onbeforeeventchanged.md | 28 +- .../current/api/event/onbeforeviewchange.md | 30 +- .../current/api/event/onclick.md | 26 +- .../current/api/event/oncontextmenu.md | 2 +- .../current/api/event/ondblclick.md | 22 +- .../current/api/event/ondragend.md | 4 +- .../current/api/event/oneventdrag.md | 24 +- .../current/api/event/onviewchange.md | 20 +- .../current/api/method/addevent.md | 34 +- .../current/api/method/addeventnow.md | 4 +- .../current/api/method/addmarkedtimespan.md | 64 +- .../current/api/method/addshortcut.md | 2 +- .../current/api/method/alert.md | 2 +- .../current/api/method/attachevent.md | 57 +- .../current/api/method/backbone.md | 2 +- .../current/api/method/batchupdate.md | 2 +- .../current/api/method/blocktime.md | 18 +- .../current/api/method/callevent.md | 2 +- .../current/api/method/checkcollision.md | 8 +- .../api/method/checkinmarkedtimespan.md | 10 +- .../current/api/method/checklimitviolation.md | 8 +- .../current/api/method/confirm.md | 2 +- .../current/api/method/copy.md | 2 +- .../current/api/method/createdataprocessor.md | 10 +- .../current/api/method/creategridview.md | 2 +- .../current/api/method/createtimelineview.md | 129 ++- .../current/api/method/createunitsview.md | 8 +- .../current/api/method/dataprocessor.md | 10 +- .../current/api/method/deleteevent.md | 8 +- .../api/method/deletemarkedtimespan.md | 4 +- .../current/api/method/destroycalendar.md | 2 +- .../current/api/method/destructor.md | 2 +- .../current/api/method/detachevent.md | 2 +- .../current/api/method/edit.md | 6 +- .../current/api/method/editstop.md | 6 +- .../current/api/method/eventremove.md | 2 +- .../current/api/method/formsection.md | 10 +- .../current/api/method/getactiondata.md | 2 +- .../current/api/method/getevent.md | 8 +- .../current/api/method/geteventenddate.md | 8 +- .../current/api/method/getevents.md | 2 +- .../current/api/method/geteventstartdate.md | 8 +- .../current/api/method/geteventtext.md | 6 +- .../current/api/method/getlabel.md | 10 +- .../current/api/method/getrecdates.md | 15 +- .../current/api/method/getrenderedevent.md | 8 +- .../current/api/method/getshortcuthandler.md | 2 +- .../current/api/method/getstate.md | 2 +- .../current/api/method/getuserdata.md | 6 +- .../current/api/method/getview.md | 2 +- .../current/api/method/init.md | 22 +- .../current/api/method/invertzones.md | 2 +- .../current/api/method/iscalendarvisible.md | 2 +- .../current/api/method/isonedayevent.md | 6 +- .../current/api/method/linkcalendar.md | 2 +- .../current/api/method/load.md | 36 +- .../current/api/method/marktimespan.md | 18 +- .../current/api/method/message.md | 2 +- .../current/api/method/modalbox.md | 4 +- .../current/api/method/parse.md | 32 +- .../current/api/method/removeshortcut.md | 2 +- .../current/api/method/render.md | 2 +- .../current/api/method/renderevent.md | 4 +- .../current/api/method/resetlightbox.md | 6 +- .../current/api/method/select.md | 6 +- .../current/api/method/serialize.md | 10 +- .../current/api/method/serverlist.md | 4 +- .../current/api/method/setcurrentview.md | 28 +- .../current/api/method/setevent.md | 4 +- .../current/api/method/setlightboxsize.md | 2 +- .../current/api/method/setloadmode.md | 2 +- .../current/api/method/setuserdata.md | 6 +- .../current/api/method/showevent.md | 6 +- .../current/api/method/showlightbox.md | 6 +- .../current/api/method/showquickinfo.md | 6 +- .../current/api/method/toical.md | 4 +- .../current/api/method/tojson.md | 2 +- .../current/api/method/topdfrange.md | 4 +- .../current/api/method/toxml.md | 2 +- .../current/api/method/uid.md | 2 +- .../current/api/method/unblocktime.md | 6 +- .../current/api/method/unmarkcalendar.md | 8 +- .../current/api/method/unmarktimespan.md | 2 +- .../current/api/method/unselect.md | 6 +- .../current/api/method/updatecalendar.md | 4 +- .../current/api/method/updatecollection.md | 2 +- .../current/api/method/updateevent.md | 6 +- .../current/api/method/updateview.md | 32 +- .../current/api/other/ajax.md | 8 +- .../current/api/other/config.md | 2 +- .../current/api/other/date.md | 52 +- .../current/api/other/ical.md | 12 +- .../current/api/other/json.md | 2 +- .../current/api/other/matrix.md | 2 +- .../current/api/other/skin.md | 2 +- .../current/api/other/tooltip.md | 2 +- .../current/api/other/version.md | 2 +- .../current/api/template/day_date.md | 2 +- .../current/api/template/event_bar_text.md | 26 +- .../current/api/template/event_class.md | 31 +- .../current/api/template/event_date.md | 2 +- .../current/api/template/event_text.md | 33 +- .../current/api/template/format_date.md | 2 +- .../current/api/template/load_format.md | 2 +- .../current/api/template/month_date.md | 2 +- .../current/api/template/month_day.md | 2 +- .../current/api/template/parse_date.md | 4 +- .../api/template/timelinename_scale_date.md | 4 +- .../timelinename_second_scale_date.md | 4 +- .../api/template/tooltip_date_format.md | 2 +- .../api/template/week_agenda_scale_date.md | 2 +- .../current/api/template/week_scale_date.md | 2 +- .../current/api/template/xml_date.md | 8 +- .../current/api/template/xml_format.md | 4 +- .../current/api/template/year_date.md | 2 +- .../current/export/excel.md | 131 +++ .../current/export/index.md | 12 + .../current/export/pdf-legacy.md | 210 +++++ .../current/export/pdf-multi.md | 42 + .../current/export/pdf.md | 202 +++++ .../current/export/png.md | 179 ++++ .../current/export/serialization.md | 181 ++++ .../current/guides/backbone-integration.md | 52 -- .../current/guides/collisions.md | 110 +-- .../current/guides/combo.md | 106 +-- .../current/guides/custom-details-form.md | 57 +- .../current/guides/custom-events-color.md | 219 +++-- .../current/guides/custom-events-display.md | 82 +- .../current/guides/custom-lightbox-editor.md | 46 +- .../current/guides/custom-skins.md | 155 ++-- .../guides/customizing-edit-select-bars.md | 68 +- .../current/guides/data-export.md | 12 - .../current/guides/data-formats.md | 125 +-- .../current/guides/datastore-integration.md | 73 -- .../current/guides/date-formats.md | 56 +- .../guides/dhtmlx-components-integration.md | 129 --- .../current/guides/dhxlayout-integration.md | 84 -- .../current/guides/drag-between.md | 70 ++ .../current/guides/event-object-operations.md | 89 +- .../current/guides/excel.md | 130 --- .../current/guides/export.md | 175 ---- .../current/guides/extensions-list.md | 403 ++++----- .../current/guides/filtering.md | 39 +- .../current/guides/guides.md | 77 -- .../current/guides/how-to-start.md | 242 ------ .../current/guides/ical-export-import.md | 87 +- .../current/guides/initialization.md | 184 ++-- .../guides/integration-with-bootstrap.md | 48 -- .../guides/integration-with-dhtmlxmessage.md | 364 -------- .../current/guides/jquery-integration.md | 35 - .../current/guides/keyboard-navigation.md | 151 ++-- .../guides/lightbox-editors-manipulations.md | 238 +++-- .../current/guides/limits.md | 106 +-- .../current/guides/live-update.md | 79 +- .../current/guides/loading-data.md | 388 +++++---- .../current/guides/localization.md | 174 ++-- .../current/guides/minicalendar.md | 220 ++--- .../current/guides/multiple-per-page.md | 160 ++-- .../current/guides/multiselect.md | 79 +- .../current/guides/multiuser-live-updates.md | 133 +-- .../current/guides/pdf-legacy.md | 184 ---- .../current/guides/pdf-multi.md | 36 - .../current/guides/pdf.md | 190 ---- .../current/guides/png.md | 184 ---- .../current/guides/popups-and-modals.md | 368 ++++++++ .../current/guides/quick-info.md | 34 +- .../current/guides/radio.md | 118 ++- .../current/guides/readonly.md | 62 +- .../current/guides/recurring-events-legacy.md | 297 +++---- .../current/guides/recurring-events.md | 604 +++++++------ .../current/guides/rtl-mode.md | 50 +- .../current/guides/scheduler-3.0.md | 54 -- .../current/guides/scheduler-integrations.md | 11 - .../current/guides/scheduler-markup.md | 101 ++- .../current/guides/scheduler-typescript.md | 28 - .../current/guides/select.md | 82 +- .../current/guides/sizing-legacy.md | 94 +- .../current/guides/sizing.md | 63 +- .../current/guides/template.md | 23 +- .../current/guides/templates.md | 66 +- .../current/guides/tooltips-legacy.md | 47 +- .../current/guides/tooltips.md | 157 ++-- .../current/guides/views.md | 36 - .../current/integrations/ai-tools/index.md | 16 + .../integrations/ai-tools/mcp-server.md | 137 +++ .../firebase/howtostart-firebase.md | 280 ++++++ .../google-calendar/google-calendar-sync.md | 488 +++++++---- .../legacy/backbone-integration.md | 57 ++ .../current/integrations/legacy/dhtmlx-dnd.md | 65 ++ .../current/integrations/other/bootstrap.md | 47 + .../other/dhxlayout-integration.md | 92 ++ .../integrations/other/jquery-integration.md | 35 + .../integrations/react/configuration-props.md | 213 +++++ .../current/integrations/react/copyright.md | 114 +++ .../react/firebase-integration.md | 210 +++++ .../current/integrations/react/index.md | 45 + .../integrations/react/installation.md | 77 ++ .../integrations/react/js-scheduler-react.md | 126 ++- .../current/integrations/react/nextjs.md | 264 ++++++ .../current/integrations/react/overview.md | 486 +++++++++++ .../current/integrations/react/quick-start.md | 203 +++++ .../current/integrations/react/remix.md | 270 ++++++ .../current/integrations/react/state/index.md | 40 + .../current/integrations/react/state/jotai.md | 597 +++++++++++++ .../current/integrations/react/state/mobx.md | 623 ++++++++++++++ .../integrations/react/state/redux-toolkit.md | 590 +++++++++++++ .../react/state/state-management-basics.md | 301 +++++++ .../integrations/react/state/valtio.md | 574 +++++++++++++ .../integrations/react/state/xstate.md | 555 ++++++++++++ .../integrations/react/state/zustand.md | 503 +++++++++++ .../salesforce/howtostart-salesforce.md | 177 ++-- .../current/views/agenda-legacy.md | 8 +- .../current/views/agenda.md | 4 +- .../current/views/day.md | 2 +- .../current/views/grid.md | 8 +- .../current/views/map.md | 8 +- .../current/views/month.md | 12 +- .../current/views/timeline.md | 38 +- .../current/views/units.md | 16 +- .../current/views/week.md | 2 +- .../current/whats-new.md | 109 ++- .../current/api/api_overview.md | 30 +- .../current/api/config/active_link_view.md | 22 +- .../current/api/config/agenda_end.md | 16 +- .../current/api/config/agenda_start.md | 22 +- .../current/api/config/ajax_error.md | 14 +- .../current/api/config/all_timed.md | 37 +- .../current/api/config/api_date.md | 17 +- .../current/api/config/auto_end_date.md | 23 +- .../current/api/config/buttons_left.md | 14 +- .../current/api/config/buttons_right.md | 14 +- .../current/api/config/cascade_event_count.md | 16 +- .../api/config/cascade_event_display.md | 27 +- .../api/config/cascade_event_margin.md | 18 +- .../current/api/config/check_limits.md | 16 +- .../current/api/config/collision_limit.md | 16 +- .../api/config/container_autoresize.md | 18 +- .../current/api/config/csp.md | 32 +- .../current/api/config/date_format.md | 22 +- .../current/api/config/day_column_padding.md | 22 +- .../current/api/config/day_date.md | 22 +- .../current/api/config/dblclick_create.md | 14 +- .../current/api/config/default_date.md | 14 +- .../current/api/config/delay_render.md | 28 +- .../current/api/config/details_on_create.md | 20 +- .../current/api/config/details_on_dblclick.md | 16 +- .../api/config/display_marked_timespans.md | 18 +- .../api/config/displayed_event_color.md | 16 +- .../api/config/displayed_event_text_color.md | 16 +- .../current/api/config/drag_create.md | 18 +- .../current/api/config/drag_event_body.md | 14 +- .../current/api/config/drag_highlight.md | 14 +- .../current/api/config/drag_in.md | 22 +- .../current/api/config/drag_lightbox.md | 16 +- .../current/api/config/drag_move.md | 16 +- .../current/api/config/drag_out.md | 30 +- .../current/api/config/drag_resize.md | 12 +- .../current/api/config/edit_on_create.md | 12 +- .../current/api/config/event_attribute.md | 12 +- .../current/api/config/event_duration.md | 22 +- .../current/api/config/first_hour.md | 22 +- .../current/api/config/fix_tab_position.md | 20 +- .../current/api/config/full_day.md | 14 +- .../current/api/config/header.md | 58 +- .../api/config/highlight_displayed_event.md | 16 +- .../current/api/config/hour_date.md | 20 +- .../current/api/config/hour_size_px.md | 20 +- .../current/api/config/icons_edit.md | 14 +- .../current/api/config/icons_select.md | 18 +- .../current/api/config/include_end_by.md | 42 +- .../current/api/config/key_nav.md | 14 +- .../current/api/config/key_nav_step.md | 12 +- .../current/api/config/last_hour.md | 20 +- .../current/api/config/left_border.md | 16 +- .../current/api/config/lightbox.md | 46 +- .../current/api/config/lightbox_recurring.md | 17 +- .../current/api/config/limit_drag_out.md | 12 +- .../current/api/config/limit_end.md | 24 +- .../current/api/config/limit_start.md | 24 +- .../current/api/config/limit_time_select.md | 14 +- .../current/api/config/limit_view.md | 24 +- .../current/api/config/load_date.md | 12 +- .../current/api/config/map_end.md | 24 +- .../current/api/config/map_error_position.md | 28 +- .../api/config/map_infowindow_max_width.md | 16 +- .../api/config/map_initial_position.md | 26 +- .../current/api/config/map_initial_zoom.md | 20 +- .../api/config/map_resolve_event_location.md | 20 +- .../api/config/map_resolve_user_location.md | 16 +- .../current/api/config/map_settings.md | 32 +- .../current/api/config/map_start.md | 22 +- .../current/api/config/map_type.md | 22 +- .../current/api/config/map_view_provider.md | 24 +- .../api/config/map_zoom_after_resolve.md | 18 +- .../current/api/config/mark_now.md | 22 +- .../current/api/config/max_month_events.md | 18 +- .../current/api/config/min_grid_size.md | 20 +- .../current/api/config/min_map_size.md | 16 +- .../current/api/config/minicalendar.md | 30 +- .../current/api/config/month_date.md | 16 +- .../current/api/config/month_day.md | 14 +- .../api/config/month_day_min_height.md | 18 +- .../current/api/config/multi_day.md | 16 +- .../api/config/multi_day_height_limit.md | 16 +- .../current/api/config/multisection.md | 20 +- .../api/config/multisection_shift_all.md | 22 +- .../current/api/config/now_date.md | 20 +- .../api/config/occurrence_timestamp_in_utc.md | 20 +- .../api/config/overwrite_marked_timespans.md | 22 +- .../current/api/config/parse_exact_format.md | 40 +- .../current/api/config/positive_closing.md | 17 +- .../current/api/config/preserve_length.md | 16 +- .../current/api/config/preserve_scroll.md | 18 +- .../current/api/config/prevent_cache.md | 16 +- .../current/api/config/quick_info_detached.md | 22 +- .../current/api/config/readonly.md | 10 +- .../current/api/config/readonly_form.md | 24 +- .../config/recurring_overflow_instances.md | 30 +- .../current/api/config/recurring_workdays.md | 16 +- .../current/api/config/repeat_date.md | 18 +- .../current/api/config/repeat_precise.md | 25 +- .../current/api/config/resize_month_events.md | 18 +- .../current/api/config/resize_month_timed.md | 20 +- .../current/api/config/responsive_lightbox.md | 22 +- .../current/api/config/rtl.md | 16 +- .../current/api/config/scroll_hour.md | 14 +- .../current/api/config/section_delimiter.md | 14 +- .../current/api/config/select.md | 14 +- .../api/config/separate_short_events.md | 16 +- .../current/api/config/server_utc.md | 12 +- .../current/api/config/show_errors.md | 12 +- .../current/api/config/show_loading.md | 14 +- .../current/api/config/show_quick_info.md | 12 +- .../current/api/config/start_on_monday.md | 16 +- .../current/api/config/time_step.md | 18 +- .../api/config/timeline_swap_resize.md | 18 +- .../api/config/tooltip_hide_timeout.md | 14 +- .../current/api/config/tooltip_offset_x.md | 16 +- .../current/api/config/tooltip_offset_y.md | 16 +- .../current/api/config/tooltip_timeout.md | 18 +- .../current/api/config/touch.md | 24 +- .../current/api/config/touch_drag.md | 16 +- .../current/api/config/touch_swipe_dates.md | 12 +- .../current/api/config/touch_tip.md | 14 +- .../current/api/config/touch_tooltip.md | 12 +- .../current/api/config/undo_deleted.md | 14 +- .../current/api/config/update_render.md | 21 +- .../api/config/use_select_menu_space.md | 18 +- .../api/config/wai_aria_application_role.md | 16 +- .../current/api/config/wai_aria_attributes.md | 14 +- .../current/api/config/week_agenda_select.md | 24 +- .../current/api/config/week_date.md | 16 +- .../current/api/config/wide_form.md | 22 +- .../current/api/config/xml_date.md | 30 +- .../current/api/config/year_x.md | 18 +- .../current/api/config/year_y.md | 20 +- .../current/api/event/onafterbatchupdate.md | 8 +- .../current/api/event/onaftereventdisplay.md | 12 +- .../current/api/event/onafterfoldertoggle.md | 16 +- .../current/api/event/onafterlightbox.md | 8 +- .../current/api/event/onafterquickinfo.md | 20 +- .../api/event/onafterschedulerresize.md | 12 +- .../current/api/event/onbeforebatchupdate.md | 12 +- .../current/api/event/onbeforecollapse.md | 14 +- .../current/api/event/onbeforedrag.md | 20 +- .../current/api/event/onbeforeeventchanged.md | 25 +- .../current/api/event/onbeforeeventcreated.md | 16 +- .../current/api/event/onbeforeeventdelete.md | 16 +- .../current/api/event/onbeforeeventdisplay.md | 16 +- .../current/api/event/onbeforeeventdragin.md | 18 +- .../current/api/event/onbeforeeventdragout.md | 22 +- .../current/api/event/onbeforeeventpasted.md | 18 +- .../current/api/event/onbeforeexpand.md | 14 +- .../api/event/onbeforeexternaldragin.md | 26 +- .../current/api/event/onbeforefoldertoggle.md | 24 +- .../current/api/event/onbeforelightbox.md | 8 +- .../current/api/event/onbeforeparse.md | 12 +- .../current/api/event/onbeforequickinfo.md | 12 +- .../api/event/onbeforesectionrender.md | 24 +- .../api/event/onbeforetodaydisplayed.md | 14 +- .../current/api/event/onbeforetooltip.md | 18 +- .../current/api/event/onbeforeviewchange.md | 28 +- .../current/api/event/oncellclick.md | 24 +- .../current/api/event/oncelldblclick.md | 30 +- .../current/api/event/onclearall.md | 12 +- .../current/api/event/onclick.md | 32 +- .../current/api/event/oncollapse.md | 16 +- .../api/event/onconfirmedbeforeeventdelete.md | 12 +- .../current/api/event/oncontextmenu.md | 18 +- .../current/api/event/ondatarender.md | 10 +- .../current/api/event/ondblclick.md | 16 +- .../current/api/event/ondestroy.md | 10 +- .../current/api/event/ondragend.md | 16 +- .../current/api/event/onemptyclick.md | 14 +- .../current/api/event/onerror.md | 18 +- .../current/api/event/oneventadded.md | 16 +- .../current/api/event/oneventcancel.md | 12 +- .../current/api/event/oneventchanged.md | 16 +- .../current/api/event/oneventcollision.md | 16 +- .../current/api/event/oneventcopied.md | 18 +- .../current/api/event/oneventcreated.md | 16 +- .../current/api/event/oneventcut.md | 21 +- .../current/api/event/oneventdeleted.md | 16 +- .../current/api/event/oneventdrag.md | 22 +- .../current/api/event/oneventdragin.md | 12 +- .../current/api/event/oneventdragout.md | 16 +- .../current/api/event/oneventdropout.md | 20 +- .../current/api/event/oneventidchange.md | 16 +- .../current/api/event/oneventloading.md | 18 +- .../current/api/event/oneventpasted.md | 24 +- .../current/api/event/oneventsave.md | 20 +- .../current/api/event/oneventselected.md | 10 +- .../current/api/event/oneventunselected.md | 14 +- .../current/api/event/onexpand.md | 17 +- .../current/api/event/onexternaldragin.md | 26 +- .../current/api/event/onlightbox.md | 12 +- .../current/api/event/onlightboxbutton.md | 22 +- .../current/api/event/onlimitviolation.md | 20 +- .../current/api/event/onloadend.md | 12 +- .../current/api/event/onloaderror.md | 16 +- .../current/api/event/onloadstart.md | 24 +- .../current/api/event/onlocationerror.md | 33 +- .../current/api/event/onmousedown.md | 34 +- .../current/api/event/onmousemove.md | 16 +- .../current/api/event/onoptionsload.md | 26 +- .../current/api/event/onoptionsloadfinal.md | 8 +- .../current/api/event/onoptionsloadstart.md | 14 +- .../current/api/event/onparse.md | 10 +- .../current/api/event/onquickinfo.md | 20 +- .../current/api/event/onsaveerror.md | 16 +- .../current/api/event/onscaleadd.md | 22 +- .../current/api/event/onscaledblclick.md | 12 +- .../current/api/event/onschedulerready.md | 12 +- .../current/api/event/onschedulerresize.md | 12 +- .../current/api/event/ontemplatesready.md | 14 +- .../current/api/event/ontimelinecreated.md | 12 +- .../current/api/event/onviewchange.md | 20 +- .../current/api/event/onviewmoreclick.md | 18 +- .../current/api/event/onxle.md | 20 +- .../current/api/event/onxls.md | 20 +- .../current/api/event/onxscaleclick.md | 18 +- .../current/api/event/onxscaledblclick.md | 16 +- .../current/api/event/onyscaleclick.md | 18 +- .../current/api/event/onyscaledblclick.md | 16 +- .../current/api/method/addevent.md | 40 +- .../current/api/method/addeventnow.md | 33 +- .../current/api/method/addmarkedtimespan.md | 109 ++- .../current/api/method/addsection.md | 30 +- .../current/api/method/addshortcut.md | 21 +- .../current/api/method/alert.md | 20 +- .../current/api/method/assert.md | 14 +- .../current/api/method/attachevent.md | 63 +- .../current/api/method/backbone.md | 16 +- .../current/api/method/batchupdate.md | 18 +- .../current/api/method/bind.md | 18 +- .../current/api/method/blocktime.md | 135 +-- .../current/api/method/callevent.md | 18 +- .../current/api/method/changeeventid.md | 28 +- .../current/api/method/checkcollision.md | 20 +- .../current/api/method/checkevent.md | 12 +- .../api/method/checkinmarkedtimespan.md | 30 +- .../current/api/method/checklimitviolation.md | 20 +- .../current/api/method/clearall.md | 4 +- .../current/api/method/closeallsections.md | 16 +- .../current/api/method/closesection.md | 14 +- .../current/api/method/collapse.md | 12 +- .../current/api/method/confirm.md | 16 +- .../current/api/method/copy.md | 18 +- .../current/api/method/createdataprocessor.md | 38 +- .../current/api/method/creategridview.md | 45 +- .../current/api/method/createtimelineview.md | 142 ++- .../current/api/method/createunitsview.md | 34 +- .../current/api/method/dataprocessor.md | 14 +- .../current/api/method/defined.md | 12 +- .../current/api/method/deleteallsections.md | 20 +- .../current/api/method/deleteevent.md | 20 +- .../api/method/deletemarkedtimespan.md | 31 +- .../current/api/method/deletesection.md | 20 +- .../current/api/method/destroycalendar.md | 20 +- .../current/api/method/destructor.md | 6 +- .../current/api/method/detachevent.md | 16 +- .../current/api/method/edit.md | 18 +- .../current/api/method/editstop.md | 18 +- .../current/api/method/endlightbox.md | 18 +- .../current/api/method/event.md | 18 +- .../current/api/method/eventremove.md | 14 +- .../current/api/method/expand.md | 14 +- .../current/api/method/exporttopdf.md | 41 +- .../current/api/method/exporttopng.md | 28 +- .../current/api/method/focus.md | 14 +- .../current/api/method/formsection.md | 48 +- .../current/api/method/getactiondata.md | 20 +- .../current/api/method/getevent.md | 18 +- .../current/api/method/geteventenddate.md | 20 +- .../current/api/method/getevents.md | 30 +- .../current/api/method/geteventstartdate.md | 22 +- .../current/api/method/geteventtext.md | 24 +- .../current/api/method/getlabel.md | 28 +- .../current/api/method/getlightbox.md | 12 +- .../current/api/method/getrecdates.md | 32 +- .../current/api/method/getrenderedevent.md | 22 +- .../current/api/method/getsection.md | 20 +- .../current/api/method/getshortcuthandler.md | 22 +- .../current/api/method/getstate.md | 44 +- .../current/api/method/getuserdata.md | 22 +- .../current/api/method/getview.md | 20 +- .../current/api/method/hidecover.md | 6 +- .../current/api/method/hidelightbox.md | 10 +- .../current/api/method/hidequickinfo.md | 14 +- .../api/method/highlighteventposition.md | 10 +- .../current/api/method/init.md | 22 +- .../current/api/method/invertzones.md | 20 +- .../current/api/method/iscalendarvisible.md | 20 +- .../current/api/method/isonedayevent.md | 18 +- .../current/api/method/isviewexists.md | 14 +- .../current/api/method/linkcalendar.md | 20 +- .../current/api/method/load.md | 44 +- .../current/api/method/markcalendar.md | 26 +- .../current/api/method/marktimespan.md | 18 +- .../current/api/method/message.md | 21 +- .../current/api/method/mixin.md | 14 +- .../current/api/method/modalbox.md | 20 +- .../current/api/method/openallsections.md | 15 +- .../current/api/method/opensection.md | 14 +- .../current/api/method/parse.md | 30 +- .../current/api/method/plugins.md | 8 +- .../current/api/method/promise.md | 20 +- .../current/api/method/removeshortcut.md | 24 +- .../current/api/method/render.md | 24 +- .../current/api/method/rendercalendar.md | 30 +- .../current/api/method/renderevent.md | 24 +- .../current/api/method/resetlightbox.md | 24 +- .../current/api/method/scrollunit.md | 18 +- .../current/api/method/select.md | 18 +- .../current/api/method/serialize.md | 34 +- .../current/api/method/serverlist.md | 24 +- .../current/api/method/setcurrentview.md | 34 +- .../current/api/method/setevent.md | 22 +- .../current/api/method/seteventenddate.md | 30 +- .../current/api/method/seteventstartdate.md | 24 +- .../current/api/method/seteventtext.md | 24 +- .../current/api/method/setlightboxsize.md | 10 +- .../current/api/method/setloadmode.md | 35 +- .../current/api/method/setskin.md | 18 +- .../current/api/method/setuserdata.md | 24 +- .../current/api/method/showcover.md | 17 +- .../current/api/method/showevent.md | 20 +- .../current/api/method/showlightbox.md | 22 +- .../current/api/method/showquickinfo.md | 22 +- .../current/api/method/startlightbox.md | 18 +- .../current/api/method/toical.md | 19 +- .../current/api/method/tojson.md | 22 +- .../current/api/method/topdf.md | 34 +- .../current/api/method/topdfrange.md | 36 +- .../current/api/method/toxml.md | 16 +- .../current/api/method/uid.md | 14 +- .../current/api/method/unblocktime.md | 28 +- .../current/api/method/unmarkcalendar.md | 24 +- .../current/api/method/unmarktimespan.md | 20 +- .../current/api/method/unselect.md | 17 +- .../current/api/method/updatecalendar.md | 16 +- .../current/api/method/updatecollection.md | 22 +- .../current/api/method/updateevent.md | 20 +- .../current/api/method/updateview.md | 30 +- .../current/api/other/ajax.md | 12 +- .../current/api/other/config.md | 2 +- .../current/api/other/date.md | 139 ++- .../current/api/other/ical.md | 12 +- .../current/api/other/json.md | 2 +- .../current/api/other/matrix.md | 5 +- .../current/api/other/skin.md | 2 +- .../current/api/other/templates.md | 2 +- .../current/api/other/tooltip.md | 6 +- .../current/api/other/version.md | 2 +- .../current/api/template/agenda_date.md | 4 +- .../current/api/template/agenda_text.md | 2 +- .../current/api/template/agenda_time.md | 2 +- .../current/api/template/day_date.md | 4 +- .../current/api/template/day_scale_date.md | 2 +- .../current/api/template/drag_marker_class.md | 2 +- .../current/api/template/event_bar_text.md | 26 +- .../current/api/template/event_class.md | 34 +- .../current/api/template/event_date.md | 2 +- .../current/api/template/event_header.md | 2 +- .../current/api/template/event_text.md | 29 +- .../current/api/template/format_date.md | 2 +- .../current/api/template/gridname_date.md | 4 +- .../current/api/template/gridname_field.md | 2 +- .../api/template/gridname_full_date.md | 2 +- .../api/template/gridname_single_date.md | 2 +- .../current/api/template/hour_scale.md | 2 +- .../current/api/template/load_format.md | 2 +- .../current/api/template/map_date.md | 4 +- .../current/api/template/map_text.md | 2 +- .../current/api/template/map_time.md | 2 +- .../current/api/template/marker_date.md | 2 +- .../current/api/template/marker_text.md | 2 +- .../current/api/template/month_date.md | 4 +- .../current/api/template/month_date_class.md | 2 +- .../current/api/template/month_day.md | 4 +- .../current/api/template/month_events_link.md | 2 +- .../current/api/template/month_scale_date.md | 2 +- .../current/api/template/parse_date.md | 4 +- .../api/template/quick_info_content.md | 2 +- .../api/template/timelinename_cell_class.md | 2 +- .../api/template/timelinename_cell_value.md | 2 +- .../current/api/template/timelinename_date.md | 2 +- .../api/template/timelinename_row_class.md | 2 +- .../api/template/timelinename_scale_date.md | 6 +- .../api/template/timelinename_scale_label.md | 4 +- .../api/template/timelinename_scalex_class.md | 2 +- .../api/template/timelinename_scaley_class.md | 2 +- .../timelinename_second_scale_date.md | 2 +- .../timelinename_second_scalex_class.md | 2 +- .../api/template/timelinename_tooltip.md | 2 +- .../api/template/tooltip_date_format.md | 2 +- .../current/api/template/tooltip_text.md | 2 +- .../current/api/template/unitsname_date.md | 4 +- .../api/template/unitsname_scale_text.md | 2 +- .../current/api/template/week_agenda_date.md | 2 +- .../api/template/week_agenda_event_text.md | 2 +- .../api/template/week_agenda_scale_date.md | 4 +- .../current/api/template/week_date.md | 2 +- .../current/api/template/week_date_class.md | 2 +- .../current/api/template/week_scale_date.md | 4 +- .../current/api/template/xml_date.md | 10 +- .../current/api/template/xml_format.md | 8 +- .../current/api/template/year_date.md | 4 +- .../current/api/template/year_month.md | 2 +- .../current/api/template/year_scale_date.md | 2 +- .../current/api/template/year_tooltip.md | 2 +- .../current/export/excel.md | 6 +- .../current/export/pdf-multi.md | 6 +- .../current/export/pdf.md | 143 ++-- .../current/export/serialization.md | 10 +- .../current/guides/backbone-integration.md | 52 -- .../current/guides/collisions.md | 101 ++- .../current/guides/combo.md | 120 ++- .../current/guides/custom-details-form.md | 53 +- .../current/guides/custom-events-color.md | 209 +++-- .../current/guides/custom-events-display.md | 74 +- .../current/guides/custom-lightbox-editor.md | 42 +- .../current/guides/custom-skins.md | 150 ++-- .../guides/customizing-edit-select-bars.md | 70 +- .../current/guides/data-export.md | 12 - .../current/guides/data-formats.md | 95 +- .../current/guides/datastore-integration.md | 73 -- .../current/guides/date-formats.md | 45 +- .../guides/dhtmlx-components-integration.md | 129 --- .../current/guides/dhxlayout-integration.md | 84 -- .../current/guides/drag-between.md | 67 ++ .../current/guides/event-object-operations.md | 86 +- .../current/guides/extensions-list.md | 435 ++++------ .../current/guides/filtering.md | 40 +- .../current/guides/guides.md | 77 -- .../current/guides/how-to-start.md | 240 ------ .../current/guides/howtostart_dotnet.md | 810 ------------------ .../current/guides/ical-export-import.md | 75 +- .../current/guides/index.md | 156 ++++ .../current/guides/initialization.md | 164 ++-- .../guides/integration-with-bootstrap.md | 48 -- .../guides/integration-with-dhtmlxmessage.md | 369 -------- .../current/guides/keyboard-navigation.md | 145 ++-- .../guides/lightbox-editors-manipulations.md | 240 +++--- .../current/guides/limits.md | 91 +- .../current/guides/live-update.md | 70 +- .../current/guides/loading-data.md | 389 +++++---- .../current/guides/localization.md | 117 ++- .../current/guides/minicalendar.md | 210 ++--- .../current/guides/multiple-per-page.md | 156 ++-- .../current/guides/multiselect.md | 89 +- .../current/guides/multiuser-live-updates.md | 117 +-- .../current/guides/popups-and-modals.md | 377 ++++++++ .../current/guides/quick-info.md | 26 +- .../current/guides/radio.md | 115 ++- .../current/guides/readonly.md | 56 +- .../current/guides/recurring-events-legacy.md | 336 ++++---- .../current/guides/recurring-events.md | 620 ++++++++------ .../current/guides/rtl-mode.md | 46 +- .../current/guides/scheduler-3.0.md | 52 -- .../current/guides/scheduler-integrations.md | 12 - .../current/guides/scheduler-markup.md | 101 +-- .../current/guides/scheduler-typescript.md | 28 - .../current/guides/select.md | 69 +- .../current/guides/sizing-legacy.md | 76 +- .../current/guides/sizing.md | 50 +- .../current/guides/template.md | 29 +- .../current/guides/templates.md | 63 +- .../current/guides/tooltips-legacy.md | 43 +- .../current/guides/tooltips.md | 136 +-- .../current/guides/views.md | 38 - .../current/integrations/ai-tools/index.md | 16 + .../integrations/ai-tools/mcp-server.md | 137 +++ .../angular/howtostart-angular.md | 10 +- .../integrations/dotnet/howtostart-dotnet.md | 14 +- .../firebase/howtostart-firebase.md | 281 ++++++ .../google-calendar/google-calendar-sync.md | 466 ++++++---- .../legacy/backbone-integration.md | 55 ++ .../current/integrations/legacy/dhtmlx-dnd.md | 72 ++ .../current/integrations/other/bootstrap.md | 48 ++ .../other/dhxlayout-integration.md | 90 ++ .../other}/jquery-integration.md | 0 .../integrations/react/configuration-props.md | 213 +++++ .../current/integrations/react/copyright.md | 156 ++++ .../react/firebase-integration.md | 210 +++++ .../current/integrations/react/index.md | 45 + .../integrations/react/installation.md | 77 ++ .../integrations/react/js-scheduler-react.md | 90 +- .../current/integrations/react/nextjs.md | 264 ++++++ .../current/integrations/react/overview.md | 486 +++++++++++ .../current/integrations/react/quick-start.md | 317 +++++++ .../current/integrations/react/remix.md | 271 ++++++ .../current/integrations/react/state/index.md | 40 + .../current/integrations/react/state/jotai.md | 597 +++++++++++++ .../current/integrations/react/state/mobx.md | 625 ++++++++++++++ .../integrations/react/state/redux-toolkit.md | 590 +++++++++++++ .../react/state/state-management-basics.md | 301 +++++++ .../integrations/react/state/valtio.md | 587 +++++++++++++ .../integrations/react/state/xstate.md | 549 ++++++++++++ .../integrations/react/state/zustand.md | 503 +++++++++++ .../salesforce/howtostart-salesforce.md | 129 +-- .../current/views/agenda-legacy.md | 8 +- .../current/views/agenda.md | 4 +- .../current/views/day.md | 2 +- .../current/views/grid.md | 4 +- .../current/views/map.md | 10 +- .../current/views/month.md | 8 +- .../current/views/timeline.md | 38 +- .../current/views/units.md | 16 +- .../current/views/week.md | 2 +- .../current/whats-new.md | 99 ++- .../current/api/api_overview.md | 30 +- .../current/api/config/active_link_view.md | 2 +- .../current/api/config/agenda_end.md | 6 +- .../current/api/config/agenda_start.md | 6 +- .../current/api/config/api_date.md | 2 +- .../current/api/config/auto_end_date.md | 2 +- .../current/api/config/buttons_left.md | 2 +- .../current/api/config/buttons_right.md | 4 +- .../api/config/cascade_event_display.md | 2 +- .../api/config/cascade_event_margin.md | 2 +- .../current/api/config/check_limits.md | 2 +- .../current/api/config/collision_limit.md | 2 +- .../api/config/container_autoresize.md | 2 +- .../current/api/config/csp.md | 2 +- .../current/api/config/date_format.md | 2 +- .../current/api/config/day_column_padding.md | 2 +- .../current/api/config/day_date.md | 4 +- .../current/api/config/dblclick_create.md | 2 +- .../current/api/config/default_date.md | 2 +- .../current/api/config/details_on_create.md | 2 +- .../current/api/config/details_on_dblclick.md | 2 +- .../api/config/display_marked_timespans.md | 2 +- .../api/config/displayed_event_color.md | 2 +- .../api/config/displayed_event_text_color.md | 2 +- .../current/api/config/drag_create.md | 2 +- .../current/api/config/drag_highlight.md | 2 +- .../current/api/config/drag_in.md | 4 +- .../current/api/config/drag_lightbox.md | 2 +- .../current/api/config/drag_move.md | 5 +- .../current/api/config/drag_out.md | 4 +- .../current/api/config/drag_resize.md | 2 +- .../current/api/config/edit_on_create.md | 2 +- .../current/api/config/event_attribute.md | 2 +- .../current/api/config/event_duration.md | 2 +- .../current/api/config/first_hour.md | 2 +- .../current/api/config/fix_tab_position.md | 2 +- .../current/api/config/full_day.md | 4 +- .../current/api/config/header.md | 64 +- .../api/config/highlight_displayed_event.md | 2 +- .../current/api/config/hour_date.md | 2 +- .../current/api/config/hour_size_px.md | 2 +- .../current/api/config/icons_edit.md | 2 +- .../current/api/config/icons_select.md | 2 +- .../current/api/config/include_end_by.md | 16 +- .../current/api/config/last_hour.md | 2 +- .../current/api/config/left_border.md | 2 +- .../current/api/config/lightbox.md | 62 +- .../current/api/config/lightbox_recurring.md | 2 +- .../current/api/config/limit_end.md | 10 +- .../current/api/config/limit_start.md | 10 +- .../current/api/config/limit_time_select.md | 2 +- .../current/api/config/limit_view.md | 8 +- .../current/api/config/load_date.md | 2 +- .../current/api/config/map_end.md | 6 +- .../current/api/config/map_error_position.md | 2 +- .../api/config/map_infowindow_max_width.md | 2 +- .../api/config/map_initial_position.md | 2 +- .../current/api/config/map_initial_zoom.md | 2 +- .../api/config/map_resolve_event_location.md | 2 +- .../api/config/map_resolve_user_location.md | 2 +- .../current/api/config/map_settings.md | 2 +- .../current/api/config/map_start.md | 6 +- .../current/api/config/map_type.md | 2 +- .../current/api/config/map_view_provider.md | 2 +- .../api/config/map_zoom_after_resolve.md | 2 +- .../current/api/config/mark_now.md | 2 +- .../current/api/config/max_month_events.md | 2 +- .../current/api/config/minicalendar.md | 2 +- .../current/api/config/month_date.md | 2 +- .../current/api/config/month_day.md | 2 +- .../api/config/month_day_min_height.md | 2 +- .../current/api/config/multi_day.md | 2 +- .../api/config/multi_day_height_limit.md | 2 +- .../current/api/config/multisection.md | 2 +- .../api/config/multisection_shift_all.md | 2 +- .../current/api/config/now_date.md | 4 +- .../api/config/occurrence_timestamp_in_utc.md | 2 +- .../api/config/overwrite_marked_timespans.md | 2 +- .../current/api/config/parse_exact_format.md | 28 +- .../current/api/config/positive_closing.md | 2 +- .../current/api/config/preserve_scroll.md | 2 +- .../current/api/config/prevent_cache.md | 2 +- .../current/api/config/quick_info_detached.md | 2 +- .../current/api/config/readonly.md | 2 +- .../current/api/config/readonly_form.md | 2 +- .../current/api/config/repeat_date.md | 2 +- .../current/api/config/resize_month_events.md | 2 +- .../current/api/config/resize_month_timed.md | 2 +- .../current/api/config/rtl.md | 2 +- .../current/api/config/select.md | 2 +- .../api/config/separate_short_events.md | 2 +- .../current/api/config/server_utc.md | 2 +- .../current/api/config/show_errors.md | 2 +- .../current/api/config/show_loading.md | 2 +- .../current/api/config/start_on_monday.md | 2 +- .../current/api/config/time_step.md | 2 +- .../api/config/tooltip_hide_timeout.md | 2 +- .../current/api/config/tooltip_offset_x.md | 2 +- .../current/api/config/tooltip_offset_y.md | 2 +- .../current/api/config/tooltip_timeout.md | 2 +- .../current/api/config/touch.md | 2 +- .../current/api/config/touch_drag.md | 2 +- .../current/api/config/touch_tip.md | 2 +- .../current/api/config/undo_deleted.md | 2 +- .../current/api/config/update_render.md | 2 +- .../api/config/use_select_menu_space.md | 2 +- .../current/api/config/week_agenda_select.md | 2 +- .../current/api/config/week_date.md | 2 +- .../current/api/config/wide_form.md | 2 +- .../current/api/config/year_x.md | 2 +- .../current/api/config/year_y.md | 2 +- .../current/api/event/onbeforedrag.md | 28 +- .../current/api/event/onbeforeeventchanged.md | 32 +- .../current/api/event/onbeforeviewchange.md | 32 +- .../current/api/event/onclick.md | 28 +- .../current/api/event/oncontextmenu.md | 2 +- .../current/api/event/ondblclick.md | 18 +- .../current/api/event/ondragend.md | 4 +- .../current/api/event/oneventdrag.md | 30 +- .../current/api/event/onviewchange.md | 20 +- .../current/api/method/addevent.md | 36 +- .../current/api/method/addeventnow.md | 4 +- .../current/api/method/addmarkedtimespan.md | 150 ++-- .../current/api/method/addshortcut.md | 2 +- .../current/api/method/alert.md | 2 +- .../current/api/method/assert.md | 2 +- .../current/api/method/attachevent.md | 57 +- .../current/api/method/backbone.md | 2 +- .../current/api/method/batchupdate.md | 2 +- .../current/api/method/blocktime.md | 18 +- .../current/api/method/callevent.md | 2 +- .../current/api/method/checkcollision.md | 8 +- .../api/method/checkinmarkedtimespan.md | 10 +- .../current/api/method/checklimitviolation.md | 8 +- .../current/api/method/confirm.md | 2 +- .../current/api/method/copy.md | 4 +- .../current/api/method/createdataprocessor.md | 10 +- .../current/api/method/createtimelineview.md | 164 ++-- .../current/api/method/createunitsview.md | 8 +- .../current/api/method/dataprocessor.md | 12 +- .../current/api/method/defined.md | 2 +- .../current/api/method/deleteevent.md | 8 +- .../api/method/deletemarkedtimespan.md | 4 +- .../current/api/method/destroycalendar.md | 2 +- .../current/api/method/destructor.md | 2 +- .../current/api/method/detachevent.md | 2 +- .../current/api/method/edit.md | 6 +- .../current/api/method/editstop.md | 6 +- .../current/api/method/eventremove.md | 2 +- .../current/api/method/formsection.md | 10 +- .../current/api/method/getactiondata.md | 4 +- .../current/api/method/getevent.md | 8 +- .../current/api/method/geteventenddate.md | 8 +- .../current/api/method/getevents.md | 2 +- .../current/api/method/geteventstartdate.md | 8 +- .../current/api/method/geteventtext.md | 6 +- .../current/api/method/getlabel.md | 10 +- .../current/api/method/getrecdates.md | 17 +- .../current/api/method/getrenderedevent.md | 8 +- .../current/api/method/getshortcuthandler.md | 2 +- .../current/api/method/getstate.md | 2 +- .../current/api/method/getuserdata.md | 6 +- .../current/api/method/getview.md | 2 +- .../current/api/method/init.md | 20 +- .../current/api/method/invertzones.md | 2 +- .../current/api/method/iscalendarvisible.md | 2 +- .../current/api/method/isonedayevent.md | 6 +- .../current/api/method/linkcalendar.md | 2 +- .../current/api/method/load.md | 39 +- .../current/api/method/markcalendar.md | 2 +- .../current/api/method/marktimespan.md | 14 +- .../current/api/method/message.md | 2 +- .../current/api/method/modalbox.md | 2 +- .../current/api/method/parse.md | 34 +- .../current/api/method/plugins.md | 2 +- .../current/api/method/removeshortcut.md | 2 +- .../current/api/method/render.md | 2 +- .../current/api/method/renderevent.md | 4 +- .../current/api/method/resetlightbox.md | 6 +- .../current/api/method/select.md | 6 +- .../current/api/method/serialize.md | 12 +- .../current/api/method/serverlist.md | 4 +- .../current/api/method/setcurrentview.md | 22 +- .../current/api/method/setevent.md | 4 +- .../current/api/method/setlightboxsize.md | 2 +- .../current/api/method/setloadmode.md | 2 +- .../current/api/method/setuserdata.md | 6 +- .../current/api/method/showevent.md | 6 +- .../current/api/method/showlightbox.md | 6 +- .../current/api/method/showquickinfo.md | 6 +- .../current/api/method/toical.md | 4 +- .../current/api/method/tojson.md | 2 +- .../current/api/method/topdfrange.md | 4 +- .../current/api/method/toxml.md | 2 +- .../current/api/method/uid.md | 2 +- .../current/api/method/unblocktime.md | 6 +- .../current/api/method/unmarkcalendar.md | 6 +- .../current/api/method/unmarktimespan.md | 2 +- .../current/api/method/unselect.md | 6 +- .../current/api/method/updatecalendar.md | 4 +- .../current/api/method/updateevent.md | 6 +- .../current/api/method/updateview.md | 30 +- .../current/api/other/ajax.md | 10 +- .../current/api/other/config.md | 2 +- .../current/api/other/date.md | 137 +-- .../current/api/other/ical.md | 12 +- .../current/api/other/json.md | 2 +- .../current/api/other/matrix.md | 2 +- .../current/api/other/skin.md | 2 +- .../current/api/other/tooltip.md | 2 +- .../current/api/other/version.md | 2 +- .../current/api/template/day_date.md | 2 +- .../current/api/template/event_bar_text.md | 26 +- .../current/api/template/event_class.md | 32 +- .../current/api/template/event_date.md | 2 +- .../current/api/template/event_text.md | 31 +- .../current/api/template/format_date.md | 2 +- .../current/api/template/load_format.md | 2 +- .../current/api/template/month_date.md | 2 +- .../current/api/template/month_day.md | 2 +- .../api/template/timelinename_scale_date.md | 4 +- .../timelinename_second_scale_date.md | 4 +- .../api/template/tooltip_date_format.md | 2 +- .../api/template/week_agenda_scale_date.md | 2 +- .../current/api/template/xml_date.md | 8 +- .../current/api/template/xml_format.md | 6 +- .../current/api/template/year_date.md | 2 +- .../current/export/excel.md | 6 +- .../current/export/pdf-multi.md | 6 +- .../current/export/pdf.md | 121 ++- .../current/export/serialization.md | 10 +- .../current/guides/backbone-integration.md | 52 -- .../current/guides/collisions.md | 102 ++- .../current/guides/combo.md | 108 ++- .../current/guides/custom-details-form.md | 57 +- .../current/guides/custom-events-color.md | 228 +++-- .../current/guides/custom-events-display.md | 72 +- .../current/guides/custom-lightbox-editor.md | 48 +- .../current/guides/custom-skins.md | 135 +-- .../guides/customizing-edit-select-bars.md | 90 +- .../current/guides/data-export.md | 13 - .../current/guides/data-formats.md | 128 +-- .../current/guides/datastore-integration.md | 73 -- .../current/guides/date-formats.md | 52 +- .../guides/dhtmlx-components-integration.md | 129 --- .../current/guides/dhxlayout-integration.md | 84 -- .../current/guides/drag-between.md | 69 ++ .../current/guides/event-object-operations.md | 70 +- .../current/guides/excel.md | 133 --- .../current/guides/export.md | 175 ---- .../current/guides/extensions-list.md | 369 ++++---- .../current/guides/filtering.md | 47 +- .../current/guides/guides.md | 77 -- .../current/guides/how-to-start.md | 240 ------ .../current/guides/ical-export-import.md | 77 +- .../current/guides/index.md | 155 ++++ .../current/guides/initialization.md | 186 ++-- .../guides/integration-with-bootstrap.md | 48 -- .../guides/integration-with-dhtmlxmessage.md | 363 -------- .../current/guides/jquery-integration.md | 35 - .../current/guides/keyboard-navigation.md | 135 +-- .../guides/lightbox-editors-manipulations.md | 238 ++--- .../current/guides/limits.md | 101 +-- .../current/guides/live-update.md | 81 +- .../current/guides/loading-data.md | 389 +++++---- .../current/guides/localization.md | 120 ++- .../current/guides/minicalendar.md | 200 ++--- .../current/guides/multiple-per-page.md | 163 ++-- .../current/guides/multiselect.md | 78 +- .../current/guides/multiuser-live-updates.md | 141 ++- .../current/guides/pdf-legacy.md | 184 ---- .../current/guides/pdf-multi.md | 40 - .../current/guides/pdf.md | 190 ---- .../current/guides/png.md | 188 ---- .../current/guides/popups-and-modals.md | 374 ++++++++ .../current/guides/quick-info.md | 43 +- .../current/guides/radio.md | 119 ++- .../current/guides/readonly.md | 60 +- .../current/guides/recurring-events-legacy.md | 349 ++++---- .../current/guides/recurring-events.md | 618 +++++++------ .../current/guides/rtl-mode.md | 42 +- .../current/guides/scheduler-3.0.md | 52 -- .../current/guides/scheduler-integrations.md | 12 - .../current/guides/scheduler-markup.md | 107 ++- .../current/guides/scheduler-typescript.md | 28 - .../current/guides/select.md | 85 +- .../current/guides/sizing-legacy.md | 94 +- .../current/guides/sizing.md | 60 +- .../current/guides/template.md | 40 +- .../current/guides/templates.md | 59 +- .../current/guides/tooltips-legacy.md | 43 +- .../current/guides/tooltips.md | 152 ++-- .../current/guides/using-connectors.md | 160 ---- .../current/guides/views.md | 38 - .../current/integrations/ai-tools/index.md | 16 + .../integrations/ai-tools/mcp-server.md | 137 +++ .../firebase/howtostart-firebase.md | 282 ++++++ .../google-calendar/google-calendar-sync.md | 477 +++++++---- .../legacy/backbone-integration.md | 52 ++ .../current/integrations/legacy/dhtmlx-dnd.md | 65 ++ .../current/integrations/other/bootstrap.md | 48 ++ .../other/dhxlayout-integration.md | 88 ++ .../integrations/other/jquery-integration.md | 34 + .../integrations/react/configuration-props.md | 212 +++++ .../current/integrations/react/copyright.md | 125 +++ .../react/firebase-integration.md | 210 +++++ .../current/integrations/react/index.md | 44 + .../integrations/react/installation.md | 78 ++ .../integrations/react/js-scheduler-react.md | 111 +-- .../current/integrations/react/nextjs.md | 264 ++++++ .../current/integrations/react/overview.md | 484 +++++++++++ .../current/integrations/react/quick-start.md | 311 +++++++ .../current/integrations/react/remix.md | 266 ++++++ .../current/integrations/react/state/index.md | 40 + .../current/integrations/react/state/jotai.md | 597 +++++++++++++ .../current/integrations/react/state/mobx.md | 626 ++++++++++++++ .../integrations/react/state/redux-toolkit.md | 590 +++++++++++++ .../react/state/state-management-basics.md | 301 +++++++ .../integrations/react/state/valtio.md | 587 +++++++++++++ .../integrations/react/state/xstate.md | 549 ++++++++++++ .../integrations/react/state/zustand.md | 503 +++++++++++ .../salesforce/howtostart-salesforce.md | 184 ++-- .../current/views/agenda-legacy.md | 8 +- .../current/views/agenda.md | 4 +- .../current/views/day.md | 2 +- .../current/views/grid.md | 10 +- .../current/views/map.md | 10 +- .../current/views/month.md | 10 +- .../current/views/timeline.md | 38 +- .../current/views/units.md | 16 +- .../current/views/week.md | 2 +- .../current/whats-new.md | 107 ++- 1746 files changed, 49482 insertions(+), 27464 deletions(-) delete mode 100644 docs/integrations/legacy/dhxlayout-integration.md create mode 100644 i18n/de/docusaurus-plugin-content-docs/current/export/serialization.md delete mode 100644 i18n/de/docusaurus-plugin-content-docs/current/guides/backbone-integration.md delete mode 100644 i18n/de/docusaurus-plugin-content-docs/current/guides/data-export.md delete mode 100644 i18n/de/docusaurus-plugin-content-docs/current/guides/datastore-integration.md delete mode 100644 i18n/de/docusaurus-plugin-content-docs/current/guides/dhtmlx-components-integration.md delete mode 100644 i18n/de/docusaurus-plugin-content-docs/current/guides/dhxlayout-integration.md create mode 100644 i18n/de/docusaurus-plugin-content-docs/current/guides/drag-between.md delete mode 100644 i18n/de/docusaurus-plugin-content-docs/current/guides/export.md delete mode 100644 i18n/de/docusaurus-plugin-content-docs/current/guides/guides.md delete mode 100644 i18n/de/docusaurus-plugin-content-docs/current/guides/how-to-start.md delete mode 100644 i18n/de/docusaurus-plugin-content-docs/current/guides/integration-with-bootstrap.md delete mode 100644 i18n/de/docusaurus-plugin-content-docs/current/guides/integration-with-dhtmlxmessage.md delete mode 100644 i18n/de/docusaurus-plugin-content-docs/current/guides/jquery-integration.md create mode 100644 i18n/de/docusaurus-plugin-content-docs/current/guides/popups-and-modals.md delete mode 100644 i18n/de/docusaurus-plugin-content-docs/current/guides/scheduler-3.0.md delete mode 100644 i18n/de/docusaurus-plugin-content-docs/current/guides/scheduler-integrations.md delete mode 100644 i18n/de/docusaurus-plugin-content-docs/current/guides/scheduler-typescript.md delete mode 100644 i18n/de/docusaurus-plugin-content-docs/current/guides/views.md create mode 100644 i18n/de/docusaurus-plugin-content-docs/current/integrations/ai-tools/index.md create mode 100644 i18n/de/docusaurus-plugin-content-docs/current/integrations/ai-tools/mcp-server.md create mode 100644 i18n/de/docusaurus-plugin-content-docs/current/integrations/firebase/howtostart-firebase.md create mode 100644 i18n/de/docusaurus-plugin-content-docs/current/integrations/legacy/backbone-integration.md create mode 100644 i18n/de/docusaurus-plugin-content-docs/current/integrations/legacy/dhtmlx-dnd.md create mode 100644 i18n/de/docusaurus-plugin-content-docs/current/integrations/other/bootstrap.md create mode 100644 i18n/de/docusaurus-plugin-content-docs/current/integrations/other/dhxlayout-integration.md create mode 100644 i18n/de/docusaurus-plugin-content-docs/current/integrations/other/jquery-integration.md create mode 100644 i18n/de/docusaurus-plugin-content-docs/current/integrations/react/configuration-props.md create mode 100644 i18n/de/docusaurus-plugin-content-docs/current/integrations/react/copyright.md create mode 100644 i18n/de/docusaurus-plugin-content-docs/current/integrations/react/firebase-integration.md create mode 100644 i18n/de/docusaurus-plugin-content-docs/current/integrations/react/index.md create mode 100644 i18n/de/docusaurus-plugin-content-docs/current/integrations/react/installation.md create mode 100644 i18n/de/docusaurus-plugin-content-docs/current/integrations/react/nextjs.md create mode 100644 i18n/de/docusaurus-plugin-content-docs/current/integrations/react/overview.md create mode 100644 i18n/de/docusaurus-plugin-content-docs/current/integrations/react/quick-start.md create mode 100644 i18n/de/docusaurus-plugin-content-docs/current/integrations/react/remix.md create mode 100644 i18n/de/docusaurus-plugin-content-docs/current/integrations/react/state/index.md create mode 100644 i18n/de/docusaurus-plugin-content-docs/current/integrations/react/state/jotai.md create mode 100644 i18n/de/docusaurus-plugin-content-docs/current/integrations/react/state/mobx.md create mode 100644 i18n/de/docusaurus-plugin-content-docs/current/integrations/react/state/redux-toolkit.md create mode 100644 i18n/de/docusaurus-plugin-content-docs/current/integrations/react/state/state-management-basics.md create mode 100644 i18n/de/docusaurus-plugin-content-docs/current/integrations/react/state/valtio.md create mode 100644 i18n/de/docusaurus-plugin-content-docs/current/integrations/react/state/xstate.md create mode 100644 i18n/de/docusaurus-plugin-content-docs/current/integrations/react/state/zustand.md create mode 100644 i18n/ko/docusaurus-plugin-content-docs/current/export/excel.md create mode 100644 i18n/ko/docusaurus-plugin-content-docs/current/export/index.md create mode 100644 i18n/ko/docusaurus-plugin-content-docs/current/export/pdf-legacy.md create mode 100644 i18n/ko/docusaurus-plugin-content-docs/current/export/pdf-multi.md create mode 100644 i18n/ko/docusaurus-plugin-content-docs/current/export/pdf.md create mode 100644 i18n/ko/docusaurus-plugin-content-docs/current/export/png.md create mode 100644 i18n/ko/docusaurus-plugin-content-docs/current/export/serialization.md delete mode 100644 i18n/ko/docusaurus-plugin-content-docs/current/guides/backbone-integration.md delete mode 100644 i18n/ko/docusaurus-plugin-content-docs/current/guides/data-export.md delete mode 100644 i18n/ko/docusaurus-plugin-content-docs/current/guides/datastore-integration.md delete mode 100644 i18n/ko/docusaurus-plugin-content-docs/current/guides/dhtmlx-components-integration.md delete mode 100644 i18n/ko/docusaurus-plugin-content-docs/current/guides/dhxlayout-integration.md create mode 100644 i18n/ko/docusaurus-plugin-content-docs/current/guides/drag-between.md delete mode 100644 i18n/ko/docusaurus-plugin-content-docs/current/guides/excel.md delete mode 100644 i18n/ko/docusaurus-plugin-content-docs/current/guides/export.md delete mode 100644 i18n/ko/docusaurus-plugin-content-docs/current/guides/guides.md delete mode 100644 i18n/ko/docusaurus-plugin-content-docs/current/guides/how-to-start.md delete mode 100644 i18n/ko/docusaurus-plugin-content-docs/current/guides/integration-with-bootstrap.md delete mode 100644 i18n/ko/docusaurus-plugin-content-docs/current/guides/integration-with-dhtmlxmessage.md delete mode 100644 i18n/ko/docusaurus-plugin-content-docs/current/guides/jquery-integration.md delete mode 100644 i18n/ko/docusaurus-plugin-content-docs/current/guides/pdf-legacy.md delete mode 100644 i18n/ko/docusaurus-plugin-content-docs/current/guides/pdf-multi.md delete mode 100644 i18n/ko/docusaurus-plugin-content-docs/current/guides/pdf.md delete mode 100644 i18n/ko/docusaurus-plugin-content-docs/current/guides/png.md create mode 100644 i18n/ko/docusaurus-plugin-content-docs/current/guides/popups-and-modals.md delete mode 100644 i18n/ko/docusaurus-plugin-content-docs/current/guides/scheduler-3.0.md delete mode 100644 i18n/ko/docusaurus-plugin-content-docs/current/guides/scheduler-integrations.md delete mode 100644 i18n/ko/docusaurus-plugin-content-docs/current/guides/scheduler-typescript.md delete mode 100644 i18n/ko/docusaurus-plugin-content-docs/current/guides/views.md create mode 100644 i18n/ko/docusaurus-plugin-content-docs/current/integrations/ai-tools/index.md create mode 100644 i18n/ko/docusaurus-plugin-content-docs/current/integrations/ai-tools/mcp-server.md create mode 100644 i18n/ko/docusaurus-plugin-content-docs/current/integrations/firebase/howtostart-firebase.md create mode 100644 i18n/ko/docusaurus-plugin-content-docs/current/integrations/legacy/backbone-integration.md create mode 100644 i18n/ko/docusaurus-plugin-content-docs/current/integrations/legacy/dhtmlx-dnd.md create mode 100644 i18n/ko/docusaurus-plugin-content-docs/current/integrations/other/bootstrap.md create mode 100644 i18n/ko/docusaurus-plugin-content-docs/current/integrations/other/dhxlayout-integration.md create mode 100644 i18n/ko/docusaurus-plugin-content-docs/current/integrations/other/jquery-integration.md create mode 100644 i18n/ko/docusaurus-plugin-content-docs/current/integrations/react/configuration-props.md create mode 100644 i18n/ko/docusaurus-plugin-content-docs/current/integrations/react/copyright.md create mode 100644 i18n/ko/docusaurus-plugin-content-docs/current/integrations/react/firebase-integration.md create mode 100644 i18n/ko/docusaurus-plugin-content-docs/current/integrations/react/index.md create mode 100644 i18n/ko/docusaurus-plugin-content-docs/current/integrations/react/installation.md create mode 100644 i18n/ko/docusaurus-plugin-content-docs/current/integrations/react/nextjs.md create mode 100644 i18n/ko/docusaurus-plugin-content-docs/current/integrations/react/overview.md create mode 100644 i18n/ko/docusaurus-plugin-content-docs/current/integrations/react/quick-start.md create mode 100644 i18n/ko/docusaurus-plugin-content-docs/current/integrations/react/remix.md create mode 100644 i18n/ko/docusaurus-plugin-content-docs/current/integrations/react/state/index.md create mode 100644 i18n/ko/docusaurus-plugin-content-docs/current/integrations/react/state/jotai.md create mode 100644 i18n/ko/docusaurus-plugin-content-docs/current/integrations/react/state/mobx.md create mode 100644 i18n/ko/docusaurus-plugin-content-docs/current/integrations/react/state/redux-toolkit.md create mode 100644 i18n/ko/docusaurus-plugin-content-docs/current/integrations/react/state/state-management-basics.md create mode 100644 i18n/ko/docusaurus-plugin-content-docs/current/integrations/react/state/valtio.md create mode 100644 i18n/ko/docusaurus-plugin-content-docs/current/integrations/react/state/xstate.md create mode 100644 i18n/ko/docusaurus-plugin-content-docs/current/integrations/react/state/zustand.md delete mode 100644 i18n/ru/docusaurus-plugin-content-docs/current/guides/backbone-integration.md delete mode 100644 i18n/ru/docusaurus-plugin-content-docs/current/guides/data-export.md delete mode 100644 i18n/ru/docusaurus-plugin-content-docs/current/guides/datastore-integration.md delete mode 100644 i18n/ru/docusaurus-plugin-content-docs/current/guides/dhtmlx-components-integration.md delete mode 100644 i18n/ru/docusaurus-plugin-content-docs/current/guides/dhxlayout-integration.md create mode 100644 i18n/ru/docusaurus-plugin-content-docs/current/guides/drag-between.md delete mode 100644 i18n/ru/docusaurus-plugin-content-docs/current/guides/guides.md delete mode 100644 i18n/ru/docusaurus-plugin-content-docs/current/guides/how-to-start.md delete mode 100644 i18n/ru/docusaurus-plugin-content-docs/current/guides/howtostart_dotnet.md create mode 100644 i18n/ru/docusaurus-plugin-content-docs/current/guides/index.md delete mode 100644 i18n/ru/docusaurus-plugin-content-docs/current/guides/integration-with-bootstrap.md delete mode 100644 i18n/ru/docusaurus-plugin-content-docs/current/guides/integration-with-dhtmlxmessage.md create mode 100644 i18n/ru/docusaurus-plugin-content-docs/current/guides/popups-and-modals.md delete mode 100644 i18n/ru/docusaurus-plugin-content-docs/current/guides/scheduler-3.0.md delete mode 100644 i18n/ru/docusaurus-plugin-content-docs/current/guides/scheduler-integrations.md delete mode 100644 i18n/ru/docusaurus-plugin-content-docs/current/guides/scheduler-typescript.md delete mode 100644 i18n/ru/docusaurus-plugin-content-docs/current/guides/views.md create mode 100644 i18n/ru/docusaurus-plugin-content-docs/current/integrations/ai-tools/index.md create mode 100644 i18n/ru/docusaurus-plugin-content-docs/current/integrations/ai-tools/mcp-server.md create mode 100644 i18n/ru/docusaurus-plugin-content-docs/current/integrations/firebase/howtostart-firebase.md create mode 100644 i18n/ru/docusaurus-plugin-content-docs/current/integrations/legacy/backbone-integration.md create mode 100644 i18n/ru/docusaurus-plugin-content-docs/current/integrations/legacy/dhtmlx-dnd.md create mode 100644 i18n/ru/docusaurus-plugin-content-docs/current/integrations/other/bootstrap.md create mode 100644 i18n/ru/docusaurus-plugin-content-docs/current/integrations/other/dhxlayout-integration.md rename i18n/ru/docusaurus-plugin-content-docs/current/{guides => integrations/other}/jquery-integration.md (100%) create mode 100644 i18n/ru/docusaurus-plugin-content-docs/current/integrations/react/configuration-props.md create mode 100644 i18n/ru/docusaurus-plugin-content-docs/current/integrations/react/copyright.md create mode 100644 i18n/ru/docusaurus-plugin-content-docs/current/integrations/react/firebase-integration.md create mode 100644 i18n/ru/docusaurus-plugin-content-docs/current/integrations/react/index.md create mode 100644 i18n/ru/docusaurus-plugin-content-docs/current/integrations/react/installation.md create mode 100644 i18n/ru/docusaurus-plugin-content-docs/current/integrations/react/nextjs.md create mode 100644 i18n/ru/docusaurus-plugin-content-docs/current/integrations/react/overview.md create mode 100644 i18n/ru/docusaurus-plugin-content-docs/current/integrations/react/quick-start.md create mode 100644 i18n/ru/docusaurus-plugin-content-docs/current/integrations/react/remix.md create mode 100644 i18n/ru/docusaurus-plugin-content-docs/current/integrations/react/state/index.md create mode 100644 i18n/ru/docusaurus-plugin-content-docs/current/integrations/react/state/jotai.md create mode 100644 i18n/ru/docusaurus-plugin-content-docs/current/integrations/react/state/mobx.md create mode 100644 i18n/ru/docusaurus-plugin-content-docs/current/integrations/react/state/redux-toolkit.md create mode 100644 i18n/ru/docusaurus-plugin-content-docs/current/integrations/react/state/state-management-basics.md create mode 100644 i18n/ru/docusaurus-plugin-content-docs/current/integrations/react/state/valtio.md create mode 100644 i18n/ru/docusaurus-plugin-content-docs/current/integrations/react/state/xstate.md create mode 100644 i18n/ru/docusaurus-plugin-content-docs/current/integrations/react/state/zustand.md delete mode 100644 i18n/zh/docusaurus-plugin-content-docs/current/guides/backbone-integration.md delete mode 100644 i18n/zh/docusaurus-plugin-content-docs/current/guides/data-export.md delete mode 100644 i18n/zh/docusaurus-plugin-content-docs/current/guides/datastore-integration.md delete mode 100644 i18n/zh/docusaurus-plugin-content-docs/current/guides/dhtmlx-components-integration.md delete mode 100644 i18n/zh/docusaurus-plugin-content-docs/current/guides/dhxlayout-integration.md create mode 100644 i18n/zh/docusaurus-plugin-content-docs/current/guides/drag-between.md delete mode 100644 i18n/zh/docusaurus-plugin-content-docs/current/guides/excel.md delete mode 100644 i18n/zh/docusaurus-plugin-content-docs/current/guides/export.md delete mode 100644 i18n/zh/docusaurus-plugin-content-docs/current/guides/guides.md delete mode 100644 i18n/zh/docusaurus-plugin-content-docs/current/guides/how-to-start.md create mode 100644 i18n/zh/docusaurus-plugin-content-docs/current/guides/index.md delete mode 100644 i18n/zh/docusaurus-plugin-content-docs/current/guides/integration-with-bootstrap.md delete mode 100644 i18n/zh/docusaurus-plugin-content-docs/current/guides/integration-with-dhtmlxmessage.md delete mode 100644 i18n/zh/docusaurus-plugin-content-docs/current/guides/jquery-integration.md delete mode 100644 i18n/zh/docusaurus-plugin-content-docs/current/guides/pdf-legacy.md delete mode 100644 i18n/zh/docusaurus-plugin-content-docs/current/guides/pdf-multi.md delete mode 100644 i18n/zh/docusaurus-plugin-content-docs/current/guides/pdf.md delete mode 100644 i18n/zh/docusaurus-plugin-content-docs/current/guides/png.md create mode 100644 i18n/zh/docusaurus-plugin-content-docs/current/guides/popups-and-modals.md delete mode 100644 i18n/zh/docusaurus-plugin-content-docs/current/guides/scheduler-3.0.md delete mode 100644 i18n/zh/docusaurus-plugin-content-docs/current/guides/scheduler-integrations.md delete mode 100644 i18n/zh/docusaurus-plugin-content-docs/current/guides/scheduler-typescript.md delete mode 100644 i18n/zh/docusaurus-plugin-content-docs/current/guides/using-connectors.md delete mode 100644 i18n/zh/docusaurus-plugin-content-docs/current/guides/views.md create mode 100644 i18n/zh/docusaurus-plugin-content-docs/current/integrations/ai-tools/index.md create mode 100644 i18n/zh/docusaurus-plugin-content-docs/current/integrations/ai-tools/mcp-server.md create mode 100644 i18n/zh/docusaurus-plugin-content-docs/current/integrations/firebase/howtostart-firebase.md create mode 100644 i18n/zh/docusaurus-plugin-content-docs/current/integrations/legacy/backbone-integration.md create mode 100644 i18n/zh/docusaurus-plugin-content-docs/current/integrations/legacy/dhtmlx-dnd.md create mode 100644 i18n/zh/docusaurus-plugin-content-docs/current/integrations/other/bootstrap.md create mode 100644 i18n/zh/docusaurus-plugin-content-docs/current/integrations/other/dhxlayout-integration.md create mode 100644 i18n/zh/docusaurus-plugin-content-docs/current/integrations/other/jquery-integration.md create mode 100644 i18n/zh/docusaurus-plugin-content-docs/current/integrations/react/configuration-props.md create mode 100644 i18n/zh/docusaurus-plugin-content-docs/current/integrations/react/copyright.md create mode 100644 i18n/zh/docusaurus-plugin-content-docs/current/integrations/react/firebase-integration.md create mode 100644 i18n/zh/docusaurus-plugin-content-docs/current/integrations/react/index.md create mode 100644 i18n/zh/docusaurus-plugin-content-docs/current/integrations/react/installation.md create mode 100644 i18n/zh/docusaurus-plugin-content-docs/current/integrations/react/nextjs.md create mode 100644 i18n/zh/docusaurus-plugin-content-docs/current/integrations/react/overview.md create mode 100644 i18n/zh/docusaurus-plugin-content-docs/current/integrations/react/quick-start.md create mode 100644 i18n/zh/docusaurus-plugin-content-docs/current/integrations/react/remix.md create mode 100644 i18n/zh/docusaurus-plugin-content-docs/current/integrations/react/state/index.md create mode 100644 i18n/zh/docusaurus-plugin-content-docs/current/integrations/react/state/jotai.md create mode 100644 i18n/zh/docusaurus-plugin-content-docs/current/integrations/react/state/mobx.md create mode 100644 i18n/zh/docusaurus-plugin-content-docs/current/integrations/react/state/redux-toolkit.md create mode 100644 i18n/zh/docusaurus-plugin-content-docs/current/integrations/react/state/state-management-basics.md create mode 100644 i18n/zh/docusaurus-plugin-content-docs/current/integrations/react/state/valtio.md create mode 100644 i18n/zh/docusaurus-plugin-content-docs/current/integrations/react/state/xstate.md create mode 100644 i18n/zh/docusaurus-plugin-content-docs/current/integrations/react/state/zustand.md diff --git a/docs/api/api_overview.md b/docs/api/api_overview.md index f366bc3c..cd240d19 100644 --- a/docs/api/api_overview.md +++ b/docs/api/api_overview.md @@ -390,9 +390,9 @@ description: You can explore an API overview in the documentation of the DHTMLX | [](api/template/event_text.md) | @getshort(api/template/event_text.md) | | [](api/template/format_date.md) | @getshort(api/template/format_date.md) | | [](api/template/gridname_date.md) | @getshort(api/template/gridname_date.md) | -| [](api/template/gridname_full_date.md) | @getshort(api/template/gridname_full_date.md) | -| [](api/template/gridname_single_date.md) | @getshort(api/template/gridname_single_date.md) | -| [](api/template/gridname_field.md) | @getshort(api/template/gridname_field.md) | +| [](api/template/gridname_full_date.md) | @getshort(api/template/gridname_full_date.md) | +| [](api/template/gridname_single_date.md) | @getshort(api/template/gridname_single_date.md) | +| [](api/template/gridname_field.md) | @getshort(api/template/gridname_field.md) | | [](api/template/hour_scale.md) | @getshort(api/template/hour_scale.md) | | [](api/template/load_format.md) | @getshort(api/template/load_format.md) | | [](api/template/map_date.md) | @getshort(api/template/map_date.md) | @@ -424,39 +424,39 @@ description: You can explore an API overview in the documentation of the DHTMLX | [](api/template/year_scale_date.md) | @getshort(api/template/year_scale_date.md) | | [](api/template/year_tooltip.md) | @getshort(api/template/year_tooltip.md) | | [](api/template/lightbox_header.md) | @getshort(api/template/lightbox_header.md) | -| [](api/template/timelinename_cell_value.md) | @getshort(api/template/timelinename_cell_value.md) | -| [](api/template/timelinename_cell_class.md) | @getshort(api/template/timelinename_cell_class.md) | -| [](api/template/timelinename_scalex_class.md) | @getshort(api/template/timelinename_scalex_class.md) | -| [](api/template/timelinename_second_scalex_class.md)| @getshort(api/template/timelinename_second_scalex_class.md) | -| [](api/template/timelinename_scaley_class.md) | @getshort(api/template/timelinename_scaley_class.md) | -| [](api/template/timelinename_scale_label.md) | @getshort(api/template/timelinename_scale_label.md) | -| [](api/template/timelinename_tooltip.md) | @getshort(api/template/timelinename_tooltip.md) | -| [](api/template/timelinename_date.md) | @getshort(api/template/timelinename_date.md) | -| [](api/template/timelinename_scale_date.md) | @getshort(api/template/timelinename_scale_date.md) | -| [](api/template/timelinename_second_scale_date.md) | @getshort(api/template/timelinename_second_scale_date.md) | -| [](api/template/timelinename_row_class.md) | @getshort(api/template/timelinename_row_class.md) | -| [](api/template/unitsname_date.md) | @getshort(api/template/unitsname_date.md) | -| [](api/template/unitsname_scale_text.md) | @getshort(api/template/unitsname_scale_text.md) | -| [](api/template/xml_date.md) | @getshort(api/template/xml_date.md) | -| [](api/template/xml_format.md) | @getshort(api/template/xml_format.md) | +| [](api/template/timelinename_cell_value.md) | @getshort(api/template/timelinename_cell_value.md) | +| [](api/template/timelinename_cell_class.md) | @getshort(api/template/timelinename_cell_class.md) | +| [](api/template/timelinename_scalex_class.md) | @getshort(api/template/timelinename_scalex_class.md) | +| [](api/template/timelinename_second_scalex_class.md) | @getshort(api/template/timelinename_second_scalex_class.md) | +| [](api/template/timelinename_scaley_class.md) | @getshort(api/template/timelinename_scaley_class.md) | +| [](api/template/timelinename_scale_label.md) | @getshort(api/template/timelinename_scale_label.md) | +| [](api/template/timelinename_tooltip.md) | @getshort(api/template/timelinename_tooltip.md) | +| [](api/template/timelinename_date.md) | @getshort(api/template/timelinename_date.md) | +| [](api/template/timelinename_scale_date.md) | @getshort(api/template/timelinename_scale_date.md) | +| [](api/template/timelinename_second_scale_date.md) | @getshort(api/template/timelinename_second_scale_date.md) | +| [](api/template/timelinename_row_class.md) | @getshort(api/template/timelinename_row_class.md) | +| [](api/template/unitsname_date.md) | @getshort(api/template/unitsname_date.md) | +| [](api/template/unitsname_scale_text.md) | @getshort(api/template/unitsname_scale_text.md) | +| [](api/template/xml_date.md) | @getshort(api/template/xml_date.md) | +| [](api/template/xml_format.md) | @getshort(api/template/xml_format.md) | ## Scheduler others | Name | Description | |--------------------------------------------|---------------------------------------------| -| [](api/other/ajax.md) | @getshort(api/other/ajax.md) | -| [](api/other/config.md) | @getshort(api/other/config.md) | -| [](api/other/date.md) | @getshort(api/other/date.md) | -| [](api/other/env.md) | @getshort(api/other/env.md) | -| [](api/other/i18n.md) | @getshort(api/other/i18n.md) | -| [](api/other/ical.md) | @getshort(api/other/ical.md) | -| [](api/other/json.md) | @getshort(api/other/json.md) | -| [](api/other/keys.md) | @getshort(api/other/keys.md) | -| [](api/other/locale.md) | @getshort(api/other/locale.md) | -| [](api/other/matrix.md) | @getshort(api/other/matrix.md) | -| [](api/other/skin.md) | @getshort(api/other/skin.md) | -| [](api/other/templates.md) | @getshort(api/other/templates.md) | -| [](api/other/tooltip.md) | @getshort(api/other/tooltip.md) | -| [](api/other/version.md) | @getshort(api/other/version.md) | -| [](api/other/xy.md) | @getshort(api/other/xy.md) | +| [](api/other/ajax.md) | @getshort(api/other/ajax.md) | +| [](api/other/config.md) | @getshort(api/other/config.md) | +| [](api/other/date.md) | @getshort(api/other/date.md) | +| [](api/other/env.md) | @getshort(api/other/env.md) | +| [](api/other/i18n.md) | @getshort(api/other/i18n.md) | +| [](api/other/ical.md) | @getshort(api/other/ical.md) | +| [](api/other/json.md) | @getshort(api/other/json.md) | +| [](api/other/keys.md) | @getshort(api/other/keys.md) | +| [](api/other/locale.md) | @getshort(api/other/locale.md) | +| [](api/other/matrix.md) | @getshort(api/other/matrix.md) | +| [](api/other/skin.md) | @getshort(api/other/skin.md) | +| [](api/other/templates.md) | @getshort(api/other/templates.md) | +| [](api/other/tooltip.md) | @getshort(api/other/tooltip.md) | +| [](api/other/version.md) | @getshort(api/other/version.md) | +| [](api/other/xy.md) | @getshort(api/other/xy.md) | diff --git a/docs/api/config/active_link_view.md b/docs/api/config/active_link_view.md index 368d7518..4d25608e 100644 --- a/docs/api/config/active_link_view.md +++ b/docs/api/config/active_link_view.md @@ -17,7 +17,7 @@ description: "'says' to present the numbers of days in the Month view as clickab ~~~jsx scheduler.config.active_link_view = "week"; //where we'll jump from the Month view ... -scheduler.init('scheduler_here',new Date(2012,7,6),"month"); +scheduler.init('scheduler_here',new Date(2027,7,6),"month"); ~~~ **Default value:** day diff --git a/docs/api/config/agenda_end.md b/docs/api/config/agenda_end.md index ac762126..86371d2e 100644 --- a/docs/api/config/agenda_end.md +++ b/docs/api/config/agenda_end.md @@ -15,10 +15,10 @@ description: "sets the date to display events until" ### Example ~~~jsx -scheduler.config.agenda_start = new Date(2012, 7, 1); -scheduler.config.agenda_end = new Date(2014, 7, 1); +scheduler.config.agenda_start = new Date(2025, 7, 1); +scheduler.config.agenda_end = new Date(2027, 7, 1); ... -scheduler.init('scheduler_here', new Date(2013, 0, 10), "agenda"); +scheduler.init('scheduler_here', new Date(2026, 0, 10), "agenda"); ~~~ **Default value:** 'agenda_start' (value) + 1 year diff --git a/docs/api/config/agenda_start.md b/docs/api/config/agenda_start.md index 73eb3d95..05fe6033 100644 --- a/docs/api/config/agenda_start.md +++ b/docs/api/config/agenda_start.md @@ -15,10 +15,10 @@ description: "sets the date to start displaying events from" ### Example ~~~jsx -scheduler.config.agenda_start = new Date(2012, 7, 1); -scheduler.config.agenda_end = new Date(2014, 7, 1); +scheduler.config.agenda_start = new Date(2027, 7, 1); +scheduler.config.agenda_end = new Date(2027, 7, 1); ... -scheduler.init('scheduler_here', new Date(2010, 0, 10), "agenda"); +scheduler.init('scheduler_here', new Date(2027, 0, 10), "agenda"); ~~~ **Default value:** the current user's date diff --git a/docs/api/config/api_date.md b/docs/api/config/api_date.md index 26f97374..094b6ccd 100644 --- a/docs/api/config/api_date.md +++ b/docs/api/config/api_date.md @@ -17,7 +17,7 @@ description: "defines the date format for the api_date template ~~~jsx scheduler.config.api_date="%Y-%m-%d %H:%i"; -scheduler.init("scheduler_here",new Date(2009,10,1),"week"); +scheduler.init("scheduler_here",new Date(2027,10,1),"week"); ~~~ **Default value:** "%d-%m-%Y %H:%i" diff --git a/docs/api/config/auto_end_date.md b/docs/api/config/auto_end_date.md index ec4f6205..c7b3c505 100644 --- a/docs/api/config/auto_end_date.md +++ b/docs/api/config/auto_end_date.md @@ -18,7 +18,7 @@ description: "enables automatic changing of the end event date after changing th scheduler.config.event_duration = 60; scheduler.config.auto_end_date = true; ... -scheduler.init('scheduler_here',new Date(2013,05,11),"week"); +scheduler.init('scheduler_here',new Date(2027,05,11),"week"); ~~~ **Default value:** false diff --git a/docs/api/config/buttons_left.md b/docs/api/config/buttons_left.md index ac5d7ca2..4d10637c 100644 --- a/docs/api/config/buttons_left.md +++ b/docs/api/config/buttons_left.md @@ -24,7 +24,7 @@ description: "stores a collection of buttons resided in the left bottom corner o ~~~ diff --git a/docs/api/method/marktimespan.md b/docs/api/method/marktimespan.md index ea6bc7a0..ab9313d2 100644 --- a/docs/api/method/marktimespan.md +++ b/docs/api/method/marktimespan.md @@ -76,8 +76,8 @@ The configuration object can contain the following properties: ~~~js -//denies creating events from 3rd May,2012 till 'end_date' -start_date:new Date(2012,4,3) +//denies creating events from 3rd May,2027 till 'end_date' +start_date:new Date(2027,4,3) ~~~ @@ -88,8 +88,8 @@ start_date:new Date(2012,4,3) ~~~js -//denies creating events from 'start_date' till 3rd September,2012 -end_date:new Date(2012,8,3) +//denies creating events from 'start_date' till 3rd September,2027 +end_date:new Date(2027,8,3) ~~~ @@ -102,7 +102,7 @@ end_date:new Date(2012,8,3) ~~~js days:[0, 2, 6] //limits Sunday,Tuesday and Saturday days:"fullweek" //limits the entire week -days:new Date(2012,6,1) //blocks 1st July,2012 +days:new Date(2027,6,1) //blocks 1st July,2027 ~~~ @@ -216,7 +216,7 @@ Therefore, there are 2 acceptable combinations with specific set of properties: ~~~js -var config ={ +const config ={ days: 1, zones: [9*60, 15*60], css: "cssClassName", @@ -232,9 +232,9 @@ var config ={
  • `start_date`
  • `end_date`
  • `css`
  • `html`
  • `type`
  • `sections`
~~~js -var config ={ - start_date: new Date(2012,7,13), - end_date: new Date(2012,7,14), +const config ={ + start_date: new Date(2027,7,13), + end_date: new Date(2027,7,14), css: "cssClassName", sections: { unit: 5 diff --git a/docs/api/method/message.md b/docs/api/method/message.md index 20b877d5..7408b0fa 100644 --- a/docs/api/method/message.md +++ b/docs/api/method/message.md @@ -22,7 +22,7 @@ description: "calls a message box of the specified type" ### Example ~~~jsx -var box = scheduler.message({ +const box = scheduler.message({ type:"confirm-warning", text:"Are you sure you want to do it?" }); diff --git a/docs/api/method/modalbox.md b/docs/api/method/modalbox.md index 5d2f2152..90ebc64b 100644 --- a/docs/api/method/modalbox.md +++ b/docs/api/method/modalbox.md @@ -22,7 +22,7 @@ description: "calls a modalbox" ### Example ~~~jsx -var box = scheduler.modalbox({ +const box = scheduler.modalbox({ title: "Close", type: "alert-warning" }); diff --git a/docs/api/method/removeshortcut.md b/docs/api/method/removeshortcut.md index d42d9f3c..3f5dc8aa 100644 --- a/docs/api/method/removeshortcut.md +++ b/docs/api/method/removeshortcut.md @@ -22,7 +22,7 @@ description: "removes a keyboard shortcut" ~~~jsx // adding a shortcut scheduler.addShortcut("shift+w", function(e){ - var eventId = scheduler.locate(e); + const eventId = scheduler.locate(e); if(eventId) scheduler.showQuickInfo(eventId); },"event"); diff --git a/docs/api/method/render.md b/docs/api/method/render.md index 15aec84a..4817649a 100644 --- a/docs/api/method/render.md +++ b/docs/api/method/render.md @@ -26,7 +26,7 @@ scheduler.render(); // switch to another date -scheduler.render(new Date(2020,7,4)); +scheduler.render(new Date(2027,7,4)); // switch to another view scheduler.render(null, "week"); diff --git a/docs/api/method/renderevent.md b/docs/api/method/renderevent.md index 14f80625..c4c5b957 100644 --- a/docs/api/method/renderevent.md +++ b/docs/api/method/renderevent.md @@ -24,8 +24,8 @@ description: "generates HTML content for a custom event's box" ~~~jsx scheduler.renderEvent = function(container, ev) { - var container_width = container.style.width; - var html = "
"; ... container.innerHTML = html; diff --git a/docs/api/method/resetlightbox.md b/docs/api/method/resetlightbox.md index d07a7f9f..805f0e73 100644 --- a/docs/api/method/resetlightbox.md +++ b/docs/api/method/resetlightbox.md @@ -15,17 +15,17 @@ description: "removes the current lightbox's HTML object element" ### Example ~~~jsx -var full_lightbox = [ +const full_lightbox = [ { name: "description", map_to: "text", type: "textarea", focus: true}, { name: "time", map_to: "auto", type: "time"} ]; -var restricted_lightbox = [ +const restricted_lightbox = [ { name: "description", map_to: "text", type: "textarea", focus: true}, ]; ... scheduler.attachEvent("onBeforeLightbox", function(event_id) { scheduler.resetLightbox(); - var ev = scheduler.getEvent(event_id); + const ev = scheduler.getEvent(event_id); if (ev.restricted ==true){ scheduler.config.lightbox.sections = restricted_lightbox; } else { diff --git a/docs/api/method/select.md b/docs/api/method/select.md index 23f6772d..2e52cbdd 100644 --- a/docs/api/method/select.md +++ b/docs/api/method/select.md @@ -19,9 +19,9 @@ description: "selects the specified event" ### Example ~~~jsx -var eventId = scheduler.addEvent({ - start_date: "16-06-2013 09:00", - end_date: "16-06-2013 12:00", +const eventId = scheduler.addEvent({ + start_date: "16-06-2027 09:00", + end_date: "16-06-2027 12:00", text: "Meeting" }); diff --git a/docs/api/method/serialize.md b/docs/api/method/serialize.md index 443e11a5..f30402a4 100644 --- a/docs/api/method/serialize.md +++ b/docs/api/method/serialize.md @@ -19,15 +19,15 @@ console.log(scheduler.serialize()); //(5) [{…}, {…}, {…}, {…}, {…}] -//> 0: {id: 1, start_date: '2022-05-17 09:00', end_date: '2022-05-17 12:00', +//> 0: {id: 1, start_date: '2027-05-17 09:00', end_date: '2027-05-17 12:00', // text: 'Event'} -//> 1: {id: 2, start_date: '2022-05-18 10:00', end_date: '2022-05-18 16:00', +//> 1: {id: 2, start_date: '2027-05-18 10:00', end_date: '2027-05-18 16:00', // text: 'Event'} -//> 2: {id: 3, start_date: '2022-05-20 10:00', end_date: '2022-05-20 14:00', +//> 2: {id: 3, start_date: '2027-05-20 10:00', end_date: '2027-05-20 14:00', // text: 'Event'} -//> 3: {id: 4, start_date: '2022-05-21 16:00', end_date: '2022-05-21 17:00', +//> 3: {id: 4, start_date: '2027-05-21 16:00', end_date: '2027-05-21 17:00', // text: 'Event'} -//> 4: {id: 5, start_date: '2022-05-22 09:00', end_date: '2022-05-22 17:00', +//> 4: {id: 5, start_date: '2027-05-22 09:00', end_date: '2027-05-22 17:00', // text: 'Event'} ~~~ diff --git a/docs/api/method/serverlist.md b/docs/api/method/serverlist.md index 704728db..c8d60422 100644 --- a/docs/api/method/serverlist.md +++ b/docs/api/method/serverlist.md @@ -24,10 +24,10 @@ description: "defines a named collection that can be loaded into Units, Timeline ~~~jsx //returns a list of options with the name 'my_list' -var list = scheduler.serverList("my_list"); +const list = scheduler.serverList("my_list"); ... //creates and returns the specified list -var list = scheduler.serverList("options", [ +const list = scheduler.serverList("options", [ {key: 1, label: "John"}, {key: 2, label: "Adam"}, {key: 3, label: "Diane"} diff --git a/docs/api/method/setevent.md b/docs/api/method/setevent.md index 6f8d2e37..2b3f21d6 100644 --- a/docs/api/method/setevent.md +++ b/docs/api/method/setevent.md @@ -21,8 +21,8 @@ description: "adds a new event to the scheduler's data pool" ~~~jsx scheduler.setEvent(1, { - start_date: new Date(2013, 05, 16, 09, 00), - end_date: new Date(2013, 05, 16, 12, 00), + start_date: new Date(2027, 05, 16, 09, 00), + end_date: new Date(2027, 05, 16, 12, 00), text: "Meeting", holder: "John", room: "5" diff --git a/docs/api/method/seteventenddate.md b/docs/api/method/seteventenddate.md index fdc051e8..c16f7247 100644 --- a/docs/api/method/seteventenddate.md +++ b/docs/api/method/seteventenddate.md @@ -22,13 +22,13 @@ The method is deprecated. ### Example ~~~jsx -var eventId = scheduler.addEvent({ - start_date: new Date(2013,1,10), - end_date: new Date(2013,1,13), +const eventId = scheduler.addEvent({ + start_date: new Date(2027,1,10), + end_date: new Date(2027,1,13), text: "Conference" }); ... -scheduler.getEvent(eventId).end_date = new Date(2013,1,15); +scheduler.getEvent(eventId).end_date = new Date(2027,1,15); scheduler.updateEvent(eventId); ~~~ diff --git a/docs/api/method/seteventstartdate.md b/docs/api/method/seteventstartdate.md index da952c27..a5d358f9 100644 --- a/docs/api/method/seteventstartdate.md +++ b/docs/api/method/seteventstartdate.md @@ -22,13 +22,13 @@ The method is deprecated. ### Example ~~~jsx -var eventId = scheduler.addEvent({ - start_date: new Date(2013,1,10), - end_date: new Date(2013,1,13), +const eventId = scheduler.addEvent({ + start_date: new Date(2027,1,10), + end_date: new Date(2027,1,13), text: "Conference" }); ... -scheduler.getEvent(eventId).start_date = new Date(2013,1,09); +scheduler.getEvent(eventId).start_date = new Date(2027,1,09); scheduler.updateEvent(eventId); ~~~ diff --git a/docs/api/method/seteventtext.md b/docs/api/method/seteventtext.md index 38ce9568..7f357df7 100644 --- a/docs/api/method/seteventtext.md +++ b/docs/api/method/seteventtext.md @@ -22,9 +22,9 @@ The method is deprecated. ### Example ~~~jsx -var eventId = scheduler.addEvent({ - start_date: new Date(2013,1,10), - end_date: new Date(2013,1,13), +const eventId = scheduler.addEvent({ + start_date: new Date(2027,1,10), + end_date: new Date(2027,1,13), text: "Conference" }); ... diff --git a/docs/api/method/setlightboxsize.md b/docs/api/method/setlightboxsize.md index 88b58daf..2ff2267a 100644 --- a/docs/api/method/setlightboxsize.md +++ b/docs/api/method/setlightboxsize.md @@ -15,7 +15,7 @@ description: "forces the lightbox to resize" ### Example ~~~jsx -var control = scheduler.formSection("description"); +const control = scheduler.formSection("description"); control.header.style.display = "none"; scheduler.setLightboxSize(); diff --git a/docs/api/method/setloadmode.md b/docs/api/method/setloadmode.md index 34b755cf..359f13cd 100644 --- a/docs/api/method/setloadmode.md +++ b/docs/api/method/setloadmode.md @@ -20,7 +20,7 @@ description: "sets the mode that allows loading data by parts (enables the dynam ~~~jsx scheduler.config.load_date = "%Y.%m.%d"; -scheduler.init('scheduler_here',new Date(2009,10,1),"month"); +scheduler.init('scheduler_here',new Date(2027,10,1),"month"); scheduler.setLoadMode("month") scheduler.load("data/events.php"); diff --git a/docs/api/method/setuserdata.md b/docs/api/method/setuserdata.md index 2c20ff70..cfda554f 100644 --- a/docs/api/method/setuserdata.md +++ b/docs/api/method/setuserdata.md @@ -21,9 +21,9 @@ description: "sets the user data associated with the specified event" ### Example ~~~jsx -var eventId = scheduler.addEvent({ - start_date: "16-06-2013 09:00", - end_date: "16-06-2013 12:00", +const eventId = scheduler.addEvent({ + start_date: "16-06-2027 09:00", + end_date: "16-06-2027 12:00", text: "Meeting" }); diff --git a/docs/api/method/showevent.md b/docs/api/method/showevent.md index e049a2e1..7b3e9457 100644 --- a/docs/api/method/showevent.md +++ b/docs/api/method/showevent.md @@ -39,9 +39,9 @@ scheduler.showEvent(someId); For example, you programmatically add a new event and want to show it in the scheduler: ~~~js -var eventId = scheduler.addEvent({ - start_date: "08-06-2013 09:00", - end_date: "08-06-2013 11:00", +const eventId = scheduler.addEvent({ + start_date: "08-06-2027 09:00", + end_date: "08-06-2027 11:00", text: "Meeting" }); ... diff --git a/docs/api/method/showlightbox.md b/docs/api/method/showlightbox.md index f2c2f3a4..e47d3940 100644 --- a/docs/api/method/showlightbox.md +++ b/docs/api/method/showlightbox.md @@ -19,9 +19,9 @@ description: "opens the lightbox for the specified event" ### Example ~~~jsx -var eventId = scheduler.addEvent({ - start_date: "08-06-2013 09:00", - end_date: "08-06-2013 11:00", +const eventId = scheduler.addEvent({ + start_date: "08-06-2027 09:00", + end_date: "08-06-2027 11:00", text: "Meeting" }); ... diff --git a/docs/api/method/showquickinfo.md b/docs/api/method/showquickinfo.md index e3df6ad0..a385a8ae 100644 --- a/docs/api/method/showquickinfo.md +++ b/docs/api/method/showquickinfo.md @@ -19,9 +19,9 @@ description: "displays the pop-up event form for the specified event" ### Example ~~~jsx -var eventId = scheduler.addEvent({ - start_date: "08-06-2013 09:00", - end_date: "08-06-2013 11:00", +const eventId = scheduler.addEvent({ + start_date: "08-06-2027 09:00", + end_date: "08-06-2027 11:00", text: "Meeting" }); diff --git a/docs/api/method/toical.md b/docs/api/method/toical.md index 918cfb06..f3074716 100644 --- a/docs/api/method/toical.md +++ b/docs/api/method/toical.md @@ -21,9 +21,9 @@ description: "converts scheduler's data to the ICal format" ### Example ~~~jsx -var str = scheduler.toICal(); +const str = scheduler.toICal(); //or -var str = scheduler.toICal("My calendar"); +const str = scheduler.toICal("My calendar"); ~~~ ### Related samples diff --git a/docs/api/method/tojson.md b/docs/api/method/tojson.md index 64893ac8..8f82ce8c 100644 --- a/docs/api/method/tojson.md +++ b/docs/api/method/tojson.md @@ -18,7 +18,7 @@ description: "converts scheduler's data into the JSON format" ### Example ~~~jsx -var str = scheduler.toJSON(); +const str = scheduler.toJSON(); ~~~ ### Related samples diff --git a/docs/api/method/topdfrange.md b/docs/api/method/topdfrange.md index ea7ba108..4e3a0af9 100644 --- a/docs/api/method/topdfrange.md +++ b/docs/api/method/topdfrange.md @@ -23,9 +23,9 @@ description: "exports several scheduler's views to a PDF document (can be used f ### Example ~~~jsx -//exports pages of the 'week' view from the 1st January, 2012 -//till the 1st February, 2012 -scheduler.toPDFRange(new Date(2012,0,1), new Date(2012, 1,1),'week', +//exports pages of the 'week' view from the 1st January, 2027 +//till the 1st February, 2027 +scheduler.toPDFRange(new Date(2027,0,1), new Date(2027, 1,1),'week', 'generate.php', 'fullcolor'); ~~~ diff --git a/docs/api/method/toxml.md b/docs/api/method/toxml.md index 6e3318e7..e65a7ec4 100644 --- a/docs/api/method/toxml.md +++ b/docs/api/method/toxml.md @@ -18,7 +18,7 @@ description: "converts scheduler's data into the XML format" ### Example ~~~jsx -var str = scheduler.toXML(); +const str = scheduler.toXML(); ~~~ ### Related samples diff --git a/docs/api/method/uid.md b/docs/api/method/uid.md index 8e59b49d..049a38e7 100644 --- a/docs/api/method/uid.md +++ b/docs/api/method/uid.md @@ -18,5 +18,5 @@ description: "generates a unique ID (unique inside the current scheduler, not GU ### Example ~~~jsx -var new_id = scheduler.uid(); +const new_id = scheduler.uid(); ~~~ diff --git a/docs/api/method/unblocktime.md b/docs/api/method/unblocktime.md index 2c05d292..12664ce2 100644 --- a/docs/api/method/unblocktime.md +++ b/docs/api/method/unblocktime.md @@ -23,10 +23,10 @@ The method is deprecated. ### Example ~~~jsx -var spanId = scheduler.blockTime(new Date(2013,2,5), "fullday"); +const spanId = scheduler.blockTime(new Date(2027,2,5), "fullday"); ... -//cancels blocking from 0 till 8 and from 18 till 24 hours for February 5, 2013 -scheduler.unblockTime(new Date(2013,2,5), [0,10*60]); +//cancels blocking from 0 till 8 and from 18 till 24 hours for February 5, 2027 +scheduler.unblockTime(new Date(2027,2,5), [0,10*60]); ~~~ ### Related API diff --git a/docs/api/method/unmarkcalendar.md b/docs/api/method/unmarkcalendar.md index ebc4109e..0c6a894d 100644 --- a/docs/api/method/unmarkcalendar.md +++ b/docs/api/method/unmarkcalendar.md @@ -24,7 +24,7 @@ description: "removes a css class from the specified date" // you can get the calendar object in one of two ways: // either via creating a mini calendar -var calendar = scheduler.renderCalendar({ +const calendar = scheduler.renderCalendar({ container:"cal_here", navigation:true, handler:function(date){ @@ -33,11 +33,11 @@ var calendar = scheduler.renderCalendar({ }); // or via using the selector of the container with the mini calendar -var calendar = document.querySelector(".dhx_mini_calendar"); +const calendar = document.querySelector(".dhx_mini_calendar"); -scheduler.markCalendar(calendar, new Date(2010,3,1), "my_style"); +scheduler.markCalendar(calendar, new Date(2027,3,1), "my_style"); ... -scheduler.unmarkCalendar(calendar, new Date(2010,3,1), "my_style"); +scheduler.unmarkCalendar(calendar, new Date(2027,3,1), "my_style"); ~~~ ### Details diff --git a/docs/api/method/unmarktimespan.md b/docs/api/method/unmarktimespan.md index 571c2916..e8abc784 100644 --- a/docs/api/method/unmarktimespan.md +++ b/docs/api/method/unmarktimespan.md @@ -19,7 +19,7 @@ description: "removes marking/blocking set by the markTimespan() method" ### Example ~~~jsx -var spanDIV = scheduler.markTimespan({ +const spanDIV = scheduler.markTimespan({ days: [0,6], zones: "fullday" }); diff --git a/docs/api/method/unselect.md b/docs/api/method/unselect.md index 80660d7e..719be15a 100644 --- a/docs/api/method/unselect.md +++ b/docs/api/method/unselect.md @@ -18,9 +18,9 @@ description: "unselects the specified event" ### Example ~~~jsx -var eventId = scheduler.addEvent({ - start_date: "16-06-2013 09:00", - end_date: "16-06-2013 12:00", +const eventId = scheduler.addEvent({ + start_date: "16-06-2027 09:00", + end_date: "16-06-2027 12:00", text: "Meeting" }); diff --git a/docs/api/method/updatecalendar.md b/docs/api/method/updatecalendar.md index 903cbdac..3a38ddd5 100644 --- a/docs/api/method/updatecalendar.md +++ b/docs/api/method/updatecalendar.md @@ -20,7 +20,7 @@ description: "displays the specified date in the mini calendar" ### Example ~~~jsx -var calendar = scheduler.renderCalendar({ +const calendar = scheduler.renderCalendar({ container:"cal_here", navigation:true, handler:function(date){ @@ -28,7 +28,7 @@ var calendar = scheduler.renderCalendar({ } }); ... -scheduler.updateCalendar(calendar, new Date(2013,01,01)); +scheduler.updateCalendar(calendar, new Date(2027,01,01)); ~~~ ### Details diff --git a/docs/api/method/updateevent.md b/docs/api/method/updateevent.md index 18bfcb14..24acc86d 100644 --- a/docs/api/method/updateevent.md +++ b/docs/api/method/updateevent.md @@ -19,9 +19,9 @@ description: "updates the specified event" ### Example ~~~jsx -var eventId = scheduler.addEvent({ - start_date: "16-06-2013 09:00", - end_date: "16-06-2013 12:00", +const eventId = scheduler.addEvent({ + start_date: "16-06-2027 09:00", + end_date: "16-06-2027 12:00", text: "Meeting" }); diff --git a/docs/api/other/ajax.md b/docs/api/other/ajax.md index 013df98e..10d3c044 100644 --- a/docs/api/other/ajax.md +++ b/docs/api/other/ajax.md @@ -19,11 +19,11 @@ description: "scheduler ajax module" {status: "ok", data: "value", data2: "value2"} -var xhr = scheduler.ajax; +const xhr = scheduler.ajax; // HTTP GET xhr.get("server.php").then(function(response) { - var res = JSON.parse(response.responseText); + const res = JSON.parse(response.responseText); if (res && res.status == "ok") { // response is ok } @@ -36,7 +36,7 @@ xhr.post({ paramName: "paramValue" } }).then(function(response){ - var res = JSON.parse(response.responseText); + const res = JSON.parse(response.responseText); if (res && res.status == "ok") { // response is ok } @@ -107,7 +107,7 @@ scheduler.ajax.post({ paramName: "paramValue" }, callback: function(result){ - var response = result.xmlDoc; + const response = result.xmlDoc; alert(response.responseText); } @@ -221,7 +221,7 @@ dhtmlxScheduler supports usage of promises (including IE8+). For work with promi To create a promise, you need to use the following constructor: ~~~js -var promise = new scheduler.Promise(function(resolve, reject) {...}); +const promise = new scheduler.Promise(function(resolve, reject) {...}); ~~~ Promise is declared inside Scheduler, not globally for the application. diff --git a/docs/api/other/json.md b/docs/api/other/json.md index c806680d..61cdf5eb 100644 --- a/docs/api/other/json.md +++ b/docs/api/other/json.md @@ -15,7 +15,7 @@ description: "specifies JSON serialization and parsing" ### Example ~~~jsx -var obj = scheduler.json; // -> { parse(data){... }} +const obj = scheduler.json; // -> { parse(data){... }} ~~~ ### Details diff --git a/docs/api/other/matrix.md b/docs/api/other/matrix.md index 6d7a3118..e123a2c1 100644 --- a/docs/api/other/matrix.md +++ b/docs/api/other/matrix.md @@ -28,7 +28,7 @@ scheduler.createTimelineView({ render:"bar" }); -var configObj = scheduler.matrix; +const configObj = scheduler.matrix; ~~~ ### Related samples @@ -57,7 +57,7 @@ But if you need to change the configuration greatly, it will be better to specif For example, you want to dynamically change the x_step,x_sise,x_start parameters of the timeline shown in the sample above: -~~~ +~~~js //you can use this variant configObj.x_step = 50; configObj.x_size = 28; diff --git a/docs/api/other/skin.md b/docs/api/other/skin.md index 1e424c4f..83aec4e7 100644 --- a/docs/api/other/skin.md +++ b/docs/api/other/skin.md @@ -15,7 +15,7 @@ description: "returns the current skin of the scheduler" ### Example ~~~jsx -var currentSkin = scheduler.skin;// -> 'glossy' or 'classic' +const currentSkin = scheduler.skin;// -> 'glossy' or 'classic' ~~~ ### Details diff --git a/docs/api/other/tooltip.md b/docs/api/other/tooltip.md index 9effc587..0aa23f6e 100644 --- a/docs/api/other/tooltip.md +++ b/docs/api/other/tooltip.md @@ -15,7 +15,7 @@ description: "displays tooltips for events" ### Example ~~~jsx -var tooltip = scheduler.tooltip; +const tooltip = scheduler.tooltip; tooltip.hide(); tooltip.show(event, text); ~~~ diff --git a/docs/api/other/version.md b/docs/api/other/version.md index 752acd4a..774e37b6 100644 --- a/docs/api/other/version.md +++ b/docs/api/other/version.md @@ -15,5 +15,5 @@ description: "returns the version of dhtmlxScheduler" ### Example ~~~jsx -var version = scheduler.version; // "4.0" +const version = scheduler.version; // "4.0" ~~~ diff --git a/docs/api/overview/others_overview.md b/docs/api/overview/others_overview.md index 72bf4232..a506ed3b 100644 --- a/docs/api/overview/others_overview.md +++ b/docs/api/overview/others_overview.md @@ -12,7 +12,7 @@ description: You can explore Others overview in the documentation of the DHTMLX | [](api/other/config.md) | @getshort(api/other/config.md) | | [](api/other/date.md) | @getshort(api/other/date.md) | | [](api/other/env.md) | @getshort(api/other/env.md) | -| [](api/other/i18n.md) | @getshort(api/other/i18n.md) | +| [](api/other/i18n.md) | @getshort(api/other/i18n.md) | | [](api/other/ical.md) | @getshort(api/other/ical.md) | | [](api/other/json.md) | @getshort(api/other/json.md) | | [](api/other/keys.md) | @getshort(api/other/keys.md) | diff --git a/docs/api/template/day_date.md b/docs/api/template/day_date.md index f72fef61..6cac1f0a 100644 --- a/docs/api/template/day_date.md +++ b/docs/api/template/day_date.md @@ -23,7 +23,7 @@ description: "specifies the date in the header of the Day and Units views" ~~~jsx scheduler.templates.day_date = function(date){ - var formatFunc = scheduler.date.date_to_str(scheduler.config.default_date); + const formatFunc = scheduler.date.date_to_str(scheduler.config.default_date); return formatFunc(date); }; ~~~ diff --git a/docs/api/template/event_date.md b/docs/api/template/event_date.md index 05ee4869..51d75bc7 100644 --- a/docs/api/template/event_date.md +++ b/docs/api/template/event_date.md @@ -23,7 +23,7 @@ description: "specifies the time part of the start and end dates of the event. M ~~~jsx scheduler.templates.event_date = function(date){ - var formatFunc = scheduler.date.date_to_str(scheduler.config.hour_date); + const formatFunc = scheduler.date.date_to_str(scheduler.config.hour_date); return formatFunc(date); } ~~~ diff --git a/docs/api/template/format_date.md b/docs/api/template/format_date.md index 7f11374b..39f530a0 100644 --- a/docs/api/template/format_date.md +++ b/docs/api/template/format_date.md @@ -22,7 +22,7 @@ description: "сonverts date object to a date string. Used to send data back to ### Example ~~~jsx -var dateToStr = scheduler.date.date_to_str("%Y-%m-%d %H:%i"); +const dateToStr = scheduler.date.date_to_str("%Y-%m-%d %H:%i"); scheduler.templates.format_date = function(date){ return dateToStr (date); }; diff --git a/docs/api/template/load_format.md b/docs/api/template/load_format.md index b326f9d5..a330c0af 100644 --- a/docs/api/template/load_format.md +++ b/docs/api/template/load_format.md @@ -23,7 +23,7 @@ description: "specifies the format of requests in the dynamic loading mode" ~~~jsx scheduler.templates.load_format = function(date){ - var dateToStr_func = scheduler.date.date_to_str(scheduler.config.load_date); + const dateToStr_func = scheduler.date.date_to_str(scheduler.config.load_date); return dateToStr_func(date); } diff --git a/docs/api/template/month_date.md b/docs/api/template/month_date.md index ff956fa0..3bf3354c 100644 --- a/docs/api/template/month_date.md +++ b/docs/api/template/month_date.md @@ -23,7 +23,7 @@ description: "specifies the date in the header of the view" ~~~jsx scheduler.templates.month_date = function(date){ - var dateToStr_func = scheduler.date.date_to_str(scheduler.config.month_date); + const dateToStr_func = scheduler.date.date_to_str(scheduler.config.month_date); return dateToStr_func(date); }; ~~~ diff --git a/docs/api/template/month_day.md b/docs/api/template/month_day.md index ef73218b..43f4d1d4 100644 --- a/docs/api/template/month_day.md +++ b/docs/api/template/month_day.md @@ -23,7 +23,7 @@ description: "specifies the format of the day in a cell" ~~~jsx scheduler.templates.month_day = function(date){ - var dateToStr_func = scheduler.date.date_to_str(scheduler.config.month_day); + const dateToStr_func = scheduler.date.date_to_str(scheduler.config.month_day); return dateToStr_func(date); }; ~~~ diff --git a/docs/api/template/parse_date.md b/docs/api/template/parse_date.md index dba56cd3..a781c86b 100644 --- a/docs/api/template/parse_date.md +++ b/docs/api/template/parse_date.md @@ -22,8 +22,8 @@ description: "converts date string into a Date object" ### Example ~~~jsx -var cfg = scheduler.config; -var strToDate = scheduler.date.str_to_date(cfg.date_format, cfg.server_utc); +const cfg = scheduler.config; +const strToDate = scheduler.date.str_to_date(cfg.date_format, cfg.server_utc); scheduler.templates.parse_date = function(date){ return strToDate (date); diff --git a/docs/api/template/timelinename_second_scale_date.md b/docs/api/template/timelinename_second_scale_date.md index 04d7cb36..2fc0c22a 100644 --- a/docs/api/template/timelinename_second_scale_date.md +++ b/docs/api/template/timelinename_second_scale_date.md @@ -26,8 +26,8 @@ description: "specifies items of the second X-Axis" ~~~jsx scheduler.templates.timeline_second_scale_date = function(date){ - var timeline = scheduler.matrix.timeline; - var func = scheduler.date.date_to_str( + const timeline = scheduler.matrix.timeline; + const func = scheduler.date.date_to_str( (timeline.second_scale && timeline.second_scale.x_date)? timeline.second_scale.x_date:scheduler.config.hour_date ); diff --git a/docs/api/template/tooltip_date_format.md b/docs/api/template/tooltip_date_format.md index d0e14ef8..f8c8dcbc 100644 --- a/docs/api/template/tooltip_date_format.md +++ b/docs/api/template/tooltip_date_format.md @@ -23,7 +23,7 @@ description: "specifies the format of start and end dates displayed in the toolt ~~~jsx scheduler.templates.tooltip_date_format=function (date){ - var formatFunc = scheduler.date.date_to_str("%Y-%m-%d %H:%i"); + const formatFunc = scheduler.date.date_to_str("%Y-%m-%d %H:%i"); return formatFunc(date); } ~~~ diff --git a/docs/api/template/week_agenda_scale_date.md b/docs/api/template/week_agenda_scale_date.md index ab729614..ff7279d6 100644 --- a/docs/api/template/week_agenda_scale_date.md +++ b/docs/api/template/week_agenda_scale_date.md @@ -26,7 +26,7 @@ description: "the date of a day cell of the view" ~~~jsx scheduler.templates.week_agenda_scale_date = function(date) { - var scale_date_format = scheduler.date.date_to_str("%l, %F %d"); + const scale_date_format = scheduler.date.date_to_str("%l, %F %d"); return scale_date_format(date); }; ~~~ diff --git a/docs/api/template/week_scale_date.md b/docs/api/template/week_scale_date.md index 05588d18..9d83bc4a 100644 --- a/docs/api/template/week_scale_date.md +++ b/docs/api/template/week_scale_date.md @@ -22,7 +22,7 @@ description: "specifies the date in the sub-header of the view" ### Example ~~~jsx -var format = scheduler.date.date_to_str(scheduler.config.day_date); +const format = scheduler.date.date_to_str(scheduler.config.day_date); scheduler.templates.week_scale_date = function(date){ return format(date); }; diff --git a/docs/api/template/xml_date.md b/docs/api/template/xml_date.md index 9e889ba5..252c7c8e 100644 --- a/docs/api/template/xml_date.md +++ b/docs/api/template/xml_date.md @@ -24,8 +24,8 @@ The template is deprecated ### Example ~~~jsx -var cfg = scheduler.config; -var str_to_date = scheduler.date.str_to_date(cfg.xml_date, cfg.server_utc); +const cfg = scheduler.config; +const str_to_date = scheduler.date.str_to_date(cfg.xml_date, cfg.server_utc); scheduler.templates.xml_date = function(date){ return str_to_date(date); @@ -39,8 +39,8 @@ scheduler.templates.xml_date = function(date){ ::: ~~~js -var cfg = scheduler.config; -var strToDate = scheduler.date.str_to_date(cfg.date_format, cfg.server_utc); +const cfg = scheduler.config; +const strToDate = scheduler.date.str_to_date(cfg.date_format, cfg.server_utc); scheduler.templates.parse_date = function(date){ return strToDate (date); diff --git a/docs/api/template/xml_format.md b/docs/api/template/xml_format.md index 79e4e40a..de3f5885 100644 --- a/docs/api/template/xml_format.md +++ b/docs/api/template/xml_format.md @@ -24,8 +24,8 @@ The template is deprecated ### Example ~~~jsx -var cfg = scheduler.config; -var date_to_str = scheduler.date.date_to_str(cfg.xml_date, cfg.server_utc); +const cfg = scheduler.config; +const date_to_str = scheduler.date.date_to_str(cfg.xml_date, cfg.server_utc); scheduler.templates.xml_format = function(date){ return date_to_str(date); @@ -39,7 +39,7 @@ scheduler.templates.xml_format = function(date){ ::: ~~~js -var dateToStr = scheduler.date.date_to_str("%Y-%m-%d %H:%i"); +const dateToStr = scheduler.date.date_to_str("%Y-%m-%d %H:%i"); scheduler.templates.format_date = function(date){ return dateToStr (date); }; diff --git a/docs/api/template/year_date.md b/docs/api/template/year_date.md index a0288c12..4b3aa5d2 100644 --- a/docs/api/template/year_date.md +++ b/docs/api/template/year_date.md @@ -22,7 +22,7 @@ description: "specifies the date in the header of the view" ### Example ~~~jsx -var date_to_str=scheduler.date.date_to_str(scheduler.locale.labels.year_tab +" %Y"); +const date_to_str = scheduler.date.date_to_str(scheduler.locale.labels.year_tab +" %Y"); scheduler.templates.year_date = function(date){ return date_to_str(date); diff --git a/docs/export/excel.md b/docs/export/excel.md index 9a9f3bed..d62295a9 100644 --- a/docs/export/excel.md +++ b/docs/export/excel.md @@ -27,7 +27,7 @@ To export scheduler's data to an Excel document, do the following steps: /*!*/ ~~~ @@ -63,7 +63,7 @@ The **exportToExcel()** method takes as a parameter an object with several prope -[Calling the export method with optional properties](Calling the export method with optional properties) +Calling the export method with optional properties: ~~~js scheduler.exportToExcel({ name:"My document.xls", @@ -73,7 +73,7 @@ scheduler.exportToExcel({ ], server:"https://myapp.com/myexport/scheduler", start: new Date(1999, 01, 01), - end: new Date(2022, 01, 01) + end: new Date(2027, 01, 01) }); ~~~ @@ -107,7 +107,7 @@ To export scheduler's data to an iCal string, do the following steps: /*!*/ ~~~ @@ -127,7 +127,7 @@ The **exportToICal()** method takes as a parameter an object with the following -[Calling the export method with optional properties](Calling the export method with optional properties) +Calling the export method with server property: ~~~js scheduler.exportToICal({ server:"https://myapp.com/myexport/scheduler" diff --git a/docs/export/pdf-multi.md b/docs/export/pdf-multi.md index d85a022d..e1997461 100644 --- a/docs/export/pdf-multi.md +++ b/docs/export/pdf-multi.md @@ -28,13 +28,13 @@ scheduler.toPDFRange(from, to, view, path, scheme); 4. '_custom_' - can be used to enable a custom colormap ( requires php coding, see details in chapter ['Export to PDF. Configuring service'](export/pdf.md#using-export-services) 5. '_fullcolor_' - actual background and text colors that are used while exporting -For example, to export pages of the 'week' view from 1st January, 2012 till 1st February, 2012, you may call the method as in: +For example, to export pages of the 'week' view from 1st January, 2027 till 1st February, 2027, you may call the method as in: ~~~js scheduler.toPDFRange( - new Date(2012,0,1), - new Date(2012, 1,1), + new Date(2027,0,1), + new Date(2027, 1,1), 'week', 'generate.php', 'fullcolor' diff --git a/docs/export/png.md b/docs/export/png.md index e22da01f..ddad0259 100644 --- a/docs/export/png.md +++ b/docs/export/png.md @@ -92,7 +92,7 @@ The [exportToPNG()](api/method/exporttopng.md) method takes as a parameter an ob -[Calling the export method with optional properties](Calling the export method with optional properties) +Calling the export method with optional properties: ~~~js scheduler.exportToPNG({ format:"A4", diff --git a/docs/export/serialization.md b/docs/export/serialization.md index 26257d0d..8decd284 100644 --- a/docs/export/serialization.md +++ b/docs/export/serialization.md @@ -22,7 +22,7 @@ To serialize scheduler data to an XML string, use the [toXML](api/method/toxml.m ~~~js -var xml = scheduler.toXML(); //xml string +const xml = scheduler.toXML(); //xml string ~~~ @@ -36,7 +36,7 @@ To serialize scheduler data to a JSON string, use the [toJSON](api/method/tojson ~~~js -var json_string = scheduler.toJSON(); //json string +const json_string = scheduler.toJSON(); //json string ~~~ @@ -54,7 +54,7 @@ To serialize scheduler data to an ICal string, use the [toICal](api/method/toica ~~~js -var ical_string = scheduler.toICal(); //ical string +const ical_string = scheduler.toICal(); //ical string ~~~ @@ -118,7 +118,7 @@ If you are using the "recurring" extension, you need to define extra attributes, ~~~js scheduler.data_attributes = function(){ - var empty = function(a){ return a||""; } + const empty = function(a){ return a||""; } return [["id"], ["text"], ["start_date",scheduler.templates.xml_format], @@ -164,7 +164,7 @@ scheduler.plugins({ ~~~js function save(){ - var form = document.getElementById("xml_form"); + let form = document.getElementById("xml_form"); form.elements.data.value = scheduler.toXML(); form.submit(); } diff --git a/docs/guides/collisions.md b/docs/guides/collisions.md index 22299f98..357d6552 100644 --- a/docs/guides/collisions.md +++ b/docs/guides/collisions.md @@ -11,7 +11,7 @@ In many use cases you may need to limit the count of events per time slot. For e To control the number of events in a time slot, use the [**collision**](guides/extensions-list.md#collision) extension. -[Activating the 'collision' extension](Activating the 'collision' extension) +Activating the 'collision' extension: ~~~js scheduler.plugins({ collision: true @@ -26,7 +26,7 @@ From this moment on, the scheduler won't allow users to place 2 events in the sa By default, the allowable number of events in a time slot is 1. To regulate this number, use the [collision_limit](api/config/collision_limit.md) property: -[Denying creating more than 2 events per time slot](Denying creating more than 2 events per time slot) +Denying creating more than 2 events per time slot: ~~~js scheduler.config.collision_limit = 2; //allows creating 2 events per time slot ~~~ @@ -42,7 +42,7 @@ the [onEventCollision](api/event/oneventcollision.md) event which checks the val But remember, the [onEventCollision](api/event/oneventcollision.md) event isn't triggered while loading data. So, to control a number of items in a time slot while data is being loaded to the scheduler, you need to extend the previous code a bit: -[Denying creating/loading more than 2 events per time slot](Denying creating/loading more than 2 events per time slot) +Denying creating/loading more than 2 events per time slot: ~~~js scheduler.config.collision_limit = 2; //allows creating 2 events per time slot scheduler.attachEvent("onEventLoading", function(ev){ /*!*/ @@ -57,9 +57,9 @@ The [checkCollision](api/method/checkcollision.md) method checks whether an even To get the number of events resided in a time slot, use the [getEvents](api/method/getevents.md) method: -[Getting the number of events in a time slot](Getting the number of events in a time slot) +Getting the number of events in a time slot: ~~~js -var count = scheduler.getEvents(ev.start_date, ev.end_date).length; +const count = scheduler.getEvents(ev.start_date, ev.end_date).length; ~~~ Note, the [getEvents](api/method/getevents.md) method iterates over all events and compares their dates, so it may take a bit of time if you are using thousands of events. @@ -99,7 +99,7 @@ scheduler.attachEvent("onLoadEnd", function(){ To enable the dynamic loading, you need to call the [setLoadMode](api/method/setloadmode.md) method and load your script after that: -[Enabling the dynamic loading](Enabling the dynamic loading) +Enabling the dynamic loading: ~~~js scheduler.setLoadMode("month"); scheduler.load("/some"); diff --git a/docs/guides/combo.md b/docs/guides/combo.md index 92a17465..04b7b992 100644 --- a/docs/guides/combo.md +++ b/docs/guides/combo.md @@ -10,7 +10,7 @@ A combo box presented by the
"; // a container for the event's content diff --git a/docs/guides/custom-lightbox-editor.md b/docs/guides/custom-lightbox-editor.md index 96a4bcfe..e2076a35 100644 --- a/docs/guides/custom-lightbox-editor.md +++ b/docs/guides/custom-lightbox-editor.md @@ -10,7 +10,7 @@ To create a custom control (editor), define a new object in the next way: ~~~js scheduler.form_blocks["my_editor"]={ render:function(config){ // config- section configuration object - var height="(config.height||50)+""px"; + const height="(config.height||50)+""px"; return "
" + "
"; }, @@ -38,7 +38,7 @@ Usage: ~~~js scheduler.locale.labels.section_details = "Details"; -scheduler.config.lightbox.sections="[" +scheduler.config.lightbox.sections = [ { name:"details", height:35, map_to:"text", type:"my_editor", focus:true}, { name:"time", height:72, type:"time", map_to:"auto"} ]; @@ -88,14 +88,14 @@ scheduler.form_blocks["my_editor"]={ return node.querySelector("[name='text']").value; }, focus:function(node){ - var input = node.querySelector("[name='text']"); + const input = node.querySelector("[name='text']"); input.select(); input.focus(); } }; scheduler.locale.labels.section_description = "Details"; -scheduler.config.lightbox.sections="[" +scheduler.config.lightbox.sections = [ { name:"description", map_to:"text", type:"my_editor" , focus:true}, { name:"time", height:72, type:"time", map_to:"auto"} ]; diff --git a/docs/guides/customizing-edit-select-bars.md b/docs/guides/customizing-edit-select-bars.md index bc0f9f17..f3bf816a 100644 --- a/docs/guides/customizing-edit-select-bars.md +++ b/docs/guides/customizing-edit-select-bars.md @@ -136,7 +136,7 @@ Depending on the value of this property, you'd like to hide/show the 'delete' bu ~~~js scheduler.attachEvent("onClick", function(id){ - var event = scheduler.getEvent(id); + const event = scheduler.getEvent(id); if (event.important) scheduler.config.icons_select = ["icon_details"]; else diff --git a/docs/guides/data-formats.md b/docs/guides/data-formats.md index 575baa7c..663b5fdf 100644 --- a/docs/guides/data-formats.md +++ b/docs/guides/data-formats.md @@ -29,18 +29,18 @@ In this article you will find examples for all supported data formats. Meeting - April 11, 2019 14:00 - April 11, 2019 17:00 + April 11, 2027 14:00 + April 11, 2027 17:00 Conference - April 15, 2019 12:00 - April 18, 2019 19:00 + April 15, 2027 12:00 + April 18, 2027 19:00 Interview - April 24, 2019 09:00 - April 24, 2019 10:00 + April 24, 2027 09:00 + April 24, 2027 10:00 @@ -53,20 +53,20 @@ In this article you will find examples for all supported data formats. { "id":"1", "text":"Meeting", - "start_date":"2019-04-11 14:00", - "end_date":"2019-04-11 17:00" + "start_date":"2027-04-11 14:00", + "end_date":"2027-04-11 17:00" }, { "id":"2", "text":"Conference", - "start_date":"2019-04-15 12:00", - "end_date":"2019-04-18 19:00" + "start_date":"2027-04-15 12:00", + "end_date":"2027-04-18 19:00" }, { "id":"3", "text":"Interview", - "start_date":"2019-04-24 09:00", - "end_date":"2019-04-24 10:00" + "start_date":"2027-04-24 09:00", + "end_date":"2027-04-24 10:00" } ] ~~~ @@ -81,29 +81,29 @@ For example, it is useful when you want to [load Timeline and Units sections fro "data":[ { "id":"1", - "start_date":"2019-03-02 00:00:00", - "end_date":"2019-03-04 00:00:00", + "start_date":"2027-03-02 00:00:00", + "end_date":"2027-03-04 00:00:00", "text":"dblclick me!", "type":"1" }, { "id":"2", - "start_date":"2019-03-09 00:00:00", - "end_date":"2019-03-11 00:00:00", + "start_date":"2027-03-09 00:00:00", + "end_date":"2027-03-11 00:00:00", "text":"and me!", "type":"2" }, { "id":"3", - "start_date":"2019-03-16 00:00:00", - "end_date":"2019-03-18 00:00:00", + "start_date":"2027-03-16 00:00:00", + "end_date":"2027-03-18 00:00:00", "text":"and me too!", "type":"3" }, { "id":"4", - "start_date":"2019-03-02 08:00:00", - "end_date":"2019-03-02 14:10:00", + "start_date":"2027-03-02 08:00:00", + "end_date":"2027-03-02 14:10:00", "text":"Type 2 event", "type":"2" } @@ -124,18 +124,18 @@ For example, it is useful when you want to [load Timeline and Units sections fro - 04/11/2013 14:00 - 04/11/2013 17:00 + 04/11/2027 14:00 + 04/11/2027 17:00 - 04/15/2013 12:00 - 04/18/2013 19:00 + 04/15/2027 12:00 + 04/18/2027 19:00 - 04/24/2013 09:00 - 04/24/2013 10:00 + 04/24/2027 09:00 + 04/24/2027 10:00 ~~~ @@ -148,18 +148,18 @@ VERSION:2.0 PRODID:-//dhtmlXScheduler//NONSGML v2.2//EN DESCRIPTION: BEGIN:VEVENT -DTSTART:20130411T140000 -DTEND:20130411T170000 +DTSTART:20270411T140000 +DTEND:20270411T170000 SUMMARY:Meeting END:VEVENT BEGIN:VEVENT -DTSTART:20130415 -DTEND:20130418 +DTSTART:20270415 +DTEND:20270418 SUMMARY:Conference END:VEVENT BEGIN:VEVENT -DTSTART:20130424T090000 -DTEND:20130424T100000 +DTSTART:20270424T090000 +DTEND:20270424T100000 SUMMARY:Interview END:VEVENT END:VCALENDAR @@ -179,8 +179,8 @@ Let's consider an example when the initial set (presented [above](guides/data-fo { "id":"1", "text":"Meeting", - "start_date":"2019-04-11 14:00", - "end_date":"2019-04-11 17:00" + "start_date":"2027-04-11 14:00", + "end_date":"2027-04-11 17:00" "room":327, "holder":"James" } @@ -204,8 +204,8 @@ scheduler.templates.event_text = function(start, end, event){ - 04/11/2013 14:00 - 04/11/2013 17:00 + 04/11/2027 14:00 + 04/11/2027 17:00 327 @@ -221,8 +221,8 @@ VERSION:2.0 PRODID:-//dhtmlXScheduler//NONSGML v2.2//EN DESCRIPTION: BEGIN:VEVENT -DTSTART:20130411T140000 -DTEND:20130411T170000 +DTSTART:20270411T140000 +DTEND:20270411T170000 SUMMARY:Meeting ROOM:327 HOLDER:James diff --git a/docs/guides/date-formats.md b/docs/guides/date-formats.md index b6b8d977..21bceadf 100644 --- a/docs/guides/date-formats.md +++ b/docs/guides/date-formats.md @@ -17,8 +17,8 @@ To convert a Date object to a string, use the [date_to_str](api/other/date.md) m *The method returns a function that converts a Date object to a string of the specified format:* ~~~js -var formatFunc = scheduler.date.date_to_str("%d/%m/%Y"); -var date = formatFunc(new Date(2013, 05, 29)); // -> "29/06/2013" +const formatFunc = scheduler.date.date_to_str("%d/%m/%Y"); +const date = formatFunc(new Date(2027, 05, 29)); // -> "29/06/2027" ~~~ @@ -35,8 +35,8 @@ To convert a string to a Date object, use the [str_to_date](api/other/date.md) m You can generate a date convert function as follows: ~~~js -var formatFunc = scheduler.date.str_to_date("%d/%m/%Y"); -var date = formatFunc("29/06/2019"); // -> 29 June, 2019 00:00:00 +const formatFunc = scheduler.date.str_to_date("%d/%m/%Y"); +const date = formatFunc("29/06/2027"); // -> 29 June, 2027 00:00:00 ~~~ @@ -45,8 +45,8 @@ var date = formatFunc("29/06/2019"); // -> 29 June, 2019 00:00:00 To convert local time to UTC, use the [convert_to_utc](api/other/date.md) method: ~~~js -//29 June, 2019 14:00 (local time) -> 29 June, 2019 12:00 (utc) -var time = scheduler.date.convert_to_utc(new Date(2019, 05, 29, 14, 00)); +//29 June, 2027 14:00 (local time) -> 29 June, 2027 12:00 (utc) +const time = scheduler.date.convert_to_utc(new Date(2027, 05, 29, 14, 00)); ~~~ ## Adding(subtracting) a time interval to(from) a date @@ -54,8 +54,8 @@ var time = scheduler.date.convert_to_utc(new Date(2019, 05, 29, 14, 00)); To add(subtract) a time interval to(from) the specified date, use the [add](api/other/date.md) method: ~~~js -//adds 1 year to the specified date: 29 June, 2019 -> 29 June, 2020 -var newDate = scheduler.date.add(new Date(2019, 05, 29), 1, 'year'); +//adds 1 year to the specified date: 29 June, 2027 -> 29 June, 2020 +const newDate = scheduler.date.add(new Date(2027, 05, 29), 1, 'year'); ~~~ diff --git a/docs/guides/drag-between.md b/docs/guides/drag-between.md index c9cc0677..90254e34 100644 --- a/docs/guides/drag-between.md +++ b/docs/guides/drag-between.md @@ -24,11 +24,11 @@ scheduler.plugins({ drag_between: true }); -scheduler.init('scheduler_here',new Date(2019, 5, 30),"week"); +scheduler.init('scheduler_here',new Date(2027, 5, 30),"week"); scheduler.load("./data/units.xml"); scheduler2 = Scheduler.getSchedulerInstance(); -scheduler2.init('scheduler_here_2',new Date(2019, 5, 30),"week"); +scheduler2.init('scheduler_here_2',new Date(2027, 5, 30),"week"); ~~~ @@ -40,24 +40,24 @@ To deny dragging events from a scheduler, set the [drag_out](api/config/drag_out ~~~js scheduler.config.drag_out = false;//restrict dragging events from this scheduler /*!*/ -scheduler.init('scheduler_here',new Date(2019, 5,30),"week"); +scheduler.init('scheduler_here',new Date(2027, 5,30),"week"); scheduler.load("./data/units.xml"); scheduler2 = Scheduler.getSchedulerInstance(); -scheduler2.init('scheduler_here_2',new Date(2019, 5, 30),"week"); +scheduler2.init('scheduler_here_2',new Date(2027, 5, 30),"week"); ~~~ To deny dragging events to a scheduler, set the [drag_in](api/config/drag_in.md) property to *false*: ~~~js -scheduler.init('scheduler_here',new Date(2019, 5, 30),"week"); +scheduler.init('scheduler_here',new Date(2027, 5, 30),"week"); scheduler.load("./data/units.xml"); scheduler2.config.drag_in = false;//restrict dragging events to this scheduler /*!*/ scheduler2 = Scheduler.getSchedulerInstance(); -scheduler2.init('scheduler_here_2',new Date(2019, 5, 30),"week"); +scheduler2.init('scheduler_here_2',new Date(2027, 5, 30),"week"); ~~~ Sample **"samples/20_multiple/06_drag_between_layout.html"** provided in the [Scheduler PRO package](https://dhtmlx.com/docs/products/dhtmlxScheduler/). diff --git a/docs/guides/event-object-operations.md b/docs/guides/event-object-operations.md index 7aebb158..5729d536 100644 --- a/docs/guides/event-object-operations.md +++ b/docs/guides/event-object-operations.md @@ -11,12 +11,12 @@ To get the event object, use the [getEvent](api/method/getevent.md) method: ~~~js scheduler.parse([ - {id:1, start_date:"2019-05-13 6:00", end_date:"2019-05-13 8:00", text:"Event 1"}, - {id:2, start_date:"2019-06-09 6:00", end_date:"2019-06-09 8:00", text:"Event 2"} + {id:1, start_date:"2027-05-13 6:00", end_date:"2027-05-13 8:00", text:"Event 1"}, + {id:2, start_date:"2027-06-09 6:00", end_date:"2027-06-09 8:00", text:"Event 2"} ]); ... -var eventObj = scheduler.getEvent(1); -//->{id:1, start_date:"2019-05-13 6:00", end_date:"2019-05-13 8:00", text:"Event 1"} +const eventObj = scheduler.getEvent(1); +//->{id:1, start_date:"2027-05-13 6:00", end_date:"2027-05-13 8:00", text:"Event 1"} ~~~ ## Getting events from the specified time period @@ -24,7 +24,7 @@ var eventObj = scheduler.getEvent(1); To get a collection of events that occur during the specified period, use [getEvents](api/method/getevents.md) method: ~~~js -var evs = scheduler.getEvents(new Date(2019,1,10),new Date(2019,2,10)); +const evs = scheduler.getEvents(new Date(2027,1,10),new Date(2027,2,10)); //where evs is an array of events' objects ~~~ @@ -33,14 +33,14 @@ var evs = scheduler.getEvents(new Date(2019,1,10),new Date(2019,2,10)); To get all events loaded to the scheduler, call the [getEvents](api/method/getevents.md) method without parameters as in: ~~~js -var evs = scheduler.getEvents(); +const evs = scheduler.getEvents(); // returns all events as an array of objects ~~~ ## Getting the next event starting from the current date ~~~js -var evs = scheduler.getEvents(new Date(), new Date(9999,1,1)); +const evs = scheduler.getEvents(new Date(), new Date(9999,1,1)); //evs - list of all oncoming events evs.sort(function(a,b){ return (a.start_date > b.start_date ? 1 : -1); }); //evs[0] - nearest upcoming event @@ -53,25 +53,25 @@ To get the event's id by the value of one of the event's properties, use the fol Example: getting the event's id by the event's text. ~~~js scheduler.parse([ - {id:1, start_date:"2019-05-13 6:00", end_date:"2019-05-13 8:00", text:"Event 1"}, - {id:2, start_date:"2019-06-09 6:00", end_date:"2019-06-09 8:00", text:"Event 2"} + {id:1, start_date:"2027-05-13 6:00", end_date:"2027-05-13 8:00", text:"Event 1"}, + {id:2, start_date:"2027-06-09 6:00", end_date:"2027-06-09 8:00", text:"Event 2"} ]); ... -var evs = scheduler.getEvents(); //gets all events of the scheduler -for(var i = 0; i < evs.length; i++){ //goes through all events to find the one needed +const evs = scheduler.getEvents(); //gets all events of the scheduler +for(let i = 0; i < evs.length; i++){ //goes through all events to find the one needed if (evs[i].text == "Event 2") - var eventId = evs[i].id;// -> 2 + const eventId = evs[i].id;// -> 2 }; ~~~ If you know an approximate time when the needed event occurs, you'd better to limit the returned collection of events, in order to increase the app's speed: ~~~js -var evs = scheduler.getEvents(new Date(2019,05,01),new Date(2019,05,10)); -for(var i = 0; i < evs.length; i++){ +const evs = scheduler.getEvents(new Date(2027,05,01),new Date(2027,05,10)); +for(let i = 0; i < evs.length; i++){ if (evs[i].text == "Event 2") - var eventId = evs[i].id;// -> 2 + const eventId = evs[i].id;// -> 2 }; ~~~ @@ -111,9 +111,9 @@ scheduler.config.lightbox.sections = [ ]; scheduler.templates.event_text = scheduler.templates.event_bar_text = function(start, end, event){ - var options = scheduler.serverList("options"); + const options = scheduler.serverList("options"); - for(var i = 0; i < options.length; i++){ + for(let i = 0; i < options.length; i++){ if(options[i].key == event.type){ return options[i].label; } diff --git a/docs/guides/ical-export-import.md b/docs/guides/ical-export-import.md index f8eef22f..8fb19672 100644 --- a/docs/guides/ical-export-import.md +++ b/docs/guides/ical-export-import.md @@ -88,8 +88,8 @@ It's an example of events' array that is referred to in import/export data from/ $events = array( array( "id" => 1, - "start_date" => "2010-04-05 08:00:00", - "end_date" => "2012-04-09 09:00:00", + "start_date" => "2027-04-05 08:00:00", + "end_date" => "2027-04-09 09:00:00", "text" => "text1", "rec_type" => "week_2___3,5", "event_pid" => null, @@ -98,8 +98,8 @@ $events = array( array( "id" => 2, - "start_date" => "2010-04-06 12:00:00", - "end_date" => "2010-04-06 18:00:00", + "start_date" => "2027-04-06 12:00:00", + "end_date" => "2027-04-06 18:00:00", "text" => "text2", "rec_type" => "", "event_pid" => null, @@ -108,8 +108,8 @@ $events = array( array( "id" => 3, - "start_date" => "2010-04-07 12:00:00", - "end_date" => "2010-04-07 18:00:00", + "start_date" => "2027-04-07 12:00:00", + "end_date" => "2027-04-07 18:00:00", "text" => "text3", "rec_type" => "", "event_pid" => null, @@ -118,8 +118,8 @@ $events = array( array( "id" => 4, - "start_date" => "2010-04-08 12:00:00", - "end_date" => "2010-04-08 18:00:00", + "start_date" => "2027-04-08 12:00:00", + "end_date" => "2027-04-08 18:00:00", "text" => "text4", "rec_type" => "", "event_pid" => null, diff --git a/docs/guides/initialization.md b/docs/guides/initialization.md index 2f94d2f6..c88ba075 100644 --- a/docs/guides/initialization.md +++ b/docs/guides/initialization.md @@ -140,7 +140,7 @@ To display a basic Scheduler on the page, take the following steps: "today", "next" ]; - scheduler.init('scheduler_here',new Date(2020,0,1),"week"); /*!*/ + scheduler.init('scheduler_here',new Date(2027,0,1),"week"); /*!*/ ~~~ @@ -341,18 +341,18 @@ To include dhtmlxScheduler files into a RequireJS-based app, you need to follow ~~~js requirejs(["codebase/dhtmlxscheduler"], function(dhx){ - var scheduler = dhx.scheduler; - var Scheduler = dhx.Scheduler;// for Enterprise builds + const scheduler = dhx.scheduler; + const Scheduler = dhx.Scheduler;// for Enterprise builds scheduler.init('scheduler_here',new Date(),"week"); scheduler.parse([ { - id: 1, text: "Event 1", start_date: "2022-07-15 09:00", - end_date: "2022-07-15 10:00" + id: 1, text: "Event 1", start_date: "2027-07-15 09:00", + end_date: "2027-07-15 10:00" }, { - id: 2, text: "Event 2", start_date: "2022-07-15 10:00", - end_date: "2022-07-15 11:00" + id: 2, text: "Event 2", start_date: "2027-07-15 10:00", + end_date: "2027-07-15 11:00" } ]); }); @@ -379,17 +379,17 @@ requirejs.config({ requirejs(["dhtmlxscheduler"], function (dhx) { - var scheduler = dhx.scheduler; + const scheduler = dhx.scheduler; scheduler.init('scheduler_here',new Date(),"week"); scheduler.parse([ { - id: 1, text: "Event 1", start_date: "2022-07-15 09:00", - end_date: "2022-07-15 10:00" + id: 1, text: "Event 1", start_date: "2027-07-15 09:00", + end_date: "2027-07-15 10:00" }, { - id: 2, text: "Event 2", start_date: "2022-07-15 10:00", - end_date: "2022-07-15 11:00" + id: 2, text: "Event 2", start_date: "2027-07-15 10:00", + end_date: "2027-07-15 11:00" } ]); }); diff --git a/docs/guides/keyboard-navigation.md b/docs/guides/keyboard-navigation.md index 911e4719..6ecba1d8 100644 --- a/docs/guides/keyboard-navigation.md +++ b/docs/guides/keyboard-navigation.md @@ -84,9 +84,9 @@ To create a new keyboard shortcut, you need to use the [addShortcut](api/method/ ~~~js scheduler.addShortcut("shift+w", function(e){ - var target = e.target; + const target = e.target; if(target.closest("[event_id]")) - var eventId = target.getAttribute("event_id"); + const eventId = target.getAttribute("event_id"); if(eventId) scheduler.showQuickInfo(eventId); @@ -112,7 +112,7 @@ You can get the handler of the keyboard shorcut with the help of the method [get - **scope** - (*string*) the name of the context element to which the shortcut is attached ~~~js -var shortcut_handler = scheduler.getShortcutHandler("shift+w","event"); +const shortcut_handler = scheduler.getShortcutHandler("shift+w","event"); ~~~ The method returns a function, which presents the handler of the shortcut call. diff --git a/docs/guides/lightbox-editors-manipulations.md b/docs/guides/lightbox-editors-manipulations.md index 4eeb3d67..ba5916ef 100644 --- a/docs/guides/lightbox-editors-manipulations.md +++ b/docs/guides/lightbox-editors-manipulations.md @@ -11,7 +11,7 @@ To get/set the value of the section's control, use the [formSection](api/method/ ~~~js //to get the value -var value = scheduler.formSection('description').getValue(); +const value = scheduler.formSection('description').getValue(); //to set the value scheduler.formSection('description').setValue('abc'); @@ -60,8 +60,8 @@ To map a property of an event object to a lightbox section, do the following: "data":[ { "id":"1", - "start_date":"2019-03-02 00:00:00", - "end_date":"2019-03-04 00:00:00", + "start_date":"2027-03-02 00:00:00", + "end_date":"2027-03-04 00:00:00", "text":"Graduation ceremony", "type":"1", "location":"London" @@ -76,7 +76,7 @@ Note, that all properties your data source returns will be added to event object - In order to map a lightbox control to a specific property, assign the name of the event property to the **map_to** property of a section: ~~~js -scheduler.config.lightbox.sections="[" +scheduler.config.lightbox.sections=[ {name:"description", height:70, map_to:"text", type:"textarea" , focus:true}, {name:"locationInput", height:35, map_to:"location", type:"textarea" }, {name:"typeSelect", map_to:"type", type:"select", options:scheduler.serverList("types")}, @@ -140,7 +140,7 @@ You have the possibility to change the order of date-time controls in the 'Time use the **time_format** property: ~~~js -scheduler.config.lightbox.sections="[" +scheduler.config.lightbox.sections= [ {name:"description", height:130, map_to:"text", type:"textarea" , focus:true}, {name:"time", ..., time_format:["%H:%i","%m","%d","%Y"]} ]; @@ -173,11 +173,11 @@ To make a section hidden for specific events, redefine its **set_value** method ~~~js -scheduler.form_blocks.textarea.set_value="function(node,value,ev){" - node.firstChild.value="value||"""; - var style = ev.some_property?"":"none"; - node.style.display="style;" // editor area - node.previousSibling.style.display="style;" //section header +scheduler.form_blocks.textarea.set_value = function(node,value,ev){ + node.firstChild.value= value || ""; + let style = ev.some_property ? "" : "none"; + node.style.display = "style;" // editor area + node.previousSibling.style.display = "style;" //section header scheduler.setLightboxSize(); //correct size of lightbox } ~~~ @@ -244,8 +244,8 @@ scheduler.locale.labels.button_help = "Help label"; - Specify the handler of button clicks: -~~~ -scheduler.form_blocks.textarea.button_click="function(index,button,shead,sbody){" +~~~js +scheduler.form_blocks.textarea.button_click = function(index,button,shead,sbody){ // any custom code } ~~~ @@ -260,7 +260,7 @@ where: You can define the image used for the button through the following CSS class: -~~~js +~~~css .dhx_custom_button_help{ background-image:url(imgs/but_help.gif); } @@ -271,23 +271,23 @@ You can define the image used for the button through the following CSS class: You can make select controls in the lightbox dependent on each other. To do this use [the onchange property](guides/select.md#properties) of the select control, as in: ~~~js -var update_select_options = function(select, options) { // helper function +const update_select_options = function(select, options) { // helper function select.options.length = 0; - for (var i="0;" i function init() { - scheduler.init('scheduler_here', new Date(2025,5,24), "week"); + scheduler.init('scheduler_here', new Date(2027,5,24), "week"); scheduler.load("api/scheduler"); const dp = scheduler.createDataProcessor({ diff --git a/docs/guides/minicalendar.md b/docs/guides/minicalendar.md index 6c49b816..183aa313 100644 --- a/docs/guides/minicalendar.md +++ b/docs/guides/minicalendar.md @@ -147,9 +147,9 @@ scheduler.attachEvent("onSchedulerReady", function(){ return; } // center popup below date label - var offset = $(".dhx_cal_date").offset(); - var width = $(".dhx_cal_date").width(); - var popupWidth = $(".datepicker-dropdown").width(); + let offset = $(".dhx_cal_date").offset(); + let width = $(".dhx_cal_date").width(); + let popupWidth = $(".datepicker-dropdown").width(); $(".datepicker-dropdown").css({ top: offset.bottom + "px", left: (width - popupWidth) / 2 + "px" @@ -186,7 +186,7 @@ All cells of the date picker, that are currently visible in the scheduler, will $(".datepicker-dropdown").find("[data-date]").removeClass("scheduler-date"); // highlight scheduler date - var visibleDates = getVisibleDates(scheduler); + const visibleDates = getVisibleDates(scheduler); visibleDates.forEach(function (date) { $(".datepicker-dropdown").find( "[data-date='" + date + "']" @@ -200,13 +200,13 @@ In order to get the dates that are currently visible, you can use `scheduler.get ~~~js function getVisibleDates(scheduler) { - var minVisible = scheduler.getState().min_date; - var maxVisible = scheduler.getState().max_date; + const minVisible = scheduler.getState().min_date; + const maxVisible = scheduler.getState().max_date; - var current = minVisible; - var result = []; + let current = minVisible; + let result = []; while (current.valueOf() < maxVisible.valueOf()) { - var currentUTC = Date.UTC( + let currentUTC = Date.UTC( current.getFullYear(),current.getMonth(),current.getDate() ); result.push(currentUTC.valueOf()); @@ -239,20 +239,20 @@ To show the tooltip with the amount of events for the date that the user hovers ~~~js function getVisibleEvents(calendarDate, scheduler) { - var min = scheduler.date.month_start(new Date(calendarDate)); - var max = scheduler.date.add(calendarDate, 1, "month"); + const min = scheduler.date.month_start(new Date(calendarDate)); + const max = scheduler.date.add(calendarDate, 1, "month"); min = scheduler.date.week_start(min); if(scheduler.date.week_start(new Date(max)) < max){ max = scheduler.date.week_start(new Date(max)); max = scheduler.date.add(max, 1, "week"); } - var events = scheduler.getEvents(min, max); - var days = {}; + const events = scheduler.getEvents(min, max); + let days = {}; events.forEach(function (event) { - var eventDate = event.start_date; + let eventDate = event.start_date; while(eventDate < event.end_date){ - var day = Date.UTC( + let day = Date.UTC( eventDate.getFullYear(), eventDate.getMonth(), eventDate.getDate() @@ -267,8 +267,8 @@ To show the tooltip with the amount of events for the date that the user hovers } }); - var result = []; - for (var i in days) { + let result = []; + for (let i in days) { result.push({ timestamp: i, count: days[i] }); } return result; @@ -369,7 +369,7 @@ scheduler.plugins({ 2. Set the type of the time section to calendar_time (instead of time): ~~~js //default lightbox definition -scheduler.config.lightbox.sections="[" +scheduler.config.lightbox.sections= [ {name:"description", height:200, map_to:"text", type:"textarea", focus:true}, {name:"time", height:72, type:"time", map_to:"auto"} ]; diff --git a/docs/guides/multiselect.md b/docs/guides/multiselect.md index 8b86be4d..619e36c8 100644 --- a/docs/guides/multiselect.md +++ b/docs/guides/multiselect.md @@ -20,7 +20,7 @@ scheduler.plugins({ scheduler.locale.labels.section_userselect = "Participants"; -scheduler.config.lightbox.sections="[" +scheduler.config.lightbox.sections = [ { name:"description", height:50, map_to:"text", type:"textarea", focus:true }, { name:"userselect", height:22, map_to:"user_id", type:"multiselect", options: scheduler.serverList("users"), vertical:"false" }, @@ -44,7 +44,7 @@ scheduler.plugins({ ~~~ 2. Add the section to the lightbox configuration: ~~~js -scheduler.config.lightbox.sections = +scheduler.config.lightbox.sections = [ { name:"description", ... }, { name:"userselect", height:22, map_to:"user_id", type:"multiselect", options: scheduler.serverList("user_id"), vertical:false }, @@ -106,7 +106,7 @@ The following properties are mostly important and commonly set for the 'multisel Generally, to set values for the multiselect buttons you should use the [options](api/config/lightbox.md) parameter: ~~~js -scheduler.config.lightbox.sections = +scheduler.config.lightbox.sections = [ { name:"userselect", type:"multiselect", ... options:[ @@ -176,7 +176,7 @@ Note, you can use the [updateCollection](api/method/updatecollection.md) method ::: ~~~js -var oldOptions = scheduler.serverList("users").slice(); +const oldOptions = scheduler.serverList("users").slice(); scheduler.updateCollection("users", [ {"value":"4","label":"John"}, {"value":"5","label":"Paul"}, diff --git a/docs/guides/multiuser-live-updates.md b/docs/guides/multiuser-live-updates.md index 4284e51a..1d635812 100644 --- a/docs/guides/multiuser-live-updates.md +++ b/docs/guides/multiuser-live-updates.md @@ -34,7 +34,7 @@ Initialize `RemoteEvents` and set up `DataProcessor` in the same section of code ~~~js const AUTH_TOKEN = "token"; -scheduler.init('scheduler_here', new Date(2025, 3, 20), "week"); +scheduler.init('scheduler_here', new Date(2027, 3, 20), "week"); scheduler.load("/events"); const dp = scheduler.createDataProcessor({ diff --git a/docs/guides/popups-and-modals.md b/docs/guides/popups-and-modals.md index bafab892..5b9fb7d6 100644 --- a/docs/guides/popups-and-modals.md +++ b/docs/guides/popups-and-modals.md @@ -298,7 +298,7 @@ The **label** parameter is mandatory, while **css** and **value** options can be The **css** will be prefixed with the "scheduler_" string and added to the button element as a class name: -~~~js +~~~css .scheduler_link_delete_btn div{ background:red; } @@ -309,7 +309,7 @@ The **css** will be prefixed with the "scheduler_" string and added to the butto To hide a modal message box manually, you can use the **scheduler.modalbox.hide()** method. As a parameter it takes the div container of the modalbox: ~~~js -var box = scheduler.modalbox({ +const box = scheduler.modalbox({ title: "Settings", text: " ... html code here... ", buttons: ["Save", "Defaults", "Cancel"], @@ -324,7 +324,7 @@ scheduler.modalbox.hide(box); For the **alert** and **confirm** modal boxes, you also need to use the **scheduler.modalbox.hide()** method: ~~~js -var box = scheduler.confirm({ +const box = scheduler.confirm({ text: "Continue?", ok:"Yes", cancel:"No", diff --git a/docs/guides/quick-info.md b/docs/guides/quick-info.md index 8c2fffd1..509cc2b9 100644 --- a/docs/guides/quick-info.md +++ b/docs/guides/quick-info.md @@ -18,7 +18,7 @@ To activate the big-buttons scheduler, enable the ["Quick Info"](guides/extensio scheduler.plugins({ quick_info: true }); - scheduler.init('scheduler_here',new Date(2009,5,30),"day"); + scheduler.init('scheduler_here',new Date(2027,5,30),"day"); ... @@ -253,20 +253,20 @@ namespace SchedulerApp.Models new SchedulerEvent { Name = "Event 1", - StartDate = new DateTime(2019, 1, 15, 2, 0, 0), - EndDate = new DateTime(2019, 1, 15, 4, 0, 0) + StartDate = new DateTime(2027, 1, 15, 2, 0, 0), + EndDate = new DateTime(2027, 1, 15, 4, 0, 0) }, new SchedulerEvent() { Name = "Event 2", - StartDate = new DateTime(2019, 1, 17, 3, 0, 0), - EndDate = new DateTime(2019, 1, 17, 6, 0, 0) + StartDate = new DateTime(2027, 1, 17, 3, 0, 0), + EndDate = new DateTime(2027, 1, 17, 6, 0, 0) }, new SchedulerEvent() { Name = "Multiday event", - StartDate = new DateTime(2019, 1, 15, 0, 0, 0), - EndDate = new DateTime(2019, 1, 20, 0, 0, 0) + StartDate = new DateTime(2027, 1, 15, 0, 0, 0), + EndDate = new DateTime(2027, 1, 20, 0, 0, 0) } }; @@ -571,7 +571,7 @@ Web API is done, now we can return to our HTML page and configure scheduler to m ~~~js title="wwwroot/index.html" scheduler.config.date_format = "%Y-%m-%d %H:%i"; -scheduler.init("scheduler_here", new Date(2019, 0, 20), "week"); +scheduler.init("scheduler_here", new Date(2027, 0, 20), "week"); // load data from backend scheduler.load("/api/events"); diff --git a/docs/integrations/dotnet/howtostart-dotnet.md b/docs/integrations/dotnet/howtostart-dotnet.md index fff899af..44839526 100644 --- a/docs/integrations/dotnet/howtostart-dotnet.md +++ b/docs/integrations/dotnet/howtostart-dotnet.md @@ -100,7 +100,7 @@ Open the newly created view and put the following code into it: diff --git a/docs/integrations/other/jquery-integration.md b/docs/integrations/other/jquery-integration.md index 27b55758..af83eb83 100644 --- a/docs/integrations/other/jquery-integration.md +++ b/docs/integrations/other/jquery-integration.md @@ -12,7 +12,7 @@ A standard scheduler used jQuery can be initialized as follows: ~~~js $(function(){ $(".myscheduler").dhx_scheduler({ - date:new Date(2019,4,25), + date:new Date(2027,4,25), mode:"month" }); diff --git a/docs/integrations/salesforce/howtostart-salesforce.md b/docs/integrations/salesforce/howtostart-salesforce.md index 066312a9..8ebf0d18 100644 --- a/docs/integrations/salesforce/howtostart-salesforce.md +++ b/docs/integrations/salesforce/howtostart-salesforce.md @@ -20,7 +20,7 @@ If you use some other technology, check the list of available integration varian - [dhtmlxScheduler with Ruby on Rails](integrations/other/howtostart-ruby.md) - [dhtmlxScheduler with dhtmlxConnector](integrations/other/howtostart-connector.md) -We will use [SalesForce CLI](https://developer.salesforce.com/tools/salesforcecli) to create Lightning Web Component and upload it to an organization. See [this article](https://developer.salesforce.com/docs/atlas.en-us.sfdx_setup.meta/sfdx_setup/sfdx_setup_intro.htm) for installation guidance. You can also install [Salesforce Extension Pack](https://marketplace.visualstudio.com/items?itemName="salesforce.salesforcedx-vscode)" to Visual Studio Code for working with development orgs. +We will use [SalesForce CLI](https://developer.salesforce.com/tools/salesforcecli) to create Lightning Web Component and upload it to an organization. See [this article](https://developer.salesforce.com/docs/atlas.en-us.sfdx_setup.meta/sfdx_setup/sfdx_setup_intro.htm) for installation guidance. You can also install [Salesforce Extension Pack](https://marketplace.visualstudio.com/items?itemName=salesforce.salesforcedx-vscode) to Visual Studio Code for working with development orgs. :::note The complete source code of the demo created in this tutorial is [available on GitHub](https://github.com/DHTMLX/salesforce-scheduler-demo). diff --git a/docs/integrations/svelte/howtostart-svelte.md b/docs/integrations/svelte/howtostart-svelte.md index 4c6da3b2..b9a1b711 100644 --- a/docs/integrations/svelte/howtostart-svelte.md +++ b/docs/integrations/svelte/howtostart-svelte.md @@ -118,7 +118,7 @@ To display Scheduler on the page, we need to set the container to render the com onMount(() => { scheduler = Scheduler.getSchedulerInstance(); scheduler.skin = "terrace"; - scheduler.init(container, new Date(2023, 9, 6), "week"); + scheduler.init(container, new Date(2027, 9, 6), "week"); return () => scheduler.destructor(); }); @@ -166,14 +166,14 @@ To add data into the Scheduler, we need to provide a data set. Let's create the export function getData() { const data = [ { - start_date: "2024-06-10 6:00", - end_date: "2024-06-10 8:00", + start_date: "2027-06-10 6:00", + end_date: "2027-06-10 8:00", text: "Event 1", id: 1, }, { - start_date: "2024-06-13 10:00", - end_date: "2024-06-13 18:00", + start_date: "2027-06-13 10:00", + end_date: "2027-06-13 18:00", text: "Event 2", id: 2, }, @@ -210,7 +210,7 @@ And use props in the **scheduler.parse()** method in the Scheduler component: onMount(() => { scheduler = Scheduler.getSchedulerInstance(); scheduler.skin = "terrace" - scheduler.init(container, new Date(2024, 5, 10), "week"); + scheduler.init(container, new Date(2027, 5, 10), "week"); return () => scheduler.destructor(); }); diff --git a/docs/integrations/vue/howtostart-vue.md b/docs/integrations/vue/howtostart-vue.md index 3657255c..05853bb4 100644 --- a/docs/integrations/vue/howtostart-vue.md +++ b/docs/integrations/vue/howtostart-vue.md @@ -124,7 +124,7 @@ import "@dhx/trial-scheduler/codebase/dhtmlxscheduler.css"; export default { mounted() { let scheduler = Scheduler.getSchedulerInstance(); - let date = scheduler.init(this.$refs.cont, new Date(2023, 9, 6), "week"); + let date = scheduler.init(this.$refs.cont, new Date(2027, 9, 6), "week"); this.scheduler = scheduler; }, unmounted() { @@ -185,14 +185,14 @@ To add data into the Scheduler, we need to provide a data set. Let's create the export function getData() { const data = [ { - start_date: "2024-06-10 6:00", - end_date: "2024-06-10 8:00", + start_date: "2027-06-10 6:00", + end_date: "2027-06-10 8:00", text: "Event 1", id: 1, }, { - start_date: "2024-06-13 10:00", - end_date: "2024-06-13 18:00", + start_date: "2027-06-13 10:00", + end_date: "2027-06-13 18:00", text: "Event 2", id: 2, }, @@ -236,7 +236,7 @@ export default { props: ["events"], mounted() { let scheduler = Scheduler.getSchedulerInstance(); - let date = scheduler.init(this.$refs.cont, new Date(2023, 5, 10), "week"); + let date = scheduler.init(this.$refs.cont, new Date(2027, 5, 10), "week"); scheduler.parse(this.events); this.scheduler = scheduler; diff --git a/docs/views/agenda-legacy.md b/docs/views/agenda-legacy.md index 5ba36bba..5f96a525 100644 --- a/docs/views/agenda-legacy.md +++ b/docs/views/agenda-legacy.md @@ -75,11 +75,11 @@ The first label is commonly specified while adding the view tab to the scheduler To set the range of displayable dates, use the [agenda_end](api/config/agenda_end.md) and [agenda_start](api/config/agenda_start.md) properties: ~~~js -//to display dates from 1st June 2019 -scheduler.config.agenda_start = new Date(2019, 5, 1); +//to display dates from 1st June 2026 +scheduler.config.agenda_start = new Date(2026, 5, 1); -//to display dates until 1st June,2020 -scheduler.config.agenda_end = new Date(2020,5,1); +//to display dates until 1st June,2027 +scheduler.config.agenda_end = new Date(2027,5,1); ~~~ ## Enabling Next/Previous/Today buttons diff --git a/docs/views/agenda.md b/docs/views/agenda.md index b5561846..9aa70fcb 100644 --- a/docs/views/agenda.md +++ b/docs/views/agenda.md @@ -95,8 +95,8 @@ After that the displayed range will be limited to one week. You can also set a fixed displayed range by specifying the [agenda_end](api/config/agenda_end.md) and [agenda_start](api/config/agenda_start.md) properties: ~~~js -scheduler.config.agenda_start = new Date(2023, 5, 1); -scheduler.config.agenda_end = new Date(2023,6,1); +scheduler.config.agenda_start = new Date(2027, 5, 1); +scheduler.config.agenda_end = new Date(2027,6,1); ~~~ ## Related guides diff --git a/docs/views/day.md b/docs/views/day.md index 657727a5..692728c9 100644 --- a/docs/views/day.md +++ b/docs/views/day.md @@ -16,7 +16,7 @@ The Day view is added to the [basic scheduler's markup](guides/scheduler-markup. ~~~js //just usual initialization. The Day view will be added by default -scheduler.init('scheduler_here',new Date(2019,0,10),"week"); +scheduler.init('scheduler_here',new Date(2027,0,10),"week"); ... scheduler.load("/data/events"); ~~~ diff --git a/docs/views/grid.md b/docs/views/grid.md index d475de14..f8934c67 100644 --- a/docs/views/grid.md +++ b/docs/views/grid.md @@ -51,8 +51,8 @@ scheduler.createGridView({ {id:"date", label:'Date', sort:'date', width:'*'}, {id:"text", label:'Text', sort:'str', width:200, align:'left'} ], - from:new Date(2019, 3, 10),//left border of the allowable date range - to:new Date(2019, 5, 23) //right border of the allowable date range + from:new Date(2027, 3, 10),//left border of the allowable date range + to:new Date(2027, 5, 23) //right border of the allowable date range }); ~~~ @@ -64,15 +64,15 @@ scheduler.createGridView({ The extension allows limiting active dates, so that the users won't be able to get the dates beyond the range. -If, for example, you want to to limit active dates and set the allowable range from **1st January, 2024** to **1st January, 2025** , define the following configuration: +If, for example, you want to to limit active dates and set the allowable range from **1st January, 2026** to **1st January, 2027** , define the following configuration: ~~~js scheduler.createGridView({ name:"grid", .. - from:new Date(2024, 0, 1), - to:new Date(2025, 0, 1) + from:new Date(2026, 0, 1), + to:new Date(2027, 0, 1) }); ~~~ diff --git a/docs/views/map.md b/docs/views/map.md index fc40fa37..9ca39ba0 100644 --- a/docs/views/map.md +++ b/docs/views/map.md @@ -83,7 +83,7 @@ scheduler.locale.labels.section_location = "Location"; ~~~js //'map' is the default name of the Map view -scheduler.init('scheduler_here',new Date(2024,5,11),"map"); +scheduler.init('scheduler_here',new Date(2027,5,11),"map"); ~~~ @@ -114,7 +114,7 @@ scheduler.config.map_settings = { } } ... -scheduler.init('scheduler_here',new Date(2024,5,11),"map"); +scheduler.init('scheduler_here',new Date(2027,5,11),"map"); ~~~ [Check the details below](views/map.md#map-related-configuration-options) @@ -126,7 +126,7 @@ scheduler.init('scheduler_here',new Date(2024,5,11),"map"); ~~~js scheduler.config.map_view_provider = "googleMap"; ... -scheduler.init('scheduler_here',new Date(2024,5,11),"map"); +scheduler.init('scheduler_here',new Date(2027,5,11),"map"); ~~~ Possible values are the following: *"googleMap", "openStreetMaps", "mapbox"*. @@ -138,7 +138,7 @@ scheduler.config.map_settings = { view_provider: "googleMap" } ... -scheduler.init('scheduler_here',new Date(2024,5,11),"map"); +scheduler.init('scheduler_here',new Date(2027,5,11),"map"); ~~~ ## Map-related configuration options @@ -170,7 +170,7 @@ scheduler.config.map_settings = { view_provider: "googleMap" } ... -scheduler.init('scheduler_here',new Date(2024,5,11),"map"); +scheduler.init('scheduler_here',new Date(2027,5,11),"map"); ~~~ The configuration object contains the following properties: diff --git a/docs/views/month.md b/docs/views/month.md index 4366e81e..f78e3fa6 100644 --- a/docs/views/month.md +++ b/docs/views/month.md @@ -16,7 +16,7 @@ The Month view is added to the [basic scheduler's markup](guides/scheduler-marku ~~~js //just usual initialization. The Month view will be added by default -scheduler.init('scheduler_here',new Date(2019,0,10),"month"); +scheduler.init('scheduler_here',new Date(2027,0,10),"month"); ... scheduler.load("/data/events"); ~~~ @@ -46,7 +46,7 @@ To set the maximum number of events in a cell, use the [max_month_events](api/co ~~~ scheduler.config.max_month_events = 3; .. -scheduler.init('scheduler_here', new Date(2019,5,30),"month"); +scheduler.init('scheduler_here', new Date(2027,5,30),"month"); ~~~ If the number of assigned events exceeds the option's value, the scheduler will display the 'View more' link. @@ -92,7 +92,7 @@ scheduler.plugins({ //the user will be skipped to the Week view after clicking on a day link scheduler.config.active_link_view = "week"; ... -scheduler.init('scheduler_here',new Date(2012,7,6),"month"); +scheduler.init('scheduler_here',new Date(2027,7,6),"month"); ~~~ @@ -109,7 +109,7 @@ To provide resizing of multi-day events by drag-n-drop, set the [resize_month_ev //resizing multi-day events by drag-n-drop scheduler.config.resize_month_events = true; /*!*/ -scheduler.init('scheduler_here',new Date(2019,0,10),"month"); +scheduler.init('scheduler_here',new Date(2027,0,10),"month"); ~~~ [Resizable events in Month view](https://docs.dhtmlx.com/scheduler/samples/02_customization/32_resizable_month_events.html) @@ -121,7 +121,7 @@ To provide resizing both multi- and single-day events by drag-n-drop, set the [r //resizing both single- and multi-day events by drag-n-drop scheduler.config.resize_month_events = true;/*!*/ scheduler.config.resize_month_timed= true; /*!*/ -scheduler.init('scheduler_here',new Date(2019,0,10),"month"); +scheduler.init('scheduler_here',new Date(2027,0,10),"month"); ~~~ **Please, note:** diff --git a/docs/views/timeline.md b/docs/views/timeline.md index 6d061844..9198fb04 100644 --- a/docs/views/timeline.md +++ b/docs/views/timeline.md @@ -151,7 +151,7 @@ scheduler.createTimelineView({ ... }); -var timeline = scheduler.matrix.timeline; +const timeline = scheduler.matrix.timeline; ~~~ After that you can make use of the methods enumerated below. @@ -161,7 +161,7 @@ After that you can make use of the methods enumerated below. To get a timeline view object, use the [getView](api/method/getview.md) method. It takes the name of the view as a parameter. However, if no parameter has been passed, the method returns the current view. ~~~js -var timeline = scheduler.getView(); +const timeline = scheduler.getView(); timeline.x_size = 8; scheduler.setCurrentView(); ~~~ @@ -257,7 +257,7 @@ timeline.scrollTo({left:300, top:500}); - to get the X-coordinate of a specific date on the scale, use the **posFromDate()** method. Pass the date as a parameter: ~~~js -var left = timeline.posFromDate(new Date()); +const left = timeline.posFromDate(new Date()); ~~~ :::note @@ -267,7 +267,7 @@ The method returns 0 or the maximum X-coordinate for dates outside the scale. - to get the Y-coordinate of a specific row, use the **getSectionTop()** method. It takes as a parameter the number of the section: ~~~js -var top = timeline.getSectionTop(section.key); +const top = timeline.getSectionTop(section.key); ~~~ :::note @@ -300,7 +300,7 @@ const top = timeline.getEventTop(scheduler.getEvent(event.id)); To return the current position of the scrollbar in the timeline, use the **timeline.getScrollPosition()** method. It returns an object with the current position of the scrollbar. ~~~js -var timeline = scheduler.getView(); +const timeline = scheduler.getView(); timeline.getScrollPosition(); // { left: 0, top: 0 } ~~~ @@ -315,7 +315,7 @@ You can also use the **onScroll** event handler to catch the new scroll position - **top** - (*number*) the top coordinate of the scroll position ~~~js -var timeline = scheduler.getView(); +const timeline = scheduler.getView(); timeline.attachEvent("onScroll", function(left, top){}); ~~~ @@ -341,9 +341,9 @@ where: and returns an array of event objects. ~~~js -var timeline = scheduler.getView(); +const timeline = scheduler.getView(); -var events = timeline.selectEvents({ +const events = timeline.selectEvents({ section: section.key, date: date, selectNested: true @@ -396,11 +396,11 @@ scheduler.createTimelineView({ scheduler.init('scheduler_here'); scheduler.parse([ - {text:"Conference", start_date:"17/09/2012 12:00", end_date:"18/09/2012 21:00", + {text:"Conference", start_date:"17/09/2027 12:00", end_date:"18/09/2027 21:00", room_id:"1"}, - {text:"Meeting", start_date:"17/09/2012 09:00", end_date:"17/09/2012 21:00", + {text:"Meeting", start_date:"17/09/2027 09:00", end_date:"17/09/2027 21:00", room_id:"2"}, - {text:"Conference", start_date:"17/09/2012 15:00", end_date:"18/09/2012 15:00", + {text:"Conference", start_date:"17/09/2027 15:00", end_date:"18/09/2027 15:00", room_id:"3"} ]); ~~~ @@ -451,7 +451,7 @@ scheduler.createTimelineView({ y_property: "section_id", /*!*/ ... }); -scheduler.init('scheduler_here', new Date(2012, 5, 30), "timeline"); +scheduler.init('scheduler_here', new Date(2027, 5, 30), "timeline"); scheduler.parse([ { id:1, text:"Task A", section_id:'1', ...},/*!*/ @@ -607,9 +607,9 @@ and totally remove them from the timeline, you can use the following code: ~~~js scheduler._click.dhx_cal_next_button = function(dummy,step){ - var mode = scheduler.getState().mode; - var minDate = scheduler.getState().min_date; - var formFunc = scheduler.date.date_to_str("%D"); + const mode = scheduler.getState().mode; + const minDate = scheduler.getState().min_date; + const formFunc = scheduler.date.date_to_str("%D"); // ignoring weekends if(mode=='timeline'){ @@ -889,7 +889,7 @@ scheduler.createTimelineView({ render: "bar", scrollable: true, /*!*/ column_width: 70, /*!*/ - scroll_position:new Date(2018, 0, 15) /*!*/ + scroll_position:new Date(2027, 0, 15) /*!*/ }); ~~~ @@ -1001,15 +1001,15 @@ After that the template you've specified for this timeline will be called. For e scheduler.templates.timeline_cell_value = function (evs, date, section){ if(section.children){ - var timeline = scheduler.getView(); + const timeline = scheduler.getView(); - var events = timeline.selectEvents({ + const events = timeline.selectEvents({ section: section.key, date: date, selectNested: true }); - var className = ""; + let className = ""; if(!events.length){ className = "load-marker-no"; }else if(events.length < 3){ diff --git a/docs/views/units.md b/docs/views/units.md index 5151c600..7e80df61 100644 --- a/docs/views/units.md +++ b/docs/views/units.md @@ -74,11 +74,11 @@ scheduler.createUnitsView({ scheduler.init('scheduler_here'); scheduler.parse([ - {id:1, text:"Task1", start_date:"2019-09-17 12:00", end_date:"2019-09-18 21:00", + {id:1, text:"Task1", start_date:"2027-09-17 12:00", end_date:"2027-09-18 21:00", unit_id:"1"}, - {id:2, text:"Task2", start_date:"2019-09-17 09:00", end_date:"2019-09-17 21:00", + {id:2, text:"Task2", start_date:"2027-09-17 09:00", end_date:"2027-09-17 21:00", unit_id:"3"}, - {id:3, text:"Task3", start_date:"2019-09-17 15:00", end_date:"2019-09-18 15:00", + {id:3, text:"Task3", start_date:"2027-09-17 15:00", end_date:"2027-09-18 15:00", unit_id:"2"} ]); ~~~ @@ -178,7 +178,7 @@ scheduler.createUnitsView({ property: "section_id", /*!*/ ... }); -scheduler.init('scheduler_here', new Date(2019, 5, 30), "unit"); +scheduler.init('scheduler_here', new Date(2027, 5, 30), "unit"); scheduler.parse([ { id:1, text:"Task A", section_id:'1', ...},/*!*/ @@ -240,15 +240,15 @@ The data response for the [load](api/method/load.md) method should contain a col "data":[ { "id":"1", - "start_date":"2019-03-02 15:00:00", - "end_date":"2019-03-04 16:00:00", + "start_date":"2027-03-02 15:00:00", + "end_date":"2027-03-04 16:00:00", "text":"Team meeting", "type_id":"1" }, { "id":"2", - "start_date":"2019-03-02 17:00:00", - "end_date":"2019-03-04 18:00:00", + "start_date":"2027-03-02 17:00:00", + "end_date":"2027-03-04 18:00:00", "text":"Strategy meeting", "type_id":"2" } diff --git a/docs/views/week.md b/docs/views/week.md index 5c90f865..8c3557dd 100644 --- a/docs/views/week.md +++ b/docs/views/week.md @@ -16,7 +16,7 @@ The Week view is added to the [basic scheduler's markup]([Scheduler Markup](guid ~~~js //just usual initialization. The Week view will be added by default -scheduler.init('scheduler_here',new Date(2019,0,10),"week"); +scheduler.init('scheduler_here',new Date(2027,0,10),"week"); ... scheduler.load("/data/events"); ~~~ diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/api_overview.md b/i18n/de/docusaurus-plugin-content-docs/current/api/api_overview.md index b0a9c7af..4c6bd931 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/api/api_overview.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/api_overview.md @@ -445,18 +445,18 @@ description: You can explore an API overview in the documentation of the DHTMLX | Name | Description | |--------------------------------------------|---------------------------------------------| -| [](api/other/ajax.md) | @getshort(api/method/ajax_other.md) | -| [](api/other/config.md) | @getshort(api/method/config_other.md) | -| [](api/other/date.md) | @getshort(api/method/date_other.md) | -| [](api/other/env.md) | @getshort(api/method/env_other.md) | -| [](api/other/i18n.md) | @getshort(api/method/i18n_other.md) | -| [](api/other/ical.md) | @getshort(api/method/ical_other.md) | -| [](api/other/json.md) | @getshort(api/method/json_other.md) | -| [](api/other/keys.md) | @getshort(api/method/keys_other.md) | -| [](api/other/locale.md) | @getshort(api/method/locale_other.md) | -| [](api/other/matrix.md) | @getshort(api/method/matrix_other.md) | -| [](api/other/skin.md) | @getshort(api/method/skin_other.md) | -| [](api/other/templates.md) | @getshort(api/method/templates_other.md) | -| [](api/other/tooltip.md) | @getshort(api/method/tooltip_other.md) | -| [](api/other/version.md) | @getshort(api/method/version_other.md) | -| [](api/other/xy.md) | @getshort(api/method/xy_other.md) | +| [](api/other/ajax.md) | @getshort(api/other/ajax.md) | +| [](api/other/config.md) | @getshort(api/other/config.md) | +| [](api/other/date.md) | @getshort(api/other/date.md) | +| [](api/other/env.md) | @getshort(api/other/env.md) | +| [](api/other/i18n.md) | @getshort(api/other/i18n.md) | +| [](api/other/ical.md) | @getshort(api/other/ical.md) | +| [](api/other/json.md) | @getshort(api/other/json.md) | +| [](api/other/keys.md) | @getshort(api/other/keys.md) | +| [](api/other/locale.md) | @getshort(api/other/locale.md) | +| [](api/other/matrix.md) | @getshort(api/other/matrix.md) | +| [](api/other/skin.md) | @getshort(api/other/skin.md) | +| [](api/other/templates.md) | @getshort(api/other/templates.md) | +| [](api/other/tooltip.md) | @getshort(api/other/tooltip.md) | +| [](api/other/version.md) | @getshort(api/other/version.md) | +| [](api/other/xy.md) | @getshort(api/other/xy.md) | diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/config/active_link_view.md b/i18n/de/docusaurus-plugin-content-docs/current/api/config/active_link_view.md index 46619f04..2dac8f3d 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/api/config/active_link_view.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/config/active_link_view.md @@ -17,7 +17,7 @@ description: "Ermöglicht es, die Tageszahlen in der Monatsansicht als anklickba ~~~jsx scheduler.config.active_link_view = "week"; // gibt die Ansicht an, zu der von der Monatsansicht gesprungen wird ... -scheduler.init('scheduler_here',new Date(2012,7,6),"month"); +scheduler.init('scheduler_here',new Date(2027,7,6),"month"); ~~~ **Default value:** day diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/config/agenda_end.md b/i18n/de/docusaurus-plugin-content-docs/current/api/config/agenda_end.md index ff635944..4c018660 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/api/config/agenda_end.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/config/agenda_end.md @@ -15,10 +15,10 @@ description: "definiert das Datum, bis zu dem Ereignisse angezeigt werden" ### Example ~~~jsx -scheduler.config.agenda_start = new Date(2012, 7, 1); -scheduler.config.agenda_end = new Date(2014, 7, 1); +scheduler.config.agenda_start = new Date(2025, 7, 1); +scheduler.config.agenda_end = new Date(2027, 7, 1); ... -scheduler.init('scheduler_here', new Date(2013, 0, 10), "agenda"); +scheduler.init('scheduler_here', new Date(2026, 0, 10), "agenda"); ~~~ **Default value:** ein Jahr nach 'agenda_start' (Wert) diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/config/agenda_start.md b/i18n/de/docusaurus-plugin-content-docs/current/api/config/agenda_start.md index 3bdad375..9470f8e6 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/api/config/agenda_start.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/config/agenda_start.md @@ -15,10 +15,10 @@ description: "Gibt das Datum an, ab dem Ereignisse angezeigt werden" ### Example ~~~jsx -scheduler.config.agenda_start = new Date(2012, 7, 1); -scheduler.config.agenda_end = new Date(2014, 7, 1); +scheduler.config.agenda_start = new Date(2025, 7, 1); +scheduler.config.agenda_end = new Date(2027, 7, 1); ... -scheduler.init('scheduler_here', new Date(2010, 0, 10), "agenda"); +scheduler.init('scheduler_here', new Date(2026, 0, 10), "agenda"); ~~~ **Default value:** das Datum des aktuellen Benutzers diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/config/api_date.md b/i18n/de/docusaurus-plugin-content-docs/current/api/config/api_date.md index c7499261..e72869bd 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/api/config/api_date.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/config/api_date.md @@ -17,7 +17,7 @@ description: "Legt das Datumsformat fest, das von der api_date ~~~jsx scheduler.config.api_date="%Y-%m-%d %H:%i"; -scheduler.init("scheduler_here",new Date(2009,10,1),"week"); +scheduler.init("scheduler_here",new Date(2027,10,1),"week"); ~~~ **Default value:** "%d-%m-%Y %H:%i" diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/config/auto_end_date.md b/i18n/de/docusaurus-plugin-content-docs/current/api/config/auto_end_date.md index c77ff7ca..7d1c049f 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/api/config/auto_end_date.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/config/auto_end_date.md @@ -18,7 +18,7 @@ description: "aktualisiert automatisch das Enddatum eines Events, wenn das Start scheduler.config.event_duration = 60; scheduler.config.auto_end_date = true; ... -scheduler.init('scheduler_here',new Date(2013,05,11),"week"); +scheduler.init('scheduler_here',new Date(2027,05,11),"week"); ~~~ **Default value:** false diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/config/buttons_left.md b/i18n/de/docusaurus-plugin-content-docs/current/api/config/buttons_left.md index cef92563..fa4fc6a5 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/api/config/buttons_left.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/config/buttons_left.md @@ -24,7 +24,7 @@ description: "Enthält eine Reihe von Buttons, die sich in der unteren linken Ec ~~~ diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/method/marktimespan.md b/i18n/de/docusaurus-plugin-content-docs/current/api/method/marktimespan.md index d510e8d6..c2c91cfa 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/api/method/marktimespan.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/method/marktimespan.md @@ -76,8 +76,8 @@ Das Konfigurationsobjekt unterstützt die folgenden Eigenschaften: ~~~js -//verhindert das Erstellen von Events ab dem 3. Mai 2012 bis 'end_date' -start_date:new Date(2012,4,3) +//verhindert das Erstellen von Events ab dem 3. Mai 2027 bis 'end_date' +start_date:new Date(2027,4,3) ~~~ @@ -88,8 +88,8 @@ start_date:new Date(2012,4,3) ~~~js -//verhindert das Erstellen von Events vom 'start_date' bis zum 3. September 2012 -end_date:new Date(2012,8,3) +//verhindert das Erstellen von Events vom 'start_date' bis zum 3. September 2027 +end_date:new Date(2027,8,3) ~~~ @@ -102,7 +102,7 @@ end_date:new Date(2012,8,3) ~~~js days:[0, 2, 6] // begrenzt Sonntag, Dienstag und Samstag days:"fullweek" // begrenzt die ganze Woche -days:new Date(2012,6,1) // blockiert den 1. Juli 2012 +days:new Date(2027,6,1) // blockiert den 1. Juli 2027 ~~~ @@ -208,7 +208,7 @@ Es gibt zwei gültige Eigenschaftensets, die verwendet werden können:
  • `days`
  • `zones`
  • `invert_zones`
  • `css`
  • `html`
  • `type`
  • `sections`
~~~js -var config ={ +const config ={ days: 1, zones: [9*60, 15*60], css: "cssClassName", @@ -226,9 +226,9 @@ var config ={ ~~~js -var config ={ - start_date: new Date(2012,7,13), - end_date: new Date(2012,7,14), +const config ={ + start_date: new Date(2027,7,13), + end_date: new Date(2027,7,14), css: "cssClassName", sections: { unit: 5 diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/method/message.md b/i18n/de/docusaurus-plugin-content-docs/current/api/method/message.md index 22d575d7..347a051c 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/api/method/message.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/method/message.md @@ -22,7 +22,7 @@ description: "öffnet eine message box des gewählten Typs" ### Example ~~~jsx -var box = scheduler.message({ +const box = scheduler.message({ type:"confirm-warning", text:"Are you sure you want to do it?" }); diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/method/modalbox.md b/i18n/de/docusaurus-plugin-content-docs/current/api/method/modalbox.md index d1c618a8..90f434f1 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/api/method/modalbox.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/method/modalbox.md @@ -22,7 +22,7 @@ description: "öffnet eine modalbox" ### Example ~~~jsx -var box = scheduler.modalbox({ +const box = scheduler.modalbox({ title: "Close", type: "alert-warning" }); diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/method/parse.md b/i18n/de/docusaurus-plugin-content-docs/current/api/method/parse.md index 7da1e71f..1c5abb2e 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/api/method/parse.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/method/parse.md @@ -1,7 +1,7 @@ --- -sidebar_label: "parse" -title: "parse method" -description: "lädt Daten aus einer clientseitigen Ressource" +sidebar_label: parse +title: "Parse-Methode" +description: "Lädt Daten aus einer clientseitigen Ressource" --- # parse @@ -14,31 +14,29 @@ description: "lädt Daten aus einer clientseitigen Ressource" ### Parameters -- `data` - (required) *object* - eine Zeichenkette oder ein Objekt, das die Daten enthält +- `data` - (erforderlich) *object* - ein String oder Objekt, das Daten darstellt ### Example ~~~jsx scheduler.parse([ - { start_date:"2020-05-13 6:00", end_date:"2020-05-13 8:00", text:"Event 1"}, - { start_date:"2020-06-09 6:00", end_date:"2020-06-09 8:00", text:"Event 2"} + { start_date: "2027-05-13 6:00", end_date: "2027-05-13 8:00", text: "Event 1" }, + { start_date: "2027-06-09 6:00", end_date: "2027-06-09 8:00", text: "Event 2" } ]); ~~~ ### Related samples -- [Coloring events](https://docs.dhtmlx.com/scheduler/samples/02_customization/01_events_coloring.html) -- [Displaying events as a cascade](https://docs.dhtmlx.com/scheduler/samples/02_customization/24_cascade_event_display.html) - -### Details +- [Ereignisse einfärben](https://docs.dhtmlx.com/scheduler/samples/02_customization/01_events_coloring.html) +- [Ereignisse als Kaskade anzeigen](https://docs.dhtmlx.com/scheduler/samples/02_customization/24_cascade_event_display.html) ## Migration -Ab Version 5.2 erkennt der Scheduler das Datenformat automatisch. +Ab Version 5.2 und später erkennt der Scheduler automatisch das Datenformat. -In früheren Versionen (vor 5.2) akzeptierte die Methode zwei Parameter: +Vor Version 5.2 hatte die Methode zwei Parameter: -- **data** - (*object*) eine Zeichenkette oder ein Objekt mit den Daten; -- **type** - (*string*) optionale Angabe des Datentyps ('json', 'xml', 'ical'). Standard war 'xml' +- `data` - (*object*) ein String oder Objekt, das Daten darstellt +- `type` - (*string*) optional, (*'json', 'xml', 'ical'*) der Datentyp. Der Standardwert ist *'xml'* ### Related API - [onBeforeParse](api/event/onbeforeparse.md) @@ -49,4 +47,4 @@ In früheren Versionen (vor 5.2) akzeptierte die Methode zwei Parameter: - [Beispiele für Datenformate](guides/data-formats.md) ### Change log -- Der zweite Parameter **type** wurde in Version 5.2 entfernt. +- Der zweite `type`-Parameter der Methode wurde in v5.2 entfernt. \ No newline at end of file diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/method/removeshortcut.md b/i18n/de/docusaurus-plugin-content-docs/current/api/method/removeshortcut.md index 8de76b27..f4f2da52 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/api/method/removeshortcut.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/method/removeshortcut.md @@ -22,7 +22,7 @@ description: "entfernt eine Tastenkombination (keyboard shortcut)" ~~~jsx // Hinzufügen eines Shortcuts scheduler.addShortcut("shift+w", function(e){ - var eventId = scheduler.locate(e); + const eventId = scheduler.locate(e); if(eventId) scheduler.showQuickInfo(eventId); },"event"); diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/method/render.md b/i18n/de/docusaurus-plugin-content-docs/current/api/method/render.md index b9b47e3d..0208daa4 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/api/method/render.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/method/render.md @@ -26,7 +26,7 @@ scheduler.render(); // zu einem anderen Datum wechseln -scheduler.render(new Date(2020,7,4)); +scheduler.render(new Date(2027,7,4)); // zu einer anderen Ansicht wechseln scheduler.render(null, "week"); diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/method/renderevent.md b/i18n/de/docusaurus-plugin-content-docs/current/api/method/renderevent.md index 0ce122a4..96469ace 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/api/method/renderevent.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/method/renderevent.md @@ -24,8 +24,8 @@ description: "erstellt den HTML-Inhalt für eine benutzerdefinierte Event-Box" ~~~jsx scheduler.renderEvent = function(container, ev) { - var container_width = container.style.width; - var html = "
"; ... container.innerHTML = html; diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/method/resetlightbox.md b/i18n/de/docusaurus-plugin-content-docs/current/api/method/resetlightbox.md index 552e4488..df2da3cd 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/api/method/resetlightbox.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/method/resetlightbox.md @@ -15,17 +15,17 @@ description: "entfernt das aktuelle HTML-Objektelement der Lightbox" ### Example ~~~jsx -var full_lightbox = [ +const full_lightbox = [ { name: "description", map_to: "text", type: "textarea", focus: true}, { name: "time", map_to: "auto", type: "time"} ]; -var restricted_lightbox = [ +const restricted_lightbox = [ { name: "description", map_to: "text", type: "textarea", focus: true}, ]; ... scheduler.attachEvent("onBeforeLightbox", function(event_id) { scheduler.resetLightbox(); - var ev = scheduler.getEvent(event_id); + const ev = scheduler.getEvent(event_id); if (ev.restricted == true){ scheduler.config.lightbox.sections = restricted_lightbox; } else { diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/method/select.md b/i18n/de/docusaurus-plugin-content-docs/current/api/method/select.md index e8a79375..4716d63f 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/api/method/select.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/method/select.md @@ -19,9 +19,9 @@ description: "wählt das von Ihnen angegebene Event aus" ### Example ~~~jsx -var eventId = scheduler.addEvent({ - start_date: "16-06-2013 09:00", - end_date: "16-06-2013 12:00", +const eventId = scheduler.addEvent({ + start_date: "16-06-2027 09:00", + end_date: "16-06-2027 12:00", text: "Meeting" }); diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/method/serialize.md b/i18n/de/docusaurus-plugin-content-docs/current/api/method/serialize.md index 4e358254..30381ce7 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/api/method/serialize.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/method/serialize.md @@ -19,15 +19,15 @@ console.log(scheduler.serialize()); //(5) [{…}, {…}, {…}, {…}, {…}] -//> 0: {id: 1, start_date: '2022-05-17 09:00', end_date: '2022-05-17 12:00', +//> 0: {id: 1, start_date: '2027-05-17 09:00', end_date: '2027-05-17 12:00', // text: 'Event'} -//> 1: {id: 2, start_date: '2022-05-18 10:00', end_date: '2022-05-18 16:00', +//> 1: {id: 2, start_date: '2027-05-18 10:00', end_date: '2027-05-18 16:00', // text: 'Event'} -//> 2: {id: 3, start_date: '2022-05-20 10:00', end_date: '2022-05-20 14:00', +//> 2: {id: 3, start_date: '2027-05-20 10:00', end_date: '2027-05-20 14:00', // text: 'Event'} -//> 3: {id: 4, start_date: '2022-05-21 16:00', end_date: '2022-05-21 17:00', +//> 3: {id: 4, start_date: '2027-05-21 16:00', end_date: '2027-05-21 17:00', // text: 'Event'} -//> 4: {id: 5, start_date: '2022-05-22 09:00', end_date: '2022-05-22 17:00', +//> 4: {id: 5, start_date: '2027-05-22 09:00', end_date: '2027-05-22 17:00', // text: 'Event'} ~~~ diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/method/serverlist.md b/i18n/de/docusaurus-plugin-content-docs/current/api/method/serverlist.md index 3bbca661..4c33215a 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/api/method/serverlist.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/method/serverlist.md @@ -24,10 +24,10 @@ description: "definiert eine benannte Sammlung, die in Units, Timeline-Ansichten ~~~jsx // ruft eine Liste von Optionen mit dem Namen 'my_list' ab -var list = scheduler.serverList("my_list"); +const list = scheduler.serverList("my_list"); ... // erstellt und gibt eine Liste mit den angegebenen Optionen zurück -var list = scheduler.serverList("options", [ +const list = scheduler.serverList("options", [ {key: 1, label: "John"}, {key: 2, label: "Adam"}, {key: 3, label: "Diane"} diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/method/setcurrentview.md b/i18n/de/docusaurus-plugin-content-docs/current/api/method/setcurrentview.md index dc8e75f4..2ca06d84 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/api/method/setcurrentview.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/method/setcurrentview.md @@ -1,44 +1,44 @@ --- -sidebar_label: "setCurrentView" -title: "setCurrentView method" -description: "zeigt die ausgewählte Ansicht und das Datum an" +sidebar_label: setCurrentView +title: "setCurrentView Methode" +description: "Zeigt die angegebene Ansicht und das Datum an" --- # setCurrentView ### Description -@short: Zeigt die ausgewählte Ansicht und das Datum an +@short: Zeigt die angegebene Ansicht und das Datum an @signature: setCurrentView: (date?: Date, view?: string) =\> void ### Parameters - `date` - (optional) *Date* - das anzuzeigende Datum -- `view` - (optional) *string* - der Name der anzuzeigenden Ansicht +- `view` - (optional) *string* - der Name einer anzuzeigenden Ansicht ### Example ~~~jsx -// aktualisiert die aktuelle Ansicht und das Datum ohne Änderungen vorzunehmen +// Zeigt die aktuelle Ansicht und das Datum an. Nichts wird geändert, nur aktualisiert scheduler.setCurrentView(); -// zeigt den 4. Juli 2012 in der aktuellen Ansicht an -scheduler.setCurrentView(new Date(2012,7,4)); -// zeigt den 3. Mai 2012 in der Wochen-Ansicht an -scheduler.setCurrentView(new Date(2012,5,3), "week"); +// Zeigt 2027-08-04 in der aktuell aktiven Ansicht an +scheduler.setCurrentView(new Date(2027, 7, 4)); +// Zeigt 2027-06-03 in der Wochenansicht an +scheduler.setCurrentView(new Date(2027, 5, 3), "week"); ~~~ ### Related samples -- [Mini calendar in the scheduler header](https://docs.dhtmlx.com/scheduler/samples/05_calendar/01_select.html) -- [Mini calendar outside the scheduler](https://docs.dhtmlx.com/scheduler/samples/05_calendar/05_plain_structure.html) +- [Mini-Kalender im Scheduler-Header](https://docs.dhtmlx.com/scheduler/samples/05_calendar/01_select.html) +- [Mini-Kalender außerhalb des Schedulers](https://docs.dhtmlx.com/scheduler/samples/05_calendar/05_plain_structure.html) ### Details -- Standard-View-Namen sind 'day', 'week' und 'month'. Für jede andere Ansicht verwenden Sie den Name-Parameter. -- Das Aufrufen dieser Methode löst die [onBeforeViewChange](api/event/onbeforeviewchange.md) und [onViewChange](api/event/onviewchange.md) aus. -- Diese Methode ist ähnlich wie [updateView](api/method/updateview.md), aber der entscheidende Unterschied ist, dass [updateView](api/method/updateview.md) **keine Events auslöst**. +- Die Namen der Standardansichten sind 'day', 'week', 'month'. Um eine andere Ansicht anzugeben, verwenden Sie ihren `name`-Parameter. +- Die Methode ruft [`onBeforeViewChange`](api/event/onbeforeviewchange.md) und [`onViewChange`](api/event/onviewchange.md) auf. +- Die Methode ist ähnlich wie [`updateView()`](api/method/updateview.md). Der einzige Unterschied besteht darin, dass [`updateView()`](api/method/updateview.md) keine Ereignisse erzeugt. ### Related API - [onBeforeViewChange](api/event/onbeforeviewchange.md) - [onViewChange](api/event/onviewchange.md) -- [updateView](api/method/updateview.md) +- [updateView](api/method/updateview.md) \ No newline at end of file diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/method/setevent.md b/i18n/de/docusaurus-plugin-content-docs/current/api/method/setevent.md index e3a42756..a8da702f 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/api/method/setevent.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/method/setevent.md @@ -21,8 +21,8 @@ description: "Fügt dem Datenpool des Schedulers ein neues Event hinzu" ~~~jsx scheduler.setEvent(1, { - start_date: new Date(2013, 05, 16, 09, 00), - end_date: new Date(2013, 05, 16, 12, 00), + start_date: new Date(2027, 05, 16, 09, 00), + end_date: new Date(2027, 05, 16, 12, 00), text: "Meeting", holder: "John", room: "5" diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/method/setlightboxsize.md b/i18n/de/docusaurus-plugin-content-docs/current/api/method/setlightboxsize.md index 4e2296d6..201de916 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/api/method/setlightboxsize.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/method/setlightboxsize.md @@ -15,7 +15,7 @@ description: "aktualisiert die Größe der Lightbox" ### Example ~~~jsx -var control = scheduler.formSection("description"); +const control = scheduler.formSection("description"); control.header.style.display = "none"; scheduler.setLightboxSize(); diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/method/setloadmode.md b/i18n/de/docusaurus-plugin-content-docs/current/api/method/setloadmode.md index 202f39d2..4230895a 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/api/method/setloadmode.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/method/setloadmode.md @@ -20,7 +20,7 @@ description: "legt den Modus für das Laden von Daten in Teilen fest und ermögl ~~~jsx scheduler.config.load_date = "%Y.%m.%d"; -scheduler.init('scheduler_here',new Date(2009,10,1),"month"); +scheduler.init('scheduler_here',new Date(2027,10,1),"month"); scheduler.setLoadMode("month") scheduler.load("data/events.php"); diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/method/setuserdata.md b/i18n/de/docusaurus-plugin-content-docs/current/api/method/setuserdata.md index c1497e9a..106cffdd 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/api/method/setuserdata.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/method/setuserdata.md @@ -21,9 +21,9 @@ description: "Weist einem bestimmten Event Benutzerdaten zu" ### Example ~~~jsx -var eventId = scheduler.addEvent({ - start_date: "16-06-2013 09:00", - end_date: "16-06-2013 12:00", +const eventId = scheduler.addEvent({ + start_date: "16-06-2027 09:00", + end_date: "16-06-2027 12:00", text: "Meeting" }); diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/method/showevent.md b/i18n/de/docusaurus-plugin-content-docs/current/api/method/showevent.md index 9b1b6a11..f384ca8f 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/api/method/showevent.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/method/showevent.md @@ -39,9 +39,9 @@ scheduler.showEvent(someId); Zum Beispiel können Sie nach dem programmatischen Hinzufügen eines neuen Events dieses so im Scheduler anzeigen: ~~~js -var eventId = scheduler.addEvent({ - start_date: "08-06-2013 09:00", - end_date: "08-06-2013 11:00", +const eventId = scheduler.addEvent({ + start_date: "08-06-2027 09:00", + end_date: "08-06-2027 11:00", text: "Meeting" }); ... diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/method/showlightbox.md b/i18n/de/docusaurus-plugin-content-docs/current/api/method/showlightbox.md index 58be20eb..3ae3f3ec 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/api/method/showlightbox.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/method/showlightbox.md @@ -19,9 +19,9 @@ description: "öffnet die Lightbox für ein bestimmtes Event" ### Example ~~~jsx -var eventId = scheduler.addEvent({ - start_date: "08-06-2013 09:00", - end_date: "08-06-2013 11:00", +const eventId = scheduler.addEvent({ + start_date: "08-06-2027 09:00", + end_date: "08-06-2027 11:00", text: "Meeting" }); ... diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/method/showquickinfo.md b/i18n/de/docusaurus-plugin-content-docs/current/api/method/showquickinfo.md index 893063b8..e5a2d032 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/api/method/showquickinfo.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/method/showquickinfo.md @@ -19,9 +19,9 @@ description: "Öffnet das Pop-up-Event-Formular für ein bestimmtes Event" ### Example ~~~jsx -var eventId = scheduler.addEvent({ - start_date: "08-06-2013 09:00", - end_date: "08-06-2013 11:00", +const eventId = scheduler.addEvent({ + start_date: "08-06-2027 09:00", + end_date: "08-06-2027 11:00", text: "Meeting" }); diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/method/toical.md b/i18n/de/docusaurus-plugin-content-docs/current/api/method/toical.md index e27c91f2..549bc6e1 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/api/method/toical.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/method/toical.md @@ -22,9 +22,9 @@ description: "wandelt Scheduler-Daten in das ICal-Format um" ### Example ~~~jsx -var str = scheduler.toICal(); +const str = scheduler.toICal(); //oder -var str = scheduler.toICal("Mein Kalender"); +const str = scheduler.toICal("Mein Kalender"); ~~~ ### Related samples diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/method/tojson.md b/i18n/de/docusaurus-plugin-content-docs/current/api/method/tojson.md index c8848b1b..a1ec208d 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/api/method/tojson.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/method/tojson.md @@ -18,7 +18,7 @@ description: "Wandelt die Daten des Schedulers in einen JSON-formatierten String ### Example ~~~jsx -var str = scheduler.toJSON(); +const str = scheduler.toJSON(); ~~~ ### Related samples diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/method/topdfrange.md b/i18n/de/docusaurus-plugin-content-docs/current/api/method/topdfrange.md index 77b43000..88ae8956 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/api/method/topdfrange.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/method/topdfrange.md @@ -23,9 +23,9 @@ description: "exportiert mehrere Scheduler-Views in ein PDF-Dokument (nützlich ### Example ~~~jsx -//exportiert Seiten der 'week' View vom 1. Januar 2012 -//bis zum 1. Februar 2012 -scheduler.toPDFRange(new Date(2012,0,1), new Date(2012, 1,1),'week', +//exportiert Seiten der 'week' View vom 1. Januar 2027 +//bis zum 1. Februar 2027 +scheduler.toPDFRange(new Date(2027,0,1), new Date(2027, 1,1),'week', 'generate.php', 'fullcolor'); ~~~ diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/method/toxml.md b/i18n/de/docusaurus-plugin-content-docs/current/api/method/toxml.md index 8ae5d266..36d92241 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/api/method/toxml.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/method/toxml.md @@ -18,7 +18,7 @@ description: "wandelt die Daten des Schedulers in das XML-Format um" ### Example ~~~jsx -var str = scheduler.toXML(); +const str = scheduler.toXML(); ~~~ ### Related samples diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/method/uid.md b/i18n/de/docusaurus-plugin-content-docs/current/api/method/uid.md index 40f9990f..07591dbd 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/api/method/uid.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/method/uid.md @@ -18,5 +18,5 @@ description: "erstellt eine eindeutige ID, die garantiert innerhalb der aktuelle ### Example ~~~jsx -var new_id = scheduler.uid(); +const new_id = scheduler.uid(); ~~~ diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/method/unblocktime.md b/i18n/de/docusaurus-plugin-content-docs/current/api/method/unblocktime.md index 4b70ffa9..2f5e5c7c 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/api/method/unblocktime.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/method/unblocktime.md @@ -23,10 +23,10 @@ Die Funktion ist veraltet ### Example ~~~jsx -var spanId = scheduler.blockTime(new Date(2013,2,5), "fullday"); +const spanId = scheduler.blockTime(new Date(2027,2,5), "fullday"); ... -// entfernt die Sperre von 0 bis 8 und von 18 bis 24 Uhr am 5. Februar 2013 -scheduler.unblockTime(new Date(2013,2,5), [0,10*60]); +// entfernt die Sperre von 0 bis 8 und von 18 bis 24 Uhr am 5. Februar 2027 +scheduler.unblockTime(new Date(2027,2,5), [0,10*60]); ~~~ ### Related API diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/method/unmarkcalendar.md b/i18n/de/docusaurus-plugin-content-docs/current/api/method/unmarkcalendar.md index 1deaf12e..5b3483e1 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/api/method/unmarkcalendar.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/method/unmarkcalendar.md @@ -24,7 +24,7 @@ description: "entfernt eine CSS-Klasse vom angegebenen Datum" // es gibt zwei Möglichkeiten, das Calendar-Objekt zu erhalten: // durch Erstellen eines Mini-Calendars -var calendar = scheduler.renderCalendar({ +const calendar = scheduler.renderCalendar({ container:"cal_here", navigation:true, handler:function(date){ @@ -33,11 +33,11 @@ var calendar = scheduler.renderCalendar({ }); // oder durch Auswahl des Containers mit dem Mini-Calendar -var calendar = document.querySelector(".dhx_mini_calendar"); +const calendar = document.querySelector(".dhx_mini_calendar"); -scheduler.markCalendar(calendar, new Date(2010,3,1), "my_style"); +scheduler.markCalendar(calendar, new Date(2027,3,1), "my_style"); ... -scheduler.unmarkCalendar(calendar, new Date(2010,3,1), "my_style"); +scheduler.unmarkCalendar(calendar, new Date(2027,3,1), "my_style"); ~~~ ### Details diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/method/unmarktimespan.md b/i18n/de/docusaurus-plugin-content-docs/current/api/method/unmarktimespan.md index dc4c9875..666f63f4 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/api/method/unmarktimespan.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/method/unmarktimespan.md @@ -19,7 +19,7 @@ description: "entfernt die Markierung oder Blockierung, die durch die Methode ma ### Example ~~~jsx -var spanDIV = scheduler.markTimespan({ +const spanDIV = scheduler.markTimespan({ days: [0,6], zones: "fullday" }); diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/method/unselect.md b/i18n/de/docusaurus-plugin-content-docs/current/api/method/unselect.md index 6884fc84..904399ca 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/api/method/unselect.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/method/unselect.md @@ -19,9 +19,9 @@ description: "entfernt die Auswahl vom angegebenen Event" ### Example ~~~jsx -var eventId = scheduler.addEvent({ - start_date: "16-06-2013 09:00", - end_date: "16-06-2013 12:00", +const eventId = scheduler.addEvent({ + start_date: "16-06-2027 09:00", + end_date: "16-06-2027 12:00", text: "Meeting" }); diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/method/updatecalendar.md b/i18n/de/docusaurus-plugin-content-docs/current/api/method/updatecalendar.md index dbb2f210..eecfe4a6 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/api/method/updatecalendar.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/method/updatecalendar.md @@ -20,7 +20,7 @@ description: "zeigt das ausgewählte Datum im Mini-Calendar an" ### Example ~~~jsx -var calendar = scheduler.renderCalendar({ +const calendar = scheduler.renderCalendar({ container:"cal_here", navigation:true, handler:function(date){ @@ -28,7 +28,7 @@ var calendar = scheduler.renderCalendar({ } }); ... -scheduler.updateCalendar(calendar, new Date(2013,01,01)); +scheduler.updateCalendar(calendar, new Date(2027,01,01)); ~~~ ### Details diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/method/updateevent.md b/i18n/de/docusaurus-plugin-content-docs/current/api/method/updateevent.md index a6304597..536c2e77 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/api/method/updateevent.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/method/updateevent.md @@ -19,9 +19,9 @@ description: "ändert das angegebene Event" ### Example ~~~jsx -var eventId = scheduler.addEvent({ - start_date: "16-06-2013 09:00", - end_date: "16-06-2013 12:00", +const eventId = scheduler.addEvent({ + start_date: "16-06-2027 09:00", + end_date: "16-06-2027 12:00", text: "Meeting" }); diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/method/updateview.md b/i18n/de/docusaurus-plugin-content-docs/current/api/method/updateview.md index 754f7990..abc1b3a8 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/api/method/updateview.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/method/updateview.md @@ -1,43 +1,43 @@ --- -sidebar_label: "updateView" -title: "updateView method" -description: "Zeigt die angegebene Ansicht und das Datum an, ohne irgendwelche Events auszulösen" +sidebar_label: updateView +title: "updateView Methode" +description: "zeigt die angegebene Ansicht und das Datum an (löst keine Events aus)" --- # updateView ### Description -@short: Zeigt die angegebene Ansicht und das Datum an, ohne irgendwelche Events auszulösen +@short: Zeigt die angegebene Ansicht und das Datum an (löst keine Events aus) @signature: updateView: (date?: Date, view?: string) =\> void ### Parameters -- `date` - (optional) *Date* - (optional) das zu setzende Datum -- `view` - (optional) *string* - (optional) der Name der Ansicht +- `date` - (optional) *Date* - das Datum, das gesetzt wird +- `view` - (optional) *string* - der Ansichtsname ### Example ~~~jsx -// aktualisiert die aktuelle Ansicht und das Datum, ohne Änderungen vorzunehmen +// displays the current view and date. Doesn't change anything, just refreshes scheduler.updateView(); -// zeigt den 4. Juli 2012 in der aktuellen Ansicht an -scheduler.updateView(new Date(2012,7,4)); -// zeigt den 3. Mai 2012 in der Wochen-Ansicht an -scheduler.updateView(new Date(2012,5,3), "week"); +// displays 2027-08-04 in the currently active view +scheduler.updateView(new Date(2027, 7, 4)); +// displays 2027-06-03 in the Week view +scheduler.updateView(new Date(2027, 5, 3), "week"); ~~~ ### Related samples -- [Filtering events](https://docs.dhtmlx.com/scheduler/samples/09_api/09_filtering_events.html) +- [Ereignisse filtern](https://docs.dhtmlx.com/scheduler/samples/09_api/09_filtering_events.html) ### Details -- Wird diese Funktion ohne Parameter aufgerufen, wird einfach die aktuelle Ansicht aktualisiert. -- Die Standard-View-Namen sind 'day', 'week' und 'month'. Um eine andere Ansicht zu verwenden, geben Sie den **Name**-Parameter an. -- Diese Methode ähnelt [setCurrentView](api/method/setcurrentview.md). Der wesentliche Unterschied besteht darin, dass im Gegensatz zu **updateView** bei [setCurrentView](api/method/setcurrentview.md) die Events [onBeforeViewChange](api/event/onbeforeviewchange.md) und [onViewChange](api/event/onviewchange.md) ausgelöst werden. +- Beim Aufruf ohne Parameter aktualisiert die Funktion lediglich die aktuelle Ansicht. +- Die Namen der Standardansichten sind 'day', 'week', 'month'. Um eine andere Ansicht anzugeben, verwenden Sie ihren `name`-Parameter. +- Die Methode ist ähnlich wie [`setCurrentView()`](api/method/setcurrentview.md). Der einzige Unterschied besteht darin, dass im Gegensatz zu `updateView()`, [`setCurrentView()`](api/method/setcurrentview.md) die Events [`onBeforeViewChange`](api/event/onbeforeviewchange.md) und [`onViewChange`](api/event/onviewchange.md) erzeugt. ### Related API - [setCurrentView](api/method/setcurrentview.md) - [onBeforeViewChange](api/event/onbeforeviewchange.md) -- [onViewChange](api/event/onviewchange.md) +- [onViewChange](api/event/onviewchange.md) \ No newline at end of file diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/other/ajax.md b/i18n/de/docusaurus-plugin-content-docs/current/api/other/ajax.md index 99374962..c7794fd4 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/api/other/ajax.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/other/ajax.md @@ -19,11 +19,11 @@ description: "scheduler ajax Modul" {status: "ok", data: "value", data2: "value2"} -var xhr = scheduler.ajax; +const xhr = scheduler.ajax; // HTTP GET xhr.get("server.php").then(function(response) { - var res = JSON.parse(response.responseText); + const res = JSON.parse(response.responseText); if (res && res.status == "ok") { // Antwort ist ok } @@ -36,7 +36,7 @@ xhr.post({ paramName: "paramValue" } }).then(function(response){ - var res = JSON.parse(response.responseText); + const res = JSON.parse(response.responseText); if (res && res.status == "ok") { // Antwort ist ok } @@ -107,7 +107,7 @@ scheduler.ajax.post({ paramName: "paramValue" }, callback: function(result){ - var response = result.xmlDoc; + const response = result.xmlDoc; alert(response.responseText); } @@ -221,7 +221,7 @@ dhtmlxScheduler unterstützt promises (einschließlich IE8+). Intern wird die [B Um ein Promise zu erstellen, verwenden Sie: ~~~js -var promise = new scheduler.Promise(function(resolve, reject) {...}); +const promise = new scheduler.Promise(function(resolve, reject) {...}); ~~~ Die Promise-Implementierung ist innerhalb von Scheduler scoped, also nicht global. diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/other/config.md b/i18n/de/docusaurus-plugin-content-docs/current/api/other/config.md index deac330c..01da07ed 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/api/other/config.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/other/config.md @@ -18,7 +18,7 @@ description: "definiert Konfigurationsoptionen für Daten, Skala, Steuerungen" //setzt das Format der Y-Achsen-Elemente scheduler.config.hour_date = "%H:%i:%s"; ... -scheduler.init('scheduler_here', new Date(2013, 7, 5), "month"); +scheduler.init('scheduler_here', new Date(2027, 7, 5), "month"); ~~~ ### Details diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/other/date.md b/i18n/de/docusaurus-plugin-content-docs/current/api/other/date.md index 096acaa4..0828a447 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/api/other/date.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/other/date.md @@ -1,137 +1,137 @@ ---- -sidebar_label: "date" -title: "date config" -description: "eine Sammlung von Methoden zur Formatierung und Manipulation von dates" +--- +sidebar_label: date +title: "Datum-Konfiguration" +description: "eine Reihe von Datums-Formatierungs-Methoden" --- # date ### Description -@short: Eine Sammlung von Methoden zur Formatierung und Manipulation von dates +@short: A set of date formatting methods @signature: date: SchedulerDateHelpers - ### Details -Das **date**-Objekt enthält mehrere nützliche Methoden: +The `date` object provides the following methods: -- **add**(date, number, unit) - passt das date an, indem ein bestimmtes Zeitintervall hinzugefügt oder subtrahiert wird - - **date** - (Date) das zu ändernde date-Objekt - - **number** - (number) die Anzahl der hinzuzufügenden Einheiten; positive Werte fügen Zeit hinzu, negative subtrahieren sie - - **unit** - ('minute', 'hour', 'day', 'week', 'month', 'year') die Zeiteinheit +- `add()` - fügt das angegebene Zeitintervall zum Datum hinzu bzw. subtrahiert es + - `date` - (Date) das Date-Objekt, dem Sie Zeit hinzufügen/abziehen müssen + - `number` - (number) die Anzahl der Einheiten, die hinzuzufügen ist. Ist diese Zahl positiv, wird die Zeit zum Datum hinzugefügt; ist negativ, wird sie abgezogen + - `unit` - ('minute', 'hour', 'day', 'week', 'month', 'year') die Zeiteinheit ~~~js -//fügt 1 Jahr zum angegebenen date hinzu: 29. Juni 2019 -> 29. Juni 2020 -var newDate = scheduler.date.add(new Date(2019, 05, 29), 1, 'year'); +// adds 1 year to the specified date: 29 June, 2027 -> 29 June, 2028 +const newDate = scheduler.date.add(new Date(2027, 5, 29), 1, 'year'); ~~~ -- **convert_to_utc**(date) - konvertiert ein lokales date in das entsprechende UTC-date - - **date** - (Date) das zu konvertierende date-Objekt +- `convert_to_utc()` - wandelt lokale Zeit in UTC um + - `date` - (Date) das zu konvertierende Date-Objekt ~~~js -//29. Juni 2019 14:00 (Ortszeit) -> 29. Juni 2019 12:00 (UTC) -var time = scheduler.date.convert_to_utc(new Date(2019, 05, 29, 14, 00)); -~~~ +// 29 June, 2027 14:00 (local time) -> 29 June, 2027 12:00 (UTC) +const time = scheduler.date.convert_to_utc(new Date(2027, 5, 29, 14, 0)); +~~~ -- **copy**(date) - erstellt eine Kopie eines Date-Objekts - - **date** - (Date) das zu kopierende date-Objekt +- `copy()` - erstellt eine Kopie eines Date-Objekts + - `date` - (Date) das zu kopierende Date-Objekt ~~~js -var copy = scheduler.date.copy(new Date(2019, 05, 29)); // -> 29. Juni 2019 -~~~ +const copy = scheduler.date.copy(new Date(2027, 5, 29)); // -> 29 June, 2027 +~~~ -- **date_part**(date) - setzt den Zeitanteil des dates auf 00:00:00 zurück - - **date** - (Date) das zu ändernde date-Objekt +- `date_part()` - setzt den Zeitanteil des übergebenen Datums auf 00:00:00 + - `date` - (Date) das zu formatierende Datum ~~~js -//29. Juni 2019 14:30:10 -> 29. Juni 2019 00:00:00 -var date = scheduler.date.date_part(new Date(2019, 05, 29, 14, 30, 10)); -~~~ - -- **date_to_str**(format, utc) - gibt eine Funktion zurück, die ein Date-Objekt in einen String im angegebenen Format umwandelt - - **format** - (string) das gewünschte Datumsformat (siehe [Datumsformat-Spezifikation](guides/settings-format.md)) - - **utc** - (boolean) ob die Ortszeit in UTC umgewandelt werden soll +// 29 June, 2027 14:30:10 -> 29 June, 2027 00:00:00 +const date = scheduler.date.date_part(new Date(2027, 5, 29, 14, 30, 10)); +~~~ + +- `date_to_str()` - gibt eine Funktion zurück, die ein Date-Objekt in einen String des angegebenen Formats konvertiert +Parameter: `format` - (string) das Datum-Format (siehe [Date Format Specification](guides/settings-format.md)) +`utc` - (boolean) gibt an, ob lokale Zeit in UTC umgewandelt werden soll ~~~js -var formatFunc = scheduler.date.date_to_str("%d/%m/%Y"); -var date = formatFunc(new Date(2019, 05, 29)); // -> "29/06/2019" -~~~ - -- **day_start**(date) - setzt den Zeitanteil des dates auf 00:00:00 zurück; dies ist ein Alias für die Methode date_part. Wird in der Day-Ansicht verwendet, um das Anzeigedatum festzulegen, und kann bei Bedarf angepasst werden - - **date** - (Date) das zu ändernde date-Objekt +const formatFunc = scheduler.date.date_to_str("%d/%m/%Y"); +const date = formatFunc(new Date(2027, 5, 29)); // -> "29/06/2027" +~~~ + +- `day_start()` - setzt den Zeitanteil des übergebenen Datums auf 00:00:00. Alias der `date_part()`-Methode. Wird von der Day-Ansicht verwendet, um das Anzeigedatum festzulegen und kann neu definiert werden, um das Standardverhalten bereitzustellen +Parameter: `date` - (Date) das zu formatierende Datum ~~~js -//29. Juni 2019 14:30:10 -> 29. Juni 2019 00:00:00 -var date = scheduler.date.day_start(new Date(2019, 05, 29, 14, 30, 10)); -~~~ +// 29 June, 2027 14:30:10 -> 29 June, 2027 00:00:00 +const date = scheduler.date.day_start(new Date(2027, 5, 29, 14, 30, 10)); +~~~ ->**Hinweis:** Diese Methode verändert das übergebene date. Um das Originaldate nicht zu verändern, sollte es vor dem Übergeben in *new Date* eingewickelt werden. Zum Beispiel: +> **Hinweis**: Das an die Methode übergebene Datum wird tatsächlich geändert. Sie können verhindern, dass das ursprüngliche Datum verändert wird, indem Sie das Eingabedatum mit `new Date()` umschließen. Zum Beispiel: ~~~js -var date1 = new Date(2019, 05, 29, 14, 30, 10); -var date2 = scheduler.date.day_start(new Date(date1)); +const originalDate = new Date(2027, 5, 29, 14, 30, 10); +const dayStartDate = scheduler.date.day_start(new Date(originalDate)); ~~~ -- **getISOWeek**(date) - gibt die ISO-Wochennummer für das angegebene date zurück - - **date** - (Date) das zu evaluierende date-Objekt - +- `getISOWeek()` - gibt die Wochennummer des Datums zurück + - `date` - (Date) das zu formatierende Date-Objekt + ~~~js -var week = scheduler.date.getISOWeek(new Date(2019, 05, 29)); // -> 26 -~~~ +const week = scheduler.date.getISOWeek(new Date(2027, 5, 29)); // -> 26 +~~~ -- **getUTCISOWeek**(date) - gibt die ISO-Wochennummer für das date zurück, nachdem es in UTC konvertiert wurde - - **date** - (Date) das zu evaluierende date-Objekt +- `getUTCISOWeek()` - gibt die Wochennummer des Datums zurück, wandelt dabei zuvor die lokale Zeit in UTC um + - `date` - (Date) das zu formatierende Date-Objekt ~~~js -var week = scheduler.date.getUTCISOWeek(new Date(2019, 05, 29)); // -> 26 -~~~ +const week = scheduler.date.getUTCISOWeek(new Date(2027, 5, 29)); // -> 26 +~~~ -- **month_start**(date) - gibt ein neues Date-Objekt zurück, das den ersten Tag des Monats mit der Zeit 00:00:00 repräsentiert - - **date** - (Date) das zu verarbeitende date-Objekt +- `month_start()` - gibt ein Date-Objekt des ersten Tages des Monats für das angegebene Datum zurück und setzt den Zeitanteil auf Null + - `date` - (Date) das zu formatierende Datum ~~~js -//29. Juni 2019 14:30 -> 01. Juni 2019 00:00 -var firstDay = scheduler.date.month_start(new Date(2019, 05, 29, 14, 30)); -~~~ - -- **str_to_date**(format, utc, parseExact) - gibt eine Funktion zurück, die einen Datumsstring im angegebenen Format in ein Date-Objekt umwandelt - - **format** - (string) das Datumsformat (siehe [Datumsformat-Spezifikation](guides/settings-format.md)) - - **utc** - (boolean) ob die Ortszeit in UTC umgewandelt werden soll - - **parseExact** - (boolean) bestimmt, ob Scheduler das Datumsformat automatisch erkennen soll (*false* standardmäßig) oder strikt das angegebene Format verwendet (*true*) +// 29 June, 2027 14:30 -> 01 June, 2027 00:00 +const firstDay = scheduler.date.month_start(new Date(2027, 5, 29, 14, 30)); +~~~ + + +- `str_to_date()` - gibt eine Funktion zurück, die eine Zeichenkette des angegebenen Formats in ein Date-Objekt konvertiert +Parameter: `format` - (string) das Datum-Format (siehe [Date Format Specification](guides/settings-format.md)) +`utc` - (boolean) gibt an, ob lokale Zeit in UTC umgewandelt werden soll +`parseExact` - (boolean) legt fest, ob Scheduler das Datumsformat automatisch erkennt (*false*, Standard) oder das vom Benutzer übergebene Format verwendet (*true*) ~~~js -var formatFunc = scheduler.date.str_to_date("%d/%m/%Y"); -var date = formatFunc("29/06/2019"); // -> 29. Juni 2019 00:00:00 -~~~ +const formatFunc = scheduler.date.str_to_date("%d/%m/%Y"); +const date = formatFunc("29/06/2027"); // -> 29 June, 2027 00:00:00 +~~~ -- **time_part**(date) - gibt den Zeitanteil eines Date-Objekts als Anzahl der Sekunden seit Mitternacht (00:00:00) zurück - - **date** - (Date) das zu evaluierende date-Objekt +- `time_part()` - gibt die Zeit eines Date-Objekts als eine Anzahl Sekunden seit Mitternacht (00:00:00) zurück + - `date` - (Date) das zu formatierende Datum ~~~js -var time = scheduler.date.time_part(new Date(2019, 05, 29, 14, 30, 10)); -//time -> 52210 +const time = scheduler.date.time_part(new Date(2027, 5, 29, 14, 30, 10)); + // time -> 52210 ~~~ -- **to_fixed**(num) - formatiert Zahlen kleiner als 10 mit einer führenden Null und gibt einen String zurück; Zahlen ab 10 werden unverändert zurückgegeben - - **num** - (number) die zu formatierende Zahl +- `to_fixed()` - fügt führende Null bei Zahlen unter 10 hinzu und gibt das Ergebnis als String zurück. Betrifft Zahlen größer/gleich 10 nicht + - `num` - (number) die zu formatierende Zahl ~~~js -var num1 = scheduler.date.to_fixed(2); // -> "02" -var num2 = scheduler.date.to_fixed(10); // -> 10 -~~~ - -- **week_start**(date) - gibt ein Date-Objekt für den ersten Tag der Woche des angegebenen dates zurück, mit der Zeit 00:00:00 - - **date** - (Date) das zu verarbeitende date-Objekt +const num1 = scheduler.date.to_fixed(2); // -> "02" +const num2 = scheduler.date.to_fixed(10); // -> 10 +~~~ + +- `week_start()` - gibt ein Date-Objekt des ersten Wochentages für das angegebene Datum zurück und setzt den Zeitanteil auf Null + - `date` - (Date) das zu formatierende Datum ~~~js -//29. Juni 2019 14:30 -> 24. Juni 2019 00:00 -var weekStart = scheduler.date.week_start(new Date(2019, 05, 29, 14, 30)); -~~~ - -- **year_start**(date) - gibt ein Date-Objekt für den ersten Tag des Jahres des angegebenen dates zurück, mit der Zeit 00:00:00 - - **date** - (Date) das zu verarbeitende date-Objekt +// 29 June, 2027 14:30 -> 28 June, 2027 00:00 +const weekStart = scheduler.date.week_start(new Date(2027, 5, 29, 14, 30)); +~~~ + +- `year_start()` - gibt ein Date-Objekt des ersten Tages des Jahres für das angegebene Datum zurück und setzt den Zeitanteil auf Null + - `date` - (Date) das zu formatierende Datum ~~~js -//29. Juni 2019 14:30 -> 01. Januar 2019 00:00 -var yearStart = scheduler.date.year_start(new Date(2019, 05, 29, 14, 30)); -~~~ +// 29 June, 2027 14:30 -> 01 January, 2027 00:00 +const yearStart = scheduler.date.year_start(new Date(2027, 5, 29, 14, 30)); +~~~ \ No newline at end of file diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/other/ical.md b/i18n/de/docusaurus-plugin-content-docs/current/api/other/ical.md index bcc11fba..723df646 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/api/other/ical.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/other/ical.md @@ -21,18 +21,18 @@ const icalString = scheduler.ical.parse( PRODID:-//dhtmlXScheduler//NONSGML v2.2//EN DESCRIPTION: BEGIN:VEVENT - DTSTART:20220411T140000 - DTEND:20220411T170000 + DTSTART:20270411T140000 + DTEND:20270411T170000 SUMMARY:Meeting END:VEVENT BEGIN:VEVENT - DTSTART:20220415 - DTEND:20220418 + DTSTART:20270415 + DTEND:20270418 SUMMARY:Conference END:VEVENT BEGIN:VEVENT - DTSTART:20220424T090000 - DTEND:20220424T100000 + DTSTART:20270424T090000 + DTEND:20270424T100000 SUMMARY:Interview END:VEVENT END:VCALENDAR` diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/other/json.md b/i18n/de/docusaurus-plugin-content-docs/current/api/other/json.md index 41718890..acbf7e6e 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/api/other/json.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/other/json.md @@ -15,8 +15,7 @@ description: "verwaltet JSON-Serialisierung und -Parsing" ### Example ~~~jsx -var obj = scheduler.json; // -> { parse(data){... -::: +const obj = scheduler.json; // -> { parse(data){... }} ~~~ ### Details diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/other/matrix.md b/i18n/de/docusaurus-plugin-content-docs/current/api/other/matrix.md index 6007c271..0cc9ce64 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/api/other/matrix.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/other/matrix.md @@ -28,7 +28,7 @@ scheduler.createTimelineView({ render:"bar" }); -var configObj = scheduler.matrix; +const configObj = scheduler.matrix; ~~~ ### Related samples diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/other/skin.md b/i18n/de/docusaurus-plugin-content-docs/current/api/other/skin.md index 0a0c1d93..1937a1c8 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/api/other/skin.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/other/skin.md @@ -15,7 +15,7 @@ description: "liefert die aktuelle Skin des Schedulers" ### Example ~~~jsx -var currentSkin = scheduler.skin;// -> 'glossy' oder 'classic' +const currentSkin = scheduler.skin; // -> 'glossy' oder 'classic' ~~~ ### Details diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/other/tooltip.md b/i18n/de/docusaurus-plugin-content-docs/current/api/other/tooltip.md index 705271db..6cb5c3c0 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/api/other/tooltip.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/other/tooltip.md @@ -15,7 +15,7 @@ description: "zeigt Tooltips für Events an" ### Example ~~~jsx -var tooltip = scheduler.tooltip; +const tooltip = scheduler.tooltip; tooltip.hide(); tooltip.show(event, text); ~~~ diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/other/version.md b/i18n/de/docusaurus-plugin-content-docs/current/api/other/version.md index 1d687ac0..798c5c33 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/api/other/version.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/other/version.md @@ -15,5 +15,5 @@ description: "liefert die aktuelle Version von dhtmlxScheduler" ### Example ~~~jsx -var version = scheduler.version; // "4.0" +const version = scheduler.version; // "4.0" ~~~ diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/template/day_date.md b/i18n/de/docusaurus-plugin-content-docs/current/api/template/day_date.md index 7ccc36ec..62eb05ce 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/api/template/day_date.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/template/day_date.md @@ -23,7 +23,7 @@ description: "definiert das im Header für die Day- und Units-Views angezeigte D ~~~jsx scheduler.templates.day_date = function(date){ - var formatFunc = scheduler.date.date_to_str(scheduler.config.default_date); + const formatFunc = scheduler.date.date_to_str(scheduler.config.default_date); return formatFunc(date); }; ~~~ diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/template/event_bar_text.md b/i18n/de/docusaurus-plugin-content-docs/current/api/template/event_bar_text.md index 902a2e40..838634f9 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/api/template/event_bar_text.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/template/event_bar_text.md @@ -1,36 +1,36 @@ --- -sidebar_label: "event_bar_text" -title: "event_bar_text template" -description: "Legt den Text fest, der bei mehrtägigen Events angezeigt wird." +sidebar_label: event_bar_text +title: "event_bar_text Vorlage" +description: "legt den Text des Ereignisses fest. Gilt nur für Mehrtages-Ereignisse" --- # event_bar_text ### Description -@short: Legt den Text fest, der bei mehrtägigen Events angezeigt wird. +@short: Legt den Text des Ereignisses fest. Gilt nur für Mehrtages-Ereignisse -@signature: event_bar_text: (start: Date, end: Date, event: any) =\> string +@signature: event_bar_text: (start: Date, end: Date, event: any) => string ### Parameters -- `start` - (required) *Date* - Das Datum, an dem das Event beginnt -- `end` - (required) *Date* - Das Datum, an dem das Event endet -- `event` - (required) *object* - Das Event-Objekt +- `start` - (erforderlich) *Date* - das Datum, an dem ein Ereignis beginnen soll +- `end` - (erforderlich) *Date* - das Datum, an dem das Ereignis voraussichtlich abgeschlossen wird +- `event` - (erforderlich) *object* - das Objekt des Ereignisses ### Returns -- ` text` - (string) - HTML-Inhalt, der im Scheduler angezeigt wird +- `text` - (string) - HTML-Text zur Darstellung im Scheduler ### Example ~~~jsx -scheduler.templates.event_bar_text = function(start,end,event){ - return event.text; +scheduler.templates.event_bar_text = (start, end, event) => { + return event.text; }; ~~~ -**Applicable views:** [Month view](views/month.md), [Timeline view](views/timeline.md) +**Verfügbare Ansichten:** [Monatsansicht](views/month.md), [Timeline-Ansicht](views/timeline.md) ### Related Guides -- [Month View Templates](views/month-view-templates.md) -- [Timeline-Ansichtsvorlagen](views/timeline-view-templates.md) +- [Monatsansicht-Vorlagen](views/month-view-templates.md) +- [Timeline-Ansicht-Vorlagen](views/timeline-view-templates.md) \ No newline at end of file diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/template/event_class.md b/i18n/de/docusaurus-plugin-content-docs/current/api/template/event_class.md index 2a17def7..22103035 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/api/template/event_class.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/template/event_class.md @@ -1,30 +1,30 @@ --- -sidebar_label: "event_class" -title: "event_class template" -description: "definiert die CSS-Klasse, die dem Container des Events hinzugefügt wird" +sidebar_label: event_class +title: "event_class Vorlage" +description: "Gibt die CSS-Klasse an, die dem Container des Events zugewiesen wird" --- # event_class ### Description -@short: Definiert die CSS-Klasse, die dem Container des Events hinzugefügt wird +@short: Legt die CSS-Klasse fest, die dem Container des Events zugewiesen wird -@signature: event_class: (start: Date, end: Date, ev: any) =\> string +@signature: event_class: (start: Date, end: Date, ev: any) => string ### Parameters -- `start` - (required) *Date* - Datum, an dem das Event beginnt -- `end` - (required) *Date* - Datum, an dem das Event endet -- `ev` - (required) *object* - Das Event-Objekt +- `start` - (erforderlich) *Date* - das Datum, an dem ein Event voraussichtlich beginnt +- `end` - (erforderlich) *Date* - das Datum, an dem ein Event voraussichtlich abgeschlossen sein wird +- `ev` - (erforderlich) *object* - das Objekt des Events ### Returns -- ` css_class` - (string) - CSS-Klasse für das entsprechende Element +- `css_class` - (string) - die CSS-Klasse für das zugehörige Element ### Example ~~~jsx -scheduler.templates.event_class = function(start,end,ev){ +scheduler.templates.event_class = (start, end, ev) => { return ""; }; ~~~ @@ -37,11 +37,11 @@ scheduler.templates.event_class = function(start,end,ev){ ### Details -Für die Timeline-Ansicht wird dieses Template nur in den Modi 'Bar' und 'Tree' verwendet. +In der Timeline-Ansicht wird die Vorlage nur auf die Modi 'Bar' und 'Tree' angewendet. -Für detaillierte Anleitungen zur Anpassung der Event-Farben siehe den verwandten Artikel [Farbe für benutzerdefinierte Events](guides/custom-events-color.md). +Check the full information about customizing event colors in the related article [Custom Event's Color](guides/custom-events-color.md). ### Related Guides -- [Farbe für benutzerdefinierte Events](guides/custom-events-color.md) -- [Day-Ansicht Vorlagen](views/day-view-templates.md) -- [Month View Templates](views/month-view-templates.md) +- [Custom Event's Color](guides/custom-events-color.md) +- [Day View Templates](views/day-view-templates.md) +- [Month View Templates](views/month-view-templates.md) \ No newline at end of file diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/template/event_date.md b/i18n/de/docusaurus-plugin-content-docs/current/api/template/event_date.md index 8b5197f6..3c11a398 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/api/template/event_date.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/template/event_date.md @@ -23,7 +23,7 @@ description: "definiert den Zeitanteil der Start- und Enddaten eines Events. Es ~~~jsx scheduler.templates.event_date = function(date){ - var formatFunc = scheduler.date.date_to_str(scheduler.config.hour_date); + const formatFunc = scheduler.date.date_to_str(scheduler.config.hour_date); return formatFunc(date); } ~~~ diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/template/event_text.md b/i18n/de/docusaurus-plugin-content-docs/current/api/template/event_text.md index a70f89d0..e462988c 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/api/template/event_text.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/template/event_text.md @@ -1,43 +1,42 @@ --- -sidebar_label: "event_text" -title: "event_text template" -description: "definiert den Text, der für ein Event angezeigt wird" +sidebar_label: event_text +title: "event_text Vorlage" +description: "legt den Text des Ereignisses fest" --- # event_text ### Description -@short: Definiert den Text, der für ein Event angezeigt wird +@short: Legt den Text des Ereignisses fest @signature: event_text: (start: Date, end: Date, event: any) =\> string ### Parameters -- `start` - (required) *Date* - Das Startdatum des Events -- `end` - (required) *Date* - Das Enddatum des Events -- `event` - (required) *object* - Das Event-Datenobjekt +- `start` - (erforderlich) *Date* - das Datum, an dem ein Ereignis beginnen soll +- `end` - (erforderlich) *Date* - das Datum, an dem ein Ereignis beendet werden soll +- `event` - (erforderlich) *object* - das Ereignisobjekt ### Returns -- ` text` - (string) - HTML-Inhalt, der zur Anzeige des Events im Scheduler verwendet wird +- `text` - (string) - HTML-Text zur Darstellung im Scheduler ### Example ~~~jsx -scheduler.templates.event_text=function(start, end, event){ - return "" - +event.text+""; -} +scheduler.templates.event_text = (start, end, event) => { + return `${event.text}`; +}; ~~~ -**Applicable views:** [Day view](views/day.md), [Week view](views/week.md), [Units view](views/units.md) +**Applicable views:** [Tagesansicht](views/day.md), [Wochenansicht](views/week.md), [Einheitenansicht](views/units.md) ### Related samples -- [Styling events with templates](https://docs.dhtmlx.com/scheduler/samples/02_customization/06_templates.html) +- [Styling von Ereignissen mit Templates](https://docs.dhtmlx.com/scheduler/samples/02_customization/06_templates.html) ### Details -Beachten Sie, dass für die Month- und Timeline-Views das Template [event_bar_text](api/template/event_bar_text.md) verwendet werden sollte, um den Text des Events festzulegen. +Beachten Sie, dass für Monats- und Timeline-Ansichten das [`event_bar_text`](api/template/event_bar_text.md) Template verwendet werden muss, um den Text des Ereignisses festzulegen. ### Related Guides -- [Day-Ansicht Vorlagen](views/day-view-templates.md) +- [Templates der Tagesansicht](views/day-view-templates.md) \ No newline at end of file diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/template/format_date.md b/i18n/de/docusaurus-plugin-content-docs/current/api/template/format_date.md index 0348a28b..c69a8d59 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/api/template/format_date.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/template/format_date.md @@ -22,7 +22,7 @@ description: "wandelt ein Date-Objekt in einen formatierten Datumsstring um. Die ### Example ~~~jsx -var dateToStr = scheduler.date.date_to_str("%Y-%m-%d %H:%i"); +const dateToStr = scheduler.date.date_to_str("%Y-%m-%d %H:%i"); scheduler.templates.format_date = function(date){ return dateToStr(date); }; diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/template/load_format.md b/i18n/de/docusaurus-plugin-content-docs/current/api/template/load_format.md index 484d6c31..d0b3fabb 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/api/template/load_format.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/template/load_format.md @@ -23,9 +23,8 @@ description: "definiert das Anforderungsformat, das im dynamischen Lade-Modus ve ~~~jsx scheduler.templates.load_format = function(date){ - var dateToStr_func = scheduler.date.date_to_str(scheduler.config.load_date); + const dateToStr_func = scheduler.date.date_to_str(scheduler.config.load_date); return dateToStr_func(date); - } ~~~ diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/template/month_date.md b/i18n/de/docusaurus-plugin-content-docs/current/api/template/month_date.md index c1a9ba2c..1c99f179 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/api/template/month_date.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/template/month_date.md @@ -23,7 +23,7 @@ description: "legt das im Header der Ansicht angezeigte Datum fest" ~~~jsx scheduler.templates.month_date = function(date){ - var dateToStr_func = scheduler.date.date_to_str(scheduler.config.month_date); + const dateToStr_func = scheduler.date.date_to_str(scheduler.config.month_date); return dateToStr_func(date); }; ~~~ diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/template/month_day.md b/i18n/de/docusaurus-plugin-content-docs/current/api/template/month_day.md index 9c498e5c..24ac4ed9 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/api/template/month_day.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/template/month_day.md @@ -23,7 +23,7 @@ description: "definiert, wie der Tag in einer Zelle angezeigt wird" ~~~jsx scheduler.templates.month_day = function(date){ - var dateToStr_func = scheduler.date.date_to_str(scheduler.config.month_day); + const dateToStr_func = scheduler.date.date_to_str(scheduler.config.month_day); return dateToStr_func(date); }; ~~~ diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/template/parse_date.md b/i18n/de/docusaurus-plugin-content-docs/current/api/template/parse_date.md index d60e60a6..2fa4fcc0 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/api/template/parse_date.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/template/parse_date.md @@ -22,11 +22,11 @@ description: "wandelt einen Datumsstring in ein Date-Objekt um" ### Example ~~~jsx -var cfg = scheduler.config; -var strToDate = scheduler.date.str_to_date(cfg.date_format, cfg.server_utc); +const cfg = scheduler.config; +const strToDate = scheduler.date.str_to_date(cfg.date_format, cfg.server_utc); scheduler.templates.parse_date = function(date){ - return strToDate (date); + return strToDate(date); }; ~~~ diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/template/timelinename_second_scale_date.md b/i18n/de/docusaurus-plugin-content-docs/current/api/template/timelinename_second_scale_date.md index eb390ebf..b387be31 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/api/template/timelinename_second_scale_date.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/template/timelinename_second_scale_date.md @@ -25,8 +25,8 @@ description: "definiert die Elemente, die auf der sekundären X-Achse angezeigt ~~~jsx scheduler.templates.timeline_second_scale_date = function(date){ - var timeline = scheduler.matrix.timeline; - var func = scheduler.date.date_to_str( + const timeline = scheduler.matrix.timeline; + const func = scheduler.date.date_to_str( (timeline.second_scale && timeline.second_scale.x_date)? timeline.second_scale.x_date:scheduler.config.hour_date ); diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/template/tooltip_date_format.md b/i18n/de/docusaurus-plugin-content-docs/current/api/template/tooltip_date_format.md index c585c678..57bdc2fc 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/api/template/tooltip_date_format.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/template/tooltip_date_format.md @@ -23,7 +23,7 @@ description: "definiert, wie Start- und Enddaten im tooltip angezeigt werden" ~~~jsx scheduler.templates.tooltip_date_format=function (date){ - var formatFunc = scheduler.date.date_to_str("%Y-%m-%d %H:%i"); + const formatFunc = scheduler.date.date_to_str("%Y-%m-%d %H:%i"); return formatFunc(date); } ~~~ diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/template/week_agenda_scale_date.md b/i18n/de/docusaurus-plugin-content-docs/current/api/template/week_agenda_scale_date.md index 3e79a0b3..d3ba0bcb 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/api/template/week_agenda_scale_date.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/template/week_agenda_scale_date.md @@ -25,7 +25,7 @@ description: "Das Datum, das in einer Tageszelle der Ansicht angezeigt wird" ~~~jsx scheduler.templates.week_agenda_scale_date = function(date) { - var scale_date_format = scheduler.date.date_to_str("%l, %F %d"); + const scale_date_format = scheduler.date.date_to_str("%l, %F %d"); return scale_date_format(date); }; ~~~ diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/template/week_scale_date.md b/i18n/de/docusaurus-plugin-content-docs/current/api/template/week_scale_date.md index fa8b635e..c30bbc0d 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/api/template/week_scale_date.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/template/week_scale_date.md @@ -22,7 +22,7 @@ description: "definiert das Datum, das in der Sub-Header-Ansicht angezeigt wird" ### Example ~~~jsx -var format = scheduler.date.date_to_str(scheduler.config.day_date); +const format = scheduler.date.date_to_str(scheduler.config.day_date); scheduler.templates.week_scale_date = function(date){ return format(date); }; diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/template/xml_date.md b/i18n/de/docusaurus-plugin-content-docs/current/api/template/xml_date.md index 6976f0da..951b3dbc 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/api/template/xml_date.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/template/xml_date.md @@ -24,8 +24,8 @@ Die Funktion ist veraltet ### Example ~~~jsx -var cfg = scheduler.config; -var str_to_date = scheduler.date.str_to_date(cfg.xml_date, cfg.server_utc); +const cfg = scheduler.config; +const str_to_date = scheduler.date.str_to_date(cfg.xml_date, cfg.server_utc); scheduler.templates.xml_date = function(date){ return str_to_date(date); diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/template/xml_format.md b/i18n/de/docusaurus-plugin-content-docs/current/api/template/xml_format.md index f1b0fb67..476d7240 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/api/template/xml_format.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/template/xml_format.md @@ -24,8 +24,8 @@ Die Funktion ist veraltet ### Example ~~~jsx -var cfg = scheduler.config; -var date_to_str = scheduler.date.date_to_str(cfg.xml_date, cfg.server_utc); +const cfg = scheduler.config; +const date_to_str = scheduler.date.date_to_str(cfg.xml_date, cfg.server_utc); scheduler.templates.xml_format = function(date){ return date_to_str(date); @@ -39,7 +39,7 @@ scheduler.templates.xml_format = function(date){ ::: ~~~js -var dateToStr = scheduler.date.date_to_str("%Y-%m-%d %H:%i"); +const dateToStr = scheduler.date.date_to_str("%Y-%m-%d %H:%i"); scheduler.templates.format_date = function(date){ return dateToStr (date); }; diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/template/year_date.md b/i18n/de/docusaurus-plugin-content-docs/current/api/template/year_date.md index fe56de35..c06cd198 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/api/template/year_date.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/template/year_date.md @@ -22,7 +22,7 @@ description: "setzt das Datum, das im Header der Ansicht angezeigt wird" ### Example ~~~jsx -var date_to_str=scheduler.date.date_to_str(scheduler.locale.labels.year_tab +" %Y"); +const date_to_str = scheduler.date.date_to_str(scheduler.locale.labels.year_tab +" %Y"); scheduler.templates.year_date = function(date){ return date_to_str(date); diff --git a/i18n/de/docusaurus-plugin-content-docs/current/export/excel.md b/i18n/de/docusaurus-plugin-content-docs/current/export/excel.md index 98f88372..5a3cf2bb 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/export/excel.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/export/excel.md @@ -27,7 +27,7 @@ Um Scheduler-Daten in eine Excel-Datei zu exportieren, gehen Sie wie folgt vor: /*!*/ ~~~ @@ -72,7 +72,7 @@ scheduler.exportToExcel({ ], server:"https://myapp.com/myexport/scheduler", start: new Date(1999, 01, 01), - end: new Date(2022, 01, 01) + end: new Date(2027, 01, 01) }); ~~~ @@ -106,7 +106,7 @@ Um Scheduler-Daten als iCal-String zu exportieren, gehen Sie wie folgt vor: /*!*/ ~~~ @@ -126,7 +126,7 @@ Die **exportToICal()**-Methode akzeptiert ein optionales Objekt mit folgender Ei -~~~js title="Calling the export method with optional properties" +~~~js title="Calling the export method with server property" scheduler.exportToICal({ server:"https://myapp.com/myexport/scheduler" }); diff --git a/i18n/de/docusaurus-plugin-content-docs/current/export/pdf.md b/i18n/de/docusaurus-plugin-content-docs/current/export/pdf.md index 493f6769..b141b701 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/export/pdf.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/export/pdf.md @@ -1,186 +1,186 @@ ---- +--- title: "Export nach PDF" sidebar_label: "Export nach PDF" --- # Export nach PDF -*Dieser Artikel behandelt den Export mit dhtmlxScheduler Version 4.1 und neuer. Für Versionen 4.0 oder älter lesen Sie bitte [diese Anleitung](export/pdf-legacy.md).* +*Der Artikel bezieht sich auf den Export von dhtmlxScheduler 4.1+. Wenn Sie dhtmlxScheduler 4.0 oder frühere Versionen verwenden, finden Sie Details [hier](export/pdf-legacy.md).* -Seit Version 4.1 bietet dhtmlxScheduler eine neue Möglichkeit, den Scheduler als PDF-Datei zu exportieren, indem ein [Online-Exportdienst](export/pdf.md#default-export-to-pdf) verwendet wird. +Ab Version 4.1 bietet dhtmlxScheduler einen neuen Ansatz für den Export des Schedulers in das PDF-Format: einen [Online-Export-Service](export/pdf.md#default-export-to-pdf). -:::note -Der Dienst ist kostenlos nutzbar, aber unter der GPL-Lizenz generierte PDFs enthalten ein Wasserzeichen der Bibliothek. Beim Kauf einer Lizenz wird das Wasserzeichen während des aktiven Supportzeitraums entfernt (12 Monate für alle PRO-Lizenzen). +:::info +Der Dienst ist kostenlos, aber die Ausgabe-PDF-Datei enthält das Wasserzeichen der Bibliothek unter der GPL-Lizenz. Falls Sie eine Lizenz erwerben, ist das Export-Ergebnis während der gültigen Support-Periode (12 Monate für alle PRO-Lizenzen) ohne Wasserzeichen verfügbar. ::: -## Verwendung von Exportdiensten {#using-export-services} +## Verwendung von Export-Services -Es stehen mehrere Exportdienste zur Verfügung, die lokal auf Ihrem Rechner installiert werden können, um den Scheduler nach PDF zu exportieren. +Es gibt mehrere Export-Services. Sie können sie auf Ihrem Computer installieren und Scheduler lokal nach PDF exportieren. -Beachten Sie, dass Exportdienste unabhängig vom Scheduler-Paket sind. Weitere Informationen zu den Nutzungsbedingungen finden Sie im [zugehörigen Artikel](https://dhtmlx.com/docs/products/dhtmlxScheduler/export.shtml). +Hinweis: Export-Services sind nicht im Scheduler-Paket enthalten. Lesen Sie den entsprechenden Artikel, um die Nutzungsbedingungen jedes einzelnen zu erfahren. -## Grenzen der Anfragegröße {#limitsonrequestsize} +## Grenzen bei der Anforderungsgröße -Der API-Endpunkt *https://export.dhtmlx.com/scheduler* verarbeitet Exportanfragen (*exportToPDF*, *exportToPNG*, usw.). Die maximal zulässige Anfragegröße beträgt **10 MB**. - -## Standard-Export nach PDF {#default-export-to-pdf} +Es gibt einen gemeinsamen API-Endpunkt `https://export.dhtmlx.com/scheduler`, der Export-Methoden wie `exportToPDF()` und `exportToPNG()` bereitstellt. Die maximale Anforderungsgröße beträgt 10 MB. -Um den Scheduler als PDF zu exportieren, gehen Sie wie folgt vor: +## Standard-Export nach PDF -- Aktivieren Sie das export_api-Plugin mit der Methode [plugins](api/method/plugins.md): +Um einen Scheduler als PDF-Dokument zu exportieren, führen Sie die folgenden Schritte aus: + +- Um den Online-Export-Service zu verwenden, aktivieren Sie das `export_api`-Plugin über die [`plugins()`](api/method/plugins.md) Methode: ~~~js scheduler.plugins({ - export_api: true + export_api: true }); ~~~ :::note -Für Scheduler-Versionen vor 7.0 binden Sie das Skript **https://export.dhtmlx.com/scheduler/api.js** auf Ihrer Seite ein, um den Online-Exportdienst zu aktivieren, zum Beispiel: +Wenn Sie eine Scheduler-Version verwenden, die älter als 7.0 ist, müssen Sie die Datei `https://export.dhtmlx.com/scheduler/api.js` in Ihre Seite einbinden, um den Online-Export-Service zu aktivieren, z. B.: -~~~js +~~~html ~~~ ::: -- Verwenden Sie die exportToPDF-Methode, um den Export auszuführen: +- Rufen Sie die [`exportToPDF()`](#parameters-of-the-export-method) Methode auf, um Scheduler zu exportieren: -~~~html -/*!*/ +~~~html {1} + ~~~ -[Export to PDF/PNG](https://docs.dhtmlx.com/scheduler/samples/04_export/06_online_export.html) - +### Zu den Beispielen +- [Export nach PDF/PNG](https://docs.dhtmlx.com/scheduler/samples/04_export/06_online_export.html) -## Parameter der Exportmethode {#parametersoftheexportmethod} +## Parameter der Export-Methode -Die [exportToPDF()](api/method/exporttopdf.md)-Methode akzeptiert ein optionales Objekt als Parameter mit verschiedenen Eigenschaften: +Die [`exportToPDF()`](api/method/exporttopdf.md) Methode nimmt ein Objekt mit mehreren Eigenschaften als Parameter entgegen. Alle Eigenschaften sind optional: - + - + - + - + - + - + - + - +
name(string) Dateiname für das exportierte PDF(string) der Name der Ausgabedatei
format('A0', 'A1', 'A2', 'A3', 'A4', 'A5') Papierformat für die PDF-Ausgabe('A0', 'A1', 'A2', 'A3', 'A4', 'A5') das Format der Ausgabedatei im PDF-Format
orientation('portrait', 'landscape') Ausrichtung der PDF-Seiten('portrait', 'landscape') legt die Orientierung des Ausgabedokuments fest
zoom(number) Zoomstufe für die PDF-Ausgabe(number) legt den Zoomkoeffizienten des Ausgabedokuments fest
header(string) HTML-Inhalt, der als Kopfzeile im PDF enthalten sein soll(string) gibt den Header an, der dem Ausgabedokument hinzugefügt wird. Hinweis: Hier können Sie beliebiges HTML verwenden
footer(string) HTML-Inhalt, der als Fußzeile im PDF enthalten sein soll(string) gibt den Footer an, der dem Ausgabedokument hinzugefügt wird. Hinweis: Hier können Sie beliebiges HTML verwenden
server(string) API-Endpunkt-URL für Exportanfragen. Nützlich bei Verwendung eines lokalen Exportdienstes. Standardmäßig https://export.dhtmlx.com/scheduler(string) legt den API-Endpunkt für die Anfrage fest. Kann zusammen mit der lokalen Installation des Export-Services verwendet werden. Der Standardwert ist https://export.dhtmlx.com/scheduler
additional_settings(object) Zusätzliche Exportoptionen, darunter:
  • format - (string) Ausgabeformat: 'A3', 'A4', 'A5', 'Legal', 'Letter', 'Tabloid'
  • landscape - (boolean) Seitenausrichtung, nur relevant wenn "format" angegeben ist
  • width - (string|number|"content") Breite der Ausgabeseite, relevant für Mehrseitenexporte
  • height - (string|number|"content") Höhe der Ausgabeseite, relevant für Mehrseitenexporte
(object) ein Objekt mit zusätzlichen Einstellungen. Das Objekt kann folgende Attribute enthalten:
  • format - (string) das Format der Ausgabedatei: 'A3', 'A4', 'A5', 'Legal', 'Letter', 'Tabloid'
  • landscape - (boolean) Hoch- oder Querformat der Ausgabedatei. Das Attribut funktioniert nur, wenn das "format" Attribut angegeben ist.
  • width - (string|number|"content") die Breite der Ausgabeseite. Das Attribut wird verwendet, wenn mehrere Seiten exportiert werden.
  • height - (string|number|"content") die Höhe der Ausgabedatei. Das Attribut wird verwendet, wenn mehrere Seiten exportiert werden.
- -~~~js title="Beispielaufruf von exportToPDF mit Optionen" +### Aufruf der Export-Methode mit optionalen Eigenschaften +~~~js scheduler.exportToPDF({ - name:"myscheduler.pdf", - format:"A4", - orientation:"portrait", - zoom:1, - header:"

My company

", - footer:"

Bottom line

", - server:"https://myapp.com/myexport/scheduler" + name: "myscheduler.pdf", + format: "A4", + orientation: "portrait", + zoom: 1, + header: "

My company

", + footer: "

Bottom line

", + server: "https://myapp.com/myexport/scheduler" }); ~~~ -## Name der Ausgabedatei {#nameoftheoutputfile} +## Name der Ausgabedatei -Um einen eigenen Dateinamen für das exportierte PDF festzulegen, setzen Sie die **name**-Eigenschaft in den [exportToPDF](export/pdf.md#parametersoftheexportmethod)-Optionen: +Um einen benutzerdefinierten Namen für die Ausgabedatei festzulegen, verwenden Sie die `name`-Eigenschaft im Parameter der [`exportToPDF()`](export/pdf.md#parameters-of-the-export-method) Methode: -~~~js +~~~js {2} scheduler.exportToPDF({ - name:"my_beautiful_scheduler.pdf"/*!*/ + name: "my_beautiful_scheduler.pdf" }); ~~~ -## Kopf-/Fußzeile der Ausgabedatei {#headerfooter-of-the-output-file} +## Header/Footer der Ausgabedatei -Kopf- und Fußzeilen können dem exportierten PDF hinzugefügt werden, indem die Eigenschaften **header** und **footer** in den [exportToPDF](export/pdf.md#parametersoftheexportmethod)-Optionen verwendet werden: +Um der Ausgabedatei PDF einen Header/Footer hinzuzufügen, verwenden Sie die Eigenschaften `header`/`footer` im Parameter der [`exportToPDF()`](export/pdf.md#parameters-of-the-export-method) Methode: :::note -In diesen Eigenschaften kann beliebiges HTML verwendet werden. Wenn Sie Bilder einfügen, achten Sie darauf, für das "src"-Attribut absolute URLs zu verwenden. +Beachten Sie, dass Sie beim Festlegen der Parameter beliebiges HTML verwenden können. Wenn Sie Bilder angeben, denken Sie daran, globale Pfade als Werte des src-Attributs festzulegen. ::: -~~~js +~~~js {3-4} scheduler.exportToPDF({ - name:"myscheduler.pdf", - header:"

My company

",/*!*/ - footer:"

Bottom line

"/*!*/ + name: "myscheduler.pdf", + header: "

My company

", + footer: "

Bottom line

" }); ~~~ -## Eigener Stil für die Ausgabedatei {#customstylefortheoutputfile} +## Benutzerdefinierter Stil für die Ausgabedatei -Eigene Styles können angewendet werden, indem Sie ein Stylesheet mit Ihren CSS-Klassen einbinden: +Um dem Scheduler einen benutzerdefinierten Stil zu verleihen, liefern Sie das Stylesheet mit Ihren benutzerdefinierten CSS-Klassen: -- Durch Verlinkung auf ein externes Stylesheet: +- über einen Link: -~~~js +~~~js {3} scheduler.exportToPDF({ - name:"calendar.pdf", - header:'' /*!*/ + name: "calendar.pdf", + header: '' }); ~~~ -- Oder durch Einbetten von Styles innerhalb eines `' /*!*/ + name: "calendar.pdf", + header: '' }); ~~~ -Beachten Sie, dass dieser Ansatz mit global zugänglichen HTTP-URLs funktioniert. Für lokale oder Intranet-Umgebungen können Sie alle Styles direkt einbetten, zum Beispiel: +Beachten Sie, dass die oben genannte Lösung für den globalen HTTP-Verweis funktioniert. Wenn Sie CSS-Klassen in einer Intranet-/ lokalen Umgebung verwenden, können Sie alle Stile wie folgt einbetten: ~~~js scheduler.exportToPDF({ - header:"" + header: "" }); ~~~ -## Export von HTML-Elementen {#exportinghtmlelements} +## Export von HTML-Elementen -Beim Export des Schedulers nach PDF gibt es einige Einschränkungen bei HTML-Elementen aus Sicherheitsgründen. +Beim Export des Schedulers ins PDF-Format ist der Export von HTML-Elementen aufgrund möglicher Sicherheitsbedenken eingeschränkt. -Bestimmte Elemente wie ``, ``, ``-Tag mit einem *src*-Attribut, das auf eine SVG-Bild-URL verweist (funktioniert mit PNG- und JPG-Exporten, aber nicht mit Base64), zum Beispiel: +- Sie können ein ``-Element mit dem *src*-Attribut verwenden, das eine URL des Bildes im SVG-Format enthält (geeignet für PNG- und JPG-Formate, funktioniert nicht für das Base64-Format), z. B.: ~~~html ~~~ -- Verwenden Sie CSS-Styles wie *background* oder *background-image* mit einer `url()`, die auf eine Bild-URL oder einen Base64-String verweist (funktioniert mit PNG, JPG und SVG): +- Sie können Style-Elemente verwenden, wie *background* oder *background-image* und das `url`-Attribut mit dem Link zum Bild oder einem Bild im Base64-Format als Wert angeben (geeignet für PNG/JPG/SVG-Formate) ~~~css .red { @@ -191,4 +191,5 @@ Bestimmte Elemente wie ``, ``, `Integrieren Sie die dhtmlxCombo-Dateien: ~~~js @@ -43,13 +43,13 @@ Um das Combo-Steuerelement in der Lightbox zu verwenden, gehen Sie wie folgt vor ~~~ -2. Aktivieren Sie die editors-Erweiterung auf der Seite: +2. Aktivieren Sie die [editors](guides/extensions-list.md#editors) Erweiterung auf der Seite: ~~~js scheduler.plugins({ editors: true }); ~~~ -3. Fügen Sie die Sektion zur Lightbox-Konfiguration hinzu: +3. Fügen Sie die Sektion zur Lightbox-Konfiguration hinzu: ~~~js scheduler.config.lightbox.sections = [ { name:"description", ... }, @@ -58,66 +58,63 @@ scheduler.config.lightbox.sections = [ { name:"time", ...} ]; ~~~ -4. Legen Sie das Label für die Sektion fest: +4. Setzen Sie das Label für die Sektion: ~~~js scheduler.locale.labels.section_holders = "Holder"; ~~~ - - - [Combo box in the lightbox](https://docs.dhtmlx.com/scheduler/samples/02_customization/15_combo_select.html) ## Eigenschaften -Hier sind einige wichtige und häufig genutzte Eigenschaften für das 'combo'-Steuerelement (die vollständige Liste finden Sie [hier](api/config/lightbox.md)): +Die folgenden Eigenschaften sind größtenteils wichtig und werden häufig für die 'combo'-Steuerung festgelegt (siehe die vollständige Liste [hier](api/config/lightbox.md)): - + - + - + - + - - + + - + - - + + - + - +
name(string) Der Name der Sektion(string) der Name des Abschnitts
height(number) Die Höhe der Sektion(number) die Höhe des Abschnitts
map_to(string) Der Name der Daten-Eigenschaft, die der Sektion zugeordnet wird(string) der Name einer Daten-Eigenschaft, die dem Abschnitt zugeordnet wird
type(textarea,time,select,template,multiselect,radio,checkbox,combo) Der Typ des Steuerelements der Sektion(textarea,time,select,template,multiselect,radio,checkbox,combo) der Typ des Abschnitts-Steuerelements
options(Array von Objekten) Definiert die Auswahloptionen des Steuerelements (für 'select', 'multiselect', 'radio', 'combo' Steuerelemente). Jedes Objekt im Array spezifiziert eine einzelne Option und besitzt folgende Eigenschaften:
  • key - (string) Die ID der Option. Dieses Attribut wird mit der Daten-Eigenschaft des Events verglichen, um Optionen zuzuweisen
  • label - (string) Die Bezeichnung der Option
options(array von Objekten) definiert die Auswahloptionen des Steuerelements (für 'select', 'multiselect, 'radio', 'combo'-Steuerungen). Jedes Objekt im Array spezifiziert eine einzelne Option und nimmt folgende Eigenschaften auf:
  • key - (string) die Option-ID. Dieses Attribut wird mit der Daten-Eigenschaft des Events verglichen, um Optionen Events zuzuordnen
  • label - (string) die Bezeichnung der Option
image_path(string) Der Pfad zu den dhtmlxCombo-Bildern(string) der Pfad zu den dhtmlxCombo-Bildern
filtering(boolean, string) Aktiviert die Auto-Filter-Unterstützung (Optionen werden beim Tippen gefiltert). Optional Der Parameter kann folgende Werte annehmen:
  • false - Deaktiviert das Filtern
  • true oder "start" - Aktiviert das Filtern, Suche ab Beginn des Eintrags
  • "between" - Aktiviert das Filtern, sucht jede Vorkommen des eingegebenen Textes in den Einträgen
filtering(boolean, string) aktiviert die Auto-Filter-Unterstützung (Optionen werden beim Tippen gefiltert). Optional Der Parameter kann einen der folgenden Werte annehmen:
  • false - Filterung deaktivieren
  • true oder "start" - Filterung aktivieren, Suche beginnt am Anfang des Elements
  • "between" - Filterung aktivieren, Suche nach jeder Vorkommen des eingegebenen Texts in den Elementen
script_path(string) Der Pfad zum serverseitigen Skript, das die Combo-Optionen bereitstellt. Optional(string) der Pfad zum serverseitigen Skript, das die Optionen des Combos vom Server lädt. Optional
cache(boolean) Aktiviert oder deaktiviert das Caching der Skript-Antworten (Aktivierung empfohlen). Optional(boolean) aktiviert/deaktiviert das Caching der Skriptantworten (empfohlen, die Eigenschaft zu aktivieren). Optional
-## Befüllen des Steuerelements mit Daten +## Befüllung der Steuerung mit Daten -Um Werte für das Combo-Steuerelement bereitzustellen, verwenden Sie den [options](api/config/lightbox.md) Parameter: +Im Allgemeinen sollten Sie, um Werte für die Combo-Steuerung festzulegen, den Parameter [options](api/config/lightbox.md) verwenden: ~~~js scheduler.config.lightbox.sections = @@ -134,14 +131,14 @@ scheduler.config.lightbox.sections = ]; ~~~ -Jeder Eintrag im [options](api/config/lightbox.md) Parameter muss zwei erforderliche Eigenschaften besitzen: +Elemente im Parameter [options](api/config/lightbox.md) müssen zwei Pflicht-Eigenschaften haben: -- **key** - Die ID der Option -- **label** - Die Bezeichnung der Option +- **key** - (string) die Option-ID +- **label** - (string) die Bezeichnung der Option -## Befüllen des Steuerelements mit Daten vom Server +## Befüllung der Steuerung mit Daten vom Server -Um Combo-Optionen vom Server zu laden, verwenden Sie die **script_path** Eigenschaft, um die URL des serverseitigen Skripts anzugeben, das die Anfragen verarbeitet. +Um die Combo-Steuerung vom Server zu befüllen, verwenden Sie die Eigenschaft **script_path**, wobei der Pfad zum serverseitigen Skript angegeben wird, das Anfragen vom Server bearbeitet. ~~~js scheduler.config.lightbox.sections = [ @@ -150,22 +147,22 @@ scheduler.config.lightbox.sections = [ ]; ~~~ -Die **script_path** Eigenschaft definiert die URL, von der die Combo ihre Optionen per AJAX lädt. +Die Eigenschaft **script_path** gibt eine URL an, von der das Combo seine Optionen lädt, d. h. wenn script_path angegeben ist, versucht das Combo, Daten von dieser URL per AJAX zu laden. -Da der Combo-Selektor auf [dhtmlxCombo](https://docs.dhtmlx.com/combo__index.html) basiert, sollte der Server die Daten in einem kompatiblen Format zurückgeben. -Details zum Hinzufügen von Daten zur Combo finden Sie im Artikel [Loading Options](https://docs.dhtmlx.com/combo__adding_options.html). +Der Combo-Auswahl-Selector basiert auf [dhtmlxCombo](https://docs.dhtmlx.com/combo__index.html), daher sollte der Server Daten zurückliefern, die damit kompatibel sind. +Sie können in dem Artikel [Loading Options](https://docs.dhtmlx.com/combo__adding_options.html) nachlesen, wie Daten in das Combo eingefügt werden. -Anfragen werden in zwei Szenarien gestellt: +Die URL wird in zwei Fällen angefragt: -1) Wenn die Lightbox geöffnet wird und die Combo einen ausgewählten Wert besitzt, sendet das Steuerelement eine Anfrage, um das Label für diese Option zu laden. +1) Wenn das Lightbox-Fenster geöffnet wird und das Combo einen ausgewählten Wert hat – das Steuerelement sendet eine Anfrage an den Server und lädt eine Bezeichnung für die ausgewählte Option. -Die Anfrage enthält einen **id** Query-Parameter: +Die Anfrage enthält einen Query-Parameter **id**: ~~~ GET /url?id="1" ~~~ -Die Antwort sollte ein Array enthalten, das nur das Element mit der angegebenen ID enthält, formatiert wie folgt: +Die Antwort sollte ein Array mit nur dem Element mit der angegebenen id im folgenden Format zurückgeben: ~~~ [ @@ -174,16 +171,13 @@ Die Antwort sollte ein Array enthalten, das nur das Element mit der angegebenen ~~~ -2) Wenn ein Benutzer beginnt, im Combo-Eingabefeld zu tippen, lädt das Steuerelement gefilterte Optionen. - -Die Anfrage enthält den eingegebenen Text als **mask** Query-Parameter: +2) Wenn der Benutzer Text in das Eingabefeld eingibt – das Steuerelement lädt gefilterte Werte. Die Client-Anwendung sendet eine Anfrage mit dem eingegebenen Text im Parameter **mask** der Abfrage: ~~~ GET /url?mask="al" ~~~ -Der Server sollte alle Elemente zurückgeben, die mit dem Filter übereinstimmen: - +Die Server-Antwort sollte alle Elemente zurückgeben, die dem Maskenwert entsprechen: ~~~ [ { "value": 1, "text": "Albania"}, @@ -191,34 +185,24 @@ Der Server sollte alle Elemente zurückgeben, die mit dem Filter übereinstimmen ] ~~~ -Wenn Sie die [PHP Connector](https://github.com/DHTMLX/connector-php) Bibliothek verwenden, könnte der serverseitige Code wie folgt aussehen: +Beispiel eines Backend-Handlers (Node.js/Express): ~~~js -event->attach("beforeFilter", "by_id"); - function by_id($filter) { - if (isset($_GET['id'])) - $filter->add("item_id", $_GET['id'], '='); - } - - $combo->dynamic_loading(3); - $combo->render_table("Countries","item_id","item_nm"); - -?> +app.get("/api/countries", async (req, res) => { + const { id, mask } = req.query; + // Abfrage Ihrer Datenquelle nach id oder mask + const items = await countriesService.find({ id, mask }); + res.json(items); // [{ value: 1, text: "Albania" }, ...] +}); ~~~ [Populating a combo box from the server](https://docs.dhtmlx.com/scheduler/samples/02_customization/18_combo_select_from_db.html) -## Auto-Filtering Modus +## Auto-Filtering-Modus -Der Auto-Filtering Modus bedeutet, dass die Optionen automatisch beim Tippen gefiltert werden. Um diesen Modus zu aktivieren, setzen Sie die **filtering** Eigenschaft auf *true*: +Der Auto-Filtering-Modus ist der Modus, in dem Optionen automatisch gefiltert werden, während der Benutzer tippt. Um den Modus zu aktivieren, setzen Sie die Eigenschaft **filtering** auf true: ~~~js scheduler.config.lightbox.sections = [ @@ -227,8 +211,8 @@ scheduler.config.lightbox.sections = [ ]; ~~~ :::note -Beachten Sie, dass Auto-Filtering sowohl bei clientseitig als auch serverseitig geladenen Daten verwendet werden kann. +Hinweis: Sie können den Auto-Filtering-Modus verwenden, unabhängig von der Quelle, von der Sie Daten laden (Client- oder Server-Seite). ::: -Weitere Details finden Sie in der dhtmlxCombo Dokumentation unter Filtering. +Weitere Informationen finden Sie in der Dokumentation zu dhtmlxCombo unter dhtmlxCombo. Filtering. \ No newline at end of file diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides/custom-details-form.md b/i18n/de/docusaurus-plugin-content-docs/current/guides/custom-details-form.md index 4f3d5526..9470786e 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/guides/custom-details-form.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/guides/custom-details-form.md @@ -1,48 +1,50 @@ --- -title: "Vollständig individuelles Lightbox" -sidebar_label: "Vollständig individuelles Lightbox" +title: "Vollständig benutzerdefinierte Lightbox" +sidebar_label: "Vollständig benutzerdefinierte Lightbox" --- -# Vollständig individuelles Lightbox +# Vollständig benutzerdefinierte Lightbox -Um ein vollständig individuelles Lightbox für den Scheduler zu erstellen, müssen Sie die Methode [showLightbox](api/method/showlightbox.md) überschreiben: +Um eine vollständig benutzerdefinierte Lightbox für den Scheduler zu spezifizieren, definieren Sie die [`showLightbox()`](api/method/showlightbox.md) Methode neu: ~~~js -scheduler.showLightbox = function(id){ +scheduler.showLightbox = (id) => { // id - ID des Ereignisses ... Code, um ein beliebiges individuelles Formular anzuzeigen ... -} +}; ~~~ -Es gibt zwei Hilfsmethoden, die dies erleichtern können: +Es gibt 2 Hilfsmethoden, die Sie verwenden können, um die Implementierung zu vereinfachen: -- [startLightbox](api/method/startlightbox.md) - zeigt ein individuelles Lightbox in einem angegebenen HTML-Container an, zentriert auf dem Bildschirm. -- [endLightbox](api/method/endlightbox.md) - schließt das Lightbox +- [`startLightbox()`](api/method/startlightbox.md) - zeigt eine benutzerdefinierte Lightbox im angegebenen HTML-Container zentriert auf dem Bildschirm +- [`endLightbox()`](api/method/endlightbox.md) - schließt die Lightbox - -Angenommen, Sie haben irgendwo auf der Seite einen HTML-Container mit der ID **#custom_form**. Um ein individuelles Lightbox zu implementieren, könnten Sie Folgendes tun: +Angenommen, Sie haben irgendwo auf der Seite den HTML-Container `#custom_form`. Dann können Sie eine benutzerdefinierte Lightbox wie folgt implementieren: ~~~js -var custom_form = document.getElementById("custom_form"); +const customForm = document.getElementById("custom_form"); -scheduler.showLightbox = function(id){ - var ev = scheduler.getEvent(id); - scheduler.startLightbox(id, custom_form ); +scheduler.showLightbox = (id) => { + const event = scheduler.getEvent(id); + scheduler.startLightbox(id, customForm); ...'hier müssen Sie Werte im Formular setzen'... - //document.getElementById("some_input").value = ev.text; -} + // document.getElementById("some_input").value = event.text; +}; + // Sollte mit dem 'Speichern'-Button verknüpft sein -function save_form() { - var ev = scheduler.getEvent(scheduler.getState().lightbox_id); +const saveForm = () => { + const event = scheduler.getEvent(scheduler.getState().lightbox_id); ...'hier müssen Sie Werte aus dem Formular übernehmen'... - //ev.text = document.getElementById("some_input").value; - scheduler.endLightbox(true, custom_form); -} -// Sollte mit dem 'Abbrechen'-Button verknüpft sein -function close_form(argument) { - scheduler.endLightbox(false, custom_form); -} + // event.text = document.getElementById("some_input").value; + scheduler.endLightbox(true, customForm); +}; + +// muss an den 'cancel'-Button angehängt werden +const closeForm = () => { + scheduler.endLightbox(false, customForm); +}; ~~~ +### Verwandte Beispiele -[Fully custom lightbox](https://docs.dhtmlx.com/scheduler/samples/02_customization/16_custom_form.html) +- [Vollständig benutzerdefinierte Lightbox](https://docs.dhtmlx.com/scheduler/samples/02_customization/16_custom_form.html) \ No newline at end of file diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides/custom-events-color.md b/i18n/de/docusaurus-plugin-content-docs/current/guides/custom-events-color.md index 135ac200..5f1e8cc7 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/guides/custom-events-color.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/guides/custom-events-color.md @@ -1,40 +1,41 @@ --- -title: "Farbe für benutzerdefinierte Events" -sidebar_label: "Farbe für benutzerdefinierte Events" +title: "Farbe eines benutzerdefinierten Ereignisses" +sidebar_label: "Farbe eines benutzerdefinierten Ereignisses" --- -# Farbe für benutzerdefinierte Events +# Farbe eines benutzerdefinierten Ereignisses -Es gibt drei Möglichkeiten, die Farbe eines Events anzupassen: +Es gibt drei Möglichkeiten, einem Ereignis eine benutzerdefinierte Farbe zuzuweisen: -1. [Durch direktes Setzen von Farbwerten in den Eigenschaften des Event-Objekts](guides/custom-events-color.md#specifyingcolorsinpropertiesoftheeventobject); -2. [Durch Hinzufügen zusätzlicher CSS-Klasse(n) zum Event](guides/custom-events-color.md#attachingadditionalcssclassestoanevent); -3. [Durch dynamisches Generieren von Styles aus Daten](guides/custom-events-color.md#loadingcolorswithdata). +1. [Um Farbwerte in den Eigenschaften des Ereignis-Objekts festzulegen](guides/custom-events-color.md#specifying-colors-in-properties-of-the-event-object); +2. [Um dem Ereignis zusätzliche CSS-Klassen zuzuweisen](guides/custom-events-color.md#attaching-additional-css-classes-to-an-event). +3. [Um Stile aus Daten zu erzeugen](guides/custom-events-color.md#loading-colors-with-data). ![custom_event_color](/img/custom_event_color.png) -## Farben in den Eigenschaften des Event-Objekts festlegen {#specifyingcolorsinpropertiesoftheeventobject} +## Festlegen der Farben in den Eigenschaften des Ereignis-Objekts -Um einem Event eine individuelle Farbe zuzuweisen, fügen Sie einfach eine oder beide dieser Eigenschaften zum Event-Datenobjekt hinzu: +Um eine benutzerdefinierte Farbe für ein Ereignis festzulegen, reichen zwei zusätzliche Eigenschaften im Datenobjekt aus (oder nur eine davon): -- **textColor** - legt die Schriftfarbe des Events fest; -- **color** - legt die Hintergrundfarbe des Events fest. +- **textColor** - gibt die Schriftfarbe des Ereignisses an; +- **color** - gibt die Hintergrundfarbe des Ereignisses an. ![custom_color_model](/img/custom_color_model.png) -~~~js title="Setting the event's color in the data object" +Festlegen der Ereignisfarbe im Datenobjekt: +~~~js scheduler.parse([ - {id:1, start_date:"2019-05-21",end_date:"2019-05-25",text:"Task1", color:"red"}, - {id:2, start_date:"2019-06-02",end_date:"2019-06-05",text:"Task2", color:"blue"} + {id:1, start_date:"2027-05-21",end_date:"2027-05-25",text:"Task1", color:"red"}, + {id:2, start_date:"2027-06-02",end_date:"2027-06-05",text:"Task2", color:"blue"} ],"json"); ... scheduler.getEvent(1).color = "yellow"; scheduler.updateEvent(1); ~~~ -Beachten Sie, dass es sich hierbei um spezielle Eigenschaften handelt. Der Scheduler prüft diese automatisch und wendet die angegebenen Farben auf das Container-Element und den Text des Events an. Sind sie nicht vorhanden, verwendet der Scheduler die Standardfarben. +Hinweis: Dies sind spezielle Eigenschaften. Standardmäßig prüft der Scheduler immer, ob ein Ereignis sie besitzt, und wendet bei Vorhandensein die entsprechenden Werte auf den Ereigniskontainer und den Text an. Andernfalls verwendet der Scheduler vordefinierte Farben für das Ereignis. -Diese Eigenschaften akzeptieren jedes gültige CSS-Farbformat, zum Beispiel: +Die Eigenschaften können jeden gültigen CSS-Farbwert haben, z. B. sind alle folgenden Notationen gültig: ~~~js ev.color = "#FF0000"; @@ -42,176 +43,167 @@ ev.color = "red"; ev.color = "rgb(255,0,0)"; ~~~ +## Hinzufügen zusätzlicher CSS-Klassen zu einem Ereignis -## Zusätzliche CSS-Klassen zu einem Event hinzufügen {#attachingadditionalcssclassestoanevent} - -Eine weitere Möglichkeit, die Farbe eines Events festzulegen, ist das Hinzufügen benutzerdefinierter CSS-Klassen. - -### Vorgehensweise +Der zweite Weg, ein Ereignis zu färben, besteht darin, ihm zusätzliche CSS-Klassen anzuwenden. -Sie können eine CSS-Klasse mit der [event_class](api/template/event_class.md) Vorlage zu einem Event hinzufügen. +### Technik +Um eine CSS-Klasse auf ein Ereignis anzuwenden, verwenden Sie die [event_class](api/template/event_class.md) Vorlage. -Standardmäßig sieht die Vorlage so aus: +Die Standardimplementierung der Vorlage ist: ~~~js scheduler.templates.event_class = function(start, end, ev){ return ""; } ~~~ -*Diese Funktion gibt einen String zurück, der dem class-Attribut des Events hinzugefügt wird. So können Sie je nach Status des Events unterschiedliche Klassen zurückgeben.* - - -[Coloring events](https://docs.dhtmlx.com/scheduler/samples/02_customization/01_events_coloring.html) +*Die Funktion gibt eine Zeichenkette zurück, die der Ereignisklasse hinzugefügt wird. Sie können also je nach Zustand des Ereignisses unterschiedliche Klassen zurückgeben.* +[Färben von Ereignissen](https://docs.dhtmlx.com/scheduler/samples/02_customization/01_events_coloring.html) ### Beispiel -Angenommen, Sie möchten Events unterschiedlich einfärben, je nachdem, ob sie zu Managern oder Mitarbeitern gehören: grün für Manager und orange für Mitarbeiter. So gehen Sie vor: - -1. Fügen Sie Ihrem Datenmodell eine zusätzliche Eigenschaft hinzu, z. B. 'type', die den Benutzertyp enthält: 'manager' oder 'employee'. +Nehmen wir an, Sie möchten, dass die Ereignisse Managern und Mitarbeitenden in unterschiedlichen Farben zugeordnet werden: Für Manager grün, für Mitarbeitende orange. In diesem Fall führen Sie zwei Schritte aus: - ![extended_data_model](/img/extended_data_model.png) -2. Erstellen Sie CSS-Klassen, die diesen Typen entsprechen, z. B. 'manager_event' und 'employee_event'. Das CSS könnte so aussehen: +1. Fügen Sie dem Modell eine zusätzliche Daten-Eigenschaft hinzu und nennen Sie sie zum Beispiel 'type'. Die Eigenschaft speichert den Typ des Benutzers: 'manager' oder 'employee'. - +![extended_data_model](/img/extended_data_model.png) +2. Definieren Sie die zugehörigen CSS-Klassen für diese Typen, z. B. benannt als 'manager_event' und 'employee_event'. Für solche Namen sieht die CSS-Definition wie folgt aus: +[Redefining the default CSS classes](Redefining the default CSS classes) -~~~js title="Redefining the default CSS classes" ~~~html - + } + ~~~ -Für Scheduler-Versionen 6.0 und älter, die keine CSS-Variablen unterstützen, können Sie folgende Styles verwenden: +Für ältere Scheduler-Versionen (v6.0 und älter) sind CSS-Variablen nicht verfügbar und Ereignisse können mit folgenden Stilen eingefärbt werden: ~~~html - -~~~ -3. Überschreiben Sie abschließend die [event_class](api/template/event_class.md) Vorlage, um die Klassen zuzuweisen: - + /*Event im Day- oder Week-View*/ + .dhx_cal_event.manager_event div{ + background-color: #009966 !important; + color: black !important; + } + .dhx_cal_event.employee_event div{ + background-color: #FF9933 !important; + color: black !important; + } + + /*Mehr­tages-Ereignis im Monatsansicht*/ + .dhx_cal_event_line.manager_event{ + background-color: #009966 !important; + color: black !important; + } + .dhx_cal_event_line.employee_event{ + background-color: #FF9933 !important; + color: black !important; + } + + /*Ereignis mit fester Zeit, in der Monatsansicht*/ + .dhx_cal_event_clear.manager_event{ + color: black !important; + } + .dhx_cal_event_clear.employee_event{ + color: black !important; + } + +~~~ +3. Und schließlich überschreiben Sie die [event_class](api/template/event_class.md) Vorlage -~~~js title="Applying additional CSS classes to events:" +[Applying additional CSS classes to events:](Applying additional CSS classes to events:) +~~~js scheduler.templates.event_class = function (start, end, event) { - if (event.type == 'manager') return "manager_event"; - return "employee_event"; + if (event.type == 'manager') return "manager_event"; + return "employee_event"; }; ~~~ - [Coloring events](https://docs.dhtmlx.com/scheduler/samples/02_customization/01_events_coloring.html) - [Styling events with templates](https://docs.dhtmlx.com/scheduler/samples/02_customization/06_templates.html) +## Farben mit Daten laden -## Farben mit Daten laden {#loadingcolorswithdata} +Wenn Farben Teil Ihrer Daten sind, die vom Backend stammen, z. B. wenn die Farbe einer Aufgabe mit einer Phase oder einer Ressource verknüpft ist, die einer Aufgabe zugewiesen ist und nicht direkt auf der Seite fest codiert werden kann, kann es sinnvoll sein, Stile manuell aus Ihren Daten zu generieren. -Wenn Farben aus Backend-Daten stammen – etwa wenn die Farben von Aufgaben von Phasen oder zugewiesenen Ressourcen abhängen und nicht fest im Code stehen – können Sie Styles dynamisch aus Ihren Daten generieren. - -Angenommen, Sie haben eine Liste von Benutzern, die Aufgaben zugewiesen sind, wobei der Stil der Aufgabe von den Eigenschaften des Benutzers abhängt: +Angenommen, Sie haben die folgende Sammlung von Benutzern, die Aufgaben zugewiesen werden können. Die Stile der Aufgaben sollten durch die Eigenschaften der Benutzer-Datensätze definiert werden: ~~~js [ - {"key":1, "label":"John", "backgroundColor":"#03A9F4", "textColor":"#FFF"}, - {"key":2, "label":"Mike", "backgroundColor":"#f57730", "textColor":"#FFF"}, - {"key":3, "label":"Anna", "backgroundColor":"#e157de", "textColor":"#FFF"}, - {"key":4, "label":"Bill", "backgroundColor":"#78909C", "textColor":"#FFF"}, - {"key":7, "label":"Floe", "backgroundColor":"#8D6E63", "textColor":"#FFF"} + {"key":1, "label":"John", "backgroundColor":"#03A9F4", "textColor":"#FFF"}, + {"key":2, "label":"Mike", "backgroundColor":"#f57730", "textColor":"#FFF"}, + {"key":3, "label":"Anna", "backgroundColor":"#e157de", "textColor":"#FFF"}, + {"key":4, "label":"Bill", "backgroundColor":"#78909C", "textColor":"#FFF"}, + {"key":7, "label":"Floe", "backgroundColor":"#8D6E63", "textColor":"#FFF"} ] ~~~ -In diesem Fall werden Benutzer und ihre Farben getrennt vom Scheduler verwaltet, der die Benutzer-IDs oder Farben nicht im Voraus kennt. +In diesem Anwendungsfall werden Benutzer und ihre Farben von verschiedenen Teilen der App erstellt und verwaltet, und der Scheduler kennt in der Regel Benutzer-IDs und deren Farben nicht im Voraus. -So gehen Sie praktisch vor: +Folgendes können Sie in diesem Fall tun: -- Definieren Sie eine benannte serverList für diese Sammlung: +- Definieren Sie eine benannte serverList für diese Sammlung ~~~js scheduler.serverList("people"); ~~~ -- Laden Sie diese Optionen auf die Seite, entweder mit einem der unterstützten [Datenformate](guides/data-formats.md#json-with-collections) oder per individuellem XHR-Request. +- Optionen auf die Seite laden, entweder mit einem der unterstützten [Datenformate](guides/data-formats.md#json-with-collections) oder manuell über einen benutzerdefinierten xhr -- Nach dem Laden generieren Sie CSS-Styles dynamisch aus den Daten: +- Sobald Optionen geladen sind, können Sie CSS-Stile aus den Daten generieren: ~~~js scheduler.attachEvent("onLoadEnd", function(){ - // Verwenden Sie eine eindeutige ID für das Style-Element - var styleId = "dynamicSchedulerStyles"; + // use an arbitrary id for the style element + const styleId = "dynamicSchedulerStyles"; - // Wiederverwenden, falls das Style-Element bereits existiert + // in case you'll be reloading options with colors - reuse previously + // created style element - var element = document.getElementById(styleId); - if(!element){ - element = document.createElement("style"); - element.id = styleId; - document.querySelector("head").appendChild(element); - } - var html = []; - var resources = scheduler.serverList("people"); + let element = document.getElementById(styleId); + if(!element){ + element = document.createElement("style"); + element.id = styleId; + document.querySelector("head").appendChild(element); + } + let html = []; + const resources = scheduler.serverList("people"); - // Für jeden Benutzer CSS-Regeln erstellen und ins Style-Element einfügen + // generate css styles for each option and write css into the style element, - resources.forEach(function(r){ + resources.forEach(function(r){ html.push(`.event_resource_${r.key} { --dhx-scheduler-event-background:${r.backgroundColor}; --dhx-scheduler-event-color:${r.textColor}; }`); - }); - element.innerHTML = html.join(""); + }); + element.innerHTML = html.join(""); }); ~~~ -- Weisen Sie anschließend die generierten Klassen in der event_class Vorlage zu: +- Danach können Sie die zugehörigen Klassen zuweisen, die Sie aus der Klassen-Vorlage generiert haben: ~~~js scheduler.templates.event_class = function (start, end, event) { - var css = []; + let css = []; - if(event.owner_id){ - css.push("event_resource_" + event.owner_id); - } + if(task.owner_id){ + css.push("event_resource_" + event.owner_id); + } - return css.join(" "); + return css.join(" "); }; -~~~ +~~~ \ No newline at end of file diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides/custom-events-display.md b/i18n/de/docusaurus-plugin-content-docs/current/guides/custom-events-display.md index 763e3733..d2673fd1 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/guides/custom-events-display.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/guides/custom-events-display.md @@ -1,67 +1,68 @@ --- -title: "Benutzerdefiniertes Ereignisfeld" -sidebar_label: "Benutzerdefiniertes Ereignisfeld" +title: "Benutzerdefinierte Ereignis-Box" +sidebar_label: "Benutzerdefinierte Ereignis-Box" --- -# Benutzerdefiniertes Ereignisfeld +# Benutzerdefinierte Ereignis-Box -dhtmlxScheduler ermöglicht es Ihnen, die Darstellung von Ereignissen individuell anzupassen. +dhtmlxScheduler bietet die Möglichkeit, eine benutzerdefinierte Anzeige für Ereignisse zu definieren. :::note -Diese Funktion ist nur mit [Tagesansicht](views/day.md), [Week-Ansicht](views/week.md) und [Units-Ansicht](views/units.md) verfügbar. +Gilt nur für die Day View, Week View und Units View ::: ## Technik -Sie können Ereignisse mit der Methode [renderEvent](api/method/renderevent.md) anpassen: +Die Anpassung von Ereignissen erfolgt mit Hilfe der Methode **renderEvent**: ~~~js scheduler.renderEvent = function(container, ev) { - // Ihr Anpassungscode + // your customizing code } ~~~ -- **_container_** - das Containerelement für das Ereignis -- **_ev_** - das Ereignisobjekt selbst +- **_container_** - der Container des Ereignisses +- **_ev_** - das Ereignisobjekt -[Custom event box](https://docs.dhtmlx.com/scheduler/samples/02_customization/27_custom_event_box.html) +[Benutzerdefinierte Ereignis-Box](https://docs.dhtmlx.com/scheduler/samples/02_customization/27_custom_event_box.html) ## Wichtige Hinweise -- Wenn Sie _true_ zurückgeben, wird Ihr benutzerdefiniertes Rendering angewendet. Wenn Sie _false_ zurückgeben, wird das Standard-Rendering verwendet. -- Einige CSS-Klassen haben spezielle Funktionen und sollten als erste in der className des Elements stehen: - - **_dhx_event_move_** - macht das Element verschiebbar (normalerweise der Ereignis-Header). - - **_dhx_event_resize_** - ermöglicht es, die Dauer des Ereignisses durch Ziehen des Elements zu ändern. +- Die Rückgabe von **_true_** wendet die benutzerdefinierte Logik an, die Rückgabe von **_false_** wendet die Standardlogik an. +- Einige CSS-Klassen haben eine spezielle Funktion (sie müssen zuerst im className des Elements stehen): + - **_dhx_event_move_** - Ein Element mit diesem Stil kann gezogen werden (in der Regel ist es der Ereignis-Header). + - **_dhx_event_resize_** - Das Ziehen eines Elements mit diesem Stil ändert die Dauer des Ereignisses. ~~~js -var html = "
"; // Container für den Inhalt des Ereignisses - html += "
"; + html+= "
"; html += ""; - // Zwei Optionen: nur das Startdatum für kurze Ereignisse oder Start+Ende für längere anzeigen - if ((ev.end_date - ev.start_date)/60000 > 40) { // wenn das Ereignis länger als 40 Minuten dauert + //zwei Optionen hier: Nur das Startdatum für kurze Ereignisse oder Start-+Enddatum für längere + if ((ev.end_date - ev.start_date)/60000>40){ // wenn das Ereignis länger als 40 Minuten dauert html += scheduler.templates.event_header(ev.start_date, ev.end_date, ev); html += " @@ -69,24 +70,24 @@ scheduler.renderEvent = function(container, ev) { } else { html += scheduler.templates.event_date(ev.start_date) + ""; } - // Anzeige des Ereignistexts - html += "" + scheduler.templates.event_text(ev.start_date, ev.end_date, ev) + - "
"; + // Anzeige des Texts des Ereignisses + html += "" + scheduler.templates.event_text(ev.start_date,ev.end_date,ev)+ + "" + "
"; - // Bereich für die Größenanpassung + // der Bereich zur Größenänderung html += "
"; container.innerHTML = html; - return true; // wichtig: true für benutzerdefiniertes Rendering, false für Standard + return true; //erforderlich, true - um ein benutzerdefiniertes Formular anzuzeigen, false - das Standardformular }; ~~~ -Das zugehörige CSS sieht so aus: +und das dazugehörige CSS lautet Folgendes: ~~~html ~~~ -Alternativ können Sie anstelle von festen Farben auch CSS-Variablen verwenden, zum Beispiel so: +Sie können auch CSS-Variablen anstelle fester Farbwerte verwenden, wie folgt: ~~~html ~~~ - -[Customize and switch between themes](https://docs.dhtmlx.com/scheduler/samples/07_skins/07_themes.html) +### Verwandte Beispiele +- [Customize and switch between themes](https://docs.dhtmlx.com/scheduler/samples/07_skins/07_themes.html) -Wenn Sie Variablen auf diese Weise setzen, ersetzen Sie die Standardstile durch Ihre eigenen, und diese Änderungen werden im gesamten Scheduler angewendet. +Durch das Definieren von Variablen auf diese Weise können Sie die Standardstile neu definieren und sicherstellen, dass Ihre benutzerdefinierten Stile auf den Scheduler angewendet werden. :::note -Für eine konsistente Vererbung der Werte im gesamten Theme ist es am besten, Variablen auf dem :root-Element zu definieren. +Für eine korrekte Vererbung von Werten über das gesamte Theme hinweg definieren Sie Variablen im `:root`-Element. ::: -Wenn Sie diese Styles auf der **:root**-Ebene definieren, wird sichergestellt, dass sie im gesamten Component korrekt vererbt werden. So werden Änderungen richtig weitergegeben, wenn eine Variable von einer anderen abhängt. +Es ist wichtig, diese Stile im `:root`-Element zu definieren, um eine ordnungsgemäße Vererbung und Anwendung im gesamten Baustein sicherzustellen. Dieser Ansatz gewährleistet, dass, wenn eine von anderen Variablen verwendete Variable neu definiert wird, sie die verwandten Stile im gesamten Baustein entsprechend beeinflusst. -Zum Beispiel erbt die Variable `--dhx-scheduler-scale-color` ihren Wert von `--dhx-scheduler-container-color`. +Zum Beispiel erbt die Variable `--dhx-scheduler-scale-color` von der Primär-Textfarb-Variablen `--dhx-scheduler-container-color`. -- Wenn Sie `--dhx-scheduler-container-color` auf der **:root**-Ebene neu definieren, wird auch `--dhx-scheduler-scale-color` entsprechend aktualisiert. +- Wenn Sie `--dhx-scheduler-container-color` auf `:root`-Ebene neu definieren, stellen Sie sicher, dass `--dhx-scheduler-scale-color` diese Änderung widerspiegelt. ~~~html ~~~ -- Wenn Sie jedoch `--dhx-scheduler-container-color` tiefer im DOM, z.B. innerhalb von **.dhx_cal_container**, neu definieren, wird `--dhx-scheduler-scale-color` nicht geändert. +- Wenn Sie `--dhx-scheduler-container-color` auf einer niedrigeren Ebene im DOM-Baum neu definieren, z.B. innerhalb von **.dhx_cal_container**, wirkt sich dies nicht auf die Variable `--dhx-scheduler-scale-color` aus. ~~~html ~~~ -## Verwendung der Quellcodes +## Wie man Quellcodes verwendet -dhtmlxScheduler stellt Styles in folgenden Formaten bereit: +dhtmlxScheduler wird mit Stil-Dateien in folgenden Formen geliefert: -- **codebase/dhtmlxscheduler.css** - eine komprimierte CSS-Datei, bereit für den Produktionseinsatz; -- **codebase/sources/dhtmlxscheduler.css** - lesbare, vorgefertigte CSS-Dateien; -- **codebase/sources/less/** - LESS-Quelldateien für Scheduler-Skins. +- **codebase/dhtmlxscheduler.css** - eine vorgefertigte komprimierte CSS-Datei für Skins, einsatzbereit für die Produktion; +- **codebase/sources/dhtmlxscheduler.css** - vorgefertigte lesbare CSS-Dateien; +- **codebase/sources/less/** - Quell-Less-Dateien der Scheduler-Skins. -Die LESS-Quelldateien sind nützlich, wenn Sie bestehende Skins umfassend anpassen oder einen neuen Skin erstellen möchten. +Letztere können für eine tiefe Anpassung vorhandener Skins oder zur Erstellung eines neuen Skins verwendet werden. -## Erste Schritte +## Wie man startet -Sie können **codebase/sources/less** als NPM-Paket einrichten. Dieser Quellordner enthält zwei Arten von Dateien: +Sie können `codebase/sources/less` als NPM-Paket initialisieren. Die Quellen enthalten zwei Arten von Dateien: - Stylesheets; -- Dateien, die Mikrovariablen für detaillierte Anpassungen oder zum Erstellen neuer Skins deklarieren. +- Dateien mit Mikrovariablen-Deklarationen, die Sie zur Feinabstimmung der Scheduler-Ansicht oder zur Erstellung eines neuen Skins verwenden können. -## Skins erstellen +## Wie man Skins baut -Führen Sie im Verzeichnis **codebase/sources/less/** folgenden Befehl aus: +In `codebase/sources/less/` führen Sie Folgendes aus: -~~~ +~~~sh > npm install ~~~ -Nach Abschluss der Installation können Sie die CSS-Dateien mit diesen Befehlen neu erstellen: +Nachdem die Installation abgeschlossen ist, können Sie CSS-Dateien mit den folgenden Befehlen neu erstellen: -~~~ +~~~sh > npm run build ~~~ -Oder um Änderungen zu überwachen und automatisch neu zu bauen: +Oder -~~~ +~~~sh > npm run watch ~~~ -Diese Skripte kompilieren CSS aus den Quellen und legen das Ergebnis im *codebase*-Ordner des Scheduler-Pakets ab, wobei die bestehenden CSS-Dateien ersetzt werden. +Das Skript baut CSS-Dateien aus den Quellen neu und legt sie in den *codebase*-Ordner des Scheduler-Pakets ab und ersetzt die bestehenden Dateien. ## Struktur -Die Ordnerstruktur von **less** für Version 7.0 (kann sich in zukünftigen Versionen ändern) sieht wie folgt aus: +Die Struktur des `less`-Ordners für Version 7.0 (kann sich in zukünftigen Versionen ändern) ist unten angegeben: ### Bilder -- **./src/imgs** - SVG-Icons, die von allen Skins verwendet werden -- **./src/iconfont** - Icons, die in der Web-Schriftart enthalten sind +- **./src/imgs** - SVG-Symbole, die von allen Skins verwendet werden +- **./src/iconfont** - Icons vorkonfiguriert in der Webschrift ### Skin-Definitionen -Die Standardvariablen sind im `terrace`-Skin definiert, während andere Skins diese Variablen überschreiben und eigene Styles hinzufügen. +Die Standardmenge an Variablen ist im `terrace`-Skin definiert; andere Skins definieren die entsprechenden Variablen neu und fügen Stile hinzu. - **./src/themes** - - *./src/themes/variables.less* - gemeinsame Variablen für alle Skins, einschließlich `terrace` - - *./src/themes/contrast_black* - Variablen für den Kontrast-Schwarz-Skin - - *./src/themes/contrast_white* - Variablen für den Kontrast-Weiß-Skin - - *./src/themes/material* - Variablen für den Material-Skin - - *./src/themes/dark* - Variablen für den Dark-Skin - - *./src/themes/flat* - Variablen für den Flat-Skin + - *./src/themes/variables.less* - gemeinsame Variablen, die von allen Skins verwendet werden; Terrace-Skin + - *./src/themes/contrast_black* - Kontrast-Schwarz-Skin-Variablen + - *./src/themes/contrast_white* - Kontrast-Weiß-Skin-Variablen + - *./src/themes/material* - Material-Skin-Variablen + - *./src/themes/dark* - Dunkel-Skin-Variablen + - *./src/themes/flat* - Flach-Skin-Variablen -### Einstiegspunkte für das Bauen von Skins +### Einstiegspunkte zum Erstellen von Skins - theme.less - package.json -## Eigenen Skin erstellen +## Erstellen eines benutzerdefinierten Skins -Um einen neuen Skin zu erstellen, kopieren und benennen Sie zunächst einen bestehenden Skin aus **sources/less/src/themes** um. Gehen Sie wie folgt vor: +Um einen neuen Skin zu erstellen, können Sie eine der vorhandenen Skins aus dem Ordner `sources/less/src/themes` kopieren und umbennenen. Folgen Sie den untenstehenden Schritten: -1) Kopieren und benennen Sie eine der vorhandenen Skin-Dateien um. Zum Beispiel: +1. Eine der vorhandenen Dateien aus dem Ordner `sources/less/src/themes` kopieren und umbennen, zum Beispiel: -~~~ +~~~text -> kopieren: codebase/sources/less/src/themes/material.less --> umbenennen in: +-> umbennenen zu: codebase/sources/less/src/themes/custom.less ~~~ -2) Importieren Sie Ihre neue Datei in **sources/less/src/themes/index.less** wie folgt: +2. Importieren Sie die neue Datei in `sources/less/src/themes/index.less`, so: -~~~ +~~~less @import "./custom"; ~~~ -Definieren Sie dann Ihre eigenen Variablen wie folgt: +Und fügen Sie den Inhalt wie folgt hinzu: ~~~css :root[data-scheduler-theme='custom'] { @@ -238,25 +237,26 @@ Definieren Sie dann Ihre eigenen Variablen wie folgt: } ~~~ -Denken Sie daran, Skin-Variablen unter dem `:root`-Selektor mit dem Attribut `data-scheduler-theme` zu definieren. +Hinweis: Die Skin-Variablen sollten unter dem `:root`-Element definiert werden, wobei der Selektor `data-scheduler-there` verwendet wird. -Jedes neue Theme sollte die Variable **--dhx-scheduler-theme** enthalten, die auf den Namen des Themes gesetzt ist. +Eine neue Theme muss die Variable `--dhx-scheduler-theme` mit dem Theme-Namen enthalten. -3) Erstellen Sie die Skins neu mit: +3. Skins neu erstellen, indem Sie Folgendes ausführen: -~~~ +~~~sh npm run build ~~~ :::note -Beachten Sie, dass der Scheduler je nach verwendetem Skin einige vordefinierte Einstellungen anwenden kann. Wenn Sie einen neuen Skin durch Kopieren eines bestehenden erstellen, müssen Sie ggf. die entsprechenden Scheduler-Einstellungen manuell anpassen. +Beachten Sie, dass der Scheduler basierend auf dem angewendeten Skin einige vordefinierte Einstellungen für den Kalender anwenden kann. +Wenn Sie einen neuen Skin kopieren, müssen Sie möglicherweise die entsprechenden Einstellungen dem Scheduler manuell anwenden. ::: ## JS-Styling-Einstellungen -Einige Styling-Optionen im Scheduler werden nicht ausschließlich über CSS gesteuert, sondern über JavaScript-Konfigurationen gesetzt. Dazu gehören: +Beachten Sie, dass nicht alle Aspekte der Scheduler-Styling-Steuerung über CSS laufen; einige Parameter werden aus der JavaScript-Konfiguration definiert. Diese sind: - [hour_size_px](api/config/hour_size_px.md) -- und alle Einstellungen des [scheduler.xy](api/other/xy.md) Objekts +- und alle Einstellungen des Objekts [scheduler.xy](api/other/xy.md) \ No newline at end of file diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides/customizing-edit-select-bars.md b/i18n/de/docusaurus-plugin-content-docs/current/guides/customizing-edit-select-bars.md index 73ee03bc..08a7fed5 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/guides/customizing-edit-select-bars.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/guides/customizing-edit-select-bars.md @@ -1,15 +1,15 @@ --- -title: "Anpassen der 'Select'- und 'Edit'-Leisten" -sidebar_label: "Anpassen der 'Select'- und 'Edit'-Leisten" +title: "Anpassen der 'Select' und 'Edit' Leisten" +sidebar_label: "Anpassen der 'Select' und 'Edit' Leisten" --- -# Anpassen der "Select"- und "Edit"-Leisten +# Anpassen der "Select" und "Edit" Leisten -dhtmlxScheduler ermöglicht es Ihnen, eine individuelle Sammlung von Buttons sowohl für die Edit- als auch die Select-Leiste zu konfigurieren. +dhtmlxScheduler bietet die Möglichkeit, eine benutzerdefinierte Menge von Schaltflächen für die Bearbeitungs- und Auswahlleisten zu definieren. -## Die Select-Leiste +## Die Auswahlleiste -Standardmäßig enthält die Select-Leiste 3 Buttons ('Details', 'Edit', 'Delete'), die über die Option [icons_select](api/config/icons_select.md) definiert werden. +Standardmäßig enthält die Auswahlleiste drei Schaltflächen ('Details', 'Bearbeiten', 'Löschen'), die durch die [icons_select](api/config/icons_select.md) Konfigurationsoption festgelegt werden. ~~~js scheduler.config.icons_select = [ @@ -19,17 +19,18 @@ scheduler.config.icons_select = [ ]; ~~~ -### Anwendungsbeispiel -Hier sehen Sie eine Beispiel-Select-Leiste wie im untenstehenden Bild dargestellt: +### Verwendungsbeispiel +Betrachten wir die unten gezeigte Auswahlleiste: + ![select_bar.png](/img/select_bar.png) -Ein neuer Button mit dem Namen **Location** wurde zu den bestehenden Buttons hinzugefügt. +Zu den vorhandenen Schaltflächen haben wir eine neue hinzugefügt - **Location**. -Die Schritte hierfür sind: +Hier sind unsere Schritte: -- Aktualisieren Sie [icons_select](api/config/icons_select.md) wie folgt: +- Definieren Sie [icons_select](api/config/icons_select.md) wie folgt: ~~~js scheduler.config.icons_select = [ @@ -38,20 +39,20 @@ scheduler.config.icons_select = [ "icon_edit", "icon_delete" ]; - ~~~ - + :::note -Beachten Sie, jeder Button muss mit "icon_" beginnen -::: +Hinweis: Jeder Button muss mit "icon_" beginnen. + ::: + -- Definieren Sie das Label für den neuen Button: +- Legen Sie die Beschriftung für den neuen Button fest: ~~~js scheduler.locale.labels.icon_location = "Location"; ~~~ -- Weisen Sie die CSS-Klasse für den Button zu: +- Legen Sie die CSS-Klasse für den Button fest: ~~~js .dhx_menu_icon.icon_location{ @@ -59,19 +60,21 @@ scheduler.locale.labels.icon_location = "Location"; } ~~~ -- Definieren Sie den Click-Handler für den Button: + +- Definieren Sie den Handler, der Klicks auf den Button verarbeitet: ~~~js scheduler._click.buttons.location = function(id){ some_function(id); }; ~~~ - -Hier enthält **scheduler._click.buttons** die onClick-Handler für die Buttons der Leiste. Der Schlüssel 'location' entspricht dem Button-Namen aus [icons_select](api/config/icons_select.md), jedoch ohne das Präfix 'icon_'. -## Die Edit-Leiste +wobei scheduler._click.buttons die Sammlung der onClick-Handler für die Buttons der Leiste enthält. 'location' ist der Name des Buttons, der in [icons_edit](api/config/icons_edit.md) nach dem 'icon_'-Teil festgelegt wird. + + +## Die Bearbeitungsleiste -In der Regel verfügt die Edit-Leiste über 2 Buttons ('Save' und 'Cancel'), die über die Option [icons_edit](api/config/icons_edit.md) konfiguriert werden. +Im Allgemeinen enthält die Bearbeitungsleiste zwei Schaltflächen ('Speichern', 'Abbrechen'), die durch die [icons_edit](api/config/icons_edit.md) Konfigurationsoption festgelegt werden. ~~~js scheduler.config.icons_edit = [ @@ -80,16 +83,17 @@ scheduler.config.icons_edit = [ ]; ~~~ -### Anwendungsbeispiel -Betrachten Sie die untenstehende Edit-Leiste: +### Verwendungsbeispiel +Betrachten wir die unten gezeigte Bearbeitungsleiste: + ![customizing_edit_bar.png](/img/customizing_edit_bar.png) -Zusätzlich zu den Buttons **Save** und **Cancel** wurde ein neuer **Info**-Button hinzugefügt. -Das Vorgehen ist: +Zu den Buttons Speichern und Abbrechen haben wir eine neue hinzugefügt – Info. +Hier sind unsere Schritte: -- Aktualisieren Sie [icons_edit](api/config/icons_edit.md) wie folgt: +- Definieren Sie [icons_edit](api/config/icons_edit.md) wie folgt: ~~~js scheduler.config.icons_edit = [ @@ -99,13 +103,13 @@ scheduler.config.icons_edit = [ ]; ~~~ -- Setzen Sie das Label für den neuen Button: +- Legen Sie die Beschriftung für den neuen Button fest: ~~~js scheduler.locale.labels.icon_custom = "Info"; ~~~ -- Definieren Sie die CSS-Klasse für den Button: +- Legen Sie die CSS-Klasse für den Button fest: ~~~js .dhx_menu_icon.icon_custom{ @@ -113,7 +117,8 @@ scheduler.locale.labels.icon_custom = "Info"; } ~~~ -- Geben Sie den Click-Handler für den Button an: + +- Definieren Sie den Handler, der Klicks auf den Button verarbeitet: ~~~js scheduler._click.buttons.custom = function(id){ @@ -121,18 +126,19 @@ scheduler._click.buttons.custom = function(id){ }; ~~~ -Auch hier enthält **scheduler._click.buttons** die Click-Handler für die Buttons, und 'custom' entspricht dem Button-Namen aus [icons_edit](api/config/icons_edit.md) nach Entfernen des Präfixes 'icon_'. +wobei scheduler._click.buttons die Sammlung der onClick-Handler für die Buttons der Leiste enthält. 'custom' ist der Name des Buttons, der in [icons_edit](api/config/icons_edit.md) nach dem 'icon_'-Teil festgelegt wird. -## Dynamisches Ändern der Elemente der Leisten +## Dynamische Änderung der Leisten-Elemente -Es ist möglich, die Buttons der Edit- und Select-Leisten dynamisch anhand bestimmter Bedingungen zu ändern. +Die Buttons der Bearbeitungs- und Auswahlleisten können je nach Bedingung dynamisch geändert werden. -Wenn Ihre Events beispielsweise eine boolesche Eigenschaft **important** haben, die angibt, dass das Event kritisch ist und nicht gelöscht werden soll, können Sie den 'delete'-Button in der Select-Leiste entsprechend ein- oder ausblenden. So geht's: +Zum Beispiel besitzen Ihre Ereignisse eine benutzerdefinierte boolesche Eigenschaft important, die angibt, ob das Ereignis wichtig ist und vom Benutzer nicht gelöscht werden kann. +Je nach Wert dieser Eigenschaft möchten Sie den 'delete'-Button in der Auswahlleiste ausblenden bzw. anzeigen. Um ein solches Verhalten zu ermöglichen, verwenden Sie folgende Vorgehensweise: ~~~js scheduler.attachEvent("onClick", function(id){ - var event = scheduler.getEvent(id); + const event = scheduler.getEvent(id); if (event.important) scheduler.config.icons_select = ["icon_details"]; else @@ -140,4 +146,4 @@ scheduler.attachEvent("onClick", function(id){ return true; }); -~~~ +~~~ \ No newline at end of file diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides/data-export.md b/i18n/de/docusaurus-plugin-content-docs/current/guides/data-export.md deleted file mode 100644 index 37575e32..00000000 --- a/i18n/de/docusaurus-plugin-content-docs/current/guides/data-export.md +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: "Datenexport und -import" -sidebar_label: "Datenexport und -import" ---- - -# Datenexport und -import - -- [Integration mit Google Calendar](integrations/google-calendar/google-calendar-sync.md) -- [Export nach PDF](export/pdf.md) -- [Export nach PNG](export/png.md) -- [Export nach Excel und iCal](export/excel.md) -- [Daten-Serialisierung nach XML, JSON, iCal](export/serialization.md) diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides/data-formats.md b/i18n/de/docusaurus-plugin-content-docs/current/guides/data-formats.md index 5be60064..98b75c31 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/guides/data-formats.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/guides/data-formats.md @@ -3,9 +3,9 @@ title: "Beispiele für Datenformate" sidebar_label: "Beispiele für Datenformate" --- -# Beispiele für Datenformate +# Beispiele für Datenformate -Dieser Artikel enthält Beispiele für alle unterstützten Datenformate. +In diesem Artikel finden Sie Beispiele für alle unterstützten Datenformate. @@ -29,81 +29,81 @@ Dieser Artikel enthält Beispiele für alle unterstützten Datenformate. - - + + - - + + - - + +
Meeting11. April 2019 14:0011. April 2019 17:00April 11, 2027 14:00April 11, 2027 17:00
Conference15. April 2019 12:0018. April 2019 19:00April 15, 2027 12:00April 18, 2027 19:00
Interview24. April 2019 09:0024. April 2019 10:00April 24, 2027 09:00April 24, 2027 10:00
-## JSON {#json} +## JSON ~~~js [ { "id":"1", "text":"Meeting", - "start_date":"2019-04-11 14:00", - "end_date":"2019-04-11 17:00" + "start_date":"2027-04-11 14:00", + "end_date":"2027-04-11 17:00" }, { "id":"2", "text":"Conference", - "start_date":"2019-04-15 12:00", - "end_date":"2019-04-18 19:00" + "start_date":"2027-04-15 12:00", + "end_date":"2027-04-18 19:00" }, { "id":"3", "text":"Interview", - "start_date":"2019-04-24 09:00", - "end_date":"2019-04-24 10:00" + "start_date":"2027-04-24 09:00", + "end_date":"2027-04-24 10:00" } ] ~~~ -## JSON mit Collections {#json-with-collections} +## JSON mit Sammlungen -Dieses Format ist nützlich, wenn zusätzliche Datensammlungen eingebunden werden müssen. -Zum Beispiel ist es hilfreich beim Laden von Timeline- und Units-Abschnitten vom Server, wie in [loading Timeline and Units sections from the server](guides/loading-data.md#loadingdatawithtimelineandunitssectionsfromtheserver) beschrieben: +Dieses Format ist nützlich, wenn Sie zusätzliche Datensammlungen übermitteln müssen. +Zum Beispiel ist es nützlich, wenn Sie die [Timeline- und Units-Sektionen vom Server laden möchten](guides/loading-data.md#collections): ~~~js { "data":[ { "id":"1", - "start_date":"2019-03-02 00:00:00", - "end_date":"2019-03-04 00:00:00", + "start_date":"2027-03-02 00:00:00", + "end_date":"2027-03-04 00:00:00", "text":"dblclick me!", "type":"1" }, { "id":"2", - "start_date":"2019-03-09 00:00:00", - "end_date":"2019-03-11 00:00:00", + "start_date":"2027-03-09 00:00:00", + "end_date":"2027-03-11 00:00:00", "text":"and me!", "type":"2" }, { "id":"3", - "start_date":"2019-03-16 00:00:00", - "end_date":"2019-03-18 00:00:00", + "start_date":"2027-03-16 00:00:00", + "end_date":"2027-03-18 00:00:00", "text":"and me too!", "type":"3" }, { "id":"4", - "start_date":"2019-03-02 08:00:00", - "end_date":"2019-03-02 14:10:00", + "start_date":"2027-03-02 08:00:00", + "end_date":"2027-03-02 14:10:00", "text":"Type 2 event", "type":"2" } @@ -118,29 +118,30 @@ Zum Beispiel ist es hilfreich beim Laden von Timeline- und Units-Abschnitten vom } ~~~ -## XML {#xml} +## XML ~~~xml - 04/11/2013 14:00 - 04/11/2013 17:00 + 04/11/2027 14:00 + 04/11/2027 17:00 - 04/15/2013 12:00 - 04/18/2013 19:00 + 04/15/2027 12:00 + 04/18/2027 19:00 - 04/24/2013 09:00 - 04/24/2013 10:00 + 04/24/2027 09:00 + 04/24/2027 10:00 ~~~ -## iCal {#ical} + +## iCal ~~~html BEGIN:VCALENDAR @@ -148,48 +149,49 @@ VERSION:2.0 PRODID:-//dhtmlXScheduler//NONSGML v2.2//EN DESCRIPTION: BEGIN:VEVENT -DTSTART:20130411T140000 -DTEND:20130411T170000 +DTSTART:20270411T140000 +DTEND:20270411T170000 SUMMARY:Meeting END:VEVENT BEGIN:VEVENT -DTSTART:20130415 -DTEND:20130418 +DTSTART:20270415 +DTEND:20270418 SUMMARY:Conference END:VEVENT BEGIN:VEVENT -DTSTART:20130424T090000 -DTEND:20130424T100000 +DTSTART:20270424T090000 +DTEND:20270424T100000 SUMMARY:Interview END:VEVENT END:VCALENDAR ~~~ -## Daten mit benutzerdefinierten Eigenschaften {#datawithcustomproperties} -Hier ein Beispiel, bei dem der Basissatz ([oben](guides/data-formats.md)) um zwei benutzerdefinierte Eigenschaften erweitert wurde: +## Daten mit benutzerdefinierten Eigenschaften + +Betrachten wir ein Beispiel, bei dem das anfängliche Set (oben [siehe](guides/data-formats.md)) zwei benutzerdefinierte Eigenschaften hat: -- **room** - die Raumnummer, in der das Ereignis stattfindet. -- **holder** - der Name der für das Ereignis verantwortlichen Person. +- **room** - die Nummer des Raums, in dem die Veranstaltung stattfinden wird. +- **holder** - der Name der für die Veranstaltung Verantwortlichen. -#### JSON +#### JSON ~~~js [ { "id":"1", "text":"Meeting", - "start_date":"2019-04-11 14:00", - "end_date":"2019-04-11 17:00" + "start_date":"2027-04-11 14:00", + "end_date":"2027-04-11 17:00" "room":327, "holder":"James" } ] ~~~ -Beachten Sie, dass alle Eigenschaften, die Ihre Datenquelle zurückgibt, zu den Ereignisobjekten hinzugefügt werden und über die [client-side API](guides/event-object-operations.md) zugänglich sind. +Hinweis, dass alle Eigenschaften, die Ihre Datenquelle zurückgibt, zu Ereignisobjekten hinzugefügt werden und der [Client-seitigen API](guides/event-object-operations.md) zur Verfügung stehen wird. -Beispiel: +Beispielsweise: ~~~js scheduler.templates.event_text = function(start, end, event){ @@ -204,8 +206,8 @@ scheduler.templates.event_text = function(start, end, event){ - 04/11/2013 14:00 - 04/11/2013 17:00 + 04/11/2027 14:00 + 04/11/2027 17:00 327 @@ -213,7 +215,8 @@ scheduler.templates.event_text = function(start, end, event){ ~~~ #### iCal -Beachten Sie, dass auf der Client-Seite die Eigenschaftsnamen (außer DTSTART, DTEND und SUMMARY) von Groß- zu Kleinschreibung konvertiert werden: ROOM wird zu room, HOLDER wird zu holder. + +Hinweis: Auf der Client-Seite werden die Namen der Eigenschaften (mit Ausnahme von DTSTART, DTEND und SUMMARY) von Groß- in Kleinbuchstaben umgewandelt: ROOM -> room, HOLDER -> holder. ~~~html BEGIN:VCALENDAR @@ -221,11 +224,11 @@ VERSION:2.0 PRODID:-//dhtmlXScheduler//NONSGML v2.2//EN DESCRIPTION: BEGIN:VEVENT -DTSTART:20130411T140000 -DTEND:20130411T170000 +DTSTART:20270411T140000 +DTEND:20270411T170000 SUMMARY:Meeting ROOM:327 HOLDER:James END:VEVENT END:VCALENDAR -~~~ +~~~ \ No newline at end of file diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides/datastore-integration.md b/i18n/de/docusaurus-plugin-content-docs/current/guides/datastore-integration.md deleted file mode 100644 index 3450366f..00000000 --- a/i18n/de/docusaurus-plugin-content-docs/current/guides/datastore-integration.md +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: "Integration mit dhtmlxDataStore" -sidebar_label: "Integration mit dhtmlxDataStore" ---- - -# Integration mit dhtmlxDataStore - -Dieser Artikel beschreibt, wie Sie [mehrere Scheduler](guides/multiple-per-page.md) mit einem [dhtmlXDataStore](https://docs.dhtmlx.com/datastore__index.html)-Objekt synchronisieren können. Die Scheduler beziehen ihre Daten aus diesem gemeinsamen Store, sodass jede Änderung eines Events in einem Scheduler automatisch in den anderen übernommen wird. - -:::note -Hinweis: dhtmlxDataStore ist Teil des [dhtmlxSuite5](https://dhtmlx.com/docs/products/dhtmlxSuite5/) Pakets und ist standardmäßig nicht im dhtmlxScheduler enthalten. Wenn Sie jedoch keine dhtmlxSuite-Lizenz besitzen, können Sie dhtmlxDataStore dennoch kostenlos mit dhtmlxScheduler nutzen. Folgen Sie den untenstehenden Schritten, um es in Ihrer App einzurichten. -::: - -- [Laden Sie das dhtmlxDataStore-Paket herunter](https://files.dhtmlx.com/30d/33230caa09f4b5030ea5bfe374ef6d57/dhtmlxDataStore.zip) -- Fügen Sie *dhtmlxcommon.js* und *datastore.js* nach dem Laden von dhtmlxscheduler.js auf Ihrer Seite hinzu. Achten Sie darauf, die Reihenfolge genau wie gezeigt einzuhalten: - -~~~js - - - -~~~ - -Die typische Vorgehensweise, um Scheduler über DataStore zu synchronisieren, sieht wie folgt aus: - -~~~js -function init() { - var data = new dhtmlXDataStore({ - url:"data/data.json", - scheme:{ - $init:function(obj){ - if (typeof obj.start_date == "string"){ - obj.start_date = scheduler.templates.parse_date(obj.start_date); - obj.end_date = scheduler.templates.parse_date(obj.end_date); - } - } - } - }); - - scheduler1 = Scheduler.getSchedulerInstance(); - scheduler1.init('scheduler_here',new Date(2019,05,12),"week"); - scheduler1.sync(data, { copy:true }); - - - scheduler2 = Scheduler.getSchedulerInstance(); - scheduler2.init('scheduler_here_too',new Date(2019,05,12),"month"); - scheduler2.sync(data, { copy:true }); -} -~~~ - -Hier eine kurze Zusammenfassung, was im obigen Code passiert: - -1. Zuerst initialisieren wir dhtmlXDataStore wie üblich (Details finden Sie in den Abschnitten [Initialization](https://docs.dhtmlx.com/datastore__initialization.html) und [Data scheme](https://docs.dhtmlx.com/datastore__data_scheme.html) in der [dhtmlXDataStore-Dokumentation](https://docs.dhtmlx.com/datastore__index.html)). -2. Anschließend erstellen wir zwei Scheduler. Dies geschieht auf die gewohnte Weise, allerdings verwenden wir die [sync](https://docs.dhtmlx.com/api__datastore_sync.html)-Methode, um sie mit dem DataStore zu verbinden. - -Die [sync](https://docs.dhtmlx.com/api__datastore_sync.html)-Methode verbindet einen Scheduler mit einem DataStore und nimmt zwei Parameter entgegen: - -+ **data** - (erforderlich) Die dhtmlXDataStore-Instanz, die dem Scheduler die Daten bereitstellt. -+ **(copy:true)** - (erforderlich) Gibt an, dass der Scheduler eine eigene Kopie der DataStore-Daten anlegt. - -Der zweite Parameter verdient besondere Aufmerksamkeit, da er spezifisch für dhtmlxScheduler ist und nicht in der Hauptdokumentation von dhtmlXDataStore behandelt wird. - -Diese Option weist DataStore an, für jeden Scheduler eine separate Kopie der Daten zu erstellen. Im obigen Beispiel halten _DataStore_, _scheduler1_ und _scheduler2_ jeweils eigene Datensätze vor. Sie müssen sich jedoch nicht um die manuelle Synchronisierung dieser Datensätze kümmern - dies geschieht automatisch. Wenn Sie in einem Scheduler etwas ändern, wird die Aktualisierung an DataStore übergeben, der wiederum den Datensatz des anderen Schedulers aktualisiert. - -Vielleicht fragen Sie sich, warum dieser zusätzliche Schritt notwendig ist, wenn das Endergebnis gleich zu sein scheint. - -Der Grund dafür ist: Neben den Haupteigenschaften eines Events enthält jedes Event auch eine Reihe interner Eigenschaften, die vom Scheduler zur Laufzeit zugewiesen werden. Diese internen Eigenschaften können sich je nach aktuell ausgewählter Ansicht ändern. Wenn beispielsweise das gleiche Event in beiden Schedulern geöffnet ist, aber in unterschiedlichen Ansichten angezeigt wird, könnten sich die Werte der internen Eigenschaften unterscheiden. Diese Abweichung kann dazu führen, dass das Event nicht korrekt dargestellt wird. - -In diesem Fall hilft der Parameter (**(copy:true)**) dabei, solche Probleme durch eine saubere Datenverarbeitung zu vermeiden. Darüber hinaus kann die Datenverdopplung auch in anderen Situationen nützlich sein. - -Zum Beispiel, wenn Sie zwei Scheduler auf einer Seite haben, die die gleichen Events, aber in unterschiedlichen Zeitzonen anzeigen (wie Moskau und London), funktioniert das Teilen eines einzelnen Datensatzes nicht gut. Separate Datensätze für jeden Scheduler ermöglichen es, Events in beiden Zonen korrekt darzustellen. - - -[Integration with dhtmlXDataStore](https://docs.dhtmlx.com/scheduler/samples/10_integration/04_datastore.html) diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides/date-formats.md b/i18n/de/docusaurus-plugin-content-docs/current/guides/date-formats.md index 858c9b0b..7d5e9652 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/guides/date-formats.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/guides/date-formats.md @@ -1,67 +1,59 @@ ---- +--- title: "Operationen mit Datumsangaben" sidebar_label: "Operationen mit Datumsangaben" --- # Operationen mit Datumsangaben -Die Bibliothek enthält das Objekt [date](api/other/date.md), das eine Vielzahl von Methoden zur Datumsformatierung bietet. - -Dieser Artikel hebt einige der wichtigsten und am häufigsten verwendeten Methoden hervor. Die vollständige Liste der Methoden finden Sie auf der [Date-Objekt-Seite](api/other/date.md). +Die Bibliothek enthält das [date](api/other/date.md) Objekt, das eine Reihe von Datumsformatierungsfunktionen bereitstellt. +In diesem Artikel betrachten wir besonders wichtige und häufig verwendete Methoden. Eine vollständige Liste der Methoden finden Sie auf der [Date-Objekt-Seite](api/other/date.md). -## Umwandlung eines Date-Objekts in einen String +## Umwandeln eines Date-Objekts in einen String -Um ein Date-Objekt in einen String umzuwandeln, wird die Methode [date_to_str](api/other/date.md) verwendet: +Um ein Date-Objekt in einen String zu konvertieren, verwenden Sie die [date_to_str](api/other/date.md) Methode: - -*Diese Methode gibt eine Funktion zurück, die ein Date-Objekt gemäß dem angegebenen Muster in einen String formatiert:* +*Die Methode gibt eine Funktion zurück, die ein Date-Objekt in einen String des angegebenen Formats konvertiert:* ~~~js -var formatFunc = scheduler.date.date_to_str("%d/%m/%Y"); -var date = formatFunc(new Date(2013, 05, 29)); // -> "29/06/2013" +const formatFunc = scheduler.date.date_to_str("%d/%m/%Y"); +const date = formatFunc(new Date(2027, 05, 29)); // -> "29/06/2027" ~~~ +[Anzeige mehrerer Wochen in der Wochenansicht](https://docs.dhtmlx.com/scheduler/samples/11_scales/03_two_work_weeks.html) -[Displaying several weeks in Week view](https://docs.dhtmlx.com/scheduler/samples/11_scales/03_two_work_weeks.html) - -## Umwandlung eines Strings in ein Date-Objekt - -Um einen String in ein Date-Objekt umzuwandeln, steht die Methode [str_to_date](api/other/date.md) zur Verfügung: +## Umwandeln eines Strings in ein Date-Objekt - -*Diese Methode liefert eine Funktion, die einen entsprechend formatierten String analysiert und ein Date-Objekt zurückgibt:* +Um einen String in ein Date-Objekt umzuwandeln, verwenden Sie die [str_to_date](api/other/date.md) Methode: +*Die Methode gibt eine Funktion zurück, die einen String des angegebenen Formats in ein Date-Objekt konvertiert:* -Sie können eine Datums-Parsing-Funktion wie folgt erstellen: +Sie können wie folgt eine Datum-Konvertierungsfunktion erzeugen: ~~~js -var formatFunc = scheduler.date.str_to_date("%d/%m/%Y"); -var date = formatFunc("29/06/2019"); // -> 29 June, 2019 00:00:00 +const formatFunc = scheduler.date.str_to_date("%d/%m/%Y"); +const date = formatFunc("29/06/2027"); // -> 29. Juni 2027 00:00:00 ~~~ +## Umrechnung in UTC -## Umwandlung in UTC - -Um ein lokales Datum und eine lokale Uhrzeit in UTC umzuwandeln, verwenden Sie die Methode [convert_to_utc](api/other/date.md): +Um lokale Zeit in UTC umzuwandeln, verwenden Sie die [convert_to_utc](api/other/date.md) Methode: ~~~js -//29 June, 2019 14:00 (local time) -> 29 June, 2019 12:00 (utc) -var time = scheduler.date.convert_to_utc(new Date(2019, 05, 29, 14, 00)); +//29 June, 2027 14:00 (local time) -> 29 June, 2027 12:00 (utc) +const time = scheduler.date.convert_to_utc(new Date(2027, 05, 29, 14, 00)); ~~~ -## Hinzufügen (oder Subtrahieren) eines Zeitintervalls zu (von) einem Datum +## Hinzufügen (Subtrahieren) eines Zeitintervalls zu (von) einem Datum -Um ein Zeitintervall zu einem gegebenen Datum zu addieren oder davon zu subtrahieren, kann die Methode [add](api/other/date.md) verwendet werden: +Um ein Zeitintervall zu dem angegebenen Datum hinzuzufügen (oder davon zu subtrahieren), verwenden Sie die [add](api/other/date.md) Methode: ~~~js -//adds 1 year to the specified date: 29 June, 2019 -> 29 June, 2020 -var newDate = scheduler.date.add(new Date(2019, 05, 29), 1, 'year'); +//adds 1 year to the specified date: 29 June, 2027 -> 29 June, 2020 +const newDate = scheduler.date.add(new Date(2027, 05, 29), 1, 'year'); ~~~ - -[Changing the Y-Axis step](https://docs.dhtmlx.com/scheduler/samples/02_customization/09_timestep.html) - +[Ändern des Y-Achsen-Schritts](https://docs.dhtmlx.com/scheduler/samples/02_customization/09_timestep.html) :::note -Die vollständige Liste der Methoden zur Datumsformatierung finden Sie [hier](api/other/date.md). -::: +Eine vollständige Liste der Datumsformatierungsfunktionen finden Sie [hier](api/other/date.md). +::: \ No newline at end of file diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides/dhtmlx-components-integration.md b/i18n/de/docusaurus-plugin-content-docs/current/guides/dhtmlx-components-integration.md deleted file mode 100644 index 4028fa68..00000000 --- a/i18n/de/docusaurus-plugin-content-docs/current/guides/dhtmlx-components-integration.md +++ /dev/null @@ -1,129 +0,0 @@ ---- -title: "Drag-and-Drop-Operationen" -sidebar_label: "Drag-and-Drop-Operationen" ---- - -# Drag-and-Drop-Operationen - -Die Bibliothek enthält die **outerdrag**-Erweiterung, mit der es möglich ist, neue Ereignisse zu erstellen, indem Elemente aus externen DHTMLX-Komponenten oder anderen Schedulern per Drag-and-Drop eingefügt werden. - -## Ziehen aus externen Komponenten {#draggingfromexternalcomponents} - -Wenn ein Element aus einer externen Quelle in den Scheduler gezogen wird, öffnet der Scheduler automatisch das Lightbox-Formular, um ein neues Ereignis zu erstellen. - - -![external_dnd](/img/external_dnd.png) - - -[Integration with dhtmlxTree](https://docs.dhtmlx.com/scheduler/samples/10_integration/02_dhtmlxtree_outer_drag.html) - - -So funktioniert das externe Drag-and-Drop mit der dhtmlxTree-Komponente. - -Um den Scheduler mit dhtmlxTree zu integrieren, gehen Sie wie folgt vor: - -1. Laden Sie das dhtmlxTree-Paket herunter und entpacken Sie dessen Inhalt in das Stammverzeichnis Ihrer Anwendung. -2. Binden Sie die benötigten js- und css-Dateien auf Ihrer Seite ein: -~~~html - - -... -~~~ -3. Aktivieren Sie die outerdrag-Erweiterung: -~~~js -scheduler.plugins({ - outerdrag: true -}); -~~~ -4. Initialisieren Sie die dhtmlxTree-Komponente (Anleitung hier): -~~~js -var tree = new dhtmlXTreeObject("treebox", "100%", "100%", 0); -tree.setImagePath("../common/dhtmlxTree/imgs/csh_yellowbooks/"); -tree.loadXML("./data/tree.xml"); -~~~ -5. Aktivieren Sie Drag-and-Drop in der dhtmlxTree-Komponente (Anleitung hier): -~~~js -tree.enableDragAndDrop(true); -~~~ -6. Initialisieren und konfigurieren Sie den Scheduler: -~~~js -... -scheduler.init('scheduler_here', new Date(2019, 5, 30), "timeline"); -~~~ -7. Fügen Sie einen Handler für das [onExternalDragIn](api/event/onexternaldragin.md)-Event hinzu, um festzulegen, wie der Text des gezogenen Elements dem Ereignis zugewiesen wird: -~~~js -scheduler.attachEvent("onExternalDragIn", function(id, source, event){ - var label = tree.getItemText(tree._dragged[0].id); - scheduler.getEvent(id).text = label; - return true; -}); -~~~ - - -[Integration with dhtmlxTree](https://docs.dhtmlx.com/scheduler/samples/10_integration/02_dhtmlxtree_outer_drag.html) - - -Nach dieser Konfiguration ist das Erstellen neuer Ereignisse mit Daten aus dem Tree ganz einfach - ziehen Sie einfach den gewünschten Knoten per Drag-and-Drop. - -## Drag-and-Drop zwischen Schedulern {#drag-and-drop-between-schedulers} - -:::note -Dieses Feature ist nur für Commercial (seit 6. Oktober 2021), Enterprise und Ultimate Lizenzen verfügbar. -::: - -Wenn [mehrere Scheduler auf einer Seite](guides/multiple-per-page.md) angezeigt werden, kann Drag-and-Drop zwischen ihnen aktiviert werden, sodass Ereignisse nahtlos von einem Scheduler in einen anderen verschoben werden können. - -Um Drag-and-Drop-Unterstützung zwischen Schedulern zu aktivieren, binden Sie die "**drag_between**"-Erweiterung ein: - -~~~js title="Aktivieren von Drag-and-Drop-Unterstützung für mehrere Scheduler" - - - - -~~~ - -Ein Beispiel finden Sie unter **"samples/20_multiple/06_drag_between_layout.html"** im [Scheduler PRO-Paket](https://dhtmlx.com/docs/products/dhtmlxScheduler/). - -### Dragging von Ereignissen zu/von einem Scheduler einschränken -Um das Herausziehen von Ereignissen aus einem Scheduler zu verhindern, setzen Sie die [drag_out](api/config/drag_out.md)-Eigenschaft auf *false*: - -~~~js -scheduler.config.drag_out = false; // Dragging von Ereignissen aus diesem Scheduler deaktivieren /*!*/ -scheduler.init('scheduler_here',new Date(2019, 5,30),"week"); -scheduler.load("./data/units.xml"); - -scheduler2 = Scheduler.getSchedulerInstance(); -scheduler2.init('scheduler_here_2',new Date(2019, 5, 30),"week"); -~~~ - - -Um das Hineinziehen von Ereignissen in einen Scheduler zu verhindern, setzen Sie die [drag_in](api/config/drag_in.md)-Eigenschaft auf *false*: - -~~~js -scheduler.init('scheduler_here',new Date(2019, 5, 30),"week"); -scheduler.load("./data/units.xml"); - -scheduler2.config.drag_in = false; // Dragging von Ereignissen in diesen Scheduler deaktivieren /*!*/ -scheduler2 = Scheduler.getSchedulerInstance(); -scheduler2.init('scheduler_here_2',new Date(2019, 5, 30),"week"); -~~~ - -Das Beispiel **"samples/20_multiple/06_drag_between_layout.html"** ist im [Scheduler PRO-Paket](https://dhtmlx.com/docs/products/dhtmlxScheduler/) enthalten. - -### Drag-Events - -- [onBeforeEventDragOut](api/event/onbeforeeventdragout.md) - wird ausgelöst, bevor ein Ereignis aus dem Scheduler gezogen wird -- [onEventDragOut](api/event/oneventdragout.md) - wird ausgelöst, wenn ein Ereignis aus dem Scheduler gezogen wird -- [onBeforeEventDragIn](api/event/onbeforeeventdragin.md) - wird ausgelöst, bevor ein gezogenes Ereignis in den Scheduler gelangt -- [onEventDragIn](api/event/oneventdragin.md) - wird ausgelöst, wenn ein gezogenes Ereignis über den Scheduler bewegt wird -- [onEventDropOut](api/event/oneventdropout.md) - wird ausgelöst, wenn ein gezogenes Ereignis außerhalb des Scheduler-Bereichs abgelegt wird diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides/dhxlayout-integration.md b/i18n/de/docusaurus-plugin-content-docs/current/guides/dhxlayout-integration.md deleted file mode 100644 index a92d12ff..00000000 --- a/i18n/de/docusaurus-plugin-content-docs/current/guides/dhxlayout-integration.md +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: "Integration mit dhtmlxLayout" -sidebar_label: "Integration mit dhtmlxLayout" ---- - -# Integration mit dhtmlxLayout - -Die Verwendung von dhtmlxLayout ist eine praktische Möglichkeit, [mehrere Scheduler](guides/multiple-per-page.md) auf einer Seite zu organisieren. Es bietet einen ansprechenden Rahmen und hilft dabei, die Interaktionen mit anderen Seitenelementen zu steuern, wobei es sich reibungslos an Änderungen der Seitengröße anpasst. - -:::note -Beachten Sie, dass dhtmlxLayout nicht in der dhtmlxScheduler-Bibliothek enthalten ist. Es gibt zwei Versionen von Layout, abhängig von der verwendeten dhtmlxSuite-Bibliotheksversion. -::: - -## dhtmlxSuite v5+ - -In dieser Version kann dhtmlxLayout als eigenständiges Produkt oder als Teil der dhtmlxSuite-Bibliothek verwendet werden. Um dhtmlxLayout v5.X in Ihr Projekt einzubinden, ist ein [Lizenzerwerb](https://dhtmlx.com/docs/products/dhtmlxSuite5/) erforderlich. - -**Um eine dhtmlxScheduler-Instanz zu einer Layout-Zelle hinzuzufügen**, verwenden Sie die Methode [attachScheduler()](https://docs.dhtmlx.com/api__dhtmlxcell_attachscheduler.html). - -**Beachten Sie**, dass das Anhängen eines Schedulers an eine Zelle diesen automatisch initialisiert. Konfigurieren Sie daher den Scheduler, bevor Sie ihn in das Layout einfügen. - -~~~js -function init() { - var dhxLayout = new dhtmlXLayoutObject(document.body, "2U"); - - sched1 = Scheduler.getSchedulerInstance(); - sched1.config.multi_day = true; - dhxLayout.cells("a").attachScheduler(new Date(2019,05,30),"week",null,sched1); - sched1.load("/data/units") - - sched2 = Scheduler.getSchedulerInstance(); - dhxLayout.cells("b").attachScheduler(new Date(2019,05,30),"month",null,sched2); - sched2.load("/data/units") -} -~~~ - - -[Integration with dhtmlxLayout (dhx_terrace skin, Suite v5.1)](https://docs.dhtmlx.com/scheduler/samples/10_integration/05_dhtmlxlayout_terrace.html) - - -## dhtmlxSuite v6+ - -Ab dhtmlxSuite 6.0 ist dhtmlxLayout nur noch als Teil der vollständigen Suite-Bibliothek verfügbar. Um es auf diese Weise zu nutzen, muss eine Lizenz für die [Suite 6.X Bibliothek](https://dhtmlx.com/docs/products/dhtmlxSuite/#licensing) erworben werden. - -Ab [Version 5.3](guides/what-s-new.md#53) implementiert dhtmlxScheduler ein gemeinsames View-Interface, das mit dhtmlxSuite v6+ kompatibel ist und kann [direkt an jede Zelle angehängt werden](https://docs.dhtmlx.com/suite/layout/api/cell/layout_cell_attach_method/): - -~~~js -// Erstellen und Konfigurieren der Scheduler-Instanz -scheduler.config.header = [ - "day", - "week", - "month", - "date", - "prev", - "today", - "next" -]; -scheduler.config.multi_day = true; - -// Nachdem der Scheduler angehängt wurde, wird onSchedulerReady ausgelöst -scheduler.attachEvent("onSchedulerReady", function () { - requestAnimationFrame(function(){ - // Hier können Sie die Anfangsansicht und das Datum setzen und die Daten laden - scheduler.setCurrentView(new Date(2017,5,3), "week"); - scheduler.load("../common/events.json"); - }); - -}); - -const layout = new dhx.Layout("layout", { - rows: [{ - id: "scheduler-cell", - header: "Appointment Scheduler", - html:"
" - }] -}); -layout.cell("scheduler-cell").attach(scheduler); -~~~ - -### Beachten Sie - -- Beachten Sie, dass das `dhtmlxSuite Layout` asynchron arbeitet, sodass der Scheduler nicht unmittelbar nach dem Aufruf von `.attach` bereit ist. -- Es ist notwendig, auf das "onSchedulerReady"-Event zu warten, um nach der Initialisierung weitere Aufgaben auszuführen. -- Derzeit **gibt es keine Möglichkeit, das Scheduler-Markup bei Verwendung mit dhtmlxSuite v6+ zu spezifizieren**. Das bedeutet, dass die Steuerungselemente des Navigationspanels über die [header](api/config/header.md)-Einstellungen konfiguriert werden müssen. diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides/drag-between.md b/i18n/de/docusaurus-plugin-content-docs/current/guides/drag-between.md new file mode 100644 index 00000000..66f8e6dc --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/guides/drag-between.md @@ -0,0 +1,72 @@ +--- +title: "Drag-and-Drop Zwischen Scheduler-Instanzen" +sidebar_label: "Drag-and-Drop Zwischen Scheduler-Instanzen" +--- + +# Drag-and-Drop zwischen Scheduler-Instanzen + +:::info +Die Funktionalität ist nur für Commercial-, Enterprise- und Ultimate-Lizenzen verfügbar (seit dem 6. Oktober 2021). +::: + + +Wenn Sie mehrere Scheduler-Instanzen auf einer Seite anzeigen [guides/multiple-per-page.md], können Sie Drag-and-Drop-Operationen zwischen ihnen aktivieren, sodass Benutzer Ereignisse von einem Scheduler in einen anderen ziehen können und umgekehrt. + +Um Drag-and-Drop-Unterstützung für Scheduler zu aktivieren, fügen Sie einfach die Erweiterung "**drag_between**" auf der Seite hinzu: + +[Aktivierung der Drag-and-Drop-Unterstützung für mehrere Scheduler-Instanzen](Enabling drag-and-drop support for several schedulers) +~~~html + + + + +~~~ + +Sample **"samples/20_multiple/06_drag_between_layout.html"** provided in the [Scheduler PRO package](https://dhtmlx.com/docs/products/dhtmlxScheduler/). + + +### Drag-Ereignisse verweigern, zu/von einer Scheduler-Instanz +Um Drag-Ereignisse von einer Scheduler-Instanz zu verweigern, setzen Sie die [drag_out](api/config/drag_out.md)-Eigenschaft auf *false*: + +~~~js +scheduler.config.drag_out = false;//restrict dragging events from this scheduler /*!*/ +scheduler.init('scheduler_here',new Date(2027, 5,30),"week"); +scheduler.load("./data/units.xml"); + +scheduler2 = Scheduler.getSchedulerInstance(); +scheduler2.init('scheduler_here_2',new Date(2027, 5, 30),"week"); +~~~ + + +Um Drag-Ereignisse zu einer Scheduler-Instanz zu verweigern, setzen Sie die [drag_in](api/config/drag_in.md)-Eigenschaft auf *false*: + +~~~js +scheduler.init('scheduler_here',new Date(2027, 5, 30),"week"); +scheduler.load("./data/units.xml"); + + +scheduler2.config.drag_in = false;//restrict dragging events to this scheduler /*!*/ +scheduler2 = Scheduler.getSchedulerInstance(); +scheduler2.init('scheduler_here_2',new Date(2027, 5, 30),"week"); +~~~ + +Sample **"samples/20_multiple/06_drag_between_layout.html"** provided in the [Scheduler PRO package](https://dhtmlx.com/docs/products/dhtmlxScheduler/). + + +### Drag-Ereignisse + +- [onBeforeEventDragOut](api/event/onbeforeeventdragout.md) - löst aus, bevor das gezogene Ereignis aus dem Scheduler verschoben wird +- [onEventDragOut](api/event/oneventdragout.md) - löst aus, wenn ein gezogenes Ereignis aus dem Scheduler verschoben wird +- [onBeforeEventDragIn](api/event/onbeforeeventdragin.md) - löst aus, bevor ein gezogenes Ereignis über den Scheduler verschoben wird +- [onEventDragIn](api/event/oneventdragin.md) - löst aus, wenn ein gezogenes Ereignis über dem Scheduler verschoben wird +- [onEventDropOut](api/event/oneventdropout.md) - löst aus, wenn ein gezogenes Ereignis außerhalb des Scheduler abgelegt wird \ No newline at end of file diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides/event-object-operations.md b/i18n/de/docusaurus-plugin-content-docs/current/guides/event-object-operations.md index 975d0efa..f7efe6df 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/guides/event-object-operations.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/guides/event-object-operations.md @@ -5,94 +5,97 @@ sidebar_label: "Event-Objekt-Operationen" # Event-Objekt-Operationen -## Abrufen des Event-Objekts +## Das Event-Objekt abrufen -Um das Event-Objekt zu erhalten, verwenden Sie die Methode [getEvent](api/method/getevent.md): +Um das Event-Objekt zu erhalten, verwenden Sie die [getEvent](api/method/getevent.md) Methode: ~~~js scheduler.parse([ - {id:1, start_date:"2019-05-13 6:00", end_date:"2019-05-13 8:00", text:"Event 1"}, - {id:2, start_date:"2019-06-09 6:00", end_date:"2019-06-09 8:00", text:"Event 2"} + {id:1, start_date:"2027-05-13 6:00", end_date:"2027-05-13 8:00", text:"Event 1"}, + {id:2, start_date:"2027-06-09 6:00", end_date:"2027-06-09 8:00", text:"Event 2"} ]); ... -var eventObj = scheduler.getEvent(1); -//->{id:1, start_date:"2019-05-13 6:00", end_date:"2019-05-13 8:00", text:"Event 1"} +const eventObj = scheduler.getEvent(1); +//->{id:1, start_date:"2027-05-13 6:00", end_date:"2027-05-13 8:00", text:"Event 1"} ~~~ -## Events aus einem bestimmten Zeitraum abrufen +## Ereignisse aus dem angegebenen Zeitraum abrufen -Um eine Liste von Events zu erhalten, die in einem bestimmten Zeitraum stattfinden, verwenden Sie die Methode [getEvents](api/method/getevents.md): +Um eine Sammlung von Ereignissen zu erhalten, die innerhalb des angegebenen Zeitraums auftreten, verwenden Sie die [getEvents](api/method/getevents.md) Methode: ~~~js -var evs = scheduler.getEvents(new Date(2019,1,10),new Date(2019,2,10)); -//wobei evs ein Array von Event-Objekten ist +const evs = scheduler.getEvents(new Date(2027,1,10),new Date(2027,2,10)); +//where evs is an array of events' objects ~~~ -## Alle Events des Schedulers abrufen +## Alle Ereignisse des Schedulers abrufen -Um alle aktuell im Scheduler geladenen Events zu bekommen, rufen Sie die Methode [getEvents](api/method/getevents.md) ohne Parameter wie folgt auf: +Um alle in den Scheduler geladenen Ereignisse zu erhalten, rufen Sie die [getEvents](api/method/getevents.md) Methode ohne Parameter wie folgt auf: ~~~js -var evs = scheduler.getEvents(); -// gibt alle Events als Array von Objekten zurück +const evs = scheduler.getEvents(); +// returns all events as an array of objects ~~~ -## Das nächste Event ab aktuellem Datum abrufen +## Nächstes Ereignis ab dem aktuellen Datum abrufen ~~~js -var evs = scheduler.getEvents(new Date(), new Date(9999,1,1)); -//evs - Liste aller bevorstehenden Events +const evs = scheduler.getEvents(new Date(), new Date(9999,1,1)); +//evs - Liste aller bevorstehenden Ereignisse evs.sort(function(a,b){ return (a.start_date > b.start_date ? 1 : -1); }); -//evs[0] - das nächste bevorstehende Event +//evs[0] - nächstes bevorstehendes Ereignis ~~~ -## Die ID des Events abrufen +## Die ID des Ereignisses erhalten -Um die ID eines Events anhand eines seiner Eigenschaften zu finden, können Sie wie folgt vorgehen: +Um die ID des Ereignisses anhand des Wertes einer der Eigenschaften des Ereignisses zu erhalten, verwenden Sie die folgende Vorgehensweise: -~~~js title="Getting the event's id by the event's text" +Beispiel: Die ID des Ereignisses anhand des Texts des Ereignisses erhalten. +~~~js scheduler.parse([ - {id:1, start_date:"2019-05-13 6:00", end_date:"2019-05-13 8:00", text:"Event 1"}, - {id:2, start_date:"2019-06-09 6:00", end_date:"2019-06-09 8:00", text:"Event 2"} + {id:1, start_date:"2027-05-13 6:00", end_date:"2027-05-13 8:00", text:"Event 1"}, + {id:2, start_date:"2027-06-09 6:00", end_date:"2027-06-09 8:00", text:"Event 2"} ]); ... -var evs = scheduler.getEvents(); //holt alle Events aus dem Scheduler -for(var i="0;i 2 + const eventId = evs[i].id;// -> 2 }; ~~~ -Wenn die ungefähre Zeit des Events bekannt ist, empfiehlt es sich, den Zeitraum beim Abrufen der Events einzuschränken, um die Performance zu verbessern: + Wenn Sie eine ungefähre Zeit kennen, zu der das benötigte Ereignis auftritt, ist es besser, die zurückgegebene Sammlung von Ereignissen zu begrenzen, um die Geschwindigkeit der Anwendung zu erhöhen: ~~~js -var evs = scheduler.getEvents(new Date(2019,05,01),new Date(2019,05,10)); -for(var i="0;i 2 + const eventId = evs[i].id;// -> 2 }; ~~~ -## Die ID eines Events ändern -Um die ID eines Events zu aktualisieren, kann die Methode [changeEventId](api/method/changeeventid.md) wie folgt verwendet werden: +## Die ID des Ereignisses ändern + +Um die aktuelle ID eines Ereignisses zu ändern, verwenden Sie die [changeEventId](api/method/changeeventid.md) Methode wie folgt: ~~~js -scheduler.changeEventId("ev15", "ev25"); //ändert die Event-ID von "ev15" -> "ev25" +scheduler.changeEventId("ev15", "ev25"); //ändert die Ereignis-ID von "ev15" nach "ev25" ~~~ -## Das Label der Lightbox-Option als Event-Text setzen -Standardmäßig wird der Text eines Scheduler-Events aus dem zugeordneten Textfeld in der Lightbox übernommen. +## Die Beschriftung der Lightbox-Option als Text des Ereignisses festlegen + +Standardmäßig wird der Text eines Scheduler-Ereignisses über das im Lightbox-Feld zugeordnete Textfeld gesetzt. ![default_event_text](/img/default_event_text.png) -Es ist auch möglich, dieses Standardverhalten zu überschreiben und das Label der ausgewählten Option in der Combobox als Event-Text zu verwenden. +Es ist auch möglich, das Standardverhalten neu zu definieren und die Beschriftung der im Kombinationsfeld ausgewählten Option als Text des Ereignisses zu verwenden. ![option_event_text](/img/option_event_text.png) -Der Event-Text wird durch eine der folgenden Templates bestimmt: [event_text](api/template/event_text.md) oder [event_bar_text](api/template/event_bar_text.md), abhängig vom Ansichts-Typ. Um zu steuern, wie der Text zu einem Event hinzugefügt wird, sollten Sie das entsprechende Template anpassen. +Der Text eines Ereignisses wird durch eine der folgenden Vorlagen festgelegt: [event_text](api/template/event_text.md) oder [event_bar_text](api/template/event_bar_text.md), abhängig vom Typ der Ansicht. Um also das Schema zum Hinzufügen von Text zu einem Ereignis zu ändern, sollten Sie die entsprechende Vorlage neu definieren. ~~~js scheduler.config.lightbox.sections = [ @@ -107,9 +110,9 @@ scheduler.config.lightbox.sections = [ ]; scheduler.templates.event_text = scheduler.templates.event_bar_text = function(start, end, event){ - var options = scheduler.serverList("options"); + const options = scheduler.serverList("options"); - for(var i = 0; i < options.length; i++){ + for(let i = 0; i < options.length; i++){ if(options[i].key == event.type){ return options[i].label; } @@ -119,10 +122,10 @@ scheduler.templates.event_text = scheduler.templates.event_bar_text = function(s }; ~~~ -Folgende Punkte sind beim obigen Code zu beachten: +Es gibt mehrere Hinweise zum obigen Code: -- Die Methode [serverList](api/method/serverlist.md) stellt die Optionen für die Combobox bereit und ruft sie auch innerhalb des Templates ab. Sie kann ebenfalls verwendet werden, um Optionen zusammen mit anderen Daten über einen Connector zu laden und diese dynamisch zu aktualisieren. +- Die [serverList](api/method/serverlist.md)-Methode wird verwendet, um Optionen für das Combobox bereitzustellen und sie innerhalb der Vorlage abzurufen. Sie können Optionen zusammen mit Ereignisdaten über JSON-Sammlungen laden (siehe [Data formats](guides/data-formats.md#json-with-collections)) und sie später mit [updateCollection](api/method/updatecollection.md) aktualisieren. -- Das Template führt eine lineare Suche durch, um das ausgewählte Element zu finden. Bei einer großen Anzahl von Events oder Optionen kann dies die Performance beeinflussen, da diese Templates häufig aufgerufen werden. Um die Effizienz zu steigern, empfiehlt es sich, einen Hash für schnellere Suchvorgänge zu verwenden, anstatt das Array jedes Mal zu durchlaufen. +- Innerhalb der Vorlage gibt es eine lineare Suche nach einem ausgewählten Element. In einigen Fällen, wenn Sie viele Ereignisse/Optionen haben, kann dies die Leistung spürbar beeinflussen, da diese Vorlagen recht häufig aufgerufen werden können. Um dieses Problem zu lösen, können Sie eine Hash-Tabelle für eine schnelle Suche erstellen statt ständig ein Array zu durchlaufen. -- Auf der Client-Seite muss die vollständige Liste der Optionen vorhanden sein, damit diese korrekt angezeigt werden können. Ist dies nicht der Fall, müssen die Optionen manuell geladen werden, zum Beispiel bei Verwendung einer Autocomplete-Suche, die Optionen dynamisch abruft. +- Die Client-Seite sollte die vollständige Liste der Optionen haben, um sie anzuzeigen. Andernfalls müssen Sie die Optionen manuell laden, z. B. wenn Sie die Autocomplete-Suchfunktion verwenden, die die erforderlichen Optionen dynamisch lädt. \ No newline at end of file diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides/export.md b/i18n/de/docusaurus-plugin-content-docs/current/guides/export.md deleted file mode 100644 index e27bb79a..00000000 --- a/i18n/de/docusaurus-plugin-content-docs/current/guides/export.md +++ /dev/null @@ -1,198 +0,0 @@ ---- -title: "Daten-Serialisierung nach XML, JSON, iCal" -sidebar_label: "Daten-Serialisierung nach XML, JSON, iCal" ---- - -# Daten-Serialisierung nach XML, JSON, iCal - -## Vorbereitungen - -Um diese Funktionalität zu aktivieren, müssen Sie lediglich die **serialize**-Erweiterung aktivieren. - -~~~js -scheduler.plugins({ - serialize: true -}); -~~~ - -## Export nach XML - -Um die Daten des Schedulers in einen XML-String zu konvertieren, verwenden Sie die Methode [toXML](api/method/toxml.md): - - -~~~js -var xml = scheduler.toXML(); //xml string - -~~~ - - -[Serialize scheduler events](https://docs.dhtmlx.com/scheduler/samples/04_export/01_serialize_data.html) - - -## Export nach JSON - -Um die Daten des Schedulers in einen JSON-String zu konvertieren, verwenden Sie die Methode [toJSON](api/method/tojson.md): - - -~~~js -var json_string = scheduler.toJSON(); //json string -~~~ - - -:::note -Beachten Sie, dass diese Methode einen JSON-String und kein JavaScript-Objekt zurückgibt. Wenn Sie ein JSON-Objekt benötigen, verwenden Sie stattdessen die Methode [getEvents](api/method/getevents.md). -::: - - -[Serialize scheduler events](https://docs.dhtmlx.com/scheduler/samples/04_export/01_serialize_data.html) - - -## Export nach iCal - -Um die Daten des Schedulers in einen iCal-String zu konvertieren, verwenden Sie die Methode [toICal](api/method/toical.md): - - -~~~js -var ical_string = scheduler.toICal(); //ical string -~~~ - - -Zusätzlich gibt es ein [externes Skript für iCal Import-Export-Operationen](guides/ical-export-import.md) - - -[Serialize scheduler events](https://docs.dhtmlx.com/scheduler/samples/04_export/01_serialize_data.html) - - -## Attribute bei der Serialisierung - -:::note -Dieser Ansatz gilt nicht für das iCal-Format. -::: - -Standardmäßig werden beim Export nur die Standardattribute (Eigenschaften) berücksichtigt: - -1. id -2. text -3. start_date (*das Serialisierungsformat wird durch die Eigenschaft [date_format](api/config/date_format.md) gesteuert*) -4. end_date - - -Um benutzerdefinierte Attribute einzubeziehen, können Sie die Methode **data_attributes** überschreiben. Ein einfaches Beispiel sieht so aus: - - -~~~js -scheduler.data_attributes = function(){ - return [ - ["id"],["text"],["date_start"],["date_end"], - ["custom_attribute"] - ]; -}; -~~~ - - -Im Wesentlichen gibt diese Methode eine Liste von Attributnamen zurück. - - -Sie können auch eine Formatierungsfunktion angeben, um Attributdaten vor der Serialisierung zu verarbeiten. - -Dies ist nützlich, um Datumsangaben vor dem Hinzufügen zu XML zu formatieren. - -~~~js -scheduler.data_attributes = function(){ - return [ - ["id"], - ["text"], - ["start_date",scheduler.templates.format_date], - ["end_date",scheduler.templates.format_date]]; -} -~~~ - -## Serialisierung von wiederkehrenden Ereignissen - -:::note -Diese Technik ist für das iCal-Format nicht anwendbar. -::: - -Wenn die "recurring"-Erweiterung verwendet wird, müssen zusätzliche Attribute für wiederkehrende Ereignisse definiert werden: - -~~~js -scheduler.data_attributes = function(){ - var empty = function(a){ return a||""; } - return [["id"], - ["text"], - ["start_date",scheduler.templates.xml_format], - ["end_date",scheduler.templates.xml_format], - ["rec_type",empty], - ["event_length",empty], - ["event_pid",empty]]; -} -~~~ - - -## Speichern von Daten in einer XML-Datei - -Die Serialisierung ermöglicht es, Daten einfach durch Speichern in einer XML-Datei zu sichern, ohne dass eine Datenbank erforderlich ist. - -- Aktivieren Sie zunächst die **serialize**-Erweiterung: - -~~~js -scheduler.plugins({ - serialize: true -}); -~~~ - - -- Fügen Sie als Nächstes ein verstecktes Formular zur Seite hinzu, um die Daten zu speichern: - - -~~~xml -
- -
-~~~ - - -- Fügen Sie eine "Speichern"-Schaltfläche auf der Seite hinzu - - -~~~html - - -~~~ - - -~~~js -function save(){ - var form = document.getElementById("xml_form"); - form.elements.data.value = scheduler.toXML(); - form.submit(); -} -~~~ - - -- Schreiben Sie serverseitig die Daten in eine bestehende Datei. Die xml_writer.php könnte folgendermaßen aussehen: - - -~~~php - -~~~ - - -Eine leere data.xml-Datei sieht so aus: - - -~~~xml - -~~~ - - -Mit dieser Konfiguration kann der Scheduler Ereignisse aus data.xml laden, und durch Drücken der "save"-Schaltfläche wird der aktuelle Zustand des Schedulers serialisiert und in der Datei gespeichert. - -So werden beim nächsten Laden des Schedulers die zuvor gespeicherten Ereignisse angezeigt. - - -## Fehlerbehebung - -Wenn Sie beim Speichern unerwünschtes Escaping der Daten bemerken, stellen Sie sicher, dass "magic_quotes" in Ihrer PHP-Konfiguration deaktiviert ist. diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides/extensions-list.md b/i18n/de/docusaurus-plugin-content-docs/current/guides/extensions-list.md index 77dd3854..bf4ce273 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/guides/extensions-list.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/guides/extensions-list.md @@ -5,19 +5,19 @@ sidebar_label: "Vollständige Liste der Erweiterungen" # Vollständige Liste der Erweiterungen -dhtmlxScheduler bietet eine Vielzahl von Erweiterungen, die die Standardfunktionalität erweitern. +dhtmlxScheduler enthält eine Reihe von Erweiterungen, die dem Standardverhalten zusätzliche Funktionen hinzufügen. -Um eine Erweiterung zu aktivieren, verwenden Sie die Methode [scheduler.plugins](api/method/plugins.md). +Um eine Erweiterung zu verwenden, aktivieren Sie sie mit der Methode [`plugins()`](api/method/plugins.md). :::info -Ab Version 6.0 wurden die Erweiterungsdateien aus dem **ext**-Ordner entfernt und in die *dhtmlxscheduler.js*-Datei integriert. +In v6.0 wurden die Code-Dateien der Erweiterungen aus dem **ext**-Ordner der Scheduler-Codebasis entfernt und in die *dhtmlxscheduler.js*-Datei integriert. -Wenn Sie dhtmlxScheduler 5.3 oder älter verwenden, lesen Sie bitte den [Migrationsartikel](migration.md#53---60). +Wenn Sie dhtmlxScheduler 5.3 oder frühere Versionen verwenden, lesen Sie den [Migrationsartikel](migration.md#53---60). ::: -## Active Links {#active-links} +## Active Links -Zeigt die Tagesnummern in der Monats- und Wochenansicht als anklickbare Links an, die den entsprechenden Tag in der gewählten Ansicht öffnen. +Stellt die Anzahl der Tage in den Monats- und Wochenansichten als anklickbare Links dar, die den entsprechenden Tag in der angegebenen Ansicht öffnen. ~~~js scheduler.plugins({ @@ -27,18 +27,15 @@ scheduler.plugins({ #### Verwandte Ressourcen -Artikel: [Monatsansicht](views/month.md#presenting-days-numbers-as-clickable-links) +Artikel: [Monatsansicht](views/month.md) +API: [active_link_view](api/config/active_link_view.md) -API: [active_link_view](api/config/active_link_view.md) +Beispiel: [Monatstage als Links](https://docs.dhtmlx.com/scheduler/samples/03_extensions/06_links_plugin.html) +## Agenda View -[Month days as links](https://docs.dhtmlx.com/scheduler/samples/03_extensions/06_links_plugin.html) - - -## Agenda View {#agenda-view} - -Dies ist die Code-Datei für die Agenda-Ansicht. +Die Agenda-Ansicht Code-Datei. ~~~js scheduler.plugins({ @@ -48,15 +45,13 @@ scheduler.plugins({ #### Verwandte Ressourcen -Artikel: [Agenda-Ansicht](views/agenda.md) - - -[Agenda view](https://docs.dhtmlx.com/scheduler/samples/03_extensions/03_agenda_view.html) +Artikel: [Agenda View](views/agenda.md) +Beispiel: [Agenda-Ansicht](https://docs.dhtmlx.com/scheduler/samples/03_extensions/03_agenda_view.html) -## All Timed {#all-timed} +## All Timed -Zeigt mehrtägige Ereignisse im gleichen Stil wie eintägige Ereignisse an. +Zeigt mehrtägige Ereignisse auf die übliche Weise an (Da\-sein-Tage werden wie üblich angezeigt). ~~~js scheduler.plugins({ @@ -68,13 +63,11 @@ scheduler.plugins({ API: [all_timed](api/config/all_timed.md) +Beispiel: [Darstellung mehrtägiger Ereignisse auf übliche Weise](https://docs.dhtmlx.com/scheduler/samples/03_extensions/26_multi_day_visible.html) -[Displaying multi-day events in the regular way](https://docs.dhtmlx.com/scheduler/samples/03_extensions/26_multi_day_visible.html) +## Collision - -## Collision {#collision} - -Steuert die Anzahl der Ereignisse, die im selben Zeitfenster auftreten. +Verwaltet die Anzahl der Ereignisse in einem Zeitfenster. ~~~js scheduler.plugins({ @@ -82,18 +75,15 @@ scheduler.plugins({ }); ~~~ - #### Verwandte Ressourcen -Artikel: [Verhindern von doppelten Ereignissen in einem Zeitfenster](guides/collisions.md) - +Artikel: [Verhindern doppelter Ereignisse in einem Zeitfenster](guides/collisions.md) -[Controlling the number of events in a time slot](https://docs.dhtmlx.com/scheduler/samples/03_extensions/15_collision.html) +Beispiel: [Kontrolle der Anzahl der Ereignisse in einem Zeitfenster](https://docs.dhtmlx.com/scheduler/samples/03_extensions/15_collision.html) +## Container Autoresize -## Container Autoresize {#container-autoresize} - -Passt die Größe des Scheduler-Containers automatisch an den Inhalt an. +Ermöglicht eine automatische Größenanpassung des Scheduler-Containers (Größe wird an den Inhalt angepasst). ~~~js scheduler.plugins({ @@ -103,18 +93,15 @@ scheduler.plugins({ #### Verwandte Ressourcen -Artikel: [dhtmlxScheduler in Plain JS/HTML](guides/initialization.md#containerautoresizing) - +Artikel: [dhtmlxScheduler in Plain JS/HTML](guides/initialization.md#scheduler-autoresizing) API: [container_autoresize](api/config/container_autoresize.md) +Beispiel: [Automatische Größenanpassung des Scheduler-Containers](https://docs.dhtmlx.com/scheduler/samples/03_extensions/28_container_autoresize.html) -[Autoresizing the scheduler container](https://docs.dhtmlx.com/scheduler/samples/03_extensions/28_container_autoresize.html) - - -## Cookie {#cookie} +## Cookie -Speichert den aktuellen Scheduler-Status (Modus und Datum) mithilfe von Cookies. +Speichert den aktuellen Zustand des Schedulers (Modus und Datum) in Cookies. ~~~js scheduler.plugins({ @@ -124,16 +111,15 @@ scheduler.plugins({ #### Verwandte Ressourcen -[Work with cookies](https://docs.dhtmlx.com/scheduler/samples/03_extensions/08_cookies_plugin.html) +Beispiel: [Arbeiten mit Cookies](https://docs.dhtmlx.com/scheduler/samples/03_extensions/08_cookies_plugin.html) +## Daytimeline -## Daytimeline {#daytimeline} - -:::info +:::note Diese Erweiterung ist nur in der PRO-Version verfügbar ::: -Stellt den "Days"-Modus für die Timeline-Ansicht bereit. +Eine Code-Datei für den "Days"-Modus der Timeline-Ansicht. ~~~js scheduler.plugins({ @@ -141,22 +127,20 @@ scheduler.plugins({ }); ~~~ - #### Verwandte Ressourcen -Artikel: [Timeline-Ansicht](views/timeline.md) - +Artikel: [Timeline View](views/timeline.md) -[Days as Timeline rows](https://docs.dhtmlx.com/scheduler/samples/06_timeline/14_days_as_sections.html) +Beispiel: [Days as Timeline rows](https://docs.dhtmlx.com/scheduler/samples/06_timeline/14_days_as_sections.html) -## Drag-n-Drop zwischen Schedulern {#drag-n-drop-between-schedulers} +## Drag-n-Drop between Schedulers :::info -Diese Erweiterung ist nur in der Scheduler PRO-Version (Commercial (seit 6. Oktober 2021), Enterprise und Ultimate Lizenzen) verfügbar. +Diese Erweiterung ist nur in der Scheduler PRO-Version (Kommerzielle Lizenzen seit dem 6. Oktober 2021), Enterprise- und Ultimate-Lizenzen) verfügbar. ::: -Ermöglicht das Ziehen und Ablegen von Ereignissen zwischen mehreren Schedulern, sodass Ereignisse von einem Scheduler zum anderen verschoben werden können. +Ermöglicht Drag-and-Drop-Operationen zwischen mehreren Scheduler-Instanzen, wodurch es möglich ist, Ereignisse von einem Scheduler zum anderen zu ziehen und umgekehrt. ~~~js scheduler.plugins({ @@ -166,13 +150,11 @@ scheduler.plugins({ #### Verwandte Ressourcen -Artikel: [Drag-and-drop zwischen Schedulern](guides/drag-between.md) +Artikel: [Drag-and-Drop zwischen Schedulers](guides/drag-between.md) +## Editors -## Editors {#editors} - -Enthält Code für die [radio](guides/radio.md), [combo](guides/combo.md), -[checkbox](guides/checkbox.md) Steuerelemente, die in der Lightbox verwendet werden. +Eine Code-Datei für die [radio](guides/radio.md), [combo](guides/combo.md), [checkbox](guides/checkbox.md) Steuerelemente des Lightbox-Dialogs. ~~~js scheduler.plugins({ @@ -180,18 +162,15 @@ scheduler.plugins({ }); ~~~ - #### Verwandte Ressourcen -Artikel: [Lightbox-Steuerelemente](guides/lightbox-editors.md) - - -[Radio button in the lightbox](https://docs.dhtmlx.com/scheduler/samples/02_customization/14_radio_buttons_section.html) +Artikel: [Lightbox Editors](guides/lightbox-editors.md) +Beispiel: [Radio-Button im Lightbox](https://docs.dhtmlx.com/scheduler/samples/02_customization/14_radio_buttons_section.html) -## Expand {#expand} +## Expand -Fügt ein "Expandieren"-Symbol in der oberen rechten Ecke des Schedulers hinzu. Ein Klick darauf wechselt zwischen der Originalgröße und dem Vollbildmodus. +Fügt dem rechten Eckpunkt des Schedulers das "expand"-Symbol hinzu. Ein Klick auf dieses Symbol ändert die Größe des Schedulers von der Originalgröße auf Vollbild und umgekehrt. ~~~js scheduler.plugins({ @@ -199,21 +178,17 @@ scheduler.plugins({ }); ~~~ - #### Verwandte Ressourcen -API: [expand](api/method/expand.md), [collapse](api/method/collapse.md) - +API: [`expand()`](api/method/expand.md), [`collapse()`](api/method/collapse.md) Events: [onBeforeExpand](api/event/onbeforeexpand.md), [onBeforeCollapse](api/event/onbeforecollapse.md), [onExpand](api/event/onexpand.md), [onCollapse](api/event/oncollapse.md) - -[Full-screen view](https://docs.dhtmlx.com/scheduler/samples/03_extensions/05_expand_plugin.html) +Beispiel: [Vollbild-Ansicht](https://docs.dhtmlx.com/scheduler/samples/03_extensions/05_expand_plugin.html) +## Export service -## Export service {#export-service} - -Aktiviert den Online-Export-Service. +Bietet die Möglichkeit, den Online-Exportdienst zu aktivieren. ~~~js scheduler.plugins({ @@ -223,19 +198,17 @@ scheduler.plugins({ #### Verwandte Ressourcen -Artikel: [Export nach PDF](export/pdf.md) , [Export nach PNG](export/png.md) - +Artikel: [Export nach PDF](export/pdf.md), [Export nach PNG](export/png.md) -[Export to PDF/PNG](https://docs.dhtmlx.com/scheduler/samples/04_export/06_online_export.html) +Beispiel: [Export nach PDF/PNG](https://docs.dhtmlx.com/scheduler/samples/04_export/06_online_export.html) - -## Grid View {#grid-view} +## Grid View :::info Diese Erweiterung ist nur in der PRO-Version verfügbar ::: -Die Code-Datei für die Grid-Ansicht. +Die Grid-Ansicht Code-Datei. ~~~js scheduler.plugins({ @@ -243,18 +216,15 @@ scheduler.plugins({ }); ~~~ - #### Verwandte Ressourcen -Artikel: [Grid-Ansicht](views/grid.md) - - -[Grid view](https://docs.dhtmlx.com/scheduler/samples/03_extensions/27_grid_view.html) +Artikel: [Grid View](views/grid.md) +Beispiel: [Grid view](https://docs.dhtmlx.com/scheduler/samples/03_extensions/27_grid_view.html) -## HTML Templates {#html-templates} +## HTML Templates -Erlaubt das Definieren von Templates mit HTML-Code. +Ermöglicht das Definieren von Vorlagen als HTML-Code. ~~~js scheduler.plugins({ @@ -264,15 +234,14 @@ scheduler.plugins({ #### Verwandte Ressourcen -Artikel: [Templates](guides/templates.md#specifyingtemplatesasanhtmlcode) +Artikel: [Templates](guides/templates.md#specifying-templates-with-code) +Beispiel: [Specifying templates with HTML](https://docs.dhtmlx.com/scheduler/samples/03_extensions/09_html_templates_plugin.html) -[Specifying templates with HTML](https://docs.dhtmlx.com/scheduler/samples/03_extensions/09_html_templates_plugin.html) +## Keyboard Navigation -## Keyboard Navigation {#keyboard-navigation} - -Aktiviert die Navigation mit der Tastatur. +Ermöglicht die Tastaturnavigation. ~~~js scheduler.plugins({ @@ -282,18 +251,15 @@ scheduler.plugins({ #### Verwandte Ressourcen -Artikel: [Tastaturnavigation](guides/keyboard-navigation.md) - - -[Keyboard Navigation and WAI-ARIA - Flat Skin](https://docs.dhtmlx.com/scheduler/samples/13_accessibility/01_regular_skin_all_views.html) - +Artikel: [Keyboard Navigation](guides/keyboard-navigation.md) -[Keyboard navigation in the scheduler](https://docs.dhtmlx.com/scheduler/samples/03_extensions/07_navigation_plugin.html) +Beispiel: [Keyboard Navigation und WAI-ARIA - Flat Skin](https://docs.dhtmlx.com/scheduler/samples/13_accessibility/01_regular_skin_all_views.html) +Beispiel: [Tastaturnavigation im Scheduler](https://docs.dhtmlx.com/scheduler/samples/03_extensions/07_navigation_plugin.html) -## Legacy {#legacy} +## Legacy -Aktiviert die Unterstützung für veraltete APIs. +Aktiviert veraltete API. ~~~js scheduler.plugins({ @@ -303,12 +269,11 @@ scheduler.plugins({ #### Verwandte Ressourcen -Artikel: [Migration von älteren Versionen](migration.md) +Artikel: [Migration From Older Versions](migration.md) +## Limit -## Limit {#limit} - -Bietet Optionen, um bestimmte Daten zu blockieren und hervorzuheben. +Bietet Funktionalität zum Blockieren und Hervorheben von Daten. ~~~js scheduler.plugins({ @@ -318,15 +283,14 @@ scheduler.plugins({ #### Verwandte Ressourcen -Artikel: [Blockieren und Markieren von Daten](guides/limits.md) - +Artikel: [Blocking and Marking Dates](guides/limits.md) -[Limiting dates for creating events](https://docs.dhtmlx.com/scheduler/samples/03_extensions/16_limitation.html) +Beispiel: [Begrenzung von Daten beim Erstellen von Ereignissen](https://docs.dhtmlx.com/scheduler/samples/03_extensions/16_limitation.html) -## Map View {#map-view} +## Map View -Die Code-Datei für die Kartenansicht. +Die Map-Ansicht Code-Datei. ~~~js scheduler.plugins({ @@ -336,15 +300,14 @@ scheduler.plugins({ #### Verwandte Ressourcen -Artikel: [Kartenansicht](views/map.md) +Artikel: [Map View](views/map.md) +Beispiel: [Map view](https://docs.dhtmlx.com/scheduler/samples/03_extensions/19_map_view.html) -[Map view](https://docs.dhtmlx.com/scheduler/samples/03_extensions/19_map_view.html) +## Mini Calendar (Date Picker) -## Mini Calendar (Date Picker) {#mini-calendar-date-picker} - -Ein Plugin, das einen Mini-Kalender hinzufügt. +Ein Plugin für den Mini-Kalender. ~~~js scheduler.plugins({ @@ -354,19 +317,18 @@ scheduler.plugins({ #### Verwandte Ressourcen -Artikel: [Mini-Kalender (Datumsauswahl)](guides/minicalendar.md), [Zeit und Datum](guides/time.md#minicalendarinthelightbox) - +Artikel: [Mini Calendar (Date Picker)](guides/minicalendar.md), [Time and Date](guides/time.md#mini-calendar-in-the-lightbox) -[Mini calendar in the scheduler header](https://docs.dhtmlx.com/scheduler/samples/05_calendar/01_select.html) +Beispiel: [Mini-Kalender im Scheduler-Header](https://docs.dhtmlx.com/scheduler/samples/05_calendar/01_select.html) -## Multisection {#multisection} +## Multisection :::info Diese Erweiterung ist nur in der PRO-Version verfügbar ::: -Ermöglicht das Zuweisen von Ereignissen zu mehreren Sektionen in der Timeline-Ansicht oder zu mehreren Einheiten in der Units-Ansicht. +Ermöglicht das Zuweisen von Ereignissen zu mehreren Abschnitten in der Timeline-Ansicht oder zu mehreren Einheiten in der Units-Ansicht. ~~~js scheduler.plugins({ @@ -376,18 +338,16 @@ scheduler.plugins({ #### Verwandte Ressourcen -Artikel: [Timeline-Ansicht](views/timeline.md#assignment-of-events-to-several-sections), [Units-Ansicht](views/units.md#assigning-events-to-several-units) - +Artikel: [Timeline View](views/timeline.md), [Units View](views/units.md) API: [multisection](api/config/multisection.md) - -[Multisection events in Timeline and Units view](https://docs.dhtmlx.com/scheduler/samples/12_multisection_events/01_multisection_events.html) +Beispiel: [Multisection-Ereignisse in Timeline- und Units-Ansicht](https://docs.dhtmlx.com/scheduler/samples/12_multisection_events/01_multisection_events.html) -## Multiselect {#multiselect} +## Multiselect -Fügt Unterstützung für das [multiselect](guides/multiselect.md) Steuerelement in der Lightbox hinzu. +Ein Plugin für die [Multiselect](guides/multiselect.md)-Steuerung des Lightbox-Dialogs. ~~~js scheduler.plugins({ @@ -397,15 +357,14 @@ scheduler.plugins({ #### Verwandte Ressourcen -Artikel: [Lightbox-Steuerelemente](guides/lightbox-editors.md) +Artikel: [Lightbox Editors](guides/lightbox-editors.md) +Beispiel: [Multiselect-Steuerung im Lightbox](https://docs.dhtmlx.com/scheduler/samples/03_extensions/21_multiselect_options.html) -[Multiselect control in the lightbox](https://docs.dhtmlx.com/scheduler/samples/03_extensions/21_multiselect_options.html) +## Multisource -## Multisource {#multisource} - -Ermöglicht das Laden von Daten aus mehreren Quellen. +Bietet Funktionalität zum Laden von Daten aus mehreren Quellen. ~~~js scheduler.plugins({ @@ -415,15 +374,14 @@ scheduler.plugins({ #### Verwandte Ressourcen -Artikel: [Daten laden](guides/loading-data.md#loadingdatafrommultiplesources) - +Artikel: [Laden von Daten](guides/loading-data.md#loading-data-from-multiple-sources) -[Loading data from multiple sources](https://docs.dhtmlx.com/scheduler/samples/03_extensions/13_multisource.html) +Beispiel: [Daten aus mehreren Quellen laden](https://docs.dhtmlx.com/scheduler/samples/03_extensions/13_multisource.html) -## Outerdrag {#outerdrag} +## Outerdrag -Erlaubt das Ziehen von Ereignissen aus externen DHTMLX-Komponenten wie dhtmlxTree. +Ermöglicht Drag-and-Drop von Ereignissen aus externen DHTMLX-Komponenten, z. B. dhtmlxTree. ~~~js scheduler.plugins({ @@ -431,27 +389,25 @@ scheduler.plugins({ }); ~~~ - #### Verwandte Ressourcen -Artikel: [Drag-and-Drop-Operationen](guides/drag-between.md) - +Artikel: [Drag-and-Drop Operations](guides/drag-between.md) -[Integration with dhtmlxTree](https://docs.dhtmlx.com/scheduler/samples/10_integration/02_dhtmlxtree_outer_drag.html) +Beispiel: [Integration mit dhtmlxTree](https://docs.dhtmlx.com/scheduler/samples/10_integration/02_dhtmlxtree_outer_drag.html) -## PDF {#pdf} +## PDF -Unterstützt den Export in PDF-Dokumente. +Bietet Export in ein PDF-Dokument. - [Export nach PDF (Version 4.0)](export/pdf-legacy.md) -- [Export nach PDF (Version 4.1+)]([Export nach PDF](export/pdf.md)) +- [Export nach PDF (Version 4.1+)](export/pdf.md) -## Quick Info {#quick-info} +## Quick Info -Zeigt ein Popup mit den Details eines Ereignisses an. +Bietet ein Popup mit Event-Details. ~~~js scheduler.plugins({ @@ -459,18 +415,16 @@ scheduler.plugins({ }); ~~~ - #### Verwandte Ressourcen Artikel: [Mobile Responsive Scheduler](guides/touch-support.md) - -[Touch-oriented scheduler](https://docs.dhtmlx.com/scheduler/samples/03_extensions/29_quick_info.html) +Beispiel: [Touch-orientierter Scheduler](https://docs.dhtmlx.com/scheduler/samples/03_extensions/29_quick_info.html) -## Readonly {#readonly} +## Readonly -Aktiviert den Nur-Lesen-Modus für die Lightbox und bestimmte Ereignisse. +Bietet den Nur-Lese-Modus für das Lightbox-Dialogfenster und bestimmte Ereignisse. ~~~js scheduler.plugins({ @@ -478,18 +432,16 @@ scheduler.plugins({ }); ~~~ - #### Verwandte Ressourcen -Artikel: [Schreibgeschützter Modus](guides/readonly.md) - +Artikel: [Read-only Mode](guides/readonly.md) -[Read-only lightbox](https://docs.dhtmlx.com/scheduler/samples/03_extensions/12_readonly_form.html) +Beispiel: [Nur-Lese Lightbox](https://docs.dhtmlx.com/scheduler/samples/03_extensions/12_readonly_form.html) -## Recurring {#recurring} +## Recurring -Fügt Unterstützung für wiederkehrende Ereignisse hinzu. +Bietet Unterstützung für wiederkehrende Ereignisse. ~~~js scheduler.plugins({ @@ -497,18 +449,16 @@ scheduler.plugins({ }); ~~~ - #### Verwandte Ressourcen -Artikel: [Wiederkehrende Ereignisse](guides/recurring-events.md) +Artikel: [Recurring Events](guides/recurring-events.md) +Beispiel: [Wiederkehrende Ereignisse](https://docs.dhtmlx.com/scheduler/samples/03_extensions/01_recurring_events.html) -[Recurring events](https://docs.dhtmlx.com/scheduler/samples/03_extensions/01_recurring_events.html) - -## Recurring Legacy {#recurring-legacy} +## Recurring Legacy -Legacy-Unterstützung für wiederkehrende Ereignisse. +Legacy-Engine für wiederkehrende Ereignisse. ~~~js scheduler.plugins({ @@ -518,12 +468,12 @@ scheduler.plugins({ #### Verwandte Ressourcen -Artikel: [Wiederkehrende Ereignisse (bis v7.1)](guides/recurring-events-legacy.md) +Artikel: [Recurring Events (bis v7.1)](guides/recurring-events-legacy.md) -## Serialize {#serialize} +## Serialize -Unterstützt das Serialisieren von Daten in ICal-, XML- und JSON-Formate. +Bietet Unterstützung für das Serialisieren in ICal, XML, JSON-Formate. ~~~js scheduler.plugins({ @@ -531,18 +481,14 @@ scheduler.plugins({ }); ~~~ - #### Verwandte Ressourcen -Artikel: [Daten-Serialisierung nach XML, JSON, iCal](export/serialization.md) +Artikel: [Data Serialization to XML, JSON, iCal](export/serialization.md) +Beispiel: [Scheduler-Ereignisse serialisieren](https://docs.dhtmlx.com/scheduler/samples/04_export/01_serialize_data.html) - -[Serialize scheduler events](https://docs.dhtmlx.com/scheduler/samples/04_export/01_serialize_data.html) - - -## Timeline {#timeline} +## Timeline :::info Diese Erweiterung ist nur in der PRO-Version verfügbar @@ -556,16 +502,14 @@ scheduler.plugins({ }); ~~~ - #### Verwandte Ressourcen -Artikel: [Timeline-Ansicht](views/timeline.md) - +Artikel: [Timeline View](views/timeline.md) -[Bar mode](https://docs.dhtmlx.com/scheduler/samples/06_timeline/02_lines.html) +Beispiel: [Bar-Modus](https://docs.dhtmlx.com/scheduler/samples/06_timeline/02_lines.html) -## Tooltip {#tooltip} +## Tooltip Aktiviert Tooltips für Ereignisse. @@ -575,22 +519,20 @@ scheduler.plugins({ }); ~~~ - #### Verwandte Ressourcen Artikel: [Tooltips](guides/tooltips.md) - -[Tooltips](https://docs.dhtmlx.com/scheduler/samples/03_extensions/20_tooltip.html) +Beispiel: [Tooltips](https://docs.dhtmlx.com/scheduler/samples/03_extensions/20_tooltip.html) -## Treetimeline {#treetimeline} +## Treetimeline :::info Diese Erweiterung ist nur in der PRO-Version verfügbar ::: -Stellt den "Tree"-Modus für die Timeline-Ansicht bereit. +Eine Erweiterung für den "Tree"-Modus der Timeline-Ansicht. ~~~js scheduler.plugins({ @@ -598,16 +540,14 @@ scheduler.plugins({ }); ~~~ - #### Verwandte Ressourcen -Artikel: [Timeline-Ansicht](views/timeline.md) - +Artikel: [Timeline View](views/timeline.md) -[Tree mode](https://docs.dhtmlx.com/scheduler/samples/06_timeline/03_tree.html) +Beispiel: [Tree mode](https://docs.dhtmlx.com/scheduler/samples/06_timeline/03_tree.html) -## Units {#units} +## Units :::info Diese Erweiterung ist nur in der PRO-Version verfügbar @@ -621,24 +561,23 @@ scheduler.plugins({ }); ~~~ - #### Verwandte Ressourcen -Artikel: [Units-Ansicht](views/units.md) - +Artikel: [Units View](views/units.md) -[Units view](https://docs.dhtmlx.com/scheduler/samples/03_extensions/02_units_view.html) +Beispiel: [Units view](https://docs.dhtmlx.com/scheduler/samples/03_extensions/02_units_view.html) -## URL {#url} +## URL Speichert den Zustand des Schedulers (Datum, Ereignis-ID, Ansicht) in der URL. -Beispiele: +Zum Beispiel: -~~~ -10_url_date_plugin.html#date=2014-08-01,mode=month oder 10_url_date_plugin.html#event="15 -~~~ +```text +10_url_date_plugin.html#date=2027-08-01,mode=month +10_url_date_plugin.html#event=15 +``` ~~~js scheduler.plugins({ @@ -646,19 +585,18 @@ scheduler.plugins({ }); ~~~ - #### Verwandte Ressourcen -[Saving the scheduler state in URL](https://docs.dhtmlx.com/scheduler/samples/03_extensions/10_url_date_plugin.html) +Beispiel: [Speichern des Scheduler-Zustands in der URL](https://docs.dhtmlx.com/scheduler/samples/03_extensions/10_url_date_plugin.html) -## Week Agenda {#week-agenda} +## Week Agenda :::info Diese Erweiterung ist nur in der PRO-Version verfügbar ::: -Die Code-Datei für die Week Agenda-Ansicht. +Die Code-Datei der Week-Agenda-Ansicht. ~~~js scheduler.plugins({ @@ -666,18 +604,16 @@ scheduler.plugins({ }); ~~~ - #### Verwandte Ressourcen -Artikel: [Week-Agenda-Ansicht](views/weekagenda.md) +Artikel: [Week Agenda View](views/weekagenda.md) +Beispiel: [WeekAgenda view](https://docs.dhtmlx.com/scheduler/samples/03_extensions/24_week_agenda.html) -[WeekAgenda view](https://docs.dhtmlx.com/scheduler/samples/03_extensions/24_week_agenda.html) +## Year -## Year {#year} - -Die Code-Datei für die Jahresansicht. +Die Year-Ansicht Code-Datei. ~~~js scheduler.plugins({ @@ -687,7 +623,6 @@ scheduler.plugins({ #### Verwandte Ressourcen -Artikel: [Jahresansicht](views/year.md) - +Artikel: [Year View](views/year.md) -[Year view](https://docs.dhtmlx.com/scheduler/samples/03_extensions/04_year_view.html) +Beispiel: [Year view](https://docs.dhtmlx.com/scheduler/samples/03_extensions/04_year_view.html) \ No newline at end of file diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides/filtering.md b/i18n/de/docusaurus-plugin-content-docs/current/guides/filtering.md index 287bacb7..5e46fcea 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/guides/filtering.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/guides/filtering.md @@ -1,40 +1,41 @@ --- -title: "Filtern von Ereignissen" -sidebar_label: "Filtern von Ereignissen" +title: "Ereignisse filtern" +sidebar_label: "Ereignisse filtern" --- # Filtern von Ereignissen -Für jede Ansicht ist es möglich, eine Filterfunktion zu definieren, die bestimmt, welche Ereignisse im Scheduler angezeigt und welche ausgeblendet werden. +Für jede angegebene Ansicht können Sie eine Filterfunktion festlegen, die bestimmt, welche Ereignisse im Scheduler angezeigt werden und welche nicht. ~~~js -scheduler.filter_week = function(id, event){ - if(event.name == 'New event') - return false; // Ereignis wird gefiltert (nicht dargestellt) - //oder - return true; // Ereignis wird dargestellt -} +scheduler.filter_week = (id, event) => { + if (event.name === 'New event') { + return false; // event will be filtered (not rendered) + } + + return true; // event will be rendered +}; ~~~ -Hier bezieht sich 'week' auf den Namen der Ansicht (verwendet in *'scheduler.filter_week'*). +Hier ist `"week"` der Name einer Ansicht in `scheduler.filter_week`. -Die Funktion **filter_(viewName)** akzeptiert zwei Argumente: +Die `filter_(viewName)`-Methode nimmt 2 Parameter entgegen: -- **id** - die Kennung des Ereignisses -- **event** - das Ereignisobjekt selbst +- `id` - die ID des Ereignisses +- `event` - das Ereignis-Objekt -Es ist außerdem möglich, verschiedene Filterfunktionen für unterschiedliche Ansichten zuzuweisen: +Denken Sie daran, Sie können verschiedene Filterfunktionen für verschiedene Ansichten festlegen: ~~~js -scheduler.filter_day = scheduler.filter_week = function(id, event){ - //some_code -} +scheduler.filter_day = scheduler.filter_week = (id, event) => { + // some code +}; ... -scheduler.filter_timeline = function(id, event){ - //some_other code -} +scheduler.filter_timeline = (id, event) => { + // some other code +}; ~~~ - -[Filtering events](https://docs.dhtmlx.com/scheduler/samples/09_api/09_filtering_events.html) +### Verwandte Beispiele +- [Ereignisse filtern](https://docs.dhtmlx.com/scheduler/samples/09_api/09_filtering_events.html) \ No newline at end of file diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides/guides.md b/i18n/de/docusaurus-plugin-content-docs/current/guides/guides.md deleted file mode 100644 index 2aad3189..00000000 --- a/i18n/de/docusaurus-plugin-content-docs/current/guides/guides.md +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: "Anleitungen" -sidebar_label: "Anleitungen" ---- - -# Anleitungen - -In diesem Abschnitt finden Sie die wichtigsten Leitfäden, die Sie bei der effektiven Nutzung von dhtmlxScheduler unterstützen. -Die Anleitungen sind nach Aufgaben gegliedert und helfen Ihnen sowohl bei einfachen als auch bei komplexen Aufgaben - egal, ob diese häufig oder selten auftreten. -Die Artikel behandeln grundlegende Abläufe und praxisnahe Lösungen. - -Werfen Sie einen Blick auf die [Funktionen der Standard- und PRO-Versionen](guides/editions-comparison.md) der dhtmlxScheduler-Bibliothek. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Scheduler auf einer Seite erstellen

  • [Scheduler initialisieren](guides/initialization.md)
  • [Möglichkeiten zur Installation des Schedulers](guides/installation.md)
  • [Vollständige Liste der Erweiterungen](guides/extensions-list.md)
Erklärt, wie Scheduler installiert und initialisiert wird, und bietet eine Liste der verfügbaren Erweiterungen.

Einstieg in Scheduler und Front-End

  • [dhtmlxScheduler in Plain JS/HTML](guides/initialization.md)
  • [dhtmlxScheduler mit Angular](integrations/angular/howtostart-angular.md)
  • [dhtmlxScheduler mit React](integrations/react/js-scheduler-react.md)
  • [dhtmlxScheduler mit Vue.js](integrations/vue/howtostart-vue.md)
  • [dhtmlxScheduler mit Svelte](integrations/svelte/howtostart-svelte.md)
Behandelt den Aufbau und die Einrichtung eines Standard-Schedulers im Front-End.

Einstieg in Scheduler auf der Serverseite

  • [dhtmlxScheduler mit ASP.NET Core](integrations/dotnet/howtostart-dotnet-core.md)
  • [dhtmlxScheduler mit Node.js](integrations/node/howtostart-nodejs.md)
  • [dhtmlxScheduler mit ASP.NET MVC](integrations/dotnet/howtostart-dotnet.md)
  • [dhtmlxScheduler mit PHP](integrations/php/howtostart-plain-php.md)
  • [dhtmlxScheduler mit PHP:Laravel](integrations/php/howtostart-php-laravel.md)
  • [dhtmlxScheduler mit PHP:Slim](integrations/php/howtostart-php-slim4.md)
  • [dhtmlxScheduler mit SalesForce LWC](integrations/salesforce/howtostart-salesforce.md)
  • [dhtmlxScheduler mit Ruby on Rails](integrations/other/howtostart-ruby.md)
  • [dhtmlxScheduler mit dhtmlxConnector](integrations/other/howtostart-connector.md)
Beschreibt, wie Sie einen Standard-Scheduler auf verschiedenen Serverplattformen erstellen und ihn durch Konfiguration, Anpassung von Vorlagen, Hinzufügen von Events und mehr zum Leben erwecken.

Scheduler konfigurieren

  • [Mobile Responsive Scheduler](guides/touch-support.md)
  • [Allgemeine Konfigurationsanweisungen](guides/configuration.md)
  • [Scheduler-Markup](guides/scheduler-markup.md)
  • [RTL (Rechts-nach-links) Modus](guides/rtl-mode.md)
  • [Lokalisierung](guides/localization.md)
  • [Mehrere Scheduler auf einer Seite erstellen](guides/multiple-per-page.md)
  • [Barrierefreiheit](guides/accessibility.md)
Zeigt, wie der Scheduler konfiguriert wird, wie Sie mehrere Scheduler auf einer Seite erstellen, die Oberfläche lokalisieren, Barrierefreiheit aktivieren und mehr.

Daten laden und speichern

  • [Daten laden](guides/loading-data.md)
  • [Serverseitige Integration](guides/server-integration.md)
Erklärt verschiedene Methoden, um Daten in den Scheduler zu laden, einschließlich unterschiedlicher Datenquellen, Formate und Techniken, sowie Details zur Serverseiten-Integration.

Ansichten konfigurieren

  • [Übersicht der Ansichten](/views/)
  • [Ausblenden von Zeiteinheiten auf der X-Achse einer Ansicht](guides/custom-scales.md)
  • [Custom View](guides/custom-views.md)
  • [Blockieren und Markieren von Daten](guides/limits.md)
Erklärt, wie Sie Ansichten durch Anpassen der Skaleneinheiten, Erstellen eigener Ansichten und Einschränken bestimmter Daten anpassen können.
Konzentriert sich auf die Arbeit mit der Lightbox: Steuerelemente hinzufügen oder entfernen, Werte auslesen und setzen, das Erscheinungsbild der Lightbox anpassen und mehr.

Ereignisse im Scheduler verwalten

  • [Event-Objekt-Operationen](guides/event-object-operations.md)
  • [Hinzufügen/Löschen von Ereignissen](guides/adding-events.md)
  • [Filtern von Ereignissen](guides/filtering.md)
  • [Drag-and-Drop-Operationen](guides/drag-between.md)
  • [Wiederkehrende Ereignisse](guides/recurring-events.md)
  • [Schreibgeschützter Modus](guides/readonly.md)
  • [Validierung](guides/validation.md)
  • [Verhindern von doppelten Ereignissen in einem Zeitfenster](guides/collisions.md)
Behandelt grundlegende Operationen an Ereignisobjekten wie Hinzufügen, Löschen und Filtern. Erläutert außerdem, wie wiederkehrende Ereignisse behandelt, der Scheduler oder Teile davon schreibgeschützt gemacht werden und mehr.

Ereignisse anpassen

  • [Box](guides/custom-events-display.md)
  • [Farbe](guides/custom-events-color.md)
  • [Inhalt (Vorlage)](guides/custom-events-content.md)
  • [Tooltip](guides/tooltips.md)
  • [Bearbeitungs- und Auswahlbalken des Ereignisses](guides/customizing-edit-select-bars.md)
  • [Größe der Skalen- und Ereignisboxen anpassen](guides/sizing.md)
Beschreibt, wie Sie verschiedene Aspekte von Ereignissen personalisieren - vom Texttemplate bis zum visuellen Erscheinungsbild des Ereignis-Elements.

Datenexport/-import

  • [Integration mit Google Kalender](integrations/google-calendar/google-calendar-sync.md)
  • [Export nach PDF](export/pdf.md)
  • [Export nach PNG](export/png.md)
  • [Export nach Excel und iCal](export/excel.md)
  • [XML, JSON, iCal und andere Formate](export/serialization.md)
Beschreibt die verfügbaren Formate und Methoden zum Importieren und Exportieren von Scheduler-Daten.

Erscheinungsbild und Styling

  • [Skins](guides/skins.md)
  • [Formatieren von Beschriftungen, Daten, Stilen](guides/templates.md)
  • [Skins-Anpassung](guides/custom-skins.md)
Stellt die grafischen Elemente des Schedulers vor und erklärt, wie Sie diese gestalten können.

Arbeiten mit Datumsangaben

  • [Datumsformat-Spezifikation](guides/settings-format.md)
  • [Operationen mit Datumsangaben](guides/date-formats.md)
Behandelt wichtige Themen rund um Datumsangaben im Scheduler, darunter das Konvertieren von Datumswerten in Zeichenketten und zurück sowie die zulässigen Zeichen in Datumsformaten.

Integrationen

  • [Popup-Nachrichten und Modale Fenster](guides/popups-and-modals.md)
  • [Verwendung des Schedulers mit TypeScript](guides/scheduler-typescript.md)
  • [jQuery-Integration](integrations/other/jquery-integration.md)
  • [Integration mit dhtmlxLayout](integrations/other/dhxlayout-integration.md)
Beschreibt die verfügbaren Möglichkeiten zur Integration des Schedulers mit Drittanbieter-Frameworks.

Spezielle Erweiterungen und Editionen

  • [Mini-Kalender (Datumsauswahl)](guides/minicalendar.md)
  • [Live Updates Modus (Legacy)](guides/live-update.md)
  • [Mehrere Benutzer](guides/multiple-users.md)
Bietet Anleitungen zu verschiedenen Erweiterungen der Bibliothek, mit denen Sie die Funktionalität erweitern können.

Benutzeroberflächen-Leitfaden

  • [Scheduler GUI](guides/user-interface.md)
Beschreibt die Elemente der Scheduler-Oberfläche aus Sicht des Endanwenders.
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides/how-to-start.md b/i18n/de/docusaurus-plugin-content-docs/current/guides/how-to-start.md deleted file mode 100644 index 5783168f..00000000 --- a/i18n/de/docusaurus-plugin-content-docs/current/guides/how-to-start.md +++ /dev/null @@ -1,240 +0,0 @@ ---- -title: "Wie man startet" -sidebar_label: "Wie man startet" ---- - -# Wie man startet - -Dieses Tutorial führt Sie durch die Erstellung eines grundlegenden Schedulers, der Daten aus einer Datenbank lädt und wieder speichert. -Das abschließende Beispiel kann als solide Grundlage für die Entwicklung von Anwendungen mit dhtmlxScheduler dienen. - -![init_scheduler_front.png](/img/init_scheduler_front.png) - - -[Loading data from a database](https://docs.dhtmlx.com/scheduler/samples/01_initialization_loading/05_loading_database.html) - - -## Schritt 1. Erstellen Sie eine neue HTML-Datei und fügen Sie die erforderlichen Dateien hinzu - -Beginnen Sie mit dem Erstellen einer neuen HTML-Datei und binden Sie die notwendigen Scheduler-Skripte und -Styles ein. - -Die benötigten Dateien sind: - -- *dhtmlxscheduler.js* -- *dhtmlxscheduler_material.css* (für das Material-Design; Sie können auch [andere verfügbare Skins ansehen](guides/skins.md)) - -~~~html - - - - How to start - - - - - //Ihr Code wird hier eingefügt - - -~~~ - -Werfen wir einen kurzen Blick auf die Struktur des dhtmlxScheduler-Pakets, um zu wissen, wo sich diese Dateien befinden: - -- sources - Quellcodedateien, unminifiziert und gut lesbar, hauptsächlich für Debugging-Zwecke. -- samples - Beispiel-Code-Snippets. -- docs - Vollständige Dokumentation für die Komponente. -- codebase - Minifizierte Dateien, optimiert für den Produktionseinsatz. Verwenden Sie die Dateien aus diesem Ordner in Ihren Projekten. - -## Schritt 2. Definieren Sie die zugehörigen DIV-Elemente - -Bevor Sie den Scheduler initialisieren, richten Sie die notwendigen DIV-Container für die UI-Elemente ein. - -Ein typisches Set von 'divs', das für den Scheduler benötigt wird, sieht folgendermaßen aus: - -~~~js -
-
-
 
-
 
-
-
-
-
-
-
-
-
-
-~~~ - -## Schritt 3. Style - -Um ein korrektes Vollbildverhalten in verschiedenen Browsern sicherzustellen, fügen Sie folgenden CSS-Style für den Scheduler hinzu: - -~~~css - -~~~ - -Wenn Sie keinen Vollbildmodus verwenden, ist dieser Stil nicht notwendig. Stattdessen können Sie die gewünschten CSS-Eigenschaften direkt auf das Haupt-**div** anwenden: - -~~~html -
-... -~~~ - -## Schritt 4. Initialisierung - -Sobald alles vorbereitet ist, können Sie den Scheduler initialisieren. Beachten Sie, dass der Scheduler ein statisches Objekt ist und nur einmal pro Seite instanziiert werden sollte. -Sie können auf die Scheduler-Instanz mit **dhtmlxScheduler** oder einfach **scheduler** zugreifen. - -~~~js -scheduler.init('scheduler_here', new Date(),"month"); -~~~ - -## Schritt 5. Daten laden - -An diesem Punkt wird beim Ausführen der App der Scheduler angezeigt, aber es sind noch keine Events vorhanden. - -Um ihn mit Daten zu füllen, beginnen Sie mit einem einfachen Inline-Objekt als Datenquelle. -Verwenden Sie die Methode [parse](api/method/parse.md), um Daten aus einem Inline-Objekt zu laden. - -Jedes Event-Objekt enthält: - -- **id** - (*string, number*) Event-Identifikator. -- **start_date** - (*string*) Startdatum des Events, Standardformat "%m/%d/%Y %H:%i". -- **end_date** - (*string*) Enddatum des Events, Standardformat "%m/%d/%Y %H:%i". -- **text** - (*string*) Beschreibung des Events. - -~~~js -var events = [ - {id:1, text:"Meeting", start_date:"04/11/2018 14:00",end_date:"04/11/2018 17:00"}, - {id:2, text:"Conference",start_date:"04/15/2018 12:00",end_date:"04/18/2018 19:00"}, - {id:3, text:"Interview", start_date:"04/24/2018 09:00",end_date:"04/24/2018 10:00"} -]; - -scheduler.parse(events); // Datenquelle und Format angeben -~~~ - -Sie können auch [Daten vom Server laden](#step7loadingdatafromtheserver). - -:::note -Details zur Integration mit der Serverseite finden Sie im Artikel [Serverseitige Integration](guides/server-integration.md). -::: - -## Schritt 6. Datenbankstruktur - -:::note -Führen Sie diese Schritte aus, wenn Sie Daten aus einer Datenbank statt aus einem Inline-Objekt laden möchten. -::: - -Wenn Sie sich entscheiden, Daten vom Server zu laden, benötigen Sie eine Datenbanktabelle mit folgender Struktur: - - - -Sie können sie mit folgendem SQL-Code erstellen: - -~~~js -CREATE TABLE `events` ( - `id` int(11) NOT NULL AUTO_INCREMENT, - `start_date` datetime NOT NULL, - `end_date` datetime NOT NULL, - `text` varchar(255) NOT NULL, - PRIMARY KEY (`id`) -) -~~~ - -Neben diesen Feldern können Sie weitere Spalten hinzufügen, die dann an den Client gesendet und [im Lightbox-Formular zugeordnet](guides/custom-details-form.md#mapping_db_fields_to_the_form) werden können. - -Beachten Sie, dass das Datumsformat in der Datenbank '%Y-%m-%d %H:%i' vom Standardformat des Schedulers '%m/%d/%Y %H:%i' abweicht. -Um dies korrekt zu verarbeiten, passen Sie das Datumsformat des Schedulers mit der Option [xml_date](api/config/xml_date.md) an. - -Stellen Sie sicher, dass Sie die Konfigurationsoptionen vor der Initialisierung des Schedulers setzen, zum Beispiel: - -~~~js -scheduler.config.xml_date="%Y-%m-%d %H:%i"; -... -scheduler.init('scheduler_here',new Date(),"month"); -~~~ - -## Schritt 7. Laden von Daten vom Server - -Um Daten aus einer Datenbank zu laden, verwenden Sie die Methode [load](api/method/load.md) und geben Sie die URL eines Server-Skripts an, das die Datenoperationen verarbeitet. - -:::note -Die [dhtmlxConnector](https://docs.dhtmlx.com/connector__php__index.html) Bibliothek kann Ihnen einen schnellen Einstieg ermöglichen, wie hier gezeigt. Für neue Projekte wird jedoch empfohlen, das Backend-API manuell zu erstellen, um mehr Flexibilität zu haben. Siehe [Serverseitige Integration](guides/server-integration.md) für Details. -::: - -So rufen Sie die Methode auf: - -~~~js -// Geben Sie die URL des Server-Skripts an, das CRUD-Operationen verarbeitet -scheduler.load("data/connector.php"); -~~~ - -## Schritt 8. Serverseitiges Skript - -Hier ein Beispiel für ein serverseitiges Skript für dhtmlxScheduler: - -~~~php -render_table("events","id","start_date,end_date,text"); -~~~ - -### Zuordnung von Datenbankspalten - -Beachten Sie, dass die Reihenfolge der Spalten in **$connector->render_table** wichtig ist. Die ersten drei Spalten entsprechen den Eigenschaften *start_date*, *end_date* und *text* des clientseitigen Event-Objekts, unabhängig von deren tatsächlichen Spaltennamen: - -~~~js -$conn->render_table("events","EventId","Start,End,Name,details",""); -// JS: event.id, event.start_date, event.end_date, event.text, event.text, event.details -~~~ - -#### Zuordnung zusätzlicher Spalten - -Alle weiteren Spalten werden direkt anhand ihres Namens zugeordnet: - -~~~js -$conn->render_table("events","id","start_date,end_date,text,custom,details",""); -// JS: event.start_date, event.end_date, event.text, event.custom, event.details -~~~ - -Sie können auch Aliase wie folgt verwenden: - -~~~js -$conn->render_table("events","id", - "start_date,end_date,text,custom_column(customProperty),details",""); -// JS: event.start_date, event.end_date, event.text, event.customProperty, event.details -~~~ - -## Schritt 9. Daten speichern - -An diesem Punkt kann der Scheduler Daten aus der Datenbank laden, aber Änderungen werden noch nicht automatisch zurückgespeichert. -Um das Speichern zu ermöglichen, verwenden Sie dataProcessor. - -Die Verwendung von dataProcessor ist einfach - initialisieren Sie ihn und verbinden Sie ihn mit dem Scheduler: - -~~~js -var dp = scheduler.createDataProcessor("data/connector.php"); -dp.init(scheduler); -~~~ - -Das war's! Sie haben nun einen grundlegenden Scheduler, der Daten mit einer Datenbank laden und speichern kann. - -Von hier aus können Sie ihn nach Ihren spezifischen Anforderungen anpassen und erweitern. - - -[Loading data from a database](https://docs.dhtmlx.com/scheduler/samples/01_initialization_loading/05_loading_database.html) diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides/ical-export-import.md b/i18n/de/docusaurus-plugin-content-docs/current/guides/ical-export-import.md index 8646acf4..f8a825c7 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/guides/ical-export-import.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/guides/ical-export-import.md @@ -1,38 +1,38 @@ ---- -title: "iCal Export/Import" -sidebar_label: "iCal Export/Import" ---- +--- +title: "iCal-Export/Import" +sidebar_label: "iCal-Export/Import" +--- -# iCal Export/Import +# iCal-Export/Import -:::warning +:::note Dieses Tool ist veraltet und wird nicht mehr unterstützt. Bitte verwenden Sie es daher nicht in Ihren Anwendungen! ::: -Es ist möglich, Daten im iCal-Format entweder mit einem fertigen Dienstprogramm oder über API-Methoden zu importieren oder zu exportieren. +Der Legacy-Exporter/Importer basiert auf PHP, daher sind die untenstehenden Snippets PHP-Beispiele. Wenn Sie ein anderes Backend verwenden, nutzen Sie die iCalendar-Bibliothek Ihrer Plattform und weisen Sie Felder den Scheduler-Ereignis-Eigenschaften zu. -## iCal Exporter (Front-End) +Sie haben die Möglichkeit, Daten im iCal-Format zu importieren/exportieren, entweder mit einem fertigen Utility oder mithilfe von API-Methoden. + +## iCal-Exporter (Frontend) ![ical_exporter1.png](/img/ical_exporter1.png) -Das Front-End des Dienstprogramms besteht aus zwei Abschnitten: +Die Frontend-Komponente des Tools besteht aus zwei Teilen: - **Ressourcenkonfiguration** -- **Datenbankkonfiguration** +- **Datenbankkonfiguration**. -Im ersten Abschnitt geben Sie den Datenpfad an. Dies kann entweder durch Auswahl des Pfads über ein geöffnetes Dialogfenster (**Ical file**, die Schaltfläche "Overview") oder durch manuelle Eingabe (**Ical URL**) erfolgen. - - -Der zweite Abschnitt enthält die üblichen Datenbankeinstellungen (Host, Name der Datenbank und Tabelle, Benutzername und Passwort), in denen die iCal-Daten gespeichert werden. Hier können Sie auch festlegen, ob alte Daten gelöscht werden sollen (**Delete all data**). +Im ersten Teil legen Sie den Pfad zu den Daten fest. Sie können dies entweder tun, indem Sie den Pfad aus dem geöffneten Dialogfenster auswählen (**Ical-Datei**, der Button "Überblick") oder ihn manuell festlegen (**Ical-URL**). -## API-Methoden +Der zweite Teil enthält die Standard-Einstellungen der Datenbank (Hostname, Datenbank- und Tabellenname, Benutzername und Passwort), in denen Sie die iCal-Daten speichern möchten. Auch hier können Sie festlegen, ob Ihre alten Daten gelöscht werden müssen oder nicht (**Alle Daten löschen**). -Nachfolgend finden Sie die verfügbaren API-Methoden zur Implementierung von iCal-Export/Import in einer Anwendung. - -### Initialisierung +## API-Methoden -Um den iCal Exporter/Importer einzurichten, verwenden Sie folgenden Code: +Hier finden Sie alle API-Methoden, die verwendet werden können, um iCal-Export/Import in einer App zu implementieren. +### Initialisierung + +Um den iCal-Exporter/Importer zu initialisieren, verwenden Sie den folgenden Code: ~~~php require_once("codebase/class.php"); @@ -40,30 +40,28 @@ $export = new ICalExporter(); ~~~ +### iCalendar-Import -### iCalendar Import - -Die folgenden Methoden werden zum Importieren von iCal-Daten verwendet: +Sie können iCal-Daten mit den folgenden Methoden importieren: -- **setTitle($title)** - weist der iCal-Datei im toICal()-Verfahren einen Titel zu -- **getTitle()** - ruft den Titel der iCal-Datei ab -- **toICal($events)** - konvertiert Daten aus einem Array oder XML-String in das iCalendar-Format +- **setTitle($title)** - setzt den Titel der iCal-Datei in der toICal()-Methode +- **getTitle()** - erhält den Titel der iCal-Datei +- **toICal($events)** - wandelt die Informationen aus dem Array oder XML-String in das iCalendar-Format um -### iCalendar Export +### iCalendar-Export -Die folgenden Methoden werden zum Exportieren von iCal-Daten verwendet: +Sie können iCal-Daten mit den folgenden Methoden exportieren: -- **toHash($ical)** - konvertiert einen iCal-String in ein Array von Ereignissen -- **toXML($ical)** - konvertiert einen iCal-String in das XML-Format +- **toHash($ical)** - wandelt einen iCal-String in ein Array von Ereignissen um +- **toXML($ical)** - wandelt einen iCal-String in das XML-Format um #### Beispiele -Hier sind einige Codebeispiele, die zeigen, wie man iCal-Export/Import durchführt. +Eine Reihe von Code-Schnipseln, die zeigen, wie man iCal-Export/Import ausführt, wird hier präsentiert. ++ Festlegen des iCalendar-Titels -+ iCalendar-Titel setzen - -Dieses Beispiel zeigt, wie der Titel für importierte oder exportierte iCalendar-Daten gesetzt wird. +Der folgende Code ermöglicht es Ihnen, den Titel der importierten/exportierten iCalendar-Daten festzulegen. ~~~php $xml = file_get_contents("events_rec.xml"); @@ -75,18 +73,16 @@ file_put_contents("ical.ics", $ical); ~~~ - + Array von Ereignissen -Dieses Beispiel zeigt ein Array von Ereignissen, das zum Importieren/Exportieren von Daten aus/in ein Array verwendet wird. - +Dies ist ein Beispiel für ein Ereignis-Array, das in Import-/Exportdaten von/zu einem Array referenziert wird. ~~~php $events = array( array( "id" => 1, - "start_date" => "2010-04-05 08:00:00", - "end_date" => "2012-04-09 09:00:00", + "start_date" => "2027-04-05 08:00:00", + "end_date" => "2027-04-09 09:00:00", "text" => "text1", "rec_type" => "week_2___3,5", "event_pid" => null, @@ -95,8 +91,8 @@ $events = array( array( "id" => 2, - "start_date" => "2010-04-06 12:00:00", - "end_date" => "2010-04-06 18:00:00", + "start_date" => "2027-04-06 12:00:00", + "end_date" => "2027-04-06 18:00:00", "text" => "text2", "rec_type" => "", "event_pid" => null, @@ -105,8 +101,8 @@ $events = array( array( "id" => 3, - "start_date" => "2010-04-07 12:00:00", - "end_date" => "2010-04-07 18:00:00", + "start_date" => "2027-04-07 12:00:00", + "end_date" => "2027-04-07 18:00:00", "text" => "text3", "rec_type" => "", "event_pid" => null, @@ -115,8 +111,8 @@ $events = array( array( "id" => 4, - "start_date" => "2010-04-08 12:00:00", - "end_date" => "2010-04-08 18:00:00", + "start_date" => "2027-04-08 12:00:00", + "end_date" => "2027-04-08 18:00:00", "text" => "text4", "rec_type" => "", "event_pid" => null, @@ -127,9 +123,9 @@ $events = array( ~~~ -+ Vom Array zu iCal ++ Von Array zu iCal -Dieser Code exportiert Daten aus einem Array in einen iCal-String: +Verwenden Sie diesen Code, um Daten von einem Array in einen iCal-String zu exportieren: ~~~php require_once("codebase/class.php"); @@ -142,7 +138,7 @@ file_put_contents("ical.ics"); + Von XML zu iCal -Dieses Beispiel exportiert Daten aus XML in das iCal-Format: +Verwenden Sie diesen Code, um Daten von XML in iCal zu exportieren: ~~~php $xml = file_get_contents("events_rec.xml"); @@ -156,7 +152,7 @@ file_put_contents("ical.ics"); + Von iCal zu Array -Dieses Beispiel exportiert Daten aus einer iCal-Datei in ein Array: +Verwenden Sie diesen Code, um Daten von iCal in ein Array zu exportieren: ~~~php $ical = file_get_contents("ical.ics"); @@ -169,7 +165,7 @@ $events = $export->toHash($ical); + Von iCal zu XML -Dieses Beispiel exportiert Daten aus einer iCal-Datei in das XML-Format: +Verwenden Sie diesen Code, um Daten von iCal in XML zu exportieren: ~~~php $ical = file_get_contents("ical.ics"); @@ -178,4 +174,4 @@ $export = new ICalExporter(); $xml = $export->toXML($ical); file_put_contents("events_rec.xml", $xml); -~~~ +~~~ \ No newline at end of file diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides/initialization.md b/i18n/de/docusaurus-plugin-content-docs/current/guides/initialization.md index bb7ce5bb..bfd8b849 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/guides/initialization.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/guides/initialization.md @@ -7,9 +7,9 @@ import { FrameworkIcon } from '@site/src/components/FrameworkIcon'; # dhtmlxScheduler in Plain JS/HTML -Beim Erstellen einer Anwendung mit dhtmlxScheduler besteht der erste Schritt darin, den Scheduler auf der Seite einzurichten und anzuzeigen. +Wenn Sie eine Anwendung mit dhtmlxScheduler entwickeln, ist das Erste, was Sie benötigen, die Scheduler zu initialisieren oder einfach gesagt, auf der Seite anzuzeigen. -In dieser Anleitung erfahren Sie, wie Sie dhtmlxScheduler mit einfachem JS und HTML initialisieren. Für die Integration in Frontend-Frameworks können Sie die folgenden Anleitungen nutzen: +Dieser Leitfaden beschreibt die Initialisierung von dhtmlxScheduler in reinem JS und HTML. Sie können auch die Anleitungen zur Integration mit Frontend-Frameworks prüfen:
@@ -17,7 +17,7 @@ In dieser Anleitung erfahren Sie, wie Sie dhtmlxScheduler mit einfachem JS und H
React
- Use the ready-made ReactScheduler component with props and events. + Verwenden Sie die fertige ReactScheduler-Komponente mit Props und Events.
@@ -25,7 +25,7 @@ In dieser Anleitung erfahren Sie, wie Sie dhtmlxScheduler mit einfachem JS und H
Angular
- Integrate Scheduler into Angular projects using a thin wrapper. + In Angular-Projekten den Scheduler mithilfe einer dünnen Wrapper-Schicht integrieren.
@@ -33,7 +33,7 @@ In dieser Anleitung erfahren Sie, wie Sie dhtmlxScheduler mit einfachem JS und H
Vue
- Use Scheduler inside Vue apps with a small wrapper and reactive configuration. + Verwenden Sie Scheduler in Vue-Apps mit einem kleinen Wrapper und reaktiver Konfiguration.
@@ -49,25 +49,25 @@ In dieser Anleitung erfahren Sie, wie Sie dhtmlxScheduler mit einfachem JS und H
Salesforce
- Use Scheduler in Salesforce Lightning Web Components and connect it to org data. + Scheduler in Salesforce Lightning Web Components verwenden und mit Organisationsdaten verbinden.
-Es gibt zwei Ansätze, um den Scheduler auf einer Seite zu initialisieren: +Es gibt zwei Möglichkeiten, den Scheduler auf einer Seite zu initialisieren: - [über das Markup des Schedulers](#initializing-scheduler-via-markup) -- [über die Header-Konfigurationseigenschaft](#initializing-scheduler-via-header-config) +- [über die Header-Konfigurations-Eigenschaft](#initializing-scheduler-via-header-config) -## Initialisierung des Schedulers über Markup {#initializing-scheduler-via-markup} +## Scheduler-Initialisierung über Markup -Um einen grundlegenden Scheduler über Markup auf der Seite einzurichten, gehen Sie wie folgt vor: +Um einen grundlegenden Scheduler über das Markup auf der Seite anzuzeigen, befolgen Sie drei Schritte: -1. Fügen Sie die [dhtmlxScheduler-Code-Dateien](#requiredcodefiles) in Ihre Seite ein. -2. Fügen Sie einen DIV-Container auf der Seite hinzu, zusammen mit den erforderlichen untergeordneten DIVs für dessen Elemente. -3. Initialisieren Sie dhtmlxScheduler im erstellten Container mit der Methode [init](api/method/init.md). Diese Methode erwartet ein HTML-Container-Element (oder dessen ID), in dem der Scheduler gerendert wird. +1. Binden Sie die [dhtmlxScheduler-Code-Dateien](#required-code-files) in die Seite ein. +2. Erstellen Sie einen DIV-Container auf der Seite und definieren Sie die zugehörigen DIV-Container für seine Elemente. +3. Initialisieren Sie dhtmlxScheduler im neu erstellten Container mit der [init](api/method/init.md)-Methode. Als Parameter erwartet die Methode einen HTML-Container (oder dessen ID), in dem der Scheduler angezeigt wird. ~~~html @@ -92,7 +92,7 @@ Um einen grundlegenden Scheduler über Markup auf der Seite einzurichten, gehen
- @@ -102,19 +102,19 @@ Um einen grundlegenden Scheduler über Markup auf der Seite einzurichten, gehen ![Scheduler initialization](/img/init_scheduler_front.png) -[Basic initialization](https://docs.dhtmlx.com/scheduler/samples/01_initialization_loading/01_basic_init.html) +[Grundlegende Initialisierung](https://docs.dhtmlx.com/scheduler/samples/01_initialization_loading/01_basic_init.html) -## Initialisierung des Schedulers über die Header-Konfiguration {#initializing-scheduler-via-header-config} +## Scheduler-Initialisierung über Header-Konfiguration -Diese Methode wird empfohlen, wenn Sie den Scheduler [responsiv](guides/initialization.md#makingschedulerresponsive) gestalten möchten. +Sie müssen Scheduler auf diese Weise initialisieren, um ihn [responsiv](guides/initialization.md#making-scheduler-responsive) zu machen. -Um einen grundlegenden Scheduler auf der Seite einzurichten, gehen Sie wie folgt vor: +Um einen grundlegenden Scheduler auf der Seite anzuzeigen, gehen Sie wie folgt vor: -1. Fügen Sie die [dhtmlxScheduler-Code-Dateien](#requiredcodefiles) in Ihre Seite ein. -2. Fügen Sie einen DIV-Container auf der Seite hinzu. -3. Definieren Sie die Struktur des Schedulers im Konfigurationsobjekt [header](api/config/header.md). -4. Initialisieren Sie dhtmlxScheduler im Container mit der Methode [init](api/method/init.md). Übergeben Sie dabei den Container (oder dessen ID) als Parameter. +1. Binden Sie die [dhtmlxScheduler-Code-Dateien](#required-code-files) in die Seite ein. +2. Erstellen Sie einen DIV-Container auf der Seite. +3. Geben Sie die Struktur des Schedulers in dem [Header](api/config/header.md) Konfigurationsobjekt an. +4. Initialisieren Sie dhtmlxScheduler im neu erstellten Container mit der [init](api/method/init.md)-Methode. Als Parameter erhält die Methode einen HTML-Container (oder dessen ID), in dem der Scheduler angezeigt wird. ~~~html @@ -140,7 +140,7 @@ Um einen grundlegenden Scheduler auf der Seite einzurichten, gehen Sie wie folgt "today", "next" ]; - scheduler.init('scheduler_here',new Date(2020,0,1),"week"); /*!*/ + scheduler.init('scheduler_here',new Date(2027,0,1),"week"); /*!*/ ~~~ @@ -149,35 +149,34 @@ Um einen grundlegenden Scheduler auf der Seite einzurichten, gehen Sie wie folgt [Responsive scheduler](https://docs.dhtmlx.com/scheduler/samples/01_initialization_loading/13_touch_ui.html) -## Erforderliche Code-Dateien {#requiredcodefiles} +## Erforderliche Code-Dateien -Die einzubindenden Dateien sind: +Die erforderlichen Code-Dateien sind: - *dhtmlxscheduler.js* -- *dhtmlxscheduler.css* (weitere verfügbare Skins finden Sie in [Skins](guides/skins.md)) +- *dhtmlxscheduler.css* (Sie können auch [die verfügbaren Skins erkunden](guides/skins.md)) ~~~html ~~~ -Hier ein kurzer Überblick über die Struktur des dhtmlxScheduler-Pakets, um Ihnen das Auffinden der Dateien zu erleichtern: +Lassen Sie uns schnell die Struktur des dhtmlxScheduler-Pakets erkunden, um herauszufinden, wo man die Dateien findet. -- sources - enthält die Quellcodedateien der Bibliothek. Diese sind nicht minifiziert und gut lesbar, hauptsächlich für Debugging-Zwecke. +- sources - Die Quellcode-Dateien der Bibliothek. Die Dateien sind nicht minifiziert und gut lesbar. Das Paket ist größtenteils für Debugging von Komponenten gedacht. :::note Beachten Sie, dass die **Trial**-Version der Scheduler-Bibliothek keinen **sources**-Ordner enthält. ::: -- samples - enthält Beispielcode. -- codebase - enthält die gepackten Code-Dateien der Bibliothek. Diese sind kleiner und für den Produktionseinsatz vorgesehen. In Ihren Projekten sollten Sie die Dateien aus diesem Ordner verwenden. +- samples - Die Code-Beispiele. +- codebase - Die gepackten Code-Dateien der Bibliothek. Diese Dateien sind wesentlich kleiner und für den Einsatz in der Produktion gedacht. In Ihren Apps sollten Sie Dateien aus diesem Ordner verwenden. -## Größenanpassung des Schedulers {#schedulersizing} ------------------------------- +## Scheduler-Größen -Der Scheduler nimmt die gesamte Größe seines Containerelements ein (*scheduler_here*-div in den obigen Beispielen), ohne das Container-Element selbst zu vergrößern. -Das bedeutet: Wenn Sie keine Höhe für den Container festlegen oder diese auf null gesetzt ist, hat auch der Scheduler eine Höhe von null und ist nicht sichtbar. +Scheduler nimmt die volle Größe seines Container-Elements ein (*scheduler_here*-Div im obigen Beispiel), ohne es zu vergrößern. +Das bedeutet, dass, wenn Sie die Container-Höhe nicht festlegen oder sie auf 0 setzen, Scheduler ebenfalls eine Nullhöhe hat und nicht angezeigt wird. -In unseren Beispielen nimmt der Scheduler in der Regel den gesamten Bildschirm ein, indem sowohl dem Dokumenten-Body als auch dem Scheduler-Container 100% Breite und Höhe zugewiesen werden: +In unseren Beispielen machen wir Scheduler typischerweise fullscreen, indem wir der Dokumenten-Body und dem Scheduler-Container sowohl Breite als auch Höhe von 100% geben: ~~~html ~~~ -Zusätzlich ist etwas JavaScript notwendig, um die korrekte obere Position der sticky Zeit-Skala zu setzen, damit sie direkt unterhalb des Navigationsbereichs liegt. +Zusätzlich benötigen Sie etwas JavaScript, um die korrekte obere Position der Sticky-Zeitachse sicherzustellen und sie direkt unter dem Navigationspanel zu positionieren. -Da die Höhe des Navigationsbereichs je nach Stil und Inhalt variieren kann, sollte die Höhe dynamisch berechnet und als oberer Wert für die Kopfzeile gesetzt werden, z. B.: +Da das Navigationspanel flexibel ist und seine Höhe basierend auf anderen Stilen und Inhalten anpassen kann, müssen Sie dessen Höhe dynamisch berechnen und als obere Koordinate für den Header anwenden, wie folgt: ~~~js scheduler.attachEvent("onViewChange", function(){ @@ -298,33 +296,34 @@ scheduler.attachEvent("onViewChange", function(){ }); ~~~ -Ein vollständiges Beispiel finden Sie im folgenden Snippet: +Schauen Sie sich die vollständige Demo im untenstehenden Snippet an: -**Related sample** [Container autoresize and sticky header](https://snippet.dhtmlx.com/syo8wm9s) +**Zugehöriges Beispiel** [Container autoresize und sticky header] -## Scheduler responsiv machen {#makingschedulerresponsive} +## Scheduler responsiv machen -Wenn der Scheduler über [die header-Konfigurationseigenschaft](#initializing-scheduler-via-header-config) initialisiert wird, kann ein Kopfzeilen-Layout gewählt werden, das zur Bildschirmgröße des Clients passt. Es werden außerdem bestimmte Stile angewendet, die Elemente und Schriftgrößen besser an kleinere Bildschirme anpassen. +Wenn Sie Scheduler über [die Header-Konfigurations-Eigenschaft](#initializing-scheduler-via-header-config) initialisieren, können Sie die Header-Struktur auswählen, die zur Bildschirmgröße des Clients passt. +Es wendet außerdem bestimmte Stile an, die Elemente und Schriftgrößen auf kleinen Bildschirmen responsive machen. -Weitere Informationen finden Sie im Artikel: [Mobile Responsive Scheduler](guides/touch-support.md). +Weitere Details finden Sie in einem separaten Artikel: [Mobile Responsive Scheduler](guides/touch-support.md). -## Dateien in ES6/7- und TypeScript-Anwendungen importieren {#import-files-into-es67-and-typescript-apps} +## Dateien importieren in ES6/7- und TypeScript-Apps -Verwenden Sie diesen Befehl, um die Dateien zu importieren: +Verwenden Sie folgenden Befehl, um Dateien zu importieren: ~~~js import { scheduler } from 'dhtmlx-scheduler'; ~~~ -Für die Commercial-, Enterprise- oder Ultimate-Versionen sieht der Import so aus: +Für die kommerzielle, Enterprise- oder Ultimate-Version sieht der Befehl so aus: ~~~js import { scheduler, Scheduler } from 'dhtmlx-scheduler'; ~~~ -## Scheduler mit Vite verwenden {#usingschedulerwithvite} +## Scheduler mit Vite verwenden -Wenn Ihr Projekt Vite verwendet, fügen Sie folgende Einstellung zur **vite.config.js**-Datei hinzu, damit der Scheduler korrekt in Ihre App eingebunden wird: +Falls Sie Vite in Ihrem Projekt verwenden, ist die folgende Einstellung für die **vite.config.js**-Datei erforderlich, um sicherzustellen, dass Scheduler korrekt in die App eingebunden wird: ~~~js title="vite.config.js" optimizeDeps: { @@ -334,37 +333,38 @@ optimizeDeps: { } ~~~ -## Dateien in eine RequireJS-basierte Anwendung einbinden {#includefilesintoarequirejsbasedapp} ------------------------------------------------------- -Um dhtmlxScheduler-Dateien in einer RequireJS-basierten Anwendung einzubinden, gehen Sie wie im folgenden Beispiel vor: +Dateien in eine RequireJS-basierte App einbinden +------------------------------------------- + +Um dhtmlxScheduler-Dateien in eine RequireJS-basierte App einzubinden, sollten Sie der unten gezeigten Logik folgen: ~~~js requirejs(["codebase/dhtmlxscheduler"], function(dhx){ - var scheduler = dhx.scheduler; - var Scheduler = dhx.Scheduler;// for Enterprise builds + const scheduler = dhx.scheduler; + const Scheduler = dhx.Scheduler;// for Enterprise builds scheduler.init('scheduler_here',new Date(),"week"); scheduler.parse([ { - id: 1, text: "Event 1", start_date: "2022-07-15 09:00", - end_date: "2022-07-15 10:00" + id: 1, text: "Event 1", start_date: "2027-07-15 09:00", + end_date: "2027-07-15 10:00" }, { - id: 2, text: "Event 2", start_date: "2022-07-15 10:00", - end_date: "2022-07-15 11:00" + id: 2, text: "Event 2", start_date: "2027-07-15 10:00", + end_date: "2027-07-15 11:00" } ]); }); ~~~ -Die dhtmlxScheduler-Bibliothek gibt ein Objekt zurück, das `scheduler` und `Scheduler` enthält (in Commercial-, Enterprise- oder Ultimate-Versionen) - diese entsprechen den *scheduler*- und *Scheduler*-Objekten, die [hier](guides/multiple-per-page.md) beschrieben sind. +Die dhtmlxScheduler-Bibliothek gibt ein Objekt mit den Feldern `scheduler` und `Scheduler` (in Commercial-, Enterprise- oder Ultimate-Versionen) zurück - die Objekte *scheduler* und *Scheduler*, die hier beschrieben werden [hier](guides/multiple-per-page.md). :::note -Wenn Sie Scheduler mit benutzerdefinierten Erweiterungen in RequireJS verwenden, stellen Sie sicher, dass Sie die `shim`-Konfiguration für RequireJS angeben und die Abhängigkeiten der Erweiterungen vom Scheduler entsprechend deklarieren. +Wenn Sie Scheduler mit benutzerdefinierten Erweiterungen in RequireJS verwenden, sollten Sie die `shim`-Konfiguration für RequireJS angeben und direkt die Abhängigkeit der Erweiterungen von Scheduler darin festlegen. ::: -Das folgende Beispiel zeigt, wie Sie eine benutzerdefinierte Erweiterungsdatei *custom_tooltip_plugin.js* korrekt einbinden: +Das folgende Beispiel zeigt, wie eine benutzerdefinierte Erweiterungsdatei *custom_tooltip_plugin.js* korrekt gesetzt werden kann: ~~~js requirejs.config({ @@ -379,24 +379,24 @@ requirejs.config({ requirejs(["dhtmlxscheduler"], function (dhx) { - var scheduler = dhx.scheduler; + const scheduler = dhx.scheduler; scheduler.init('scheduler_here',new Date(),"week"); scheduler.parse([ { - id: 1, text: "Event 1", start_date: "2022-07-15 09:00", - end_date: "2022-07-15 10:00" + id: 1, text: "Event 1", start_date: "2027-07-15 09:00", + end_date: "2027-07-15 10:00" }, { - id: 2, text: "Event 2", start_date: "2022-07-15 10:00", - end_date: "2022-07-15 11:00" + id: 2, text: "Event 2", start_date: "2027-07-15 10:00", + end_date: "2027-07-15 11:00" } ]); }); ~~~ -Stellen Sie sicher, dass der Modulname für jede Datei im Paket als *relativer Pfad innerhalb des 'codebase'-Ordners des Pakets* plus *Dateiname* angegeben wird, zum Beispiel: +Überprüfen Sie, dass der Modulname für jede Datei innerhalb des Pakets als *relativer Pfad innerhalb des 'codebase'-Ordners des Pakets* plus *dem Dateinamen* angegeben wird, zum Beispiel: **Kernbibliothek:** -- "dhtmlxscheduler": "./vendor/dhtmlxscheduler/dhtmlxscheduler" +- "dhtmlxscheduler": "./vendor/dhtmlxscheduler/dhtmlxscheduler" \ No newline at end of file diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides/integration-with-bootstrap.md b/i18n/de/docusaurus-plugin-content-docs/current/guides/integration-with-bootstrap.md deleted file mode 100644 index eea2ab11..00000000 --- a/i18n/de/docusaurus-plugin-content-docs/current/guides/integration-with-bootstrap.md +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: "Integration mit Bootstrap" -sidebar_label: "Integration mit Bootstrap" ---- - -# Integration mit Bootstrap - -Die Scheduler-Bibliothek lässt sich problemlos in das Bootstrap-Framework integrieren. Um den Scheduler in eine auf Bootstrap basierende Anwendung einzubinden, gehen Sie wie folgt vor: - -1. Fügen Sie das dhtmlxScheduler-Skript zu Ihrer Anwendung hinzu: - -~~~html - -~~~ - -2. Richten Sie die HTML-Struktur mit Bootstrap-Komponenten ein, einschließlich des Scheduler-Containers und der Kopfzeilenelemente, wie im folgenden Beispiel: - -~~~html -
-
-
- dhtmlxScheduler -
-
- - -
- -
-
- -~~~ - -3. Initialisieren und konfigurieren Sie den Scheduler wie gewohnt: - -~~~js -scheduler.plugins({ - year_view: true, -}); -scheduler.config.first_hour = 8; -scheduler.config.limit_time_select = true; - -scheduler.init('scheduler_here',new Date(2017,5,30),"week"); -~~~ - - -[Bootstrap layout](https://docs.dhtmlx.com/scheduler/samples/10_integration/08_bootstrap.html) diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides/integration-with-dhtmlxmessage.md b/i18n/de/docusaurus-plugin-content-docs/current/guides/integration-with-dhtmlxmessage.md deleted file mode 100644 index 2a271c11..00000000 --- a/i18n/de/docusaurus-plugin-content-docs/current/guides/integration-with-dhtmlxmessage.md +++ /dev/null @@ -1,369 +0,0 @@ ---- -title: "Popup-Nachrichten und Modale Fenster" -sidebar_label: "Popup-Nachrichten und Modale Fenster" ---- - -# Popup-Nachrichten und Modale Fenster - -Nachrichten im Scheduler informieren Benutzer über Fehler, bestätigen oder verwerfen Aktionen, ermöglichen die Auswahl von Optionen und mehr. Die Scheduler-Nachrichten basieren auf [einem Fork des dhtmlxMessage-Repositories](https://github.com/DHTMLX/message), daher gelten alle Funktionen von dhtmlxMessage auch für dhtmlxScheduler-Nachrichten. - -Es gibt zwei Hauptkategorien von Nachrichten: eine [einfache Popup-Nachricht](#basicpopupmessage) und eine [modale Nachricht](#modalmessageboxes) mit Schaltflächen, die die Interaktion mit der Anwendung blockieren. - -Ein modales Nachrichtenfenster kann eine der folgenden drei Typen sein: - -- [Alert-Nachrichtenfenster](#alert) -- [Confirm-Nachrichtenfenster](#confirm) -- [Modalbox](#modal) - - -## Einfache Popup-Nachricht - -Um eine einfache modale Nachricht anzuzeigen, verwenden Sie die Methode [scheduler.message](api/method/message.md). Der einzige erforderliche Parameter ist der Nachrichtentext: - -~~~js -scheduler.message("The event is updated"); -~~~ - -Es gibt drei Arten von Nachrichtenfenstern: - -- ein Standard-Nachrichtenfenster (**type:"info"**) - -![default_message](/img/default_message.png) - -- ein Fehler-Nachrichtenfenster (**type:"error"**) - -![error_message](/img/error_message.png) - -- ein Warnungs-Nachrichtenfenster (**type:"warning"**) - -![warning_message](/img/warning_message.png) - -Um einen bestimmten Nachrichtentyp zu erstellen, setzen Sie die Eigenschaft *type* auf den entsprechenden Wert: - -~~~js -// Erstellen eines Fehler-Nachrichtenfensters -scheduler.message({ - text: "Click on the buttons to explore Scheduler message types", - expire: -1, - type: "error" -}); -~~~ - - -[Different types of popups and modal boxes](https://docs.dhtmlx.com/scheduler/samples/09_api/11_popups_and_messages.html) - - -Um das Aussehen eines Nachrichtenfensters anzupassen, geben Sie eine CSS-Klasse über den type-Parameter an, wie [hier](#styling) beschrieben. - -### Positionierung von Nachrichtenfenstern - -Standardmäßig erscheinen Popup-Nachrichtenfenster in der rechten oberen Ecke des Fensters. Im Gegensatz zu [modale Nachrichtenfenstern](#modalmessageboxes) blockieren sie nicht die Interaktion mit der Anwendung. Die Position kann durch Setzen der Eigenschaft **scheduler.message.position** geändert werden: - -~~~js -scheduler.message.position = 'bottom'; -~~~ - -Mögliche Werte für die Nachrichtenposition sind: - -- **top** - zeigt das Nachrichtenfenster in der rechten oberen Ecke an (Standard) -- **bottom** - zeigt das Nachrichtenfenster in der rechten unteren Ecke an -- **left** - zeigt das Nachrichtenfenster auf der linken Seite unterhalb des Schedulers an -- **right** - zeigt das Nachrichtenfenster auf der rechten Seite unterhalb des Schedulers an - -### Ablaufintervall - -Sie können steuern, wie lange ein Nachrichtenfenster sichtbar bleibt, indem Sie den *expire*-Parameter festlegen, der die Dauer in Millisekunden definiert, bevor die Nachricht verschwindet. Der Standardwert beträgt 4000 Millisekunden. - -Um die Dauer zu ändern oder das automatische Verschwinden zu verhindern, setzen Sie *expire* auf "-1". In diesem Fall schließt sich die Nachricht nur, wenn sie angeklickt wird. - -~~~js -scheduler.message({ - type:"error", - text:"Invalid data format", - expire:10000 -}); -~~~ - -### Ausblenden eines Nachrichtenfensters per API - -Um ein bestimmtes Nachrichtenfenster manuell auszublenden, ohne auf das Ablaufintervall zu warten, verwenden Sie die Methode **scheduler.message.hide(boxId)**. Sie nimmt einen Parameter entgegen: - -- **boxId** - die beim Erstellen zugewiesene ID des Nachrichtenfensters - -~~~js -scheduler.message({ - id:"myBox", - text:"Page is loaded" -}); - -scheduler.message.hide("myBox"); -~~~ - -## Modale Nachrichtenfenster - -Modale Nachrichtenfenster blockieren die Interaktion mit der übergeordneten Anwendung, bis eine erforderliche Aktion durchgeführt wurde - in der Regel durch das Klicken auf eine Schaltfläche. Sie schließen sich, wenn eine Schaltfläche angeklickt wird, und eine ggf. bereitgestellte Callback-Funktion wird ausgeführt. - -Es gibt drei Typen von modalen Nachrichtenfenstern: - -- [Alert-Nachrichtenfenster](#alert) - ein Hinweisfenster mit einer einzigen Schaltfläche -- [Confirm-Nachrichtenfenster](#confirm) - ein Bestätigungsfenster mit zwei Schaltflächen (Bestätigen oder Abbrechen) -- [Modalbox](#modal) - ein modales Fenster mit beliebig vielen Schaltflächen - -Gemeinsame Eigenschaften sind: - -- **id** - die ID des Nachrichtenfensters -- **title** - Überschrift -- **type** - Nachrichtentyp (z. B. warning oder error) -- **text** - Nachrichtentext -- **ok** - Text für die "OK"-Schaltfläche -- **cancel** - Text für die "Abbrechen"-Schaltfläche (nur für Confirm-Box) -- **callback** - Funktion, die beim Klicken auf eine Schaltfläche aufgerufen wird; erhält *true* oder *false*, abhängig von der gewählten Schaltfläche -- **position** - unterstützt derzeit nur "top"; andere Werte zentrieren das Fenster -- **width** - Breite des modalen Fensters (CSS-[Länge](https://developer.mozilla.org/en-US/docs/Web/CSS/length) oder [Prozentwert](https://developer.mozilla.org/en-US/docs/Web/CSS/percentage), z. B. "100px", "50%") -- **height** - Höhe des modalen Fensters (CSS-[Länge](https://developer.mozilla.org/en-US/docs/Web/CSS/length) oder [Prozentwert](https://developer.mozilla.org/en-US/docs/Web/CSS/percentage), z. B. "100px", "50%") - -## Alert-Nachrichtenfenster (#alert) - -![alert](/img/alert.png) - -Ein Alert-Fenster enthält eine einzelne "OK"-Schaltfläche. Um den Text der Schaltfläche festzulegen, verwenden Sie den *ok*-Parameter: - -- Kurzform (nur Nachrichtentext, *text* wird implizit gesetzt, andere Parameter verwenden Standardwerte): - -~~~js -scheduler.alert("Text"); -~~~ - -- Vollständige Form (ermöglicht das Setzen mehrerer Parameter; nicht angegebene verwenden Standardwerte): - -~~~js -scheduler.alert({ - text: "some text", - title: "Alert", - ok: "Ok", - callback: function(){...} -}); -~~~ - - -## Confirm-Nachrichtenfenster (#confirm) - -![confirm](/img/confirm.png) - -Ein Confirm-Fenster enthält zwei Schaltflächen: "OK" und "Abbrechen". Die Texte werden über die entsprechenden Eigenschaften gesetzt. - -- Kurzform - -~~~js -scheduler.confirm("ConfirmText"); -~~~ - -- Vollständige Form - -~~~js -scheduler.confirm({ - title:"Confirm", - text:"This is a simple confirm", - ok:"Ok", - cancel:"Cancel", - callback: function(result){ - if(result){ - scheduler.message("You clicked Ok"); - }else{ - scheduler.message("You clicked Cancel"); - } - } -}); -~~~ - - -## Modalbox (#modal) - -![modalbox](/img/modalbox.png) - -Die Modalbox bietet einige besondere Funktionen: - -- Ihr *text* kann beliebigen *HTML*-Inhalt enthalten -- Sie unterstützt mehrere Schaltflächen, die im *buttons*-Array angegeben werden, jeweils mit einer Beschriftung -- Die *callback*-Funktion erhält den Index der gedrückten Schaltfläche als Parameter - -~~~js -scheduler.modalbox({ - title:"Settings", - text: " ... html code here... ", - buttons:["Save", "Defaults", "Cancel"], - callback: function(result){ - scheduler.alert(result); - } -}); -~~~ - - -### Konfiguration der Modalbox-Schaltflächen - -Es gibt zwei Hauptmöglichkeiten, die Schaltflächen der Modalbox zu konfigurieren: - -- Kurzform: - -~~~js -scheduler.modalbox({ - // andere Einstellungen - buttons:["Save", "Delete", "Cancel"], - callback: function(result){ - switch(result){ - case "0": - //Save - break; - case "1": - //Delete - break; - case "2": - //Cancel - break; - } - } -}); -~~~ - -In dieser Form erhält das Callback den als String dargestellten Index der geklickten Schaltfläche ("0", "1", "2", ...). Jede Schaltfläche erhält eine CSS-Klasse basierend auf ihrer Beschriftung in Kleinbuchstaben, z. B.: *scheduler_**save**_button*, *scheduler_**delete**_button*, *scheduler_**cancel**_button*. - -Diese Klassen können zum Stylen der Schaltflächen verwendet werden: - -~~~js -.scheduler_delete_button div{ - background:red; -} -~~~ - -Wenn mehrere Popups die gleichen Schaltflächennamen verwenden, aber unterschiedliche Stile benötigen, kann die **type**-Eigenschaft verwendet werden: - -~~~js -scheduler.modalbox({ - // andere Einstellungen - type:"special_popup", - buttons:["Save", "Delete", "Cancel"] -}); -~~~ - -Der **type**-Wert wird mit "scheduler_" vorangestellt und als Klasse zum Popup-Element hinzugefügt: - -~~~js -.scheduler_special_popup .scheduler_delete_button div{ - background:red; -} -~~~ - -- Vollständige Form: - -Sie können Beschriftungen, CSS-Klassen und Callback-Werte der Schaltflächen explizit über eine detaillierte Konfiguration festlegen: - -~~~js -scheduler.modalbox({ - // andere Einstellungen - buttons: [ - { label:"Save", css:"link_save_btn", value:"save" }, - { label:"Cancel", css:"link_cancel_btn", value:"cancel" }, - { label:"Delete", css:"link_delete_btn", value:"delete" } - ], - callback: function(result){ - switch(result){ - case "save": - //Save - break; - case "cancel": - //Cancel - break; - case "delete": - //Delete - break; - } - } -}); -~~~ - -Nur der **label**-Parameter ist erforderlich; **css** und **value** sind optional. Wenn sie weggelassen werden, werden CSS-Klassen aus dem Kleinbuchstabenwert des Labels abgeleitet und der Button-Index als Wert verwendet. - -Die **css**-Klasse wird mit "scheduler_" vorangestellt und auf das Schaltflächenelement angewendet: - -~~~js -.scheduler_link_delete_btn div{ - background:red; -} -~~~ - -## Modale Nachrichtenfenster ausblenden - -Um ein modales Nachrichtenfenster manuell zu schließen, verwenden Sie die Methode **scheduler.modalbox.hide()** und übergeben das Container-Element der Modalbox: - -~~~js -var box = scheduler.modalbox({ - title: "Settings", - text: " ... html code here... ", - buttons: ["Save", "Defaults", "Cancel"], - callback: function(result){ - scheduler.alert(result); - } -}); - -scheduler.modalbox.hide(box); -~~~ - -Für **alert**- und **confirm**-Fenster wird die gleiche Methode **scheduler.modalbox.hide()** verwendet: - -~~~js -var box = scheduler.confirm({ - text: "Continue?", - ok:"Yes", - cancel:"No", - callback: function(result){ - scheduler.message("Result: "+result); - } -}); - -scheduler.modalbox.hide(box); -~~~ - - -## Styling - -Sie können das Aussehen jedes Nachrichtenfensters anpassen, indem Sie eigene CSS-Stile definieren. Normalerweise wird die CSS-Klasse über den *type*-Parameter angegeben: Erstellen Sie eine CSS-Klasse und weisen Sie deren Namen dem *type* zu. - -Beachten Sie dabei folgende Hinweise zum 'type'-Parameter: - -- Um Alert- und Confirm-Boxen zu stylen, initialisieren Sie diese mit der 'window-bezogenen' Methode. -- Um Nachrichtenfenster zu stylen, initialisieren Sie diese mit der 'common'-Methode. -- CSS-Klassennamen sollten mit dem Präfix 'scheduler-' beginnen. -- Um Stile korrekt anzuwenden, richten Sie Ihre Selektoren auf Elemente innerhalb von Scheduler-Nachrichten, z. B. **.scheduler-some div**. - -Beispiel: - -~~~js - - - -scheduler.message({ type:"myCss", text:"some text" }); -~~~ - -## Modale Fenster und Tastatur-Interaktion - -Das Verhalten der Tastatur für modale Fenster wird über die Eigenschaft **scheduler.message.keyboard** gesteuert, die standardmäßig auf *true* steht. - -Wenn aktiviert, blockieren modale Fenster die meisten Tastaturereignisse auf der Seite. Nur diese Tasten sind aktiv: - -- "Leertaste" und "Enter" - lösen ein *true*-Ergebnis im modalen Fenster aus -- "Escape" - löst ein *false*-Ergebnis aus - -Wenn Sie **scheduler.message.keyboard** auf *false* setzen, wird diese Blockierung aufgehoben und die vollständige Tastatureingabe ist möglich, was nützlich ist, um Daten in modalen Fenstern einzugeben: - -~~~js -scheduler.message.keyboard = false; -scheduler.modalbox({...}); -~~~ - -Dadurch wird die normale Tastaturnutzung innerhalb modaler Fenster ermöglicht. diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides/jquery-integration.md b/i18n/de/docusaurus-plugin-content-docs/current/guides/jquery-integration.md deleted file mode 100644 index a7a7e420..00000000 --- a/i18n/de/docusaurus-plugin-content-docs/current/guides/jquery-integration.md +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: "jQuery-Integration" -sidebar_label: "jQuery-Integration" ---- - -# jQuery-Integration - -Ab Version 4.0 unterstützt dhtmlxScheduler die Integration mit jQuery. - -So können Sie einen Standard-Scheduler mit jQuery initialisieren: - -~~~js -$(function(){ - $(".myscheduler").dhx_scheduler({ - date:new Date(2019,4,25), - mode:"month" - }); - - scheduler.load("data/events"); -}); -~~~ - -In diesem Beispiel gilt: - -- **".myscheduler"** - ein jQuery-kompatibler CSS-Selektor für den Container, in dem der Scheduler erstellt wird (mit der PRO-Version ist es möglich, Scheduler gleichzeitig in mehreren Containern zu initialisieren). -- Die Methode **dhx_scheduler()** erstellt eine Instanz von dhtmlxScheduler. Sie akzeptiert ein Konfigurationsobjekt als Parameter: - - **date** - (*Date*) legt das Anfangsdatum des Schedulers fest (Standardwert ist das aktuelle Datum) - - **mode** - (*string*) gibt die Startansicht an (Standardwert ist "week") - - weitere Konfigurationsoptionen (die normalerweise über scheduler.config.xxxxx gesetzt werden) können ebenfalls auf diese Weise übergeben werden -:::note -Ein über die jQuery-Methode initialisierter Scheduler unterstützt die gleichen Konfigurationseinstellungen und die gleiche API wie der Standardscheduler. -::: - - -[JQuery integration](https://docs.dhtmlx.com/scheduler/samples/10_integration/06_jquery.html) diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides/keyboard-navigation.md b/i18n/de/docusaurus-plugin-content-docs/current/guides/keyboard-navigation.md index 332fab82..e613cfcf 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/guides/keyboard-navigation.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/guides/keyboard-navigation.md @@ -5,11 +5,11 @@ sidebar_label: "Tastaturnavigation" # Tastaturnavigation -Der Scheduler und seine Elemente können mit einzelnen Tasten oder Tastenkombinationen gesteuert werden. Dieser Artikel enthält alles, was Sie über die Tastaturnavigation im Scheduler wissen müssen, einschließlich des Fokusverhaltens, der integrierten Shortcuts und wie Sie eigene erstellen. +Sie können auf Scheduler und seine Elemente mittels Tasten oder Tastenkombinationen zugreifen. Dieser Artikel enthält alle notwendigen Informationen zu den Besonderheiten der Tastaturnavigation mit Scheduler, einschließlich Fokusverhalten, Verwendung vordefinierter Shortcuts und der Erstellung eigener Shortcuts. -## Aktivieren der Funktionalität {#enablingthefunctionality} +## Aktivierung der Funktionalität -Um die Tastaturnavigation im Scheduler zu aktivieren, schalten Sie einfach die **key_nav**-Erweiterung auf Ihrer Seite ein. +Um die Tastaturnavigation in Scheduler zu verwenden, müssen Sie die **key_nav**-Erweiterung auf der Seite aktivieren. ~~~js scheduler.plugins({ @@ -17,36 +17,36 @@ scheduler.plugins({ }); ~~~ -## Fokusverhalten während der Tastaturnavigation {#focusbehaviorduringkeyboardnavigation} +## Fokusverhalten während der Tastaturnavigation -### Fokus auf dem Scheduler +### Fokus auf Scheduler -Durch Drücken der Tab-Taste wird der Fokus auf den Scheduler gesetzt, wie bei jedem anderen Element auch. Sobald der Scheduler fokussiert ist, können Sie innerhalb des Schedulers mit den Pfeiltasten und anderen Tastenkombinationen navigieren. +Wenn die Tab-Taste gedrückt wird, erhält Scheduler den Fokus wie jedes andere normale Element. Danach können Sie zur Navigation im Scheduler die Pfeiltasten und weitere Tasten verwenden. -Durch erneutes Drücken von Tab wird der Fokus vom Scheduler auf ein anderes Element der Seite verschoben. +Wenn die Tab-Taste ein zweites Mal gedrückt wird, verlässt der Fokus Scheduler und wird an eine andere Stelle der Seite verschoben. -### Fokus auf einem modalen Fenster +### Fokus auf einem Modalfenster -Wenn ein modales Fenster (wie ein Lightbox- oder Bestätigungsfenster) geöffnet wird, wechselt der Fokus vom Scheduler zu diesem Fenster, sodass Sie darin wie in einem normalen Formular navigieren können. Beim Schließen des Fensters kehrt der Fokus zum Scheduler zurück. +Wenn ein Modalfenster (eine Lightbox, ein Bestätigungsfenster) geöffnet wird, verschiebt sich der Fokus vom Scheduler zu diesem Fenster, und die Navigation erfolgt darin wie in einem einfachen Formular. Beim Schließen des Fensters geht der Fokus zurück zum Scheduler. -Um den Fokus programmatisch auf den Scheduler zurückzusetzen, verwenden Sie die Methode [focus](api/method/focus.md): +Um den Fokus wieder zum Scheduler zu richten, verwenden Sie die [focus](api/method/focus.md)-Methode. ~~~js scheduler.focus(); ~~~ -Wenn der Scheduler den Fokus zurückerhält, wird dieser auf das aktive Element im Scheduler, die erste Zeile oder das zuletzt ausgewählte Element gesetzt. +Wenn der Scheduler erneut den Fokus erhält, setzt er den Fokus auf das aktive Element darin, auf die erste Zeile oder auf das zuletzt ausgewählte Element. -Standard-Navigationsaktionen innerhalb eines modalen Fensters sind: +Die Standard-Navigationsaktionen in einem Modalfenster sind wie folgt: -- *Enter* - bestätigen und schließen -- *Escape* - schließen, ohne Änderungen zu speichern +- *Enter* - Bestätigen und Schließen +- *Escape* - Schließen ohne Änderungen -Wenn der Fokus auf einem Formular-Button liegt, löst das Drücken von *Space* oder *Enter* die Aktion dieses Buttons aus, anstatt das Standardverhalten. +Wenn der Fokus auf einem Button des Formulars liegt, bewirkt das Drücken von *Space* oder *Enter*, dass der Button unter dem Fokus ausgelöst wird und nicht die Aktion. -## Zellen im Fokus stylen {#stylingcellsinfocus} +## Styling der Zellen im Fokus -Fokussierte Zellen werden standardmäßig mit einem grau/gelben Hintergrund hervorgehoben. Um diesen Stil anzupassen, ändern Sie die CSS-Klasse **.dhx_focus_slot**: +Wenn Sie den Fokus auf eine Zelle setzen, wird sie in Grau/Gelb hervorgehoben. Falls Sie dieses Styling ändern möchten, verwenden Sie die CSS-Klasse **.dhx_focus_slot**: ~~~js ~~~ -## Scopes {#scopes} +## Geltungsbereiche -Tastaturaktionen hängen vom Kontext ab, das heißt, verschiedene Shortcuts können verschiedenen Elementen (Scopes) im Scheduler zugewiesen werden. Die verfügbaren Scopes sind: +Eine durch einen Tastendruck ausgelöste Aktion hängt vom Kontext ab. Das bedeutet, dass verschiedene Aktionen an verschiedene Elemente (Geltungsbereiche) angehängt werden können. Im Scheduler gibt es folgende Kontext-Elemente (Geltungsbereiche): - **"scheduler"** - Der gesamte Scheduler -- **"timeSlot"** - Ein Zeitfenster +- **"timeSlot"** - Ein Zeitslot - **"event"** - Ein Ereignis - **"minicalDate"** - Ein Datum im Mini-Kalender -- **"minicalButton"** - Ein Pfeil-Button im Mini-Kalender +- **"minicalButton"** - Eine Pfeil-Schaltfläche im Mini-Kalender -Wenn derselbe Shortcut mehreren Scopes zugewiesen ist, hat der Shortcut des spezifischeren Elements Vorrang. Zum Beispiel überschreibt ein Shortcut auf einem Ereignis denselben Shortcut, der dem gesamten Scheduler zugewiesen ist. +Wenn dieselbe Tastenkombination mehreren Geltungsbereichen zugeordnet ist, wird die spezifischere Tastenkombination ausgelöst. Das bedeutet, dass, wenn dieselbe Tastenkombination sowohl dem Scheduler als auch seinem Element zugeordnet ist, die dem Element zugeordnete Tastenkombination aufgerufen wird, statt der Tastenkombination, die dem gesamten Scheduler zugeordnet ist. -### Shortcut hinzufügen +### Hinzufügen einer Tastenkombination -Um einen neuen Tastatur-Shortcut hinzuzufügen, verwenden Sie die Methode [addShortcut](api/method/addshortcut.md) mit drei Parametern: +Um eine neue Tastenkombination zu erstellen, müssen Sie die [addShortcut](api/method/addshortcut.md)-Methode verwenden und ihr drei Parameter übergeben: -- **shortcut** - (*string*) die Taste oder Tastenkombination -- **handler** - (*function*) die Funktion, die beim Auslösen des Shortcuts ausgeführt wird -- **scope** - (*string*) das Kontext-Element, dem der Handler zugeordnet wird +- **shortcut** - (*string*) eine neue Tastenkombination oder der Name einer Tastenkombination +- **handler** - (*function*) eine Handler-Funktion, die beim Aufruf der Tastenkombination ausgeführt wird +- **scope** - (*string*) der Name des Kontext-Elements, dem die Handler-Funktion zugeordnet wird ~~~js scheduler.addShortcut("shift+w", function(e){ - var target = e.target; + const target = e.target; if(target.closest("[event_id]")) - var eventId = target.getAttribute("event_id"); + const eventId = target.getAttribute("event_id"); if(eventId) scheduler.showQuickInfo(eventId); },"event"); ~~~ -### Shortcut entfernen +### Entfernen einer Tastenkombination -Um einen Shortcut aus einem Scope zu entfernen, verwenden Sie die Methode [removeShortcut](api/method/removeshortcut.md) mit zwei Parametern: +Um eine Tastenkombination aus dem Geltungsbereich zu entfernen, verwenden Sie die [removeShortcut](api/method/removeshortcut.md)-Methode. Die Methode nimmt zwei Parameter entgegen: -- **shortcut** - (*string*) die Taste oder Tastenkombination des Shortcuts -- **scope** - (*string*) das Kontext-Element, aus dem der Shortcut entfernt werden soll +- **shortcut** - (*string*) der Name der Taste oder der Tastenkombination +- **scope** - (*string*) der Name des Kontext-Elements, dem die Tastenkombination zugeordnet ist ~~~js scheduler.removeShortcut("shift+w","event"); ~~~ -### Shortcut-Handler abrufen +### Ermitteln eines Tastenkombination-Handlers -Sie können die Handler-Funktion eines Shortcuts mit [getShortcutHandler](api/method/getshortcuthandler.md) abrufen. Diese Methode benötigt: +Sie können den Handler der Tastenkombination mit der Methode [getShortcutHandler](api/method/getshortcuthandler.md) erhalten. Sie nimmt zwei Parameter entgegen: -- **shortcut** - (*string*) die Taste oder Tastenkombination -- **scope** - (*string*) das Kontext-Element, dem der Shortcut zugeordnet ist +- **shortcut** - (*string*) der Name der Taste oder der Tastenkombination +- **scope** - (*string*) der Name des Kontext-Elements, dem die Tastenkombination zugeordnet ist ~~~js -var shortcut_handler = scheduler.getShortcutHandler("shift+w","event"); +const shortcut_handler = scheduler.getShortcutHandler("shift+w","event"); ~~~ -Diese Methode gibt die Funktion zurück, die den Shortcut verarbeitet. +Die Methode gibt eine Funktion zurück, die den Handler des Aufrufs der Tastenkombination darstellt. -## Shortcut-Syntax {#shortcut-syntax} +## Syntax der Tastenkombination -Tastatur-Shortcuts können bestehen aus: +Eine Tastenkombination kann aus den folgenden Tasten oder Tastenkombinationen bestehen: -- einer Modifikatortaste plus einem Zeichen (z.B. "ctrl+a"); -- einer Modifikatortaste plus einer Nicht-Zeichen-Taste (z.B. "ctrl+space"); -- einer einzelnen Zeichen-Taste (z.B. "a"); -- einer einzelnen Nicht-Zeichen-Taste (z.B. "space"). +- eine Modifikatortaste + eine Zeichen-Taste ("ctrl+a"); +- eine Modifikatortaste + eine Nicht-Zeichen-Taste ("ctrl+space"); +- eine Zeichen-Taste ("a"); +- eine Nicht-Zeichen-Taste ("space") -Mehrere Tastenkombinationen können dieselbe Aktion auslösen, indem sie durch Kommas getrennt angegeben werden, wie z.B. "ctrl+a, ctrl+space". +Es kann mehrere Tastenkombinationen für eine Aktion geben. In diesem Fall werden alle Kombinationen durch ein Komma getrennt aufgelistet: "ctrl+a, ctrl+space". -### Liste der unterstützten Tasten für Shortcuts +### Die Liste der unterstützten Tasten für Tastenkombinationen -- Modifikatortasten: **shift**, **alt**, **ctrl**, **meta** -- Nicht-Zeichen-Tasten: **backspace**, **tab**, **enter**, **esc**, **space**, **up**, **down**, **left**, **right**, **home**, **end**, **pageup**, **pagedown**, **delete**, **insert**, **plus**, **f1-f12** +- Modifikatortasten: **shift**, **alt**, **ctrl**, **meta**; +- Nicht-Zeichen-Tasten: **backspace**, **tab**, **enter**, **esc**, **space**, **up**, **down**, **left**, **right**, **home**, **end**, **pageup**, **pagedown**, **delete**, +**insert**, **plus**, **f1-f12**. -## Vorhandene Shortcuts {#existingshortcuts} +## Vorhandene Tastenkombinationen -Der Scheduler verfügt über eine Reihe vordefinierter Shortcuts für die Navigation: +Es gibt eine Reihe vordefinierter Tastenkombinationen, mit denen Sie Scheduler navigieren können: -### Allgemeine Tastatur-Shortcuts +### Allgemeine Tastenkombinationen -- **Tab** - fokussiert den Scheduler -- **Alt+1, Alt+2, Alt+3, ...** - wechselt zwischen Ansichten -- **Ctrl+Left/Right** - zum vorherigen/nächsten Datum wechseln -- **Ctrl+Up/Down** - scrollt den Datenbereich +- **Tab** - setzt den Fokus auf den Scheduler +- **Alt+1,Alt+2,Alt+3,...** - zwischen Ansichten wechseln +- **Ctrl+Left/Right** - zum nächsten/vorherigen Datum wechseln +- **Ctrl+Up/Down** - Datenbereich scrollen - **Ctrl+Enter** - neues Ereignis erstellen - **E, Shift+E** - nächstes/vorheriges Ereignis auswählen -- **Home** - zum aktuellen Datum springen -- **Ctrl+C, Ctrl+X, Ctrl+V** - Ereignis kopieren, ausschneiden und einfügen +- **Home** - zum aktuellen Datum wechseln +- **Ctrl+C, Ctrl+X, Ctrl+V** - ein Ereignis kopieren/ausschneiden/einfügen -### Shortcuts für Zeitfenster +### Shortcuts für Time Slots -- **Pfeiltasten Oben/Unten/Links/Rechts** - zwischen Zeitfenstern wechseln -- **Shift+Pfeiltasten Oben/Unten/Links/Rechts** - das ausgewählte Zeitfenster erweitern -- **Enter** - Ereignis im ausgewählten Zeitfenster erstellen +- **Up/Down/Left/Right Arrow Keys** - über Time Slots navigieren +- **Shift+Up/Down/Left/Right Arrow Keys** - einen Time Slot erweitern +- **Enter** - ein Ereignis im ausgewählten Time Slot erstellen ### Shortcuts für Ereignisse -- **Pfeiltasten Oben/Unten/Links/Rechts** - zu einem Zeitfenster navigieren +- **Up/Down/Left/Right Arrow Keys** - zu einem Time Slot wechseln - **Enter** - Lightbox öffnen -### Shortcuts für Mini-Kalender - -- **Tab** - fokussiert den Mini-Kalender -- **Pfeiltasten Oben/Unten/Links/Rechts** - zwischen Buttons und Daten navigieren -- **Enter** - den ausgewählten Button oder das Datum aktivieren +### Shortcuts für den Mini-Kalender +- **Tab** - setzt den Fokus auf den Mini-Kalender +- **Up/Down/Left/Right Arrow Keys** - zu Schaltflächen/Zellen navigieren +- **Enter** - auf eine Schaltfläche/Zelle klicken [Keyboard Navigation and WAI-ARIA - Flat Skin](https://docs.dhtmlx.com/scheduler/samples/13_accessibility/01_regular_skin_all_views.html) [Keyboard navigation in the scheduler](https://docs.dhtmlx.com/scheduler/samples/03_extensions/07_navigation_plugin.html) -### Zugehörige Events +### Verwandte Ereignisse - [onEventCopied](api/event/oneventcopied.md) - [onEventCut](api/event/oneventcut.md) -- [onEventPasted](api/event/oneventpasted.md) +- [onEventPasted](api/event/oneventpasted.md) \ No newline at end of file diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides/lightbox-editors-manipulations.md b/i18n/de/docusaurus-plugin-content-docs/current/guides/lightbox-editors-manipulations.md index 018f54ad..341fd2bb 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/guides/lightbox-editors-manipulations.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/guides/lightbox-editors-manipulations.md @@ -1,29 +1,29 @@ --- -title: "Manipulationen mit dem Lightbox" -sidebar_label: "Manipulationen mit dem Lightbox" +title: "Manipulationen am Lightbox" +sidebar_label: "Manipulationen am Lightbox" --- -# Manipulationen mit dem Lightbox +# Manipulationen am Lightbox -## Abrufen/Setzen des Steuerungswerts {#gettingsettingthecontrolvalue} +## Abrufen/Setzen des Werts des Steuerelements -Um den Wert einer Steuerung in einem Abschnitt abzurufen oder zu aktualisieren, verwenden Sie das Objekt [formSection](api/method/formsection.md) wie folgt: +Um den Wert des Abschnitts-Steuerelements abzurufen bzw. zu setzen, verwenden Sie das [formSection](api/method/formsection.md) Objekt wie folgt: ~~~js -// zum Abrufen des Werts -var value = scheduler.formSection('description').getValue(); +//to get the value +const value = scheduler.formSection('description').getValue(); -// zum Setzen des Werts +//to set the value scheduler.formSection('description').setValue('abc'); ~~~ -[Setting/getting values of lightbox's controls](https://docs.dhtmlx.com/scheduler/samples/02_customization/22_opertions_with_lightbox.html) +[Setzen/Abrufen von Werten der Lightbox-Steuerelemente](https://docs.dhtmlx.com/scheduler/samples/02_customization/22_opertions_with_lightbox.html) -## Öffnen des Lightbox mit einem einfachen Klick {#opening-the-lightbox-on-a-single-click} +## Öffnen der Lightbox mit einem Klick -Sie können konfigurieren, dass das Lightbox mit einem einzigen Klick geöffnet wird. Dies erreichen Sie, indem Sie das Ereignis [onClick](api/event/onclick.md) zusammen mit der Methode [showLightbox](api/method/showlightbox.md) verwenden: +Es ist möglich, die vorhandene Lightbox mit einem einzigen Klick zu öffnen. Dazu verwenden Sie das [onClick](api/event/onclick.md) Event und die [showLightbox](api/method/showlightbox.md) Methode: ~~~js scheduler.attachEvent("onClick", function (id, e){ @@ -32,51 +32,51 @@ scheduler.attachEvent("onClick", function (id, e){ }); ~~~ -**Related sample** [Opening the lightbox on one click](https://snippet.dhtmlx.com/5/50e639d2a) +**Zugehöriges Beispiel** [Öffnen der Lightbox mit einem Klick] -Mit dieser Konfiguration öffnet ein Klick mit der linken Maustaste auf eine Ereignisbox das Lightbox. +Die Lightbox wird geöffnet, wenn der Benutzer mit der linken Maustaste auf das Ereignisfenster klickt. -## Überprüfen, ob das Lightbox geöffnet ist {#checking-whether-the-lightbox-is-opened} +## Überprüfung, ob die Lightbox geöffnet ist -Um festzustellen, ob das Lightbox derzeit geöffnet oder geschlossen ist, überprüfen Sie die Eigenschaft **lightbox_id** aus dem von der Methode [getState](api/method/getstate.md) zurückgegebenen Statusobjekt. -Wenn das Lightbox geöffnet ist, wird die ID des Ereignisses im Lightbox zurückgegeben; andernfalls wird 'null' oder 'undefined' zurückgegeben: +Um zu prüfen, ob die Lightbox derzeit geöffnet oder geschlossen ist, verwenden Sie die **lightbox_id**-Eigenschaft des Statusobjekts, das durch die [getState](api/method/getstate.md) Methode zurückgegeben wird. +Wird die Lightbox geöffnet, gibt die Methode die ID des geöffneten Ereignisses zurück, andernfalls wird 'null' oder 'undefined' zurückgegeben: ~~~js if (scheduler.getState().lightbox_id){ - // Code, wenn das Lightbox geöffnet ist + //the code for the opened lightbox } else { - // Code, wenn das Lightbox geschlossen ist + //the code for the closed lightbox } ~~~ -## Zuordnung von Eigenschaften eines Ereignisobjekts zu den Lightbox-Abschnitten {#mapping-properties-of-an-event-object-to-the-lightbox-sections} +## Zuordnung von Eigenschaften eines Ereignisobjekts zu den Lightbox-Abschnitten Um eine Eigenschaft eines Ereignisobjekts einem Lightbox-Abschnitt zuzuordnen, gehen Sie wie folgt vor: -- Stellen Sie sicher, dass Ihre Datenquelle Ereignisse in einem [unterstützten Format](guides/data-formats.md) bereitstellt +- Stellen Sie sicher, dass Ihre Datenquelle Ereignisse in einem [unterstützten Format](guides/data-formats.md) zurückgibt ~~~js { "data":[ { "id":"1", - "start_date":"2019-03-02 00:00:00", - "end_date":"2019-03-04 00:00:00", + "start_date":"2027-03-02 00:00:00", + "end_date":"2027-03-04 00:00:00", "text":"Graduation ceremony", "type":"1", "location":"London" }, ... - ] + ] } ~~~ -Beachten Sie, dass alle von Ihrer Datenquelle zurückgegebenen Eigenschaften zu Ereignisobjekten hinzugefügt werden und über die [Client-seitige API](guides/event-object-operations.md) zugänglich sind. +Beachten Sie, dass alle Eigenschaften, die Ihre Datenquelle zurückgibt, zu Event-Objekten hinzugefügt werden und für die [Client-seitige API](guides/event-object-operations.md) verfügbar sein werden. -- Um eine Lightbox-Steuerung einer bestimmten Eigenschaft zuzuordnen, setzen Sie die Eigenschaft **map_to** des Abschnitts auf den Namen der Ereigniseigenschaft: +- Um ein Lightbox-Steuerelement einer bestimmten Eigenschaft zuzuordnen, weisen Sie dem Abschnitt die Eigenschaft **map_to** den Namen der entsprechenden Ereignis-Eigenschaft zu: ~~~js -scheduler.config.lightbox.sections="[" +scheduler.config.lightbox.sections=[ {name:"description", height:70, map_to:"text", type:"textarea" , focus:true}, {name:"locationInput", height:35, map_to:"location", type:"textarea" }, {name:"typeSelect", map_to:"type", type:"select", options:scheduler.serverList("types")}, @@ -84,29 +84,29 @@ scheduler.config.lightbox.sections="[" ]; ~~~ -Die [time](guides/time.md)- und [recurring](guides/recurring-events.md#recurringlightbox)-Steuerungen sind Ausnahmen, da sie immer auf feste Eigenschaften abbilden (**event.start_date/event.end_date** bzw. **event.rec_type/event.event_length/event.event_pid**). +Nur Ausnahmen sind die [time](guides/time.md)- und die [recurring](guides/recurring-events.md#recurring-lightbox)-Steuerelemente, die immer festen Eigenschaften zugeordnet sind (**event.start_date/event.end_date** und **event.rec_type/event.event_length/event.event_pid**) entsprechend. -## Automatisches Enddatum in der Zeit-Steuerung {#automatic-end-date-in-the-time-control} +## Automatisches Enddatum im Time-Control -Um eine Standarddauer für Ereignisse festzulegen und das Enddatum automatisch zu aktualisieren, damit diese Dauer beibehalten wird, konfigurieren Sie die folgenden Eigenschaften: +Um die anfängliche Dauer von Ereignissen festzulegen und das Enddatum automatisch anzupassen, verwenden Sie die Eigenschaften **event_duration** und **auto_end_date**: ~~~js -// Geben Sie die Ereignisdauer in Minuten für den auto_end_time-Parameter an +//specify the event duration in minutes for the auto_end_time parameter scheduler.config.event_duration = 60; scheduler.config.auto_end_date = true; ~~~ -[Automatic end date](https://docs.dhtmlx.com/scheduler/samples/02_customization/11_auto_end_date.html) +[Automatisches Enddatum](https://docs.dhtmlx.com/scheduler/samples/02_customization/11_auto_end_date.html) -Mit dieser Einstellung wird jedes Mal, wenn der Benutzer die Startzeit oder das Startdatum des Ereignisses im Lightbox ändert, die Endzeit und das Enddatum automatisch angepasst, sodass die Ereignisdauer 60 Minuten beträgt (wie in der Option [event_duration](api/config/event_duration.md) angegeben). +Bei einer solchen Konfiguration wird jedes Mal, wenn der Benutzer die Startzeit oder das Datum des Start-Ereignisses im Lightbox ändert, die Endzeit und das Enddatum des Ereignisses automatisch angepasst, damit die Dauer des Ereignisses 60 Minuten entspricht (dem Wert der Option [event_duration](api/config/event_duration.md)). -## Setzen des Standardwerts für eine Lightbox-Steuerung {#setting-the-default-value-for-a-lightboxs-control} +## Festlegen des Standardwerts für den Lightbox-Abschnitt -Um einen Standardwert für einen Abschnitt des Lightbox festzulegen, verwenden Sie die Eigenschaft **default_value** dieses Abschnitts. +Um den Standardwert für einen Lightbox-Abschnitt festzulegen, verwenden Sie die **default_value**-Eigenschaft des Abschnittsobjekts. -Wenn zum Beispiel ein benutzerdefinierter Abschnitt für den Ereignisort hinzugefügt und als 'Location' bezeichnet wird, ist dieser beim Erstellen eines neuen Ereignisses standardmäßig leer. Um standardmäßig eine bestimmte Adresse (wie das Greenwich Observatory) anzuzeigen, konfigurieren Sie das Lightbox wie folgt: +Zum Beispiel haben Sie einen benutzerdefinierten Abschnitt hinzugefügt, der den Ort des Ereignisses im Lightbox anzeigt und ihn 'Location' genannt. Wenn der Benutzer ein neues Ereignis erstellt, bleibt das Feld leer. Um dieses Verhalten zu korrigieren und standardmäßig beispielsweise die Adresse des Greenwich Observatory anzuzeigen, definieren Sie das Lightbox wie folgt: ~~~js scheduler.config.lightbox.sections = [ @@ -117,167 +117,167 @@ scheduler.config.lightbox.sections = [ ]; ~~~ -Beachten Sie, dass **default_value** den Standardinhalt für den Abschnitt im Lightbox selbst festlegt, nicht für das neue Ereignis. Das bedeutet, dass ein neues Ereignis den angegebenen Wert erst erhält, nachdem das Lightbox geöffnet und das Ereignis gespeichert wurde. +Hinweis: Die **default_value**-Eigenschaft legt den Standardwert für den Lightbox-Abschnitt fest, nicht für ein neues Ereignis, d. h. ein neues Ereignis erhält den angegebenen Wert erst, nachdem der Benutzer den Lightbox geöffnet und das Ereignis gespeichert hat. -Um beim Erstellen neuer Ereignisse direkt einen Standardwert zuzuweisen, verwenden Sie das Ereignis [onEventCreated](api/event/oneventcreated.md): +Um den Standardwert direkt für neue Ereignisse festzulegen, verwenden Sie das Event [onEventCreated](api/event/oneventcreated.md): ~~~js scheduler.attachEvent("onEventCreated", function(id,e){ scheduler.getEvent(id).location = 'Blackheath Avenue London, Greenwich...'; - scheduler.updateEvent(id); // aktualisiert das angezeigte Ereignis + scheduler.updateEvent(id); // renders the updated event return true; }); ~~~ -## Ändern der Reihenfolge der Datums-/Zeitsteuerungen und Entfernen von Zeitselektoren {#changingtheorderofdatetimecontrolsandremovingtimeselectors} +## Änderung der Reihenfolge der Datum-Uhrzeit-Steuerelemente und Entfernen von Zeit-Auswahlfeldern -Sie können die Reihenfolge der Datums-/Zeitsteuerungen im Abschnitt 'Zeitperiode' ändern oder Zeitselektoren auslassen, indem Sie die Eigenschaft **time_format** festlegen: +Sie haben die Möglichkeit, die Reihenfolge der Datum-Uhrzeit-Steuerelemente im Abschnitt 'Time period' zu ändern oder einige davon zu entfernen. Verwenden Sie dazu die **time_format**-Eigenschaft: ~~~js -scheduler.config.lightbox.sections="[" +scheduler.config.lightbox.sections= [ {name:"description", height:130, map_to:"text", type:"textarea" , focus:true}, {name:"time", ..., time_format:["%H:%i","%m","%d","%Y"]} ]; ~~~ :::note -Beachten Sie, dass dies nur die Reihenfolge der Elemente im Array ändert; das Datenanzeigeformat wird dadurch nicht beeinflusst. +Hinweis: Sie können das Darstellungsformat der Daten nicht ändern, nur die Reihenfolge der Elemente im Array. ::: -Zum Beispiel können Sie das Format wie folgt anpassen: +Zum Beispiel können Sie das Format wie folgt ändern: ~~~js -// Standard +//default time_format:["%H:%i", "%m", "%d", "%Y"] -// Monat zuerst +//month goes first time_format:["%m","%d", "%Y", "%H:%i"] -// Jahr-Selektor auslassen +//the year selector is removed time_format:["%H:%i", "%m", "%d"] -// Falsche Verwendung -time_format:["%H:%i", "%M", "%d", "%Y"] // "%m" wurde fälschlicherweise zu "%M" geändert +//incorrect +time_format:["%H:%i", "%M", "%d", "%Y"] //"%m" wurde zu "%M" ~~~ -## Nur-Lese-Modus {#readonlymode} +## Lesemodus -Weitere Details zum Nur-Lese-Modus finden Sie im Kapitel [Schreibgeschützter Modus](guides/readonly.md). +Die detaillierten Informationen zum Lesemodus finden Sie im Kapitel [Read-only Mode](guides/readonly.md). -## Einen Abschnitt für bestimmte Ereignisse ausblenden {#makingasectionhiddenforsomeevents} - -Um einen Abschnitt für bestimmte Ereignisse auszublenden, überschreiben Sie dessen **set_value**-Methode wie folgt: +## Ausblenden eines Abschnitts für bestimmte Ereignisse +Um einen Abschnitt für bestimmte Ereignisse auszublenden, definieren Sie seine **set_value**-Methode wie folgt neu: ~~~js -scheduler.form_blocks.textarea.set_value="function(node,value,ev){" - node.firstChild.value="value||"""; - var style = ev.some_property?"":"none"; - node.style.display="style;" // Editorbereich - node.previousSibling.style.display="style;" // Abschnittsüberschrift +scheduler.form_blocks.textarea.set_value = function(node,value,ev){ + node.firstChild.value= value || ""; + let style = ev.some_property ? "" : "none"; + node.style.display = "style;" // Editorbereich + node.previousSibling.style.display = "style;" // Abschnittsüberschrift scheduler.setLightboxSize(); // passt die Größe des Lightbox an } ~~~ -### 'Ganztägiges Ereignis'-Option +### 'Volltag-Ereignis' Option -Um die Option 'ganztägiges Ereignis' im Lightbox zu aktivieren, setzen Sie die Option [full_day](api/config/full_day.md) auf *true*, indem Sie Folgendes hinzufügen: +Um die Option 'Volltag-Ereignis' zur Lightbox hinzuzufügen, setzen Sie die [full_day](api/config/full_day.md) Option auf *true*. +Dazu fügen Sie einfach die folgende Codezeile hinzu: ~~~js scheduler.config.full_day = true; ~~~ -Sobald dies aktiviert ist, erscheint das **Ganztägig**-Kontrollkästchen auf der linken Seite des Abschnitts **Zeitperiode**. Wenn es aktiviert ist, werden alle Eingabefelder in diesem Abschnitt deaktiviert und die Ereignisdauer wird auf den gesamten Tag festgelegt - von **0:00 Uhr** des aktuellen Zellen-Datums bis **0:00 Uhr** des folgenden Tages. +Sobald die [full_day](api/config/full_day.md) Option aktiviert ist, wird das Kontrollkästchen **Full Day** im linken Teil des **Time period**-Abschnitts angezeigt. Nach Auswahl werden alle Eingabefelder des Abschnitts blockiert, und die Dauer des Ereignisses wird als ganzer Tag festgelegt, von **0:00 Uhr** des aktuellen Zellendatums bis **0:00 Uhr** des nächsten Tages. [Full day events](https://docs.dhtmlx.com/scheduler/samples/02_customization/12_full_day_event.html) -## Arten von Lightbox {#types-of-lightbox} +## Arten der Lightbox -Das Lightbox ist in zwei Varianten verfügbar: +Die Lightbox kann in einem von 2 Typen dargestellt werden: -- Standard (breit) -- Kurz +- Standard (breit); +- Kurz. -Im Standard-Skin ist nur das breite Lightbox verfügbar, während in den Skins 'glossy' oder 'classic' zwischen beiden Varianten gewählt werden kann. +Im Standard-Skin kann die Lightbox nur im Standard (breit) Typ dargestellt werden, während man im Skin 'glossy' oder 'classic' zwischen Typen wählen kann. -Um den bevorzugten Typ auszuwählen, verwenden Sie die Eigenschaft [wide_form](api/config/wide_form.md): +Um den gewünschten Typ festzulegen, verwenden Sie die Eigenschaft [wide_form](api/config/wide_form.md): ~~~js scheduler.config.wide_form = true; ~~~ -**Standard (breites) Lightbox**: +**Standard (breit) Lightbox**: ![scheduler_wide_form.png](/img/scheduler_wide_form.png) -**Kurzes Formular**: +**Kurze Form**: ![scheduler_standard_form.png](/img/scheduler_standard_form.png) -### Schaltfläche in der Abschnittsüberschrift +### Button im Abschnittskopf -Sie können eine benutzerdefinierte Schaltfläche zur Abschnittsüberschrift hinzufügen, indem Sie wie folgt vorgehen: +Es ist möglich, einen benutzerdefinierten Button im Abschnittskopf zu haben. Um einen Button in der Kopfzeile eines Abschnitts hinzuzufügen, führen Sie die folgenden Schritte aus: -- Fügen Sie die Eigenschaft 'button' zum Abschnittsobjekt hinzu: +- Weisen Sie dem Abschnittsobjekt die Eigenschaft **button** zu: ~~~js {name:"description", height:130, map_to:"text", type:"textarea", button:"help"} ~~~ -- Definieren Sie die Beschriftung für die Schaltfläche: +- Legen Sie die Bezeichnung für den Button fest: ~~~js -// 'help' entspricht dem Wert der Eigenschaft 'button' -scheduler.locale.labels.button_help = "Hilfebeschriftung"; +// 'help' is the value of the 'button' property +scheduler.locale.labels.button_help = "Help label"; ~~~ -- Geben Sie den Handler für Klicks auf die Schaltfläche an: +- Geben Sie den Handler von Button-Klicks an: -~~~ -scheduler.form_blocks.textarea.button_click="function(index,button,shead,sbody){" - // Ihr benutzerdefinierter Code hier +~~~js +scheduler.form_blocks.textarea.button_click = function(index,button,shead,sbody){ + // any custom code } ~~~ -Hierbei gilt: - -- **index** - (*number*) der nullbasierte Index des Abschnitts -- **button** - (*HTMLElement*) das Schaltflächenelement -- **shead** - (*HTMLElement*) das Abschnittsüberschrift-Element -- **sbody** - (*HTMLElement*) das Abschnittskörper-Element +wobei: + +- **index** - (*number*) der Abschnittsindex. Nullbasierte Nummerierung +- **button** - (*HTMLElement*) das HTML-Element des Buttons +- **shead** - (*HTMLElement*) das HTML-Element des Abschnittskopfes +- **sbody** - (*HTMLElement*) das HTML-Element des Abschnittsinhalts -Sie können das Bild der Schaltfläche mit dieser CSS-Klasse anpassen: +Sie können das für den Button verwendete Bild über die folgende CSS-Klasse definieren: -~~~js +~~~css .dhx_custom_button_help{ background-image:url(imgs/but_help.gif); } ~~~ -## Verknüpfung von Auswahl-Steuerelementen {#linkingselectcontrols} +## Verknüpfung von Auswahlelementen -Auswahl-Steuerelemente im Lightbox können voneinander abhängig gemacht werden. Dies wird mit der [onchange-Eigenschaft](guides/select.md#properties) des Auswahl-Steuerelements erreicht, wie unten gezeigt: +Sie können Auswahlelemente in der Lightbox voneinander abhängig machen. Verwenden Sie dazu die onchange-Eigenschaft des Auswahlelements, wie folgt: ~~~js -var update_select_options = function(select, options) { // Hilfsfunktion +const update_select_options = function(select, options) { // helper function select.options.length = 0; - for (var i="0;" ionchange-Ereignis wird ausgelöst, wenn der Benutzer eine andere Option im übergeordneten Abschnitt auswählt, wodurch die Optionen des untergeordneten Abschnitts entsprechend aktualisiert werden. +Das onchange-Ereignis wird ausgelöst, wenn der Benutzer die ausgewählte Option des übergeordneten Abschnitts ändert. Die Optionen des untergeordneten Abschnitts ändern sich entsprechend. -## Dynamisches Ändern der Lightbox-Abschnitte {#dynamic-changing-of-the-lightbox-sections} +## Dynamische Änderungen der Lightbox-Abschnitte -Es ist möglich, die Abschnitte des Lightbox dynamisch zu ändern. Das bedeutet, dass Sie Abschnitte des Lightbox basierend auf einer bestimmten Konfiguration ausblenden, blockieren oder anzeigen können. +Es besteht die Möglichkeit, die Lightbox-Abschnitte dynamisch zu ändern. Das bedeutet, dass die Abschnitte der Lightbox je nach konfigurierten Vorgaben ausgeblendet, blockiert oder angezeigt werden können. -Dafür können Sie die Methode [resetLightbox()](api/method/resetlightbox.md) verwenden. So gehen Sie vor: +Sie können die Lightbox-Abschnitte dynamisch über die Methode [resetLightbox()](api/method/resetlightbox.md) ändern. Zum Beispiel: -1. Erstellen Sie zunächst zwei Arrays, die unterschiedliche Steuerelement-Sets für das Lightbox definieren. +1. Erstellen Sie zwei Arrays mit der Lightbox-Konfiguration, die zwei verschiedene Satz von Steuerelementen enthalten. ~~~js -var full_lightbox = [ +const full_lightbox = [ { name: "description", height: 200, map_to: "text", type: "textarea", focus: true}, { name: "hidden", height: 23, map_to: "hidden", type: "textarea"}, { name: "time", height: 72, type: "time", map_to: "auto"} ]; -var restricted_lightbox = [ +const restricted_lightbox = [ { name: "description", height: 200, map_to: "text", type: "textarea", focus: true}, { name: "time", height: 72, type: "time", map_to: "auto"} ]; ~~~ -2. Implementieren Sie anschließend Folgendes: +2. Im nächsten Schritt müssen Sie folgende Schritte umsetzen: -- Rufen Sie vor dem Öffnen eines neuen Lightbox die Methode resetLightbox() auf, um die aktuellen Steuerelemente zu löschen und ein neues Lightbox mit dem gewünschten Steuerelement-Set zu erstellen. +- Bevor eine neue Lightbox angezeigt wird, rufen Sie die resetLightbox()-Methode auf, um den aktuellen Satz von Steuerelementen des Bearbeitungsformulars zu entfernen und ein neues Lightbox-Objekt mit einem anderen Satz von Steuerelementen zu erzeugen. -- Rufen Sie das Ereignisobjekt über seine ID ab und definieren Sie eine Bedingung, um zu entscheiden, welche Lightbox-Konfiguration angewendet wird. Im folgenden Beispiel wird das Attribut "restricted" als Bedingung verwendet. +- Holen Sie das Ereignisobjekt anhand seiner ID und geben Sie die Bedingung an, anhand der entschieden wird, welche Lightbox-Konfiguration angewendet wird. Im nachstehenden Beispiel wird die Bedingung über das Attribut "restricted" eingeführt. ~~~js scheduler.attachEvent("onBeforeLightbox", function(event_id) { scheduler.resetLightbox(); - var ev = scheduler.getEvent(event_id); + const ev = scheduler.getEvent(event_id); scheduler.config.lightbox.sections = (ev.restricted) ? restricted_lightbox : full_lightbox; return true; }); ~~~ -3. Die Eigenschaft 'restricted' des Ereignisses steuert, ob die "restricted_lightbox"-Konfiguration verwendet wird. Wenn sie nicht gesetzt ist, wird das vollständige Lightbox angezeigt. +3. Verwenden Sie die Eigenschaft 'restricted' des Ereignisses, um die Konfiguration "restricted_lightbox" anzuwenden. Andernfalls wird die vollständige Lightbox angezeigt. ~~~js -scheduler.init('scheduler_here', new Date(2017, 5, 30), "week"); +scheduler.init('scheduler_here', new Date(2027, 5, 30), "week"); scheduler.parse([ - { start_date: "2017-06-27 04:00", end_date: "2017-06-27 7:00", + { start_date: "2027-06-27 04:00", end_date: "2027-06-27 7:00", text: "Restricted event", hidden: "You won't see me", restricted: true }, - { start_date: "2017-06-29 05:00", end_date: "2017-06-29 11:00", + { start_date: "2027-06-29 05:00", end_date: "2027-06-29 11:00", text: "Full access", hidden: "Hidden text" } ]); ~~~ +![dinamicchanges_lightbox.png](/img/dinamicchanges_lightbox.png) -![/img/dinamicchanges_lightbox](/img/dinamicchanges_lightbox.png) - -[Dynamic changing of lightbox configurations](https://docs.dhtmlx.com/scheduler/samples/02_customization/29_changing_lightbox_configurations.html) +[Dynamic changing of lightbox configurations](https://docs.dhtmlx.com/scheduler/samples/02_customization/29_changing_lightbox_configurations.html) \ No newline at end of file diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides/limits.md b/i18n/de/docusaurus-plugin-content-docs/current/guides/limits.md index 537e17c5..d8080220 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/guides/limits.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/guides/limits.md @@ -1,16 +1,16 @@ --- -title: "Blockieren und Markieren von Daten" -sidebar_label: "Blockieren und Markieren von Daten" +title: "Blockieren und Markieren von Terminen" +sidebar_label: "Blockieren und Markieren von Terminen" --- -# Blockieren und Markieren von Daten +# Blockieren und Markieren von Terminen -Diese Bibliothek beinhaltet die **Limit**-Erweiterung, mit der Sie bestimmte Daten oder Zeiträume blockieren und hervorheben können. +Die Bibliothek bietet die **Limit**-Erweiterung, die es ermöglicht, bestimmte Termine oder Datumsbereiche zu blockieren und zu markieren (hervorzuheben). -Um mit dem Plugin zu starten, aktivieren Sie es einfach auf Ihrer Seite. +Um das Plugin zu verwenden, aktivieren Sie es auf der Seite. :::note -Hinweis: Wenn Sie die [Timeline-Ansicht](views/timeline.md) verwenden, sollte die 'limit'-Erweiterung vor der 'timeline'-Erweiterung aktiviert werden: +Hinweis, wenn Sie das [](views/timeline.md) verwenden, sollte die 'limit'-Erweiterung vor der 'timeline'-Erweiterung aktiviert sein: ::: ~~~js @@ -20,82 +20,81 @@ scheduler.plugins({ }); ~~~ -## Konfigurationsoptionen {#configurationoptions} +## Konfigurationsoptionen -Hier sind die verfügbaren Konfigurationsoptionen dieser Erweiterung: +Die Erweiterung bietet Ihnen folgende Konfigurationsoptionen: - -- [display_marked_timespans](api/config/display_marked_timespans.md) - steuert, ob markierte (blockierte) Zeitspannen im Scheduler hervorgehoben werden -- [check_limits](api/config/check_limits.md) - schaltet die Limit-Prüfung ein oder aus -- [mark_now](api/config/mark_now.md) - steuert den Marker, der die aktuelle Zeit anzeigt -- [now_date](api/config/now_date.md) - legt das Datum fest, das von der Option [mark_now](api/config/mark_now.md) verwendet wird -- [limit_end](api/config/limit_end.md) - definiert das Endlimit des erlaubten Datumsbereichs -- [limit_start](api/config/limit_start.md) - definiert das Startlimit des erlaubten Datumsbereichs -- [limit_view](api/config/limit_view.md) - beschränkt das Anzeigen von Ereignissen +- [display_marked_timespans](api/config/display_marked_timespans.md) - definiert, ob die markierten (blockierten) Zeitspannen im Scheduler hervorgehoben werden sollen +- [check_limits](api/config/check_limits.md) - aktiviert bzw. deaktiviert die Überprüfung von Limits +- [mark_now](api/config/mark_now.md) - aktiviert/deaktiviert den Marker, der die aktuelle Zeit anzeigt +- [now_date](api/config/now_date.md) - setzt das Datum für die Option [mark_now](api/config/mark_now.md) +- [limit_end](api/config/limit_end.md) - setzt das Endlimit des zulässigen Datumsbereichs +- [limit_start](api/config/limit_start.md) - setzt das Startlimit des zulässigen Datumsbereichs +- [limit_view](api/config/limit_view.md) - begrenzt das Anzeigen von Ereignissen [Current time marking](https://docs.dhtmlx.com/scheduler/samples/02_customization/23_current_time.html) -## Verwandte Ereignisse {#relatedevents} +## Zugehörige Ereignisse -Wenn jemand versucht, ein Ereignis an einem nicht erlaubten Datum zu erstellen oder zu ändern, wird das Ereignis [onLimitViolation](api/event/onlimitviolation.md) ausgelöst. +Wenn der Scheduler versucht, ein Ereignis mit einem nicht zulässigen Datum zu erstellen oder zu ändern, wird das Ereignis [onLimitViolation](api/event/onlimitviolation.md) generiert. -## Wie blockiert man bestimmte Daten? {#how-to-block-certain-dates} +## Wie blockiert man bestimmte Termine? -Es gibt verschiedene Möglichkeiten, Limits im Scheduler zu setzen: +Es gibt mehrere Methoden, mit denen Sie im Scheduler ein Limit festlegen können: -- [addMarkedTimespan](api/method/addmarkedtimespan.md) - markiert Daten und kann sie mit benutzerdefinierten Stiloptionen blockieren -- [markTimespan](api/method/marktimespan.md) - markiert oder blockiert Daten mit Standard- oder benutzerdefinierten Stilen; die Markierung wird nach jedem internen Update entfernt, nützlich zum Hervorheben +- [addMarkedTimespan](api/method/addmarkedtimespan.md) - markiert Termine, aber mit bestimmten Einstellungen bewirkt dies eine Blockierung (erlaubt das Festlegen eines benutzerdefinierten Stylings für das Limit) +- [markTimespan](api/method/marktimespan.md) - markiert und/oder blockiert Datum(e), indem der Standard- oder ein benutzerdefinierter Stil darauf angewendet wird. Die Markierung wird unmittelbar nach jeder internen Aktualisierung der App aufgehoben. Kann zum Hervorheben verwendet werden [Blocking dates](https://docs.dhtmlx.com/scheduler/samples/03_extensions/25_advanced_limitation.html) -## Wie markiert man bestimmte Daten? {#how-to-mark-certain-dates} +## Wie markiert man bestimmte Termine? -Sie können diese beiden Methoden verwenden, um bestimmte Daten hervorzuheben: +Es gibt zwei Methoden, die verwendet werden können, um die angegebenen Datum(e) zu markieren: -- [addMarkedTimespan](api/method/addmarkedtimespan.md) - markiert Daten und kann sie mit benutzerdefinierten Stiloptionen blockieren -- [markTimespan](api/method/marktimespan.md) - markiert oder blockiert Daten mit Standard- oder benutzerdefinierten Stilen; die Markierung wird nach jedem internen Update entfernt, nützlich zum Hervorheben +- [addMarkedTimespan](api/method/addmarkedtimespan.md) - markiert Termine, aber mit bestimmten Einstellungen bewirkt dies eine Blockierung (erlaubt das Festlegen eines benutzerdefinierten Stylings für das Limit) +- [markTimespan](api/method/marktimespan.md) - markiert und/oder blockiert Datum(e), indem der Standard- oder ein benutzerdefinierter Stil darauf angewendet wird. Die Markierung wird unmittelbar nach jeder internen Aktualisierung der App aufgehoben. Kann zum Hervorheben verwendet werden [Handling the pointer highlighting](https://docs.dhtmlx.com/scheduler/samples/09_api/06_hightlight_and_single_click_create.html) -## Markierung/Blockierung entfernen {#removingmarkingblocking} +## Entfernen von Markierung/Blockierung -Um aktuell markierte oder blockierte Zeitspannen zu entfernen, können Sie diese Methoden verwenden: +Es gibt mehrere Methoden, mit denen Sie die derzeit markierten/blokkierten Zeitspannen entfernen können: -- [deleteMarkedTimespan](api/method/deletemarkedtimespan.md) - entfernt Markierungen oder Blockierungen, die mit [addMarkedTimespan](api/method/addmarkedtimespan.md) gesetzt wurden -- [unmarkTimespan](api/method/unmarktimespan.md) - entfernt Markierungen oder Blockierungen, die mit [markTimespan](api/method/marktimespan.md) gesetzt wurden +- [deleteMarkedTimespan](api/method/deletemarkedtimespan.md) - entfernt Markierung/Blockierung, festgelegt durch die Methode [addMarkedTimespan](api/method/addmarkedtimespan.md) +- [unmarkTimespan](api/method/unmarktimespan.md) - entfernt Markierung/Blockierung, festgelegt durch die Methode [markTimespan](api/method/marktimespan.md) [Handling the pointer highlighting](https://docs.dhtmlx.com/scheduler/samples/09_api/06_hightlight_and_single_click_create.html) -## Blockierungspriorität {#blocking-priority} +## Blockierpriorität -Wenn mehrere Blockierungsmethoden für verschiedene Bereiche verwendet werden, funktioniert die Blockierungspriorität wie folgt (von höchster zu niedrigster): +Wenn Sie die 'Blocking'-Methoden mehrmals aufrufen und verschiedene Bereiche blockieren, folgt die Blockierung dieser Priorität (von hoch nach niedrig): -1. Daten, die mit Date()-Objekten für bestimmte Elemente angegeben werden; -2. Daten für bestimmte Elemente (wenn der **sections**-Parameter gesetzt ist); -3. Daten, die mit Date()-Objekten angegeben werden; +1. Daten, die durch Date()-Objekte für bestimmte Elemente festgelegt sind; +2. Daten für bestimmte Elemente (wenn der **sections**-Parameter definiert ist); +3. Daten, die durch Date()-Objekte festgelegt wurden; 4. Andere Daten. -- Blockierungen oder Markierungen mit höherer Priorität überschreiben solche mit niedrigerer Priorität, wenn sie denselben **type** haben. -- Methoden mit gleicher Priorität (zeitlich überlappend) werden gemeinsam angewendet. +- Eine Blockierung/Markierung mit höherer Priorität überschreibt die mit niedrigerer Priorität, sofern sie denselben **type** haben. +- Mehrere Blockierungs-/Markierungsmethoden mit derselben Priorität (im gleichen Zeitslot gelegen) werden gleichzeitig angewendet. -Beispiel: +Zum Beispiel: ~~~js -scheduler.addMarkedTimespan({ // blockiert den 4. Juli 2012 (Mittwoch). - days: new Date(2019, 7, 4), +scheduler.addMarkedTimespan({ // blockiert den 4. Juli 2027 (Mittwoch). + days: new Date(2027, 7, 4), zones: "fullday", type: "dhx_time_block", css: "red_section" // Zugewiesene CSS-Klasse @@ -114,21 +113,20 @@ scheduler.addMarkedTimespan({ css: "gray_section", // Zugewiesene CSS-Klasse sections: { timeline: 2} }); - ~~~ -Nach diesen Aufrufen verhält sich der Scheduler wie folgt: +Als Ergebniss der Aufrufe dieser Methoden erhalten Sie Folgendes: -1. Zuerst werden **jeder Sonntag und Mittwoch für das Element mit id="2" in der Timeline-Ansicht** blockiert und grau eingefärbt. -2. Danach wird **der 4. Juli 2012** blockiert und rot eingefärbt. -3. Schließlich werden **jeder Sonntag, Montag und Mittwoch** blockiert und blau eingefärbt. +1. Zuerst wird der Scheduler jedes Sonntag und Mittwoch für das Element (id="2") in der Timeline-Ansicht blockieren und diese grau färben. +2. Dann wird der 4. Juli 2012 blockiert und rot gefärbt. +3. Schließlich wird jeder Sonntag, Montag und Mittwoch blockiert und blau gefärbt. ![limits_priority.png](/img/limits_priority.png) -Wenn Sie alle Marker unabhängig von ihrer Priorität anzeigen möchten, können Sie die Option [overwrite_marked_timespans](api/config/overwrite_marked_timespans.md) wie folgt setzen: +Um dieses Verhalten zu ändern und alle Marker unabhängig von ihrer Priorität anzuzeigen, können Sie die Einstellung [overwrite_marked_timespans](api/config/overwrite_marked_timespans.md) verwenden: ~~~js scheduler.config.overwrite_marked_timespans_config = false; -~~~ +~~~ \ No newline at end of file diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides/live-update.md b/i18n/de/docusaurus-plugin-content-docs/current/guides/live-update.md index ffda065b..f3d1f718 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/guides/live-update.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/guides/live-update.md @@ -1,51 +1,55 @@ --- -title: "Live Updates Modus (Legacy)" -sidebar_label: "Live Updates Modus (Legacy)" +title: "Live Updates-Modus (Legacy)" +sidebar_label: "Live Updates-Modus (Legacy)" --- -# Live Updates Modus (Legacy) +# Live Updates-Modus (Legacy) :::warning -Dieser Artikel behandelt die Legacy-Version des Live Updates Modus für DHTMLX Scheduler. Informationen zur neuesten Version finden Sie [hier](guides/multiuser-live-updates.md). +Die beschriebene Funktionalität ist veraltet und wird nicht mehr gepflegt. ::: -Der Live Updates Modus hält Daten in Echtzeit zwischen den Benutzern synchron. +:::note +Dieser Artikel bezieht sich auf die Legacy-Implementierung des Live Updates-Modus für den DHTMLX Scheduler. Details zur aktuellen Version finden Sie [hier](guides/multiuser-live-updates.md). +::: + +Live Update ist ein Modus, der synchrone Datenaktualisierungen in Echtzeit bereitstellt. -Sobald ein Benutzer eine Änderung vornimmt, erscheint sie sofort auch bei allen anderen. +Wenn ein Benutzer eine Änderung vornimmt, wird sie allen anderen sofort sichtbar. -Dieser Modus verwendet die `Faye` Socket-Bibliothek, um schnelle und flexible Aktualisierungen zu ermöglichen, ohne dass die Seite neu geladen werden muss (nur die relevante Komponente wird aktualisiert). +Der Modus verwendet die `Faye`-Socket-Bibliothek, um den Prozess so schnell und flexibel wie möglich zu gestalten, und erfordert keine Seitenaktualisierung (er aktualisiert nur die Komponente, auf die er angewendet wird). -Hier finden Sie eine einfache Anleitung, um mit dieser Funktion zu beginnen. +In diesem Artikel geben wir Ihnen eine Schritt-für-Schritt-Anleitung, um schnell in das Thema einzusteigen. ## Grundprinzip -Live Updates funktionieren, indem Änderungen von einem verbundenen Client an alle anderen übertragen werden. Dies geschieht über eine WebSocket-Verbindung, die eine bidirektionale Kommunikation zwischen Clients und Backend ermöglicht. +Live-Updates werden erreicht, indem Änderungen, die von einem verbundenen Client vorgenommen wurden, an alle anderen verbundenen Clients übertragen werden. Dies geschieht durch die Nutzung einer WebSocket-Verbindung für den zweiseitigen Nachrichtenaustausch zwischen verbundenen Clients und dem Backend. -In dieser Version erweitert das Live Updates Modul das `DataProcessor` Modul, um die `Faye` Client-Bibliothek zu verwenden, zusammen mit einer Backend-App, die die Nachrichtenverteilung zwischen den Clients übernimmt. +In dieser Version des Live Updates-Moduls wird es umgesetzt, indem das `DataProcessor`-Modul erweitert wird, um den `Faye`-Client zu verwenden, zusammen mit einer zusätzlichen Backend-Anwendung, die Nachrichten zwischen Clients weiterleitet. -Das Setup besteht aus drei Komponenten: +Die Lösung besteht aus drei Teilen: -1. Das **Frontend** mit Scheduler und dem `DataProcessor` Modul. -2. Das **Backend**, das CRUD-Operationen auf der Datenbank ausführt. -3. Der **Live-Updates-Hub**, der die Client-Verbindungen verwaltet. +1. Das **Frontend** mit Scheduler und dem `DataProcessor`-Modul. +2. Das **Backend**, das CRUD-Operationen auf dem persistenten Speicher implementiert. +3. Der **Live-Updates-Hub**, der für das Verbinden der Clients verantwortlich ist. -Wenn ein Benutzer Daten aktualisiert: +Wenn ein Benutzer Änderungen an den Daten vornimmt: - Das **Frontend** sendet das Update an das **Backend**. - Gleichzeitig sendet das **Frontend** dasselbe Update an den **Live-Updates-Hub**. -- Der **Live-Updates-Hub** verteilt das Update an alle verbundenen Clients. -- Beim Empfang des Updates vom **Live-Updates-Hub** übernimmt das **Frontend** die Änderung in die Scheduler-Daten, ohne dass Backend-CRUD-Operationen ausgelöst werden. +- Der **Live-Updates-Hub** verbreitet das Update an alle verbundenen Clients. +- Wenn das **Frontend** das Update vom **Live-Updates-Hub** erhält, wendet es dieses auf die Scheduler-Daten an, ohne Änderungen am CRUD-Backend auszulösen. -## Vorbereitungen +## Bevor Sie beginnen -Um diesem Tutorial zu folgen, benötigen Sie eine funktionierende dhtmlxScheduler-App mit serverseitiger Logik, die Daten aus einer Datenbank lädt und Änderungen zurückspeichert. (Weitere Details [hier](integrations/howtostart-guides.md).) +Um dieses Tutorial zu starten, muss Ihre dhtmlxScheduler-Anwendung vollständig funktionsfähig sein und mit serverseitiger Logik integriert sein – eine, die Daten aus einer Datenbank lädt und Änderungen wieder speichert. (Details finden Sie [hier](integrations/howtostart-guides.md).) -Ein einfaches Beispiel könnte so aussehen: +Ein einfaches Beispiel einer solchen Anwendung könnte folgendermaßen aussehen: ~~~js ~~~ -## Live Updates konfigurieren +## Konfiguration von Live Updates :::note -Diese Live Updates Implementierung ist veraltet und nicht Teil des Hauptpakets. +Diese Implementierung von Live Updates ist veraltet und ist nicht im Hauptpaket enthalten. ::: ### Schritt 1. Einrichtung -1. Laden Sie das **Live Updates Plugin** für Scheduler herunter: [download link](https://files.dhtmlx.com/30d/20deb2ff205dc16bc94a7e9fcef4c5fe/live_updates.zip) -2. Laden Sie die **Live Updates Backend-App** herunter: [download link](https://files.dhtmlx.com/30d/57084e02b121f14bb14b6734d465ad41/websocket-backend.zip) -3. Starten Sie das **Live Updates Backend**, indem Sie den Anweisungen in der Readme-Datei folgen. +1. Laden Sie das **Live Updates-Plugin** für den Scheduler herunter: [Download-Link](https://files.dhtmlx.com/30d/20deb2ff205dc16bc94a7e9fcef4c5fe/live_updates.zip) +2. Laden Sie die **Live Updates Backend**-Anwendung herunter: [Download-Link](https://files.dhtmlx.com/30d/57084e02b121f14bb14b6734d465ad41/websocket-backend.zip) +3. Starten Sie das **Live Updates Backend** gemäß den Anweisungen in der beiliegenden Readme-Datei. -### Schritt 2. Front-End konfigurieren +### Schritt 2. Konfiguration des Frontends -Um den Live Update Modus zu aktivieren, fügen Sie der Frontend-App zwei zusätzliche Dateien hinzu: +Um mit dem Live-Update-Modus zu arbeiten, fügen Sie zwei zusätzliche Dateien in die Frontend-App ein: -- **live_updates.js** - die Plugin-Datei aus dem vorherigen Schritt -- **client.js** - eine Datei, die dynamisch von der WebSocket Backend-App generiert wird +- **live_updates.js** - die in Schritt 1 heruntergeladene Datei +- **client.js** - eine Datei, die von der WebSocket-Backend-Anwendung dynamisch erzeugt wird ~~~js ~~~ -Dieses Beispiel verbindet sich direkt mit der WebSocket-App. In der Regel ist es besser, diese URL über Ihre Hauptanwendung zu leiten, um die Adresse und den Port der Nebenanwendung zu verbergen. Dies kann durch das Einrichten eines Reverse Proxy erreicht werden. +Im obigen Code-Beispiel verbinden wir uns direkt mit der WebSocket-Anwendung. In der Regel möchten Sie diese URL jedoch durch Ihre Hauptanwendung routen, um die Adresse und den Port der sekundären Anwendung nicht offenzulegen. Dies kann durch den Einsatz eines Reverse-Proxy erfolgen. -**Anfragen durch die Hauptanwendung weiterleiten (Node.js):** +**Anfragen durch die Hauptanwendung (Node.js) weiterleiten:** ~~~js const httpProxy = require('http-proxy'); @@ -95,16 +99,16 @@ module.exports = function(app){ } ~~~ -**Front-End:** +**Frontend:** ~~~js ~~~ -### Schritt 3. Live Updates aktivieren +### Schritt 3. Aktivierung von Live Updates -Aktivieren Sie den Modus, indem Sie die Methode **live_updates()** auf der `DataProcessor` Instanz aufrufen. Stellen Sie sicher, dass der `DataProcessor` zuerst initialisiert wurde. Die Methode erwartet die WebSocket-Einstiegspunkt-URL als Parameter. +Der Modus wird aktiviert, indem die Methode **live_updates()** auf der `DataProcessor`-Instanz aufgerufen wird. Damit dies funktioniert, muss der `DataProcessor` zuvor initialisiert sein. Als Parameter nimmt die Methode die URL des WebSocket-Einstiegspunkts. ~~~js const dp = scheduler.createDataProcessor({ @@ -115,4 +119,4 @@ const dp = scheduler.createDataProcessor({ dp.live_updates("/liveUpdates"); ~~~ -Eine vollständige Demo-Anwendung können Sie [hier](https://files.dhtmlx.com/30d/0aea2facd959a8300bf7caec3f5a7f42/dhtmlxscheduler-live-updates.zip) herunterladen. +Sie können eine vollständige Demo-Anwendung [hier](https://files.dhtmlx.com/30d/0aea2facd959a8300bf7caec3f5a7f42/dhtmlxscheduler-live-updates.zip) herunterladen. \ No newline at end of file diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides/loading-data.md b/i18n/de/docusaurus-plugin-content-docs/current/guides/loading-data.md index 50d37d6c..8fbee37a 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/guides/loading-data.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/guides/loading-data.md @@ -5,331 +5,346 @@ sidebar_label: "Daten laden" # Daten laden -dhtmlxScheduler unterstützt das Laden von Daten in drei Formaten: +dhtmlxScheduler kann Daten in mehreren Formaten laden. Die meisten Anwendungen verwenden **JSON**. **iCalendar (.ics)** und **XML** werden ebenfalls zur Kompatibilität oder für Import-Szenarien unterstützt. -1. JSON; -2. XML; -3. ICal. +### Verwandte Anleitungen -[Beispiele für Datenformate](guides/data-formats.md) +- [Überblick über Datenformate](guides/data-formats.md) -## Laden von Daten aus einem Inline-Datensatz {#loadingdatafromaninlinedataset} -Um Daten direkt aus einem Inline-Datensatz zu laden, wird die Methode [parse](api/method/parse.md) verwendet: +## Daten aus einem Inline-Datensatz laden + +Um Daten aus einem Inline-Datensatz zu laden, verwenden Sie die [`parse()`](api/method/parse.md) Methode: ~~~js -scheduler.init('scheduler_here',new Date(2009,10,1),"month"); +scheduler.init("scheduler_here", new Date(2027, 4, 1), "month"); ... scheduler.parse([ - {text:"Meeting", start_date:"2019-04-11 14:00", end_date:"2019-04-11 17:00"}, - {text:"Conference", start_date:"2019-04-15 12:00", end_date:"2019-04-18 19:00"}, - {text:"Interview", start_date:"2019-04-24 09:00", end_date:"2019-04-24 10:00"} -],"json"); - + { id: "1", text: "Meeting", start_date: "2027-05-11 14:00", end_date: "2027-05-11 17:00" }, + { id: "2", text: "Conference", start_date: "2027-05-15 12:00", end_date: "2027-05-18 19:00" }, + { id: "3", text: "Interview", start_date: "2027-05-24 09:00", end_date: "2027-05-24 10:00" } +]); ~~~ +### Verwandte Beispiele + +- [Ereignisse als Kaskade anzeigen](https://docs.dhtmlx.com/scheduler/samples/02_customization/24_cascade_event_display.html) + +### Verwandte API + +- [`parse()`](api/method/parse.md) -[Displaying events as a cascade](https://docs.dhtmlx.com/scheduler/samples/02_customization/24_cascade_event_display.html) +### Verwandte Anleitungen +- [Datenformate](guides/data-formats.md) -## Laden von Daten aus einer Datei {#loadingdatafromadatafile} +## Daten aus einer Datei laden -Um Daten aus einer externen Datei zu laden, wird die Methode [load](api/method/load.md) verwendet: +Um Daten aus einer Datei zu laden, verwenden Sie die [`load()`](api/method/load.md) Methode: ~~~js -scheduler.init('scheduler_here',new Date(2018,10,1),"month"); +scheduler.init("scheduler_here", new Date(2027, 4, 1), "month"); ... -scheduler.load("data.json"); //Laden von Daten aus einer Datei +scheduler.load("data.json"); // loading data from a file ~~~ -[Basic initialization](https://docs.dhtmlx.com/scheduler/samples/01_initialization_loading/01_basic_init.html) +### Verwandte Beispiele +- [Grundlegende Initialisierung](https://docs.dhtmlx.com/scheduler/samples/01_initialization_loading/01_basic_init.html) -## Laden von Daten aus einer Datenbank {#loadingdatafromadatabase} -------------------------------------- +### Verwandte API -Es gibt zwei Ansätze, um Daten aus einer Datenbank zu laden. Beide erfordern die Umsetzung auf Client- und Serverseite. +- [`load()`](api/method/load.md) -1) Der erste Ansatz nutzt eine REST-API zur Kommunikation mit dem Server. +### Verwandte Anleitungen -- Die Implementierung auf Serverseite hängt vom gewählten Framework ab. -Zum Beispiel wird bei Node.js eine Serverroute für die URL hinzugefügt, an die Scheduler seine AJAX-Anfrage sendet. +- [Datenformate](guides/data-formats.md) -Diese Route erzeugt eine JSON-Antwort. +## Daten aus dem Backend laden + +Laden Sie Daten von Ihrem Backend, indem Sie einen REST-Endpunkt bereitstellen, der Scheduler-Ereignisse im JSON-Format zurückgibt. + +- Die serverseitige Implementierung hängt von Ihrem Stack ab. Beispielsweise können Sie in Node.js eine Route hinzufügen, die Ereignisdaten zurückgibt: ~~~js -app.get('/data', function(req, res){ - db.event.find().toArray(function(err, data){ - //set id property for all records - for (var i = 0; i < data.length; i++) - data[i].id = data[i]._id; - - //output response - res.send(data); - }); +app.get("/data", async (request, response) => { + const events = await db.event.find().toArray(); + response.json(events); }); ~~~ -- Auf der Client-Seite wird die Methode [load](api/method/load.md) mit der URL verwendet, von der Scheduler die Daten anfordert: +- Auf der Client-Seite rufen Sie [`load()`](api/method/load.md) mit der Daten-URL auf: -~~~js title="Loading from a database. Client-side code" -scheduler.init('scheduler_here', new Date(), "month"); -scheduler.load("apiUrl"); +~~~js +scheduler.init("scheduler_here", new Date(2027, 4, 1), "month"); +scheduler.load("/data"); ~~~ :::note -Ausführlichere Informationen zur Server-Integration mit der REST-API finden Sie im Artikel [Serverseitige Integration](guides/server-integration.md). +Für das Speichern von Änderungen zurück an den Server verwenden Sie [`createDataProcessor()`](api/method/createdataprocessor.md). Siehe [Serverseitige Integration](guides/server-integration.md). ::: -2) Der zweite Ansatz beinhaltet das Laden von Daten aus Datenbanktabellen mit dem [PHP Connector](https://docs.dhtmlx.com/connector__php__index.html). - -- Auf der Serverseite wird ein Skript implementiert, das Daten im XML- oder JSON-Format zurückgibt: - -~~~js title="Static loading from db. Server-side code" -include ('dhtmlxConnector/codebase/scheduler_connector.php'); - -$res="mysql_connect(""localhost","root",""); -mysql_select_db("sampleDB"); - -$calendar = new SchedulerConnector($res); -$calendar->render_table("events","id","event_start,event_end,text","type"); -~~~ +### Verwandte API -- Auf der Client-Seite wird die Methode [load](api/method/load.md) mit dem Pfad zum Server-Skript verwendet: - -~~~js title="Static loading from db. Client-side code" -scheduler.init('scheduler_here', new Date(), "month"); -scheduler.load("events.php"); -~~~ +- [`createDataProcessor()`](api/method/createdataprocessor.md) -:::note -Weitere Details finden Sie im [dhtmlxScheduler mit dhtmlxConnector](integrations/other/howtostart-connector.md) Leitfaden. -::: +### Verwandte Anleitungen -## Laden von Daten aus mehreren Quellen {#loadingdatafrommultiplesources} +- [Serverseitige Integration](guides/server-integration.md) -Um Daten aus mehreren Quellen zu laden, steht die **multisource**-Erweiterung zur Verfügung: +## Daten aus mehreren Quellen laden + +Um Daten aus mehreren Quellen zu laden, rufen Sie die benötigten Endpunkte ab und kombinieren Sie die Ergebnisse, bevor Sie [`parse()`](api/method/parse.md) aufrufen: ~~~js -scheduler.plugins({ - multisource: true +Promise.all([ + fetch("/api/events").then((response) => response.json()), + fetch("/api/holidays").then((response) => response.json()) +]).then(([events, holidays]) => { + scheduler.parse([...events, ...holidays]); }); ~~~ -:::note -Mehrere Quellen können sowohl für statisches als auch für dynamisches Laden verwendet werden. -::: - -Nach Einbindung der entsprechenden Datei kann die Methode [load](api/method/load.md) ein Array von Quellen akzeptieren: +### Verwandte API -~~~js -scheduler.load(["first/source/some","second/source/other"]); -~~~ +- [`parse()`](api/method/parse.md) -## Dateneigenschaften {#dataproperties} +### Verwandte Anleitungen -### Pflichtfelder +- [Datenformate](guides/data-formats.md) -Datenelemente benötigen mindestens diese drei Eigenschaften, um korrekt geparst zu werden: +## Daten-Eigenschaften -- **start_date** - (*string*) das Startdatum des Ereignisses; -- **end_date** - (*string*) das Enddatum des Ereignisses; -- **text** - (*string*) die Ereignisbeschreibung. +### Obligatorische Eigenschaften -Beim Laden aus einer Datenbank ist eine zusätzliche Pflichtangabe erforderlich: +Damit korrekt geparst werden kann, muss jedes Ereignis die folgenden Eigenschaften enthalten: -- **id** - (*string, number*) die Ereignis-ID. +- **id** - (*string|number*) eine eindeutige Ereignis-ID +- **start_date** - (*date|string*) das Startdatum des Ereignisses +- **end_date** - (*date|string*) das Enddatum des Ereignisses +- **text** - (*string*) der Titel/ die Beschreibung des Ereignisses -Standardmäßig verwenden JSON- und XML-Daten das Datumsformat **'%Y-%m-%d %H:%i'** (siehe [Spezifikation des Datumsformats](guides/settings-format.md)). +Das Standard-Datumsformat für JSON- und XML-Daten ist **'%Y-%m-%d %H:%i'** (siehe die [Datumsformat-Spezifikation](guides/settings-format.md)) - Um es zu ändern, verwenden Sie die Option [date_format](api/config/date_format.md). +Um es zu ändern, verwenden Sie die Konfigurationsoption [`date_format`](api/config/date_format.md). ~~~js -scheduler.config.date_format="%Y-%m-%d %H:%i"; +scheduler.config.date_format = "%Y-%m-%d %H:%i"; ... -scheduler.init('scheduler_here', new Date(2019, 3, 18), "week"); +scheduler.init("scheduler_here", new Date(2027, 4, 18), "week"); ~~~ ### Benutzerdefinierte Eigenschaften -Neben den erforderlichen Feldern können Datenelementen benutzerdefinierte Eigenschaften hinzugefügt werden. Diese zusätzlichen Eigenschaften werden als Strings geparst und können nach Bedarf auf der Client-Seite verwendet werden. +Sie sind nicht auf die oben aufgeführten Pflicht-Eigenschaften beschränkt und können beliebige benutzerdefinierte Eigenschaften zu Dateneinträgen hinzufügen. +Zusätzliche Daten-Eigenschaften werden als Strings geparst und auf der Client-Seite geladen, wo Sie sie nach Bedarf verwenden können. -Beispiele für Daten mit benutzerdefinierten Eigenschaften finden Sie [hier](guides/data-formats.md#datawithcustomproperties). +Siehe Beispiele von Daten mit benutzerdefinierten Eigenschaften [hier](guides/data-formats.md) -## Datenbankstruktur {#databasestructure} +### Verwandte API -Bei der Einrichtung einer Datenbank für Scheduler-Ereignisse wird folgende Struktur erwartet: +- [`date_format`](api/config/date_format.md) -- **events-Tabelle** - enthält Scheduler-Ereignisse - - **id** - (*string/int/guid*) - Ereignis-ID. Primärschlüssel mit Auto-Inkrement. - - **start_date** - (*DateTime*) - Startdatum des Ereignisses, nicht null. - - **end_date** - (*DateTime*) - Enddatum des Ereignisses, nicht null. - - **text** - (*string*) - Ereignisbeschreibung. +### Verwandte Anleitungen -Für wiederkehrende Ereignisse werden zusätzliche Spalten benötigt: +- [Ereignis-Objekt](guides/event-object-operations.md) -- **events-Tabelle** - enthält Scheduler-Ereignisse - - **id** - (*string/int/guid*) - Ereignis-ID. Primärschlüssel mit Auto-Inkrement. - - **start_date** - (*DateTime*) - Startdatum des Ereignisses, nicht null. - - **end_date** - (*DateTime*) - Enddatum des Ereignisses, nicht null. - - **text** - (*string*) - Ereignisbeschreibung. - - **event_pid** - (*string/int/guid*) - Referenz auf die ID der übergeordneten Ereignisserie. Kann leer oder null sein (leerer String, Null). - - **event_length** - (*string/bigint*) - Ereignisdauer oder Zeitstempel einer geänderten Instanz. Kann leer oder null sein (leerer String, Null). Maximale Länge (bei String-Werten) ist 10. - - **rec_type** - (*string*) - Wiederholungsregel. Kann leer sein oder Standardwert leerer String. Maximale Länge ist 50. +## Datenbankstruktur -Weitere Spalten können nach Bedarf hinzugefügt werden; sie sind über die Client-API zugänglich. +Wenn Sie eine Datenbank einrichten, ergibt sich die erwartete Struktur für Scheduler-Ereignisse wie folgt: -## Dynamisches Laden {#dynamic-loading} +- **events table** - spezifiziert Scheduler-Ereignisse +- **id** - (*string/int/guid*) die Ereignis-ID. Primärschlüssel, automatisch inkrementiert. +- **start_date** - (*DateTime*) das Startdatum des Ereignisses, nicht nullable. +- **end_date** - (*DateTime*) das Enddatum des Ereignisses, nicht nullable. +- **text** - (*string*) die Beschreibung einer Aufgabe. -Standardmäßig lädt dhtmlxScheduler alle Daten auf einmal, was bei großen Datenmengen ineffizient sein kann. Mit dynamischem Laden können Daten in Teilen geladen werden, die auf den aktuell sichtbaren Bereich beschränkt sind. +Wenn Sie wiederkehrende Ereignisse haben, fügen Sie folgende Felder hinzu: + +- **rrule** - (*string*) Wiederholungsregel im RFC-5545-Format +- **duration** - (*number*) Dauer jeder Vorkommnis in Sekunden +- **recurring_event_id** - (*string/int/guid*) übergeordnete Serien-ID für geänderte/gelöschte Vorkommnisse +- **original_start** - (*DateTime*) ursprüngliches Startdatum des bearbeiteten/gelöschten Vorkommens +- **deleted** - (*boolean*) markiert gelöschte Vorkommnisse + +Sie können beliebige zusätzliche Spalten definieren, sie können auf den Client geladen und der client-seitigen API zur Verfügung gestellt werden. + +### Verwandte Guides + +- [Wiederkehrende Ereignisse](guides/recurring-events.md) + +## Dynamisches Laden + +Standardmäßig lädt dhtmlxScheduler alle Daten auf einmal. Das kann problematisch werden, wenn Sie große Ereignis-Sammlungen verwenden. +In solchen Situationen können Sie den dynamischen Ladevorgang verwenden und Daten schrittweise laden, die erforderlich sind, um den aktuell sichtbaren Bereich des Schedulers auszufüllen. ### Technik -Aktivieren Sie das dynamische Laden durch Aufruf der Methode [setLoadMode](api/method/setloadmode.md): -~~~js title="Enabling the dynamic loading" +Um das dynamische Laden zu aktivieren, rufen Sie die [`setLoadMode()`](api/method/setloadmode.md) Methode auf: + +~~~js scheduler.setLoadMode("month"); -scheduler.load("some.php"); +scheduler.load("/api/events"); ~~~ -Die Methode akzeptiert einen Lade-Modus, der die zu ladende Datenmenge festlegt: *day, week, month* oder *year.* - -Beispielsweise lädt der Modus 'week' nur Daten für die aktuelle Woche und lädt bei Bedarf weitere Daten nach. +Als Parameter nimmt die Methode den Lademodus, der die Größe der zu ladenden Daten definiert: *day, week, month oder year.* +Zum Beispiel, wenn Sie den Modus 'week' festlegen, wird der Scheduler Daten nur für die aktuelle Woche anfordern und die verbleibenden bei Bedarf nachladen. -#### Funktionsweise der Lademodi +#### Wie Lade-Modi funktionieren -Lademodi bestimmen das Intervall der geladenen Daten für den ausgewählten Zeitraum. Zum Beispiel beim Öffnen der Wochenansicht für Daten vom 29.01.2018 bis 05.02.2018: +Die vordefinierten Lade-Modi legen das Intervall fest, in dem Daten innerhalb des gesetzten Zeitraums geladen werden. Zum Beispiel öffnen Sie die Wochenansicht des Timers für folgende Daten: von 2027-02-02 bis 2027-02-09. +Je nach gewähltem Modus verläuft das dynamische Laden folgendermaßen: -- Für den "day"-Modus +- für den "day"-Modus ~~~js scheduler.setLoadMode("day"); ~~~ -Scheduler fordert Daten tageweise an, z.B. vom 29.01.2018 bis 05.02.2018. +Der Scheduler wird Daten pro Tag anfordern, z. B. von 2027-02-02 bis 2027-02-09. -- Für den "month"-Modus +- für den "month"-Modus ~~~js scheduler.setLoadMode("month"); ~~~ -Scheduler fordert Daten für volle Monate an, z.B. vom 01.01.2018 bis 01.03.2018. +Der Scheduler wird Daten nach ganzen Monaten anfordern, z. B. von 2027-02-01 bis 2027-03-01. -- Für den "year"-Modus +- für den "year"-Modus ~~~js scheduler.setLoadMode("year"); ~~~ -Scheduler fordert Daten für volle Jahre an, z.B. vom 01.01.2018 bis 01.01.2019. +Der Scheduler wird Daten nach ganzen Jahren anfordern, z. B. von 2027-01-01 bis 2028-01-01. -Das angeforderte Intervall ist immer mindestens so groß wie das angezeigte. +In jedem Fall wird das angeforderte Intervall nicht kleiner als das gerenderte Intervall sein. -Das Ladeintervall beeinflusst: +Das Lade-Intervall definiert: -- wie oft dynamische Ladevorgänge ausgeführt werden +- die Häufigkeit der dynamischen Ladeaufrufe -Größere Intervalle verringern die Häufigkeit der Ladevorgänge, da bereits geladene Daten zwischengespeichert werden. +Je größer das Lade-Intervall, desto geringer die Frequenz der Aufrufe für das dynamische Laden. Der Scheduler speichert den bereits geladenen Datenanteil im Speicher und wiederholt keinen Aufruf dafür. -- wie lange jede Anfrage dauert +- die Dauer der Bearbeitung einer einzelnen Anfrage -Größere Intervalle bedeuten mehr Daten pro Anfrage, was die Verarbeitungszeit erhöht. +Je größer das Lade-Intervall, desto länger wird eine Anfrage bearbeitet, da mehr Daten auf einmal geladen werden. #### Anfrage -Anfragen haben folgendes Format: +Generierte Anfragen sehen wie folgt aus: ~~~js -some.php?from=DATEHERE&to=DATEHERE +/api/events?from=DATEHERE&to=DATEHERE ~~~ -*wobei DATEHERE ein gültiges Datum im durch die Option [load_date](api/config/load_date.md) festgelegten Format ist.* +-Wobei DATEHERE ein gültiger Datumswert im von der [`load_date`](api/config/load_date.md) Option definierten Format ist.* +### Verwandte API -Bei Verwendung von dhtmlxConnector auf der Serverseite ist keine zusätzliche Verarbeitung zur Auswertung dieser Anfragen erforderlich. +- [`setLoadMode()`](api/method/setloadmode.md) +- [`load_date`](api/config/load_date.md) ### Lade-Spinner -Beim Arbeiten mit großen Datenmengen ist es hilfreich, einen Lade-Spinner anzuzeigen, um den Fortschritt zu visualisieren. +Wenn Sie mit großen Datenmengen arbeiten, ist es sinnvoll, den Lade-Spinner anzuzeigen. Er zeigt dem Benutzer, dass die Anwendung tatsächlich etwas tut. -Der Lade-Spinner kann aktiviert werden, indem die Eigenschaft [show_loading](api/config/show_loading.md) auf *true* gesetzt wird: +Um den Lade-Spinner für den Scheduler zu aktivieren, setzen Sie die Eigenschaft [`show_loading`](api/config/show_loading.md) auf *true*. ~~~js scheduler.config.show_loading = true; ... -scheduler.init('scheduler_here',new Date(2018,0,10),"month"); +scheduler.init("scheduler_here", new Date(2027, 4, 10), "month"); ~~~ :::note -Um das Spinner-Bild anzupassen, ersetzen Sie 'imgs/loading.gif' durch Ihr eigenes Bild. +Um das Spinner-Bild zu ändern - ersetzen Sie 'imgs/loading.gif' durch Ihr eigenes Bild. ::: -## Laden von Daten mit Timeline- und Units-Abschnitten vom Server {#loadingdatawithtimelineandunitssectionsfromtheserver} +## Daten laden mit Timeline- und Units-Abschnitten vom Server {#collections} -Beim Laden von Daten in die [Timeline](views/timeline.md#data-loading)- und [Units](views/units.md#loading-data-to-the-view)-Ansichten muss ein Array von Abschnitten bereitgestellt werden. +Beim Laden von Daten in die Ansichten [Timeline](views/timeline.md) und [Units](views/units.md) müssen Sie ein Array von Abschnitten festlegen, die in die Ansichten geladen werden. -Um Timeline- und Units-Abschnitte vom Backend zu laden, ist eine detailliertere Einrichtung erforderlich: +Um Daten zu laden, die Timeline- und Units-Abschnitte vom Backend enthalten, müssen Sie eine erweiterte Konfiguration implementieren: -- Während der Initialisierung der Timeline-Ansicht wird anstelle eines Abschnitt-Arrays die Methode [serverList](api/method/serverlist.md) mit dem Namen der Collection verwendet: +- während der Initialisierung der Timeline-Ansicht sollten Sie anstelle eines sections-Arrays die [`serverList()`](api/method/serverlist.md) Methode verwenden und den Namen einer Sammlung als Argument übergeben: ~~~js scheduler.createTimelineView({ - .... - y_unit: scheduler.serverList("sections"), - ... + .... + y_unit: scheduler.serverList("sections"), + ... }); ~~~ -- Laden Sie Daten in den Scheduler mit der Methode [load](api/method/load.md): +- um Daten in den Scheduler zu laden, verwenden Sie die [`load()`](api/method/load.md) Methode: ~~~js scheduler.load("data.json"); ~~~ -- Auf der Serverseite sollte die Antwort wie folgt strukturiert sein: - -~~~js title=""data.json"" -{ - "data":[ - { - "id":"1", - "start_date":"2018-03-02 00:00:00", - "end_date":"2018-03-04 00:00:00", - "text":"dblclick me!", - "type":"1" - }, - { - "id":"2", - "start_date":"2018-03-09 00:00:00", - "end_date":"2018-03-11 00:00:00", - "text":"and me!", - "type":"2" - }, - { - "id":"3", - "start_date":"2018-03-16 00:00:00", - "end_date":"2018-03-18 00:00:00", - "text":"and me too!", - "type":"3" - }, - { - "id":"4", - "start_date":"2018-03-02 08:00:00", - "end_date":"2018-03-02 14:10:00", - "text":"Type 2 event", - "type":"2" - } - ], - "collections": { - "sections":[ - {"value":"1","label":"Simple"}, - {"value":"2","label":"Complex"}, - {"value":"3","label":"Unknown"} - ] - } +Wenn Sie Daten manuell abrufen (zum Beispiel, um Kopfzeilen hinzuzufügen), können Sie denselben Payload an [`parse()`](api/method/parse.md) übergeben: + +~~~js +fetch("/api/timeline") + .then((response) => response.json()) + .then((payload) => scheduler.parse(payload, "json")); +~~~ + +- während der Implementierung der Scheduler-Datenantwort im Backend verwenden Sie folgendes Format: + +~~~js title="data.json" +{ + "data":[ + { + "id":"1", + "start_date":"2027-03-02 00:00:00", + "end_date":"2027-03-04 00:00:00", + "text":"dblclick me!", + "type":"1" + }, + { + "id":"2", + "start_date":"2027-03-09 00:00:00", + "end_date":"2027-03-11 00:00:00", + "text":"and me!", + "type":"2" + }, + { + "id":"3", + "start_date":"2027-03-16 00:00:00", + "end_date":"2027-03-18 00:00:00", + "text":"and me too!", + "type":"3" + }, + { + "id":"4", + "start_date":"2027-03-02 08:00:00", + "end_date":"2027-03-02 14:10:00", + "text":"Type 2 event", + "type":"2" + } + ], + "collections": { + "sections":[ + {"value":"1","label":"Simple"}, + {"value":"2","label":"Complex"}, + {"value":"3","label":"Unknown"} + ] + } } ~~~ -In diesem Beispiel enthält das "data"-Array die Kalendereinträge, während das "collections"-Objekt die Collections enthält, auf die über die Methode [serverList](api/method/serverlist.md) verwiesen wird. +In dem obigen Beispiel enthält das "data"-Array Kalenderereignisse, und der Hash "collections" enthält Sammlungen, die über die [`serverList()`](api/method/serverlist.md) Methode referenziert werden können. + +### Verwandte API + +- [`serverList()`](api/method/serverlist.md) + +### Verwandte Guides + +- Timeline-Ansicht +- Units-Ansicht \ No newline at end of file diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides/localization.md b/i18n/de/docusaurus-plugin-content-docs/current/guides/localization.md index b385500c..aa2c64fa 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/guides/localization.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/guides/localization.md @@ -5,20 +5,20 @@ sidebar_label: "Lokalisierung" # Lokalisierung -Die Bibliothek unterstützt die Lokalisierung für den Scheduler, indem sie eine Vielzahl vordefinierter Sprachpakete sowie Optionen zur Erstellung eigener Sprachpakete anbietet. Standardmäßig wird DHTMLX Scheduler mit dem [englischen Sprachpaket](api/other/locale.md) ausgeliefert. +Die Bibliothek unterstützt die Lokalisierung des Schedulers, indem sie eine Reihe vordefinierter Lokalisierungen bereitstellt und eine Möglichkeit bietet, eigene Lokalisierungen zu erstellen. Standardmäßig verwendet DHTMLX Scheduler die englische Locale. ## Aktivierung -Um die Sprache des Schedulers festzulegen, müssen Sie lediglich das gewünschte Sprachpaket über die Methode **setLocale** am Objekt [scheduler.i18n](api/other/i18n.md) aktivieren. +Um die gewünschte Sprache für den Scheduler festzulegen, aktivieren Sie die benötigte Locale über die `setLocale()`-Methode des [scheduler.i18n](api/other/i18n.md) Objekts. ~~~js -scheduler.i18n.setLocale("fr"); +scheduler.i18n.setLocale("fr"); ~~~ -Sie können eines der im dhtmlxscheduler.js enthaltenen [vordefinierten Sprachpakete](#included-locales) verwenden oder ein eigenes Sprachpaket erstellen. +Sie können eine der [vordefinierten Locale](#included-locales) verwenden und aktualisieren, die mit der Datei dhtmlxscheduler.js gebündelt sind, oder eine benutzerdefinierte Locale definieren. :::note -Das Sprachpaket kann zur Laufzeit gewechselt werden, die Änderung wird jedoch erst wirksam, nachdem der Scheduler vollständig durch einen Aufruf von **scheduler.render()** oder **scheduler.init()** neu gezeichnet wurde. +Die Locale kann dynamisch gewechselt werden, aber die Änderungen werden erst nach einer vollständigen Neuzeichnung des Schedulers mit entweder dem Aufruf von `scheduler.render()` oder `scheduler.init()` angewendet. ::: ~~~js @@ -26,20 +26,19 @@ scheduler.i18n.setLocale("fr"); scheduler.init("scheduler_here"); ~~~ +### Verwandte Beispiele +- [Localization](https://docs.dhtmlx.com/scheduler/samples/01_initialization_loading/07_locale_usage.html) -[Localization](https://docs.dhtmlx.com/scheduler/samples/01_initialization_loading/07_locale_usage.html) - - -## Enthaltene Sprachpakete {#included-locales} +## Included locales :::note -Sowohl die Common- als auch die Recurring-Sprachdateien sind Teil der **dhtmlxscheduler.js** Datei. +Sowohl gemeinsame Locale-Dateien als auch wiederkehrende Locale-Dateien befinden sich in der Datei `dhtmlxscheduler.js`. ::: -dhtmlxScheduler bietet Lokalisierung für folgende Sprachen: +dhtmlxScheduler enthält Lokalisierungen für die folgenden Sprachen: - + @@ -47,7 +46,7 @@ dhtmlxScheduler bietet Lokalisierung für folgende Sprachen: - + @@ -71,65 +70,65 @@ dhtmlxScheduler bietet Lokalisierung für folgende Sprachen:
SpracheSprachcode
SpracheSprachcode
Arabischar
Weißrussischbe
Katalanischca
Tschechischcs
Dänischda
Niederländischnl
Englischen (Standard)
Englischen (default)
Finnischfi
Französischfr
Deutschde
Ukrainischua
-## Eigenes Sprachpaket erstellen +## Eigene Locale erstellen :::note -Das Objekt [scheduler.i18n](api/other/i18n.md) ist seit v6.0 verfügbar. In früheren Versionen wurde das Objekt [scheduler.locale](api/other/locale.md) verwendet. Weitere Informationen finden Sie im [Migrationsartikel](migration.md#53---60). +Das [scheduler.i18n](api/other/i18n.md) Objekt wurde in v6.0 hinzugefügt. In früheren Versionen wurde das [scheduler.locale](api/other/locale.md) Objekt verwendet. Für weitere Informationen siehe den [Migration-Artikel](migration.md#53---60). ::: -Der einfachste Weg, ein eigenes Sprachpaket zu erstellen, besteht darin, das Standard-Englisch-Sprachpaket aus dem folgenden Beispiel zu kopieren und die Zeichenketten in Ihre bevorzugte Sprache zu übersetzen. +Der einfachste Weg, eine eigene Locale zu erstellen, besteht darin, eine Kopie der Standard-englischen Locale aus dem untenstehenden Beispiel zu nehmen und alle Strings in die gewünschte Sprache zu übersetzen. -Es gibt zwei Möglichkeiten, ein eigenes Sprachpaket im Scheduler zu verwenden: +Die benutzerdefinierte Locale kann dem Scheduler auf zwei Arten angewendet werden: -- Überschreiben Sie das aktuelle Sprachpaket, indem Sie ein Sprachobjekt an die Methode **setLocale** übergeben: +- Entweder die aktuelle Locale überschreiben, indem man ein Locale-Objekt als Parameter an die `setLocale()`-Methode übergibt: ~~~js -scheduler.i18n.setLocale(localeObject); +scheduler.i18n.setLocale(localeObject); ~~~ -Wenn Sie nur einen Teil des Sprachobjekts angeben, werden Ihre Bezeichnungen mit dem bestehenden Sprachpaket zusammengeführt: +Hinweis: Falls Sie dem Aufruf ein partielles Locale-Objekt übergeben, fügt der Scheduler Ihre Labels in die aktuelle Locale ein: ~~~js scheduler.i18n.setLocale({ labels: { - day_tab: "Day", + day_tab: "Tag", } -}); +}); ~~~ -- Oder, wenn Sie zwischen mehreren Sprachpaketen wechseln möchten, können Sie ein Sprachpaket mit einem eigenen Sprachcode hinzufügen und dann darauf umschalten: +- Oder, wenn Sie zwischen mehreren Locales wechseln müssen, definieren Sie die Locale mit einem benutzerdefinierten Sprachcode und wechseln Sie später zum Scheduler darauf um: ~~~js -scheduler.i18n.addLocale("lang", localeObject); +scheduler.i18n.addLocale("lang", localeObject); scheduler.i18n.setLocale("lang"); ~~~ :::note -Beachten Sie, dass das Umschalten auf ein eigenes Sprachpaket die Oberfläche der Anwendung verändert. Überprüfen und passen Sie ggf. alle sprachabhängigen Elemente an, damit der Scheduler korrekt in der neuen Sprache angezeigt wird. +Hinweis: Das Aktivieren einer benutzerdefinierten Locale in der Anwendung bewirkt Änderungen in der Benutzeroberfläche der App. Überprüfen und ggf. alle sprachabhängigen Elemente neu definieren, um sicherzustellen, dass der Scheduler in der neuen Sprache gut aussieht. ::: **Hinweis** -- Sie können Ihre eigene Sprachdatei an **support@dhtmlx.com** senden; möglicherweise wird sie in einer zukünftigen Version aufgenommen; -- Das aktive Sprachpaket ist über das Objekt **scheduler.locale** zugänglich; -- **monthFull** enthält die vollständigen Monatsnamen, beginnend mit Januar; -- **monthShort** enthält die abgekürzten Monatsnamen, beginnend mit Januar; -- **dayFull** enthält die vollständigen Tagesnamen, beginnend mit Sonntag; -- **dayShort** enthält die abgekürzten Tagesnamen, beginnend mit Sonntag. +- Sie können Ihre benutzerdefinierte Locale-Datei an **support@dhtmlx.com** senden, damit wir sie in die nächste Veröffentlichung aufnehmen. +- Die aktuell aktive Locale ist auch im `scheduler.locale`-Objekt verfügbar. +- `monthFull` - die vollständigen Monatsnamen, beginnend mit Januar +- `monthShort` - die kurzen Monatsnamen, beginnend mit Januar +- `dayFull` - die vollständigen Wochentagsnamen, beginnend mit Sonntag +- `dayShort` - die kurzen Wochentagsnamen, beginnend mit Sonntag - -~~~js title="English locale definition" +### Englische Locale-Definition +~~~js scheduler.i18n.setLocale({ - date:{ - month_full: ["January", "February", "March", "April", "May", "June", + date: { + month_full: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"], - month_short: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", + month_short: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], - day_full: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", + day_full: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"], day_short: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"] }, - labels:{ + labels: { dhx_cal_today_button: "Today", day_tab: "Day", week_tab: "Week", @@ -146,30 +145,30 @@ scheduler.i18n.setLocale({ section_time: "Time period", full_day: "Full day", - /*recurring events*/ - confirm_recurring:"Edit recurring event", - section_recurring:"Repeat event", - button_recurring:"Disabled", - button_recurring_open:"Enabled", + /* recurring events */ + confirm_recurring: "Edit recurring event", + section_recurring: "Repeat event", + button_recurring: "Disabled", + button_recurring_open: "Enabled", button_edit_series: "All events", button_edit_occurrence: "This event", button_edit_occurrence_and_following: "This and following events", - /*agenda view extension*/ + /* agenda view extension */ agenda_tab: "Agenda", date: "Date", description: "Description", - /*year view extension*/ + /* year view extension */ year_tab: "Year", /* week agenda extension */ week_agenda_tab: "Agenda", - /*grid view extension*/ + /* grid view extension */ grid_tab: "Grid", - /* touch tooltip*/ + /* touch tooltip */ drag_to_create: "Drag to create", drag_to_move: "Drag to move", @@ -225,20 +224,19 @@ scheduler.i18n.setLocale({ repeat_freq_year: "Year", repeat_on_date: "On date", repeat_ends: "Ends", - month_for_recurring: ["January", "February", "March", "April", "May", "June", + month_for_recurring: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"], - day_for_recurring: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", + day_for_recurring: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"] } }); ~~~ - -[Localization](https://docs.dhtmlx.com/scheduler/samples/01_initialization_loading/07_locale_usage.html) - +### Verwandte Beispiele +- [Localization](https://docs.dhtmlx.com/scheduler/samples/01_initialization_loading/07_locale_usage.html) ## Zusätzliche Hinweise -- Wenn das Label **confirm_closing** oder **confirm_deleting** nicht gesetzt ist, erscheint der zugehörige Bestätigungsdialog nicht (die Aktion wird automatisch bestätigt); -- Bezeichnungen wie **section_(name)** entsprechen dem Lightbox-Abschnitt mit diesem Namen. -- Das Label **new_event** definiert den Standardtext für neue Ereignisse. +- Wenn das Label `confirm_closing` oder `confirm_deleting` nicht definiert ist, wird der zugehörige Bestätigungsdialog überhaupt nicht angezeigt (Auto-Bestätigung) +- Das Label `section_(name)` bezieht sich auf den Lightbox-Abschnitt des entsprechenden Namens +- Das Label `new_event` definiert den Standardtext eines neuen Ereignisses \ No newline at end of file diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides/minicalendar.md b/i18n/de/docusaurus-plugin-content-docs/current/guides/minicalendar.md index 40fc143c..b3e3642c 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/guides/minicalendar.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/guides/minicalendar.md @@ -1,36 +1,36 @@ ---- -title: "Mini-Kalender (Datumsauswahl)" -sidebar_label: "Mini-Kalender (Datumsauswahl)" +--- +title: "Mini-Kalender (Datumswähler)" +sidebar_label: "Mini-Kalender (Datumswähler)" --- -# Mini-Kalender (Datumsauswahl) +# Mini-Kalender (Datumswähler) -Der Mini-Kalender (Date Picker) ist eine praktische Erweiterung, mit der Sie eine kompakte Monatsansicht in einem HTML-Container auf Ihrer Seite anzeigen können. +Der Mini-Kalender (Datumswähler) ist eine spezielle Erweiterung, die es ermöglicht, eine kleine Monatsansicht in einen HTML-Container auf einer Seite zu rendern. ![mini_calendar](/img/mini_calendar.png) -[Mini calendar without the scheduler](https://docs.dhtmlx.com/scheduler/samples/05_calendar/02_without_scheduler.html) +[Mini-Kalender ohne Scheduling](https://docs.dhtmlx.com/scheduler/samples/05_calendar/02_without_scheduler.html) :::note -Um den Mini-Kalender in Ihrer App zu verwenden, stellen Sie sicher, dass Sie die **minical**-Erweiterung auf der Seite einbinden. +Um den Mini-Kalender in einer App zu verwenden, binden Sie die **minical**-Erweiterung in die Seite ein. ::: -## Im Header {#intheheader} +## In der Kopfzeile -Um den Mini-Kalender (Date Picker) im Header des Schedulers anzuzeigen (wie im Bild unten), gehen Sie wie folgt vor: +Um den Mini-Kalender (Datumswähler) in die Kopfzeile des Schedulers zu integrieren (wie im Bild unten gezeigt), gehen Sie wie folgt vor: ![calendar_in_header](/img/calendar_in_header.png) -1. Binden Sie die Erweiterungsdatei auf Ihrer Seite ein: +1. Binden Sie die Erweiterungsdatei in die Seite ein: ~~~js scheduler.plugins({ minical: true }); ~~~ -2. Definieren Sie den Container für den Mini-Kalender und fügen Sie ihn in das Scheduler-Markup ein: +2. Geben Sie den Container für den Mini-Kalender an und fügen Sie ihn dem Scheduler-Markup hinzu: ~~~js
... @@ -39,7 +39,7 @@ scheduler.plugins({ onclick="show_minical()"> 
~~~ -3. Implementieren Sie die Logik, um den Mini-Kalender zu initialisieren (mit der Methode [renderCalendar](api/method/rendercalendar.md)) und zu zerstören (mit der Methode [destroyCalendar](api/method/destroycalendar.md)): +3. Stellen Sie die Logik bereit, die den Mini-Kalender initialisiert (die renderCalendar-Methode) und zerstört (die destroyCalendar-Methode) den Mini-Kalender: ~~~js function show_minical(){ if (scheduler.isCalendarVisible()){ @@ -59,46 +59,47 @@ function show_minical(){ ~~~ -[Mini calendar in the scheduler header](https://docs.dhtmlx.com/scheduler/samples/05_calendar/01_select.html) +[Mini-Kalender in der Scheduler-Kopfzeile](https://docs.dhtmlx.com/scheduler/samples/05_calendar/01_select.html) -## Im Header (Drittanbieter-Datumsauswahl) {#intheheaderthirdpartydatepicker} +## In der Kopfzeile (Third-party Date Picker) -In diesem Abschnitt wird gezeigt, wie Sie einen Mini-Kalender (Date Picker) eines Drittanbieters in den Header des Schedulers integrieren. +In diesem Abschnitt zeigen wir Ihnen, wie Sie einen Datumswähler von Drittanbietern in die Kopfzeile des Schedulers integrieren. ![custom_minicalendar](/img/custom_minicalendar.png) -**Related sample** [3rd party Mini Calendar in the header](https://snippet.dhtmlx.com/5/0dca14de9) +**Verwandtes Beispiel** [3rd party Mini Calendar in the header](https://snippet.dhtmlx.com/5/0dca14de9) -Unser Beispiel verwendet [jQuery](https://jquery.com) und [Bootstrap Datepicker](https://bootstrap-datepicker.readthedocs.io/en/latest/), um den Mini-Kalender hinzuzufügen. Wenn Sie mit anderen Bibliotheken arbeiten, müssen Sie den Code entsprechend anpassen, aber das grundlegende Vorgehen bleibt ähnlich: +In unserem Beispiel fügen wir einen Mini-Kalender basierend auf [jQuery](https://jquery.com) und [Bootstrap Datepicker](https://bootstrap-datepicker.readthedocs.io/en/latest/) hinzu. Wenn Sie andere Bibliotheken verwenden, müssen Sie den Code möglicherweise anpassen, aber der grundlegende Ansatz sollte derselbe bleiben: -1. *Datumsauswahl beim Klick auf den Kalender-Header anzeigen* +1. *Den Date Picker anzeigen, wenn man auf die Kalenderüberschrift klickt* -Definieren Sie zunächst einen DIV-Container für den Mini-Kalender (oder ein anderes Steuerelement) im Scheduler-Header. Mit dem [Markup-Initialisierungsansatz](guides/initialization.md#initializing-scheduler-via-markup) sieht das so aus: +Zunächst müssen Sie den DIV-Container für den Mini-Kalender (oder eine andere Kontrolle) in der Scheduler-Kopfzeile definieren. +Verwenden Sie den [Markup-Initialisierungsansatz](guides/initialization.md#initializing-scheduler-via-markup), können Sie dies wie folgt tun: ~~~js -
+
 
 
-
+ ~~~ -Wenn Sie die [header config](guides/initialization.md#initializing-scheduler-via-header-config) verwenden, fügen Sie [ein benutzerdefiniertes Element](api/config/header.md) wie folgt hinzu: +Wenn Sie die [Header-Konfiguration](guides/initialization.md#initializing-scheduler-via-header-config) verwenden, müssen Sie dort ein [benutzerdefiniertes Element](api/config/header.md) hinzufügen: ~~~js scheduler.config.header = [ "day", "week", "month", - {html:'
'+ + {html:''}, @@ -110,7 +111,7 @@ scheduler.config.header = [ scheduler.init("scheduler_here"); ~~~ -Um den Date Picker beim Klick auf das Datum im Navigationsbereich des Schedulers anzuzeigen, richten Sie das Click-Event ein, sobald der Scheduler bereit ist: +Um den Date Picker beim Klicken auf das Datum im Navigationsfeld des Schedulers anzuzeigen, initialisieren wir das Klick-Ereignis, sobald der Scheduler bereit ist: ~~~js scheduler.attachEvent("onSchedulerReady", function(){ @@ -128,7 +129,7 @@ scheduler.attachEvent("onSchedulerReady", function(){ $node.datepicker().on("show", function () { $node.datepicker("update", scheduler.getState().date); - // Popup unterhalb des Datumslabels zentrieren + // center popup below date label centerDatepicker($(".dhx_cal_date")); }); ... @@ -136,7 +137,7 @@ scheduler.attachEvent("onSchedulerReady", function(){ }); ~~~ -Die Funktion `centerDatepicker` hilft dabei, den Dropdown-Date Picker korrekt zu positionieren: +`centerDatepicker` ist eine Hilfsfunktion, die wir implementieren, um den Dropdown-Daterpicker an der notwendigen Stelle darzustellen: ~~~js ... @@ -145,10 +146,10 @@ Die Funktion `centerDatepicker` hilft dabei, den Dropdown-Date Picker korrekt zu if (!$('.datepicker-dropdown').is(':visible')) { return; } - // Popup unterhalb des Datumslabels zentrieren - var offset = $(".dhx_cal_date").offset(); - var width = $(".dhx_cal_date").width(); - var popupWidth = $(".datepicker-dropdown").width(); + // center popup below date label + let offset = $(".dhx_cal_date").offset(); + let width = $(".dhx_cal_date").width(); + let popupWidth = $(".datepicker-dropdown").width(); $(".datepicker-dropdown").css({ top: offset.bottom + "px", left: (width - popupWidth) / 2 + "px" @@ -156,9 +157,9 @@ Die Funktion `centerDatepicker` hilft dabei, den Dropdown-Date Picker korrekt zu } ~~~ -2. *Aktuelles Scheduler-Datum bei Auswahl im Date Picker aktualisieren* +2. *Wechseln des Schedulers zum ausgewählten Datum, wenn der Benutzer im Date Picker auf das Datum klickt* -Nachdem der Date Picker angezeigt wurde, aktualisieren Sie das Scheduler-Datum, wenn ein Tag ausgewählt wird: +Nachdem wir den Datepicker bei Bedarf anzeigen, müssen wir das Scheduler-Datum ändern, wenn ein Tag im Kalender ausgewählt wird: ~~~js $node.datepicker().on("changeDate", function () { @@ -166,9 +167,9 @@ Nachdem der Date Picker angezeigt wurde, aktualisieren Sie das Scheduler-Datum, }); ~~~ -3. *Aktuelle Daten im Date Picker hervorheben* +3. *Aktuelle Daten im Datepicker hervorheben* -Um die aktuell im Scheduler angezeigten Daten hervorzuheben, wenden Sie eine einfache CSS-Klasse an: +Um die Daten im Datepicker hervorzuheben, die derzeit im Scheduler angezeigt werden, verwenden wir eine einfache CSS-Klasse: ~~~js .datepicker table .scheduler-date{ @@ -176,16 +177,16 @@ Um die aktuell im Scheduler angezeigten Daten hervorzuheben, wenden Sie eine ein } ~~~ -Alle im Scheduler sichtbaren Date-Picker-Zellen erhalten diese Klasse: +Alle Zellen des Datepickers, die derzeit im Scheduler sichtbar sind, erhalten diese Klasse: ~~~js function fillDatepicker(scheduler) { - // Hervorgehobene Ereignisse und aktive Daten zurücksetzen + // reset highlighted events and active dates ... $(".datepicker-dropdown").find("[data-date]").removeClass("scheduler-date"); - // Scheduler-Datum hervorheben - var visibleDates = getVisibleDates(scheduler); + // highlight scheduler date + const visibleDates = getVisibleDates(scheduler); visibleDates.forEach(function (date) { $(".datepicker-dropdown").find( "[data-date='" + date + "']" @@ -195,17 +196,17 @@ Alle im Scheduler sichtbaren Date-Picker-Zellen erhalten diese Klasse: } ~~~ -Um die aktuell sichtbaren Daten zu erhalten, verwenden Sie `scheduler.getState`: +Um die aktuell sichtbaren Daten zu erhalten, können Sie `scheduler.getState` verwenden: ~~~js function getVisibleDates(scheduler) { - var minVisible = scheduler.getState().min_date; - var maxVisible = scheduler.getState().max_date; + const minVisible = scheduler.getState().min_date; + const maxVisible = scheduler.getState().max_date; - var current = minVisible; - var result = []; + let current = minVisible; + let result = []; while (current.valueOf() < maxVisible.valueOf()) { - var currentUTC = Date.UTC( + let currentUTC = Date.UTC( current.getFullYear(),current.getMonth(),current.getDate() ); result.push(currentUTC.valueOf()); @@ -216,9 +217,9 @@ Um die aktuell sichtbaren Daten zu erhalten, verwenden Sie `scheduler.getState`: } ~~~ -4. *Tage mit Ereignissen im Date Picker markieren* +4. *Tage mit Ereignissen im Datepicker hervorheben* -Um Daten mit Ereignissen im Scheduler hervorzuheben, fügen Sie eine weitere CSS-Klasse hinzu: +Als Nächstes möchten wir, dass der Datepicker die Tage mit Ereignissen hervorhebt, die im Scheduler angegeben sind. Dafür verwenden wir denselben Ansatz wie im vorherigen Schritt und fügen eine CSS-Klasse hinzu: ~~~js .datepicker table .has-event::after { @@ -231,26 +232,26 @@ Um Daten mit Ereignissen im Scheduler hervorzuheben, fügen Sie eine weitere CSS } ~~~ -Dadurch werden die Mini-Kalender-Daten mit Ereignissen hervorgehoben. +Wie Sie im obigen Beispiel sehen können, markieren wir die Tage des Mini-Kalenders, die Ereignisse enthalten. -Um beim Überfahren eines Datums einen Tooltip mit der Anzahl der Ereignisse anzuzeigen, holen Sie die Ereignisse für den aktuell im Date Picker angezeigten Monat: +Um den Tooltip mit der Anzahl der Ereignisse für das Datum anzuzeigen, über dem der Benutzer die Maus bewegt, müssen wir die Ereignisse der Monate abrufen, die im Datepicker aktuell angezeigt werden: ~~~js function getVisibleEvents(calendarDate, scheduler) { - var min = scheduler.date.month_start(new Date(calendarDate)); - var max = scheduler.date.add(calendarDate, 1, "month"); + const min = scheduler.date.month_start(new Date(calendarDate)); + const max = scheduler.date.add(calendarDate, 1, "month"); min = scheduler.date.week_start(min); if(scheduler.date.week_start(new Date(max)) < max){ max = scheduler.date.week_start(new Date(max)); max = scheduler.date.add(max, 1, "week"); } - var events = scheduler.getEvents(min, max); - var days = {}; + const events = scheduler.getEvents(min, max); + let days = {}; events.forEach(function (event) { - var eventDate = event.start_date; + let eventDate = event.start_date; while(eventDate < event.end_date){ - var day = Date.UTC( + let day = Date.UTC( eventDate.getFullYear(), eventDate.getMonth(), eventDate.getDate() @@ -265,29 +266,28 @@ Um beim Überfahren eines Datums einen Tooltip mit der Anzahl der Ereignisse anz } }); - var result = []; - for (var i in days) { + let result = []; + for (let i in days) { result.push({ timestamp: i, count: days[i] }); } return result; } ~~~ -Mit dieser Methode werden Ereignisdaten aus dem Scheduler geholt, sodass nur aktuell geladene Ereignisse hervorgehoben werden. Wenn Ihre App dynamisches Laden verwendet, werden möglicherweise nicht alle Ereignisse angezeigt, da nur ein Teil geladen ist. - +Im obigen Beispiel erhalten wir Informationen über die Ereignisse aus dem Scheduler. Das bedeutet, dass wir nur die Ereignisse hervorheben können, die bereits in den Scheduler geladen wurden. Dieser Ansatz funktioniert besonders dann nicht gut, wenn Sie dynamisches Laden verwenden, da nur ein kleiner Teil aller Ereignisse zum Zeitpunkt geladen wird. -Alternativ können Sie Ereignisdaten vom Server anfordern. +Der alternative Ansatz wäre, die Daten zu den Ereignissen vom Server abzurufen. -Sobald Sie die Ereignis-Timestamps und -Zahlen haben, können Sie den Date Picker wie folgt aktualisieren: +Wenn wir Daten zu den Zeitstempeln der Zellen haben, die Ereignisse enthalten, und zur Anzahl der Ereignisse pro Zelle, können wir den Datepicker mit diesen Informationen befüllen, wie zum Beispiel: ~~~js function fillDatepicker(scheduler) { - // Hervorgehobene Ereignisse und aktive Daten zurücksetzen + // reset highlighted events and active dates $(".datepicker-dropdown").find("[data-date]").removeClass("has-event"); $(".datepicker-dropdown").find("[data-date]").removeAttr("title"); ... - // Ereignisse hervorheben + // highlight events const eventCells = getVisibleEvents($node.datepicker("getDate"), scheduler); eventCells.forEach(function (cellEvents) { $(".datepicker-dropdown").find( @@ -300,9 +300,9 @@ Sobald Sie die Ereignis-Timestamps und -Zahlen haben, können Sie den Date Picke } ~~~ -5. *Das angezeigte Datums-Label mit dem aktiven Scheduler-Datum synchronisieren* +5. *Synchronisieren des angezeigten Datumslabels mit dem aktiven Datum im Scheduler* -Schließlich zentrieren Sie den Date Picker neu, wenn sich die Fenstergröße ändert, und aktualisieren Sie die Hervorhebungen, wenn der Benutzer das Datum im Picker ändert: +Schließlich müssen wir den Date Picker neu zentrieren, wenn sich die Fenstergröße ändert, und die Hervorhebung anwenden, wenn der Benutzer das aktuelle Datum im Date Picker ändert: ~~~js $(window).on('resize', function () { @@ -326,14 +326,14 @@ Schließlich zentrieren Sie den Date Picker neu, wenn sich die Fenstergröße ä refreshDatepicker(scheduler); }); function refreshDatepicker(scheduler) { - // Aus Timeout heraus aufrufen, damit der Code nach dem Aktualisieren des Datepicker-Popups ausgeführt wird + // Aufruf aus dem Timeout, damit der Code nach Aktualisierung des Datepicker-Popups ausgelöst wird setTimeout(function () { fillDatepicker(scheduler); }); } ~~~ -Wenn Sie ein separates Element verwenden, um das aktive Datum des Schedulers anzuzeigen, hören Sie auf das [onViewChange](api/event/onviewchange.md)-Event und aktualisieren dort das Label: +Wenn Sie ein separates Element verwenden, um das aktive Datum des Schedulers anzuzeigen, müssen Sie das onViewChange-Ereignis des Schedulers erfassen und das Datums-Label von dort aus aktualisieren: ~~~js scheduler.attachEvent("onViewChange", function (newMode , newDate){ @@ -346,31 +346,32 @@ scheduler.attachEvent("onViewChange", function (newMode , newDate){ }); ~~~ -Beachten Sie, dass dieser Handler im Beispielcode nicht verwendet wird, da das integrierte Datums-Header automatisch aktualisiert wird. Verwenden Sie dies nur, wenn Sie [das Standard-Datums-Header ausblenden](guides/scheduler-markup.md#hidingtheheaderofscheduler) oder das aktive Datum an mehreren Stellen anzeigen möchten. +Beachten Sie, dass wir diesen Handler in unserem Codebeispiel nicht verwenden, da wir uns auf die integrierte Datumsüberschrift des Schedulers verlassen, die automatisch aktualisiert wird. Sie müssen einen solchen Code nur verwenden, wenn Sie [die Standard-Datumsüberschrift ausblenden](guides/scheduler-markup.md#hiding-the-header-of-scheduler), oder wenn Sie das aktive Datum an mehreren Stellen anzeigen müssen. -## Im Lightbox {#in-the-lightbox} +## Im Lightbox-Fenster -Der Mini-Kalender (Date Picker) kann auch innerhalb des Lightbox zur Auswahl von "Start"- und "Ende"-Daten genutzt werden. +Der Mini-Kalender (Datumswähler) kann im Lightbox-Fenster für die Auswahl von Start- und Enddatum verwendet werden. ![in_the_lightbox](/img/in_the_lightbox.png) -Um den Mini-Kalender im Lightbox hinzuzufügen, gehen Sie wie folgt vor: +Um den Mini-Kalender im Lightbox-Fenster zu platzieren, befolgen Sie diese Schritte: -1. Aktivieren Sie die Erweiterung auf der Seite: + +1. Erweiterung auf der Seite aktivieren: ~~~js scheduler.plugins({ minical: true }); ~~~ -2. Ändern Sie den type des time-Abschnitts zu calendar_time anstelle von time: +2. Den Typ des time-Abschnitts auf calendar_time setzen (statt time): ~~~js -// Standard-Lightbox-Definition -scheduler.config.lightbox.sections="[" +//default lightbox definition +scheduler.config.lightbox.sections= [ {name:"description", height:200, map_to:"text", type:"textarea", focus:true}, {name:"time", height:72, type:"time", map_to:"auto"} ]; -// type:"time" -> type:"calendar_time" ändern +//change type:"time" -> type:"calendar_time" scheduler.config.lightbox.sections = [ {name:"description", height:200, map_to:"text", type:"textarea", focus:true}, {name:"time", height:72, type:"calendar_time", map_to:"auto" } @@ -378,34 +379,34 @@ scheduler.config.lightbox.sections = [ ~~~ -[Mini calendar in the lightbox](https://docs.dhtmlx.com/scheduler/samples/05_calendar/03_in_form.html) +[Mini-Kalender im Lightbox](https://docs.dhtmlx.com/scheduler/samples/05_calendar/03_in_form.html) -## Außerhalb des Schedulers {#outsidethescheduler} +## Außerhalb des Schedulers -Der Mini-Kalender (Date Picker) kann an beliebiger Stelle auf der Seite platziert werden. +Der Mini-Kalender (Datumswähler) kann an jeder beliebigen Stelle auf der Seite platziert werden. ![outside_the_scheduler](/img/outside_the_scheduler.png) -Um den Mini-Kalender in einem HTML-Container außerhalb des Schedulers hinzuzufügen, gehen Sie wie folgt vor: +Um den Mini-Kalender in einen HTML-Container außerhalb des Schedulers zu platzieren, gehen Sie wie folgt vor: -1. Aktivieren Sie die Erweiterung auf der Seite: +1. Erweiterung auf der Seite aktivieren: ~~~js scheduler.plugins({ minical: true }); ~~~ -2. Definieren Sie den Container für den Mini-Kalender auf Ihrer Seite: +2. Den Container für den Mini-Kalender auf der Seite festlegen: ~~~js
...
-
-
+
+
~~~ -3. Rufen Sie die Methode [renderCalendar](api/method/rendercalendar.md) auf, um den Mini-Kalender zu rendern: +3. Die [renderCalendar](api/method/rendercalendar.md)-Methode aufrufen, um den Mini-Kalender auf der Seite zu rendern: ~~~js const calendar = scheduler.renderCalendar({ container:"cal_here", @@ -417,13 +418,13 @@ const calendar = scheduler.renderCalendar({ ~~~ -[Mini calendar outside the scheduler](https://docs.dhtmlx.com/scheduler/samples/05_calendar/05_plain_structure.html) +[Mini-Kalender außerhalb des Schedulers](https://docs.dhtmlx.com/scheduler/samples/05_calendar/05_plain_structure.html) -## Templates und Styles {#templatesandstyles} +## Vorlagen und Stile -### Templates -Sie können das Anzeigeformat von Daten im Mini-Kalender (Datumsauswahl) einfach anpassen, indem Sie verschiedene in dem Artikel [Mini-Kalender-Vorlagen](guides/mini-calendar-templates.md) beschriebene Templates verwenden. +### Vorlagen +Um das Format der im Mini-Kalender (Datumswähler) dargestellten Daten anzupassen, können Sie eine Reihe von Vorlagen verwenden, die im Artikel [Mini Calendar Templates](guides/mini-calendar-templates.md) aufgeführt sind. ~~~js scheduler.templates.calendar_month = scheduler.date.date_to_str("%M, %Y"); @@ -434,8 +435,9 @@ const calendar = scheduler.renderCalendar({..}); ![mini_calendar_custom_template](/img/mini_calendar_custom_template.png) + ### CSS-Klassen -Um das Erscheinungsbild der Tage im Mini-Kalender (Datumsauswahl) anzupassen, können Sie die folgenden CSS-Klassen überschreiben: +Um das Aussehen der Tage im Mini-Kalender (Datumswähler) anzupassen, können Sie die folgenden CSS-Klassen neu definieren: @@ -444,20 +446,20 @@ Um das Erscheinungsbild der Tage im Mini-Kalender (Datumsauswahl) anzupassen, k - - + + - - + + - - + + - - + +
.dhx_cal_container.dhx_mini_calendar .dhx_month_headeine Tageszelle.dhx_cal_container.dhx_mini_calendar .dhx_month_headeine Zelle eines Tages
.dhx_cal_container.dhx_mini_calendar .dhx_month_head.dhx_year_eventeine Tageszelle mit zugewiesenem/n Ereignis(sen).dhx_cal_container.dhx_mini_calendar .dhx_month_head.dhx_year_eventeine Zelle eines Tages mit dem zugewiesenen Ereignis(en)
.dhx_cal_container.dhx_mini_calendar .dhx_now .dhx_month_headeine Tageszelle mit dem aktuellen Datum.dhx_cal_container.dhx_mini_calendar .dhx_now .dhx_month_headeine Zelle eines Tages mit dem aktuellen Datum
.dhx_cal_container.dhx_mini_calendar .dhx_calendar_clickeine Tageszelle mit dem aktuell aktiven Datum.dhx_cal_container.dhx_mini_calendar .dhx_calendar_clickeine Zelle eines Tages mit dem aktuell aktiven Datum
@@ -475,8 +477,8 @@ Um das Erscheinungsbild der Tage im Mini-Kalender (Datumsauswahl) anzupassen, k ![mini_calendar_custom_css](/img/mini_calendar_custom_css.png) -### Markieren von Tagen mit der Methode markCalendar() -Um einem Tag eine bestimmte CSS-Klasse zuzuweisen, können Sie die Methode [markCalendar](api/method/markcalendar.md) verwenden: +### Marking days with the markCalendar() method +Um einer bestimmten Zelle eine benutzerdefinierte CSS-Klasse zuzuweisen, können Sie die Methode [markCalendar](api/method/markcalendar.md) verwenden: ~~~js + + +scheduler.message({ type:"myCss", text:"some text" }); +~~~ + +## Modalfenster und Tastaturinteraktion + +Die Tastaturfunktionalität für Modalfenster wird durch die Eigenschaft **scheduler.message.keyboard** gesteuert. Anfangs ist sie auf *true* gesetzt. + +Standardmäßig blockieren Modalfenster Tastaturereignisse der Seite. Die einzigen Tasten, die verwendet werden können, sind: + +- "space" und "enter" - setzt den *true*-Wert als Ergebnis des Modalfensters; +- "escape" - setzt den *false*-Wert als Ergebnis des Modalfensters. + +Durch Festlegen der Eigenschaft **keyboard** auf *false* werden Tastaturereignisse aktiviert (und die oben genannten Tasten deaktiviert): + +~~~js +scheduler.message.keyboard = false; +scheduler.modalbox({...}); +~~~ + +Dadurch ist die volle Tastatur nutzbar, z.B. zum Tippen von Werten in Eingabefeldern innerhalb von Modalfenstern. \ No newline at end of file diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides/quick-info.md b/i18n/de/docusaurus-plugin-content-docs/current/guides/quick-info.md index 72f7545e..33a14c7b 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/guides/quick-info.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/guides/quick-info.md @@ -5,11 +5,11 @@ sidebar_label: "Große Schaltflächen für einfachere Navigation" # Große Schaltflächen für einfachere Navigation -Ab Version 3.7 führt dhtmlxScheduler die ["Quick Info"-Erweiterung](guides/extensions-list.md#quick-info) ein. Diese Funktion ermöglicht es, die üblichen Seitenleisten-Schaltflächen und das vereinfachte Bearbeitungsformular durch größere, benutzerfreundlichere Schaltflächen zu ersetzen. +Ab Version 3.7 bietet dhtmlxScheduler die neue Erweiterung ["Quick Info" extension](guides/extensions-list.md#quick-info). Die Erweiterung ermöglicht es, Standard-Seitenleisten-Schaltflächen und das vereinfachte Bearbeitungsformular durch neue (größere und handlichere) zu ersetzen. -## Aktivierung des Big-Buttons-Schedulers +## Aktivierung des Schedulers mit großen Buttons -Um den Big-Buttons-Scheduler zu aktivieren, müssen Sie lediglich die ["Quick Info"](guides/extensions-list.md#quick-info)-Erweiterung auf Ihrer Seite einschalten: +Um den Scheduler mit großen Buttons zu aktivieren, aktivieren Sie die ["Quick Info"](guides/extensions-list.md#quick-info) Erweiterung auf der Seite: ~~~js @@ -17,37 +17,34 @@ Um den Big-Buttons-Scheduler zu aktivieren, müssen Sie lediglich die ["Quick In scheduler.plugins({ quick_info: true }); - scheduler.init('scheduler_here',new Date(2009,5,30),"day"); + scheduler.init('scheduler_here',new Date(2027,5,30),"day"); ... + + +~~~ + +Dann legen Sie die Haupt-Logik in der Datei `src/main.js` fest, indem Sie den untenstehenden Code verwenden. Er verbindet die Scheduler-Oberfläche mit Firestore und verarbeitet Echtzeit-Updates. + +~~~js title="src/main.js" +import { scheduler } from "dhtmlx-scheduler"; +import { db } from "./firebase.js"; +import { + collection, + query, + onSnapshot, + addDoc, + deleteDoc, + orderBy, + doc, + updateDoc, + getDocs, +} from "firebase/firestore"; + +import "dhtmlx-scheduler/codebase/dhtmlxscheduler.css"; + +const { remoteUpdates } = scheduler.ext.liveUpdates; + +scheduler.plugins({ + recurring: true, +}); + +scheduler.config.header = [ + "day", + "week", + "month", + "date", + "prev", + "today", + "next", +]; + +scheduler.init("scheduler_here", new Date(2025, 3, 20), "week"); + +const eventsRef = collection(db, "events"); + +scheduler.createDataProcessor(async function (entity, action, ev, id) { + switch (action) { + case "create": + { + const createdDoc = await addDoc(eventsRef, ev); + if (createdDoc.id) { + return { action: "inserted", tid: createdDoc.id }; + } + } + break; + case "update": + { + return updateDoc(doc(db, "events", id), ev); + } + break; + case "delete": + { + const deletedDoc = await deleteDoc(doc(db, "events", id)); + if (deletedDoc) { + return { action: "deleted" }; + } + } + break; + } +}); + +// helper functions to process event data +const processEvent = (docSnapshot) => { + const event = docSnapshot.data(); + event.id = docSnapshot.id; + return event; +}; + +// without it collection wouldn't call onSnapshot +const eventsQuery = query(eventsRef, orderBy("text", "desc")); + +(async () => { + const EventsSnap = await getDocs(eventsQuery); + const bulkEvents = EventsSnap.docs.map((ev) => processEvent(ev)); + scheduler.parse(bulkEvents); + watchRealtime(); +})(); + +const watchRealtime = () => { + let EventsLoaded = false; + + onSnapshot(eventsQuery, (querySnapshot) => { + if (!EventsLoaded) { + // first snapshot sends the current state + // we have already loaded it at the previous step + EventsLoaded = true; + return; + } + querySnapshot.docChanges().forEach((change) => { + // processes only the server-side changes + if (change.doc.metadata.hasPendingWrites) return; + + const event = processEvent(change.doc); + + switch (change.type) { + case "added": + remoteUpdates.events({ type: "add-event", event }); + break; + case "modified": + remoteUpdates.events({ type: "update-event", event }); + break; + case "removed": + remoteUpdates.events({ type: "delete-event", event }); + break; + } + }); + }); +}; +~~~ + +Dieser Code integriert die DHTMLX Scheduler-Bibliothek mit Firebase Firestore, um in einer JavaScript-Anwendung einen Echtzeit-Interaktionskalender zu erstellen. Er synchronisiert Ereignisdaten zwischen der Scheduler-Oberfläche und einer Firestore-Datenbank, sodass Änderungen in beiden sofort in der anderen sichtbar sind. Der Code unterstützt das Erstellen, Aktualisieren, Löschen und wiederkehrende Ereignisse und nutzt die Echtzeit-Fähigkeiten von Firestore. + +### Zusammenfassung der wichtigsten Funktionen + +- **scheduler.createDataProcessor**: Führt CRUD-Operationen für Scheduler-Ereignisse aus und synchronisiert sie mit Firestore: + + - Bei **"create"** wird ein neues Dokument in der Sammlung "events" hinzugefügt. + - Bei **"update"** wird das entsprechende Firestore-Dokument aktualisiert. + - Bei **"delete"** wird das Dokument aus Firestore entfernt. + +- **processEvent(docSnapshot)**: wandelt ein Firestore-Dokumenten-Snapshot in ein Scheduler-Ereignisobjekt um und hängt die ID des Dokuments an. + +- **(...)() IIFE** : die anfängliche Datenladung. Lädt alle vorhandenen Ereignisse aus Firestore in den Scheduler, wenn die Seite geladen wird, und beginnt dann mit dem Empfang von Echtzeit-Updates. + +- **watchRealtime**: verwendet Firestore's `onSnapshot`, um Änderungen in der Sammlung "events" in Echtzeit zu überwachen und die Scheduler-Oberfläche in Echtzeit zu aktualisieren. Wichtige Punkte: + + - ignoriert den anfänglichen Snapshot (bereits geladen) + - verarbeitet nur serverseitige Änderungen (ignoriert lokale, noch nicht bestätigte Writes) + - behandelt hinzugefügte, geänderte und entfernte Ereignisse, indem es `remoteUpdates` aufruft + +- **onSnapshot(q, callback)**: hört in Echtzeit auf Änderungen in der Firestore-Sammlung "events", sortiert nach "text" absteigend, und wendet die entsprechenden Live-Updates auf die Scheduler-Oberfläche an, wobei `remoteUpdates.events` für hinzugefügte, geänderte oder entfernte Ereignisse verwendet wird. + +## Schritt 4: Projekt initialisieren und bereitstellen + +Nun müssen Sie Firebase Hosting und Firestore initialisieren. Dazu sollten Sie: + +1. Vom Projektstamm führen Sie folgenden Befehl aus: + +~~~js +firebase init +~~~ + +Führen Sie anschließend die folgenden Schritte aus: + +- verwenden Sie die **Leertaste**, um die Features **Firestore** und **Hosting** auszuwählen +- wählen Sie **Use an existing project** und wählen Sie Ihr Firebase-Projekt +- akzeptieren Sie für Firestore-Regeln, Indizes und das öffentliche Verzeichnis die Standards +- **setzen Sie das öffentliche Verzeichnis auf `dist` (die Vite-Build-Ausgabe)** +- überspringen Sie die GitHub-Deploy-Einrichtung, es sei denn, Sie möchten sie konfigurieren + +2. Bauen Sie Ihr Projekt, indem Sie den folgenden Befehl ausführen: + +~~~js +npm run build +~~~ + +3. Stellen Sie auf dem Firebase Hosting mit folgendem Befehl bereit: + +~~~js +firebase deploy +~~~ + +Nach Abschluss der Bereitstellung wird Ihre Hosting-URL in der Konsole angezeigt. \ No newline at end of file diff --git a/i18n/de/docusaurus-plugin-content-docs/current/integrations/google-calendar/google-calendar-sync.md b/i18n/de/docusaurus-plugin-content-docs/current/integrations/google-calendar/google-calendar-sync.md index 729217b1..88a9bf37 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/integrations/google-calendar/google-calendar-sync.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/integrations/google-calendar/google-calendar-sync.md @@ -1,157 +1,167 @@ --- -title: "Two-way sync with Google Calendar (Node.js)" -sidebar_label: "Two-way sync (Node.js)" -description: "Implement a Node.js + Express integration that syncs DHTMLX Scheduler events with Google Calendar using OAuth 2.0 and Google Calendar API v3." +title: "Zweiseitige Synchronisierung mit Google Calendar (Node.js)" +sidebar_label: "Google Kalender" +description: "Implementieren Sie eine Node.js + Express-Integration, die DHTMLX Scheduler-Ereignisse mit dem Google Calendar unter Verwendung von OAuth 2.0 und Google Calendar API v3 synchronisiert." --- -# DHTMLX Scheduler: Two-way sync with Google Calendar (Node.js) +# DHTMLX Scheduler: Zweiseitige Synchronisierung mit Google Calendar (Node.js) -In this guide, you will implement **two-way sync** between **DHTMLX Scheduler** and **Google Calendar** in a small Node.js app: +In diesem Leitfaden implementieren Sie eine **zweiseitige Synchronisierung** zwischen dem **DHTMLX Scheduler** und **Google Calendar** in einer kleinen Node.js-Anwendung: -- Load calendars and events from Google Calendar into Scheduler -- Push Scheduler create/update/delete operations back to Google Calendar +- Kalender und Ereignisse aus Google Calendar in Scheduler laden +- Scheduler-Erstellungs-/Update-/Lösch-Operationen zurück an Google Calendar senden :::note -This approach implements **two-way sync via API calls** (Scheduler → backend → Google Calendar). It does **not** implement real-time Google → Scheduler push updates (webhooks). If you change events directly in Google Calendar, reload the app (or reload a date range) to see the updated data in Scheduler. +Dieser Ansatz implementiert eine **Zweiseitige Synchronisierung über API-Aufrufe** (Scheduler → Backend → Google Calendar). Er implementiert **keine Echtzeit-Updates von Google → Scheduler per Push (Webhooks)**. Wenn Sie Ereignisse direkt in Google Calendar ändern, laden Sie die App neu (oder laden Sie einen Datumsbereich neu), um die aktualisierten Daten in Scheduler zu sehen. ::: -You will build: +Sie werden Folgendes erstellen: -- a Node.js + Express backend with Google OAuth 2.0 ([Passport](https://www.npmjs.com/package/passport)) and a small REST API for Scheduler -- an event mapping layer (Google ↔ Scheduler), including basic recurring events/exceptions handling -- a Scheduler client wired to the backend via `scheduler.createDataProcessor()` +- ein Node.js + Express-Backend mit Google OAuth 2.0 ([Passport](https://www.npmjs.com/package/passport)) und einer kleinen REST-API für Scheduler +- eine Ereignis-Mapping-Schicht (Google ↔ Scheduler), einschließlich grundlegender Verarbeitung von wiederkehrenden Ereignissen/Ausnahmen +- einen Scheduler-Client, der über `scheduler.createDataProcessor()` mit dem Backend verbunden ist -## Prerequisites +:::note +Der vollständige Quellcode ist auf GitHub verfügbar: [https://github.com/DHTMLX/scheduler-google-calendar-demo](https://github.com/DHTMLX/scheduler-google-calendar-demo) +::: + +## Voraussetzungen - Node.js 18+ -- A Google account with access to Google Cloud Console -- Basic familiarity with TypeScript and Express -- Access to DHTMLX Scheduler packages (the example uses `@dhx/trial-scheduler`) +- Ein Google-Konto mit Zugriff zur Google Cloud Console +- Grundkenntnisse in TypeScript und Express +- Zugriff auf DHTMLX Scheduler-Pakete (das Beispiel verwendet `@dhx/trial-scheduler`) -## Demo repository +## Demo-Repository -A complete working project that matches this guide is available on GitHub: -- https://github.com/dhtmlx/scheduler-google-auth-demo *(placeholder - replace with your actual repo)* +Ein vollständiges, funktionsfähiges Projekt, das dieser Anleitung entspricht, ist auf GitHub verfügbar: +- https://github.com/dhtmlx/scheduler-google-auth-demo -The guide explains the key steps and shows the integration code that matters. The repository is the "full runnable reference". +Die Anleitung erläutert die wichtigsten Schritte und zeigt den relevanten Integrationscode. Das Repository ist die „voll funktionsfähige Referenz“. -## Project setup +## Projektsetup -In this section you will prepare Google OAuth credentials, configure the project, and run the app locally. +In diesem Abschnitt bereiten Sie Google OAuth-Zugangsdaten vor, konfigurieren das Projekt und führen die App lokal aus. -### 1) Get the project code +### 1) Projektcode beziehen -Do one of the following: +Führen Sie eine der folgenden Optionen aus: -- Clone the repository: +- Das Repository klonen: ~~~bash title="Terminal" git clone https://github.com/dhtmlx/scheduler-google-auth-demo.git cd scheduler-google-auth-demo ~~~ -If your project installs `@dhx/*` packages from the private registry, configure npm: +Wenn Ihr Projekt `@dhx/*`-Pakete aus dem privaten Registry installiert, konfigurieren Sie npm: ~~~bash title="Terminal" npm config set @dhx:registry https://npm.dhtmlx.com ~~~ -### 2) Configure Google Cloud (OAuth 2.0) +### 2) Google Cloud (OAuth 2.0) konfigurieren -In this step you will create OAuth credentials that the backend uses to access Google Calendar on behalf of a user. +In diesem Schritt erstellen Sie OAuth-Anmeldeinformationen, die das Backend verwenden kann, um im Namen eines Benutzers auf Google Calendar zuzugreifen. -> The guide uses OAuth in **Testing** mode (recommended for development). In this mode, only users listed as **Test users** can authorize the app. +> Die Anleitung verwendet OAuth im **Testing**-Modus (empfohlen für die Entwicklung). In diesem Modus können sich nur Benutzer autorisieren, die als **Testnutzer** aufgeführt sind. -#### 2.1 Create or select a Google Cloud project +#### 2.1 Google Cloud-Projekt erstellen oder auswählen -1. Open [Google Cloud Console](https://console.cloud.google.com/). -2. Select an existing project or create a new one. +1. Öffnen Sie [Google Cloud Console](https://console.cloud.google.com/). +2. Wählen Sie ein vorhandenes Projekt aus oder erstellen Sie ein neues. -#### 2.2 Enable Google Calendar API +#### 2.2 Google Calendar API aktivieren -1. Go to **APIs & Services → Library**. -2. Search for **Google Calendar API**. -3. Click **Enable**. +1. Gehen Sie zu **APIs & Services → Library**. +2. Suchen Sie nach **Google Calendar API**. +3. Klicken Sie auf **Enable**. -#### 2.3 Configure the OAuth consent screen +#### 2.3 OAuth-Einwilligungskscreen konfigurieren -1. Go to **APIs & Services → OAuth consent screen**. -2. Choose **External** (typical for consumer Google accounts), then click **Create**. -3. Fill in the required fields: +1. Gehen Sie zu **APIs & Services → OAuth consent screen**. +2. Wählen Sie **External** (typisch für Verbraucher-Google-Konten) und klicken Sie auf **Create**. +3. Füllen Sie die erforderlichen Felder aus: - **App name** - **User support email** - **Developer contact email** -4. Set **Publishing status** to **Testing**. -5. Add **Test users**: - - Add the Google accounts you will use to sign in while developing/testing. +4. Setzen Sie **Publishing status** auf **Testing**. +5. Fügen Sie **Test users** hinzu: + - Fügen Sie die Google-Konten hinzu, die Sie zum Sign-in während der Entwicklung/Tests verwenden werden. :::note -If you skip test users in **Testing** mode, Google will block authorization for accounts that are not explicitly added. +Wenn Sie Testnutzer im **Testing**-Modus überspringen, blockiert Google die Autorisierung für Konten, die nicht explizit hinzugefügt wurden. ::: -#### 2.4 Create OAuth client credentials +#### 2.4 OAuth-Client-Anmeldeinformationen erstellen -1. Go to **APIs & Services → Credentials**. -2. Click **Create credentials → OAuth client ID**. -3. Application type: **Web application**. -4. Add this **Authorized redirect URI**: +1. Gehen Sie zu **APIs & Services → Credentials**. +2. Klicken Sie auf **Create credentials → OAuth client ID**. +3. Anwendungstyp: **Web application**. +4. Fügen Sie diesen **Authorized JavaScript origin** hinzu: + +~~~text title="JavaScript origin" +http://localhost:3000 +~~~ + +5. Fügen Sie diese **Authorized redirect URI** hinzu: ~~~text title="Redirect URI" http://localhost:3000/auth/google/callback ~~~ -5. Save and copy: +6. Speichern und kopieren Sie: - **Client ID** - **Client Secret** -#### 2.5 Scope used by this integration +#### 2.5 Von dieser Integration verwendeter Bereich (Scope) -The backend requests Google Calendar access via: +Der Backend verlangt Zugriff auf Google Calendar über: - `https://www.googleapis.com/auth/calendar` -This scope is sufficient for listing calendars and performing event CRUD operations. +Dieser Bereich ist ausreichend zum Auflisten von Kalendern und zur Durchführung von CRUD-Operationen für Ereignisse. -### 3) Configure environment variables +### 3) Umgebungsvariablen konfigurieren -In this step you will provide OAuth credentials and session settings to the backend. +In diesem Schritt geben Sie OAuth-Anmeldeinformationen und Session-Einstellungen an das Backend weiter. -Copy `.env.example` to `.env`, then fill in the values: +Kopieren Sie `.env.example` nach `.env` und füllen Sie die Werte aus: ~~~ini title=".env" -GOOGLE_CLIENT_ID=... -GOOGLE_CLIENT_SECRET=... +GOOGLE_CLIENT_ID= +GOOGLE_CLIENT_SECRET= GOOGLE_REDIRECT_URI=http://localhost:3000/auth/google/callback -SESSION_SECRET=some-long-random-string +SESSION_SECRET=ein-lang-wertvoller-zufälliger-string PORT=3000 ~~~ -### 4) Install dependencies and run +### 4) Abhängigkeiten installieren und starten ~~~bash title="Terminal" npm install npm run start ~~~ -Open: +Öffnen Sie: ~~~text title="App URL" http://localhost:3000 ~~~ -At this point you should be able to click **Add Google Calendars**, sign in, and see Scheduler populated with events. +Zu diesem Zeitpunkt sollten Sie in der Lage sein, **Add Google Calendars** zu klicken, sich anzumelden und Scheduler mit Ereignissen gefüllt zu sehen. --- -## Implementation +## Implementierung -The rest of the guide explains how the integration is put together. If you are adapting this to an existing app, treat each section below as an implementation milestone. +Der Rest des Leitfadens erläutert, wie die Integration zusammengesetzt wird. Wenn Sie dies auf eine vorhandene App anwenden, behandeln Sie jeden Abschnitt unten als Implementierungsmeilenstein. -## Step 1 - Split responsibilities (backend vs client) +## Schritt 1 - Verantwortlichkeiten trennen (Backend vs. Client) -In this step you will separate responsibilities so Scheduler stays a UI component and the backend owns OAuth + Google API calls. +In diesem Schritt trennen Sie die Verantwortlichkeiten, sodass Scheduler eine UI-Komponente bleibt und das Backend OAuth + Google-API-Aufrufe übernimmt. -A typical structure: +Eine typische Struktur: ~~~text title="Project structure" scheduler-google-auth-demo/ @@ -175,18 +185,18 @@ scheduler-google-auth-demo/ .env.example ~~~ -- **server/**: OAuth, token storage (in session), Google Calendar API calls, and REST endpoints for Scheduler -- **client/**: Scheduler init + loading, and [DataProcessor](/guides/server-integration.md) that forwards CRUD actions to the server +- **server/**: OAuth, Token-Speicherung (in der Session), Google Calendar API-Aufrufe und REST-Endpunkte für Scheduler +- **client/**: Scheduler-Initialisierung + Laden der Daten und [DataProcessor](guides/server-integration.md) zur Weiterleitung von CRUD-Aktionen an den Server -## Step 2 - Implement Google OAuth (Express session + Passport) +## Schritt 2 - Google OAuth (Express-Session + Passport) implementieren -In this step you will make the backend able to authenticate a user and store Google access/refresh tokens. +In diesem Schritt machen Sie das Backend in der Lage, einen Benutzer zu authentifizieren und Google Access/Refresh Tokens zu speichern. -### 2.1 Bootstrap the server (sessions + passport) +### 2.1 Server bootstrapen (Sessions + Passport) -Update `server/index.ts` to enable sessions and passport, then mount your routes. +Aktualisieren Sie `server/index.ts`, um Sessions und Passport zu aktivieren, und montieren Sie dann Ihre Routen. -Below is the core wiring (only the relevant parts are shown): +Unten der zentrale Wiring-Ausschnitt (nur relevante Teile gezeigt): ~~~ts title="server/index.ts" app.use( @@ -206,7 +216,9 @@ app.use( app.use(passport.initialize()); app.use(passport.session()); -app.use("/events", eventsRoute); +app.use("/events", (req, res, next) => { + req.isAuthenticated() ? next() : res.status(401).json({ error: "Not authenticated" }); +}, eventsRoute); app.use("/auth", authRoute); app.get("/", (req, res) => { @@ -214,13 +226,23 @@ app.get("/", (req, res) => { }); ~~~ -### 2.2 Configure the Google strategy +Das Inline-Middleware auf `/events` stellt sicher, dass nicht-authentifizierte Anfragen eine `401`-Antwort erhalten statt den Server abstürzen zu lassen, wenn Route-Handler `req` in `AuthenticatedRequest` casten. + +### 2.2 Google-Strategie konfigurieren -Update `server/config/passport.ts` to register `passport-google-oauth20`. +Aktualisieren Sie `server/config/passport.ts`, um `passport-google-oauth20` zu registrieren. -The key idea: keep `accessToken` and `refreshToken` on the user object stored in the session: +Wichtig: Bewahren Sie `accessToken` und `refreshToken` im User-Objekt, das in der Session gespeichert wird: ~~~ts title="server/config/passport.ts" +passport.serializeUser((user: Express.User, done) => { + done(null, user); +}); + +passport.deserializeUser((obj: Express.User, done) => { + done(null, obj); +}); + passport.use( new GoogleStrategy( { @@ -241,12 +263,12 @@ passport.use( ~~~ :::note -Production apps usually persist tokens per user in a database and implement refresh token rotation/revocation. This example keeps tokens in-session to keep the flow easy to follow. +Produktionsanwendungen speichern Tokens typischerweise pro Benutzer in einer Datenbank und implementieren Token-Rotation/Revocation. Dieses Beispiel hält Tokens in der Session, um den Ablauf leicht nachvollziehbar zu halten. ::: -### 2.3 Add OAuth routes +### 2.3 OAuth-Routen hinzufügen -Update `server/routes/auth.route.ts` to expose the OAuth entry point, callback, and logout: +Aktualisieren Sie `server/routes/auth.route.ts`, um den OAuth-Einstiegspunkt, Callback und Logout bereitzustellen: ~~~ts title="server/routes/auth.route.ts" router.get( @@ -269,26 +291,109 @@ router.get("/google/logout", (req, res, next) => { }); ~~~ -At this point you should be able to hit `/auth/google`, complete the Google consent screen, and return to `/` with an authenticated session. +An diesem Punkt sollten Sie in der Lage sein, `/auth/google` zu erreichen, das Google-Einwilligungsfenster abzuschließen und zu `/` mit einer authentifizierten Sitzung zurückzukehren. + +### Google Calendar-Service-Schicht erstellen + +Erstellen Sie `server/services/googleService.ts`, um Google Calendar API v3 CRUD-Methoden zu kapseln. Es wird ein OAuth2-Client aus den Sitzungs-Tokens erstellt und Hilfsfunktionen zum Auflisten von Kalendern, Auflisten von Ereignissen sowie Erstellen/Aktualisieren/Löschen von Ereignissen bereitgestellt: + +~~~ts title="server/services/googleService.ts" +import { google, calendar_v3 } from "googleapis"; +import type { GoogleOAuthTokens } from "../types/auth.types.ts"; +import config from "../config/index.ts"; + +const calendarClient = google.calendar("v3"); + +function oauthClient(tokens: GoogleOAuthTokens) { + const client = new google.auth.OAuth2( + config.GOOGLE_CLIENT_ID, + config.GOOGLE_CLIENT_SECRET, + config.GOOGLE_REDIRECT_URI + ); + client.setCredentials({ + access_token: tokens.accessToken, + refresh_token: tokens.refreshToken, + }); + return client; +} + +/* ------ CRUD-Helper ------- */ + +export async function listCalendars(tokens: GoogleOAuthTokens): Promise { + const { data } = await calendarClient.calendarList.list({ auth: oauthClient(tokens) }); + return data.items ?? []; +} + +export async function listEvents( + tokens: GoogleOAuthTokens, + opts: calendar_v3.Params$Resource$Events$List +): Promise { + const { data } = await calendarClient.events.list({ + auth: oauthClient(tokens), + ...opts, + }); + return data.items ?? []; +} -## Step 3 - Expose a REST API for Scheduler CRUD +export async function createEvent( + tokens: GoogleOAuthTokens, + calendarId: string | undefined, + gEvent: calendar_v3.Schema$Event +): Promise { + const { data } = await calendarClient.events.insert({ + auth: oauthClient(tokens), + calendarId: calendarId || "primary", + requestBody: gEvent, + conferenceDataVersion: 1, + }); + return data; +} + +export async function updateEvent( + tokens: GoogleOAuthTokens, + calendarId: string | undefined, + eventId: string, + gPatch: calendar_v3.Schema$Event +): Promise { + const { data } = await calendarClient.events.patch({ + auth: oauthClient(tokens), + calendarId: calendarId || "primary", + eventId, + requestBody: gPatch, + }); + return data; +} + +export async function deleteEvent( + tokens: GoogleOAuthTokens, + calendarId: string | undefined, + eventId: string +): Promise { + await calendarClient.events.delete({ + auth: oauthClient(tokens), + calendarId: calendarId || "primary", + eventId, + }); +} +~~~ -In this step you will implement the API contract Scheduler uses: +## Schritt 3 - REST-API für Scheduler CRUD freischalten -- `GET /events` - load calendars + events -- `POST /events` - create -- `PUT /events/:eventId` - update -- `DELETE /events/:eventId` - delete +In diesem Schritt implementieren Sie den API-Vertrag, den Scheduler verwendet: -### 3.1 Load calendars + events (GET /events) +- `GET /events` – Kalender + Ereignisse laden +- `POST /events` – Erstellen +- `PUT /events/:eventId` – Aktualisieren +- `DELETE /events/:eventId` – Löschen -Update `server/routes/events.route.ts` to return: +### 3.1 Kalender + Ereignisse laden (GET /events) +Aktualisieren Sie `server/routes/events.route.ts`, um Folgendes zurückzugeben: -- `data` containing Scheduler-style events -- `collections.calendars` containing list of calendars that will be [available on the client]](/guides/loading-data.md#collections) +- `data` mit Scheduler-ähnlichen Ereignissen +- `collections.calendars` mit der Liste der Kalender, die dem Client zur Verfügung stehen werden (siehe [Loading data](guides/loading-data.md#collections)) -Below is a working example handler: +Unten ein funktionsfähiges Handler-Beispiel: ~~~ts title="server/routes/events.route.ts" router.get("/", async (req, res, next) => { @@ -314,7 +419,7 @@ router.get("/", async (req, res, next) => { const googleEvents = await Promise.all( mappedCals.map(async (calendar) => { - const params: Record = { calendarId: calendar.id, timeMin: minDate }; + const params: calendar_v3.Params$Resource$Events$List = { calendarId: calendar.id, timeMin: minDate }; if (maxDate) params.timeMax = maxDate; const calendarEventsResponse = await googleService.listEvents(authedReq.user.tokens, params); @@ -336,13 +441,13 @@ router.get("/", async (req, res, next) => { }); ~~~ -Related docs: [Loading data](/guides/loading-data.md#collections). +Verwandte Dokumente: [Loading data](guides/loading-data.md#collections). -### 3.2 Forward CRUD operations to Google Calendar +### 3.2 Forward CRUD-Operationen an Google Calendar -Update the same route module to handle create/update/delete. +Aktualisieren Sie dieselbe Route-Modul, um Create/Update/Delete abzuwickeln. -Create: +Erstellen: ~~~ts title="server/routes/events.route.ts" router.post("/", async (req, res, next) => { @@ -363,7 +468,7 @@ router.post("/", async (req, res, next) => { }); ~~~ -Update: +Aktualisieren: ~~~ts title="server/routes/events.route.ts" router.put("/:eventId", async (req, res, next) => { @@ -385,15 +490,15 @@ router.put("/:eventId", async (req, res, next) => { }); ~~~ -Delete: +Löschen: ~~~ts title="server/routes/events.route.ts" router.delete("/:eventId", async (req, res, next) => { const authedReq = req as AuthenticatedRequest; const calendarId = (req.body as DhxEvent)?.calendarId as string | undefined; - // If this is an exception occurrence (id contains "_"), there is nothing to delete on Google side. - // Google Calendar removes occurrences when deleting the main recurring event. + // Falls dies ein Ausnahme-Ereignis (ID enthält "_") ist, gibt es nichts zu löschen auf Google-Seite. + // Google Calendar entfernt Vorkommen, wenn das Haupt-Wiederholungsereignis gelöscht wird. const dhxId = req.body?.id as string | undefined; if (typeof dhxId === "string" && dhxId.indexOf("_") > -1) { res.json({ action: "deleted" }); @@ -409,37 +514,41 @@ router.delete("/:eventId", async (req, res, next) => { }); ~~~ -At this point Scheduler can load `/events`, and basic CRUD can be wired on the client. +An diesem Punkt kann Scheduler `/events` laden, und grundlegende CRUD-Operationen können im Client verbunden werden. -## Step 4 - Map Google events to Scheduler events (and back) +## Schritt 4 - Google-Ereignisse zu Scheduler-Ereignissen (und zurück) mappen -In this step you will implement a mapper that converts between: +In diesem Schritt implementieren Sie einen Mapper, der zwischen Folgendem konvertiert: -- Google event fields (`start.dateTime` / `start.date`, `recurrence`, etc.) -- Scheduler event fields (`start_date`, `end_date`, `rrule`, etc.) +- Google-Ereignisfelder (`start.dateTime` / `start.date`, `recurrence`, etc.) +- Scheduler-Ereignisfelder (`start_date`, `end_date`, `rrule`, etc.) -### Key differences you must handle +### Zentrale Unterschiede, die Sie berücksichtigen müssen -1) **All-day vs timed events** -- Google: all-day uses `start.date` / `end.date` -- Google: timed uses `start.dateTime` / `end.dateTime` and may include `timeZone` -- Scheduler: uses `start_date` / `end_date` (Date objects) +1) **All-Day- vs. zeitgebundene Ereignisse** +- Google: All-Day verwendet `start.date` / `end.date` +- Google: Zeitgebunden verwendet `start.dateTime` / `end.dateTime` und kann `timeZone` enthalten +- Scheduler: verwendet `start_date` / `end_date` (Date-Objekte) -2) **Recurrence rules** -- Google stores recurrence as array strings with `RRULE:` prefix -- Scheduler uses `rrule` without the prefix +2) **Wiederholungsregeln** +- Google speichert Wiederholung als Array-Strings mit dem Präfix `RRULE:` +- Scheduler verwendet `rrule` ohne Präfix -3) **Recurring series end date** -- Scheduler expects an `end_date` for recurring series. -- Google may use `UNTIL=` in RRULE, or no UNTIL (infinite series). +3) **Enddatum der Wiederholungsserie** +- Scheduler erwartet ein `end_date` für wiederkehrende Serien. +- Google kann `UNTIL=` in der RRULE verwenden oder keine UNTIL (unendliche Serie). -Related docs: [Recurring events](/guides/recurring-events.md). +Verwandte Dokumente: [Recurring events](guides/recurring-events.md). ### Google → Scheduler -Update `server/mappers/eventMapper.ts` to map the Google event shape into Scheduler's event shape (excerpt below; keep helper functions like `calculateEndDate()` in the same module): +Aktualisieren Sie `server/mappers/eventMapper.ts`, um die Google-Ereignisstruktur in die Scheduler-Ereignisstruktur zu mappen (auszugweise unten; behalten Sie Hilfsfunktionen wie `calculateEndDate()` im selben Modul): ~~~ts title="server/mappers/eventMapper.ts" +import moment from "moment-timezone"; +import type { DhxEvent, MappedCalendar } from "../types/types.ts"; +import type { calendar_v3 } from "googleapis"; + export function toDhxEvent(gEvent: calendar_v3.Schema$Event, calendar: MappedCalendar): DhxEvent { const ev: DhxEvent = { id: gEvent.id as string, @@ -456,7 +565,7 @@ export function toDhxEvent(gEvent: calendar_v3.Schema$Event, calendar: MappedCal const start = gEvent.start; const end = gEvent.end; - // Non-recurring + // Nicht wiederkehrend if (start?.dateTime && end?.dateTime && !gEvent.recurrence?.length) { ev.start_date = new Date(start.dateTime); ev.end_date = new Date(end.dateTime); @@ -465,7 +574,7 @@ export function toDhxEvent(gEvent: calendar_v3.Schema$Event, calendar: MappedCal ev.end_date = new Date(end.date + "T00:00:00"); } - // Recurring + // Wiederkehrend if (gEvent.recurrence?.length) { ev.rrule = String(gEvent.recurrence[0]).replace("RRULE:", ""); @@ -480,7 +589,7 @@ export function toDhxEvent(gEvent: calendar_v3.Schema$Event, calendar: MappedCal ev.end_date = calculateEndDate(gEvent); } - // Exceptions: original start time + // Ausnahmen: ursprüngliche Startzeit if (gEvent.originalStartTime?.dateTime) { ev.original_start = new Date(gEvent.originalStartTime.dateTime); } @@ -489,9 +598,27 @@ export function toDhxEvent(gEvent: calendar_v3.Schema$Event, calendar: MappedCal } ~~~ +### `calculateEndDate()` Hilfsfunktion + +Extrahiert das UNTIL-Datum aus einer Google-Wiederholungsregel oder gibt ein weit in der Zukunft liegendes Datum zurück, falls die Serie unendlich ist. Scheduler erwartet ein `end_date` für wiederkehrende Ereignisse, daher liefert diese Hilfsfunktion eines: + +~~~ts title="server/mappers/eventMapper.ts" +// convert UNTIL=20260129T205959Z -> '2026-01-29T20:59:59Z' if it exists +// if there is no UNTIL -> event repeat infinitely -> return '9999-02-01T00:00:00Z' +function calculateEndDate(gEvent: calendar_v3.Schema$Event): Date { + const until = String(gEvent.recurrence?.[0] ?? "").match(/RRULE:.*?UNTIL=([^;]+)/)?.[1]; + + return until + ? new Date( + until.replace(/^([0-9]{4})([0-9]{2})([0-9]{2})T([0-9]{2})([0-9]{2})([0-9]{2})Z$/, "$1-$2-$3T$4:$5:$6Z") + ) + : new Date(9999, 1, 1); +} +~~~ + ### Scheduler → Google -Update the mapper to convert Scheduler event fields back into Google's schema: +Aktualisieren Sie den Mapper, um Scheduler-Ereignisse wieder in Googles Schema zu konvertieren: ~~~ts title="server/mappers/eventMapper.ts" export function toGoogleEventPayload(dhx: DhxEvent): calendar_v3.Schema$Event { @@ -500,12 +627,14 @@ export function toGoogleEventPayload(dhx: DhxEvent): calendar_v3.Schema$Event { description: dhx.details ?? "", }; + const tz = dhx.timeZone || "UTC"; + if (dhx.start_date && dhx.end_date) { const isAllDay = dhx.duration === 24 * 60 * 60 || new Date(dhx.end_date).getTime() - new Date(dhx.start_date).getTime() === 24 * 60 * 60 * 1000; - // Recurring + // Rekurrent if (dhx.rrule && dhx.duration) { gEvent.recurrence = ["RRULE:" + dhx.rrule]; @@ -514,49 +643,41 @@ export function toGoogleEventPayload(dhx: DhxEvent): calendar_v3.Schema$Event { gEvent.end = { date: moment(dhx.start_date).add(1, "day").format("YYYY-MM-DD") }; } else { gEvent.start = { - dateTime: moment - .tz(new Date(dhx.start_date).toISOString(), "YYYY-MM-DD HH:mm", dhx.timeZone) - .format("YYYY-MM-DDTHH:mm:ssZZ"), - timeZone: dhx.timeZone, + dateTime: moment(new Date(dhx.start_date).toISOString()).tz(tz).format("YYYY-MM-DDTHH:mm:ssZZ"), + timeZone: tz, }; const endDate = new Date(new Date(dhx.start_date).getTime() + dhx.duration * 1000).toISOString(); gEvent.end = { - dateTime: moment.tz(endDate, "YYYY-MM-DD HH:mm", dhx.timeZone).format("YYYY-MM-DDTHH:mm:ssZZ"), - timeZone: dhx.timeZone, + dateTime: moment(endDate).tz(tz).format("YYYY-MM-DDTHH:mm:ssZZ"), + timeZone: tz, }; } } else { - // Non-recurring + // Nicht wiederkehrend if (isAllDay) { gEvent.start = { date: moment(dhx.start_date).format("YYYY-MM-DD") }; gEvent.end = { date: moment(dhx.start_date).add(1, "day").format("YYYY-MM-DD") }; } else { gEvent.start = { - dateTime: moment - .tz(new Date(dhx.start_date).toISOString(), "YYYY-MM-DD HH:mm", dhx.timeZone) - .format("YYYY-MM-DDTHH:mm:ssZZ"), - timeZone: dhx.timeZone, + dateTime: moment(new Date(dhx.start_date).toISOString()).tz(tz).format("YYYY-MM-DDTHH:mm:ssZZ"), + timeZone: tz, }; gEvent.end = { - dateTime: moment - .tz(new Date(dhx.end_date).toISOString(), "YYYY-MM-DD HH:mm", dhx.timeZone) - .format("YYYY-MM-DDTHH:mm:ssZZ"), - timeZone: dhx.timeZone, + dateTime: moment(new Date(dhx.end_date).toISOString()).tz(tz).format("YYYY-MM-DDTHH:mm:ssZZ"), + timeZone: tz, }; } } - // Recurring exceptions support + // Unterstützung für Ausnahmen bei wiederkehrenden Terminen if (dhx.recurring_event_id) { gEvent.recurringEventId = dhx.recurring_event_id.toString(); } if (dhx.original_start) { gEvent.originalStartTime = { - dateTime: moment - .tz(new Date(dhx.original_start).toISOString(), "YYYY-MM-DD HH:mm", dhx.timeZone) - .format("YYYY-MM-DDTHH:mm:ssZZ"), - timeZone: dhx.timeZone, + dateTime: moment(new Date(dhx.original_start).toISOString()).tz(tz).format("YYYY-MM-DDTHH:mm:ssZZ"), + timeZone: tz, }; } if (dhx.deleted) { @@ -568,13 +689,13 @@ export function toGoogleEventPayload(dhx: DhxEvent): calendar_v3.Schema$Event { } ~~~ -## Step 5 - Wire Scheduler to the backend (load + CRUD) +## Schritt 5 - Scheduler an das Backend anbinden (laden + CRUD) -In this step you will initialize Scheduler, load data from `GET /events`, and send CRUD operations to the backend via DataProcessor. +In diesem Schritt initialisieren Sie Scheduler, laden Daten von `GET /events` und senden CRUD-Operationen über DataProcessor an das Backend. -### 5.1 Render a different UI for "authorized vs not authorized" +### 5.1 Unterschiedliche UI für „autorisiert vs. nicht autorisiert“ rendern -Update `client/index.ejs` to expose an authorization flag to the client: +Aktualisieren Sie `client/index.ejs`, um dem Client eine Autorisierungs-Flagge zu übergeben: ~~~html title="client/index.ejs" ~~~ -### 5.2 Initialize Scheduler and load events +### 5.2 Scheduler initialisieren und Ereignisse laden -Update `client/main.ts` to initialize Scheduler and load data once the user is authorized. +Aktualisieren Sie `client/main.ts`, um Scheduler zu initialisieren und Daten zu laden, sobald der Benutzer autorisiert ist. -Only the relevant part is shown: +Nur der relevante Teil ist gezeigt: ~~~ts title="client/main.ts" scheduler.plugins({ recurring: true }); @@ -602,19 +723,19 @@ if (GOOGLE_AUTHORIZED) { } ~~~ -### 5.3 Enable two-way sync with DataProcessor +### 5.3 Zwei-Wege-Synchronisierung aktivieren mit DataProcessor -Update `client/main.ts` to forward Scheduler CRUD actions to the server. +Aktualisieren Sie `client/main.ts`, um Scheduler CRUD-Aktionen an den Server weiterzuleiten. ~~~ts title="client/main.ts" scheduler.createDataProcessor(async (entity, action, data, id) => { const calendars = scheduler.serverList("calendars") as MappedCalendar[]; - // Demo simplification: send everything into the first available calendar. - // In a real app, let users choose a target calendar. + // Demo-Vereinfachung: Senden Sie alles in den ersten verfügbaren Kalender. + // In einer echten App sollten Benutzer einen Zielkalender auswählen. data.calendarId = calendars[0]?.id; - // Provide client timezone so the server can generate correct dateTime values. + // Geben Sie dem Client-Zeitzone an, damit der Server korrekte dateTime-Werte erzeugen kann. data.timeZone = momentTz.tz.guess(); return fetchEvent(action, data, id); @@ -639,41 +760,41 @@ async function fetchEvent(action, data, id) { } ~~~ -Related docs: [DataProcessor](/guides/server-integration.md#technique). +Verwandte Dokumente: [DataProcessor](guides/server-integration.md#technique). -At this point: +Zu diesem Zeitpunkt: -- events from Google Calendar should appear in Scheduler after authorization -- creating/updating/deleting in Scheduler should update Google Calendar +- Ereignisse aus Google Calendar sollten nach der Autorisierung in Scheduler erscheinen +- Erstellen/Ändern/Llöschen in Scheduler sollten Google Calendar aktualisieren --- -## Troubleshooting +## Fehlerbehebung ### "Error 400: redirect_uri_mismatch" -- **Cause:** The redirect URI in Google Cloud credentials does not match your app callback URL. -- **Fix:** Ensure the Authorized redirect URI is exactly: +- Ursache: Die Redirect-URI in den Google Cloud-Anmeldeinformationen stimmt nicht mit der Callback-URL Ihrer App überein. +- Lösung: Stellen Sie sicher, dass die autorisierte Redirect-URI exakt lautet: - `http://localhost:3000/auth/google/callback` ### "Access blocked: app has not completed the Google verification process" -- **Cause:** Consent screen is not in Testing mode or you are not listed as a test user. -- **Fix:** Set Publishing status to **Testing** and add your account in **Test users**. +- Ursache: Die Zustimmungsseite befindet sich nicht im Testing-Modus oder Sie sind nicht als Testbenutzer aufgeführt. +- Lösung: Setzen Sie den Veröffentlichungsstatus auf **Testing** und fügen Sie Ihr Konto unter **Test Users** hinzu. ### "No refresh token returned" -- **Cause:** Google may return a refresh token only the first time the user consents for a given client ID. -- **Fix:** Ensure your auth request includes `accessType: "offline"` and `prompt: "consent"`. If you already authorized before, revoke access in Google Account permissions and authorize again. +- Ursache: Google gibt möglicherweise nur beim ersten Zustimmungsvorgang eines Clients ein Refresh-Token zurück. +- Lösung: Stellen Sie sicher, dass Ihre Auth-Anforderung `accessType: "offline"` und `prompt: "consent"` enthält. Wenn Sie zuvor bereits autorisiert waren, widerrufen Sie die Berechtigungen in Ihrem Google-Konto und autorisieren Sie erneut. -## Summary +## Zusammenfassung -You implemented two-way sync between Scheduler and Google Calendar: +Sie haben eine zweib Diagramm-Synchronisierung zwischen Scheduler und Google Kalender implementiert: -- The backend authenticates users via Google OAuth 2.0 and stores tokens in the session -- Scheduler loads calendars and events through `GET /events` -- Scheduler CRUD operations are forwarded to Google Calendar via `POST/PUT/DELETE /events` -- A mapper converts timed/all-day and recurring events between Google Calendar and Scheduler +- Das Backend authentifiziert Benutzer über Google OAuth 2.0 und speichert Tokens in der Session +- Scheduler lädt Kalender und Ereignisse über `GET /events` +- Scheduler CRUD-Operationen werden über `POST/PUT/DELETE /events` an Google Calendar weitergeleitet +- Ein Mapper konvertiert zeitgesteuerte/all-day und wiederkehrende Ereignisse zwischen Google Calendar und Scheduler -## Demo repository link +## Demo-Repository-Link -Full working source (replace with your real repo): +Vollständige funktionsfähige Quelle: -- https://github.com/dhtmlx/scheduler-google-auth-demo +- https://github.com/DHTMLX/scheduler-google-calendar-demo \ No newline at end of file diff --git a/i18n/de/docusaurus-plugin-content-docs/current/integrations/legacy/backbone-integration.md b/i18n/de/docusaurus-plugin-content-docs/current/integrations/legacy/backbone-integration.md new file mode 100644 index 00000000..16719750 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/integrations/legacy/backbone-integration.md @@ -0,0 +1,54 @@ +--- +title: "Backbone-Integration (Legacy)" +sidebar_label: "Backbone-Integration (Legacy)" +--- + +# Backbone-Integration (Legacy) + +:::warning +Dieser Artikel beschreibt eine veraltete Integration. Wenn Sie neu beginnen, sehen Sie sich die Framework-Integrationen oder das Vanilla-JS-Setup an. +::: + +Seit der Version 4.0 bietet die Bibliothek eine spezielle Erweiterung [**mvc**](guides/extensions-list.md#legacy) an, die es ermöglicht, den Scheduler mit der Backbone-Bibliothek zu integrieren. + +Wenn Sie eine auf Backbone basierende Anwendung haben und dort den Scheduler hinzufügen möchten (wobei die Daten weiterhin mit Backbone verwaltet werden), verwenden Sie die folgende Technik: + +1. Fügen Sie die dhtmlxScheduler-Dateien zur App hinzu: +~~~js + + +~~~ +2. Aktivieren Sie die mvc-Erweiterung auf der Seite: +~~~js +scheduler.plugins({ + mvc: true +}); +~~~ +3. Initialisieren und konfigurieren Sie den Scheduler wie gewohnt: +~~~js +scheduler.full_day = true; + +scheduler.init("scheduler_here",new Date(2019,0,6),"month"); +~~~ +4. Jetzt können Sie eine Daten-Sammlung in Backbone erstellen und den Scheduler damit verknüpfen: +~~~js +//you can use any model here +MyEvent = Backbone.Model.extend({}); +EventList = Backbone.Collection.extend({ + model:MyEvent, + url:"./data/backbone.json" +}); +events = new EventList(); + + +scheduler.backbone(events); //link scheduler to collection +~~~ + +Danach wird der Scheduler Daten aus der Collection laden und alle Aktualisierungen spiegeln. Außerdem lösen Änderungen über die Scheduler-Benutzeroberfläche verwandte Ereignisse in der Backbone-Collection aus. + +Wie Sie sehen, ist es ziemlich einfach. Alles, was Sie brauchen, ist die [backbone](api/method/backbone.md)-Methode zu verwenden statt der üblichen [load](api/method/load.md) oder [parse](api/method/parse.md) Methoden. + +Die [backbone](api/method/backbone.md)-Methode sorgt dafür, dass der Scheduler alle Datenänderungen im Backbone-Modell widerspiegelt und umgekehrt. +Als Parameter akzeptiert die Methode eine Backbone-Collection. + +[Backbone integration](https://docs.dhtmlx.com/scheduler/samples/10_integration/07_backbone.html) \ No newline at end of file diff --git a/i18n/de/docusaurus-plugin-content-docs/current/integrations/legacy/dhtmlx-dnd.md b/i18n/de/docusaurus-plugin-content-docs/current/integrations/legacy/dhtmlx-dnd.md new file mode 100644 index 00000000..67cb0320 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/integrations/legacy/dhtmlx-dnd.md @@ -0,0 +1,72 @@ +--- +title: "Drag-and-Drop aus der DHTMLX Suite v5.x" +sidebar_label: "Drag-and-Drop aus der DHTMLX Suite v5.x" +--- + +# Drag-and-Drop-Operationen (legacy) + +:::warning +Dieser Artikel beschreibt eine veraltete Integration. Wenn Sie neu anfangen, sehen Sie sich die Framework-Integrationen oder das Vanilla-JS-Setup an. +::: + +Die Bibliothek bietet die **outerdrag**-Erweiterung, mit der neue Termine erstellt werden können, indem Elemente aus externen DHTMLX-Komponenten oder anderen Scheduler-Instanzen gezogen werden. + +## Drag-and-Drop von externen Komponenten + +Sobald der Benutzer ein externes Element auf den Scheduler zieht, öffnet der Scheduler das Lightbox-Fenster zur Erstellung eines neuen Termins. + + +![external_dnd](/img/external_dnd.png) + + +[Integration mit dhtmlxTree](https://docs.dhtmlx.com/scheduler/samples/10_integration/02_dhtmlxtree_outer_drag.html) + + +Betrachten wir externes Drag-and-Drop im Kontext der dhtmlxTree-Komponente. + + +Folgen Sie diesen Schritten, um den Scheduler mit der dhtmlxTree zu integrieren: + +1. Laden Sie das dhtmlxTree-Paket herunter und entpacken Sie dessen Inhalt in den [YOUR APPLICATION ROOT]-Ordner +2. Binden Sie die notwendigen JS- und CSS-Dateien auf der Seite ein: +~~~html + + +... +~~~ +3. Aktivieren Sie die [outerdrag](guides/extensions-list.md#outerdrag)-Erweiterung auf der Seite: +~~~js +scheduler.plugins({ + outerdrag: true +}); +~~~ +4. Initialisieren Sie die dhtmlxTree-Komponente (siehe Anweisungen hier) : +~~~js +var tree = new dhtmlXTreeObject("treebox", "100%", "100%", 0); +tree.setImagePath("../common/dhtmlxTree/imgs/csh_yellowbooks/"); +tree.loadXML("./data/tree.xml"); +~~~ +5. Aktivieren Sie Drag-and-Drop in der dhtmlxTree-Komponente (siehe Anweisungen hier) : +~~~js +tree.enableDragAndDrop(true); +~~~ +6. Scheduler initialisieren und konfigurieren: +~~~js +... +scheduler.init('scheduler_here', new Date(2019, 5, 30), "timeline"); +~~~ +7. Fügen Sie einen Handler dem [onExternalDragIn](api/event/onexternaldragin.md)-Ereignis hinzu, um festzulegen, wie der Text des gezogenen Elements in eine Eigenschaft des Termins konvertiert wird: +~~~js +scheduler.attachEvent("onExternalDragIn", function(id, source, event){ + var label = tree.getItemText(tree._dragged[0].id); + scheduler.getEvent(id).text = label; + return true; +}); + +~~~ + + +[Integration mit dhtmlxTree](https://docs.dhtmlx.com/scheduler/samples/10_integration/02_dhtmlxtree_outer_drag.html) + + +Jetzt können Sie ganz einfach neue Termine erstellen, die Baumdaten enthalten – einfach den gewünschten Knoten per Drag-and-Drop ziehen. \ No newline at end of file diff --git a/i18n/de/docusaurus-plugin-content-docs/current/integrations/other/bootstrap.md b/i18n/de/docusaurus-plugin-content-docs/current/integrations/other/bootstrap.md new file mode 100644 index 00000000..44ef02e0 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/integrations/other/bootstrap.md @@ -0,0 +1,47 @@ +--- +title: "Integration mit Bootstrap" +sidebar_label: "Integration mit Bootstrap" +--- + +# Integration mit Bootstrap + +Sie können die Scheduler-Bibliothek in das Bootstrap-Framework integrieren. Um Scheduler in einer Bootstrap-Anwendung hinzuzufügen, befolgen Sie die unten angegebenen Schritte: + +1. Fügen Sie die dhtmlxScheduler-Datei zur Anwendung hinzu: + +~~~html + +~~~ + +2. Geben Sie den HTML-Markup für die Bootstrap-Elemente an und fügen Sie einen Scheduler-Container sowie Header-Elemente hinzu, wie unten: + +~~~html +
+
+
+ dhtmlxScheduler +
+
+ + +
+ +
+
+ +~~~ + +3. Initialisieren und konfigurieren Sie Scheduler wie gewohnt: + +~~~js +scheduler.plugins({ + year_view: true, +}); +scheduler.config.first_hour = 8; +scheduler.config.limit_time_select = true; + +scheduler.init('scheduler_here',new Date(2027,5,30),"week"); +~~~ + +[Bootstrap-Layout](https://docs.dhtmlx.com/scheduler/samples/10_integration/08_bootstrap.html) \ No newline at end of file diff --git a/i18n/de/docusaurus-plugin-content-docs/current/integrations/other/dhxlayout-integration.md b/i18n/de/docusaurus-plugin-content-docs/current/integrations/other/dhxlayout-integration.md new file mode 100644 index 00000000..002e0861 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/integrations/other/dhxlayout-integration.md @@ -0,0 +1,89 @@ +--- +title: "Integration mit dhtmlxLayout" +sidebar_label: "Integration mit dhtmlxLayout" +--- + +# Integration mit dhtmlxLayout + +:::warning +Die beschriebene Funktionalität ist veraltet und wird nicht mehr gepflegt. +::: + +Eine gute Möglichkeit, auf der Seite mehrere Scheduler-Instanzen zu platzieren, ist die Verwendung von dhtmlxLayout. Es bietet nicht nur einen schönen Rahmen, sondern sorgt auch für eine korrekte Interaktion mit anderen Elementen auf der Seite und verhält sich entsprechend bei Änderungen der Seitengröße. + +:::note +Beachten Sie, dass dhtmlxLayout kein Teil der dhtmlxScheduler-Bibliothek ist. +Es gibt zwei Versionen von Layout, aus denen Sie je nach Version der dhtmlxSuite-Bibliothek wählen können. +::: + +## dhtmlxSuite v5+ + +In dieser Version kann dhtmlxLayout als eigenständiges Produkt oder als Teil der dhtmlxSuite-Bibliothek verwendet werden. Um dhtmlxLayout v5.X in Ihr Projekt einzubinden, ist ein [Lizenzerwerb](https://dhtmlx.com/docs/products/dhtmlxSuite/) erforderlich. + +**Um eine dhtmlxScheduler-Instanz an eine Layout-Zelle anzuhängen**, verwenden Sie die [attachScheduler()] Methode. + +**Hinweis**: Das Anhängen des Schedulers an eine Zelle initialisiert ihn automatisch. Konfigurieren Sie daher den Scheduler, bevor Sie ihn in das Layout platzieren. + +~~~js +function init() { + var dhxLayout = new dhtmlXLayoutObject(document.body, "2U"); + + sched1 = Scheduler.getSchedulerInstance(); + sched1.config.multi_day = true; + dhxLayout.cells("a").attachScheduler(new Date(2027,05,30),"week",null,sched1); + sched1.load("/data/units") + + sched2 = Scheduler.getSchedulerInstance(); + dhxLayout.cells("b").attachScheduler(new Date(2027,05,30),"month",null,sched2); + sched2.load("/data/units") +} +~~~ + +[Integration with dhtmlxLayout (dhx_terrace Skin, Suite v5.1)](https://docs.dhtmlx.com/scheduler/samples/10_integration/05_dhtmlxlayout_terrace.html) + + +## dhtmlxSuite v6+ + +Ab dhtmlxSuite 6.0 kann dhtmlxLayout nicht mehr separat von der gesamten Suite-Bibliothek bezogen werden. +Wenn Sie diesen Ansatz verwenden möchten, sollten Sie die Lizenz der [Suite 6.X-Bibliothek](https://dhtmlx.com/docs/products/dhtmlxSuite/#licensing) erwerben. + +Der dhtmlxScheduler der Version 5.3 (whats-new.md#53) und neuer implementiert eine gemeinsame View-Schnittstelle, die in dhtmlxSuite v6+ verwendet wird, und kann [direkt an jede Zelle angehängt werden](https://docs.dhtmlx.com/suite/layout/api/cell/layout_cell_attach_method/): + +~~~js +// create and configure the scheduler instance +scheduler.config.header = [ + "day", + "week", + "month", + "date", + "prev", + "today", + "next" +]; +scheduler.config.multi_day = true; + +// after the scheduler is attached, onSchedulerReady will be fired +scheduler.attachEvent("onSchedulerReady", function () { + requestAnimationFrame(function(){ + // here you can set the initial view and date and load the data + scheduler.setCurrentView(new Date(2027,5,3), "week"); + scheduler.load("../common/events.json"); + }); + +}); + +const layout = new dhx.Layout("layout", { + rows: [{ + id: "scheduler-cell", + header: "Appointment Scheduler", + html:"
" + }] +}); +layout.cell("scheduler-cell").attach(scheduler); +~~~ + +### Hinweise + +- Beachten Sie, dass `dhtmlxSuite Layout` asynchron ist; der Scheduler wird nicht direkt nach dem `.attach`-Aufruf initialisiert. +- Sie müssen das Ereignis `onSchedulerReady` für Nach-Initialisierungseinstellungen erfassen. +- Derzeit gibt es **keine Möglichkeit**, das Scheduler-Markup festzulegen, wenn es zusammen mit dhtmlxSuite v6+ verwendet wird, was bedeutet, dass Sie die [header](api/config/header.md) Konfiguration verwenden müssen, um Steuerelemente des Navigationspanels festzulegen. \ No newline at end of file diff --git a/i18n/de/docusaurus-plugin-content-docs/current/integrations/other/jquery-integration.md b/i18n/de/docusaurus-plugin-content-docs/current/integrations/other/jquery-integration.md new file mode 100644 index 00000000..0f5bc220 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/integrations/other/jquery-integration.md @@ -0,0 +1,33 @@ +--- +title: "jQuery-Integration" +sidebar_label: "jQuery-Integration" +--- + +# jQuery-Integration + +Ab Version 4.0 kann dhtmlxScheduler in jQuery integriert werden. + +Ein Standard-Scheduler, der jQuery verwendet, kann wie folgt initialisiert werden: + +~~~js +$(function(){ + $(".myscheduler").dhx_scheduler({ + date:new Date(2027,4,25), + mode:"month" + }); + + scheduler.load("data/events"); +}); +~~~ + +- **".myscheduler"** - ein jQuery-kompatibler CSS-Selektor des Containers, in dem der Scheduler erstellt wird (in der PRO-Version können Sie den Scheduler gleichzeitig in mehreren Containern initialisieren). +- **dhx_scheduler()** - Methode initialisiert eine Instanz von dhtmlxScheduler. Als Parameter nimmt die Methode ein Konfigurationsobjekt: + - **date** - (*Date*) das anfängliche Datum des Schedulers (standardmäßig das aktuelle Datum) + - **mode** - (*string*) der Name der anfänglichen Ansicht (standardmäßig "week") + - alle weiteren Konfigurationsparameter (in der Regel festgelegt über scheduler.config.xxxxx) können auf diese Weise festgelegt werden + +:::note +Ein über jQuery-Aufruf initialisierter Scheduler kann dieselbe Konfiguration und API verwenden, wie sie auch vom Standard-Scheduler verwendet wird +::: + +[jQuery-Integration](https://docs.dhtmlx.com/scheduler/samples/10_integration/06_jquery.html) \ No newline at end of file diff --git a/i18n/de/docusaurus-plugin-content-docs/current/integrations/react/configuration-props.md b/i18n/de/docusaurus-plugin-content-docs/current/integrations/react/configuration-props.md new file mode 100644 index 00000000..270ab9c4 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/integrations/react/configuration-props.md @@ -0,0 +1,214 @@ +--- +title: Verwendung der DHTMLX Scheduler-Eigenschaften in ReactScheduler +sidebar_label: Konfiguration +description: "Vollständige Referenz der Wrapper-Props, die auf Scheduler-Konfiguration, Vorlagen, Ereignisse und Daten-Callbacks abgebildet sind." +--- + +# Verwendung der DHTMLX Scheduler-Eigenschaften in ReactScheduler + +Diese Seite beschreibt die von **React Scheduler** akzeptierten Props und wie sie auf die APIs von DHTMLX Scheduler abgebildet werden. + +## Verfügbare Props + +| Eigenschaft | Typ | Beschreibung | +|---|---|---| +| `events` | `Event[]` | Zu rendernde Scheduler-Ereignisse. | +| `view` | `"day" \| "week" \| "month" \| "year" \| ...` | Aktive Scheduler-Ansicht. | +| `date` | `Date` | Aktives Datum, das verwendet wird, um die ausgewählte Ansicht zu rendern. | +| `templates` | `SchedulerTemplates` | Ordnet Scheduler-Vorlagen zu (z. B. Ereignis-Stil/ Text-Darstellung). | +| `config` | `SchedulerConfig` | Ordnet Scheduler-Konfigurationsoptionen zu. | +| `xy` | `Record` | UI-Größeneinstellungen (z. B. Ausblenden der eingebauten Navigation mit `nav_height: 0`). | +| `data` | `{ load?: string \| (() => Promise); save?: string \| SaveHandler; batchSave?: BatchSaveHandler }` | Datenlade- und Änderungs-Callback/URLs. | +| `customLightbox` | `ReactElement \| null` | Ersetzt die integrierte Lightbox durch Ihre React-Komponente. | +| `modals` | `SchedulerModals` | Überschreibt integrierte Bestätigungsdialoge (z. B. Bestätigung der Ereignislöschung). | +| `filter` | `(event: Event) => boolean` | Filtert in Scheduler angezeigte Ereignisse. | +| `on` Props | `(...args) => any` | Event-Handler, die den Scheduler-Ereignissen zugeordnet sind (`onViewChange`, `onBeforeLightbox`, etc.). | + +## Basisbeispiel + +```tsx +import ReactScheduler, { + type Event, + type SchedulerConfig, + type SchedulerTemplates, +} from "@dhtmlx/trial-react-scheduler"; +import "@dhtmlx/trial-react-scheduler/dist/react-scheduler.css"; + +const events: Event[] = [ + { + id: 1, + text: "Planning", + start_date: new Date("2025-12-08T09:00:00Z"), + end_date: new Date("2025-12-08T10:00:00Z"), + }, +]; + +const templates: SchedulerTemplates = { + event_class: (_start, _end, event) => event.classname || "", +}; + +const config: SchedulerConfig = { + first_hour: 6, + last_hour: 22, + hour_size_px: 60, +}; + +export default function Demo() { + return ( + + ); +} +``` + +## Data-Prop (`load`, `save`, `batchSave`) + +Verwenden Sie die `data`-Prop, um Scheduler mit Ihrem Backend oder mit dem von React verwalteten Zustand zu verbinden. + +### Verwendung von Backend-URLs + +```tsx + +``` + +### Verwendung von Callback-Handlern + +```tsx + { + if (entity !== "event") return; + + if (action === "create") { + const response = await fetch("/api/events", { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify(item), + }); + + const created = await response.json(); + return { id: created.id }; + } + + if (action === "update") { + await fetch(`/api/events/${id}`, { + method: "PUT", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify(item), + }); + } + + if (action === "delete") { + await fetch(`/api/events/${id}`, { method: "DELETE" }); + } + }, + }} +/> +``` + +## Mapping von Vorlagen und Konfiguration + +`templates` ordnet Scheduler-Template-Funktionen zu, während `config` Scheduler-Konfigurationsoptionen zuordnet. + +```tsx + + event.classname === "important" ? "event-important" : "", + }} + config={{ + first_hour: 7, + last_hour: 21, + time_step: 15, + }} +/> +``` + +## Event-Eigenschaften + +Sie können Scheduler-Ereignisse als React-Props übergeben. + +```tsx + { + console.log("View changed:", mode, date); + }} + onBeforeLightbox={(eventId) => { + console.log("Opening editor for", eventId); + return true; + }} +/> +``` + +Für die vollständige Liste der unterstützten Ereignisse und Callbacks siehe: + +- [Scheduler events overview](api/overview/events_overview.md) +- [Scheduler methods overview](api/overview/methods_overview.md) +- [Scheduler properties overview](api/overview/properties_overview.md) + +## `customLightbox` und `modals` + +Verwenden Sie `customLightbox`, wenn Sie den eingebauten Ereignis-Editor durch Ihre eigene React-Komponente ersetzen möchten. +Verwenden Sie `modals`, wenn Sie benutzerdefinierte Bestätigungsdialoge wünschen. + +```tsx +} + modals={{ + onBeforeEventDelete: ({ event, callback }) => { + if (window.confirm(`Delete "${event.text}"?`)) { + callback(); + } + }, + }} +/> +``` + +## Ereignisse filtern + +```tsx + event.text.toLowerCase().includes(search.toLowerCase())} +} +/> +``` + +## Direkter API-Zugriff über `ref` + +Wenn ein Anwendungsfall nicht durch Props abgedeckt ist, verwenden Sie ein `ref`, um die zugrunde liegende Scheduler-Instanz abzurufen. + +```tsx +import { useEffect, useRef } from "react"; +import ReactScheduler, { type ReactSchedulerRef } from "@dhx/react-scheduler"; + +export default function DirectApiDemo() { + const schedulerRef = useRef(null); + + useEffect(() => { + const scheduler = schedulerRef.current?.instance; + if (!scheduler) return; + + console.log(scheduler.getEvents()); + scheduler.setCurrentView(new Date()); + }, []); + + return ; +} +``` + +## Verwandte Seiten + +- [React Scheduler Overview](integrations/react/overview.md) +- [Data Binding & State Management Basics](integrations/react/state/state-management-basics.md) +- [Quick Start with React Scheduler](integrations/react/quick-start.md) \ No newline at end of file diff --git a/i18n/de/docusaurus-plugin-content-docs/current/integrations/react/copyright.md b/i18n/de/docusaurus-plugin-content-docs/current/integrations/react/copyright.md new file mode 100644 index 00000000..40513ca2 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/integrations/react/copyright.md @@ -0,0 +1,116 @@ +--- +title: "Lizenzen von Drittanbietern" +sidebar_label: "Lizenzen von Drittanbietern" +--- + +# Lizenzen von Drittanbietern + +Diese Seite führt Hinweise zu Drittanbieter-Software und Lizenzbedingungen für Komponenten auf, die als Teil von **DHTMLX React Scheduler** verteilt sind. + +DHTMLX React Scheduler ist eine gebündelte Distribution, die die DHTMLX Scheduler JavaScript-Bibliothek enthält. Folglich gelten alle Drittanbieter-Komponenten, die zusammen mit dem DHTMLX Scheduler verteilt werden, auch für React Scheduler. + +Diese Seite listet außerdem Drittanbieter-Komponenten auf, die spezifisch für den React-Wrapper und für die optionale React-Beispielanwendung gelten. + +## Komponenten, die in DHTMLX React Scheduler gebundene Komponenten sind + +### Inter Font + +Copyright 2020 The Inter Project Authors ([https://github.com/rsms/inter](https://github.com/rsms/inter)) + +Diese Font-Software ist unter der SIL OPEN FONT LICENSE, Version 1.1, lizenziert. +Diese Lizenz ist unten abgedruckt und ist auch mit einer FAQ unter verfügbar: +[https://openfontlicense.org](https://openfontlicense.org) + +#### SIL OPEN FONT LICENSE Version 1.1 - 26. Februar 2007 + +PRÄAMBEL +Die Ziele der Open Font License (OFL) sind es, weltweit die Entwicklung kollaborativer Schriftprojekte zu fördern, die Schriftgestaltung der akademischen und linguistischen Gemeinschaften zu unterstützen und einen freien und offenen Rahmen bereitzustellen, in dem Schriftarten geteilt und in Partnerschaft mit anderen verbessert werden können. + +Die OFL erlaubt es, die lizenzierten Schriftarten frei zu verwenden, zu studieren, zu kopieren, zu verbinden, einzubetten, zu modifizieren, weiterzuverbreiten und modifizierte sowie unveränderte Kopien der Font Software zu verkaufen, vorausgesetzt, dass alle reservierten Namen durch Derivate nicht verwendet werden. Die Schriftarten und ihre Derivate dürfen jedoch nicht unter einer anderen Lizenzart veröffentlicht werden. Die Anforderung, dass Schriftarten unter dieser Lizenz bleiben, gilt nicht für Dokumente, die unter Verwendung der Schrift Software oder ihrer Derivate erstellt wurden. + +DEFINITIONEN +"Font Software" bezieht sich auf den Satz von Dateien, die vom Copyright Holder(s) unter dieser Lizenz freigegeben und eindeutig als solche gekennzeichnet sind. Dies kann Quelldateien, Build-Skripte und Dokumentation umfassen. + +"Reserved Font Name" bezieht sich auf jegliche Namen, die nach der Urheberrechtsangabe als reservierter Name angegeben sind. + +"Original Version" bezieht sich auf die Sammlung von Font Software-Komponenten, wie sie vom Copyright Holder(s) verteilt wird. + +"Modified Version" bezieht sich auf jegliche Derivate, die durch Hinzufügen, Löschen oder Ersetzen – ganz oder teilweise – von Komponenten der Original Version, durch Änderung von Formaten oder durch Portierung der Font Software in eine neue Umgebung entstehen. + +"Author" bezieht sich auf jeden Designer, Ingenieur, Programmierer, technischen Redakteur oder eine andere Person, die zur Font Software beigetragen hat. + +BERECHTIGUNG UND BEDINGUNGEN +Die Berechtigung wird hier frei von Gebühren erteilt, jedem, der eine Kopie der Font Software erhält, die Font Software zu verwenden, zu studieren, zu kopieren, zu verbinden, einzubetten, zu modifizieren, weiterzuverteilen und modifizierte sowie unveränderte Kopien der Font Software zu verkaufen, unter Einhaltung der folgenden Bedingungen: + +1) Weder die Font Software noch einzelne ihrer Bestandteile in Original- oder Mod-Version dürfen eigenständig verkauft werden. + +2) Original- oder Mod-Versionen der Font Software können mit jeder Software gebündelt, weiterverteilt und/oder verkauft werden, vorausgesetzt, jede Kopie enthält den obigen Urheberrechtshinweis und diese Lizenz. Diese können entweder als eigenständige Textdateien, als menschenlesbare Header oder in den entsprechenden maschinenlesbaren Metadatenfeldern innerhalb von Text- oder Binärdateien enthalten sein, solange diese Felder dem Benutzer leicht sichtbar bleiben. + +3) Keine modifizierte Version der Font Software darf den Reserved Font Name(s) verwenden, es sei denn, ausdrückliche schriftliche Genehmigung wird durch den entsprechenden Copyright Holder erteilt. Diese Einschränkung bezieht sich nur auf den primären Schriftartnamen, der dem Benutzer präsentiert wird. + +4) Die Namen der Copyright Holder(s) oder der Author(s) der Font Software dürfen nicht verwendet werden, um eine modifizierte Version zu bewerben, zu unterstützen oder zu empfehlen, außer um den Beitrag der Copyright Holder(s) und der Author(s) anzuerkennen oder mit deren ausdrücklicher schriftlicher Genehmigung. + +5) Die Font Software, modifiziert oder unverändert, ganz oder teilweise, muss vollständig unter dieser Lizenz verbreitet werden und darf nicht unter einer anderen Lizenz veröffentlicht werden. Die Anforderung, dass Schriftarten unter dieser Lizenz bleiben, gilt nicht für Dokumente, die unter Verwendung der Font Software erstellt wurden. + +TERMINATION +Diese Lizenz wird unwirksam, wenn eine der oben genannten Bedingungen nicht erfüllt wird. + +DISCLAIMER +DIE FONT SOFTWARE WIRD OHNE JEGLICHE GARANTIE GELIEFERT, IN JEGLICHER FORM, AUSDRÜCKLICH ODER STILLSCHWEIGEND, EINSCHLIESSLICH ABER NICHT BESCHRÄNKT AUF JEGLICHE GARANTIEN DER VERKAUFBARKEIT, TAUGLICHKEIT FÜR EINEN BESTIMMTEN ZWECK UND NICHTVERLETZUNG VON URheber-, PATENT-, MARKENRECHTEN ODER ANDEREN RECHTEN. UNTER KEINEN UMSTÄNDEN IST DER INHABER DES URHEBERRECHTS FÜR ANSPRÜCHE, SCHÄDEN ODER SONSTIGE VERANTWORTLICHKEIT VERANTWORTLICH, OB IN EINEM VERTRAGSVERHALTEN, EINER KLAGE ODER EINER ANDEREN RECHTSFORM, AUS DER VERWENDUNG ODER NICHT VERWENDUNG DER FONT SOFTWARE ODER AUS ANDEREN GESCHÄFTEN MIT DER FONT SOFTWARE. + +### lodash-es + +Der React Scheduler Wrapper bündelt **[lodash-es](https://www.npmjs.com/package/lodash-es)** für Laufzeit-Funktionalität. + +Urheberrecht OpenJS Foundation und andere Mitwirkende https://openjsf.org/ + +Basierend auf Underscore.js, Urheberrecht Jeremy Ashkenas, DocumentCloud und Investigative Reporters & Editors http://underscorejs.org/ + +Diese Software besteht aus freiwilligen Beiträgen vieler Einzelpersonen. Für die genaue Beitragshistorie siehe die revisionshistorie, verfügbar unter https://github.com/lodash/lodash + +Die folgende Lizenz gilt für alle Teile dieser Software, außer wie unten dokumentiert: + +#### MIT-Lizenz + +Erlaubt wird hier frei, unentgeltlich jeder Person, die eine Kopie dieser Software und der zugehörigen Dokumentationsdateien (die „Software“), zu behandeln, die Software ohne Einschränkungen zu verwenden, einschließlich ohne Beschränkung der Rechte zur Nutzung, Kopie, Änderung, Zusammenführung, Veröffentlichung, Verbreitung, Lizenzvergabe und/oder Verkauf von Kopien der Software, und Personen, denen die Software zur Verfügung gestellt wird, dies zu gestatten, unter den folgenden Bedingungen: + +Der obige Urheberrechtshinweis und dieser Genehmigungshinweis sind in allen Kopien oder wesentlichen Teilen der Software beizufügen. + +DIE SOFTWARE WIRD OHNE JEGLICHE GARANTIE ANGEBOTEN, OHNE GARANTIEN JEGLICHER Art, AUSDRÜCKLICH ODER STILLSCHWEIGEND, EINSCHLIESSLICH, ABER NICHT BESCHRÄNKT AUF DIE GARANTIEN DER MARKTFÄHIGKEIT, EIGNUNG FÜR EINEN BESTIMMTEN ZWECK UND NICHTVERLETZUNG VON RECHTEN. + +DIE AUTORIN UND DIE RECHTEINHABER SIND NICHT FÜR ANSPRÜCHE, SCHÄDEN ODER SONSTIGE VERANTWORTLICHKEIT GEGENÜBER DEM NUTZER VERANTWORTLICH, WURDE DIE VERWENDUNG DER SOFTWARE ODER ANDEREN VERHALTENS BEZÜGLICH DER SOFTWARE ERREICHEN, ENTWICKELT ODER VERWENDET. + +==== + +Urheber- und verwandte Rechte für Beispielcode werden über CC0 verzichtet. Beispielcode ist definiert als sämtlicher Quellcode, der innerhalb des Fließtexts der Dokumentation angezeigt wird. + +CC0: http://creativecommons.org/publicdomain/zero/1.0/ + +==== + +In den node_modules- und vendor-Verzeichnissen befindliche Dateien sind extern gepflegte Bibliotheken, die von dieser Software verwendet werden und eigene Lizenzen haben; wir empfehlen, dass Sie diese lesen, da deren Bedingungen von den oben genannten Bedingungen abweichen können. + + +## Komponenten, die in der React Scheduler-Beispielanwendung verwendet werden + +DHTMLX React Scheduler kann zusammen mit einer optionalen Beispielanwendung verteilt werden. Die folgenden Drittanbieter-Komponenten werden **nur in der Beispielanwendung** verwendet und **sind kein Bestandteil der React Scheduler-Bibliothek selbst**. + +Diese Abhängigkeiten sind in der `package.json` der Beispielanwendung aufgeführt. + +### React-Ökosystem und UI-Bibliotheken + +Die Beispielanwendung verwendet Drittanbieter-Bibliotheken wie: + +- React +- React DOM +- Ant Design +- Material UI +- Emotion +- React Router +- Day.js +- React Draggable +- Basis-UI-Komponenten + +Diese Bibliotheken stehen unter ihren jeweiligen Open-Source-Lizenzen (MIT, Apache License 2.0 oder ähnliche permissive Lizenzen), wie vom Autor angegeben. + +Die Beispielanwendung dient ausschließlich Demonstrationszwecken. Lizenzverpflichtungen für diese Komponenten gelten nur, wenn die Beispielanwendung weiterverteilt oder geändert wird. \ No newline at end of file diff --git a/i18n/de/docusaurus-plugin-content-docs/current/integrations/react/firebase-integration.md b/i18n/de/docusaurus-plugin-content-docs/current/integrations/react/firebase-integration.md new file mode 100644 index 00000000..4bcb7b21 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/integrations/react/firebase-integration.md @@ -0,0 +1,210 @@ +--- +title: React Scheduler und Firebase-Integration +sidebar_label: Firebase Schnellstart +description: "Bauen Sie einen Echtzeit-kollaborativen React Scheduler, der über Firebase Firestore synchronisiert wird." +--- + +# React Scheduler und Firebase-Integration + +Dieses Tutorial zeigt, wie man **React Scheduler** mit **Firebase Firestore** für die Echtzeit-Synchronisation mehrerer Benutzer verbindet. + +Sie werden bauen: + +- eine Scheduler-Seite, basierend auf React-State (`events`) +- Firestore-Listener für Live-Updates +- eine `data.save`-Bridge für Erstellen/Aktualisieren/Löschen + +## Schritt 1. Projekt erstellen + +```bash +npm create vite@latest react-scheduler-firebase -- --template react-ts +cd react-scheduler-firebase +npm install firebase +``` + +Installieren Sie React Scheduler wie beschrieben in der [React Scheduler Installationsanleitung](integrations/react/installation.md). + +Für Evaluation: + +```bash +npm install @dhtmlx/trial-react-scheduler +``` + +Für das Profi-Paket ersetzen Sie die Trial-Imports durch `@dhx/react-scheduler`. + +## Schritt 2. Firebase konfigurieren + +In der Firebase-Konsole: + +1. Ein Projekt erstellen. +2. Die Firestore-Datenbank aktivieren. +3. Eine Web-App registrieren und die Firebase-Konfiguration kopieren. + +Füge `.env` hinzu: + +```env +VITE_FIREBASE_CONFIGURATION={"apiKey":"YOUR_API_KEY","authDomain":"YOUR_AUTH_DOMAIN","projectId":"YOUR_PROJECT_ID","storageBucket":"YOUR_STORAGE_BUCKET","messagingSenderId":"YOUR_MESSAGING_SENDER_ID","appId":"YOUR_APP_ID"} +``` + +Erstelle `src/firebase.ts`: + +```ts +import { initializeApp } from "firebase/app"; +import { collection, getFirestore, query } from "firebase/firestore"; + +const firebaseConfig = JSON.parse(import.meta.env.VITE_FIREBASE_CONFIGURATION); + +const app = initializeApp(firebaseConfig); +const db = getFirestore(app); + +const eventsCollection = collection(db, "events"); +const eventsQuery = query(eventsCollection); + +export { db, eventsCollection, eventsQuery }; +``` + +## Schritt 3. Seed und Typen vorbereiten + +Erstelle `src/seed/data.ts`: + +```ts +import type { Event as SchedulerEvent } from "@dhtmlx/trial-react-scheduler"; + +export const seedEvents: SchedulerEvent[] = [ + { + id: "event_1", + text: "Planning", + start_date: "2025-12-08T09:00:00Z", + end_date: "2025-12-08T10:00:00Z", + }, + { + id: "event_2", + text: "Client call", + start_date: "2025-12-08T11:00:00Z", + end_date: "2025-12-08T12:00:00Z", + }, +]; +``` + +## Schritt 4. Scheduler rendern und Events laden + +Erstelle `src/components/Scheduler.tsx`: + +```tsx +import { useEffect, useMemo, useState } from "react"; +import ReactScheduler, { type Event as SchedulerEvent } from "@dhtmlx/trial-react-scheduler"; +import "@dhtmlx/trial-react-scheduler/dist/react-scheduler.css"; + +import { + addDoc, + deleteDoc, + doc, + getDocs, + onSnapshot, + updateDoc, + type QueryDocumentSnapshot, + type QuerySnapshot, +} from "firebase/firestore"; + +import { db, eventsCollection, eventsQuery } from "../firebase"; + +const mapDoc = (snap: QueryDocumentSnapshot): SchedulerEvent => { + const data = snap.data(); + return { + ...data, + id: snap.id, + } as SchedulerEvent; +}; + +export default function SchedulerWithFirebase() { + const [events, setEvents] = useState([]); + + useEffect(() => { + let mounted = true; + + (async () => { + const initial = await getDocs(eventsQuery); + if (!mounted) return; + setEvents(initial.docs.map(mapDoc)); + })(); + + const unsubscribe = onSnapshot(eventsQuery, (snapshot: QuerySnapshot) => { + const nextEvents = snapshot.docs.map(mapDoc); + setEvents(nextEvents); + }); + + return () => { + mounted = false; + unsubscribe(); + }; + }, []); + + const data = useMemo( + () => ({ + save: async ( + entity: string, + action: string, + raw: SchedulerEvent, + id: string | number + ) => { + if (entity !== "event") return; + + if (action === "create") { + const created = await addDoc(eventsCollection, { + ...raw, + id: undefined, + }); + + return { id: created.id }; + } + + const targetId = String(raw?.id ?? id); + const targetRef = doc(db, "events", targetId); + + if (action === "update") { + await updateDoc(targetRef, { ...raw }); + return; + } + + if (action === "delete") { + await deleteDoc(targetRef); + } + }, + }), + [] + ); + + return ( +
+ +
+ ); +} +``` + +## Schritt 5. In der App einbinden + +Ersetze `src/App.tsx`: + +```tsx +import SchedulerWithFirebase from "./components/Scheduler"; + +export default function App() { + return ; +} +``` + +## Hinweise zur Synchronisation + +- Firestore `onSnapshot` hält alle verbundenen Clients synchron. +- Die Rückgabe von `{ id: created.id }` in `data.save` sorgt dafür, dass Scheduler temporäre IDs durch Firestore-Dokument-IDs ersetzt. +- Halten Sie Sicherheitsregeln vor dem Produktionseinsatz streng. + +## Verwandte Seiten + +- [Datenbindung & Grundlagen der Zustandsverwaltung](integrations/react/state/state-management-basics.md) +- [React Scheduler Überblick](integrations/react/overview.md#bindingdata) +- [Server-Integration](guides/server-integration.md) \ No newline at end of file diff --git a/i18n/de/docusaurus-plugin-content-docs/current/integrations/react/index.md b/i18n/de/docusaurus-plugin-content-docs/current/integrations/react/index.md new file mode 100644 index 00000000..fb6d6e5d --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/integrations/react/index.md @@ -0,0 +1,42 @@ +--- +title: "React Scheduler" +sidebar_label: React Scheduler +description: "Installieren, konfigurieren und verwenden Sie DHTMLX Scheduler in React mit dem offiziellen Wrapper." +image: /img/frameworks/react.png +--- + +React Scheduler ist der offizielle React-Wrap für DHTMLX Scheduler. Es ermöglicht Ihnen, den Scheduler als React-Komponente zu verwenden, während gleichzeitig die vollständige Konfigurations-API unterstützt wird. + +Wenn Sie eine vollständige Beschreibung wünschen, wie React Scheduler funktioniert und welche Funktionen es bietet, beginnen Sie mit der [Übersicht](integrations/react/overview.md). + +## Erste Schritte + +Wenn Sie neu beim Wrapper sind, folgen Sie dieser Reihenfolge: + +1. [Installation](integrations/react/installation.md) – wählen Sie die Evaluation (öffentliches npm) oder Professional (privates npm) Version von React Scheduler. +2. [Schnellstart](integrations/react/quick-start.md) – Rendern Sie Ihren ersten Scheduler und überprüfen Sie die Einrichtung. +3. [Konfiguration](integrations/react/configuration-props.md) – Erfahren Sie, wie Sie mit Props, Templates und Event-Handlern arbeiten. + +## Framework-Integrationen + +Wenn Ihre App mit einem Meta-Framework aufgebaut ist, verwenden Sie diese Guides für eine framework-gerechte Einrichtung: + +- [Next.js](integrations/react/nextjs.md) - Client-Komponenten-Setup und gängige SSR-Einschränkungen +- [Remix](integrations/react/remix.md) - routenbasierte Einrichtung und Integrationshinweise + +## Wählen Sie ein Datenbindungsmodell + +React Scheduler unterstützt zwei Ansätze der Datenbindung: + +- **Von React verwaltete Daten** (empfohlen für die meisten React-Apps). Sie halten Ereignisse in React oder in einem Zustandsmanager, übergeben sie als Props und behandeln Aktualisierungen über die Callback-Funktionen `data.save`/`data.batchSave`. +- **Vom Scheduler verwaltete Daten** (nützlich in spezialisierten, leistungsintensiven Fällen). Sie initialisieren Daten einmal und überlassen Scheduler (und Ihr Backend) den Lebenszyklus der Daten. React wendet aktualisierte Props nach jeder Änderung nicht erneut an. + +Um beide Ansätze und deren Vor- und Nachteile zu verstehen, lesen Sie die [Grundlagen der Datenbindung und Zustandsverwaltung](integrations/react/state/state-management-basics.md). + +## Tutorials zu Daten & Zustand + +Wenn Sie eine Zustandsverwaltungsbibliothek verwenden, zeigen die Anleitungen in [Daten- und Zustandsverwaltung](/integrations/react/state/) dasselbe Integrationsmuster, das für jede Bibliothek implementiert ist (Redux Toolkit, Zustand, MobX und mehr), plus Echtzeit-Synchronisierung mit Firebase. + +## Beispiele und Evaluationsressourcen + +Wenn Sie React Scheduler evaluieren, bietet die Evaluationsseite technischen Support während der Evaluierungsphase. Siehe [Installation](integrations/react/installation.md). \ No newline at end of file diff --git a/i18n/de/docusaurus-plugin-content-docs/current/integrations/react/installation.md b/i18n/de/docusaurus-plugin-content-docs/current/integrations/react/installation.md new file mode 100644 index 00000000..736aa516 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/integrations/react/installation.md @@ -0,0 +1,77 @@ +--- +title: React Scheduler installieren +sidebar_label: Installation +description: "Wie man die Evaluierungs- oder kommerzielle Version von React Scheduler über npm installiert." +--- + +# React Scheduler installieren + +React Scheduler ist in zwei Distributionen erhältlich: + +1. **Evaluierungsversion** öffentlich verfügbar auf npm, enthält ein Evaluierungs-Wasserzeichen und kann optional mit einer kostenlosen Evaluierungsphase kombiniert werden, die Zugriff auf technischen Support gewährt. +2. **Professionelle (kommerziell) Version** verfügbar aus dem privaten DHTMLX npm-Repository und für die Produktion gedacht. + +Beide Pakete enthalten dieselbe API. + +## Installation der Evaluierungsversion (öffentliches npm) + +Die Evaluierungsversion ist auf npm verfügbar unter [@dhtmlx/trial-react-scheduler](https://www.npmjs.com/package/@dhtmlx/trial-react-scheduler): + +~~~bash +npm install @dhtmlx/trial-react-scheduler +~~~ + +Oder mit Yarn: + +~~~bash +yarn add @dhtmlx/trial-react-scheduler +~~~ + +Dieses Build ist vollständig funktionsfähig, zeigt jedoch eine Meldung an, dass die Bibliothek im Evaluierungsmodus läuft. + +### Optional: Eine vollständige Evaluierungsperiode starten (empfohlen) + +Obwohl das Trial-Paket ohne Einschränkungen installiert wird, können Sie auch eine offizielle Evaluierung über die Website starten unter +[https://dhtmlx.com/docs/products/dhtmlxScheduler-for-React/download.shtml](https://dhtmlx.com/docs/products/dhtmlxScheduler-for-React/download.shtml). + +Die Durchführung einer formellen Evaluierung bietet Ihnen während der Testphase kostenlosen technischen Support. + +**Offline-Beispiele herunterladen (ZIP)** + +Das Evaluierungsformular enthält außerdem eine herunterladbare ZIP-Datei mit offline einsatzbereiten Beispielen. + +Sie können auch weitere Beispiele und Demo-Projekte auf dem offiziellen GitHub ansehen, indem Sie [React Scheduler-Demos auf GitHub](https://github.com/DHTMLX/?q=react-scheduler&type=all&language=&sort=) aufrufen. + +## Professionelle Version (privates npm) + +Die professionelle Version wird für produktive Anwendungen verwendet und umfasst kommerzielle Lizenzen sowie vollen Zugriff auf den technischen Support. + +Nachdem Sie eine kommerzielle Lizenz erhalten haben, können Sie Ihre privaten npm-Anmeldedaten im [Kundenbereich](https://dhtmlx.com/clients/) generieren. + +Nachdem Sie Ihren Login/Passwort generiert haben, konfigurieren Sie npm: + +~~~bash +npm config set @dhx:registry=https://npm.dhtmlx.com +npm login --registry=https://npm.dhtmlx.com --scope=@dhx +~~~ + +Dann installieren Sie das Professional-Paket: + +~~~bash +npm install @dhx/react-scheduler +~~~ + +Oder, mit Yarn: + +~~~bash +yarn add @dhx/react-scheduler +~~~ + +## Nächste Schritte + +Nach der Installation fortfahren mit: + +- [Schnellstart](integrations/react/quick-start.md) +- [Übersicht](integrations/react/overview.md) +- [Datenbindung & Grundlagen der Zustandsverwaltung](integrations/react/state/state-management-basics.md) +- [Framework-Anleitungen](/category/framework-integrations/) \ No newline at end of file diff --git a/i18n/de/docusaurus-plugin-content-docs/current/integrations/react/js-scheduler-react.md b/i18n/de/docusaurus-plugin-content-docs/current/integrations/react/js-scheduler-react.md index fd408c2b..22e773cf 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/integrations/react/js-scheduler-react.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/integrations/react/js-scheduler-react.md @@ -5,15 +5,15 @@ sidebar_label: "dhtmlxScheduler mit React" # dhtmlxScheduler mit React -Diese Anleitung setzt grundlegende Kenntnisse in [React](https://react.dev/) voraus. Wenn Sie neu bei React sind, empfiehlt es sich, zunächst die [React-Dokumentation](https://legacy.reactjs.org/docs/getting-started.html) für ein einführendes Tutorial zu lesen. +Sie sollten mit den grundlegenden Konzepten und Mustern von [React](https://react.dev/) vertraut sein, um diese Dokumentation zu verwenden. Wenn Sie das nicht tun, lesen Sie bitte die [React-Dokumentation](https://react.dev/learn) für eine erste Einstiegstutorial. -DHTMLX Scheduler funktioniert gut mit React. Ein passendes Beispiel finden Sie auf GitHub: [DHTMLX Scheduler mit React Demo](https://github.com/DHTMLX/react-scheduler-demo). +DHTMLX Scheduler ist mit React kompatibel. Sie können das entsprechende Beispiel auf GitHub prüfen: [DHTMLX Scheduler with React Demo](https://github.com/DHTMLX/react-scheduler-demo). -## Erstellen eines Projekts +## Erstellung eines Projekts -Stellen Sie vor dem Erstellen Ihres Projekts sicher, dass [Node.js](https://nodejs.org/en/) installiert ist. +Bevor Sie ein neues Projekt erstellen, installieren Sie [Node.js](https://nodejs.org/en/). -Um ein einfaches React-Projekt zu erstellen, führen Sie folgenden Befehl aus: +Sie können ein grundlegendes React-Projekt mit dem folgenden Befehl erstellen: ~~~ npx create-vite my-react-scheduler-app --template react @@ -21,22 +21,22 @@ npx create-vite my-react-scheduler-app --template react ### Installation der Abhängigkeiten -Navigieren Sie anschließend in Ihr App-Verzeichnis. In diesem Beispiel verwenden wir **my-react-scheduler-app**: +Als Nächstes sollten Sie in das App-Verzeichnis wechseln. Nennen wir unser Projekt **my-react-scheduler-app** und führen folgende Befehle aus: ~~~ cd my-react-scheduler-app ~~~ -Installieren Sie dann die Abhängigkeiten und starten Sie den Entwicklungsserver mit dem bevorzugten Paketmanager: +Anschließend sollten Sie Abhängigkeiten installieren und den Entwicklungsserver starten. Dafür benötigen Sie einen Paketmanager: -- Mit yarn: +- Wenn Sie yarn verwenden, führen Sie die folgenden Befehle aus: ~~~ yarn install yarn dev ~~~ -- Mit npm: +- Wenn Sie npm verwenden, führen Sie die folgenden Befehle aus: ~~~ npm install @@ -49,46 +49,48 @@ Ihr React-Projekt sollte nun unter **http://localhost:5173** laufen. ## Scheduler erstellen -Um den DHTMLX Scheduler hinzuzufügen, stoppen Sie zunächst die App mit **Strg+C** in der Kommandozeile. Installieren Sie danach das Scheduler-Paket. +Jetzt sollten wir den DHTMLX Scheduler-Code holen. Zunächst müssen Sie die Anwendung beenden, indem Sie **Ctrl+C** in der Kommandozeile drücken. Danach können wir mit der Installation des Scheduler-Pakets fortfahren. ## Schritt 1. Paketinstallation -Die PRO-Versionen der Bibliothek sind über **npm/yarn** aus unserem privaten Repository verfügbar. Bitte folgen Sie -[dieser Anleitung](/guides/installation.md#npmevaluationandproversions), um Zugriff zu erhalten. +Die PRO-Versionen der Bibliothek sind für die **npm/yarn**-Installation aus unserem privaten Repository verfügbar. Bitte folgen Sie +[dieser Anleitung](guides/installation.md#npm---evaluation-and-pro versions), um Zugriff darauf zu erhalten. -Sobald Sie die Evaluierungsversion des Schedulers haben, installieren Sie sie mit einem der folgenden Befehle: +Nachdem Sie die Evaluierungsversion des Schedulers erhalten haben, können Sie ihn mit den folgenden Befehlen installieren: -- Mit npm: +- für npm: ~~~ npm install @dhx/trial-scheduler ~~~ -- Mit yarn: +- für yarn: ~~~ yarn add @dhx/trial-scheduler ~~~ -Alternativ können Sie das Paket auch -[aus einem lokalen Ordner installieren](/guides/installation.md#installfromlocalfolder), da das ZIP-Paket der Bibliothek als **npm**-Modul strukturiert ist. +Alternativ, da das ZIP-Paket der Bibliothek als **npm**-Modul strukturiert ist, können Sie +[aus einem lokalen Ordner installieren](guides/installation.md#installing-the-package-from-a-local-folder). -## Schritt 2. Komponentenerstellung +## Schritt 2. Erstellung der Komponente -Erstellen Sie als Nächstes eine React-Komponente, um den Scheduler zu Ihrer App hinzuzufügen. Legen Sie einen Ordner ***src/components/Scheduler*** an und erstellen Sie darin die Dateien: ***Scheduler.jsx***, ***Scheduler.css*** und ***index.js***. +Nun sollten wir eine React-Komponente erstellen, um einen Scheduler in die Anwendung einzubinden. Erstellen wir dazu den Ordner ***src/components/Scheduler***. +Hier erstellen wir die Dateien ***Scheduler.jsx***, ***Scheduler.css*** und ***index.js***. -Beginnen Sie mit ***Scheduler.css*** und fügen Sie folgende Styles für den *scheduler-container* hinzu: +Wir müssen die ***Scheduler.css***-Datei erstellen und Stile für den *scheduler-container* hinzufügen: -~~~js title="src/components/Scheduler/Scheduler.css" + +~~~css title="src/components/Scheduler/Scheduler.css" .scheduler-container { height: 100vh; width: 100vw; } ~~~ -Damit der Scheduler-Container den gesamten Body ausfüllt, entfernen Sie die Standard-Styles aus ***App.css*** im ***src***-Ordner und fügen Sie Folgendes hinzu: +Um den Scheduler-Container den gesamten Platz des Bodys einnehmen zu lassen, entfernen Sie die Standard-Stile aus der ***App.css***-Datei im ***src***Ordner und fügen Sie Folgendes hinzu: -~~~ +~~~css #root { margin: 0; padding: 0; @@ -97,7 +99,8 @@ Damit der Scheduler-Container den gesamten Body ausfüllt, entfernen Sie die Sta } ~~~ -Legen Sie dann die Datei ***index.js*** mit folgendem Inhalt an: +Und fügen Sie die ***index.js***-Datei mit dem folgenden Inhalt hinzu: + ~~~js title="src/components/Scheduler/index.js" import Scheduler from './Scheduler'; @@ -105,29 +108,31 @@ import './Scheduler.css'; export default Scheduler; ~~~ -### Importieren der Quell-Dateien +### Importieren von Quelldateien + +Öffnen Sie die neu erstellte ***Scheduler.jsx***-Datei und importieren Sie die Scheduler-Quelldateien. Beachten Sie, dass: -Öffnen Sie ***Scheduler.jsx*** und importieren Sie die Scheduler-Quell-Dateien. Je nachdem, wie Sie das Paket installiert haben, sehen die Imports so aus: +- Wenn Sie das Scheduler-Paket aus einem lokalen Ordner installiert haben, sehen Ihre Importpfade so aus: -- Wenn aus einem lokalen Ordner installiert: ~~~js title="Scheduler.jsx" import { Scheduler } from 'dhtmlx-scheduler'; import 'dhtmlx-scheduler/codebase/dhtmlxscheduler.css'; ~~~ -- Bei Verwendung der Trial-Version: +- Falls Sie sich für die Installation der Trial-Version entschieden haben, sollten die Importpfade wie folgt aussehen: + ~~~js title="Scheduler.jsx" import { Scheduler } from '@dhx/trial-scheduler'; import '@dhx/trial-scheduler/codebase/dhtmlxscheduler.css'; ~~~ -In diesem Tutorial wird die **Trial**-Version verwendet. +In diesem Tutorial verwenden wir die **trial**-Version von Scheduler. -### Container setzen und Scheduler hinzufügen +### Festlegen des Containers und Hinzufügen des Schedulers -Um den Scheduler auf der Seite anzuzeigen, richten Sie einen Container ein. Erstellen Sie ***Scheduler.jsx*** mit folgendem Code: +Um Scheduler auf der Seite anzuzeigen, müssen wir den Container so festlegen, dass die Komponente darin gerendert wird. Erstellen Sie dazu die ***Scheduler.jsx***-Datei mit dem folgenden Code: ~~~js title="src/components/Scheduler/Scheduler.jsx" import { useEffect, useRef } from "react"; @@ -162,9 +167,9 @@ export default function SchedulerView( ) { } ~~~ -## Schritt 3. Scheduler zur App hinzufügen +## Schritt 3. Scheduler in die App einfügen -Fügen Sie nun die Scheduler-Komponente zu Ihrer App hinzu. Öffnen Sie ***src/App.jsx*** und ersetzen Sie den Standardinhalt durch: +Jetzt ist es Zeit, die Komponente in unsere App einzufügen. Öffnen Sie ***src/App.jsx*** und verwenden Sie die *Scheduler*-Komponente statt des Standardinhalts, indem Sie den untenstehenden Code einfügen: ~~~js title="src/App.jsx" import Scheduler from "./components/Scheduler"; @@ -180,13 +185,14 @@ function App() { export default App; ~~~ -Wenn Sie die App erneut starten, sollte ein leerer Scheduler auf der Seite erscheinen: +Nachdem Sie die Anwendung gestartet haben, sollten Sie eine leere Scheduler-Seite sehen: ![Scheduler React init](/img/scheduler_init.png) -## Schritt 4. Daten bereitstellen +## Schritt 4. Bereitstellung von Daten + +Um Daten in den Scheduler einzufügen, müssen Sie einen Datensatz bereitstellen. Erstellen wir dazu die Datei ***data.js*** im ***src/***-Verzeichnis und fügen dort Daten hinzu: -Um Events im Scheduler anzuzeigen, stellen Sie einen Datensatz bereit. Erstellen Sie ***data.js*** im **src** -Verzeichnis und fügen Sie einige Events hinzu: ~~~js title="src/data.js" export function getData() { @@ -208,7 +214,8 @@ export function getData() { } ~~~ -Geben Sie diese Daten dann als Props an die Scheduler-Komponente in ***App.jsx*** weiter: +Und wir sollten [Props übergeben (unsere Daten)](https://react.dev/learn/passing-props-to-a-component) an eine Scheduler-Komponente in ***App.jsx***: + ~~~js title="App.jsx" import { getData } from "./data.js"; @@ -225,7 +232,8 @@ function App() { export default App; ~~~ -Verwenden Sie die Props in der **scheduler.parse()**-Methode innerhalb der Scheduler-Komponente: +Und verwenden Sie Props in der **scheduler.parse()**-Methode in der Scheduler-Komponente: + ~~~js title="Scheduler.jsx" import { useEffect, useRef } from "react"; @@ -261,15 +269,16 @@ export default function SchedulerView({events}) { } ~~~ -Wenn Sie die App-Seite jetzt neu laden, wird der Scheduler mit geladenen Events angezeigt: +Jetzt, wenn Sie die App-Seite erneut öffnen, sollten Sie einen Scheduler mit Terminen sehen: ![Scheduler React events](/img/scheduler_events.png) -## Schritt 5. Daten speichern +## Schritt 5. Speichern von Daten -Um Änderungen im Scheduler zu verarbeiten, können Sie den [dataProcessor](https://docs.dhtmlx.com/dataprocessor__index.html)-Handler verwenden. Damit kann die Kommunikation mit Ihrem Server-Backend erfolgen. Der Handler kann eine Funktion oder ein Router-Objekt sein. dhtmlxScheduler unterstützt Promise-Antworten vom Handler, sodass Aktionen korrekt verarbeitet werden. +Um Änderungen, die im Scheduler vorgenommen werden, zu erfassen, können Sie den [dataProcessor](https://docs.dhtmlx.com/dataprocessor__index.html) Handler verwenden, der die Kommunikation mit dem serverseitigen Backend ermöglicht. Der Handler kann entweder als Funktion oder als Router-Objekt deklariert werden. +dhtmlxScheduler akzeptiert eine Promise-Antwort vom Handler, sodass Ihr Scheduler das Abschließen einer Aktion korrekt verarbeitet. -Erstellen Sie einen **DataProcessor** mit **createDataProcessor()** und erfassen Sie Änderungen wie folgt: +Sie können einen **DataProcessor** über die API-Methode **createDataProcessor()** erstellen und Änderungen so erfassen: ~~~ scheduler.createDataProcessor(function(entity, action, data, id) {​ @@ -277,12 +286,12 @@ scheduler.createDataProcessor(function(entity, action, data, id) {​ }); ~~~ -Wenn Ihr Backend nach dem Erstellen eines neuen Eintrags die Event-ID ändert (was üblich ist), stellen Sie sicher, dass Ihr Promise ein Objekt mit **(id: databaseId)** oder **(tid: databaseId)** zurückgibt. So kann der Scheduler den Datensatz mit der neuen Datenbank-ID aktualisieren. Weitere Details finden Sie unter [server side integration](/guides/server-integration.md). +Wenn Ihr Service die Event-ID nach dem Erstellen eines neuen Datensatzes ändert (was normalerweise geschieht), stellen Sie sicher, dass Ihre Promise ein Objekt mit **(id: databaseId)** oder **(tid: databaseId)** als Ergebnis zurückgibt, damit Scheduler die neue Datenbank-ID dem Datensatz zuweisen kann. Erfahren Sie [mehr über die Serverseite](guides/server-integration.md). -Damit ist Ihre React-Scheduler-Integration abgeschlossen. Sie können das vollständige Demo auf GitHub erkunden: [DHTMLX react-scheduler-demo](https://github.com/DHTMLX/react-scheduler-demo). +Nun ist der React Scheduler bereit, Sie sind herzlich eingeladen, sich die vollständige Demo auf GitHub anzusehen: [check out the full demo on GitHub](https://github.com/DHTMLX/react-scheduler-demo). -## XSS-, CSRF- und SQL-Injection-Angriffe +## XSS-, CSRF- und SQL-Injection-Attacken -Beachten Sie, dass der Scheduler selbst keinen Schutz gegen Bedrohungen wie SQL-Injections, XSS oder CSRF-Angriffe bietet. Die Absicherung Ihrer Anwendung gegen diese Risiken liegt in der Verantwortung der Backend-Entwickler. +Beachten Sie, dass Scheduler keine Mittel bereitstellt, um eine Anwendung gegen verschiedene Bedrohungen zu schützen, wie z. B. SQL-Injections oder XSS- und CSRF-Angriffe. Es ist wichtig, dass die Verantwortung für die Sicherheit einer Anwendung von den Entwicklern getragen wird, die das Backend implementieren. -Lesen Sie den Artikel [Application Security](/guides/app-security.md), um mehr über häufige Schwachstellen und Möglichkeiten zur Verbesserung der Sicherheit Ihrer App zu erfahren. +Lesen Sie den [Application Security](guides/app-security.md)-Artikel, um die verwundbarsten Punkte der Komponente und Maßnahmen zur Verbesserung der Sicherheit Ihrer Anwendung kennenzulernen. \ No newline at end of file diff --git a/i18n/de/docusaurus-plugin-content-docs/current/integrations/react/nextjs.md b/i18n/de/docusaurus-plugin-content-docs/current/integrations/react/nextjs.md new file mode 100644 index 00000000..3d9a9538 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/integrations/react/nextjs.md @@ -0,0 +1,264 @@ +--- +title: React Scheduler mit Next.js +sidebar_label: Next.js +description: Erfahren Sie, wie Sie den DHTMLX React Scheduler mit Next.js unter Verwendung des App Router integrieren, einschließlich Client-Komponenten-Setup und Demodaten. +--- + +# React Scheduler mit Next.js + +Diese Anleitung zeigt, wie man eine einfache **Next.js**-Anwendung erstellt und einen **DHTMLX React Scheduler** auf einer Seite rendert. + +:::note +Der vollständige Quellcode ist [auf GitHub verfügbar](https://github.com/dhtmlx/react-scheduler-nextjs-starter). +::: + +## Voraussetzungen + +- Node.js (LTS empfohlen) +- Grundkenntnisse in React + TypeScript +- Grundlagen von Next.js (App Router, Server-/Client-Komponenten). Falls Sie eine Auffrischung benötigen, siehe die Next.js-Dokumentation: https://nextjs.org/docs + +## Schnellstart – Projekt erstellen + +Um eine Next.js-Anwendung zu scaffolden, führen Sie Folgendes aus: + +~~~bash +npx create-next-app@latest +~~~ + +Bei Aufforderung wählen Sie: + +- Project name: **react-scheduler-nextjs-quick-start** +- Verwenden Sie die Standardvorlage (TypeScript, ESLint, Tailwind CSS, App Router, Turbopack) + +Next.js erstellt die Projektstruktur und installiert die grundlegenden Abhängigkeiten. + +Nach der Installation wechseln Sie in das Projektverzeichnis: + +```bash +cd react-scheduler-nextjs-quick-start +``` + +### Installation des React Scheduler + +Installieren Sie den React Scheduler wie im [Installationsleitfaden für den React Scheduler](integrations/react/installation.md) beschrieben. + +In diesem Tutorial verwenden wir das Evaluierungspaket: + +~~~bash +npm install @dhtmlx/trial-react-scheduler +~~~ + +oder + +~~~bash +yarn add @dhtmlx/trial-react-scheduler +~~~ + +Wenn Sie bereits das Professional-Paket verwenden, ersetzen Sie `@dhtmlx/trial-react-scheduler` durch `@dhx/react-scheduler` in Befehlen und Imports. + +## Vorbereiten der Demodaten + +Erstellen Sie einen Ordner `data/` im Projektstamm. Fügen Sie darin eine Datei `demoData.ts` mit den anfänglichen Daten für den Scheduler hinzu: + +~~~ts title="data/demoData.ts" +import type { Event } from '@dhtmlx/trial-react-scheduler'; + +export const events: Event[] = [ + { + id: 1, + classname: 'blue', + start_date: new Date('2025-12-08T02:00:00Z'), + end_date: new Date('2025-12-08T10:20:00Z'), + text: 'Product Strategy Hike', + }, + { + id: 2, + classname: 'blue', + start_date: new Date('2025-12-08T12:00:00Z'), + end_date: new Date('2025-12-08T16:00:00Z'), + text: 'Agile Meditation and Release', + }, + { + id: 3, + classname: 'violet', + start_date: new Date('2025-12-09T06:00:00Z'), + end_date: new Date('2025-12-09T11:00:00Z'), + text: 'Tranquil Tea Time', + }, + { + id: 4, + classname: 'green', + start_date: new Date('2025-12-09T11:30:00Z'), + end_date: new Date('2025-12-09T19:00:00Z'), + text: 'Sprint Review and Retreat', + }, + { + id: 5, + classname: 'yellow', + start_date: new Date('2025-12-10T06:00:00Z'), + end_date: new Date('2025-12-10T08:00:00Z'), + text: 'Stakeholder Sunset Yoga Session', + }, +]; +~~~ + +:::note +Die Begleit-Demo enthält zusätzliche Ereignisse für eine aussagekräftigere Visualisierung. +::: + +## Erstellung der Scheduler-Komponente + +Next.js verwendet standardmäßig Server-Komponenten, aber der React Scheduler sollte in den meisten praktischen Fällen in einer Client-Komponente gerendert werden. + +Dies ist erforderlich, wann immer Sie: + +- `ref` verwenden, um auf die Scheduler-Instanz zuzugreifen +- Callback-Funktionen (Events, Templates, Daten-Handler) übergeben +- ReactScheduler `hooks` verwenden +- dynamische Konfiguration oder React-Elemente bereitstellen + +Daher beginnt unsere Scheduler-Komponente mit `"use client"`. + +Erstellen Sie eine neue Datei unter `components/Scheduler/Scheduler.tsx`: + +~~~tsx title="components/Scheduler/Scheduler.tsx" +'use client'; + +import { useMemo, useRef } from 'react'; +import ReactScheduler, { + type ReactSchedulerRef, + type Event, + type SchedulerTemplates, + type SchedulerConfig, +} from '@dhtmlx/trial-react-scheduler'; +import '@dhtmlx/trial-react-scheduler/dist/react-scheduler.css'; + +export interface ReactSchedulerProps { + events: Event[]; + activeView?: string; + activeDate?: Date; +} + +export default function Scheduler({ + events, + activeView = 'week', + activeDate = new Date('2025-12-08T00:00:00Z'), +}: ReactSchedulerProps) { + const schedulerRef = useRef(null); + + const templates: SchedulerTemplates = useMemo( + () => ({ + event_class: (start: Date, end: Date, event: Event) => { + return event.classname || ''; + }, + }), + [] + ); + + const config: SchedulerConfig = useMemo(() => { + return { + first_hour: 6, + last_hour: 22, + hour_size_px: 60, + }; + }, []); + + return ( + { + console.log(`${entity} - ${action} - ${id}`, data); + }, + }} + /> + ); +} +~~~ + +Diese Komponente initialisiert den Scheduler und übergibt ihm Konfiguration, ursprüngliche Daten und eine `ref` für zukünftige API-Aufrufe. Das `config`-Objekt steuert das Layout der Timeline, während die Props `events` dem Scheduler seinen Datensatz bereitstellen. Wir übergeben auch `activeView` und `activeDate` als Props, damit die Elternkomponente steuert, was der Scheduler anzeigt. + +Die `save`-Funktion im `data`-Prop dient dazu, Aktualisierungen von Ereignissen im Scheduler nachzuverfolgen. In diesem Tutorial fügen wir einen einfachen Platzhalter-Handler hinzu, um Änderungen nachzuvollziehen. Wenn Sie Updates an ein Backend senden oder an React-State binden möchten, können Sie der offiziellen Data-Binding-Dokumentation folgen: [Guide](integrations/react/overview.md#bindingdata). + +## Farbstile der Ereignisse hinzufügen + +Die CSS-Klassen (`.blue`, `.violet`, `.green`, `.yellow`) werden über das Template `event_class` angewendet, um das visuelle Erscheinungsbild der Ereignisse anzupassen. Fügen Sie Folgendes zu `app/globals.css` hinzu: + +~~~css title="app/globals.css" +.blue { + --dhx-scheduler-event-background: linear-gradient(180deg, #0e8af0 0%, #0ec1f0 100%); +} +.violet { + --dhx-scheduler-event-background: linear-gradient(180deg, #d071ef 0%, #ee71d5 100%); +} +.green { + --dhx-scheduler-event-background: linear-gradient(180deg, #12d979 0%, #1ecdeb 100%); +} +.yellow { + --dhx-scheduler-event-background: linear-gradient(180deg, #ffb725 0%, #ffbb25 31.25%, #faea27 100%); +} +~~~ + +:::note +Damit der Scheduler die gesamte Seite sauber ausfüllt, entfernen Sie die Standard-Dark-Mode-Theme-Variablen aus `app/globals.css` und stellen Sie sicher, dass der Body keinen zusätzlichen Rand hat: + +~~~css +body { + margin: 0; + padding: 0; +} +~~~ +::: + +## Scheduler zur Seite hinzufügen + +Öffnen Sie `app/page.tsx` und rendern Sie den Scheduler auf der Hauptseite: + +~~~tsx title="app/page.tsx" +import Scheduler from '../components/Scheduler/Scheduler'; +import { events } from '../data/demoData'; + +export default function HomePage() { + return ( +
+ +
+ ); +} +~~~ + +Jetzt zeigt die Seite einen Vollbild-Scheduler. + +## Anwendung starten + +Starten Sie den Entwicklungsserver: + +~~~bash +npm run dev +~~~ + +Öffnen Sie dann `http://localhost:3000` in Ihrem Browser. Sie sollten nun einen funktionsfähigen Scheduler mit den anfänglichen Daten innerhalb einer Next.js-Anwendung sehen. + +## Zusammenfassung + +Sie haben nun ein minimales Next.js-Projekt mit dem DHTMLX React Scheduler: + +- Der Scheduler wird als Client-Komponente (`"use client"`) im Next.js App Router gerendert +- Demo-Daten werden aus einer separaten Datei geladen und als Props übergeben +- Das `event_class`-Template wendet benutzerdefinierte Farbverläufe auf Ereignisse an +- Der `data.save`-Callback protokolliert Bearbeitungen in der Konsole (bereit, an ein Backend angeschlossen zu werden) + +## Was kommt als Nächstes + +- [React-gesteuerte Datenfluss](integrations/react/overview.md#bindingdata) +- [Dokumentation zu React Scheduler Templates](integrations/react/configuration-props.md) +- Erkundung von State-Management-Integrationen: + - [Using React Scheduler with Redux Toolkit](integrations/react/state/redux-toolkit.md) + - [Using React Scheduler with MobX](integrations/react/state/mobx.md) + - [Using React Scheduler with Zustand](integrations/react/state/zustand.md) \ No newline at end of file diff --git a/i18n/de/docusaurus-plugin-content-docs/current/integrations/react/overview.md b/i18n/de/docusaurus-plugin-content-docs/current/integrations/react/overview.md new file mode 100644 index 00000000..fcca8efb --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/integrations/react/overview.md @@ -0,0 +1,486 @@ +--- +title: "React Scheduler" +sidebar_label: "Überblick" +description: "Überblick über den React Scheduler Wrapper, Datenbindungsmodi, Anpassungsoptionen und Framework-Kompatibilität." +--- + +# React Scheduler + +:::note +React Scheduler ist erhältlich unter [kommerziellen, Unternehmens- und Ultimate-Lizenzen](https://dhtmlx.com/docs/products/licenses.shtml). +Wenn Sie die Einzel- oder GPL-Ausgaben des Scheduler verwenden, verwenden Sie [dhtmlxScheduler with React](integrations/react/js-scheduler-react.md). +::: + +## Überblick + +DHTMLX React Scheduler ist der offizielle React-Wrapper für DHTMLX Scheduler. Es bietet eine deklarative API zum Rendern und Konfigurieren des Schedulers, während gleichzeitig die zugrunde liegende Scheduler-Instanz verfügbar bleibt, wenn Sie eine erweiterte Kontrolle benötigen. + +Hauptmerkmale: + +- übergeben Sie `events`, `view` und `date` als Props +- Verhalten anpassen mit `config` und `templates` +- Benutzeränderungen über `data.save` oder `data.batchSave` behandeln +- verwenden Sie `ref`, um Scheduler-API-Methoden direkt aufzurufen + +Wenn Sie neu bei DHTMLX Scheduler sind, sehen Sie sich die DHTMLX Scheduler-Dokumentation an (/guides/) für einen Überblick über seine Funktionen. + +## Installation und npm-Zugriff + +Für Evaluierungs- und professionelle Paketinstallationen siehe: + +- [Installation](integrations/react/installation.md) + +## Versionsanforderungen + +- React `18+` + +## Grundlegende Verwendung + +```tsx +import { useMemo, useRef } from "react"; +import ReactScheduler, { + type Event, + type ReactSchedulerRef, + type SchedulerConfig, + type SchedulerTemplates, +} from "@dhtmlx/trial-react-scheduler"; +import "@dhtmlx/trial-react-scheduler/dist/react-scheduler.css"; + +const events: Event[] = [ + { + id: 1, + text: "Product Strategy Hike", + classname: "blue", + start_date: new Date("2025-12-08T02:00:00Z"), + end_date: new Date("2025-12-08T10:20:00Z"), + }, +]; + +export default function BasicSchedulerDemo() { + const schedulerRef = useRef(null); + + const templates: SchedulerTemplates = useMemo( + () => ({ + event_class: (_start, _end, event) => event.classname || "", + }), + [] + ); + + const config: SchedulerConfig = useMemo( + () => ({ + first_hour: 6, + last_hour: 22, + hour_size_px: 60, + }), + [] + ); + + return ( +
+ +
+ ); +} +``` + +## Datenbindung {#bindingdata} + +Der React Scheduler unterstützt zwei Datenbindungs-Modelle. + +### React-Zustand als Quelle der Wahrheit (empfohlen) + +In diesem Modell besitzt React (oder ein State-Manager) die Ereignisdaten: + +- Scheduler liest Ereignisse aus Props +- Benutzeränderungen rufen Ihren `data.save`-Callback auf +- Callback aktualisiert den React-Zustand +- React rendert den Scheduler mit aktualisierten Props neu + +```tsx +import { useMemo, useState } from "react"; +import ReactScheduler, { type Event } from "@dhtmlx/trial-react-scheduler"; + +export default function ReactDrivenExample({ seedEvents }: { seedEvents: Event[] }) { + const [events, setEvents] = useState(seedEvents); + + const data = useMemo( + () => ({ + save: (entity: string, action: string, item: Event, id: string | number) => { + if (entity !== "event") return; + + if (action === "create") { + setEvents((prev) => [...prev, item]); + return; + } + + if (action === "update") { + setEvents((prev) => prev.map((e) => (e.id === id ? item : e))); + return; + } + + if (action === "delete") { + setEvents((prev) => prev.filter((e) => e.id !== id)); + } + }, + }), + [] + ); + + return ; +} +``` + +Dieses Modell eignet sich am besten, wenn andere React-UI-Komponenten mit Scheduler-Daten synchronisiert bleiben müssen. + +### Scheduler als Quelle der Wahrheit + +In diesem Modell verwaltet der Scheduler seinen internen Zustand und leitet Bearbeitungen an Ihr Backend weiter. + +```tsx + +``` + +Dieses Modell ist nützlich, wenn React nicht jede Aktualisierung sofort spiegeln muss. + +### Daten laden + +Sie können Daten entweder über Props oder über `data.load` laden: + +```tsx +// Prop-basierte Datenladung + + +// Transport-basierte Datenladung + +``` + +Für Anforderungen an das Datenformat siehe [Laden von Daten](guides/loading-data.md). + +### Änderungen speichern + +`data.save` kann eine URL oder ein Callback sein. + +```tsx + { + if (entity !== "event") return; + + if (action === "create") { + const response = await fetch("/api/events", { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify(item), + }); + + const created = await response.json(); + return { id: created.id }; + } + + if (action === "update") { + await fetch(`/api/events/${id}`, { + method: "PUT", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify(item), + }); + } + + if (action === "delete") { + await fetch(`/api/events/${id}`, { method: "DELETE" }); + } + }, + }} +/> +``` + +Für Details zum Backend-Verhalten siehe [Server Integration](guides/server-integration.md). + +## Ersetzen des Lightbox + +Scheduler enthält einen integrierten Ereigniseditor namens [Lightbox](guides/lightbox-editors.md). + +Sie können ihn ersetzen, indem Sie `customLightbox` verwenden: + +```tsx +import React, { useState } from 'react'; + +export interface CustomLightboxProps { + data?: any; + onSave?: (event: any) => void; + onCancel?: () => void; + onDelete?: () => void; +} + +const CustomLightbox: React.FC = ({ + data, + onSave, + onCancel, + onDelete +}) => { + + let updatedEventText = data.text || ""; + + const handleSaveClick = () => { + if(onSave) + onSave({ ...data, text: updatedEventText }); + }; + + function PaperComponent(props: any) { + const nodeRef = React.useRef(null); + return ( + + + + ); + } + + + function TextComponent() { + const [description, setDescription] = useState(data.text || ''); + + return ( + { + updatedEventText = e.target.value; + setDescription(e.target.value) + }} + sx="{{" width: '100%', padding: '8px', marginTop: '10px' }} + /> + ) + } + + + return ( + + + Edit Event + + + + Description + + + + + + + + + + + + + ); +}; + +export default CustomLightbox; +``` + +Sie können außerdem das Öffnen des Editors mit `onBeforeLightbox` abfangen: + +```tsx +import { useEffect, useRef } from 'react'; +import ReactScheduler from "@dhx/react-scheduler"; +import "@dhx/react-scheduler/dist/react-scheduler.css"; +import { useNavigate } from 'react-router-dom'; + + +export default function BasicInitDemo() { + const schedulerRef = useRef(null); + + const { events, handleSaveEvent, handleDeleteEvent, createEvent } + = useOutletContext(); + const navigate = useNavigate(); + + const handleEventEdit = (id: any) => { + const schedulerInstance = schedulerRef.current?.instance; + navigate(`/editor/${id}`, { state: { task: schedulerInstance.getTask(id) } }); + }; + + return ( + + ); +} +``` + +Referenz: [onBeforeLightbox](api/event/onbeforelightbox.md) + +## Ersetzen integrierter Modale + +Der Löschbestätigungsdialog kann über `modals` überschrieben werden. + +```tsx + { + if (window.confirm(`Delete "${event.text}"?`)) { + callback(); // Aufruf des Callbacks löst das Löschen des Events aus + } + }, + }} +/> +``` + +### Anpassen des Bestätigungsdialogs für Wiederholungen {#customizingtherecurrenceconfirmationmodal} + +Wenn ein Benutzer einen wiederkehrenden Termin bearbeitet oder verschiebt, fragt ein Bestätigungsdialog, ob nur dieses Vorkommnis, dieses und folgende Ereignisse oder die gesamte Serie geändert werden soll. Sie können diesen integrierten Dialog durch Ihren eigenen Dialog ersetzen, indem Sie `modals.onRecurrenceConfirm` verwenden. + +Die Callback-Funktion erhält ein Kontextobjekt und muss eine Entscheidung zurückgeben (oder ein Promise, das zu einer Entscheidung auflöst): + +| Feld | Typ | Beschreibung | +|---|---|---| +| `origin` | `"lightbox" \| "dnd"` | Ob die Aktion vom Lightbox-Editor oder Drag-and-Drop ausgelöst wurde | +| `occurrence` | `any` | Das spezifische Vorkommnis, das bearbeitet wird | +| `series` | `any` | Die übergeordnete wiederkehrende Ereignisserie | +| `labels` | `object` | Lokalisierte Beschriftungen: `title`, `ok`, `cancel`, `occurrence`, `following`, `series` | +| `options` | `string[]` | Verfügbare Optionen, z. B. `["occurrence", "following", "series"]` | + +Rückgabewert (`RecurrenceDecision`): `"occurrence"`, `"following"`, `"series"`, oder `null` zum Abbrechen. + +Beispiel: + +```tsx +import { useState, useCallback } from "react"; + +function App() { + const [recurrencePrompt, setRecurrencePrompt] = useState(null); + + const onRecurrenceConfirm = useCallback((context) => { + return new Promise((resolve) => { + setRecurrencePrompt({ context, resolve }); + }); + }, []); + + return ( + <> + + {recurrencePrompt && ( + { + recurrencePrompt.resolve(choice); + setRecurrencePrompt(null); + }} + onCancel={() => { + recurrencePrompt.resolve(null); + setRecurrencePrompt(null); + }} + /> + )} + + ); +} +``` + +## Filtern + +Verwenden Sie die `filter`-Eigenschaft, um zu steuern, welche Ereignisse angezeigt werden: + +```tsx +import { useCallback, useState } from "react"; + +function FilteredScheduler({ events }: { events: any[] }) { + const [query, setQuery] = useState(""); + + const filterFn = useCallback( + (event: any) => { + if (!query.trim()) return true; + return event.text?.toLowerCase().includes(query.trim().toLowerCase()); + }, + [query] + ); + + return ( + <> + setQuery(e.target.value)} + /> + + + ); +} +``` + +## Zugriff auf die zugrunde liegende Scheduler-API + +Wenn Props nicht ausreichen, greifen Sie über `ref` auf die Scheduler-Instanz zu: + +```tsx +import { useEffect, useRef } from "react"; +import ReactScheduler, { type ReactSchedulerRef } from "@dhx/react-scheduler"; + +export function DirectRefExample({ events }: { events: any[] }) { + const schedulerRef = useRef(null); + + useEffect(() => { + const scheduler = schedulerRef.current?.instance; + if (!scheduler) return; + + console.log("Events:", scheduler.getEvents()); + scheduler.setCurrentView(new Date()); + }, []); + + return ; +} +``` + +Wenn Sie Scheduler direkt verändern, halten Sie React-Props synchron, um Zustandsabdrift zu vermeiden. + +Siehe [Scheduler Methods Overview](api/overview/methods_overview.md) für verfügbare Methoden. + +#### Konflikte mit React-Props vermeiden + +- Wenn Sie manuell `scheduler.parse(( events ))` oder `scheduler.addEvent()` aus Ihrem Code aufrufen, beachten Sie, dass Sie möglicherweise die React-Props synchron halten müssen. Andernfalls könnte bei der nächsten React-Neudarstellung Ihre manuelle Änderung überschrieben werden. +- Die empfohlene Vorgehensweise besteht darin, sich auf die Wrapper-Props für `events` zu verlassen oder sie in Ihrem React-State zu verwalten. Dann lässt der Wrapper das Neparsen durchführen. + +## Kompatibilität mit SSR-Frameworks (Next.js, Remix) + +:::note +Der React Scheduler ist SSR-freundlich. Während des Server-Renderings wird ein Platzhalter-Container ausgegeben und anschließend auf dem Client hydratisiert. +::: + +Verwenden Sie framework-spezifische Guides für Details: + +- [React Scheduler with Next.js](integrations/react/nextjs.md) +- [React Scheduler with Remix](integrations/react/remix.md) + +## Nächste Schritte + +- [Configuration](integrations/react/configuration-props.md) +- [Data Binding & State Management Basics](integrations/react/state/state-management-basics.md) +- [Quick Start](integrations/react/quick-start.md) \ No newline at end of file diff --git a/i18n/de/docusaurus-plugin-content-docs/current/integrations/react/quick-start.md b/i18n/de/docusaurus-plugin-content-docs/current/integrations/react/quick-start.md new file mode 100644 index 00000000..964f1166 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/integrations/react/quick-start.md @@ -0,0 +1,312 @@ +--- +title: Schneller Einstieg mit React Scheduler +sidebar_label: Schneller Einstieg +description: 'Schritt-für-Schritt-Anleitung zur Verwendung der React Scheduler-Komponente' +--- + +# Schneller Einstieg mit React Scheduler + +:::note +Dieses Tutorial behandelt den in den **Commercial, Enterprise, and Ultimate**-Editionen von DHTMLX Scheduler enthaltenen React-Wrapper. +Wenn Sie die **Individual**- oder **GPL**-Edition verwenden, folgen Sie der alternativen Anleitung: +[Wie man mit React beginnt](integrations/react/js-scheduler-react.md). +::: + +Der **React Scheduler**-Komponenten ist der offizielle Wrapper für **DHTMLX Scheduler**. +Diese Anleitung führt Sie durch die Erstellung einer kleinen React-Anwendung und das Rendern eines Basis-Schedulers mit dem Trial-Paket. + +Wenn Sie neu bei React sind, beginnen Sie mit der offiziellen [React-Dokumentation](https://react.dev/learn). Prüfen Sie [ein vollständiges funktionsfähiges Projekt, das dieser Anleitung folgt auf GitHub](https://github.com/dhtmlx/react-scheduler-quick-start). + +## Versionsanforderungen + +- React **18 oder neuer** + +## Erstellung eines neuen React-Projekts + +Um ein React-Projekt zu erstellen und in das Projektverzeichnis zu wechseln, führen Sie die folgenden Befehle aus: + +~~~bash +npm create vite@latest react-scheduler-quick-start -- --template react-ts +cd react-scheduler-quick-start +~~~ + +### Installation von React Scheduler + +Installieren Sie React Scheduler gemäß dem [Installationsleitfaden für React Scheduler](integrations/react/installation.md). + +In diesem Tutorial verwenden wir das Evaluationspaket: + +~~~bash +npm install @dhtmlx/trial-react-scheduler +~~~ + +oder + +~~~bash +yarn add @dhtmlx/trial-react-scheduler +~~~ + +Wenn Sie bereits das Professional-Paket verwenden, ersetzen Sie `@dhtmlx/trial-react-scheduler` in den Befehlen und Importen durch `@dhx/react-scheduler`. + +## Demo-Daten hinzufügen + +Wir verwenden in diesem Beispiel statische Daten. Erstellen Sie eine Datei mit dem Namen `src/demoData.ts`: + +~~~ts +import type { Event } from '@dhtmlx/trial-react-scheduler'; + +export const events: Event[] = [ + { + id: 1, + classname: 'blue', + start_date: new Date('2025-12-08T02:00:00Z'), + end_date: new Date('2025-12-08T10:20:00Z'), + text: 'Product Strategy Hike', + }, + { + id: 2, + classname: 'blue', + start_date: new Date('2025-12-08T12:00:00Z'), + end_date: new Date('2025-12-08T16:00:00Z'), + text: 'Agile Meditation and Release', + }, + { + id: 3, + classname: 'violet', + start_date: new Date('2025-12-09T06:00:00Z'), + end_date: new Date('2025-12-09T11:00:00Z'), + text: 'Tranquil Tea Time', + }, + // .... +]; +~~~ + +## Erstellung einer Scheduler-Komponente + +Um eine Scheduler-Komponente hinzuzufügen, erstellen Sie eine Datei `src/components/Scheduler/Scheduler.tsx` mit folgendem Inhalt: + +~~~tsx +import { useMemo, useRef } from 'react'; +import ReactScheduler, { + type ReactSchedulerRef, + type Event, + type SchedulerTemplates, + type SchedulerConfig, +} from '@dhtmlx/trial-react-scheduler'; +import '@dhtmlx/trial-react-scheduler/dist/react-scheduler.css'; +import './styles.css'; + +export interface ReactSchedulerProps { + events: Event[]; + activeView?: string; + activeDate?: Date; +} + +export default function Scheduler({ + events, + activeView = 'week', + activeDate = new Date('2025-12-08T00:00:00Z'), +}: ReactSchedulerProps) { + const schedulerRef = useRef(null); + + const templates: SchedulerTemplates = useMemo( + () => ({ + event_class: (start: Date, end: Date, event: Event) => { + return event.classname || ''; + }, + }), + [] + ); + + const config: SchedulerConfig = useMemo(() => { + return { + first_hour: 6, + last_hour: 22, + hour_size_px: 60, + }; + }, []); + + return ( + { + console.log(`${entity} - ${action} - ${id}`, data); + }, + }} + /> + ); +} +~~~ + +Schließlich werden die CSS-Klassen (`.violet`, `.green`, `.yellow`) über das `event_class`-Template angewendet, um das visuelle Erscheinungsbild der Ereignisse anzupassen: + +~~~css +.violet { + --dhx-scheduler-event-background: linear-gradient(180deg, #d071ef 0%, #ee71d5 100%); +} +.green { + --dhx-scheduler-event-background: linear-gradient(180deg, #12d979 0%, #1ecdeb 100%); +} +.yellow { + --dhx-scheduler-event-background: linear-gradient(180deg, #ffb725 0%, #ffbb25 31.25%, #faea27 100%); +} +~~~ + + +## Scheduler in der App rendern + +Um Scheduler anzuzeigen, ersetzen Sie den Code von `src/App.tsx` durch den folgenden Code: + +~~~tsx +import './App.css'; +import Scheduler from './components/Scheduler/Scheduler'; +import { events } from './demoData'; + +function App() { + return ( +
+ +
+ ); +} + +export default App; +~~~ + +Führen Sie die App anschließend mit dem untenstehenden Befehl aus: + +~~~bash +npm run dev +~~~ + +Damit haben Sie eine **voll funktionsfähige React + DHTMLX Scheduler-Anwendung**. + +Dieses Setup repräsentiert die **minimale Konfiguration**, die benötigt wird, um: + +- einen Scheduler zu rendern +- Ereignisse anzuzeigen +- eine grundlegende Skalenkonfiguration anzuwenden +- die Scheduler-Instanz über ein React-Ref zu attachen +- Ereignisse über den `data.save`-Callback zu empfangen + +Dies ist dasselbe minimale Beispiel, das im [GitHub-Demo-Projekt](https://github.com/dhtmlx/react-scheduler-quick-start) verwendet wird. + +Von hier aus können Sie mit weiteren fortgeschrittenen Funktionen fortfahren: + +- Synchronisierung von Daten mit dem React-Zustand +- Laden/Speichern von Daten aus Ihrem Backend +- Hinzufügen von Vorlagen und benutzerdefinierten Renderern +- Hinzufügen von Filtern +- Ersetzen des Lightbox durch eine benutzerdefinierte Komponente + +Die nächsten Abschnitte führen diese Fähigkeiten der Reihe nach ein. + +## Verwendung des React-Zustands als zentrale Quelle der Daten + +_(empfohlen für die meisten React-Apps)_ + +In echten Anwendungen stammen Ereignisse normalerweise aus dem React-Zustand. +Nachfolgend ein vollständiges Beispiel, bei dem der Scheduler Änderungen über den `data.save`-Callback an React zurücksendet. + +~~~tsx +import { useState } from 'react'; +import ReactScheduler, { Event } from '@dhtmlx/trial-react-scheduler'; +import '@dhtmlx/trial-react-scheduler/dist/react-scheduler.css'; +import { events as initialEvents } from './demoData'; + +export default function App() { + const [events, setEvents] = useState(initialEvents); + + const data = { + save: (entity, action, item, id) => { + if (entity === 'event') { + if (action === 'create') setEvents((prev) => [...prev, item]); + if (action === 'update') setEvents((prev) => prev.map((x) => (x.id === id ? item : x))); + if (action === 'delete') setEvents((prev) => prev.filter((x) => x.id !== id)); + } + }, + }; + + return ( +
+ +
+ ); +} +~~~ + +### Warum diesen Modus wählen + +- React sieht immer dieselben Daten wie die Scheduler-Benutzeroberfläche +- Funktioniert perfekt mit Redux / Zustand / Jotai / MobX +- Einfach mit Backend-APIs zu synchronisieren + +## Alternativer Modus: Scheduler als Quelle der Wahrheit + +_(nützlich für sehr große Datensätze)_ + +In diesem Modus besitzt React keine Ereignisse. + +~~~tsx + +~~~ + +### Wann man diesen Modus bevorzugt + +- Zehntausende von Ereignissen +- Häufige Benutzerinteraktionen und Aktualisierungen +- Sie möchten minimalen React-Renderaufwand + +## Vorlagen verwenden + +_(React-Elemente aus Vorlagenfunktionen zurückgeben)_ + +Vorlagen ermöglichen es, fast jeden Teil des Schedulers anzupassen. + +~~~tsx +import ReactScheduler, { SchedulerTemplates } from '@dhtmlx/trial-react-scheduler'; +import { useMemo } from 'react'; +import EventTextBox from './components/EventTextBox'; + +const templates: SchedulerTemplates = useMemo( + () => ({ + event_class: (start, end, event) => { + return 'templates-' + event.classname || ''; + }, + event_text: (start, end, event) => { + return ; + }, + }), + [] +); + +; +~~~ + +### Weitere Details + +Siehe den vollständigen Abschnitt hier: [React Scheduler Templates Documentation](integrations/react/configuration-props.md). + +## GitHub-Demo-Repository + +Ein vollständiges funktionsfähiges Projekt, das dieser Anleitung folgt, ist [auf GitHub verfügbar](https://github.com/dhtmlx/react-scheduler-quick-start). + +## Nächste Schritte + +- Studieren Sie alle verfügbaren [React Scheduler-Eigenschaften](integrations/react/configuration-props.md) +- Erkunden Sie fortgeschrittene Scheduler-Funktionen in den [Guides](/guides/) \ No newline at end of file diff --git a/i18n/de/docusaurus-plugin-content-docs/current/integrations/react/remix.md b/i18n/de/docusaurus-plugin-content-docs/current/integrations/react/remix.md new file mode 100644 index 00000000..bf27743e --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/integrations/react/remix.md @@ -0,0 +1,271 @@ +--- +title: React Scheduler mit Remix +sidebar_label: Remix +description: Erfahren Sie, wie Sie den DHTMLX React Scheduler mit Remix (React Router v7) integrieren, einschließlich der Einrichtung von Client-Komponenten und Beispieldaten. +--- + +# React Scheduler mit Remix + +Dieses Tutorial zeigt, wie man eine einfache **Remix**-Anwendung erstellt und einen **DHTMLX React Scheduler** auf einer Seite rendert. + +:::note +Der vollständige Quellcode ist [auf GitHub verfügbar](https://github.com/dhtmlx/react-scheduler-remix-starter). +::: + +## Voraussetzungen + +- Node.js (LTS wird empfohlen) +- Grundlagen zu React + TypeScript +- Grundlagen zu Remix / React Router. Falls Sie Auffrischung brauchen, siehe die Remix-Dokumentation: https://remix.run/docs + +## Schnellstart - Projekt erstellen + +Da Remix jetzt als Teil von **React Router v7** ausgeliefert wird, ist der empfohlene Weg, ein Projekt zu scaffolden: + +~~~bash +npx create-react-router@latest +~~~ + +Wenn Sie dazu aufgefordert werden, wählen Sie: + +- Project name: **react-scheduler-remix-quick-start** +- Verwenden Sie die Standardvorlage (React, TypeScript, TailwindCSS, SSR) +- **Install dependencies**: Ja + +Nach der Installation wechseln Sie in das Projektverzeichnis: + +```bash +cd react-scheduler-remix-quick-start +``` + +### Installing React Scheduler + +Installieren Sie den React Scheduler wie im [React Scheduler-Installationsleitfaden](integrations/react/installation.md) beschrieben. + +In diesem Tutorial verwenden wir das Evaluierungspaket: + +~~~bash +npm install @dhtmlx/trial-react-scheduler +~~~ + +oder + +~~~bash +yarn add @dhtmlx/trial-react-scheduler +~~~ + +Falls Sie bereits das Professional-Paket verwenden, ersetzen Sie `@dhtmlx/trial-react-scheduler` durch `@dhx/react-scheduler` in den Befehlen und Imports. + +## Vorbereitung der Demo-Daten + +Erstellen Sie einen Ordner `data/` im Projektstamm. Legen Sie darin eine Datei `demoData.ts` an, die die anfänglichen Daten für den Scheduler enthält: + +~~~ts title="data/demoData.ts" +import type { Event } from '@dhtmlx/trial-react-scheduler'; + +export const events: Event[] = [ + { + id: 1, + classname: 'blue', + start_date: new Date('2025-12-08T02:00:00Z'), + end_date: new Date('2025-12-08T10:20:00Z'), + text: 'Product Strategy Hike', + }, + { + id: 2, + classname: 'blue', + start_date: new Date('2025-12-08T12:00:00Z'), + end_date: new Date('2025-12-08T16:00:00Z'), + text: 'Agile Meditation and Release', + }, + { + id: 3, + classname: 'violet', + start_date: new Date('2025-12-09T06:00:00Z'), + end_date: new Date('2025-12-09T11:00:00Z'), + text: 'Tranquil Tea Time', + }, + { + id: 4, + classname: 'green', + start_date: new Date('2025-12-09T11:30:00Z'), + end_date: new Date('2025-12-09T19:00:00Z'), + text: 'Sprint Review and Retreat', + }, + { + id: 5, + classname: 'yellow', + start_date: new Date('2025-12-10T06:00:00Z'), + end_date: new Date('2025-12-10T08:00:00Z'), + text: 'Stakeholder Sunset Yoga Session', + }, +]; +~~~ + +:::note +Die Begleit-Demo enthält zusätzliche Ereignisse für eine visuell reichhaltigere Darstellung. +::: + +## Erstellung der Scheduler-Komponente + +Remix ermöglicht die Nutzung von Client-Seiten-Komponenten über die Standard-React-Architektur. Der Scheduler sollte in den meisten praktischen Fällen innerhalb einer Client-Komponente gerendert werden. + +Dies ist erforderlich, wenn Sie: + +- `ref` verwenden, um die Scheduler-Instanz zuzugreifen +- Callback-Funktionen (events, templates, Daten-Handler) übergeben +- ReactScheduler-`hooks` verwenden +- dynamische Config oder React-Elemente bereitstellen + +Daher beginnt unsere Scheduler-Komponente mit `"use client"`. + +Erstellen Sie eine neue Datei unter `components/Scheduler/Scheduler.tsx`: + +~~~tsx title="components/Scheduler/Scheduler.tsx" +'use client'; + +import { useMemo, useRef } from 'react'; +import ReactScheduler, { + type ReactSchedulerRef, + type Event, + type SchedulerTemplates, + type SchedulerConfig, +} from '@dhtmlx/trial-react-scheduler'; +import '@dhtmlx/trial-react-scheduler/dist/react-scheduler.css'; + +export interface ReactSchedulerProps { + events: Event[]; + activeView?: string; + activeDate?: Date; +} + +export default function Scheduler({ + events, + activeView = 'week', + activeDate = new Date('2025-12-08T00:00:00Z'), +}: ReactSchedulerProps) { + const schedulerRef = useRef(null); + + const templates: SchedulerTemplates = useMemo( + () => ({ + event_class: (start: Date, end: Date, event: Event) => { + return event.classname || ''; + }, + }), + [] + ); + + const config: SchedulerConfig = useMemo(() => { + return { + first_hour: 6, + last_hour: 22, + hour_size_px: 60, + }; + }, []); + + return ( + { + console.log(`${entity} - ${action} - ${id}`, data); + }, + }} + /> + ); +} +~~~ + +Diese Komponente initialisiert den Scheduler und stellt ihm eine Konfiguration, anfängliche Daten und einen `ref` für zukünftige API-Aufrufe bereit. Das `config`-Objekt steuert das Layout der Timeline, während die `events`-Prop dem Scheduler seinen Datensatz liefert. Wir übergeben außerdem `activeView` und `activeDate` als Props, damit die Elternebene steuert, was der Scheduler anzeigt. + +Die `save`-Funktion innerhalb der `data`-Prop dient dazu, Aktualisierungen der Ereignisse im Scheduler nachzuverfolgen. In diesem Tutorial fügen wir einen einfachen Platzhalter-Handler hinzu, um Änderungen nachzuverfolgen. Wenn Sie Updates an ein Backend senden oder sie an React-Zustand binden möchten, können Sie dem offiziellen [guide](integrations/react/overview.md#bindingdata) folgen. + +## Hinzufügen von Farbstilen für Ereignisse + +Die CSS-Klassen (`.blue`, `.violet`, `.green`, `.yellow`) werden über das `event_class`-Template angewendet, um das visuelle Erscheinungsbild der Ereignisse anzupassen. Fügen Sie Folgendes zu `app/app.css` hinzu: + +~~~css title="app/app.css" +.blue { + --dhx-scheduler-event-background: linear-gradient(180deg, #0e8af0 0%, #0ec1f0 100%); +} +.violet { + --dhx-scheduler-event-background: linear-gradient(180deg, #d071ef 0%, #ee71d5 100%); +} +.green { + --dhx-scheduler-event-background: linear-gradient(180deg, #12d979 0%, #1ecdeb 100%); +} +.yellow { + --dhx-scheduler-event-background: linear-gradient(180deg, #ffb725 0%, #ffbb25 31.25%, #faea27 100%); +} +~~~ + +:::note +Damit der Scheduler die gesamte Seite sauber ausfüllt, stellen Sie sicher, dass der Body keinen zusätzlichen Rand hat: + +~~~css +body { + margin: 0; + padding: 0; +} +~~~ +::: + +## Rendering des Scheduler auf einer Route + +Öffnen Sie die Hauptseiten-Route — `app/routes/home.tsx`. Ersetzen Sie deren Inhalt durch Folgendes: + +~~~tsx title="app/routes/home.tsx" +import { events } from '../../data/demoData'; +import type { Route } from './+types/home'; +import Scheduler from 'components/Scheduler/Scheduler'; + +export function meta({}: Route.MetaArgs) { + return [ + { title: 'DHTMLX React Scheduler | Remix (React Router) Quick Start' }, + { name: 'description', content: 'DHTMLX React Scheduler | Remix (React Router) Quick Start' }, + ]; +} + +export default function Home() { + return ( +
+ +
+ ); +} +~~~ + +Jetzt wird der Scheduler unter der Route `/` angezeigt. + +## Anwendung starten + +Starten Sie den Entwicklungsserver: + +~~~bash +npm run dev +~~~ + +Öffnen Sie anschließend `http://localhost:5173` in Ihrem Browser. Sie sollten nun einen funktionsfähigen Scheduler mit den anfänglichen Daten innerhalb einer Remix-Anwendung sehen. + +## Zusammenfassung + +Sie haben jetzt ein minimales Remix-Projekt mit DHTMLX React Scheduler: + +- Scheduler wird als Client-Komponente (`"use client"`) innerhalb von Remix / React Router v7 gerendert +- Demo-Daten werden aus einer separaten Datei geladen und als Props übergeben +- das `event_class`-Template wendet benutzerdefinierte Farbverläufe auf Ereignisse an +- der `data.save`-Callback protokolliert Bearbeitungen in der Konsole (bereit, an ein Backend angeschlossen zu werden) + +## Ausblick + +- [Datenfluss, der von React gesteuert wird](integrations/react/overview.md#bindingdata) +- [Dokumentation der React Scheduler-Templates](integrations/react/configuration-props.md) +- Erkundung von State-Management-Integrationen: + - [Verwendung des React Scheduler mit Redux Toolkit](integrations/react/state/redux-toolkit.md) + - [Verwendung des React Scheduler mit MobX](integrations/react/state/mobx.md) + - [Verwendung des React Scheduler mit Zustand](integrations/react/state/zustand.md) \ No newline at end of file diff --git a/i18n/de/docusaurus-plugin-content-docs/current/integrations/react/state/index.md b/i18n/de/docusaurus-plugin-content-docs/current/integrations/react/state/index.md new file mode 100644 index 00000000..30b8db0b --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/integrations/react/state/index.md @@ -0,0 +1,40 @@ +--- +title: "Daten- und Zustandsverwaltung" +description: "Wie man den React Scheduler an den React-Zustand oder eine Zustandsverwaltung bindet, Benutzereingaben behandelt und zwischen vom React verwalteten und vom Scheduler verwalteten Datenmodellen wählt." +--- + +Dieser Abschnitt erläutert, wie Scheduler-Daten mit Ihrem Anwendungszustand synchron gehalten werden. Er behandelt das empfohlene React-gesteuerte Modell (React oder ein Store als Quelle der Wahrheit), das leistungsorientierte Scheduler-gemanagte Modell und praxisnahe Implementierungen für beliebte State-Bibliotheken. + +## Erste Schritte + +Lesen Sie dies zuerst, um die zwei unterstützten Datenmodelle und die gängigen Integrationsmuster zu verstehen: + +- [Datenbindung und State-Management-Grundlagen](integrations/react/state/state-management-basics.md) + +Es erläutert, wie Sie `data.save`- und `data.batchSave`-Callbacks verwenden, wie das Laden in jedes Modell integriert wird und welche Änderungen auftreten, wenn Scheduler die Daten intern verwaltet. + +## Wählen Sie Ihre Zustandsbibliothek + +Jede der untenstehenden Tutorials folgt demselben Kernmuster (Zustand -> Props -> Scheduler, Änderungen -> Callbacks -> Zustand), verwendet jedoch die Idiome der jeweiligen Bibliothek: + +- [Redux Toolkit](integrations/react/state/redux-toolkit.md) +- [Zustand](integrations/react/state/zustand.md) +- [MobX](integrations/react/state/mobx.md) +- [XState](integrations/react/state/xstate.md) +- [Jotai](integrations/react/state/jotai.md) +- [Valtio](integrations/react/state/valtio.md) + +## Echtzeit-Synchronisation + +Wenn Sie Live-Updates benötigen, beginnen Sie hier: + +- [Firebase-Integration](integrations/react/firebase-integration.md) + +## Leistungs-Hinweise + +Wenn Ihre App umfangreiche Operationen ausführt (Bulk-Bearbeitungen, häufige Aktualisierungen, große Datensätze), beachten Sie Folgendes: + +- die Verwendung von `data.batchSave`, um den Aktualisierungsaufwand zu reduzieren, +- das Scheduler-gemanagte Datenmodell, wenn React nicht jede Änderung sofort widerspiegeln muss. + +Beide Themen finden Sie in [Datenbindung und State-Management-Grundlagen](integrations/react/state/state-management-basics.md). \ No newline at end of file diff --git a/i18n/de/docusaurus-plugin-content-docs/current/integrations/react/state/jotai.md b/i18n/de/docusaurus-plugin-content-docs/current/integrations/react/state/jotai.md new file mode 100644 index 00000000..334be33d --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/integrations/react/state/jotai.md @@ -0,0 +1,597 @@ +--- +title: React Scheduler – Jotai Tutorial +sidebar_label: Jotai +description: Lernen Sie, wie Sie den DHTMLX React Scheduler mit Jotai integrieren, einschließlich Ereignis-Erstellen/Aktualisieren/Löschen (CRUD), Synchronisierung von Ansicht/Datum, schreibgeschütkter Konfiguration und Rückgängig/Wiederherstellen. +--- + +# React Scheduler – Jotai Tutorial + +Dieses Tutorial zeigt, wie Sie den **DHTMLX React Scheduler** mit einem **Jotai**-Store verbinden. Sie speichern Ereignisse und UI-Zustände (Ansicht/Datum/Config) in Atomen, leiten Scheduler-Bearbeitungen über `data.save` weiter und fügen **Undo/Redo** mit einer snapshot-basierten Verlaufshistorie hinzu. + +:::note +Der vollständige Quellcode ist [auf GitHub](https://github.com/DHTMLX/react-scheduler-jotai-starter) verfügbar. +::: + +## Voraussetzungen + +- Node.js (LTS empfohlen) +- Grundkenntnisse in React + TypeScript +- Vertrautheit mit Jotai-Atomen und `useAtom`/`useSetAtom`. Falls Sie eine Auffrischung benötigen, siehe die Jotai-Dokumentation: https://jotai.org/ + +## Schnellstart – Projekt erstellen + +Erstellen Sie ein Vite + React + TypeScript-Projekt: + +~~~bash +npm create vite@latest scheduler-jotai-demo -- --template react-ts +cd scheduler-jotai-demo +npm install +~~~ + +Installieren Sie Jotai: + +~~~bash +npm install jotai +~~~ + +Installieren Sie Material UI (für die Demo-Toolbar verwendet): + +~~~bash +npm install @mui/material @mui/icons-material @emotion/react @emotion/styled +~~~ + +### Installation des React Scheduler + +Installieren Sie React Scheduler wie im [Installationsleitfaden des React Scheduler](integrations/react/installation.md) beschrieben. + +In diesem Tutorial verwenden wir das Evaluierungspaket: + +```bash +npm install @dhtmlx/trial-react-scheduler +``` + +oder + +```bash +yarn add @dhtmlx/trial-react-scheduler +``` + +Wenn Sie bereits das Professional-Paket verwenden, ersetzen Sie `@dhtmlx/trial-react-scheduler` durch `@dhx/react-scheduler` in den Befehlen und Importen. + +Führen Sie den Entwicklungsserver aus: + +~~~bash +npm run dev +~~~ + +:::note +Um Scheduler die gesamte Seite auszufüllen, entfernen Sie die Standard-Stile aus `src/App.css` und fügen Sie Folgendes hinzu: + +~~~css +#root { + margin: 0; + padding: 0; + height: 100%; + width: 100%; +} + +body { + margin: 0; +} +~~~ +::: + +## Gemeinsame Typen definieren + +Erstellen Sie `src/types.ts`. Diese Typen werden von Atomen und Komponenten gemeinsam genutzt: + +~~~ts +export type SchedulerView = "day" | "week" | "month"; +export type SchedulerEventId = string | number; + +export interface SchedulerEvent { + id: SchedulerEventId; + start_date: string; + end_date: string; + text: string; + + // Scheduler kann zur Laufzeit zusätzliche Felder anhängen (z.B. benutzerdefinierte Props). Halten Sie das Demo-Beispiel permissiv. + [key: string]: unknown; +} + +export type SchedulerConfig = Record; + +export interface SchedulerSnapshot { + events: SchedulerEvent[]; + config: SchedulerConfig; +} +~~~ + +- `SchedulerEvent` verwendet eine Index-Signatur, damit Scheduler zur Laufzeit zusätzliche Felder anhängen kann. +- `SchedulerSnapshot` erfasst die Daten, die für Undo/Redo benötigt werden (Ereignisse + Konfiguration). + +## Beispiel-Daten einrichten + +Erstellen Sie `src/seed/data.ts` mit einigen Ereignissen und initialem UI-Zustand. Beachten Sie, dass `seedDate` als **Zahl** (Zeitstempel) gespeichert wird, damit der Zustand der Atome serialisierbar bleibt. + +~~~ts +import type { SchedulerEvent, SchedulerView } from "../types"; + +export const seedEvents: SchedulerEvent[] = [ + { id: 1, start_date: "2025-08-11T02:00:00Z", end_date: "2025-08-11T10:20:00Z", text: "Product Strategy Hike" }, + { id: 2, start_date: "2025-08-12T06:00:00Z", end_date: "2025-08-12T11:00:00Z", text: "Tranquil Tea Time" }, + { id: 3, start_date: "2025-08-15T03:00:00Z", end_date: "2025-08-15T08:00:00Z", text: "Demo and Showcase" }, +]; + +export const seedDate = Date.parse("2025-08-15T00:00:00Z"); +export const seedView: SchedulerView = "week"; +~~~ + +:::note +Die begleitende Demo enthält zusätzliche Ereignisse für eine reichhaltigere visuelle Darstellung. +::: + +## Jotai-Atome und Aktionen erstellen + +Erstellen Sie `src/schedulerAtoms.ts`. Dieses Setup speichert: + +- `events` (Scheduler-Daten) +- `currentDate` (Zeitstempel) +- `view` (`day | week | month`) +- `config` (Scheduler-Konfigurationsobjekt, einschließlich `readonly`) +- `past` / `future` Snapshots für Undo/Redo + +In diesem Beispiel verfolgt Undo/Redo nur **Ereignis- und Konfig-Änderungen**. Datumnavigation und View-Switching werden nicht zur Historie hinzugefügt. + +~~~ts +import { atom } from "jotai"; +import { seedDate, seedEvents, seedView } from "./seed/data"; +import type { + SchedulerConfig, + SchedulerEvent, + SchedulerEventId, + SchedulerSnapshot, + SchedulerView, +} from "./types"; + +interface SchedulerState { + events: SchedulerEvent[]; + currentDate: number; + view: SchedulerView; + config: SchedulerConfig; +} + +export type SchedulerAction = + | { + type: "updateEvent"; + payload: Partial & Pick; + } + | { + type: "createEvent"; + payload: Omit & Partial>; + } + | { type: "deleteEvent"; payload: SchedulerEventId } + | { type: "setCurrentDate"; payload: number } + | { type: "setView"; payload: SchedulerView } + | { type: "updateConfig"; payload: Partial } + | { type: "undo" } + | { type: "redo" }; + +const schedulerStateAtom = atom({ + events: seedEvents as unknown as SchedulerEvent[], + currentDate: seedDate, + view: seedView, + config: {}, +}); + +const pastAtom = atom([]); +const futureAtom = atom([]); +const MAX_HISTORY_SIZE = 50; + +const deepCopy = (value: T): T => { + return JSON.parse(JSON.stringify(value)) as T; +}; + +const createSnapshot = (state: SchedulerState): SchedulerSnapshot => ({ + events: deepCopy(state.events), + config: deepCopy(state.config), +}); + +export const schedulerActionsAtom = atom( + null, + (get, set, action: SchedulerAction): SchedulerEvent | void => { + const currentState = get(schedulerStateAtom); + const past = get(pastAtom); + const future = get(futureAtom); + + const pushHistory = () => { + set(pastAtom, [...past.slice(-MAX_HISTORY_SIZE + 1), createSnapshot(currentState)]); + set(futureAtom, []); + }; + + if (action.type === "setCurrentDate") { + set(schedulerStateAtom, { ...currentState, currentDate: action.payload }); + return; + } + + if (action.type === "setView") { + set(schedulerStateAtom, { ...currentState, view: action.payload }); + return; + } + + if (action.type === "createEvent") { + pushHistory(); + const id = action.payload.id != null ? action.payload.id : `id_${Date.now().toString()}`; + const newEvent: SchedulerEvent = { ...action.payload, id } as SchedulerEvent; + + set(schedulerStateAtom, { + ...currentState, + events: [...currentState.events, newEvent], + }); + return newEvent; + } + + if (action.type === "updateEvent") { + const index = currentState.events.findIndex((event) => String(event.id) === String(action.payload.id)); + if (index === -1) return; + + pushHistory(); + set(schedulerStateAtom, { + ...currentState, + events: [ + ...currentState.events.slice(0, index), + { ...currentState.events[index], ...action.payload }, + ...currentState.events.slice(index + 1), + ], + }); + return; + } + + if (action.type === "deleteEvent") { + const exists = currentState.events.some((event) => String(event.id) === String(action.payload)); + if (!exists) return; + + pushHistory(); + set(schedulerStateAtom, { + ...currentState, + events: currentState.events.filter((event) => String(event.id) !== String(action.payload)), + }); + return; + } + + if (action.type === "updateConfig") { + pushHistory(); + set(schedulerStateAtom, { + ...currentState, + config: { ...currentState.config, ...action.payload }, + }); + return; + } + + if (action.type === "undo") { + if (past.length === 0) return; + + const previous = past[past.length - 1]; + set(pastAtom, past.slice(0, -1)); + set(futureAtom, [createSnapshot(currentState), ...future]); + set(schedulerStateAtom, { + ...currentState, + events: previous.events, + config: previous.config, + }); + return; + } + + if (action.type === "redo") { + if (future.length === 0) return; + + const next = future[0]; + set(futureAtom, future.slice(1)); + set(pastAtom, [...past, createSnapshot(currentState)]); + set(schedulerStateAtom, { + ...currentState, + events: next.events, + config: next.config, + }); + } + } +); + +export const schedulerStateViewAtom = atom((get) => get(schedulerStateAtom)); +export const canUndoAtom = atom((get) => get(pastAtom).length > 0); +export const canRedoAtom = atom((get) => get(futureAtom).length > 0); +~~~ + +## Die Steuerleiste bauen + +Erstellen Sie `src/components/Toolbar.tsx`. Diese Toolbar wird: + +- den View wechseln (Tag/Woche/Monat) +- vorherige/aktuell/naechste navigieren +- Undo/Redo mit deaktivierten Zuständen +- den Read-Only-Modus umschalten + +~~~tsx +import { ButtonGroup, Button, Typography, Stack, FormControlLabel, Switch } from "@mui/material"; +import UndoIcon from "@mui/icons-material/Undo"; +import RedoIcon from "@mui/icons-material/Redo"; +import React from "react"; +import type { SchedulerView } from "../types"; + +export interface ToolbarProps { + currentView: SchedulerView; + currentDate: Date; + isReadOnly: boolean; + canUndo: boolean; + canRedo: boolean; + onUndo?: () => void; + onRedo?: () => void; + onNavigate?: (action: "prev" | "next" | "today") => void; + onReadOnlyChange?: (value: boolean) => void; + setView: (view: SchedulerView) => void; +} + +export default React.memo(function Toolbar({ + currentView, + currentDate, + isReadOnly, + canUndo, + canRedo, + onUndo, + onRedo, + onNavigate, + onReadOnlyChange, + setView, +}: ToolbarProps) { + return ( + + + {(["day", "week", "month"] as const).map((label) => ( + + ))} + + + + + + onReadOnlyChange?.(event.target.checked)} + inputProps={{ "aria-label": "Toggle read-only" }} + /> + } + /> + + + {new Date(currentDate)?.toLocaleDateString(undefined, { weekday: "short", month: "short", day: "numeric" })} + + + + + + + + ); +}); +~~~ + +## Scheduler mit Jotai verbinden + +Erstellen Sie `src/components/Scheduler.tsx`. Diese Komponente: + +- liest `events/view/currentDate/config` aus Atomen +- verbindet Scheduler CRUD (`create/update/delete`) über `data.save` +- verknüpft Undo/Redo, Navigation und Read-Only-Umschaltung +- versteckt die integrierte Scheduler-Navigationsleiste und verwendet die benutzerdefinierte Toolbar + +~~~tsx +import { useCallback, useMemo } from "react"; +import { useAtomValue, useSetAtom } from "jotai"; +import ReactScheduler from "@dhtmlx/trial-react-scheduler"; +import "@dhtmlx/trial-react-scheduler/dist/react-scheduler.css"; + +import Toolbar from "./Toolbar"; +import { + canRedoAtom, + canUndoAtom, + schedulerActionsAtom, + schedulerStateViewAtom, +} from "../schedulerAtoms"; +import type { SchedulerEvent, SchedulerEventId, SchedulerView } from "../types"; + +type SaveAction = "create" | "update" | "delete"; +type SaveEntity = "event"; + +export default function DemoJotaiScheduler() { + const state = useAtomValue(schedulerStateViewAtom); + const dispatchAction = useSetAtom(schedulerActionsAtom); + const canUndo = useAtomValue(canUndoAtom); + const canRedo = useAtomValue(canRedoAtom); + + const { events, view, currentDate, config } = state; + const activeDate = useMemo(() => new Date(currentDate), [currentDate]); + const isReadOnly = Boolean((config as { readonly?: unknown }).readonly); + + const setCurrentDate = useCallback( + (dateMs: number) => dispatchAction({ type: "setCurrentDate", payload: dateMs }), + [dispatchAction] + ); + const setView = useCallback( + (nextView: SchedulerView) => dispatchAction({ type: "setView", payload: nextView }), + [dispatchAction] + ); + const undo = useCallback(() => dispatchAction({ type: "undo" }), [dispatchAction]); + const redo = useCallback(() => dispatchAction({ type: "redo" }), [dispatchAction]); + const updateReadOnly = useCallback( + (value: boolean) => dispatchAction({ type: "updateConfig", payload: { readonly: value } }), + [dispatchAction] + ); + + const handleDateNavigation = useCallback( + (action: "prev" | "next" | "today") => { + if (action === "today") { + setCurrentDate(Date.now()); + return; + } + + const step = action === "next" ? 1 : -1; + const date = new Date(currentDate); + + if (view === "day") { + date.setDate(date.getDate() + step); + } else if (view === "week") { + date.setDate(date.getDate() + step * 7); + } else { + date.setMonth(date.getMonth() + step); + } + + setCurrentDate(date.getTime()); + }, + [currentDate, view, setCurrentDate] + ); + + const handleViewChange = useCallback( + (mode: string, date: Date) => { + const nextView: SchedulerView = mode === "day" || mode === "week" || mode === "month" ? mode : "month"; + setView(nextView); + setCurrentDate(date.getTime()); + }, + [setView, setCurrentDate] + ); + + // Scheduler <-> Jotai data bridge + const dataBridge = useMemo( + () => ({ + save: (entity: SaveEntity, action: SaveAction, payload: unknown, id: unknown) => { + if (entity !== "event") return; + + switch (action) { + case "update": { + const eventData = + payload && typeof payload === "object" ? (payload as Partial) : ({} as Partial); + const eventId = eventData.id ?? id; + if (eventId == null) { + console.warn("Update called without an id", { payload, id }); + return; + } + + const updatedEvent = { ...eventData, id: eventId } as Partial & Pick; + dispatchAction({ type: "updateEvent", payload: updatedEvent }); + return updatedEvent; + } + case "create": { + const eventData = + payload && typeof payload === "object" + ? (payload as Omit & Partial>) + : null; + if (!eventData) { + console.warn("Create called without event payload", { payload }); + return; + } + return dispatchAction({ type: "createEvent", payload: eventData }); + } + case "delete": { + const deleteId = + payload && typeof payload === "object" + ? ((payload as { id?: unknown }).id ?? id) + : payload ?? id; + + if (deleteId == null) { + console.warn("Delete called without an id", { payload, id }); + return; + } + + dispatchAction({ type: "deleteEvent", payload: deleteId as SchedulerEventId }); + return deleteId; + } + default: + console.warn(`Unknown action: ${action}`); + return; + } + }, + }), + [dispatchAction] + ); + + const memoizedXY = useMemo(() => ({ nav_height: 0 }), []); + + return ( +
+ + + +
+ ); +} +~~~ + +## Scheduler in der App rendern + +Aktualisieren Sie `src/App.tsx`: + +~~~tsx +import Scheduler from "./components/Scheduler"; +import "./App.css"; + +function App() { + return ; +} + +export default App; +~~~ + +## Zusammenfassung + +Sie haben jetzt den React Scheduler vollständig über Jotai gesteuert: + +- Jotai-Atome halten `events`, `view`, `currentDate` und `config` als einzige Wahrheitsquelle +- Scheduler-Bearbeitungen werden durch `data.save` an typisierte Jotai-Aktionen weitergeleitet +- Undo/Redo ist mit einer snapshot-basierten Verlaufshistorie für Ereignis-/Konfig-Änderungen implementiert +- ein Read-Only-Konfigurationsschalter sperrt Scheduler vor Bearbeitungen +- eine benutzerdefinierte Toolbar kümmert sich um Navigation, View-Wechsel und History-Kontrollen + +## Ausblick + +- Überdenken Sie die Konzepte hinter diesem Beispiel in [Data Binding & State Management Basics](integrations/react/state/state-management-basics.md) +- Erkunden Sie Scheduler-Konfiguration und Template-Optionen in [React Scheduler overview](integrations/react/overview.md) +- Persistenz hinzufügen, indem Ereignisse von einer API geladen/gespeichert werden und Atom-Aktionen dispatcht werden +- Dasselbe Muster mit anderen State-Manager-Optionen erkunden: + - [Using React Scheduler with Redux Toolkit](integrations/react/state/redux-toolkit.md) + - [Using React Scheduler with MobX](integrations/react/state/mobx.md) + - [Using React Scheduler with XState](integrations/react/state/xstate.md) + - [Using React Scheduler with Zustand](integrations/react/state/zustand.md) + - [Using React Scheduler with Valtio](integrations/react/state/valtio.md) \ No newline at end of file diff --git a/i18n/de/docusaurus-plugin-content-docs/current/integrations/react/state/mobx.md b/i18n/de/docusaurus-plugin-content-docs/current/integrations/react/state/mobx.md new file mode 100644 index 00000000..5baa4b05 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/integrations/react/state/mobx.md @@ -0,0 +1,626 @@ +--- +title: React Scheduler mit MobX verwenden +sidebar_label: MobX +description: "Rendern Sie den React Scheduler aus einem beobachtbaren MobX-Zustand und bearbeiten Sie Erstellen/Aktualisieren/Löschen über data.save mit snapshot-basierter Rückgängig-/Wiederherstellungsfunktion." +--- + +# React Scheduler - MobX Tutorial + +Dieses Tutorial zeigt, wie man **DHTMLX React Scheduler** in einer Vite + React + TypeScript-App rendert und von einem **MobX**-Store steuert. +Am Ende haben Sie einen funktionsfähigen Scheduler, der **Erstellen/Aktualisieren/Löschen**, **Ansicht + Datumnavigation**, **snapshot-basierte Rückgängig-/Wiederherstellungsfunktion** für Änderungen an Ereignissen sowie einen **Nur-Lese**-Schalter unterstützt. + +:::note +Der komplette Quellcode ist [auf GitHub](https://github.com/DHTMLX/react-scheduler-mobx-starter) verfügbar. +::: + +Sie werden Folgendes erstellen: + +- einen MobX-Store, der `events`, die aktuelle `view` und `date` besitzt +- eine `data.save`-Brücke, die Scheduler-Bearbeitungen in Store-Aktionen umwandelt +- eine einfache Toolbar (Ansichten, Navigation, Undo/Redo, Read-only-Umschalter), die über dem Scheduler liegt + +## Voraussetzungen + +- Grundkenntnisse in React, TypeScript, Vite und MobX +- Empfohlen: lesen Sie [Data Binding & State Management Basics](integrations/react/state/state-management-basics.md), um das Datenbindungskonzept und den `data.save` Callback zu verstehen, auf dem dieses Tutorial aufbaut. + +## Schnellstart – Projekt erstellen + +In diesem Schritt erstellen wir ein Vite-Projekt, installieren Abhängigkeiten und überprüfen, ob die App läuft. + +Aktionen: + +- Erstellen Sie ein Vite React + TypeScript-Projekt +- Installieren Sie MobX + UI-Abhängigkeiten +- Installieren Sie React Scheduler (Evaluierungspaket) +- Entfernen Sie die Standard-`App.css`-Stile von Vite, damit der Scheduler den gesamten Ansichtsbereich ausfüllt + +Bevor Sie beginnen, installieren Sie [Node.js](https://nodejs.org/en/). + +Erstellen Sie ein Vite React + TypeScript-Projekt: + +~~~bash +npm create vite@latest react-scheduler-mobx-demo -- --template react-ts +cd react-scheduler-mobx-demo +~~~ + +Nun installieren Sie die benötigten Abhängigkeiten. + +* Für **npm**: + +~~~bash +npm install mobx mobx-react-lite @mui/material @mui/icons-material @emotion/react @emotion/styled +~~~ + +* Für **yarn**: + +~~~bash +yarn add mobx mobx-react-lite @mui/material @mui/icons-material @emotion/react @emotion/styled +~~~ + +### Installing React Scheduler + +Installieren Sie React Scheduler gemäß dem [Installationsleitfaden für React Scheduler](integrations/react/installation.md). + +In diesem Tutorial verwenden wir das Evaluierungspaket: + +```bash +npm install @dhtmlx/trial-react-scheduler +``` + +oder + +```bash +yarn add @dhtmlx/trial-react-scheduler +``` + +Wenn Sie bereits das Professional-Paket verwenden, ersetzen Sie `@dhtmlx/trial-react-scheduler` durch `@dhx/react-scheduler` in den Befehlen und Imports. + +Jetzt können Sie den Entwicklungsserver starten: + +~~~bash +npm run dev +~~~ + +Ihr React-Projekt sollte nun unter `http://localhost:5173` laufen. + +:::note +Um den Scheduler den gesamten Seitenbereich ausfüllen zu lassen, entfernen Sie die Standard-Vite-Stile aus `src/App.css`. + +Aktualisieren Sie `src/App.css` auf Folgendes. +::: + +~~~css title="src/App.css" +#root, body { + margin: 0; + padding: 0; + height: 100%; + width: 100%; +} +~~~ + +## Festlegung von Beispieldaten + +In diesem Schritt erstellen wir deterministische Seed-Daten für den Scheduler, damit das Demo bei jedem Durchlauf gleich aussieht. + +Aktionen: + +- Erstellen Sie `src/seed/data.ts` mit einer kleinen Menge von Ereignissen +- Exportieren Sie eine anfängliche `view` und `date`, damit der Scheduler in einem vorhersehbaren Zustand startet + +Erstellen Sie `src/seed/data.ts`: + +~~~ts title="src/seed/data.ts" +export type SchedulerView = "day" | "week" | "month"; + +export interface SeedEvent { + id: string | number; + start_date: string; + end_date: string; + text: string; +} + +export const seedEvents: SeedEvent[] = [ + { id: 1, start_date: "2025-08-11T02:00:00Z", end_date: "2025-08-11T10:20:00Z", text: "Product Strategy Hike" }, + { id: 2, start_date: "2025-08-12T06:00:00Z", end_date: "2025-08-12T11:00:00Z", text: "Tranquil Tea Time" }, + { id: 3, start_date: "2025-08-15T03:00:00Z", end_date: "2025-08-15T08:00:00Z", text: "Demo and Showcase" }, +]; + +export const seedDate = Date.parse("2025-08-15T00:00:00Z"); + +export const seedView: SchedulerView = "week"; +~~~ + +:::note +Die begleitende Demo enthält zusätzliche Ereignisse für eine reichere visuelle Darstellung. +::: + +## Aufbau der Toolbar-Komponente + +In diesem Schritt erstellen wir eine einfache wiederverwendbare Toolbar, die die Scheduler-Navigation und die Historie steuert. + +Aktionen: + +- Erstellen Sie `src/components/Toolbar.tsx` +- Fügen Sie Schaltflächen für **Tag / Woche / Monat** hinzu +- Fügen Sie **Prev / Today / Next**-Navigationsschaltflächen hinzu +- Fügen Sie **Undo / Redo**-Schaltflächen hinzu, die an Callback-Funktionen gebunden sind +- Fügen Sie einen **Read-only**-Umschalter hinzu + +Erstellen Sie `src/components/Toolbar.tsx`: + +~~~tsx title="src/components/Toolbar.tsx" +import { ButtonGroup, Button, Typography, Stack, FormControlLabel, Switch } from "@mui/material"; +import UndoIcon from "@mui/icons-material/Undo"; +import RedoIcon from "@mui/icons-material/Redo"; +import React from "react"; + +export interface ToolbarProps { + currentView: string; + currentDate: Date; + isReadOnly: boolean; + canUndo?: boolean; + canRedo?: boolean; + onUndo?: () => void; + onRedo?: () => void; + onNavigate?: (action: "prev" | "next" | "today") => void; + onReadOnlyChange?: (value: boolean) => void; + setView: (view: "day" | "week" | "month") => void; +} + +export default React.memo(function Toolbar({ + currentView, + currentDate, + isReadOnly, + canUndo, + canRedo, + onUndo, + onRedo, + onNavigate, + onReadOnlyChange, + setView, +}: ToolbarProps) { + return ( + + + {(["day", "week", "month"] as const).map((label) => ( + + ))} + + + + + + + onReadOnlyChange?.(e.target.checked)} + inputProps={{ "aria-label": "Toggle read-only" }} + /> + } + /> + + + + {new Date(currentDate).toLocaleDateString(undefined, { + weekday: "short", + month: "short", + day: "numeric", + })} + + + + + + + + + ); +}); +~~~ + +## Einrichtung des MobX-Stores + +In diesem Schritt erstellen wir einen MobX-Store, der Scheduler-Zustand besitzt und snapshot-basierte Undo/Redo implementiert. + +Aktionen: + +- Erstellen Sie `src/store.ts` +- Speichern Sie `events`, `view`, `currentDate` und `config` als beobachtbaren Zustand +- Implementieren Sie `createEvent`, `updateEvent`, `deleteEvent`-Methoden +- Fügen Sie `updateConfig` für das Umschalten von Read-only hinzu +- Fügen Sie `past`/`future`-Historienstapel sowie `undo`/`redo`-Operationen hinzu + +Erstellen Sie `src/store.ts`: + +~~~ts title="src/store.ts" +import { makeAutoObservable } from "mobx"; +import type { SchedulerConfig } from "@dhtmlx/trial-react-scheduler"; +import { seedEvents, seedView, seedDate, type SeedEvent, type SchedulerView } from "./seed/data"; + +export interface SchedulerEvent extends SeedEvent { + /** + * Extra Scheduler fields are allowed. + * The demo only relies on id/start_date/end_date/text. + */ + [key: string]: unknown; +} + +interface Snapshot { + events: SchedulerEvent[]; + config: SchedulerConfig; +} + +function cloneJson(value: T): T { + return JSON.parse(JSON.stringify(value)) as T; +} + +class SchedulerStore { + events: SchedulerEvent[] = seedEvents as SchedulerEvent[]; + view: SchedulerView = seedView; + currentDate: number = seedDate; + config: SchedulerConfig = {}; + + past: Snapshot[] = []; + future: Snapshot[] = []; + maxHistory = 50; + + constructor() { + makeAutoObservable(this, {}, { autoBind: true }); + } + + get canUndo(): boolean { + return this.past.length > 0; + } + + get canRedo(): boolean { + return this.future.length > 0; + } + + private generateId(): string { + return `id_${Date.now().toString()}`; + } + + private snapshot(): Snapshot { + return { + events: cloneJson(this.events), + config: cloneJson(this.config), + }; + } + + private saveToHistory(): void { + this.past.push(this.snapshot()); + if (this.past.length > this.maxHistory) { + this.past.shift(); + } + this.future = []; + } + + private restore(snapshot: Snapshot): void { + this.events = snapshot.events; + this.config = snapshot.config; + } + + /** + * Navigation is not part of history: undo/redo in this demo is focused on event mutations. + */ + setCurrentDate(date: number): void { + this.currentDate = date; + } + + /** + * Navigation is not part of history: undo/redo in this demo is focused on event mutations. + */ + setView(view: SchedulerView): void { + this.view = view; + } + + updateConfig(partial: Partial): void { + this.saveToHistory(); + this.config = { ...this.config, ...partial }; + } + + /** + * Called by Scheduler's data processor (data.save) on event creation. + * + * Important: we return the created event with a final id (simulating a backend-generated id), + * so Scheduler can replace its temporary id and keep subsequent updates working correctly. + */ + createEvent(eventDraft: Partial): SchedulerEvent { + this.saveToHistory(); + + const id = this.generateId(); + const newEvent: SchedulerEvent = { + ...eventDraft, + id, + start_date: String(eventDraft.start_date ?? new Date().toISOString()), + end_date: String(eventDraft.end_date ?? new Date().toISOString()), + text: String(eventDraft.text ?? "(no title)"), + }; + + this.events = [...this.events, newEvent]; + return newEvent; + } + + updateEvent(updatedEvent: Partial & { id: string | number }): void { + this.saveToHistory(); + this.events = this.events.map((event) => { + if (String(event.id) === String(updatedEvent.id)) { + return { ...event, ...updatedEvent }; + } + return event; + }); + } + + deleteEvent(id: string | number): void { + this.saveToHistory(); + this.events = this.events.filter((event) => String(event.id) !== String(id)); + } + + undo(): void { + if (this.past.length === 0) { + return; + } + + const previous = this.past.pop(); + if (!previous) { + return; + } + + this.future.unshift(this.snapshot()); + this.restore(previous); + } + + redo(): void { + if (this.future.length === 0) { + return; + } + + const next = this.future.shift(); + if (!next) { + return; + } + + this.past.push(this.snapshot()); + this.restore(next); + } +} + +const schedulerStore = new SchedulerStore(); +export default schedulerStore; +~~~ + +## Erstellung der Haupt-Scheduler-Komponente + +In diesem Schritt rendern wir den React Scheduler und verbinden ihn mit dem MobX-Store. + +Aktionen: + +- Erstellen Sie `src/components/Scheduler.tsx` +- Umgeben Sie die Komponente mit `observer`, damit sie neu rendert, wenn sich der Store ändert +- Erstellen Sie eine `data.save`-Bridge, die Store-Aktionen für create/update/delete aufruft +- Fügen Sie einen `onViewChange`-Handler hinzu, um interne Scheduler-View-Änderungen mit dem Zustand zu synchronisieren +- Binden Sie den Read-only-Schalter über `updateConfig` ein +- Verstecken Sie die integrierte Navigationsleiste des Schedulers und verwenden Sie stattdessen die Toolbar + +Erstellen Sie `src/components/Scheduler.tsx`: + +~~~tsx title="src/components/Scheduler.tsx" +import { observer } from "mobx-react-lite"; +import ReactScheduler from "@dhtmlx/trial-react-scheduler"; +import "@dhtmlx/trial-react-scheduler/dist/react-scheduler.css"; +import Toolbar from "./Toolbar"; +import schedulerStore, { type SchedulerEvent } from "../store"; +import type { SchedulerView } from "../seed/data"; +import { useCallback, useMemo } from "react"; + +const DemoMobxScheduler = observer(() => { + const { + events, + view, + currentDate, + config, + canUndo, + canRedo, + setView, + setCurrentDate, + updateConfig, + createEvent, + updateEvent, + deleteEvent, + undo, + redo, + } = schedulerStore; + + const activeDate = useMemo(() => new Date(currentDate), [currentDate]); + + const handleDateNavigation = useCallback( + (action: "prev" | "next" | "today") => { + if (action === "today") { + setCurrentDate(Date.now()); + return; + } + + const step = action === "next" ? 1 : -1; + const date = new Date(currentDate); + + if (view === "day") { + date.setDate(date.getDate() + step); + } else if (view === "week") { + date.setDate(date.getDate() + step * 7); + } else { + date.setMonth(date.getMonth() + step); + } + + setCurrentDate(date.getTime()); + }, + [currentDate, view, setCurrentDate] + ); + + const handleViewChange = useCallback( + (mode: string, date: Date) => { + const nextView: SchedulerView = + mode === "day" || mode === "week" || mode === "month" ? mode : "month"; + setView(nextView); + setCurrentDate(date.getTime()); + }, + [setView, setCurrentDate] + ); + + const isReadOnly = Boolean((config as { readonly?: unknown }).readonly); + const handleReadOnlyChange = useCallback( + (value: boolean) => updateConfig({ readonly: value }), + [updateConfig] + ); + + type DataAction = "create" | "update" | "delete"; + + const dataBridge = useMemo( + () => ({ + save: (entity: string, action: string, payload: unknown, id: string | number) => { + if (entity !== "event") { + return; + } + + const safeAction = action as DataAction; + + if (safeAction === "update") { + return updateEvent(payload as Partial & { id: string | number }); + } + + if (safeAction === "create") { + // Wichtig: Rückgabe des erstellten Events mit der endgültigen id. + // Das simuliert eine Backend-generierte id und hält anschließende Aktualisierungen funktionsfähig. + return createEvent(payload as Partial); + } + + if (safeAction === "delete") { + return deleteEvent(id); + } + + console.warn(`Unknown data.save action: ${action}`); + return; + }, + }), + [updateEvent, createEvent, deleteEvent] + ); + + const handleUndo = useCallback(() => undo(), [undo]); + const handleRedo = useCallback(() => redo(), [redo]); + + const memoizedXY = useMemo(() => ({ nav_height: 0 }), []); + + return ( +
+ + + +
+ ); +}); + +export default DemoMobxScheduler; +~~~ + +Schließlich aktualisieren Sie `src/App.tsx`, um die Scheduler-Komponente zu rendern: + +~~~tsx title="src/App.tsx" +import { useEffect } from "react"; +import Scheduler from "./components/Scheduler"; +import "./App.css"; + +function App() { + useEffect(() => { + document.title = "DHTMLX React Scheduler - MobX Demo"; + }, []); + + return ; +} + +export default App; +~~~ + +An diesem Punkt sollte Ihre App den Scheduler mit einer benutzerdefinierten Toolbar darüber rendern. + +## Anwendung ausführen + +In diesem Schritt führen wir das Demo-Beispiel aus und überprüfen das Bearbeiten und den Verlauf. + +Aktionen: + +- Starten Sie den Entwicklungsserver (falls er nicht läuft) +- Erstellen/Bearbeiten/Anordnen von Ereignissen und bestätigen Sie, dass der Store über `data.save` aktualisiert wird +- Verwenden Sie Undo/Redo, um Änderungen an Ereignissen rückgängig zu machen bzw. anzuwenden +- Umschalten Sie den Read-only-Modus, um den Scheduler vor Bearbeitungen zu schützen + +Ausführen: + +~~~bash +npm run dev +~~~ + +Probieren Sie Folgendes aus: + +- Erstellen Sie ein Ereignis (Doppelklick im Kalender oder über die integrierte Editor-UI) +- Bearbeiten Sie das Ereignis (Text/Zeit ändern) +- Ziehen Sie ein Ereignis in einen neuen Zeitslot +- Verwenden Sie **Undo** / **Redo** in der Toolbar +- Schalten Sie **Read-only** ein, um Scheduler vor Bearbeitungen zu sperren + +## Zusammenfassung + +In diesem Tutorial haben Sie: + +- ein Vite + React-Projekt erstellt +- React Scheduler hinzugefügt und an einen MobX-Store angebunden +- snapshot-basierte Undo/Redo mit `past`/`future`-Historienarrays implementiert +- Ereignisse, Ansicht/Datum und Konfiguration aus dem beobachtbaren MobX-Zustand gesteuert +- den `data.save`-Callback verwendet, sodass jede Scheduler-Änderung zu einer Store-Aktion wird +- einen Read-only-Konfigurations-Umschalter, der Sie den Scheduler vor Bearbeitungen schützen lässt + +Dies hält die Scheduler-Komponente vollständig deklarativ, während Mutationlogik und Verlaufseinpeicherung vollständig im MobX-Zustand gekapselt sind. + +## Was kommt als Nächstes + +Um fortzufahren: + +- Überprüfen Sie erneut die Konzepte hinter diesem Beispiel in [Data Binding & State Management Basics](integrations/react/state/state-management-basics.md) +- Erkunden Sie die Konfigurations- und Template-Optionen von Scheduler in [React Scheduler overview](integrations/react/overview.md) +- Probieren Sie dasselbe Muster mit anderen Zustands-Managern aus: + - [Using React Scheduler with Redux Toolkit](integrations/react/state/redux-toolkit.md) + - [Using React Scheduler with Zustand](integrations/react/state/zustand.md) + - [Using React Scheduler with XState](integrations/react/state/xstate.md) + - [Using React Scheduler with Jotai](integrations/react/state/jotai.md) + - [Using React Scheduler with Valtio](integrations/react/state/valtio.md) \ No newline at end of file diff --git a/i18n/de/docusaurus-plugin-content-docs/current/integrations/react/state/redux-toolkit.md b/i18n/de/docusaurus-plugin-content-docs/current/integrations/react/state/redux-toolkit.md new file mode 100644 index 00000000..8590b0b3 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/integrations/react/state/redux-toolkit.md @@ -0,0 +1,590 @@ +--- +title: React Scheduler – Redux Toolkit Tutorial +sidebar_label: Redux Toolkit +description: Erfahren Sie, wie Sie den DHTMLX React Scheduler mit Redux Toolkit integrieren, einschließlich Ereignis-CRUD, Synchronisierung von Ansicht/Datum und Undo/Redo. +--- + +# React Scheduler – Redux Toolkit Tutorial + +Dieses Tutorial zeigt, wie der **DHTMLX React Scheduler** an einen **Redux Toolkit** Store angebunden wird. Sie speichern Ereignisse und UI-Zustand (view/date/config) in Redux, routen Scheduler-Bearbeitungen über `data.save`, und fügen **Undo/Redo** mit snapshot-basiertem Verlauf sowie einen **Read-only**-Schalter hinzu. + +:::note +Die vollständige Quelldatei ist [auf GitHub verfügbar](https://github.com/DHTMLX/react-scheduler-redux-starter). +::: + +## Voraussetzungen + +- Node.js (LTS-Version empfohlen) +- Grundkenntnisse in React + TypeScript +- Grundlegende Redux-Konstrukte (Aktionen, Reducer, Store). Falls Sie Auffrischung benötigen, siehe die Redux-Dokumentation: https://redux.js.org/ + +## Schnellstart – Projekt erstellen + +Erstellen Sie ein Vite + React + TS-Projekt: + +~~~bash +npm create vite@latest scheduler-redux-demo -- --template react-ts +cd scheduler-redux-demo +npm install +~~~ + +Installieren Sie Redux Toolkit + React Redux: + +~~~bash +npm install @reduxjs/toolkit react-redux +~~~ + +Installieren Sie Material UI (verwendet im Demo-Toolbar): + +~~~bash +npm install @mui/material @mui/icons-material @emotion/react @emotion/styled +~~~ + +### Installation des React Scheduler + +Installieren Sie React Scheduler wie im [React Scheduler Installationsleitfaden](integrations/react/installation.md). + +In diesem Tutorial verwenden wir das Evaluationspaket: + +```bash +npm install @dhtmlx/trial-react-scheduler +``` + +oder + +```bash +yarn add @dhtmlx/trial-react-scheduler +``` + +Wenn Sie bereits das Professional-Paket verwenden, ersetzen Sie `@dhtmlx/trial-react-scheduler` durch `@dhx/react-scheduler` in den Befehlen und Imports. + +Starten Sie den Dev-Server: + +~~~bash +npm run dev +~~~ + +:::note +Damit Scheduler die komplette Seite einnimmt, entfernen Sie die Standard-Stile aus `src/App.css` und fügen Sie Folgendes hinzu: + +~~~css +#root { + margin: 0; + padding: 0; + height: 100%; + width: 100%; +} + +body { + margin: 0; +} +~~~ +::: + +## Redux-Store konfigurieren + +Erstellen Sie `src/redux/store.ts`. Dieser verbindet den `scheduler`-Reducer mit dem Redux-Store: + +~~~ts +import { configureStore } from "@reduxjs/toolkit"; +import schedulerReducer from "./schedulerSlice"; + +export const store = configureStore({ + reducer: { + scheduler: schedulerReducer, + }, +}); + +export type RootState = ReturnType; +export type AppDispatch = typeof store.dispatch; +~~~ + +## Gemeinsame Typen definieren + +Erstellen Sie `src/redux/types.ts`. Diese Typen werden in Slice, Aktionen und Komponenten gemeinsam genutzt: + +~~~ts +export type SchedulerView = "day" | "week" | "month"; + +export interface SchedulerEvent { + id: string | number; + start_date: string; + end_date: string; + text: string; + + // Scheduler kann zusätzliche Felder anfügen (z. B. benutzerdefinierte Props). Demo bleibt permissiv. + [key: string]: unknown; +} + +export type SchedulerConfig = Record; + +export interface SchedulerSnapshot { + events: SchedulerEvent[]; + config: SchedulerConfig; +} +~~~ + +- `SchedulerEvent` verwendet eine Index-Signatur, damit Scheduler zur Laufzeit zusätzliche Felder anhängen kann. +- `SchedulerSnapshot` erfasst die für Undo/Redo benötigten Daten (Ereignisse + config). + +## Beispieldaten einrichten + +Erstellen Sie `src/seed/data.ts` mit einigen Ereignissen und initialem UI-Zustand. Beachten Sie, dass `currentDate` als **Zahl** (Zeitstempel) gespeichert wird, damit der Redux-Status serialisierbar bleibt. + +~~~ts +export const seedEvents = [ + { id: 1, start_date: "2025-08-11T02:00:00Z", end_date: "2025-08-11T10:20:00Z", text: "Product Strategy Hike" }, + { id: 2, start_date: "2025-08-12T06:00:00Z", end_date: "2025-08-12T11:00:00Z", text: "Tranquil Tea Time" }, + { id: 3, start_date: "2025-08-15T03:00:00Z", end_date: "2025-08-15T08:00:00Z", text: "Demo and Showcase" }, +]; + +export const seedDate = Date.parse("2025-08-15T00:00:00Z"); +export const seedView = "week"; +~~~ + +:::note +Die Begleit-Demo enthält zusätzliche Ereignisse für eine reichhaltigere visuelle Darstellung. +::: + +## Scheduler-Aktionen definieren (create/update/delete) + +Scheduler-Bearbeitungen werden durch Redux-Aktionen gesteuert. Erstellen Sie `src/redux/actions.ts`. + +Die `createEvent`-Aktion verwendet eine "prepare"-Callback-Funktion, damit eine stabile ID generiert werden kann (Simulation einer backend-generierten ID). Wir fügen außerdem einen kleinen Hilfs-Helper (`dispatchAction`) hinzu, der die dispatchte Payload konsistent zurückgibt – das ist nützlich, weil Scheduler's `data.save` das erzeugte/aktualisierte Objekt zurückgeben kann. + +~~~ts +import { createAction } from "@reduxjs/toolkit"; +import type { Dispatch } from "redux"; +import type { SchedulerEvent } from "./types"; + +// Simuliere den Empfang einer ID aus dem Backend. +const generateId = () => `id_${Date.now().toString()}`; + +export const createEvent = createAction( + "schedulerDomain/createEvent", + (eventData: Omit, "id">) => { + const newEvent: SchedulerEvent = { + ...(eventData as Omit), + id: generateId(), + }; + return { payload: newEvent }; + } +); + +export const deleteEvent = createAction( + "schedulerDomain/deleteEvent", + (id: SchedulerEvent["id"]) => ({ payload: id }) +); + +export const updateEvent = createAction( + "schedulerDomain/updateEvent", + (eventData: Partial & Pick) => ({ payload: eventData }) +); + +// Hilfsfunktion, um eine Aktion zu dispatchen und konsistent deren Payload zurückzugeben +export function dispatchAction( + dispatch: Dispatch, + actionCreator: (arg: Arg) => { type: string; payload: Payload }, + arg: Arg +): Payload { + return dispatch(actionCreator(arg)).payload; +} +~~~ + +## Die Redux-Slice erstellen + +Erstellen Sie nun `src/redux/schedulerSlice.ts`. Dieser Slice speichert: + +- `events` (Scheduler-Daten) +- `currentDate` (als Zeitstempel) +- `view` (`day | week | month`) +- `config` (Scheduler-Konfiguration, einschließlich `readonly`) +- `past` / `future` (Snapshot-Arrays für Undo/Redo) + +Undo/Redo ist direkt in den Slice integriert, mithilfe von Snapshots. Vor jeder datenverändernden Aktion speichert `pushHistory` einen Snapshot der aktuellen Ereignisse und der Konfiguration. Die Reducer `undo` und `redo` tauschen den aktuellen Zustand gegen einen Snapshot aus der Historie aus. + +~~~ts +import { createSlice, type PayloadAction } from "@reduxjs/toolkit"; +import { seedEvents, seedDate, seedView } from "../seed/data"; +import { createEvent, deleteEvent, updateEvent } from "./actions"; +import type { SchedulerConfig, SchedulerEvent, SchedulerSnapshot, SchedulerView } from "./types"; + +interface SchedulerState { + events: SchedulerEvent[]; + currentDate: number; + view: SchedulerView; + config: SchedulerConfig; + + past: SchedulerSnapshot[]; + future: SchedulerSnapshot[]; + maxHistory: number; +} + +const deepCopy = (value: T): T => { + // JSON-Clone reicht hier aus: + // - Ereignisse/Config sind einfache Objekte + // - Wir benötigen unveränderliche Snapshots für Undo/Redo + return JSON.parse(JSON.stringify(value)) as T; +}; + +const createSnapshot = (state: SchedulerState): SchedulerSnapshot => ({ + events: deepCopy(state.events), + config: deepCopy(state.config), +}); + +const pushHistory = (state: SchedulerState) => { + state.past.push(createSnapshot(state)); + + if (state.maxHistory > 0 && state.past.length > state.maxHistory) { + state.past.shift(); + } + + state.future = []; +}; + +const initialState: SchedulerState = { + events: seedEvents as unknown as SchedulerEvent[], + currentDate: seedDate, + view: seedView as SchedulerView, + config: {}, + + past: [], + future: [], + maxHistory: 50, +}; + +const schedulerSlice = createSlice({ + name: "scheduler", + initialState, + reducers: { + undo(state) { + if (state.past.length === 0) return; + + const previous = state.past[state.past.length - 1]; + const newFuture = createSnapshot(state as SchedulerState); + + state.events = previous.events; + state.config = previous.config; + state.past = state.past.slice(0, -1); + state.future = [newFuture, ...state.future]; + }, + redo(state) { + if (state.future.length === 0) return; + + const next = state.future[0]; + const newPast = createSnapshot(state as SchedulerState); + + state.events = next.events; + state.config = next.config; + state.future = state.future.slice(1); + state.past = [...state.past, newPast]; + }, + + // Navigation ist in diesem Demo-Beispiel keine undobare Benutzeraktion. + setCurrentDate(state, { payload }: PayloadAction) { + state.currentDate = payload; + }, + setView(state, { payload }: PayloadAction) { + state.view = payload; + }, + + updateConfig(state, { payload }: PayloadAction>) { + pushHistory(state as SchedulerState); + state.config = { ...state.config, ...payload }; + }, + }, + extraReducers: (builder) => { + builder + .addCase(createEvent, (state, action) => { + pushHistory(state as SchedulerState); + state.events.push(action.payload); + }) + .addCase(deleteEvent, (state, action) => { + pushHistory(state as SchedulerState); + state.events = state.events.filter((e) => String(e.id) !== String(action.payload)); + }) + .addCase(updateEvent, (state, action) => { + pushHistory(state as SchedulerState); + + const index = state.events.findIndex((e) => String(e.id) === String(action.payload.id)); + if (index !== -1) { + state.events[index] = { ...state.events[index], ...action.payload }; + } + }); + }, +}); + +export const { undo, redo, setCurrentDate, setView, updateConfig } = schedulerSlice.actions; +export default schedulerSlice.reducer; +~~~ + +## Die Steuerungstoolbar-Komponente bauen + +Erstellen Sie `src/components/Toolbar.tsx`. Das ist eine kleine MUI-Toolbar, die Folgendes ermöglicht: + +- Ansicht wechseln (day/week/month) +- vorherige/heute/naechste navigieren +- Undo/Redo +- Read-only-Modus umschalten + +~~~tsx +import { ButtonGroup, Button, Typography, Stack, FormControlLabel, Switch } from "@mui/material"; +import UndoIcon from "@mui/icons-material/Undo"; +import RedoIcon from "@mui/icons-material/Redo"; +import React from "react"; +import type { SchedulerView } from "../redux/types"; + +export interface ToolbarProps { + currentView: SchedulerView; + currentDate: Date; + isReadOnly: boolean; + canUndo: boolean; + canRedo: boolean; + onUndo?: () => void; + onRedo?: () => void; + onNavigate?: (action: "prev" | "next" | "today") => void; + onReadOnlyChange?: (value: boolean) => void; + setView: (view: SchedulerView) => void; +} + +export default React.memo(function Toolbar({ + currentView, + currentDate, + isReadOnly, + canUndo, + canRedo, + onUndo, + onRedo, + onNavigate, + onReadOnlyChange, + setView, +}: ToolbarProps) { + return ( + + + {(["day", "week", "month"] as const).map((l) => ( + + ))} + + + + + + onReadOnlyChange?.(e.target.checked)} + inputProps={{ "aria-label": "Toggle read-only" }} + /> + } + /> + + + {new Date(currentDate)?.toLocaleDateString(undefined, { weekday: "short", month: "short", day: "numeric" })} + + + + + + + + ); +}); +~~~ + +## Scheduler mit Redux verbinden + +Erstellen Sie `src/components/Scheduler.tsx`. Diese Komponente: + +- liest `events/view/currentDate/config` aus dem flachen Redux-State +- bietet einen `data.save`-Callback, der Redux-Aktionen dispatcht +- gibt erstellte/aktualisierte Entitäten von `save` zurück, damit Scheduler seine interne Buchführung synchronisieren kann +- verbindet `undo/redo` und den `readonly`-Config-Schalter +- versteckt die eingebauten Navbar und verwendet stattdessen die benutzerdefinierte Toolbar + +~~~tsx +import { useCallback, useMemo } from "react"; +import { useDispatch, useSelector } from "react-redux"; + +// Trial-Import: +// import ReactScheduler from "@dhtmlx/trial-react-scheduler"; +// import "@dhtmlx/trial-react-scheduler/dist/react-scheduler.css"; + +// Pro-Import: +import ReactScheduler from "@dhx/react-scheduler"; +import "@dhx/react-scheduler/dist/react-scheduler.css"; + +import Toolbar from "./Toolbar"; +import { redo, setCurrentDate, setView, undo, updateConfig } from "../redux/schedulerSlice"; +import { createEvent, updateEvent, deleteEvent, dispatchAction } from "../redux/actions"; +import type { AppDispatch, RootState } from "../redux/store"; +import type { SchedulerEvent, SchedulerView } from "../redux/types"; + +export default function ReactSchedulerReduxDemo() { + const dispatch = useDispatch(); + const { past, future, events, view, currentDate, config } = useSelector((s: RootState) => s.scheduler); + const canUndo = past.length > 0; + const canRedo = future.length > 0; + const activeDate = useMemo(() => new Date(currentDate), [currentDate]); + const isReadOnly = Boolean((config as { readonly?: unknown }).readonly); + + const handleDateNavigation = useCallback((action: "prev" | "next" | "today") => { + if (action === "today") { + dispatch(setCurrentDate(Date.now())); + return; + } + + const step = action === "next" ? 1 : -1; + const date = new Date(activeDate); + + if (view === "day") { + date.setDate(date.getDate() + step); + } else if (view === "week") { + date.setDate(date.getDate() + step * 7); + } else { + date.setMonth(date.getMonth() + step); + } + dispatch(setCurrentDate(date.getTime())); + }, [activeDate, view, dispatch]); + + // Scheduler <-> Redux Datenbrücke + const dataBridge = useMemo(() => ({ + save: (entity: string, action: string, payload: unknown, id: unknown) => { + if (entity !== "event") return; + + switch (action) { + case "update": { + const eventData = payload && typeof payload === "object" ? (payload as Record) : {}; + const eventId = (eventData as Record).id ?? id; + if (eventId == null) { + console.warn("Update called without an id", { payload, id }); + return; + } + + const eventWithId = { ...eventData, id: eventId } as Partial & Pick; + return dispatchAction(dispatch, updateEvent, eventWithId); + } + case "create": + return dispatchAction(dispatch, createEvent, payload as Omit, "id">); + case "delete": { + const deleteId = + payload && typeof payload === "object" + ? (payload as Record).id ?? id + : payload ?? id; + if (deleteId == null) { + console.warn("Delete called without an id", { payload, id }); + return; + } + return dispatchAction(dispatch, deleteEvent, deleteId as SchedulerEvent["id"]); + } + default: + console.warn(`Unknown action: ${action}`); + return; + } + }, + }), [dispatch]); + + const handleViewChange = useCallback( + (mode: string, date: Date) => { + const nextView: SchedulerView = mode === "day" || mode === "week" || mode === "month" ? mode : "month"; + dispatch(setView(nextView)); + dispatch(setCurrentDate(date.getTime())); + }, + [dispatch] + ); + + const handleSetView = useCallback((nextView: SchedulerView) => dispatch(setView(nextView)), [dispatch]); + + const handleUndo = useCallback(() => dispatch(undo()), [dispatch]); + const handleRedo = useCallback(() => dispatch(redo()), [dispatch]); + const handleReadOnlyChange = useCallback( + (value: boolean) => dispatch(updateConfig({ readonly: value })), + [dispatch] + ); + const memoizedXY = useMemo(() => ({ nav_height: 0 }), []); + + return ( +
+ + + +
+ ); +} +~~~ + +## Redux-Provider integrieren + +Schließen Sie Ihre App schließlich mit dem Redux-`Provider` ein. Aktualisieren Sie `src/App.tsx`: + +~~~tsx +import { Provider } from "react-redux"; +import { store } from "./redux/store"; +import Scheduler from "./components/Scheduler"; +import "./App.css"; + +function App() { + return ( + + + + ); +} + +export default App; +~~~ + +## Zusammenfassung + +Sie haben den React Scheduler nun vollständig über Redux Toolkit gesteuert: + +- Scheduler liest `events`, `view`, `currentDate` und `config` aus Redux +- Benutzerbearbeitungen werden über `data.save` -> Redux-Aktionen geroutet +- Die UI bleibt synchron, da Scheduler aktualisierte `events` über Props erhält +- Undo/Redo ist über snapshot-basierte History direkt in den Slice integriert +- Ein Read-only-Konfigurationsschalter lässt Sie den Scheduler vor Bearbeitungen sperren + +## Was kommt als Nächstes + +- Vertiefen Sie die Konzepte hinter diesem Beispiel in [Data Binding & State Management Basics](integrations/react/state/state-management-basics.md) +- Erkunden Sie Scheduler-Konfigurationen und Template-Optionen in [React Scheduler overview](integrations/react/overview.md) +- Persistenz hinzufügen (Ereignisse von einer API laden/ speichern), indem Sie asynchrone Thunks dispatchen und den Slice entsprechend aktualisieren +- Dasselbe Muster mit anderen State-Management-Libraries einsetzen: + - [Using React Scheduler with MobX](integrations/react/state/mobx.md) + - [Using React Scheduler with XState](integrations/react/state/xstate.md) + - [Using React Scheduler with Zustand](integrations/react/state/zustand.md) + - [Using React Scheduler with Valtio](integrations/react/state/valtio.md) + - [Using React Scheduler with Jotai](integrations/react/state/jotai.md) \ No newline at end of file diff --git a/i18n/de/docusaurus-plugin-content-docs/current/integrations/react/state/state-management-basics.md b/i18n/de/docusaurus-plugin-content-docs/current/integrations/react/state/state-management-basics.md new file mode 100644 index 00000000..b545b56a --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/integrations/react/state/state-management-basics.md @@ -0,0 +1,301 @@ +--- +title: Datenbindung & Zustandsverwaltung im React Scheduler +sidebar_label: Grundlagen +description: "Überblick über die beiden Datenbindungsmodelle im React Scheduler und Basismuster für React-Zustand und Zustand-Manager." +--- + +# Datenbindung & Zustandsverwaltung im React Scheduler + +Der React Scheduler unterstützt zwei Muster der Datenbindung: + +1. **React-Zustand als Quelle der Wahrheit** (empfohlen für die meisten React-Apps) +2. **Scheduler als Quelle der Wahrheit** (nützlich für spezialisierte, Hochdurchsatz-Fälle) + +Beide Modelle sind gültig. Wählen Sie pro Bildschirm ein Modell und halten Sie es konsistent. + +Wenn Sie noch kein einfaches Diagramm gerendert haben, beginnen Sie mit dem [Schneller Einstieg](integrations/react/quick-start.md). + +## Datenmodelle + +### React-Zustand als Quelle der Wahrheit (empfohlen) + +In diesem Modell: + +- speichern Sie `events` (und oft `view` / `date`) im React-Zustand oder in einem Zustand-Manager +- übergeben Sie diesen Zustand als Props an `` +- Scheduler ruft `data.save` / `data.batchSave` auf, wenn Benutzer Daten bearbeiten +- Sie aktualisieren den Zustand, und React rendert den Scheduler erneut mit den neuen Props + +Verwenden Sie dies, wenn andere React-Komponenten mit Scheduler-Daten synchronisiert bleiben müssen. + +### Scheduler als Quelle der Wahrheit + +In diesem Modell: + +- Scheduler lädt und ändert Daten intern +- Sie geben Bearbeitungen optional an Backend-Endpunkte weiter +- React spiegelt nicht jedes Ereignis-Update im Zustand wider + +Verwenden Sie dieses Modell, wenn React nicht jedes einzelne Scheduler-Update sofort widerspiegeln muss. + +## React-Zustand als Quelle der Wahrheit {#reactstateasthesourceoftruth} + +### Minimalbeispiel + +```tsx +import { useMemo, useState } from "react"; +import ReactScheduler, { type Event } from "@dhtmlx/trial-react-scheduler"; +import "@dhtmlx/trial-react-scheduler/dist/react-scheduler.css"; + +import { seedEvents } from "./seed/data"; + +export default function ReactStateScheduler() { + const [events, setEvents] = useState(seedEvents); + + const data = useMemo( + () => ({ + save: (entity: string, action: string, item: Event, id: string | number) => { + if (entity !== "event") return; + + if (action === "create") { + setEvents((prev) => [...prev, item]); + return; + } + + if (action === "update") { + setEvents((prev) => prev.map((e) => (e.id === id ? item : e))); + return; + } + + if (action === "delete") { + setEvents((prev) => prev.filter((e) => e.id !== id)); + } + }, + }), + [] + ); + + return ( +
+ +
+ ); +} +``` + +Dieses Muster macht React zum zentralen Eigentümer der Ereignisdaten. + +## Behandlung von Aktualisierungen mit `data.save` {#handlingchangeswithdatasave} + +`data.save` wird bei jeder Benutzeränderung aufgerufen: + +```ts +(entity: string, action: string, item: any, id: string | number) => void | Promise +``` + +Für Scheduler-Ereignis-CRUD: + +- `entity` ist `"event"` +- `action` ist `"create" | "update" | "delete"` +- `item` ist das erstellte/aktualisierte/gelöschte Ereignis +- `id` ist die betroffene Ereignis-ID + +### Backend-orientiertes Beispiel + +```tsx +const data = { + save: async (entity: string, action: string, item: any, id: string | number) => { + if (entity !== "event") return; + + if (action === "create") { + const response = await fetch("/api/events", { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify(item), + }); + + const created = await response.json(); + return { id: created.id }; + } + + if (action === "update") { + await fetch(`/api/events/${id}`, { + method: "PUT", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify(item), + }); + return; + } + + if (action === "delete") { + await fetch(`/api/events/${id}`, { method: "DELETE" }); + } + }, +}; +``` + +Wenn Ihr Backend temporäre IDs bei der Erstellung ersetzt, geben Sie `{ id: realId }` zurück, damit Scheduler Client- und Server-IDs abgleichen kann. + +## Massenaktualisierungen mit `data.batchSave` + +`data.batchSave` ist sinnvoll, wenn viele Änderungen in kurzer Zeit auftreten (zum Beispiel bei dichten Bearbeitungssitzungen). + +Verwenden Sie es, wenn Sie möchten: + +- Anfragenanzahl reduzieren, indem gruppierte Änderungen gesendet werden +- Aktualisierungen in einer einzigen Reduzer-/Store-Transaktion verarbeiten + +```tsx + { + await fetch("/api/events/batch", { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify(changes), + }); + }, + }} +/> +``` + +Verwenden Sie `save` für einfache Änderungslogik pro Änderung und `batchSave` für gruppierte Synchronisierung. + +## Laden von Daten in den React-Zustand + +Im vom React getriebenen Modell bezieht Scheduler Daten aus dem React-Zustand. Häufige Quellen: + +- lokaler Komponenten-Zustand +- globaler Zustand-Manager (Redux Toolkit, Zustand, MobX, XState, Jotai, Valtio) +- API-Aufrufe + +### Lokaler Zustandsquelle + +```tsx +import { useState } from "react"; +import ReactScheduler, { type Event } from "@dhtmlx/trial-react-scheduler"; +import { seedEvents, seedView, seedDate } from "./seed/data"; + +export default function LocalStateExample() { + const [events] = useState(seedEvents); + + return ( + + ); +} +``` + +### Zustand-Manager-Quelle + +Jede Bibliothek folgt dem gleichen Ablauf: + +- Selektor/Hook liest den Zustand +- Props füttern den Scheduler +- `data.save` löst Aktionen/Store-Mutationen aus + +```tsx +const events = useSchedulerStore((s) => s.events); +const onSave = useSchedulerStore((s) => s.handleSave); + +; +``` + +Zustand-Manager-Tutorials: + +- [Verwendung des React Scheduler mit Redux Toolkit](integrations/react/state/redux-toolkit.md) +- [Verwendung des React Scheduler mit Zustand](integrations/react/state/zustand.md) +- [Verwendung des React Scheduler mit MobX](integrations/react/state/mobx.md) +- [Verwendung des React Scheduler mit XState](integrations/react/state/xstate.md) +- [Verwendung des React Scheduler mit Jotai](integrations/react/state/jotai.md) +- [Verwendung des React Scheduler mit Valtio](integrations/react/state/valtio.md) + +### API-Ladequelle + +```tsx +import { useEffect, useState } from "react"; +import ReactScheduler, { type Event } from "@dhtmlx/trial-react-scheduler"; + +export default function SchedulerWithApi() { + const [events, setEvents] = useState(null); + + useEffect(() => { + let disposed = false; + + (async () => { + const response = await fetch("/api/events"); + const payload = await response.json(); + if (!disposed) setEvents(payload.events || []); + })(); + + return () => { + disposed = true; + }; + }, []); + + if (!events) return
Loading Scheduler...
; + + return ; +} +``` + +## Scheduler als Quelle der Wahrheit {#schedulerasthesourceoftruth} + +In diesem Modus rendert React die Komponente, hält jedoch keinen kanonischen Ereigniszustand. + +### URL-Transportbeispiel + +```tsx + +``` + +### Callback-Transportbeispiel + +```tsx + { + const response = await fetch("/api/scheduler/load"); + return response.json(); + }, + save: async (entity, action, item, id) => { + await fetch("/api/scheduler/save", { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ entity, action, item, id }), + }); + }, + }} +/> +``` + +Verwenden Sie diesen Ansatz, wenn Scheduler den primären Laufzeitspeicher bleiben kann und React nicht jedes einzelne Update rendern muss. + +## Das richtige Modell auswählen + +Verwenden Sie das **von React getriebene** Modell, wenn: + +- mehrere React-Komponenten von Scheduler-Daten abhängen +- Sie eine vorhersehbare globale Zustandsintegration benötigen +- Sie eine klare Undo/Redo-Funktion im App-Zustand wünschen + +Verwenden Sie das **vom Scheduler getriebene** Modell, wenn: + +- React größtenteils als Shell/Layout fungiert +- Sie bevorzugen Scheduler-gesteuerte Laufzeitmutationen +- der Server-Transport der primäre Synchronisationsmechanismus ist + +## Was kommt als Nächstes + +- [Überblick über React Scheduler](integrations/react/overview.md#bindingdata) +- [React Scheduler Konfiguration](integrations/react/configuration-props.md) +- [Server-Integration](guides/server-integration.md) \ No newline at end of file diff --git a/i18n/de/docusaurus-plugin-content-docs/current/integrations/react/state/valtio.md b/i18n/de/docusaurus-plugin-content-docs/current/integrations/react/state/valtio.md new file mode 100644 index 00000000..78305825 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/integrations/react/state/valtio.md @@ -0,0 +1,587 @@ +--- +sidebar_label: Valtio +title: React Scheduler mit Valtio +description: Verwalten Sie den Zustand des React Scheduler mit einem Valtio-Proxy-Speicher, wenden Sie Benutzerbearbeitungen über data.save an und fügen Sie eine snapshotbasierte Undo/Redo-Funktion hinzu. +--- + +# React Scheduler - Valtio Tutorial + +Dieses Tutorial zeigt, wie man **React Scheduler** in einer Vite + React + TypeScript-Anwendung rendert und seinen Zustand mit **Valtio** verwaltet. Sie speichern Ereignisse, das aktuelle Datum und die aktive Ansicht in einem Valtio-Proxy-Speicher und leiten dann Benutzerbearbeitungen über den Callback `data.save` des Schedulers weiter. + +Am Ende verfügen Sie über einen Scheduler mit: + +- einer wiederverwendbaren Symbolleiste (Ansicht-Wechsler, Datumsnavigation, Rückgängig/Wiederherstellen, Read-only-Umschalter) +- speichergetriebenem CRUD für Ereignisse (Erstellen/Aktualisieren/Löschen) +- snapshotbasierte Undo/Redo (Ereignisse + Konfiguration) + +:::note +Der vollständige Quellcode ist [auf GitHub verfügbar](https://github.com/nicetip/react-scheduler-valtio-starter). +::: + +## Voraussetzungen + +- Grundlagen zu React + TypeScript +- Grundkenntnisse von Vite +- Grundkenntnisse von Valtio +- Empfohlen: Informationen zur React Scheduler-Datenbindung und `data.save` in [React Scheduler-Dokumentation: Datenbindung](integrations/react/state/state-management-basics.md) + +## Ein Projekt erstellen + +Erstellen Sie ein Vite + React + TypeScript-Projekt: + +~~~bash +npm create vite@latest scheduler-valtio-demo -- --template react-ts +cd scheduler-valtio-demo +~~~ + +## Abhängigkeiten installieren + +In diesem Tutorial werden folgende Pakete verwendet: + +- **Valtio** für das State-Management +- **Material UI** für die Toolbar-Benutzeroberfläche + +Installieren Sie die Pakete: + +~~~bash +npm install valtio @mui/material @mui/icons-material @emotion/react @emotion/styled +~~~ + +Wenn Sie Yarn verwenden: + +~~~bash +yarn add valtio @mui/material @mui/icons-material @emotion/react @emotion/styled +~~~ + +## Installing React Scheduler + +Installieren Sie React Scheduler wie in der [Installationsanleitung für React Scheduler](integrations/react/installation.md). + +In diesem Tutorial verwenden wir das Evaluationspaket: + +```bash +npm install @dhtmlx/trial-react-scheduler +``` + +oder + +```bash +yarn add @dhtmlx/trial-react-scheduler +``` + +Wenn Sie bereits das Professional-Paket verwenden, ersetzen Sie `@dhtmlx/trial-react-scheduler` durch `@dhx/react-scheduler` in den Befehlen und Importen. + +## Vorbereitung der App-Stile + +React Scheduler erwartet einen übergeordneten Container mit fester Höhe. Ersetzen Sie die Standardstile in `src/App.css` durch: + +~~~css title="src/App.css" +#root { + margin: 0; + padding: 0; + height: 100%; + width: 100%; +} +~~~ + +## Seed-Daten hinzufügen + +Erstellen Sie `src/seed/data.ts` mit einem kleinen Datensatz und Standardansicht/-datum: + +~~~ts title="src/seed/data.ts" +export const seedEvents = [ + { + id: 1, + start_date: "2025-08-11T02:00:00Z", + end_date: "2025-08-11T10:20:00Z", + text: "Product Strategy Hike", + }, + { + id: 2, + start_date: "2025-08-12T06:00:00Z", + end_date: "2025-08-12T11:00:00Z", + text: "Tranquil Tea Time", + }, + { + id: 3, + start_date: "2025-08-15T03:00:00Z", + end_date: "2025-08-15T08:00:00Z", + text: "Demo and Showcase", + }, + { + id: 4, + start_date: "2025-08-12T11:30:00Z", + end_date: "2025-08-12T19:00:00Z", + text: "Sprint Review and Retreat", + }, +]; + +export const seedDate = Date.parse("2025-08-15T00:00:00Z"); + +export type SchedulerView = "day" | "week" | "month"; +export const seedView: SchedulerView = "week"; +~~~ + +:::note +Die Begleit-Demo enthält zusätzliche Ereignisse für eine reichhaltigere Visualisierung. +::: + +## Einen Valtio-Speicher erstellen + +Erstellen Sie `src/store.ts`. Dieser Speicher besitzt: + +- `events` (das Ereignis-Array, das dem Scheduler übergeben wird) +- `currentDate` und `view` (ebenfalls als Props) +- `config` (Scheduler-Konfigurationsobjekt, einschließlich `readonly`) +- `_past` / `_future`-Stacks für Undo/Redo-Verlauf + +Der zentrale Aspekt ist der **snapshot-basierte Verlauf**: Wir speichern tief geklonte Schnappschüsse, damit Undo/Redo keine Referenzen auf mutable Arrays behält. Navigation (`setCurrentDate`/`setView`) ist absichtlich **nicht rückgängig machbar** — nur datenändernde Aktionen (CRUD, Konfigurationsänderungen) drücken in den Verlaufstack. + +~~~ts title="src/store.ts" +import { proxy, snapshot } from "valtio"; +import { seedEvents, seedView, seedDate, type SchedulerView } from "./seed/data"; + +export type SchedulerEvent = { + id: string | number; + start_date: string; + end_date: string; + text: string; + [key: string]: unknown; +}; + +export type SchedulerConfig = Record; + +type HistorySnapshot = { + events: SchedulerEvent[]; + config: SchedulerConfig; +}; + +const deepClone = (value: T): T => { + if (typeof structuredClone === "function") { + return structuredClone(value); + } + + return JSON.parse(JSON.stringify(value)) as T; +}; + +const normalizeId = (value: unknown) => String(value); + +export const createSchedulerStore = () => { + const state = proxy({ + events: seedEvents as SchedulerEvent[], + currentDate: seedDate as number, + view: seedView as SchedulerView, + config: {} as SchedulerConfig, + + // Undo/redo history stacks and capacity + _past: [] as HistorySnapshot[], + _future: [] as HistorySnapshot[], + _cap: 50, + }); + + const getHistorySnapshot = (): HistorySnapshot => { + const snap = snapshot(state); + + return { + events: deepClone(snap.events as SchedulerEvent[]), + config: deepClone(snap.config as SchedulerConfig), + }; + }; + + const recordHistory = () => { + const snapshotItem = getHistorySnapshot(); + + state._past = [...state._past.slice(-state._cap + 1), snapshotItem]; + state._future = []; + }; + + const actions = { + updateEvent: (payload: Partial & { id?: string | number }) => { + const payloadId = payload.id; + + if (payloadId === undefined || payloadId === null) { + return; + } + + recordHistory(); + const normalizedPayloadId = normalizeId(payloadId); + + state.events = state.events.map((eventItem) => { + if (normalizeId(eventItem.id) !== normalizedPayloadId) { + return eventItem; + } + + return { ...eventItem, ...payload, id: eventItem.id }; + }); + }, + + createEvent: (payload: Partial) => { + recordHistory(); + + const newEventId = `id_${Date.now().toString()}`; + const newEvent = { ...payload, id: newEventId } as SchedulerEvent; + + state.events = [...state.events, newEvent]; + return newEvent; + }, + + deleteEvent: (id: string | number) => { + recordHistory(); + const normalizedId = normalizeId(id); + + state.events = state.events.filter((eventItem) => { + return normalizeId(eventItem.id) !== normalizedId; + }); + }, + + // Navigation is not an undoable user action in this demo. + setCurrentDate: (date: number) => { + state.currentDate = date; + }, + + // Navigation is not an undoable user action in this demo. + setView: (view: SchedulerView) => { + state.view = view; + }, + + updateConfig: (partial: Partial) => { + recordHistory(); + state.config = { ...state.config, ...partial }; + }, + + undo: () => { + if (state._past.length === 0) return; + + const previous = state._past[state._past.length - 1]; + const current = getHistorySnapshot(); + + state._past = state._past.slice(0, -1); + state._future = [current, ...state._future]; + + state.events = previous.events; + state.config = previous.config; + }, + + redo: () => { + if (state._future.length === 0) return; + + const next = state._future[0]; + const current = getHistorySnapshot(); + + state._future = state._future.slice(1); + state._past = [...state._past.slice(-state._cap + 1), current]; + + state.events = next.events; + state.config = next.config; + }, + }; + + return { state, actions }; +}; + +export const schedulerStore = createSchedulerStore(); +export default schedulerStore; +~~~ + +## Eine wiederverwendbare Toolbar erstellen + +Erstellen Sie `src/components/Toolbar.tsx`. Dies ist eine kleine MUI-Toolbar, die Folgendes ermöglicht: + +- Ansicht wechseln (day/week/month) +- vorherige/heute/nächste Navigation +- undo/redo +- Read-only-Modus umschalten + +~~~tsx title="src/components/Toolbar.tsx" +import { ButtonGroup, Button, Typography, Stack, FormControlLabel, Switch } from "@mui/material"; +import UndoIcon from "@mui/icons-material/Undo"; +import RedoIcon from "@mui/icons-material/Redo"; +import React from "react"; + +import type { SchedulerView } from "../seed/data"; + +export interface ToolbarProps { + currentView: SchedulerView; + currentDate: Date; + isReadOnly: boolean; + canUndo: boolean; + canRedo: boolean; + onUndo?: () => void; + onRedo?: () => void; + onNavigate?: (action: "prev" | "next" | "today") => void; + onReadOnlyChange?: (value: boolean) => void; + setView: (view: SchedulerView) => void; +} + +export default React.memo(function Toolbar({ + currentView, + currentDate, + isReadOnly, + canUndo, + canRedo, + onUndo, + onRedo, + onNavigate, + onReadOnlyChange, + setView, +}: ToolbarProps) { + return ( + + + {(["day", "week", "month"] as const).map((l) => ( + + ))} + + + + + + onReadOnlyChange?.(e.target.checked)} + inputProps={{ "aria-label": "Toggle read-only" }} + /> + } + /> + + + {new Date(currentDate)?.toLocaleDateString(undefined, { weekday: "short", month: "short", day: "numeric" })} + + + + + + + + ); +}); +~~~ + +## React Scheduler rendern und mit Valtio verbinden + +Erstellen Sie `src/components/Scheduler.tsx`. Diese Komponente: + +- abonniert den Valtio-Proxy über `useSnapshot` +- übergibt `events`, `date`, `view` und `config` als Props an React Scheduler +- implementiert `data.save` mit einer Bridge via `switch/case`, die Änderungen in Store-Aktionen weiterleitet +- verbindet Undo/Redo und den `read-only`-Konfigurations-Toggle +- versteckt die integrierte Navbar und verwendet stattdessen die benutzerdefinierte Toolbar + +~~~tsx title="src/components/Scheduler.tsx" +import { useCallback, useMemo } from "react"; + +// Trial-import: +import ReactScheduler from "@dhtmlx/trial-react-scheduler"; +import "@dhtmlx/trial-react-scheduler/dist/react-scheduler.css"; + +// Pro-import: +// import ReactScheduler from "@dhx/react-scheduler"; +// import "@dhx/react-scheduler/dist/react-scheduler.css"; + +import { useSnapshot } from "valtio"; + +import Toolbar from "./Toolbar"; +import schedulerStore from "../store"; +import type { SchedulerEvent } from "../store"; +import type { SchedulerView } from "../seed/data"; + +export default function DemoValtioScheduler() { + const snap = useSnapshot(schedulerStore.state); + + const canUndo = snap._past.length > 0; + const canRedo = snap._future.length > 0; + const isReadOnly = Boolean((snap.config as { readonly?: unknown }).readonly); + + const activeDate = useMemo(() => { + return new Date(snap.currentDate); + }, [snap.currentDate]); + + const handleSetCurrentDate = useCallback((date: number) => { + schedulerStore.actions.setCurrentDate(date); + }, []); + + const handleSetView = useCallback((view: SchedulerView) => { + schedulerStore.actions.setView(view); + }, []); + + const handleUndo = useCallback(() => { + schedulerStore.actions.undo(); + }, []); + + const handleRedo = useCallback(() => { + schedulerStore.actions.redo(); + }, []); + + const handleReadOnlyChange = useCallback((value: boolean) => { + schedulerStore.actions.updateConfig({ readonly: value }); + }, []); + + const handleDateNavigation = useCallback( + (action: "prev" | "next" | "today") => { + if (action === "today") { + handleSetCurrentDate(Date.now()); + return; + } + + const step = action === "next" ? 1 : -1; + const date = new Date(snap.currentDate); + + if (snap.view === "day") { + date.setDate(date.getDate() + step); + } else if (snap.view === "week") { + date.setDate(date.getDate() + step * 7); + } else { + date.setMonth(date.getMonth() + step); + } + + handleSetCurrentDate(date.getTime()); + }, + [handleSetCurrentDate, snap.currentDate, snap.view] + ); + + // Scheduler <-> Valtio Data Bridge + const dataBridge = useMemo(() => { + return { + save: (entity: string, action: string, payload: unknown, id: unknown) => { + if (entity !== "event") return; + + switch (action) { + case "update": { + const eventData = payload && typeof payload === "object" ? (payload as Record) : {}; + const eventId = (eventData as Record).id ?? id; + if (eventId == null) { + console.warn("Update called without an id", { payload, id }); + return; + } + + const eventWithId = { ...eventData, id: eventId } as Partial & Pick; + return schedulerStore.actions.updateEvent(eventWithId); + } + case "create": + return schedulerStore.actions.createEvent(payload as Omit, "id">); + case "delete": { + const deleteId = + payload && typeof payload === "object" + ? (payload as Record).id ?? id + : payload ?? id; + if (deleteId == null) { + console.warn("Delete called without an id", { payload, id }); + return; + } + return schedulerStore.actions.deleteEvent(deleteId as SchedulerEvent["id"]); + } + default: + console.warn(`Unknown action: ${action}`); + return; + } + }, + }; + }, []); + + const handleViewChange = useCallback( + (mode: string, date: Date) => { + const nextView: SchedulerView = mode === "day" || mode === "week" || mode === "month" ? mode : "month"; + schedulerStore.actions.setView(nextView); + schedulerStore.actions.setCurrentDate(date.getTime()); + }, + [] + ); + + const memoizedXY = useMemo(() => ({ nav_height: 0 }), []); + + return ( +
+ + + +
+ ); +} +~~~ + +## Den Scheduler mounten + +Aktualisieren Sie `src/App.tsx`: + +~~~tsx title="src/App.tsx" +import Scheduler from "./components/Scheduler"; +import "./App.css"; + +function App() { + return ; +} + +export default App; +~~~ + +## Die Anwendung ausführen + +Starten Sie den Entwicklungsserver: + +~~~bash +npm run dev +~~~ + +oder: + +~~~bash +yarn dev +~~~ + +## Zusammenfassung + +In diesem Tutorial haben Sie: + +- ein Vite + React-Projekt erstellt +- React Scheduler mit einem deterministischen Container in voller Höhe gerendert +- `events`, `view`, `currentDate` und `config` in einem einzigen Valtio-Proxy-Speicher modelliert +- snapshotbasierte Undo/Redo mit `_past`/`_future`-Stacks (Ereignisse + Konfiguration) implementiert +- alle Scheduler-Änderungen über `data.save` in Store-Aktionen weitergeleitet +- einen Read-only-Toggle hinzugefügt, der den Scheduler vor Bearbeitungen sperrt + +Dies hält die Scheduler-Komponente deklarativ (State -> Props), während der Store die gesamte Mutationslogik und die Historie besitzt. + +## Was als Nächstes + +- Erkunden Sie die beiden unterstützten Datenbindungsmodelle in [React Scheduler-Dokumentation: Datenbindung](integrations/react/state/state-management-basics.md) +- Fügen Sie benutzerdefinierte Vorlagen und UI über die `templates`-Eigenschaft hinzu +- Erforschen Sie dasselbe Muster mit anderen State-Managern: + - [React Scheduler mit Redux Toolkit](integrations/react/state/redux-toolkit.md) + - [React Scheduler mit MobX](integrations/react/state/mobx.md) + - [React Scheduler mit XState](integrations/react/state/xstate.md) + - [React Scheduler mit Zustand](integrations/react/state/zustand.md) + - [React Scheduler mit Jotai](integrations/react/state/jotai.md) \ No newline at end of file diff --git a/i18n/de/docusaurus-plugin-content-docs/current/integrations/react/state/xstate.md b/i18n/de/docusaurus-plugin-content-docs/current/integrations/react/state/xstate.md new file mode 100644 index 00000000..f821a553 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/integrations/react/state/xstate.md @@ -0,0 +1,550 @@ +--- +title: React Scheduler – XState Tutorial +sidebar_label: XState +description: "Integriere React Scheduler mit XState. Behandelt das Modellieren des Scheduler-Zustands in einer Maschine, das CRUD-Handling über data.save und das Hinzufügen von Undo/Redo + benutzerdefinierter Navigation." +--- + +# React Scheduler – XState Tutorial + +Dieses Tutorial zeigt, wie Sie den **DHTMLX React Scheduler** mit einer **XState**-Zustandsmaschine verbinden. Sie speichern Ereignisse und UI-Zustände (Ansicht/Datum/Konfiguration) in der Maschine, leiten Scheduler-Bearbeitungen über `data.save` und fügen **Undo/Redo** mit einer snapshot-basierten History hinzu. + +:::note +Der vollständige Quellcode ist [auf GitHub verfügbar](https://github.com/DHTMLX/react-scheduler-xstate-starter). +::: + +## Voraussetzungen + +- Node.js (LTS empfohlen) +- Grundlagen von React + TypeScript +- XState-Grundlagen (Maschinen, Ereignisse, Aktionen). Falls Sie eine Auffrischung benötigen, siehe die XState-Dokumentation: https://stately.ai/docs/xstate + +## Schnellsetup – Projekt erstellen + +Erstellen Sie ein Vite + React + TS-Projekt: + +~~~bash +npm create vite@latest scheduler-xstate-demo -- --template react-ts +cd scheduler-xstate-demo +npm install +~~~ + +Installieren Sie XState + React-Bindings: + +~~~bash +npm install xstate @xstate/react +~~~ + +Installieren Sie Material UI (verwendet in der Demo-Werkzeugleiste): + +~~~bash +npm install @mui/material @mui/icons-material @emotion/react @emotion/styled +~~~ + +### Installation von React Scheduler + +Installieren Sie React Scheduler wie im [React Scheduler-Installationsleitfaden](integrations/react/installation.md) beschrieben. + +In diesem Tutorial verwenden wir das Evaluierungs-/Trial-Paket: + +```bash +npm install @dhtmlx/trial-react-scheduler +``` + +oder + +```bash +yarn add @dhtmlx/trial-react-scheduler +``` + +Wenn Sie bereits das Professional-Paket verwenden, ersetzen Sie `@dhtmlx/trial-react-scheduler` durch `@dhx/react-scheduler` in den Befehlen und Imports. + +Starten Sie den Entwicklungsserver: + +~~~bash +npm run dev +~~~ + +:::note +Um Scheduler die gesamte Seite nutzen zu lassen, entfernen Sie die Standard-Stile aus `src/App.css` und fügen Sie Folgendes hinzu: + +~~~css +#root { + margin: 0; + padding: 0; + height: 100%; + width: 100%; +} + +body { + margin: 0; +} +~~~ +::: + +## Einrichtung von Beispieldaten + +Erstellen Sie `src/seed/data.ts` mit einigen Ereignissen und einem initialen UI-Zustand. Beachten Sie, dass `date` als **Zahl** (Zeitstempel) gespeichert wird, damit der Maschinenkontext serialisierbar bleibt. + +~~~ts title="src/seed/data.ts" +export type SchedulerView = "day" | "week" | "month"; +export type SchedulerConfig = Record; + +export interface SchedulerEvent { + id: string | number; + start_date: string; + end_date: string; + text: string; + [key: string]: unknown; +} + +export const seedEvents: SchedulerEvent[] = [ + { id: 1, classname: "blue", start_date: "2025-08-11T02:00:00Z", end_date: "2025-08-11T10:20:00Z", text: "Product Strategy Hike" }, + { id: 2, classname: "violet", start_date: "2025-08-12T06:00:00Z", end_date: "2025-08-12T11:00:00Z", text: "Tranquil Tea Time" }, + { id: 3, classname: "blue", start_date: "2025-08-15T03:00:00Z", end_date: "2025-08-15T08:00:00Z", text: "Demo and Showcase" }, +]; + +export const seedDate = Date.parse("2025-08-15T00:00:00Z"); +export const seedView: SchedulerView = "week"; +~~~ + +- `SchedulerEvent` verwendet eine Index-Signatur, damit Scheduler zusätzliche Felder zur Laufzeit anhängen kann. + +:::note +Die Begleit-Demo enthält zusätzliche Ereignisse mit Farbkassen für eine reichhaltigere Visualisierung. +::: + +## Einrichtung der XState-Maschine + +Erstellen Sie `src/machine.ts`. Diese Maschine speichert: + +- `events` (Scheduler-Daten) +- `date` (als Zeitstempel) +- `view` (`day | week | month`) +- `config` (Scheduler-Konfigurationsobjekt) +- `past` / `future` (Snapshot-Arrays für Undo/Redo) + +Undo/Redo ist direkt in die Maschine integriert und verwendet Snapshots. Vor jeder datenverändernden Aktion speichert `saveToHistory` einen Snapshot der aktuellen Ereignisse, Ansicht und Datum. Die `undo`- und `redo`-Übergänge tauschen den aktuellen Zustand gegen einen Snapshot aus der History ein. + +~~~ts title="src/machine.ts" +import { createMachine, assign } from "xstate"; +import { + seedEvents, + seedView, + seedDate, + type SchedulerView, + type SchedulerEvent, + type SchedulerConfig, +} from "./seed/data"; + +export interface SchedulerMachineContext { + events: SchedulerEvent[]; + view: SchedulerView; + date: number; + config: SchedulerConfig; + past: SchedulerSnapshot[]; + future: SchedulerSnapshot[]; + maxHistory: number; +} + +interface SchedulerSnapshot { + events: SchedulerEvent[]; + view: SchedulerView; + date: number; +} + +type SchedulerMachineEvent = + | { type: "SET_VIEW"; view: SchedulerView } + | { type: "SET_DATE"; date: number } + | { type: "CREATE_EVENT"; event: SchedulerEvent } + | { type: "UPDATE_EVENT"; event: SchedulerEvent } + | { type: "DELETE_EVENT"; id: string | number } + | { type: "UNDO" } + | { type: "REDO" }; + +const deepClone = (value: T): T => { + if (typeof structuredClone === "function") { + return structuredClone(value); + } + return JSON.parse(JSON.stringify(value)) as T; +}; + +const takeSnapshot = (ctx: SchedulerMachineContext): SchedulerSnapshot => ({ + events: deepClone(ctx.events), + view: ctx.view, + date: ctx.date, +}); + +export const schedulerMachine = createMachine({ + id: "scheduler", + types: { + context: {} as SchedulerMachineContext, + events: {} as SchedulerMachineEvent, + }, + context: { + events: seedEvents, + view: seedView, + date: seedDate, + config: {}, + past: [], + future: [], + maxHistory: 50, + }, + initial: "ready", + states: { + ready: { + on: { + SET_VIEW: { actions: ['saveToHistory', 'setView'] }, + SET_DATE: { actions: ['saveToHistory', 'setDate'] }, + CREATE_EVENT: { actions: ['saveToHistory', 'createEvent'] }, + UPDATE_EVENT: { actions: ['saveToHistory', 'updateEvent'] }, + DELETE_EVENT: { actions: ['saveToHistory', 'deleteEvent'] }, + UNDO: { + guard: ({ context }) => context.past.length > 0, + actions: ['undo'] + }, + REDO: { + guard: ({ context }) => context.future.length > 0, + actions: ['redo'] + }, + } + } + }, +}, + { + actions: { + saveToHistory: assign({ + past: ({ context }) => { + const newPast = [...context.past, takeSnapshot(context)]; + if (newPast.length > context.maxHistory) { + newPast.shift(); + } + return newPast; + }, + future: () => [], + }), + setView: assign({ + view: ({ event }) => (event as { type: "SET_VIEW"; view: SchedulerView }).view + }), + setDate: assign({ + date: ({ event }) => (event as { type: "SET_DATE"; date: number }).date + }), + createEvent: assign({ + events: ({ context, event }) => { + const newId = `id_${Date.now()}`; + const newEvent = { ...(event as { type: "CREATE_EVENT"; event: SchedulerEvent }).event, id: newId }; + return [...context.events, newEvent]; + } + }), + updateEvent: assign({ + events: ({ context, event }) => + context.events.map(ev => + String(ev.id) === String((event as { type: "UPDATE_EVENT"; event: SchedulerEvent }).event.id) + ? { ...ev, ...(event as { type: "UPDATE_EVENT"; event: SchedulerEvent }).event } + : ev + ) + }), + deleteEvent: assign({ + events: ({ context, event }) => + context.events.filter(ev => String(ev.id) !== String((event as { type: "DELETE_EVENT"; id: string | number }).id)) + }), + undo: assign(({ context }) => { + const currentState = takeSnapshot(context); + const previousState = context.past[context.past.length - 1]; + const newPast = context.past.slice(0, -1); + const newFuture = [currentState, ...context.future]; + + return { + ...previousState, + past: newPast, + future: newFuture, + }; + }), + redo: assign(({ context }) => { + const currentState = takeSnapshot(context); + const nextState = context.future[0]; + const newFuture = context.future.slice(1); + const newPast = [...context.past, currentState]; + + return { + ...nextState, + past: newPast, + future: newFuture, + }; + }) + } + } +); +~~~ + + +An dieser Stelle liefert die Maschine: + +- Eine einzige Quelle für Scheduler-Eigenschaften +- Snapshot-basierte Undo/Redo (der History enthält Kopien, keine Referenzen) +- Einen einzigen `SET_DATE`-Event — die Navigationslogik (vorherige/nächste/heute) liegt in der Komponente + +:::tip +Wenn Sie nur moderne Browser ansteuern, bevorzugt der `deepClone()`-Hilfsfunktion bereits `structuredClone()` und fällt auf JSON-Klonen für ältere Umgebungen zurück. +::: + +## Aufbau der Steuerungsleisten-Komponente + +Erstellen Sie `src/components/Toolbar.tsx`. Dies ist eine kleine MUI-Toolbar, um: + +- die Ansicht zu wechseln (day/week/month) +- vorherige/heute/nächste zu navigieren +- Undo/Redo mit deaktiviertem Zustand, wenn kein Verlauf vorhanden ist + +~~~tsx title="src/components/Toolbar.tsx" +import { ButtonGroup, Button, Typography, Stack } from '@mui/material'; +import UndoIcon from '@mui/icons-material/Undo'; +import RedoIcon from '@mui/icons-material/Redo'; +import React from 'react'; +import type { SchedulerView } from "../seed/data"; + +export interface ToolbarProps { + currentView: SchedulerView; + currentDate: Date; + canUndo: boolean; + canRedo: boolean; + onUndo?: () => void; + onRedo?: () => void; + onNavigate?: (action: 'prev' | 'next' | 'today') => void; + setView: (view: SchedulerView) => void; +} + +export default React.memo(function Toolbar({ currentView, currentDate, canUndo, canRedo, onUndo, onRedo, onNavigate, setView }: ToolbarProps) { + return ( + + + {(["day", "week", "month"] as const).map(l => ( + + ))} + + + + + + + {new Date(currentDate)?.toLocaleDateString(undefined, { weekday: "short", month: "short", day: "numeric" })} + + + + + + + + ); +}); +~~~ + +## Scheduler mit XState verbinden + +Erstellen Sie `src/components/Scheduler.tsx`. Diese Komponente: + +- liest `events/view/date/config` aus dem XState-Maschinenkontext +- stellt einen `data.save`-Callback bereit, der Maschinen-Ereignisse sendet +- verbindet Undo/Redo und Navigation +- versteckt die integrierte Navbar von Scheduler und verwendet stattdessen die benutzerdefinierte Toolbar +- wendet Farbkassen über das `event_class`-Template an + +~~~tsx title="src/components/Scheduler.tsx" +import { useCallback, useMemo } from "react"; +import { useMachine } from "@xstate/react"; +import ReactScheduler from "@dhtmlx/trial-react-scheduler"; +import "@dhtmlx/trial-react-scheduler/dist/react-scheduler.css"; +import "./styles.css"; +import Toolbar from "./Toolbar"; +import { schedulerMachine } from "../machine"; +import { type SchedulerView } from "../seed/data"; + +export default function DemoXStateScheduler() { + const [state, send] = useMachine(schedulerMachine); + + const canUndo = state.context.past.length > 0; + const canRedo = state.context.future.length > 0; + const activeDate = useMemo(() => new Date(state.context.date), [state.context.date]); + + const templates = useMemo(() => ({ + event_class: (_start: Date, _end: Date, event: Record | null) => { + if (event == null) { + return ""; + } + if (typeof event.classname === "string") { + return event.classname; + } + return ""; + } + }), []); + + const data = useMemo(() => ({ + save: (entity: string, action: string, payload: Record, id: string | number) => { + if (entity !== "event") { + return; + } + switch (action) { + case "create": + send({ type: "CREATE_EVENT", event: payload as never }); + break; + case "update": + send({ type: "UPDATE_EVENT", event: payload as never }); + break; + case "delete": + send({ type: "DELETE_EVENT", id }); + break; + default: + console.warn(`Unhandled action: ${action}`); + } + } + }), [send]); + + const handleDateNavigation = useCallback((action: 'prev' | 'next' | 'today') => { + if (action === 'today') { + send({ type: "SET_DATE", date: Date.now() }) + return; + } + const step = action === 'next' ? 1 : -1; + const date = new Date(state.context.date); + + if (state.context.view === "day") { + date.setDate(date.getDate() + step); + } else if (state.context.view === "week") { + date.setDate(date.getDate() + step * 7); + } else { + date.setMonth(date.getMonth() + step); + } + send({ type: "SET_DATE", date: date.getTime() }) + }, [state.context.date, state.context.view, send]); + + const handleUndo = useCallback(() => send({ type: "UNDO" }), [send]); + const handleRedo = useCallback(() => send({ type: "REDO" }), [send]); + const handleSetView = useCallback((view: SchedulerView) => send({ type: "SET_VIEW", view: view }), [send]); + const memoizedXY = useMemo(() => ({ nav_height: 0 }), []); + + return ( +
+ + +
+ ); +} +~~~ + +Ein paar Details auffällig: + +- Der Maschinenkontext ist die einzige Quelle für `events`, `view` und `date`. +- Der `data.save`-Handler wandelt entities-basierte Scheduler-Änderungen in Maschinen-Ereignisse um. +- Wir verstecken die integrierte Scheduler-Navigationsleiste (`xy={{ nav_height: 0 }}`) und ersetzen sie durch unsere eigene Toolbar. +- Das `event_class`-Template liest das Feld `classname` aus jedem Ereignis und wendet es als CSS-Klasse an. + +## Event-Farbgestaltungen + +Erstellen Sie `src/components/styles.css` mit CSS-Klassen, die den Werten von `classname` in den Seed-Daten entsprechen. Das Template `event_class` wendet diese Klassen auf jedes Ereignis-Element an. + +~~~css title="src/components/styles.css" +/* + Event-Farbgebung. + Der Scheduler wendet den vom templates.event_class zurückgegebenen Wert auf den Ereigniskontainer an. + Seed-Daten verwenden `classname`, daher mappen wir sie über das Template und gestalten die Klassen hier. +*/ + +.blue { + background: #3b82f6 !important; + border-color: #2563eb !important; + color: #ffffff !important; +} + +.green { + background: #22c55e !important; + border-color: #16a34a !important; + color: #ffffff !important; +} + +.violet { + background: #a855f7 !important; + border-color: #9333ea !important; + color: #ffffff !important; +} + +.yellow { + background: #f59e0b !important; + border-color: #d97706 !important; + color: #111827 !important; +} +~~~ + +## Scheduler in der App integrieren + +Passen Sie `src/App.tsx` und `src/App.css` an: + +~~~tsx title="src/App.tsx" +import Scheduler from "./components/Scheduler"; +import "./App.css"; + +function App() { + return ( + + ); +} +export default App; +~~~ + +~~~css title="src/App.css" +#root, body { + margin: 0; + padding: 0; + height: 100%; + width: 100%; +} +~~~ + +## Zusammenfassung + +Sie haben nun React Scheduler vollständig von XState steuern lassen: + +- Scheduler liest `events`, `view`, `date` und `config` aus dem XState-Maschinenkontext +- Benutzerbearbeitungen werden über `data.save` -> Maschinen-Ereignisse für CRUD weitergeleitet +- Die Benutzeroberfläche bleibt synchron, weil Scheduler den aktualisierten Zustand über Props erhält +- Undo/Redo ist via snapshotbasierter Historie mit `guard`-Bedingungen implementiert +- Eine benutzerdefinierte Toolbar ermöglicht View-Wechsel, Datumsnavigation sowie Undo/Redo mit deaktivierten Zuständen + +## Was kommt als Nächstes + +- Prüfen Sie die Konzepte hinter diesem Beispiel in [Datenbindung & Grundlagen der Zustandsverwaltung](integrations/react/state/state-management-basics.md) +- Erkundigen Sie die Konfigurations- und Vorlagenoptionen von Scheduler in [React Scheduler Überblick](integrations/react/overview.md) +- Fügen Sie Persistenz hinzu (Laden/Speichern von Ereignissen aus einer API), indem asynchrone Ereignisse an die Maschine gesendet werden +- Erforschen Sie dasselbe Muster mit anderen Zustandsmanagern: + - [React Scheduler mit Redux Toolkit verwenden](integrations/react/state/redux-toolkit.md) + - [React Scheduler mit MobX verwenden](integrations/react/state/mobx.md) + - [React Scheduler mit Zustand verwenden](integrations/react/state/zustand.md) + - [React Scheduler mit Jotai verwenden](integrations/react/state/jotai.md) + - [React Scheduler mit Valtio verwenden](integrations/react/state/valtio.md) \ No newline at end of file diff --git a/i18n/de/docusaurus-plugin-content-docs/current/integrations/react/state/zustand.md b/i18n/de/docusaurus-plugin-content-docs/current/integrations/react/state/zustand.md new file mode 100644 index 00000000..6962de98 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/integrations/react/state/zustand.md @@ -0,0 +1,503 @@ +--- +title: React Scheduler – Zustand Tutorial +sidebar_label: Zustand +description: Lernen Sie, wie Sie den DHTMLX React Scheduler mit Zustand integrieren, einschließlich Event-CRUD, View/Date/Config-Synchronisierung und Undo/Redo. +--- + +# React Scheduler – Zustand Tutorial + +Dieses Tutorial zeigt, wie Sie **DHTMLX React Scheduler** mit einem **Zustand**-Store verbinden. Sie speichern Ereignisse und UI-State (view/date/config) in Zustand, leiten Scheduler-Bearbeitungen über `data.save` weiter und fügen **Undo/Redo** mittels einer snapshot-basierten Historie hinzu. + +:::note +Der vollständige Quellcode ist [auf GitHub verfügbar](https://github.com/DHTMLX/react-scheduler-zustand-starter). +::: + +## Voraussetzungen + +- Node.js (LTS empfohlen) +- Grundlagen von React + TypeScript +- Vertrautheit mit Zustand-Hooks und Selektoren. Falls Sie eine Auffrischung benötigen, siehe die Zustand-Dokumentation: https://zustand.docs.pmnd.rs/ + +## Schnellsetup - Projekt erstellen + +Erstellen Sie ein Vite + React + TS-Projekt: + +~~~bash +npm create vite@latest scheduler-zustand-demo -- --template react-ts +cd scheduler-zustand-demo +npm install +~~~ + +Zustand installieren: + +~~~bash +npm install zustand +~~~ + +Material UI installieren (wird für die Demo-Toolbar verwendet): + +~~~bash +npm install @mui/material @mui/icons-material @emotion/react @emotion/styled +~~~ + +### Installation des React Scheduler + +Installieren Sie React Scheduler wie im [Installationsleitfaden für React Scheduler](integrations/react/installation.md) beschrieben. + +In diesem Tutorial verwenden wir das Evaluierungspaket: + +```bash +npm install @dhtmlx/trial-react-scheduler +``` + +oder + +```bash +yarn add @dhtmlx/trial-react-scheduler +``` + +Wenn Sie bereits das Professional-Paket verwenden, ersetzen Sie `@dhtmlx/trial-react-scheduler` durch `@dhx/react-scheduler` in den Befehlen und Imports. + +Starten Sie den Entwicklungsserver: + +~~~bash +npm run dev +~~~ + +:::note +Um Scheduler die ganze Seite auszufüllen, entfernen Sie die Standardstile aus `src/App.css` und fügen Sie Folgendes hinzu: + +~~~css +#root { + margin: 0; + padding: 0; + height: 100%; + width: 100%; +} + +body { + margin: 0; +} +~~~ +::: + +## Gemeinsame Typen definieren + +Erstellen Sie `src/types.ts`. Diese Typen werden store- und komponentenübergreifend verwendet: + +~~~ts +export type SchedulerView = "day" | "week" | "month"; + +export interface SchedulerEvent { + id: string | number; + start_date: string; + end_date: string; + text: string; + + // Scheduler kann zur Laufzeit zusätzliche Felder anhängen. Die Demo bleibt permissive. + [key: string]: unknown; +} + +export type SchedulerConfig = Record; + +export interface SchedulerSnapshot { + events: SchedulerEvent[]; +} +~~~ + +- `SchedulerEvent` verwendet eine Index-Signatur, damit Scheduler zur Laufzeit zusätzliche Felder anhängen kann. +- `SchedulerSnapshot` erfasst die für Undo/redo benötigten Daten (Events). + +## Beispiel-Daten einrichten + +Erstellen Sie `src/seed/data.ts` mit einigen Ereignissen und initialem UI-Zustand. Beachten Sie, dass `currentDate` als **Nummer** (Zeitstempel) gespeichert wird, damit der Store-Status serialisierbar bleibt. + +~~~ts +export const seedEvents = [ + { id: 1, start_date: "2025-08-11T02:00:00Z", end_date: "2025-08-11T10:20:00Z", text: "Product Strategy Hike" }, + { id: 2, start_date: "2025-08-12T06:00:00Z", end_date: "2025-08-12T11:00:00Z", text: "Tranquil Tea Time" }, + { id: 3, start_date: "2025-08-15T03:00:00Z", end_date: "2025-08-15T08:00:00Z", text: "Demo and Showcase" }, +]; + +export const seedDate = Date.parse("2025-08-15T00:00:00Z"); +export const seedView = "week"; +~~~ + +:::note +Die begleitende Demo enthält zusätzliche Ereignisse für eine reichhaltigere visuelle Darstellung. +::: + +## Zustand-Store erstellen + +Erstellen Sie `src/store.ts`. Dieser Store hält: + +- `events` (Scheduler-Daten) +- `currentDate` (als Zeitstempel) +- `view` (`day | week | month`) +- `config` (Scheduler-Konfiguration) +- `past` / `future` (Snapshot-Arrays für Undo/Redo) + +Undo/redo ist direkt in den Store integriert und verwendet Snapshots. Bevor jede datenverändernde Aktion ausgeführt wird, speichert `pushHistory` einen Snapshot der aktuellen Ereignisse. Die `undo`- und `redo`-Aktionen tauschen den aktuellen Zustand gegen einen Snapshot aus der Historie aus. + +~~~ts +import { create } from "zustand"; + +import { seedDate, seedEvents, seedView } from "./seed/data"; +import type { SchedulerConfig, SchedulerEvent, SchedulerSnapshot, SchedulerView } from "./types"; + +export interface SchedulerStoreState { + events: SchedulerEvent[]; + currentDate: number; + view: SchedulerView; + config: SchedulerConfig; + + past: SchedulerSnapshot[]; + future: SchedulerSnapshot[]; + maxHistory: number; + + setCurrentDate: (date: number) => void; + setView: (view: SchedulerView) => void; + + createEvent: (event: Omit & Partial>) => SchedulerEvent; + updateEvent: (event: Partial & Pick) => void; + deleteEvent: (id: SchedulerEvent["id"]) => void; + + undo: () => void; + redo: () => void; +} + +const deepCopy = (value: T): T => { + return JSON.parse(JSON.stringify(value)) as T; +}; + +const createSnapshot = (events: SchedulerEvent[]): SchedulerSnapshot => ({ + events: deepCopy(events), +}); + +// Simuliere das Empfangen einer ID von einem Backend. +const generateId = () => `id_${Date.now().toString()}`; + +export const useSchedulerStore = create((set, get) => { + const pushHistory = () => { + const { events, past, maxHistory } = get(); + const snapshot = createSnapshot(events); + + set({ + past: [...past.slice(-maxHistory + 1), snapshot], + future: [], + }); + }; + + return { + events: seedEvents as unknown as SchedulerEvent[], + currentDate: seedDate, + view: seedView as SchedulerView, + config: {}, + + past: [], + future: [], + maxHistory: 50, + + setCurrentDate: (date) => set({ currentDate: date })), + setView: (view) => set({ view }), + + createEvent: (event) => { + pushHistory(); + + const id = event.id != null ? event.id : generateId(); + const newEvent: SchedulerEvent = { ...event, id } as SchedulerEvent; + + set({ events: [...get().events, newEvent] }); + return newEvent; + }, + + updateEvent: (event) => { + const events = get().events; + const index = events.findIndex((e) => String(e.id) === String(event.id)); + if (index === -1) return; + + pushHistory(); + set({ + events: [...events.slice(0, index), { ...events[index], ...event }, ...events.slice(index + 1)], + }); + }, + + deleteEvent: (id) => { + const events = get().events; + const exists = events.some((e) => String(e.id) === String(id)); + if (!exists) return; + + pushHistory(); + set({ events: events.filter((e) => String(e.id) !== String(id)) }); + }, + + undo: () => { + const { past, future, events } = get(); + if (past.length === 0) return; + + const previous = past[past.length - 1]; + set({ + events: previous.events, + past: past.slice(0, -1), + future: [createSnapshot(events), ...future], + }); + }, + + redo: () => { + const { past, future, events } = get(); + if (future.length === 0) return; + + const next = future[0]; + set({ + events: next.events, + past: [...past, createSnapshot(events)], + future: future.slice(1), + }); + }, + }; +}); +~~~ + +## Aufbau der Control-Toolbar-Komponente + +Erstellen Sie `src/components/Toolbar.tsx`. Dies ist eine kleine MUI-Toolbar, die Folgendes ermöglicht: + +- Ansicht wechseln (day/week/month) +- vorherige/Heute/nächste navigieren +- Undo/Redo + +~~~tsx +import { ButtonGroup, Button, Typography, Stack } from "@mui/material"; +import UndoIcon from "@mui/icons-material/Undo"; +import RedoIcon from "@mui/icons-material/Redo"; +import React from "react"; +import type { SchedulerView } from "../types"; + +export interface ToolbarProps { + currentView: SchedulerView; + currentDate: Date; + canUndo: boolean; + canRedo: boolean; + onUndo?: () => void; + onRedo?: () => void; + onNavigate?: (action: "prev" | "next" | "today") => void; + setView: (view: SchedulerView) => void; +} + +export default React.memo(function Toolbar({ + currentView, + currentDate, + canUndo, + canRedo, + onUndo, + onRedo, + onNavigate, + setView, +}: ToolbarProps) { + return ( + + + {(["day", "week", "month"] as const).map((l) => ( + + ))} + + + + + + + {new Date(currentDate)?.toLocaleDateString(undefined, { weekday: "short", month: "short", day: "numeric" })} + + + + + + + + ); +}); +~~~ + +## Scheduler mit Zustand verbinden + +Erstellen Sie `src/components/Scheduler.tsx`. Diese Komponente: + +- liest `events/view/currentDate/config` aus dem ZustandStore mittels Selektoren +- bietet einen `data.save` Callback, der Store-Aktionen aufruft +- gibt erstellte/aktualisierte Entitäten aus `save` zurück, damit Scheduler seine interne Buchführung synchron halten kann +- verbindet Undo/Redo +- versteckt die integrierte Navbar und nutzt stattdessen die benutzerdefinierte Toolbar + +~~~tsx +import { useCallback, useMemo } from "react"; +import ReactScheduler from "@dhtmlx/trial-react-scheduler"; +import "@dhtmlx/trial-react-scheduler/dist/react-scheduler.css"; + +import Toolbar from "./Toolbar"; +import { useSchedulerStore } from "../store"; +import type { SchedulerEvent, SchedulerView } from "../types"; + +export default function DemoZustandScheduler() { + const events = useSchedulerStore((s) => s.events); + const view = useSchedulerStore((s) => s.view); + const currentDate = useSchedulerStore((s) => s.currentDate); + const config = useSchedulerStore((s) => s.config); + + const setView = useSchedulerStore((s) => s.setView); + const setCurrentDate = useSchedulerStore((s) => s.setCurrentDate); + const createEvent = useSchedulerStore((s) => s.createEvent); + const updateEvent = useSchedulerStore((s) => s.updateEvent); + const deleteEvent = useSchedulerStore((s) => s.deleteEvent); + const undo = useSchedulerStore((s) => s.undo); + const redo = useSchedulerStore((s) => s.redo); + + const canUndo = useSchedulerStore((s) => s.past.length > 0); + const canRedo = useSchedulerStore((s) => s.future.length > 0); + + const activeDate = useMemo(() => new Date(currentDate), [currentDate]); + + const handleDateNavigation = useCallback((action: "prev" | "next" | "today") => { + if (action === "today") { + setCurrentDate(Date.now()); + return; + } + + const step = action === "next" ? 1 : -1; + const date = new Date(currentDate); + + if (view === "day") { + date.setDate(date.getDate() + step); + } else if (view === "week") { + date.setDate(date.getDate() + step * 7); + } else { + date.setMonth(date.getMonth() + step); + } + setCurrentDate(date.getTime()); + }, [currentDate, view, setCurrentDate]); + + // Scheduler <-> Zustand Datenbrücke (Mappt Scheduler CRUD-Ereignisse auf Store-Aktionen) + const dataBridge = useMemo(() => ({ + save: (entity: string, action: string, payload: unknown, id: unknown) => { + if (entity !== "event") return; + + switch (action) { + case "update": { + const eventData = payload && typeof payload === "object" ? (payload as Record) : {}; + const eventId = (eventData as Record).id ?? id; + if (eventId == null) { + console.warn("Update called without an id", { payload, id }); + return; + } + return updateEvent({ ...eventData, id: eventId } as Partial & Pick); + } + case "create": + return createEvent(payload as Omit); + case "delete": { + const deleteId = + payload && typeof payload === "object" + ? (payload as Record).id ?? id + : payload ?? id; + if (deleteId == null) { + console.warn("Delete called without an id", { payload, id }); + return; + } + return deleteEvent(deleteId as SchedulerEvent["id"]); + } + default: + console.warn(`Unknown action: ${action}`); + return; + } + }, + }), [updateEvent, createEvent, deleteEvent]); + + const handleViewChange = useCallback( + (mode: string, date: Date) => { + const nextView: SchedulerView = mode === "day" || mode === "week" || mode === "month" ? mode : "month"; + setView(nextView); + setCurrentDate(date.getTime()); + }, + [setView, setCurrentDate] + ); + + const handleSetView = useCallback((nextView: SchedulerView) => setView(nextView), [setView]); + + const handleUndo = useCallback(() => undo(), [undo]); + const handleRedo = useCallback(() => redo(), [redo]); + const memoizedXY = useMemo(() => ({ nav_height: 0 }), []); + + return ( +
+ + + +
+ ); +} +~~~ + +Beachten Sie, dass im Gegensatz zu Redux Toolkit Zustand keinen `Provider`-Wrapper benötigt. Der Hook `useSchedulerStore` liest direkt aus dem Store. + +## Scheduler in der App rendern + +Aktualisieren Sie `src/App.tsx`: + +~~~tsx +import Scheduler from "./components/Scheduler"; +import "./App.css"; + +function App() { + return ; +} + +export default App; +~~~ + +## Zusammenfassung + +Sie haben nun den React Scheduler vollständig über Zustand getrieben: + +- Zustand verwaltet `events`, `view`, `currentDate` und `config` als einzige Quelle der Wahrheit +- Benutzereingaben werden über `data.save` → Store-Aktionen geroutet +- Die UI bleibt synchron, weil Scheduler aktualisierte `events` als Props erhält +- Undo/Redo ist über eine snapshot-basierte Historie mit einem begrenzten History-Stack implementiert + +## Was kommt als Nächstes + +- Überprüfen Sie die Konzepte hinter diesem Beispiel in [Data Binding & State Management Basics](integrations/react/state/state-management-basics.md) +- Erkunden Sie Scheduler-Konfigurations- und Template-Optionen in [React Scheduler Überblick](integrations/react/overview.md) +- Persistenz hinzufügen (Ereignisse von einer API laden/speichern) indem Sie eine Zustand-Aktion verwenden und den Store aktualisieren +- Dasselbe Muster mit anderen State-Management-Lösungen weiter erforschen: + - [Using React Scheduler with Redux Toolkit](integrations/react/state/redux-toolkit.md) + - [Using React Scheduler with MobX](integrations/react/state/mobx.md) + - [Using React Scheduler with XState](integrations/react/state/xstate.md) + - [Using React Scheduler with Valtio](integrations/react/state/valtio.md) + - [Using React Scheduler with Jotai](integrations/react/state/jotai.md) \ No newline at end of file diff --git a/i18n/de/docusaurus-plugin-content-docs/current/integrations/salesforce/howtostart-salesforce.md b/i18n/de/docusaurus-plugin-content-docs/current/integrations/salesforce/howtostart-salesforce.md index 21b1d79f..1c54ca1b 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/integrations/salesforce/howtostart-salesforce.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/integrations/salesforce/howtostart-salesforce.md @@ -1,62 +1,66 @@ --- title: "dhtmlxScheduler mit SalesForce LWC" -sidebar_label: "dhtmlxScheduler mit SalesForce LWC" +sidebar_label: "Salesforce" --- # dhtmlxScheduler mit SalesForce LWC -Dieses Tutorial zeigt, wie Sie dhtmlxScheduler in eine [SalesForce Lightning Web Component](https://developer.salesforce.com/docs/platform/lwc/guide) integrieren. +Dieses Tutorial beschreibt, wie man dhtmlxScheduler in eine [SalesForce Lightning Web Component](https://developer.salesforce.com/docs/platform/lwc/guide) integriert. -Wenn Sie mit einer anderen Technologie arbeiten, finden Sie unten weitere Integrationsmöglichkeiten: +Prüfen Sie die [Online-Demo](https://dhtmlx-dev-ed.develop.lightning.force.com/) zur Integration von DHTMLX-Komponenten mit Salesforce LWC (Login: *user*, Passwort: *demo*). +Der Quellcode der Demo ist [auf GitHub verfügbar](https://github.com/DHTMLX/salesforce-lwc-demo). -- [dhtmlxScheduler mit ASP.NET Core](/integrations/dotnet/howtostart-dotnet-core.md) -- [dhtmlxScheduler mit ASP.NET MVC](/integrations/dotnet/howtostart-dotnet.md) -- [dhtmlxScheduler mit PHP](/integrations/php/howtostart-plain-php.md) -- [dhtmlxScheduler mit PHP:Slim](/integrations/php/howtostart-php-slim4.md) -- [dhtmlxScheduler mit PHP:Laravel](/integrations/php/howtostart-php-laravel.md) -- [dhtmlxScheduler mit Ruby on Rails](/integrations/other/howtostart-ruby.md) -- [dhtmlxScheduler mit dhtmlxConnector](/integrations/other/howtostart-connector.md) +Wenn Sie eine andere Technologie verwenden, schauen Sie sich unten die Liste der verfügbaren Integrationsvarianten an: -Wir verwenden die [SalesForce CLI](https://developer.salesforce.com/tools/salesforcecli), um die Lightning Web Component zu erstellen und in Ihre Organisation zu deployen. Details zur Installation finden Sie in [diesem Artikel](https://developer.salesforce.com/docs/atlas.en-us.sfdx_setup.meta/sfdx_setup/sfdx_setup_intro.htm). Zusätzlich können Sie das [Salesforce Extension Pack](https://marketplace.visualstudio.com/items?itemName="salesforce.salesforcedx-vscode)" für Visual Studio Code installieren, um die Arbeit mit Entwicklungsumgebungen zu erleichtern. +- [dhtmlxScheduler mit ASP.NET Core](integrations/dotnet/howtostart-dotnet-core.md) +- [dhtmlxScheduler mit ASP.NET MVC](integrations/dotnet/howtostart-dotnet.md) +- [dhtmlxScheduler mit PHP](integrations/php/howtostart-plain-php.md) +- [dhtmlxScheduler mit PHP:Slim](integrations/php/howtostart-php-slim4.md) +- [dhtmlxScheduler mit PHP:Laravel](integrations/php/howtostart-php-laravel.md) +- [dhtmlxScheduler mit Ruby on Rails](integrations/other/howtostart-ruby.md) +- [dhtmlxScheduler mit dhtmlxConnector](integrations/other/howtostart-connector.md) + +Wir verwenden [SalesForce CLI](https://developer.salesforce.com/tools/salesforcecli), um eine Lightning Web Component zu erstellen und sie in einer Organisation hochzuladen. Siehe [dieser Artikel](https://developer.salesforce.com/docs/atlas.en-us.sfdx_setup.meta/sfdx_setup/sfdx_setup_intro.htm) für Installationshinweise. Sie können außerdem [Salesforce Extension Pack](https://marketplace.visualstudio.com/items?itemName=salesforce.salesforcedx-vscode) für Visual Studio Code installieren, um mit Development-Org-Umgebungen zu arbeiten. :::note -Der vollständige Quellcode ist [auf GitHub](https://github.com/DHTMLX/salesforce-scheduler-demo) verfügbar. +Der vollständige Quellcode der in diesem Tutorial erstellten Demo ist [auf GitHub verfügbar](https://github.com/DHTMLX/salesforce-scheduler-demo). ::: -Hier finden Sie ein Video-Tutorial, das zeigt, wie Scheduler mit Salesforce LWC erstellt wird. + +Sie können sich auch die Videoanleitung ansehen, die zeigt, wie man Scheduler mit Salesforce LWC erstellt. ## Voraussetzungen -Stellen Sie sicher, dass die [SalesForce CLI](https://developer.salesforce.com/tools/salesforcecli) installiert ist. Falls nicht, finden Sie in [diesem Artikel](https://developer.salesforce.com/docs/atlas.en-us.sfdx_setup.meta/sfdx_setup/sfdx_setup_intro.htm) Anweisungen zur Einrichtung. +Installieren Sie [SalesForce CLI](https://developer.salesforce.com/tools/salesforcecli), falls Sie ihn noch nicht besitzen. Siehe [dieser Artikel](https://developer.salesforce.com/docs/atlas.en-us.sfdx_setup.meta/sfdx_setup/sfdx_setup_intro.htm) für Installationshinweise. -## Schritt 1. Projekt erstellen +## Schritt 1. Ein Projekt erstellen -Falls Sie noch keinen Account haben, können Sie sich [hier](https://developer.salesforce.com/) für ein kostenloses Entwicklerkonto registrieren. Dieser [Artikel](https://webkul.com/blog/create-free-developer-account-in-salesforce/) bietet hilfreiche Hinweise. +Melden Sie sich für ein kostenloses Entwicklerkonto an, falls Sie noch keines haben. Siehe [dieser Artikel](https://webkul.com/blog/create-free-developer-account-in-salesforce/) für Installationshinweise. -Verwenden Sie die Suchleiste auf der linken Seite, um *Dev Hub* zu finden und auszuwählen: +In der linken Leiste suchen Sie nach und wählen Sie **Dev Hub**: -![](/img/sf_devhub.png) +![sf_devhub](/img/sf_devhub.png) -Aktivieren Sie anschließend im sich öffnenden Einstellungsfenster *Dev Hub*: +Im neuen Einstellungsfenster wählen Sie **Enable Dev Hub**: -![](/img/sf_enabledh.png) +![sf_enabledh](/img/sf_enabledh.png) -Erstellen Sie nun einen Basisordner für Ihr Salesforce DX-Projekt: +Lassen Sie uns ein Basisverzeichnis für das Salesforce DX-Projekt erstellen: ~~~js $ mkdir ~/salesforce ~~~ -Erzeugen Sie ein Salesforce DX-Projekt mit der CLI: +Erstellen Sie ein Salesforce DX-Projekt über die CLI: ~~~js $ cd ~/salesforce $ sfdx project generate -n scheduler-salesforce-app target dir = C:UsersUsersalesforce create scheduler-salesforce-appconfigproject-scratch-def.json - create scheduler-salesforce-appguides/README.md + create guides/scheduler-salesforce-appREADME.md create scheduler-salesforce-appsfdx-project.json create scheduler-salesforce-app.huskypre-commit create scheduler-salesforce-app.vscodeextensions.json @@ -75,7 +79,7 @@ $ sfdx project generate -n scheduler-salesforce-app create scheduler-salesforce-apppackage.json ~~~ -Wechseln Sie in den neuen Projektordner: +Gehen Sie in das erstellte Projekt: ~~~js $ cd scheduler-salesforce-app @@ -83,7 +87,7 @@ $ cd scheduler-salesforce-app ## Schritt 2. Autorisierung -Autorisieren Sie Ihre Organisation über den Web Server Flow mit folgendem Befehl: +[Org autorisieren](https://developer.salesforce.com/docs/atlas.en-us.sfdx_dev.meta/sfdx_dev/sfdx_dev_auth_web_flow.htm) mit dem Web Server Flow: ~~~js $ sfdx org login web -d @@ -91,15 +95,16 @@ $ sfdx org login web -d Successfully authorized ...@...com with org ID ... ~~~ -Aktualisieren Sie anschließend Ihre Projektkonfigurationsdatei (*sfdx-project.json*), indem Sie den Parameter "sfdcLoginUrl" auf Ihre "My Domain URL" setzen. Diese URL finden Sie auf der "My Domain"-Einrichtungsseite Ihrer Organisation. Zum Beispiel: +Aktualisieren Sie Ihre Projektkonfiguration (*sfdx-project.json*). Setzen Sie den Parameter "sfdcLoginUrl" auf Ihre "My Domain URL". Die "My Domain URL" Ihres Orgs finden Sie auf der Einstellungsseite "My Domain". Zum Beispiel: + +![sf_mydomain](/img/sf_mydomain.png) -![](/img/sf_mydomain.png) ~~~js title="scheduler-salesforce-app/sfdx-project.json" "sfdcLoginUrl" : "https://xbs2-dev-ed.my.salesforce.com" ~~~ -Erstellen Sie eine Scratch Org mit folgendem Befehl: +Erstellen Sie eine Scratch Org: ~~~js $ sfdx org create scratch -f config/project-scratch-def.json -d @@ -121,90 +126,86 @@ Done Your scratch org is ready. ~~~ + ## Schritt 3. Scheduler zu Salesforce hinzufügen -Um die Bibliothek zu verwenden, laden Sie sie als Static Resource in Salesforce hoch. Öffnen Sie Ihre Scratch Org mit folgendem Befehl: +Um die Bibliothek zu verwenden, müssen wir sie in Salesforce als Static Resource hochladen. Öffnen Sie dazu Ihre Scratch-Org: ~~~js $ sfdx org open ~~~ -Navigieren Sie dann zum Tab "Static Resources" und klicken Sie auf "New": +Öffnen Sie nun die Registerkarte **Static Resources** und klicken Sie auf die Schaltfläche **New** -![](/img/sf_staticresources.png) +![sf_staticresources](/img/sf_staticresources.png) -Geben Sie der Resource einen eindeutigen Namen (hier *dhtmlxscheduler*), laden Sie das ZIP-Archiv mit den Bibliotheksdateien (*dhtmlxscheduler.js* und *dhtmlxscheduler.css*) hoch und setzen Sie Cache Control auf "Public", um die Performance zu verbessern. Klicken Sie auf "Save". +Geben Sie ihm einen aussagekräftigen Namen (wir verwenden *dhtmlxscheduler*), wählen Sie das ZIP-Archiv mit der Bibliothek selbst (das Archiv muss die Dateien *dhtmlxscheduler.js* und *dhtmlxscheduler.css* enthalten) und wählen Sie die Cache-Kontrolle **Public**, um die Leistung zu verbessern. Drücken Sie die Schaltfläche **Save**. +![sf_load_zip](/img/sf_load_zip.png) -![/img/sf_load_zip.png](/img/sf_load_zip.png) - -Ab jetzt steht dhtmlxScheduler innerhalb von Salesforce zur Verfügung. +Jetzt haben wir dhtmlxScheduler in Salesforce installiert. ![sf_scheduler_in_sf](/img/sf_scheduler_in_sf.png) ## Schritt 4. Datenmodell erstellen -Events sind die Kernelemente in dhtmlxScheduler. Eine praktische Möglichkeit zur Verwaltung besteht darin, alle Eigenschaften als einfaches JSON in Salesforce zu speichern. Erstellen Sie dazu ein neues Event-Objekt. Öffnen Sie den Object Manager, wählen Sie dann "Create" und anschließend "Custom Object": +Die Kerneinheiten von dhtmlxScheduler sind Ereignisse. Ein sinnvoller Ansatz ist es, alle Eigenschaften der dhtmlxScheduler‑Objekte als reines JSON in Salesforce zu speichern. Erstellen wir also ein Ereignis-Objekt. Öffnen Sie den Objekt-Manager und wählen Sie „Create“, dann „Custom Object“: ![sf_new_object](/img/sf_new_object.png) -### **Ereignisobjekt** - -Nennen Sie das Ereignisobjekt *SchedulerEvent* oder *SchedulerEvents*. +### **Ereignis-Objekt** +Geben Sie dem Ereignis-Objekt den Namen, lassen Sie ihn *SchedulerEvent/SchedulerEvents* heißen. ![sf_schedulerevent](/img/sf_schedulerevent.png) :::note -Stellen Sie sicher, dass der Datensatzname mit dem Objektnamen übereinstimmt, zum Beispiel: +Der Datensatzname muss dem Objektnamen entsprechen, zum Beispiel: -Objektname: SchedulerEvent => Datensatzname: SchedulerEvent Name +Objektname: SchedulerEvent ⇒ Datensatzname: SchedulerEvent Name ::: -Klicken Sie auf die Schaltfläche „Speichern". - -Nachdem das Objekt erstellt wurde, wechseln Sie zum Tab "Felder & Beziehungen" und klicken Sie auf die Schaltfläche "Neu". +Drücken Sie die Schaltfläche **Save**. +Nachdem das Objekt erstellt ist, öffnen Sie die Registerkarte **Fields & Relationships**. Drücken Sie die Schaltfläche **New**. ![sf_new_field](/img/sf_new_field.png) -- **Startdatum** - -Wählen Sie "Datum/Uhrzeit" als Datentyp aus und klicken Sie auf "Weiter". +- **Start Date** +Wählen Sie **Date/Time** als Datentyp und drücken Sie die Schaltfläche **Next**. ![sf_field_type](/img/sf_field_type.png) -Nennen Sie dieses Feld "Start Date". Dieses Feld enthält die JSON-serialisierten Task-Eigenschaften. - +Benennen Sie es mit **Start Date**. Es speichert die JSON-serialisierten Task-Eigenschaften. ![sf_start_date](/img/sf_start_date.png) -Klicken Sie auf "Weiter" und übernehmen Sie alle Standardeinstellungen, bis die Schaltfläche "Speichern & Neu" erscheint. +Drücken Sie die Schaltfläche **Next** (unter Akzeptieren aller Standard-Einstellungen), bis die Schaltfläche **Save & New** verfügbar ist. -- **Enddatum** +- **End Date** -Fügen Sie das Feld "End Date" hinzu und wählen Sie "Datum/Uhrzeit" als Datentyp aus. +Erstellen Sie das Feld **End Date**. Wählen Sie **Date/Time** als Datentyp. ![sf_end_date](/img/sf_end_date.png) -Klicken Sie auf "Weiter" und übernehmen Sie die Standardeinstellungen, bis die Schaltfläche "Speichern & Neu" verfügbar ist. +Drücken Sie die Schaltfläche **Next** (unter Akzeptieren aller Standard-Einstellungen), bis die Schaltfläche **Save & New** verfügbar ist. - **Text** -Erstellen Sie ein "Text"-Feld und wählen Sie "Text" als Datentyp aus. +Erstellen Sie ein Feld **Text**. Wählen Sie **Text** als Datentyp. ![sf_text](/img/sf_text.png) -Klicken Sie auf "Weiter" und übernehmen Sie alle Standardeinstellungen, bis die Schaltfläche "Speichern" verfügbar ist. +Drücken Sie die Schaltfläche **Next** (unter Akzeptieren aller Standard-Einstellungen), bis die Schaltfläche **Save** verfügbar ist. -Am Ende sollten die Felder wie folgt aussehen: +Am Ende sollte es so aussehen: ![sf_schedulerevent_fields](/img/sf_schedulerevent_fields.png) ## Schritt 5. Erstellen einer Lightning Web Component -Um eine Lightning Web Component zu erstellen, verwenden Sie folgenden Befehl: +Um eine Lightning Web Component zu erstellen, führen Sie folgenden Befehl aus: ~~~js $ sfdx lightning generate component --type lwc -n scheduler -d force-app/main/default/lwc @@ -216,7 +217,8 @@ target dir = C:UsersUsersourcesalesforcescheduler-salesforce-appforce-appmaindef create force-appmaindefaultlwcschedulerscheduler.js-meta.xml ~~~ -Passen Sie die Komponentendefinition in *scheduler.js-meta.xml* an, um sie im Lightning App Builder verfügbar zu machen: +Ändern Sie die Komponenten-Definition in *scheduler.js-meta.xml*, damit sie im Lightning App Builder freigegeben wird: + ~~~js title="force-app/main/default/lwc/scheduler/scheduler.js-meta.xml" @@ -234,15 +236,17 @@ Passen Sie die Komponentendefinition in *scheduler.js-meta.xml* an, um sie im Li ~~~ -Öffnen Sie *scheduler.html* und fügen Sie folgenden Code ein: +Öffnen Sie *scheduler.html* und fügen Sie den folgenden Code ein: + ~~~js title="force-app/main/default/lwc/scheduler/scheduler.html" ~~~ -Öffnen Sie anschließend *scheduler.js* und fügen Sie folgenden Code hinzu: +Öffnen Sie *scheduler.js* und fügen Sie den folgenden Code ein: + ~~~js title="force-app/main/default/lwc/scheduler/scheduler.js" /* eslint-disable guard-for-in */ @@ -367,9 +371,9 @@ export default class SchedulerView extends LightningElement { } ~~~ -## Schritt 6. Erstellen einer Apex-Klasse +## Schritt 6. Apex-Klasse erstellen -Im nächsten Schritt wird eine Klasse erstellt, die die Interaktion zwischen der Lightning-Komponente und dem Datenmodell ermöglicht. +Der nächste Schritt besteht darin, eine Klasse zu erstellen, die die Interaktionen zwischen der Lightning-Komponente und unserem Datenmodell ermöglicht. ~~~js $ sfdx apex generate class -n SchedulerData -d force-app/main/default/classes @@ -379,7 +383,8 @@ target dir = C:UsersUsersalesforcescheduler-salesforce-appforce-appmaindefaultcl create force-appmaindefaultclassesSchedulerData.cls-meta.xml ~~~ -Nachdem die Klasse erstellt wurde, öffnen Sie *SchedulerData.cls* und fügen Sie diesen Code ein: +Nach der Erstellung öffnen Sie *SchedulerData.cls* und fügen Sie den folgenden Code ein: + ~~~js title="force-app/main/default/classes/SchedulerData.cls" public with sharing class SchedulerData { @@ -399,25 +404,25 @@ public with sharing class SchedulerData { } ~~~ -Ziehen Sie die Quelle aus dem Scratch Org in Ihr Projekt: +Quellen Sie den Quellcode aus der Scratch Org in Ihr Projekt: ~~~js $ sfdx project retrieve start ~~~ -Schieben Sie dann die Quellen zurück in das Scratch Org: +und pushes Sie dann die Quellen in die Scratch Org: ~~~js $ sfdx project deploy start ~~~ -## Schritt 7. Erstellen einer Lightning Page +## Schritt 7. Lightning Page erstellen -Öffnen Sie den "Lightning App Builder" und erstellen Sie eine neue Lightning Page. +Öffnen Sie den "Lightning App Builder", erstellen Sie eine neue Lightning Page. ![sf_lightning_app_builder](/img/sf_lightning_app_builder.png) -Wählen Sie "App Page", geben Sie den Seitennamen ein und wählen Sie das Layout aus. +Wählen Sie "App Page" dann Seitenname und Layout. ![sf_app_page](/img/sf_app_page.png) @@ -425,7 +430,7 @@ Wählen Sie "App Page", geben Sie den Seitennamen ein und wählen Sie das Layout ![sf_page_layout](/img/sf_page_layout.png) -Die benutzerdefinierte Scheduler-Komponente sollte für die neue Seite verfügbar sein. Fügen Sie sie einem beliebigen Bereich hinzu und speichern Sie. +Sie sollten eine Scheduler‑Benutzerkomponente für die neue Seite sehen. Fügen Sie sie zu einem Bereich hinzu und speichern Sie. ![sf_scheduler](/img/sf_scheduler.png) @@ -435,31 +440,30 @@ Aktivieren Sie die Seite. Speichern Sie die Änderungen. - ![sf_activation](/img/sf_activation.png) ![sf_add_page_to_nm](/img/sf_add_page_to_nm.png) ![sf_scheduler_in_app](/img/sf_scheduler_in_app.png) -Öffnen Sie die Anwendungsseite. Sie sollte im App Launcher durch Eingabe von Scheduler zugänglich sein. +Öffnen Sie die Anwendungsseite. Sie sollte im App Launcher sichtbar sein, wenn Sie darauf klicken und Scheduler eingeben. ![sf_home_scheduler](/img/sf_home_scheduler.png) -Wenn alles korrekt eingerichtet wurde, wird eine einfache Scheduler-Demo auf der Lightning Page angezeigt. +Wenn alles gut gelaufen ist, sollten Sie eine einfache Scheduler-Demo sehen, die in der Lightning Page läuft. ![sf_final](/img/sf_final.png) ## Anwendungssicherheit -Der Scheduler selbst enthält keinen Schutz gegen Bedrohungen wie SQL-Injection, XSS oder CSRF-Angriffe. Die Sicherstellung der Anwendungssicherheit liegt in der Verantwortung der Entwickler. Weitere Details finden Sie [im zugehörigen Artikel](/guides/app-security.md). Salesforce ist mit Sicherheitsfunktionen ausgestattet, um Ihre Daten und Anwendungen zu schützen, und Sie können eigene Sicherheitsmaßnahmen implementieren, die auf die Anforderungen Ihrer Organisation zugeschnitten sind. Weitere Informationen finden Sie im [Salesforce Security Guide](https://developer.salesforce.com/docs/atlas.en-us.securityImplGuide.meta/securityImplGuide/salesforce_security_guide.htm). Zusätzlich behandelt [diese Ressource](https://developer.salesforce.com/docs/atlas.en-us.secure_coding_guide.meta/secure_coding_guide/secure_coding_lightning_security.htm) wichtige Sicherheitspraktiken. +Scheduler bietet keine Mittel, um eine Anwendung vor verschiedenen Bedrohungen zu schützen, wie z. B. SQL-Injektionen oder XSS- und CSRF-Angriffe. Es ist wichtig, dass die Verantwortung für die Sicherheit einer Anwendung bei den Entwicklern liegt, die die Anwendung implementieren. Lesen Sie die Details [im entsprechenden Artikel](guides/app-security.md). Salesforce ist so konzipiert, dass es Ihre Daten und Anwendungen schützt. Sie können auch Ihre eigene Sicherheitsstrategie implementieren, um der Struktur und den Bedürfnissen Ihrer Organisation gerecht zu werden. Für weitere Informationen siehe bitte den [Salesforce Security Guide](https://developer.salesforce.com/docs/atlas.en-us.securityImplGuide.meta/securityImplGuide/salesforce_security_guide.htm). [Hier](https://developer.salesforce.com/docs/atlas.en-us.secure_coding_guide.meta/secure_coding_guide/secure_coding_lightning_security.htm) erfahren Sie, was Sie sicher machen müssen. ## Fehlerbehebung -Wenn der Scheduler nach Abschluss der Integrationsschritte keine Ereignisse anzeigt, lesen Sie den Artikel [Troubleshooting Backend Integration Issues](/guides/troubleshooting.md). Dieser bietet Hilfestellungen zur Identifikation und Lösung häufiger Probleme. +Falls Sie die oben genannten Schritte zur Integration von Scheduler mit Salesforce abgeschlossen haben, Scheduler aber Ereignisse auf einer Seite nicht rendert, werfen Sie einen Blick auf den Artikel [Troubleshooting Backend Integration Issues](guides/troubleshooting.md). Dort wird beschrieben, wie man die Ursachen der Probleme identifiziert. -## Wie geht es weiter? +## Was kommt als Nächstes -An diesem Punkt ist der Scheduler vollständig funktionsfähig. Der vollständige Code steht auf [GitHub](https://github.com/DHTMLX/salesforce-scheduler-demo) zum Klonen oder Herunterladen für Ihre eigenen Projekte zur Verfügung. +Sie haben nun einen vollständig funktionsfähigen Scheduler. Den vollständigen Code können Sie sich auf [GitHub](https://github.com/DHTMLX/salesforce-scheduler-demo) ansehen, klonen oder herunterladen und in Ihren Projekten verwenden. -Sie können auch [Anleitungen zu den Funktionen des Schedulers](/guides/) oder Tutorials zur [Integration des Schedulers mit anderen Backend-Frameworks](/integrations/howtostart-guides.md) erkunden. +Sie können die [Guides zu den zahlreichen Funktionen von Scheduler](/guides/) oder Tutorials zur [Integration von Scheduler mit anderen Backend-Frameworks](integrations/howtostart-guides.md) prüfen. \ No newline at end of file diff --git a/i18n/de/docusaurus-plugin-content-docs/current/views/agenda-legacy.md b/i18n/de/docusaurus-plugin-content-docs/current/views/agenda-legacy.md index 3595ed41..65b73912 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/views/agenda-legacy.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/views/agenda-legacy.md @@ -74,11 +74,11 @@ In der Regel wird die erste Beschriftung beim Hinzufügen des Ansichtstabs zum S Um den Datumsbereich, der in der Agenda-Ansicht angezeigt wird, zu definieren, verwenden Sie die Eigenschaften [agenda_end](api/config/agenda_end.md) und [agenda_start](api/config/agenda_start.md): ~~~js -//um Termine ab dem 1. Juni 2019 anzuzeigen -scheduler.config.agenda_start = new Date(2019, 5, 1); +//um Termine ab dem 1. Juni 2026 anzuzeigen +scheduler.config.agenda_start = new Date(2026, 5, 1); -//um Termine bis zum 1. Juni 2020 anzuzeigen -scheduler.config.agenda_end = new Date(2020, 5, 1); +//um Termine bis zum 1. Juni 2027 anzuzeigen +scheduler.config.agenda_end = new Date(2027, 5, 1); ~~~ ## Aktivieren der Schaltflächen Weiter/Zuvor/Heute diff --git a/i18n/de/docusaurus-plugin-content-docs/current/views/agenda.md b/i18n/de/docusaurus-plugin-content-docs/current/views/agenda.md index 3e5b974b..42f5e961 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/views/agenda.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/views/agenda.md @@ -93,8 +93,8 @@ Dadurch wird der angezeigte Zeitraum auf eine Woche begrenzt. Sie können den angezeigten Bereich auch fest einstellen, indem Sie die Eigenschaften [agenda_end](api/config/agenda_end.md) und [agenda_start](api/config/agenda_start.md) setzen: ~~~js -scheduler.config.agenda_start = new Date(2023, 5, 1); -scheduler.config.agenda_end = new Date(2023, 6, 1); +scheduler.config.agenda_start = new Date(2027, 5, 1); +scheduler.config.agenda_end = new Date(2027, 6, 1); ~~~ ## Verwandte Anleitungen diff --git a/i18n/de/docusaurus-plugin-content-docs/current/views/day.md b/i18n/de/docusaurus-plugin-content-docs/current/views/day.md index 8c195476..16d17bb9 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/views/day.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/views/day.md @@ -16,7 +16,7 @@ Die Tagesansicht ist standardmäßig im [Grund-Markup des Schedulers](guides/sch ~~~js //Standard-Initialisierung. Die Tagesansicht ist automatisch enthalten -scheduler.init('scheduler_here',new Date(2019,0,10),"week"); +scheduler.init('scheduler_here',new Date(2027,0,10),"week"); ... scheduler.load("/data/events"); ~~~ diff --git a/i18n/de/docusaurus-plugin-content-docs/current/views/grid.md b/i18n/de/docusaurus-plugin-content-docs/current/views/grid.md index 47abfd60..6a5d39cf 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/views/grid.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/views/grid.md @@ -51,8 +51,8 @@ scheduler.createGridView({ {id:"date", label:'Date', sort:'date', width:'*'}, {id:"text", label:'Text', sort:'str', width:200, align:'left'} ], - from:new Date(2019, 3, 10),//linke Grenze des erlaubten Datumsbereichs - to:new Date(2019, 5, 23) //rechte Grenze des erlaubten Datumsbereichs + from:new Date(2027, 3, 10),//linke Grenze des erlaubten Datumsbereichs + to:new Date(2027, 5, 23) //rechte Grenze des erlaubten Datumsbereichs }); ~~~ @@ -64,15 +64,15 @@ scheduler.createGridView({ Mit dieser Erweiterung können Sie die aktiven Daten einschränken, sodass Benutzer den angegebenen Bereich nicht überschreiten können. -Wenn Sie beispielsweise die aktiven Daten vom **1. Januar 2024** bis zum **1. Januar 2025** begrenzen möchten, konfigurieren Sie es wie folgt: +Wenn Sie beispielsweise die aktiven Daten vom **1. Januar 2026** bis zum **1. Januar 2027** begrenzen möchten, konfigurieren Sie es wie folgt: ~~~js scheduler.createGridView({ name:"grid", .. - from:new Date(2024, 0, 1), - to:new Date(2025, 0, 1) + from:new Date(2026, 0, 1), + to:new Date(2027, 0, 1) }); ~~~ diff --git a/i18n/de/docusaurus-plugin-content-docs/current/views/map.md b/i18n/de/docusaurus-plugin-content-docs/current/views/map.md index 7c3aa28d..6c006772 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/views/map.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/views/map.md @@ -66,7 +66,7 @@ scheduler.locale.labels.map_tab = "Map"; 5. Fügen Sie einen Abschnitt im Lightbox-Formular hinzu, um den Standort des Ereignisses zu verwalten: ~~~js -scheduler.config.lightbox.sections="[" +scheduler.config.lightbox.sections = [ {name:"description", height:50,map_to:"text", type:"textarea", focus:true}, {name:"location", height:43, map_to:"event_location", type:"textarea"}, {name:"time", height:72, type:"time", map_to:"auto"} @@ -83,7 +83,7 @@ scheduler.locale.labels.section_location = "Location"; ~~~js //'map' ist der Standardname für die Kartenansicht -scheduler.init('scheduler_here',new Date(2024,5,11),"map"); +scheduler.init('scheduler_here',new Date(2027,5,11),"map"); ~~~ @@ -114,7 +114,7 @@ scheduler.config.map_settings = { } } ... -scheduler.init('scheduler_here',new Date(2024,5,11),"map"); +scheduler.init('scheduler_here',new Date(2027,5,11),"map"); ~~~ [Weitere Details](views/map.md#map-related-configuration-options) @@ -126,7 +126,7 @@ scheduler.init('scheduler_here',new Date(2024,5,11),"map"); ~~~js scheduler.config.map_view_provider = "googleMap"; ... -scheduler.init('scheduler_here',new Date(2024,5,11),"map"); +scheduler.init('scheduler_here',new Date(2027,5,11),"map"); ~~~ Verfügbare Werte sind: *"googleMap", "openStreetMaps", "mapbox"*. @@ -138,7 +138,7 @@ scheduler.config.map_settings = { view_provider: "googleMap" } ... -scheduler.init('scheduler_here',new Date(2024,5,11),"map"); +scheduler.init('scheduler_here',new Date(2027,5,11),"map"); ~~~ ## Kartenbezogene Konfigurationsoptionen {#map-related-configuration-options} @@ -169,7 +169,7 @@ scheduler.config.map_settings = { view_provider: "googleMap" } ... -scheduler.init('scheduler_here',new Date(2024,5,11),"map"); +scheduler.init('scheduler_here',new Date(2027,5,11),"map"); ~~~ Diese Eigenschaften umfassen: diff --git a/i18n/de/docusaurus-plugin-content-docs/current/views/month.md b/i18n/de/docusaurus-plugin-content-docs/current/views/month.md index 9546c6b2..f138b270 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/views/month.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/views/month.md @@ -15,7 +15,7 @@ Die Monatsansicht ist standardmäßig in das [Grund-Layout des Schedulers](guide ~~~js // Standard-Initialisierung; die Monatsansicht ist automatisch enthalten -scheduler.init('scheduler_here', new Date(2019,0,10), "month"); +scheduler.init('scheduler_here', new Date(2027,0,10), "month"); ... scheduler.load("/data/events"); ~~~ @@ -41,10 +41,10 @@ Ab Version 4.0 können Sie steuern, wie viele Ereignisse in jeder Zelle angezeig Um die maximale Anzahl von Ereignissen pro Zelle festzulegen, verwenden Sie die Option [max_month_events](api/config/max_month_events.md): -~~~ +~~~js scheduler.config.max_month_events = 3; .. -scheduler.init('scheduler_here', new Date(2019,5,30), "month"); +scheduler.init('scheduler_here', new Date(2027,5,30), "month"); ~~~ Wenn mehr Ereignisse als das festgelegte Limit vorhanden sind, erscheint ein "Mehr anzeigen"-Link. Beim Anklicken wird der Benutzer zur Tagesansicht weitergeleitet, in der alle Ereignisse vollständig angezeigt werden. @@ -89,7 +89,7 @@ scheduler.plugins({ // Beim Anklicken eines Tages wird die Wochenansicht geöffnet scheduler.config.active_link_view = "week"; ... -scheduler.init('scheduler_here', new Date(2012,7,6), "month"); +scheduler.init('scheduler_here', new Date(2027,7,6), "month"); ~~~ @@ -106,7 +106,7 @@ Um das Größenändern von mehrtägigen Ereignissen per Drag-and-Drop zu ermögl // Aktiviert das Größenändern von mehrtägigen Ereignissen per Drag-and-Drop scheduler.config.resize_month_events = true; /*!*/ -scheduler.init('scheduler_here', new Date(2019,0,10), "month"); +scheduler.init('scheduler_here', new Date(2027,0,10), "month"); ~~~ [Resizable events in Month view](https://docs.dhtmlx.com/scheduler/samples/02_customization/32_resizable_month_events.html) @@ -118,7 +118,7 @@ Um das Größenändern sowohl für mehrtägige als auch für eintägige Ereignis // Aktiviert das Größenändern für ein- und mehrtägige Ereignisse per Drag-and-Drop scheduler.config.resize_month_events = true;/*!*/ scheduler.config.resize_month_timed = true; /*!*/ -scheduler.init('scheduler_here', new Date(2019,0,10), "month"); +scheduler.init('scheduler_here', new Date(2027,0,10), "month"); ~~~ **Bitte beachten Sie:** diff --git a/i18n/de/docusaurus-plugin-content-docs/current/views/timeline.md b/i18n/de/docusaurus-plugin-content-docs/current/views/timeline.md index 40757cff..282690cb 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/views/timeline.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/views/timeline.md @@ -146,7 +146,7 @@ scheduler.createTimelineView({ ... }); -var timeline = scheduler.matrix.timeline; +const timeline = scheduler.matrix.timeline; ~~~ Nach der Erstellung können Sie die unten aufgeführten Methoden verwenden. @@ -156,7 +156,7 @@ Nach der Erstellung können Sie die unten aufgeführten Methoden verwenden. Um ein Timeline-Ansichtsobjekt abzurufen, verwenden Sie die Methode [getView](api/method/getview.md). Sie akzeptiert den Namen der Ansicht als Parameter. Wenn kein Parameter übergeben wird, wird die aktuelle Ansicht zurückgegeben. ~~~js -var timeline = scheduler.getView(); +const timeline = scheduler.getView(); timeline.x_size = 8; scheduler.setCurrentView(); ~~~ @@ -250,7 +250,7 @@ timeline.scrollTo({left:300, top:500}); - Um die X-Koordinate für ein bestimmtes Datum auf der Skala zu erhalten, verwenden Sie **posFromDate()** mit einem Date-Parameter: ~~~js -var left = timeline.posFromDate(new Date()); +const left = timeline.posFromDate(new Date()); ~~~ :::note @@ -260,7 +260,7 @@ Diese Methode gibt 0 oder die maximale X-Koordinate zurück, wenn das Datum auß - Um die Y-Koordinate einer bestimmten Zeile zu erhalten, verwenden Sie **getSectionTop()** mit der Sektionsnummer: ~~~js -var top = timeline.getSectionTop(section.key); +const top = timeline.getSectionTop(section.key); ~~~ :::note @@ -293,7 +293,7 @@ const top = timeline.getEventTop(scheduler.getEvent(event.id)); Um die aktuelle Scrollbar-Position zu ermitteln, rufen Sie **timeline.getScrollPosition()** auf. Diese Methode gibt ein Objekt mit den Scroll-Koordinaten zurück: ~~~js -var timeline = scheduler.getView(); +const timeline = scheduler.getView(); timeline.getScrollPosition(); // { left: 0, top: 0 } ~~~ @@ -305,7 +305,7 @@ Das zurückgegebene Objekt enthält: Sie können auch auf Scroll-Änderungen mit dem **onScroll**-Event reagieren, das die neuen left- und top-Positionen erhält: ~~~js -var timeline = scheduler.getView(); +const timeline = scheduler.getView(); timeline.attachEvent("onScroll", function(left, top){}); ~~~ @@ -331,9 +331,9 @@ wo: Diese Methode gibt ein Array von Ereignisobjekten zurück. ~~~js -var timeline = scheduler.getView(); +const timeline = scheduler.getView(); -var events = timeline.selectEvents({ +const events = timeline.selectEvents({ section: section.key, date: date, selectNested: true @@ -596,9 +596,9 @@ Um solche Intervalle vollständig auszuschließen, müssen Sie die Einstellung * ~~~js scheduler._click.dhx_cal_next_button = function(dummy,step){ - var mode = scheduler.getState().mode; - var minDate = scheduler.getState().min_date; - var formFunc = scheduler.date.date_to_str("%D"); + const mode = scheduler.getState().mode; + const minDate = scheduler.getState().min_date; + const formFunc = scheduler.date.date_to_str("%D"); // Wochenenden überspringen if(mode=='timeline'){ @@ -984,15 +984,15 @@ Nach der Aktivierung wird das angegebene Template aufgerufen. Im folgenden Beisp scheduler.templates.timeline_cell_value = function (evs, date, section){ if(section.children){ - var timeline = scheduler.getView(); + const timeline = scheduler.getView(); - var events = timeline.selectEvents({ + const events = timeline.selectEvents({ section: section.key, date: date, selectNested: true }); - var className = ""; + let className = ""; if(!events.length){ className = "load-marker-no"; }else if(events.length < 3){ diff --git a/i18n/de/docusaurus-plugin-content-docs/current/views/units.md b/i18n/de/docusaurus-plugin-content-docs/current/views/units.md index 57431ffe..9a6445b4 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/views/units.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/views/units.md @@ -74,11 +74,11 @@ scheduler.createUnitsView({ scheduler.init('scheduler_here'); scheduler.parse([ - {id:1, text:"Task1", start_date:"2019-09-17 12:00", end_date:"2019-09-18 21:00", + {id:1, text:"Task1", start_date:"2027-09-17 12:00", end_date:"2027-09-18 21:00", unit_id:"1"}, - {id:2, text:"Task2", start_date:"2019-09-17 09:00", end_date:"2019-09-17 21:00", + {id:2, text:"Task2", start_date:"2027-09-17 09:00", end_date:"2027-09-17 21:00", unit_id:"3"}, - {id:3, text:"Task3", start_date:"2019-09-17 15:00", end_date:"2019-09-18 15:00", + {id:3, text:"Task3", start_date:"2027-09-17 15:00", end_date:"2027-09-18 15:00", unit_id:"2"} ]); ~~~ @@ -177,7 +177,7 @@ scheduler.createUnitsView({ property: "section_id", /*!*/ ... }); -scheduler.init('scheduler_here', new Date(2019, 5, 30), "unit"); +scheduler.init('scheduler_here', new Date(2027, 5, 30), "unit"); scheduler.parse([ { id:1, text:"Task A", section_id:'1', ...},/*!*/ @@ -238,15 +238,15 @@ Die Antwort für die Methode [load](api/method/load.md) sollte eine Collection m "data":[ { "id":"1", - "start_date":"2019-03-02 15:00:00", - "end_date":"2019-03-04 16:00:00", + "start_date":"2027-03-02 15:00:00", + "end_date":"2027-03-04 16:00:00", "text":"Team meeting", "type_id":"1" }, { "id":"2", - "start_date":"2019-03-02 17:00:00", - "end_date":"2019-03-04 18:00:00", + "start_date":"2027-03-02 17:00:00", + "end_date":"2027-03-04 18:00:00", "text":"Strategy meeting", "type_id":"2" } diff --git a/i18n/de/docusaurus-plugin-content-docs/current/views/week.md b/i18n/de/docusaurus-plugin-content-docs/current/views/week.md index 63c04396..f7ea676c 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/views/week.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/views/week.md @@ -16,7 +16,7 @@ Die Wochenansicht ist standardmäßig im [Grund-Markup des Schedulers]([Schedule ~~~js // Standard-Initialisierung. Die Wochenansicht wird automatisch hinzugefügt -scheduler.init('scheduler_here',new Date(2019,0,10),"week"); +scheduler.init('scheduler_here',new Date(2027,0,10),"week"); ... scheduler.load("/data/events"); ~~~ diff --git a/i18n/de/docusaurus-plugin-content-docs/current/whats-new.md b/i18n/de/docusaurus-plugin-content-docs/current/whats-new.md index 8e3a519e..2b8bc44a 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/whats-new.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/whats-new.md @@ -5,7 +5,109 @@ sidebar_label: "Was ist neu" # Was ist neu -Wenn Sie den Scheduler von einer früheren Version aktualisieren, werfen Sie einen Blick auf [Migration von älteren Versionen](migration.md) für weitere Details. +Wenn Sie Scheduler von einer älteren Version aktualisieren, lesen Sie [Migration von älteren Versionen](migration.md) für Details. + +7.2.13 +------------- +31. März 2026. Bugfix-Veröffentlichung + +### Fehlerbehebungen + +- Behebt die falsche Warnung zur Testversion im [React Scheduler](integrations/react/overview.md) +- Behebt die Regression bei Remote-Updates im [React Scheduler](integrations/react/overview.md), bei der das Bearbeiten eines Ereignisses keine Änderungen am bestehenden Ereignis anwendete + + +7.2.12 +------------- +23. März 2026. Bugfix-Veröffentlichung + +### Fehlerbehebungen + +- Behebt den Absturz beim Neuladen der Seite im [React Scheduler](integrations/react/overview.md), wenn nicht-standardmäßige Themes mit dem [cookie](guides/extensions-list.md#cookie) Plugin aktiviert sind +- Behebt die Regression, bei der die `save` URL im `data`-Prop nicht korrekt angewendet wurde im [React Scheduler](integrations/react/overview.md) +- Behebt das Problem, dass das Bearbeiten eines nicht ersten Vorkommens eines [wiederkehrenden Ereignisses](guides/recurring-events.md) im Modus "Diese und folgende Ereignisse" nicht alle [Lightbox](guides/configuring-the-lightbox.md) Feldänderungen anwendete +- Behebt das Problem, dass dynamische Änderungen der [Quick Info](guides/quick-info.md) Buttons basierend auf Ereignisbedingungen das Popup nicht korrekt aktualisierte +- Behebt das Problem, dass das Ändern des Textes eines einzelnen [wiederkehrenden Ereignisses](guides/recurring-events.md) Vorkommens nach dem Bearbeiten eines nachfolgenden Vorkommens im Modus "Diese und folgende Ereignisse" überschrieben wurde +- Behebt die Overflow-Stile des [Quick Info](guides/quick-info.md) Popups, um lange Ereignisbeschreibungen korrekt zu behandeln +- Behebt den Skriptfehler im [React Scheduler](integrations/react/overview.md), der auftrat, wenn man Ereignisse zu einem bestehenden Datensatz über die `useState`-Funktion hinzufügte + +### Aktualisierungen + +- Die Möglichkeit hinzufügen, das [Bestätigungsemodal für wiederkehrende Ereignisse](guides/recurring-events.md#customconfirmationmodal) durch einen benutzerdefinierten Dialog zu ersetzen +- Die Möglichkeit hinzufügen, das [Bestätigungsemodal für wiederkehrende Ereignisse](integrations/react/overview.md#customizingtherecurrenceconfirmationmodal) im [React Scheduler](integrations/react/overview.md) über die Modals.onRecurrenceConfirm-Prop zu ersetzen + + +7.2.11 +------------- +12. Januar 2026. Bugfix-Veröffentlichung + +### Fehlerbehebungen + +- Behebt das Problem, dass neue Ereignisse im [React Scheduler](integrations/react/overview.md) dupliziert wurden, falls der `save`-Handler keine neue ID zurückgab +- Behebt das Problem, dass [Timeline-Ansicht](views/timeline.md) Templates im [React Scheduler](integrations/react/overview.md) nicht angewendet wurden +- Behebt die inkorrekte Bindung von Ereignissen zu Abschnitten in der [Timeline-Ansicht](views/timeline.md), wenn Filterung in [React Scheduler](integrations/react/overview.md) verwendet wurde +- Behebt den Skriptfehler in der [Agenda-Ansicht](views/agenda.md), wenn der `date`-Bereich nicht in der [Header-Konfiguration](guides/initialization.md#initializing-scheduler-via-header-config) enthalten ist +- Behebt die falsche Anzeige von Header-Elementen in den Ansichten [Jahresansicht](views/year.md) und [Agenda-Ansicht](views/agenda.md) bei Verwendung der [Material-Skin](guides/skins.md#material-skin) +- Behebt das kaputte Layout im [React Scheduler](integrations/react/overview.md), wenn von einer plugin-basierten Anfangsansicht zu Standardansichten gewechselt wird +- Behebt das Problem, dass ein Phantom-Ereignisblock erschien, wenn ein ganztägiges [wiederkehrendes Ereignis](guides/recurring-events.md) eine Dauer von genau 24 Stunden hatte +- Behebt das Problem, dass die [Lightbox](guides/configuring-the-lightbox.md) nicht geöffnet wurde, wenn mehrere Ereignisse durch Draggen am selben Tag in der [Monatsansicht](views/month.md) mit aktiviertem `year_view`-Plugin erstellt wurden + + +7.2.10 +------------- +10. Dezember 2025. Bugfix-Veröffentlichung + +### Fehlerbehebungen + +- Behebt das Problem, dass Ereignisse beim Ziehen aus der letzten Spalte in der [Mehrtägige Units-Ansicht](views/units.md#displaying-units-for-multiple-days) nach links sprangen +- Behebt das Problem, dass in bestimmten Monaten einige Datum-Felder in der [Monatsansicht](views/month.md) fehlten +- Behebt das Drag-Create-Problem auf mobilen Geräten bei der Verwendung des Plugins [container_autoresize](guides/extensions-list.md#container-autoresize) +- Behebt das Problem, das die Erstellung von Ereignissen durch Doppelklick nach horizontalem Scrollen in der [Units-Ansicht](views/units.md) verhinderte + + +7.2.9 +--------------- +19. September 2025. Bugfix-Veröffentlichung + +### Fehlerbehebungen + +- Beheben von Speicherlecks, die in der [Timeline-Ansicht](views/timeline.md) auftraten +- Beheben eines Kompatibilitätsproblems zwischen dem [container_autoresize](guides/extensions-list.md#container-autoresize) Plugin und der [Woche Agenda](views/weekagenda.md)-Ansicht +- Beheben, dass der [onScaleDblClick](api/event/onscaledblclick.md) nicht wie erwartet ausgelöst wurde +- Beheben inkonsistenten Verhaltens von [onEventSave](api/event/oneventsave.md) und [DataProcessor](api/method/createdataprocessor.md) beim Arbeiten mit [wiederkehrenden Ereignissen](guides/recurring-events.md) +- Beheben des [React Scheduler](integrations/react/overview.md) Problems, bei dem mehrere Instanzen der Komponente duplizierte Vorlagen verursachten +- Beheben der fehlerhaften Behandlung von Änderungen der `events`-Prop im [React Scheduler](integrations/react/overview.md) + +## 7.2.8 + +30. Juli 2025. Bugfix-Veröffentlichung + +### Neu + +- Beispiele für [React Scheduler](integrations/react/overview.md) wurden in die Commercial-, Enterprise-, Ultimate- und Evaluation-Pakete aufgenommen + +### Fehlerbehebungen + +- Beheben des Problems, dass das Ziehen eines [wiederkehrenden Ereignisses](guides/recurring-events.md) nach dem Löschen seiner nachfolgenden Vorkommnisse falsch funktionierte +- Sicherstellen, dass die Steuerung "Repeat Event" des [Lightbox](guides/lightbox-editors.md) für modifizierte [Serieninstanzen](guides/recurring-events.md#editingdeleting-a-certain-occurrence-in-the-series) deaktiviert ist +- Beheben der falschen Anzeige veralteter Labels für [wiederkehrende Ereignisse](guides/recurring-events.md) +- Beheben des Konflikts zwischen der Einstellung [max_month_events](api/config/max_month_events.md) und [mehrtägigen Ereignissen](views/month.md), der dazu führte, dass Ereignisse verschwanden oder sich überlappeten in der [Monatsansicht](views/month.md) +- Sicherstellen, dass Cookies, die von Scheduler über HTTPS gesetzt werden, nun das Attribut **Secure** enthalten +- Beheben des Problems, dass die Einstellung [event_duration](api/config/event_duration.md) geparste Ereignisdaten beschädigte +- Beheben des Problems, dass die Einstellung [time_step](api/config/time_step.md) geparste Ereignisdaten beschädigte + + +## 7.2.6 + +26. Juni 2025. Bugfix-Veröffentlichung + +### Fehlerbehebungen + +- Beheben des Problems mit der Sekunden-Genauigkeit bei der Terminierung von Ereignissen +- Beheben des inkorrekten Drag-Verhaltens in der [Timeline-Ansicht](views/timeline.md) während kurzer Monate +- Beheben der inkorrekten Rundung von Ereignissen in der [Timeline-Ansicht](views/timeline.md) +- Verhindern, dass [DataProcessor](guides/server-integration.md) dem [custom router](guides/server-integration.md#custom-routing) Argumente die Eigenschaft `!nativeeditor_status` hinzufügt + ## 7.2.5 diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/api_overview.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/api_overview.md index 54a8c95a..88a9cfd1 100644 --- a/i18n/ko/docusaurus-plugin-content-docs/current/api/api_overview.md +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/api_overview.md @@ -445,18 +445,18 @@ description: You can explore an API overview in the documentation of the DHTMLX | Name | Description | |--------------------------------------------|---------------------------------------------| -| [](api/other/ajax.md) | @getshort(api/method/ajax_other.md) | -| [](api/other/config.md) | @getshort(api/method/config_other.md) | -| [](api/other/date.md) | @getshort(api/method/date_other.md) | -| [](api/other/env.md) | @getshort(api/method/env_other.md) | -| [i18n](api/other/i18n.md) | @getshort(api/method/i18n_other.md) | -| [](api/other/ical.md) | @getshort(api/method/ical_other.md) | -| [](api/other/json.md) | @getshort(api/method/json_other.md) | -| [](api/other/keys.md) | @getshort(api/method/keys_other.md) | -| [](api/other/locale.md) | @getshort(api/method/locale_other.md) | -| [](api/other/matrix.md) | @getshort(api/method/matrix_other.md) | -| [](api/other/skin.md) | @getshort(api/method/skin_other.md) | -| [](api/other/templates.md) | @getshort(api/method/templates_other.md) | -| [](api/other/tooltip.md) | @getshort(api/method/tooltip_other.md) | -| [](api/other/version.md) | @getshort(api/method/version_other.md) | -| [](api/other/xy.md) | @getshort(api/method/xy_other.md) | +| [](api/other/ajax.md) | @getshort(api/other/ajax.md) | +| [](api/other/config.md) | @getshort(api/other/config.md) | +| [](api/other/date.md) | @getshort(api/other/date.md) | +| [](api/other/env.md) | @getshort(api/other/env.md) | +| [](api/other/i18n.md) | @getshort(api/other/i18n.md) | +| [](api/other/ical.md) | @getshort(api/other/ical.md) | +| [](api/other/json.md) | @getshort(api/other/json.md) | +| [](api/other/keys.md) | @getshort(api/other/keys.md) | +| [](api/other/locale.md) | @getshort(api/other/locale.md) | +| [](api/other/matrix.md) | @getshort(api/other/matrix.md) | +| [](api/other/skin.md) | @getshort(api/other/skin.md) | +| [](api/other/templates.md) | @getshort(api/other/templates.md) | +| [](api/other/tooltip.md) | @getshort(api/other/tooltip.md) | +| [](api/other/version.md) | @getshort(api/other/version.md) | +| [](api/other/xy.md) | @getshort(api/other/xy.md) | diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/config/active_link_view.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/config/active_link_view.md index 244751c4..8416150b 100644 --- a/i18n/ko/docusaurus-plugin-content-docs/current/api/config/active_link_view.md +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/config/active_link_view.md @@ -17,7 +17,7 @@ description: "월간 보기에서 날짜 숫자를 클릭 가능한 링크로 ~~~jsx scheduler.config.active_link_view = "week"; // 월간 보기에서 이동할 뷰를 지정합니다. ... -scheduler.init('scheduler_here',new Date(2012,7,6),"month"); +scheduler.init('scheduler_here',new Date(2027,7,6),"month"); ~~~ **Default value:** day diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/config/agenda_end.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/config/agenda_end.md index 25e06ce5..6f89268b 100644 --- a/i18n/ko/docusaurus-plugin-content-docs/current/api/config/agenda_end.md +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/config/agenda_end.md @@ -15,10 +15,10 @@ description: "이벤트가 표시되는 종료 날짜를 정의합니다." ### Example ~~~jsx -scheduler.config.agenda_start = new Date(2012, 7, 1); -scheduler.config.agenda_end = new Date(2014, 7, 1); +scheduler.config.agenda_start = new Date(2025, 7, 1); +scheduler.config.agenda_end = new Date(2027, 7, 1); ... -scheduler.init('scheduler_here', new Date(2013, 0, 10), "agenda"); +scheduler.init('scheduler_here', new Date(2026, 0, 10), "agenda"); ~~~ **Default value:** 'agenda_start' 이후 1년 (값) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/config/agenda_start.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/config/agenda_start.md index 6114a2a5..1c716917 100644 --- a/i18n/ko/docusaurus-plugin-content-docs/current/api/config/agenda_start.md +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/config/agenda_start.md @@ -15,10 +15,10 @@ description: "이벤트가 표시되기 시작하는 날짜를 지정합니다." ### Example ~~~jsx -scheduler.config.agenda_start = new Date(2012, 7, 1); -scheduler.config.agenda_end = new Date(2014, 7, 1); +scheduler.config.agenda_start = new Date(2025, 7, 1); +scheduler.config.agenda_end = new Date(2027, 7, 1); ... -scheduler.init('scheduler_here', new Date(2010, 0, 10), "agenda"); +scheduler.init('scheduler_here', new Date(2026, 0, 10), "agenda"); ~~~ **Default value:** 현재 사용자의 날짜 diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/config/api_date.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/config/api_date.md index 69865786..334a7d23 100644 --- a/i18n/ko/docusaurus-plugin-content-docs/current/api/config/api_date.md +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/config/api_date.md @@ -17,7 +17,7 @@ description: "api_date 템플릿에서 사용되는 날짜 형 ~~~jsx scheduler.config.api_date="%Y-%m-%d %H:%i"; -scheduler.init("scheduler_here",new Date(2009,10,1),"week"); +scheduler.init("scheduler_here",new Date(2027,10,1),"week"); ~~~ **Default value:** "%d-%m-%Y %H:%i" diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/config/auto_end_date.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/config/auto_end_date.md index ac08e93d..84b69617 100644 --- a/i18n/ko/docusaurus-plugin-content-docs/current/api/config/auto_end_date.md +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/config/auto_end_date.md @@ -18,7 +18,7 @@ description: "시작 날짜가 조정될 때 이벤트의 종료 날짜를 자 scheduler.config.event_duration = 60; scheduler.config.auto_end_date = true; ... -scheduler.init('scheduler_here',new Date(2013,05,11),"week"); +scheduler.init('scheduler_here',new Date(2027,05,11),"week"); ~~~ **Default value:** false diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/config/buttons_right.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/config/buttons_right.md index a721ee76..c14d114f 100644 --- a/i18n/ko/docusaurus-plugin-content-docs/current/api/config/buttons_right.md +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/config/buttons_right.md @@ -24,7 +24,7 @@ description: "라이트박스의 오른쪽 하단에 위치한 버튼 세트를 + /*!*/ + +~~~ +2. 스케줄러의 데이터를 내보내기 위해 exportToExcel 메서드를 호출합니다: +~~~html +/*!*/ + + +~~~ + +#### export 메서드의 매개변수 + +The **exportToExcel()** 메서드는 매개변수로 여러 속성을 가진 객체를 받습니다(모든 속성은 선택 사항): + + + + + + + + + + + + + + + + + + + + + + + + +
name(string) 출력 파일의 이름으로 확장자 '.xlsx'가 붙습니다
columns(array) 출력 시트의 열을 구성합니다
  • 'id' - (string/number) 열에 매핑될 이벤트 속성의 id
  • 'header' - (string) 열의 헤더
  • 'width' - (number) 열의 너비(픽셀)
server(string) 요청의 API 엔드포인트를 설정합니다. 내보내기 서비스의 로컬 설치와 함께 사용할 수 있습니다. 기본 값은 https://export.dhtmlx.com/scheduler입니다
start(string|object) 출력에 표시될 데이터 범위의 시작 날짜를 설정합니다
end(string|object) 출력에 표시될 데이터 범위의 종료 날짜를 설정합니다
+ + +선택적 속성으로 내보내기 메서드 호출: +~~~js +scheduler.exportToExcel({ + name:"My document.xls", + columns:[ + { id:"text", header:"Title", width:150 }, + { id:"start_date", header:"Start date", width:250 } + ], + server:"https://myapp.com/myexport/scheduler", + start: new Date(1999, 01, 01), + end: new Date(2027, 01, 01) +}); +~~~ + +#### 날짜 형식 설정 + +Excel 파일로 내보낼 날짜 형식을 지정하려면 xml_format 템플릿을 사용합니다: + +~~~js +scheduler.templates.xml_format = scheduler.date.date_to_str("%Y-%m-%d %H:%i"); +~~~ + +**관련 샘플** [날짜 형식 설정](https://snippet.dhtmlx.com/5/6d3de8fa2) + +날짜 형식 규격은 [여기](guides/settings-format.md)에서 확인하십시오. + +## iCal로 내보내기 + +스케줄러의 데이터를 iCal 문자열로 내보내려면 다음 단계를 수행합니다: + +- 온라인 내보내기 서비스 기능을 활성화하려면 페이지에 "https://export.dhtmlx.com/scheduler/api.js" 파일을 포함하세요: +~~~html + + /*!*/ + +~~~ + +- 스케줄러의 데이터를 iCal로 내보내려면 exportToICal 메서드를 호출합니다: + +~~~html +/*!*/ + + +~~~ + +#### export 메서드의 매개변수 + +The **exportToICal()** 메서드는 다음 속성(선택 사항)을 가진 객체를 매개변수로 받습니다: + + + + + + + + +
server(string) 요청의 API 엔드포인트를 설정합니다. 내보내기 서비스의 로컬 설치와 함께 사용할 수 있습니다. 기본 값은 https://export.dhtmlx.com/scheduler입니다
+ + +선택적 속성으로 내보내기 메서드 호출: +~~~js +scheduler.exportToICal({ + server:"https://myapp.com/myexport/scheduler" +}); +~~~ \ No newline at end of file diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/export/index.md b/i18n/ko/docusaurus-plugin-content-docs/current/export/index.md new file mode 100644 index 00000000..1f769d95 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/export/index.md @@ -0,0 +1,12 @@ +--- +title: "데이터 내보내기 및 가져오기" +sidebar_label: "데이터 내보내기 및 가져오기" +--- + +# 데이터 내보내기 및 가져오기 + +- [Google Calendar와의 통합](integrations/google-calendar/google-calendar-sync.md) +- [PDF로 내보내기](export/pdf.md) +- [PNG로 내보내기](export/png.md) +- [Excel 및 iCal로 내보내기](export/excel.md) +- [XML, JSON 및 iCal로의 데이터 직렬화](export/serialization.md) \ No newline at end of file diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/export/pdf-legacy.md b/i18n/ko/docusaurus-plugin-content-docs/current/export/pdf-legacy.md new file mode 100644 index 00000000..4050e46a --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/export/pdf-legacy.md @@ -0,0 +1,210 @@ +--- +title: "PDF로 내보내기 (v4.0)" +sidebar_label: "PDF로 내보내기 (v4.0)" +--- + +# PDF로 내보내기 (버전 4.0) + +*이 문서는 dhtmlxScheduler 4.0 또는 그 이전 버전의 내보내기를 다룹니다. dhtmlxScheduler 4.1+를 사용하는 경우 아래의 내용을 확인하십시오 [here](export/pdf.md).* + +버전 4.1부터 dhtmlxScheduler는 PDF 형식으로 스케줄러를 내보내는 새로운 방법을 제공합니다 - [온라인 내보내기 서비스](export/pdf.md#default-export-to-pdf). + +## 설치 + +패키지의 PHP 버전: [https://github.com/DHTMLX/scheduler-to-pdf-php](https://github.com/DHTMLX/scheduler-to-pdf-php) + +패키지의 Java 버전: [https://github.com/DHTMLX/scheduler-to-pdf-java](https://github.com/DHTMLX/scheduler-to-pdf-java) + +패키지의 .NET 버전: [https://github.com/DHTMLX/scheduler-to-pdf-net](https://github.com/DHTMLX/scheduler-to-pdf-net) + + +[Export to PDF [Legacy]](https://docs.dhtmlx.com/scheduler/samples/04_export/05_standalone_export.html) + + +## 필요한 포함 파일 + +스케줄러 페이지에서 아래 확장을 한 가지 더 활성화합니다: + +~~~js +scheduler.plugins({ + pdf: true +}); +~~~ + + +## 내보내기 트리거 + +스케줄러 데이터를 PDF로 내보내려면 페이지에 버튼을 하나 추가하면 되며, 이 버튼은 **toPDF()** 메서드를 호출합니다. **toPDF()** 메서드의 매개변수는 이전에 설치된 스크립트의 URL입니다: + +~~~html + + +~~~ + + +## 서비스 구성 + +내보내기 옵션을 구성하려면 클라이언트 측과 서버 측을 모두 다루어야 합니다. + +### 클라이언트 측 + +앞에서 언급했듯이 내보내기 활성화를 위해서는 **toPDF()** 메서드를 사용해야 합니다: + +~~~js +scheduler.toPDF(path, color, header, footer); + +~~~ + +**매개변수:** + + +- _**path**_ - (_url_) PDF 파일을 생성하는 PHP 파일의 경로. 아래의 세부 정보를 참고하십시오 [아래](export/pdf.md#using-export-services). +- _**color**_ - (_'color', 'gray', 'bw', 'custom', 'fullcolor'_) 컬맷맵(colormap)을 지정합니다. + * '_color_' - 전체 색상 인쇄, 기본값. + * '_gray_' - 흑백 음영으로 인쇄합니다. + * '_bw_' - 흑백 색상만 사용합니다. + * '_custom_' - 사용자 정의 컬맷맵을 활성화하는 데 사용할 수 있습니다( PHP 코딩 필요, 아래 참조 참조). + * '_fullcolor_' - 내보내는 동안 실제 배경 및 텍스트 색상. +- _**header**_ - (_boolean_, optional) 페이지에 헤더를 추가할지 여부를 정의합니다. 기본값은 _false_입니다. 아래의 세부 정보를 참고하십시오. +- _**footer**_ - (_boolean_, optional) 페이지에 푸터를 추가할지 여부를 정의합니다. 기본값은 _false_입니다. + + 아래의 세부 정보를 참조하십시오: export/pdf.md#headerfooter-of-the-output-file + +따라서 HTML 페이지에 매개변수의 적절한 개수로 **toPDF()** 메서드를 호출하는 코드 한 줄을 추가합니다. 예를 들면 다음과 같습니다: + +~~~js +scheduler.toPDF('path/to/folder/generate.php','gray'); + +~~~ + + +## 서버 측 + +위의 코드 조각에서 _generate.php_는 내보내기 옵션을 정의하는 PHP 파일입니다. + + +가장 간단한 파일 예시는 다음과 같습니다: + +~~~php +$scPDF = new schedulerPDF(); +$scPDF->printScheduler($xml); + +~~~ + + +그러나 **printScheduler()** 메서드를 실행하기 전에 사용자 정의 구성 옵션을 적용할 수 있습니다: + +**요소 크기(Size of elements):** + +~~~php +// the height of the header of the day container in the month mode +$scPDF->monthDayHeaderHeight = 6; + // the height of the header in the month mode +$scPDF->monthHeaderHeight = 8; + // the height of the month name container in the year mode +$scPDF->yearMonthHeaderHeight = 8; + // height of the row in the agenda mode +$scPDF->agendaRowHeight = 6; + // the height of the header in the day and week mode +$scPDF->dayTopHeight = 6; + // the width of the left scale in the day and week mode +$scPDF->dayLeftWidth = 16; + +~~~ + + +**글꼴 크기(Font size):** + +~~~php + // font size settings +$scPDF->monthHeaderFontSize = 9; +$scPDF->monthDayHeaderFontSize = 8; +$scPDF->monthEventFontSize = 7; +$scPDF->yearHeaderFontSize = 8; +$scPDF->yearFontSize = 8; +$scPDF->agendaFontSize = 8; +$scPDF->dayHeaderFontSize = 7; +$scPDF->dayScaleFontSize = 8; +$scPDF->dayEventHeaderFontSize = 7; +$scPDF->dayEventBodyFontSize = 7; +$scPDF->todayFontSize = 11; + +~~~ + + +**커스텀 색상(Custom colors)** (클라이언트 측에서 'custom' 값을 컬맷맵 이름으로 사용해야 함): + +~~~php +$scPDF->lineColor = '586A7E'; +$scPDF->bgColor = 'C2D5FC'; +$scPDF->dayHeaderColor = 'EBEFF4'; +$scPDF->dayBodyColor = 'FFFFFF'; +$scPDF->dayHeaderColorInactive = 'E2E3E6'; +$scPDF->dayBodyColorInactive = 'ECECEC'; +$scPDF->headerTextColor = '2F3A48'; +$scPDF->textColor = '2F3A48'; +$scPDF->eventTextColor = '887A2E'; +$scPDF->eventBorderColor = 'B7A543'; +$scPDF->eventColor = 'FFE763'; +$scPDF->todayTextColor = '000000'; +$scPDF->scaleColorOne = 'FCFEFC'; +$scPDF->scaleColorTwo = 'DCE6F4'; +$scPDF->yearDayColor = 'EBEFF4'; +$scPDF->yearDayColorInactive = 'd6d6d6'; + +~~~ + +**헤더와 푸터(Header and Footers):** + +~~~php +// the height of the header +$scPDF->headerImgHeight = 40; +// the height of the footer +$scPDF->footerImgHeight = 40; +// the path to the header image +$scPDF->headerImg = './header.png'; +// the path to the footer image +$scPDF->footerImg = './footer.png'; +~~~ + + +## 헤더 및 푸터 + +각 페이지에 대해 커스텀 헤더와 푸터를 정의하는 것이 가능합니다. + +이를 달성하려면 다음 단계를 수행하십시오: + + ++ "_header.png_" 와 "_footer.png_" 이름의 이미지를 만듭니다. ++ 생성된 이미지를 _generate.php_가 있는 같은 폴더로 복사합니다. ++ 클라이언트 측에서 코드의 호출을 다음과 같이 변경합니다: + + +~~~js +scheduler.toPDF(url, "color", true, true); + +~~~ + +그 결과, 생성된 PDF 파일의 모든 페이지에 헤더와 푸터로 사용될 "_header.png_" 및 "_footer.png_" 이미지가 표시됩니다. + +## 오류 보고(Error reporting) + +PDF 파일의 출력이 실패하면 "error_report_xxxx.xml"이라는 파일이 있어야 합니다. 이 파일을 버그 리포트와 함께 보내 주십시오. + +출력이 실패하지는 않지만 여전히 문제가 있을 경우, _generate.php_를 편집하고 아래를 변경할 수 있습니다: + +~~~php +$debug = false; + +~~~ + +를 + +~~~php +$debug = true; + +~~~ + +로 바꿉니다. 그러면 새로운 파일이 저장됩니다. 파일은 "debug_xxxxx.xml"과 같이 불리고, 관련 오류 보고서와 함께 보내 주십시오. \ No newline at end of file diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/export/pdf-multi.md b/i18n/ko/docusaurus-plugin-content-docs/current/export/pdf-multi.md new file mode 100644 index 00000000..084a5adb --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/export/pdf-multi.md @@ -0,0 +1,42 @@ +--- +title: "다중 페이지를 PDF로 내보내기" +sidebar_label: "다중 페이지를 PDF로 내보내기" +--- + +# 다중 페이지를 PDF로 내보내기 + +라이브러리는 한 번에 여러 뷰 페이지를 PDF 문서로 내보낼 수 있는 특수한 메서드를 제공합니다. + + +~~~js +scheduler.toPDFRange(from, to, view, path, scheme); + +~~~ + + + ++ _**from**_ - (_Date 객체_) 내보내기를 시작할 이벤트 날짜 ++ _**to**_ - (_Date 객체_) 내보내기를 종료할 날짜 ++ _**view**_ - (_string_) 내보내기를 적용할 뷰 ++ _**path**_ - (_URL_) PDF 파일을 생성하는 PHP 파일의 경로. 자세한 내용은 챕터 ['Export to PDF. Configuring service'](export/pdf.md#using-export-services) 참고 ++ _**color**_ - (_'color', 'gray', 'bw', 'custom', 'fullcolor'_) 현재 사용 중인 컬러 맵을 지정합니다 + + +1. '_color_' - 풀 컬러 인쇄, 기본값 +2. '_gray_' - 흑백 색조로 인쇄 +3. '_bw_' - 흑백 색상만 사용 +4. '_custom_' - 사용자 정의 컬러 맵을 활성화하는 데 사용할 수 있습니다( PHP 코딩 필요, 자세한 내용은 챕터 ['Export to PDF. Configuring service'](export/pdf.md#using-export-services) 참고) +5. '_fullcolor_' - 내보내는 동안 실제로 사용되는 배경색 및 텍스트 색상 + +예를 들어, 2027년 1월 1일부터 2027년 2월 1일까지의 기간에 걸쳐 'week' 뷰의 페이지를 내보내려면 다음과 같이 메서드를 호출할 수 있습니다: + + +~~~js +scheduler.toPDFRange( + new Date(2027,0,1), + new Date(2027, 1,1), + 'week', + 'generate.php', + 'fullcolor' +); +~~~ \ No newline at end of file diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/export/pdf.md b/i18n/ko/docusaurus-plugin-content-docs/current/export/pdf.md new file mode 100644 index 00000000..e15d5d08 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/export/pdf.md @@ -0,0 +1,202 @@ +--- +title: "PDF로 내보내기" +sidebar_label: "PDF로 내보내기" +--- + +# PDF로 내보내기 + +*이 문서는 dhtmlxScheduler 4.1+의 PDF 내보내기에 대해 다룹니다. 만약 dhtmlxScheduler 4.0 또는 그 이전 버전을 사용 중이라면 자세한 내용은 [여기](export/pdf-legacy.md)를 참조하십시오.* + + +버전 4.1부터, dhtmlxScheduler는 스케줄러를 PDF 형식으로 내보내는 새로운 접근 방식인 [온라인 내보내기 서비스](export/pdf.md#default-export-to-pdf)를 제공합니다. + + +:::info +서비스는 무료이지만, 출력된 PDF 파일에는 GPL 라이선스 아래 라이브러리 워터마크가 포함됩니다. 라이선스를 구입하는 경우, 유효한 지원 기간(모든 PRO 라이선스에 대해 12개월) 동안 워터마크 없이 내보내기 결과를 사용할 수 있습니다. +::: + +## 내보내기 서비스 사용하기 + +다양한 내보내기 서비스가 제공됩니다. 이를 컴퓨터에 설치하고 Scheduler를 로컬에서 PDF로 내보낼 수 있습니다. + +내보내기 서비스는 Scheduler 패키지에 포함되어 있지 않다는 점에 유의하십시오. 각 서비스의 이용 약관을 확인하려면 [해당 문서](https://dhtmlx.com/docs/products/dhtmlxScheduler/export.shtml)를 읽으십시오. + + +## 요청 크기 제한 + +공통 API 엔드포인트 `https://export.dhtmlx.com/scheduler`가 있으며, 이 엔드포인트는 `exportToPDF()` 및 `exportToPNG()`와 같은 내보내기 메서드를 제공합니다. 최대 요청 크기는 10 MB입니다. + + +## 기본 PDF 내보내기 + +스케줄러를 PDF 문서로 내보내려면 아래 단계를 완료하십시오: + +- 온라인 내보내기 서비스를 사용하려면 [`plugins()`](api/method/plugins.md) 메서드를 통해 `export_api` 플러그인을 활성화하십시오: + +~~~js +scheduler.plugins({ + export_api: true +}); +~~~ + +:::note +Scheduler 버전이 7.0 미만인 경우 온라인 내보내기 서비스를 활성화하려면 페이지에 `https://export.dhtmlx.com/scheduler/api.js` 파일을 포함해야 합니다. 예: + +~~~html + + +~~~ +::: + +- 스케줄러를 PDF로 내보내려면 [`exportToPDF()`](#parameters-of-the-export-method) 메서드를 호출하십시오: + +~~~html {1} + +~~~ + + +### 관련 샘플 +- [Export to PDF/PNG](https://docs.dhtmlx.com/scheduler/samples/04_export/06_online_export.html) + + +## 내보내기 메서드의 매개변수 + +[`exportToPDF()`](api/method/exporttopdf.md) 메서드는 여러 속성을 가진 객체를 매개변수로 받습니다. 모든 속성은 선택적입니다: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
name(string) 출력 파일의 이름
format('A0', 'A1', 'A2', 'A3', 'A4', 'A5') 출력 PDF 이미지의 형식
orientation('portrait', 'landscape') 출력 PDF 이미지의 방향을 설정
zoom(number) 출력 PDF 이미지의 확대 계수를 설정
header(string) 출력 PDF 이미지에 추가될 헤더를 지정합니다. 주의: 여기에는 HTML을 자유롭게 사용할 수 있습니다
footer(string) 출력 PDF 이미지에 추가될 푸터를 지정합니다. 주의: 여기에는 HTML을 자유롭게 사용할 수 있습니다
server(string) 요청의 API 엔드포인트를 설정합니다. 로컬에 설치된 내보내기 서비스와 함께 사용할 수 있습니다. 기본값은 https://export.dhtmlx.com/scheduler
additional_settings(object) 추가 설정이 포함된 객체. 객체는 다음 속성을 가질 수 있습니다:
  • format - (string) 출력 파일의 형식: 'A3', 'A4', 'A5', 'Legal', 'Letter', 'Tabloid'
  • landscape - (boolean) 출력 파일의 세로/가로 방향. 이 속성은 "format" 속성이 지정될 때만 작동합니다.
  • width - (string|number|"content") 출력 페이지의 너비. 이 속성은 여러 페이지를 내보낼 때 사용됩니다.
  • height - (string|number|"content") 출력 페이지의 높이. 이 속성은 여러 페이지를 내보낼 때 사용됩니다.
+ +### 선택적 속성으로 내보내기 메서드 호출하기 +~~~js +scheduler.exportToPDF({ + name: "myscheduler.pdf", + format: "A4", + orientation: "portrait", + zoom: 1, + header: "

My company

", + footer: "

Bottom line

", + server: "https://myapp.com/myexport/scheduler" +}); +~~~ + + +## 출력 파일의 이름 + +출력 파일의 이름을 사용자가 지정하려면 [`exportToPDF()`](export/pdf.md#parameters-of-the-export-method) 메서드 매개변수의 `name` 속성을 사용합니다: + +~~~js {2} +scheduler.exportToPDF({ + name: "my_beautiful_scheduler.pdf" +}); +~~~ + + +## 출력 파일의 헤더/푸터 + +출력 PDF 파일에 헤더/푸터를 추가하려면 매개변수의 `header`/`footer` 속성을 사용합니다: + +:::note +참고: 매개변수를 지정할 때 임의의 HTML을 사용할 수 있습니다. 이미지를 지정할 때는 `src` 속성의 경로를 전역 경로로 설정해야 한다는 점을 기억하십시오. +::: + +~~~js {3-4} +scheduler.exportToPDF({ + name: "myscheduler.pdf", + header: "

My company

", + footer: "

Bottom line

" +}); +~~~ + + +## 출력 파일의 커스텀 스타일 + +스케줄러에 대해 사용자 정의 CSS 클래스로 스타일을 적용하려면 스타일시트를 제공하십시오: + +- 링크를 통해: + +~~~js {3} +scheduler.exportToPDF({ + name: "calendar.pdf", + header: '' +}); +~~~ + +- 또는 'style' 태그를 통해: + +~~~js {3} +scheduler.exportToPDF({ + name: "calendar.pdf", + header: '' +}); +~~~ + + +위에서 언급한 솔루션은 전역 HTTP 참조에 대해 작동합니다. 내부망(Intranet) 또는 로컬 환경에서 CSS 클래스를 지정하는 경우, 모든 스타일을 아래와 같이 삽입할 수 있습니다: + +~~~js +scheduler.exportToPDF({ + header: "" +}); +~~~ + + +## HTML 요소 내보내기 + +Scheduler를 PDF 형식으로 내보내는 동안, HTML 요소의 내보내기는 보안상의 이유로 제한될 수 있습니다. + +일부 HTML 요소는 완전히 내보내기에 허용되지 않으며, 예로는 ``, ``, `` 요소를 사용할 수 있습니다( PNG 및 JPG 형식에 적합하지만 Base64 형식에는 작동하지 않음), 예: + +~~~html + +~~~ + +- 스타일 요소를 사용하고, 예를 들어 `background` 또는 `background-image`를 사용하며, 이미지의 URL 또는 Base64 형식의 이미지를 값으로 하는 `url` 속성을 지정할 수 있습니다( PNG/JPG/SVG 형식에 적합). + +~~~css +.red { + background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABmJLR0QA/wD/AP+gvaeTAAAAB3RJTUUH1ggDCwMADQ4NnwAAAFVJREFUGJWNkMEJADEIBEcbSDkXUnfSgnBVeZ8LSAjiwjyEQXSFEIcHGP9oAi+H0Bymgx9MhxbFdZE2a0s9kTZdw01ZhhYkABSwgmf1Z6r1SNyfFf4BZ+ZUExcNUQUAAAAASUVORK5CYII=") 100%/contain no-repeat; + display: inline-block; + width: 32px; + height: 32px; +} +~~~ + + +만약 내보내기 모듈이 있고 온라인 내보내기 서버에서 지원되지 않는 HTML 요소를 내보내야 하는 경우, 제한을 제거하기 위한 모듈 변경에 대한 지침을 받으려면 지원 요청을 제출할 수 있습니다. 다만 이 경우 서버가 XSS 공격에 취약해질 수 있다는 점을 염두에 두어야 합니다. \ No newline at end of file diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/export/png.md b/i18n/ko/docusaurus-plugin-content-docs/current/export/png.md new file mode 100644 index 00000000..537ddb01 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/export/png.md @@ -0,0 +1,179 @@ +--- +title: "PNG로 내보내기" +sidebar_label: "PNG로 내보내기" +--- + +# PNG로 내보내기 + +버전 4.1부터 dhtmlxScheduler는 [온라인 내보내기 서비스](export/png.md#default-export-to-png)를 제공하여 스케줄러를 PNG 형식으로 내보낼 수 있습니다. + +:::info +서비스는 무료이지만, 출력 PNG 파일에는 GPL 라이선스에 따른 라이브러리 워터마크가 포함됩니다. 라이선스를 구매하시면 유효한 지원 기간(모든 PRO 라이선스의 경우 12개월) 동안 워터마크 없이 내보내기 결과를 사용할 수 있습니다. +::: + +## 내보내기 서비스 사용하기 + +여러 내보내기 서비스가 있습니다. 로컬 컴퓨터에 설치한 뒤 Scheduler를 PNG로 로컬 내보내기가 가능합니다. + +내보내기 서비스는 Scheduler 패키지에 포함되어 있지 않습니다. 각 서비스의 이용 약관을 알아보려면 해당 기사([corresponding article](https://dhtmlx.com/docs/products/dhtmlxScheduler/export.shtml))를 읽으세요. + +## 요청 크기 제한 + +공통 API 엔드포인트 **https://export.dhtmlx.com/scheduler** 는 내보내기 방법들(exportToPDF, exportToPNG 등)을 제공합니다. **최대 요청 크기 10 MB**입니다. + +## 기본 PNG 내보내기 + +스케줄러를 PNG 이미지로 내보내려면 다음 단계를 따라야 합니다: + +- 온라인 내보내기 서비스를 사용하려면 [plugins](api/method/plugins.md) 방법을 통해 export_api 플러그인을 활성화하세요: + +~~~js +scheduler.plugins({ + export_api: true +}); +~~~ + +:::note +Scheduler 버전이 7.0 미만인 경우, 온라인 내보내기 서비스를 활성화하려면 페이지에 https://export.dhtmlx.com/scheduler/api.js 파일을 포함해야 합니다. 예를 들면: + +~~~js + + +~~~ +::: + +- 스케줄러를 PNG로 내보내려면 exportToPNG 메서드를 호출하세요: + +~~~html +/*!*/ +~~~ + +[Export to PDF/PNG](https://docs.dhtmlx.com/scheduler/samples/04_export/06_online_export.html) + +## export 메서드의 매개변수 + +[exportToPNG()](api/method/exporttopng.md) 메서드는 여러 속성을 가진 객체를 매개로 받습니다(모든 속성은 선택적입니다): + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
name(string) 출력 파일의 이름
format('A0', 'A1', 'A2', 'A3', 'A4', 'A5') 출력 PNG 이미지의 형식 orientation('portrait', 'landscape') 출력 PNG 이미지의 방향을 설정합니다
zoom(number) 출력 PNG 이미지의 확대 계수를 설정합니다
header(string) 출력 PNG 이미지에 추가될 머리글을 지정합니다. 여기서는 임의의 HTML을 사용할 수 있습니다
footer(string) 출력 PNG 이미지에 추가될 바닥글을 지정합니다. 여기서는 임의의 HTML을 사용할 수 있습니다
server(string) 요청의 API 엔드포인트를 설정합니다. 로컬로 내보내기 서비스를 설치한 경우에도 사용할 수 있습니다. 기본값은 https://export.dhtmlx.com/scheduler
+ +옵션 속성으로 export 메서드 호출: +~~~js +scheduler.exportToPNG({ + format:"A4", + orientation:"portrait", + zoom:1, + header:"

My company

", + footer:"

Bottom line

", + server:"https://myapp.com/myexport/scheduler" +}); +~~~ + +## 출력 파일의 이름 + +출력 파일에 대해 사용자 정의 이름을 설정하려면 [exportToPNG](export/png.md#parameters-of-the-export-method) 메서드에서 **name** 속성을 사용하세요: + +~~~js +scheduler.exportToPNG({ + name:"my_beautiful_scheduler.png"/*!*/ +}); +~~~ + +## 출력 파일의 Header/Footer + +출력 PNG 파일에 header/footer를 추가하려면 [exportToPNG](export/png.md#parameters-of-the-export-method) 메서드의 **header**/**footer** 속성을 사용하세요: + +:::note +참고, 매개변수를 지정할 때 임의의 HTML을 사용할 수 있습니다. 이미지를 지정할 때는 "src" 속성의 경로를 전역 경로로 설정해야 한다는 점을 기억하세요. +::: + +~~~js +scheduler.exportToPNG({ + name:"myscheduler.png", + header:"

My company

", + footer:"

Bottom line

" +}); +~~~ + +## 출력 파일의 커스텀 스타일 + +스케줄러에 사용자 정의 스타일을 적용하려면, 사용자 정의 CSS 클래스를 포함한 스타일시트를 제공하세요: + +- 링크를 통해: + +~~~js +scheduler.exportToPNG({ + name:"calendar.png", + header:'' /*!*/ +}); +~~~ + +- 또는 'style' 태그를 통해: + +~~~js +scheduler.exportToPNG({ + name:"calendar.png", + header:'' /*!*/ +}); +~~~ + +참고: 앞서 언급한 솔루션은 전역 HTTP 참조에 대해 작동합니다. 사내(Intranet) 또는 로컬 환경에서 CSS 클래스를 지정한 경우에도 모든 스타일을 내장시키는 방식으로 사용할 수 있습니다: + +~~~js +scheduler.exportToPNG({ + header:"" +}); +~~~ + +## HTML 요소 내보내기 + +스케줄러를 PNG 형식으로 내보낼 때, HTML 요소의 내보내기는 보안상의 이유로 제한될 수 있습니다. + +내보낼 수 없는 요소로는 예를 들면 ``, ``, ` 요소의 src 속성을 사용할 수 있습니다(PNG 및 JPG 형식에 적합하지만 Base64 형식에는 작동하지 않음), 예: + +~~~html + +~~~ + +- 스타일 요소를 사용하고, background 또는 background-image 와 같은 속성을 사용하여 이미지의 URL이나 Base64 형식의 이미지를 값으로 지정할 수 있습니다( PNG/JPG/SVG 형식에 적합) + +~~~css +.red { + background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABmJLR0QA/wD/AP+gvaeTAAAAB3RJTUUH1ggDCwMADQ4NnwAAAFVJREFUGJWNkMEJADEIBEcbSDkXUnfSgnBVeZ8LSAjiwjyEQXSFEIcHGP9oAi+H0Bymgx9MhxbFdZE2a0s9kTZdw01ZhhYkABSwgmf1Z6r1SNyfFf4BZ+ZUExcNUQUAAAAASUVORK5CYII=") 100%/contain no-repeat; + display: inline-block; + width: 32px; + height: 32px; +} +~~~ + +웹 서버에 의해 허용되지 않는 HTML 요소를 온라인 내보내기 서버에서 내보내야 하는 경우, 모듈에 대한 지원 요청을 제출하여 제한을 제거하기 위해 필요한 변경에 대한 안내를 받을 수 있습니다. 다만 이 경우 서버가 XSS 공격에 취약해질 수 있다는 점을 감안해야 합니다. \ No newline at end of file diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/export/serialization.md b/i18n/ko/docusaurus-plugin-content-docs/current/export/serialization.md new file mode 100644 index 00000000..f8331ea4 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/export/serialization.md @@ -0,0 +1,181 @@ +--- +title: "XML, JSON, iCal으로의 데이터 직렬화" +sidebar_label: "XML, JSON, iCal으로의 데이터 직렬화" +--- + +# XML, JSON, iCal으로의 데이터 직렬화 + +## 준비하기 + +이러한 기능을 활성화하려면 **serialize** 확장을 활성화하십시오. + +~~~js +scheduler.plugins({ + serialize: true +}); +~~~ + +## XML로 내보내기 + +스케줄러 데이터를 XML 문자열로 직렬화하려면 [toXML](api/method/toxml.md) 메서드를 사용하십시오: + +~~~js +const xml = scheduler.toXML(); //xml string + +~~~ + +[스케줄러 이벤트 직렬화](https://docs.dhtmlx.com/scheduler/samples/04_export/01_serialize_data.html) + +## JSON으로 내보내기 + +스케줄러 데이터를 JSON 문자열로 직렬화하려면 [toJSON](api/method/tojson.md) 메서드를 사용하십시오: + + +~~~js +const json_string = scheduler.toJSON(); //json string +~~~ + + +:::note +참고, 이 메서드는 JSON 문자열을 반환하며 객체가 아닙니다. JSON 객체가 필요하면 [getEvents](api/method/getevents.md) 메서드를 사용하십시오. +::: + +[스케줄러 이벤트 직렬화](https://docs.dhtmlx.com/scheduler/samples/04_export/01_serialize_data.html) + + +## iCal로 내보내기 + +스케줄러 데이터를 ICal 문자열로 직렬화하려면 [toICal](api/method/toical.md) 메서드를 사용하십시오: + + +~~~js +const ical_string = scheduler.toICal(); //ical string +~~~ + + +또한, iCal 가져오기-내보내기 작업용 외부 스크립트가 있습니다. [external script for iCal import-export operations](guides/ical-export-import.md) + +[스케줄러 이벤트 직렬화](https://docs.dhtmlx.com/scheduler/samples/04_export/01_serialize_data.html) + + +## 직렬화의 속성 + +:::note +다음 기술은 iCal 형식에는 적용되지 않습니다. +::: + +기본적으로 내보내기는 표준 속성(프로퍼티)만 포함합니다: + +1. id +2. text +3. start_date (*직렬화 형식은 [date_format](api/config/date_format.md) 속성에 의해 정의됩니다*) +4. end_date + +만약 일부 사용자 정의 속성을 포함해야 한다면 **data_attributes** 메서드를 재정의할 수 있습니다. 가장 단순한 경우에는 아래와 같이 보입니다: + +~~~js +scheduler.data_attributes = function(){ + return [ + ["id"],["text"],["date_start"],["date_end"], + ["custom_attribute"] + ]; +}; +~~~ + +대체로, 이 메서드는 속성 이름의 목록을 정의합니다. + +그러나 직렬화되기 전에 속성 데이터가 어떻게 처리되어야 하는지 설명하는 서식 지정 함수(formatting function)을 정의할 수도 있습니다. + +XML에 배치되기 전에 날짜를 변환해야 하는 경우에 유용할 수 있습니다 + +~~~js +scheduler.data_attributes = function(){ + return [ + ["id"], + ["text"], + ["start_date",scheduler.templates.format_date], + ["end_date",scheduler.templates.format_date]]; +} +~~~ + +## 반복 이벤트의 직렬화 + +:::note +다음 기술은 iCal 형식에는 적용되지 않습니다. +::: + +만약 "recurring" 확장을 사용 중이라면 반복 이벤트에서 사용되는 추가 속성을 정의해야 합니다: + +~~~js +scheduler.data_attributes = function(){ + const empty = function(a){ return a||""; } + return [["id"], + ["text"], + ["start_date",scheduler.templates.xml_format], + ["end_date",scheduler.templates.xml_format], + ["rec_type",empty], + ["event_length",empty], + ["event_pid",empty]]; +} +~~~ + +## XML 파일에 데이터 저장 + +직렬화를 통해 DB 없이도 데이터를 저장하는 간단한 루틴을 구현할 수 있습니다. + +- 먼저 우선 **serialize** 확장을 활성화합니다: + +~~~js +scheduler.plugins({ + serialize: true +}); +~~~ + + +- 그런 다음, 페이지에 데이터 저장용 숨겨진 폼을 배치합니다: + +~~~xml +
+ +
+~~~ + + +- 페이지에 "Save" 버튼을 배치합니다 + +~~~html + + +~~~ + + +~~~js +function save(){ + let form = document.getElementById("xml_form"); + form.elements.data.value = scheduler.toXML(); + form.submit(); +} +~~~ + + +- 서버 측에서 데이터를 기존 파일에 작성합니다. xml_writer.php는 아래와 같이 될 수 있습니다: + +~~~php + +~~~ + + +빈 data.xml은: + +~~~xml + +~~~ + + +이제 scheduler를 data.xml에서 로드할 수 있으며, "save" 버튼을 누르면 현재 스케줄러 상태가 XML로 직렬화되어 파일에 다시 저장됩니다. 따라서 다음 로딩 시점에는 이전에 저장된 이벤트가 로드됩니다. + +## 문제 해결 + +데이터 저장 중 원치 않는 데이터 이스케이프가 발생하는 경우, php 구성에서 "magic_quotes"가 비활성화되어 있는지 확인하십시오. \ No newline at end of file diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/backbone-integration.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/backbone-integration.md deleted file mode 100644 index 08d6c374..00000000 --- a/i18n/ko/docusaurus-plugin-content-docs/current/guides/backbone-integration.md +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: "Backbone 통합" -sidebar_label: "Backbone 통합" ---- - -# Backbone 통합 - -버전 4.0부터, 라이브러리는 스케줄러와 Backbone 라이브러리의 원활한 통합을 가능하게 하는 전용 확장 [**mvc**](guides/extensions-list.md#mvc)를 제공합니다. - -Backbone을 기반으로 구축된 애플리케이션에서 스케줄러를 도입하되, 데이터 관리는 Backbone을 통해 계속하고자 하는 경우 다음과 같은 접근 방식을 사용할 수 있습니다: - -1. dhtmlxScheduler 파일을 애플리케이션에 추가합니다: -~~~js - - -~~~ -2. 페이지에서 mvc 확장을 활성화합니다: -~~~js -scheduler.plugins({ - mvc: true -}); -~~~ -3. 일반적으로 스케줄러를 설정하고 초기화합니다: -~~~js -scheduler.full_day = true; - -scheduler.init("scheduler_here",new Date(2019,0,6),"month"); -~~~ -4. 다음으로, Backbone 데이터 컬렉션을 생성하고 스케줄러와 연결합니다: -~~~js -//여기서 어떤 모델이든 사용할 수 있습니다 -MyEvent = Backbone.Model.extend({}); -EventList = Backbone.Collection.extend({ - model:MyEvent, - url:"./data/backbone.json" -}); -events = new EventList(); - - -scheduler.backbone(events); //컬렉션에 스케줄러를 연결 -~~~ - -모든 설정이 완료되면, 스케줄러는 컬렉션에서 데이터를 불러오고, 모든 업데이트와 동기화를 유지합니다. 마찬가지로, 스케줄러 인터페이스에서 이루어지는 변경 사항도 Backbone 컬렉션에서 해당 이벤트를 트리거합니다. - -이 과정은 매우 간단합니다. 핵심은 일반적으로 사용하는 [load](api/method/load.md) 또는 [parse](api/method/parse.md) 메서드 대신 [backbone](api/method/backbone.md) 메서드를 사용하는 것입니다. - - -[backbone](api/method/backbone.md) 메서드는 스케줄러가 Backbone 모델의 모든 데이터 변경 사항과 상호 동기화를 유지하도록 보장합니다. -이 메서드는 Backbone 컬렉션을 파라미터로 받습니다. - - -[Backbone integration](https://docs.dhtmlx.com/scheduler/samples/10_integration/07_backbone.html) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/collisions.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/collisions.md index d71cf8e4..ce4bfa81 100644 --- a/i18n/ko/docusaurus-plugin-content-docs/current/guides/collisions.md +++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/collisions.md @@ -1,15 +1,15 @@ --- -title: "타임 슬롯에서 중복 이벤트 방지하기" -sidebar_label: "타임 슬롯에서 중복 이벤트 방지하기" +title: "시간 슬롯에서의 이중 이벤트 방지" +sidebar_label: "시간 슬롯에서의 이중 이벤트 방지" --- -# 타임 슬롯에서 중복 이벤트 방지하기 +# 시간 슬롯에서의 이중 이벤트 방지 -여러 상황에서 동일한 시간대에 예약할 수 있는 이벤트 수를 제한하는 것이 중요할 수 있습니다. 예를 들어, 이미 해당 시간대에 하나의 이벤트가 예약되어 있다면 두 번째 이벤트 추가를 막고 싶을 수 있습니다. +많은 사용 사례에서 시간 슬롯당 이벤트 수를 제한해야 할 수 있습니다. 예를 들어, 같은 시간에 이미 다른 이벤트가 정의되어 있다면 두 번째 이벤트의 생성을 거부해야 할 수 있습니다. -## 충돌 감지 활성화하기 {#activating-the-monitoring-for-collisions} +## 충돌 모니터링 활성화 -하나의 시간대에 허용되는 이벤트 수를 관리하려면 [**collision**](guides/extensions-list.md#collision) 확장 기능을 사용할 수 있습니다. +시간 슬롯의 이벤트 수를 제어하려면 [**collision**](guides/extensions-list.md#collision) 확장을 사용하세요. ~~~js title="'collision' 확장 기능 활성화하기" scheduler.plugins({ @@ -17,48 +17,58 @@ scheduler.plugins({ }); ~~~ -*이 확장 기능을 페이지에 활성화하면, 사용자가 새로운 이벤트를 생성하거나 기존 이벤트를 이동할 때 동일한 시간대에 두 개의 이벤트가 배치되는 것을 자동으로 방지합니다.* +*페이지에서 확장을 활성화하면 확장이 활성화됩니다. +이 시점부터 스케줄러는 같은 시간 슬롯에 2개의 이벤트를 배치하도록 허용하지 않습니다(생성 또는 이동).* -## 시간대별 허용 이벤트 수 관리하기 -기본적으로 하나의 시간대에는 한 개의 이벤트만 허용됩니다. 이 제한을 변경하려면 [collision_limit](api/config/collision_limit.md) 속성을 사용하세요: +## 시간 슬롯당 허용되는 이벤트 수 관리 -~~~js title="시간대별 2개 이상의 이벤트 생성 방지" -scheduler.config.collision_limit = 2; // 한 시간대에 2개의 이벤트만 허용 +기본적으로 시간 슬롯당 허용되는 이벤트 수는 1입니다. 이 수치를 조정하려면 [collision_limit](api/config/collision_limit.md) 속성을 사용하세요: + +[Denying creating more than 2 events per time slot](Denying creating more than 2 events per time slot) +~~~js +scheduler.config.collision_limit = 2; //allows creating 2 events per time slot ~~~ -[Controlling the number of events in a time slot](https://docs.dhtmlx.com/scheduler/samples/03_extensions/15_collision.html) +[시간 슬롯의 이벤트 수 제어](https://docs.dhtmlx.com/scheduler/samples/03_extensions/15_collision.html) -*['collision' 확장 기능](guides/extensions-list.md#collision)이 활성화된 상태에서 사용자가 이미 이벤트가 있는 시간대에 이벤트를 추가하거나 이동하려고 하면, 스케줄러는 [onEventCollision](api/event/oneventcollision.md) 이벤트를 발생시킵니다. 이 이벤트는 [collision_limit](api/config/collision_limit.md) 속성에 설정된 제한을 확인합니다.* +*['collision' extension](guides/extensions-list.md#collision)이 활성화된 상태에서, 사용자가 이미 점유된 시간 슬롯 안에서 새 이벤트를 만들거나 기존 이벤트를 수정하려고 할 때마다, +스케줄러는 [onEventCollision](api/event/oneventcollision.md) 이벤트를 호출하고 이 이벤트는 +[collision_limit](api/config/collision_limit.md) 속성으로 설정된 값을 확인합니다.* -참고로, [onEventCollision](api/event/oneventcollision.md) 이벤트는 데이터 로딩 중에는 발생하지 않습니다. 데이터 로딩 시에도 이벤트 제한을 적용하려면 다음과 같이 코드를 추가해야 합니다: +하지만, [onEventCollision](api/event/oneventcollision.md) 이벤트는 데이터를 로드하는 동안에는 트리거되지 않는다는 점을 기억하십시오. 따라서 스케줄러에 데이터를 로드하는 동안 시간 슬롯의 아이템 수를 제어하려면 이전 코드를 조금 확장해야 합니다: -~~~js title="시간대별 2개 이상의 이벤트 생성/로딩 방지" -scheduler.config.collision_limit = 2; // 한 시간대에 2개의 이벤트만 허용 +[Denying creating/loading more than 2 events per time slot](Denying creating/loading more than 2 events per time slot) +~~~js +scheduler.config.collision_limit = 2; //allows creating 2 events per time slot scheduler.attachEvent("onEventLoading", function(ev){ /*!*/ return scheduler.checkCollision(ev); /*!*/ }); /*!*/ ~~~ -[checkCollision](api/method/checkcollision.md) 메서드는 이벤트가 기존 이벤트와 겹치는지 확인하고, 필요시 [onEventCollision](api/event/oneventcollision.md) 이벤트를 발생시킵니다. +[checkCollision](api/method/checkcollision.md) 메서드는 이미 다른 이벤트에 의해 점유된 시간에 이벤트가 발생하는지 확인하고 +onEventCollision 이벤트를 호출합니다. + -## 특정 시간대에 등록된 이벤트 수 확인하기 +## 시간 슬롯에 존재하는 이벤트 수 얻기 -특정 시간대에 몇 개의 이벤트가 예약되어 있는지 확인하려면 [getEvents](api/method/getevents.md) 메서드를 사용할 수 있습니다: +시간 슬롯에 존재하는 이벤트 수를 얻으려면 [getEvents](api/method/getevents.md) 메서드를 사용하세요: -~~~js title="시간대별 이벤트 수 확인하기" -var count = scheduler.getEvents(ev.start_date, ev.end_date).length; +[시간 슬롯의 이벤트 수 얻기](Getting the number of events in a time slot) +~~~js +const count = scheduler.getEvents(ev.start_date, ev.end_date).length; ~~~ -[getEvents](api/method/getevents.md) 메서드는 모든 이벤트를 검사하여 날짜를 비교하므로, 이벤트 수가 매우 많을 경우 시간이 다소 소요될 수 있습니다. +참고로 [getEvents](api/method/getevents.md) 메서드는 모든 이벤트를 순회하며 날짜를 비교하므로 수천 개의 이벤트를 사용하는 경우 시간이 걸릴 수 있습니다. + -## 중복 예약/이벤트 방지를 위한 전체 체크리스트 +## 이중 예약/이벤트 방지에 대한 전체 체크리스트 -타임 슬롯에서 이벤트 충돌을 방지하기 위한 절차를 요약하면 다음과 같습니다: +다음은 시간 슬롯의 이벤트 충돌을 피하기 위해 완료해야 하는 단계의 목록입니다: -1) 페이지에 *collision* 확장 기능을 포함하세요: +1) 페이지에 *collision* 확장을 포함합니다: ~~~js scheduler.plugins({ @@ -66,76 +76,76 @@ scheduler.plugins({ }); ~~~ -2) 서버에서 데이터를 로딩하는 동안 사용자가 새로운 이벤트를 생성하지 못하도록 방지하세요. +2) 서버에서 데이터를 로드하는 동안 새 이벤트의 생성을 차단합니다. -이렇게 하면 캘린더가 완전히 채워지기 전에는 이벤트를 추가할 수 없습니다. [onLoadEnd](api/event/onloadend.md), [onLoadStart](api/event/onloadstart.md) 이벤트 핸들러와 [readonly](api/config/readonly.md) 속성을 함께 사용하세요: +따라서 데이터가 로드되지 않았고 달력이 비어 있을 때 사용자가 이벤트를 만들 수 없도록 합니다. +이 목적을 달성하려면 아래와 같이 onLoadEnd와 onLoadStart 이벤트 핸들러와 readonly 속성을 사용해야 합니다: ~~~js -// 데이터 소스에서 데이터 로딩이 시작되기 전에 스케줄러를 읽기 전용으로 설정 +// 데이터 소스에서 데이터를 로딩하기 시작하기 전에 스케줄러를 읽기 전용으로 만듭니다 scheduler.attachEvent("onLoadStart", function(){ scheduler.config.readonly = true; }); -// 데이터 소스에서 데이터 로딩이 완료된 후 스케줄러를 편집 가능으로 설정 +// 데이터 소스에서 데이터 로딩이 완료된 후에만 스케줄러를 편집 가능하게 만듭니다 scheduler.attachEvent("onLoadEnd", function(){ scheduler.config.readonly = false; }); ~~~ -3) 많은 레코드를 한 번에 로딩해야 하는 경우 성능 향상을 위해 동적 로딩을 활성화하세요. +3) 레코드가 많아 한 번에 모두 로드되는 경우 데이터 로딩 속도를 높이기 위해 동적 로딩을 활성화합니다. -동적 로딩을 활성화하려면 데이터를 로딩하기 전에 [setLoadMode](api/method/setloadmode.md) 메서드를 호출하세요: +동적 로딩을 활성화하려면 [setLoadMode](api/method/setloadmode.md) 메서드를 호출하고 그 후 스크립트를 로드합니다: -~~~js title="동적 로딩 활성화" +[Enabling the dynamic loading](Enabling the dynamic loading) +~~~js scheduler.setLoadMode("month"); scheduler.load("/some"); ~~~ -4) PHP 커넥터의 유효성 검사를 사용하여 서버 측에서 충돌 이벤트를 검증하세요. 자세한 내용은 [data validation](https://docs.dhtmlx.com/connector__php__validation.html#processingincaseofvalidationerror) 문서를 참고하세요. - -유효성 검사에 실패하면 클라이언트에서 데이터를 다시 로딩할 수 있습니다. +4) 서버 측 API에서 충돌하는 이벤트를 검증합니다. 충돌이 감지되면 응답에 오류 상태를 반환하고 클라이언트에서 처리합니다. -유효성 검사 실패를 처리하려면 DataProcessor 이벤트 [onValidationError](https://docs.dhtmlx.com/api__dataprocessor_onvalidationerror_event.html)와 -[onAfterUpdate](https://docs.dhtmlx.com/api__dataprocessor_onafterupdate_event.html)를 사용하고, Scheduler의 [clearAll](api/method/clearall.md), [load](api/method/load.md) 메서드로 데이터를 다시 로딩하세요: +또한 확인 실패 시 클라이언트 측에서도 데이터를 다시 로드할 수 있습니다. +정확성 검사를 처리하려면 DataProcessor 이벤트 [onValidationError] 및 [onAfterUpdate]를 사용하고, 데이터를 다시 로드하려면 Scheduler 메서드 [clearAll]과 [load]를 사용하세요: a. [onValidationError](https://docs.dhtmlx.com/api__dataprocessor_onvalidationerror_event.html) -유효성 검사 오류가 발생한 후, 데이터가 전송되기 전에 발생합니다: +검증 오류가 발생한 뒤 데이터 전송 전에 발생합니다 ~~~js dp.attachEvent("onValidationError", function(id, details){ - // 서버에서 실제 데이터를 다시 로딩 + //reload actual data from the server scheduler.clearAll(); scheduler.load("/data"); }); ~~~ -파라미터: +매개변수: -- id - (string) 오류가 발생한 항목의 id -- details - (object) 오류 상세 정보 +- id - (string) 오류가 발생한 항목의 ID +- details - (object) 오류 세부 정보 b. [onAfterUpdate](https://docs.dhtmlx.com/api__dataprocessor_onafterupdate_event.html) -서버 응답이 처리된 후에 발생합니다: +서버 측 응답을 수신하고 처리한 후 발생합니다 ~~~js dp.attachEvent("onAfterUpdate", function(id, action, tid, response){ if(action == "invalid" || action == "error"){ - // 서버에서 실제 데이터를 다시 로딩 + //reload actual data from the server scheduler.clearAll(); scheduler.load("/data"); } }); ~~~ -파라미터: +매개변수: -- id - (string) 업데이트된 항목의 id -- action - (string) 응답 상태(작업 유형), 자세한 내용은 아래 참고 -- tid - (string) 새 id (insert 작업에만 해당) -- response - (mixed) 파싱된 응답을 담고 있는 xml node/json 객체 +- id - (string) 업데이트된 항목의 ID +- action - (string) 응답 상태(작업 유형), 아래의 세부 정보를 참조 +- tid - (string) 새 ID(삽입 작업에만 적용) +- response - (mixed) xml 노드/JSON 객체, 파싱된 xml/json 응답을 포함 가능한 응답 상태는 다음과 같습니다: @@ -143,4 +153,4 @@ dp.attachEvent("onAfterUpdate", function(id, action, tid, response){ - inserted; - deleted; - invalid; -- error. +- error. \ No newline at end of file diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/combo.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/combo.md index f0bb78f6..07c83075 100644 --- a/i18n/ko/docusaurus-plugin-content-docs/current/guides/combo.md +++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/combo.md @@ -10,7 +10,7 @@ sidebar_label: "Combo" ![combo_editor](/img/combo_editor.png) ~~~js -var holders = [ +const holders = [ { key: 1, label: 'James' }, { key: 2, label: 'Alex' }, { key: 3, label: 'Antony' }, @@ -25,17 +25,16 @@ scheduler.config.lightbox.sections = [ image_path:"../common/dhtmlxCombo/imgs/", height:30, filtering:true}, { name:"time", height:72, type:"time", map_to:"auto"} ]; -~~~ - +~~~ [Combo box in the lightbox](https://docs.dhtmlx.com/scheduler/samples/02_customization/15_combo_select.html) ## 초기화 -라이트박스에 Combo 컨트롤을 추가하려면 다음 단계를 따르세요: +콤보 컨트롤을 라이트박스에 추가하려면 다음 단계를 따르세요: -1. dhtmlxCombo 파일 포함: +1. dhtmlxCombo 파일 포함: ~~~js @@ -43,13 +42,13 @@ scheduler.config.lightbox.sections = [ ~~~ -2. 페이지에서 editors 확장 기능 활성화: +2. 페이지에서 [editors] 확장 활성화: ~~~js scheduler.plugins({ editors: true }); ~~~ -3. 라이트박스 구성에 섹션 추가: +3. 라이트박스 구성에 섹션 추가: ~~~js scheduler.config.lightbox.sections = [ { name:"description", ... }, @@ -58,12 +57,11 @@ scheduler.config.lightbox.sections = [ { name:"time", ...} ]; ~~~ -4. 섹션의 라벨 설정: +4. 섹션의 라벨 설정: ~~~js scheduler.locale.labels.section_holders = "Holder"; ~~~ - [Combo box in the lightbox](https://docs.dhtmlx.com/scheduler/samples/02_customization/15_combo_select.html) @@ -71,7 +69,7 @@ scheduler.locale.labels.section_holders = "Holder"; ## 속성 -'combo' 컨트롤에서 자주 사용되는 주요 속성은 아래와 같습니다. (전체 목록은 [여기](api/config/lightbox.md)에서 확인할 수 있습니다): +다음 속성은 주로 중요하고 'combo' 컨트롤에 일반적으로 설정됩니다(전체 목록은 여기에서 확인하십시오): @@ -85,39 +83,39 @@ scheduler.locale.labels.section_holders = "Holder"; - + - + - - + + - - + + - + - +
map_to(string) 섹션과 매핑될 데이터 속성의 이름(string) 섹션에 매핑될 데이터 속성의 이름
type(textarea,time,select,template,multiselect,radio,checkbox,combo) 섹션 컨트롤의 타입(textarea,time,select,template,multiselect,radio,checkbox,combo) 섹션 컨트롤의 유형
options(array of objects) 컨트롤의 선택 옵션을 정의합니다 ('select', 'multiselect', 'radio', 'combo' 컨트롤에 사용). 배열의 각 객체는 하나의 옵션을 나타내며, 다음 속성을 가집니다:
  • key - (string) 옵션의 id. 이 속성은 이벤트의 데이터 속성과 비교되어 이벤트에 옵션을 할당합니다
  • label - (string) 옵션의 라벨
options(객체 배열) 컨트롤의 선택 옵션을 정의합니다 ('select', 'multiselect', 'radio', 'combo' 컨트롤에 해당). 배열의 각 객체는 단일 옵션을 지정하며 다음 속성을 가집니다:
  • key - (string) 옵션의 id. 이 속성은 이벤트의 데이터 속성과 비교하여 옵션을 이벤트에 매핑합니다
  • label - (string) 옵션의 레이블
image_path (string) dhtmlxCombo 이미지의 경로
filtering(boolean, string) 자동 필터링 지원을 활성화합니다(입력 시 옵션이 필터링됨). 선택 사항 이 파라미터는 다음 값 중 하나를 가질 수 있습니다:
  • false - 필터링 비활성화
  • true 또는 "start" - 필터링 활성화, 항목의 시작 부분에서 검색
  • "between" - 필터링 활성화, 입력한 텍스트가 항목 내 어느 위치에 있든 검색
filtering(boolean, string) 자동 필터링 지원을 활성화합니다(타이핑으로 옵션이 필터링됩니다). 선택적 매개변수는 다음 값 중 하나를 가질 수 있습니다:
  • false - 필터링 비활성
  • true 또는 "start" - 필터링 활성, 항목의 시작 부분에서 검색 수행
  • "between" - 필터링 활성, 입력한 텍스트가 항목의 어느 위치에나 나타날 때 검색
script_path(string) 서버에서 콤보 옵션을 제공하는 서버 스크립트의 경로. 선택 사항(string) 서버 측 스크립트의 경로로, 서버에서 콤보의 옵션을 로드하는 데 사용됩니다. 선택적
cache(boolean) 스크립트 응답의 캐시 사용 여부(활성화 권장). 선택 사항(boolean) 스크립트 응답의 캐시를 활성화/비활성화합니다(속성 활성화 권장). 선택적
-## 컨트롤에 데이터 채우기 +## 데이터를 사용해 컨트롤 채우기 -Combo 컨트롤에 값을 제공하려면 [options](api/config/lightbox.md) 파라미터를 사용하세요: +일반적으로 Combo 컨트롤에 값을 설정하려면 [options] 매개변수를 사용해야 합니다: ~~~js scheduler.config.lightbox.sections = @@ -134,14 +132,14 @@ scheduler.config.lightbox.sections = ]; ~~~ -[options](api/config/lightbox.md) 파라미터의 각 항목은 두 가지 필수 속성을 가져야 합니다: +[options](api/config/lightbox.md) 매개변수의 항목은 2개의 필수 속성을 가져야 합니다: - **key** - 옵션의 id -- **label** - 옵션의 라벨 +- **label** - 옵션의 레이블 -## 서버에서 데이터로 컨트롤 채우기 +## 서버로부터 데이터로 컨트롤 채우기 -Combo 옵션을 서버에서 불러오려면 **script_path** 속성을 사용하여 요청을 처리하는 서버 스크립트의 URL을 지정하세요. +서버에서 Combo 컨트롤을 채우려면 **script_path** 속성을 사용하고, 서버 요청을 처리할 서버 측 스크립트의 경로를 지정합니다. ~~~js scheduler.config.lightbox.sections = [ @@ -150,66 +148,55 @@ scheduler.config.lightbox.sections = [ ]; ~~~ -**script_path** 속성은 콤보가 AJAX를 통해 옵션을 불러올 URL을 정의합니다. +**script_path** 속성은 콤보가 옵션을 로드하는 URL을 지정하며, 즉 script_path가 지정되면 콤보는 AJAX를 통해 해당 URL에서 데이터를 로드하려고 합니다. -콤보 선택기는 [dhtmlxCombo](https://docs.dhtmlx.com/combo__index.html)를 기반으로 하므로, 서버는 호환되는 형식으로 데이터를 반환해야 합니다. -콤보에 데이터를 추가하는 방법에 대한 자세한 내용은 [Loading Options](https://docs.dhtmlx.com/combo__adding_options.html) 문서를 참고하세요. +콤보 선택기는 [dhtmlxCombo](https://docs.dhtmlx.com/combo__index.html)을 기반으로 하므로, 서버는 해당 형식과 호환되는 데이터를 반환해야 합니다. +콤보에 데이터를 추가하는 방법에 대해서는 [Loading Options] 문서를 참조하십시오. -두 가지 시나리오에서 요청이 발생합니다: +URL은 두 가지 경우에 요청됩니다: -1) 라이트박스가 열리고 콤보에 선택된 값이 있을 때, 컨트롤은 해당 옵션의 라벨을 불러오기 위해 요청을 보냅니다. +1) 라이트박스가 열리고 콤보에 선택된 값이 있을 때 - 컨트롤은 서버에 요청을 보내 선택된 옵션의 레이블을 로드합니다. -요청에는 **id** 쿼리 파라미터가 포함됩니다: +요청에는 **id** 쿼리 매개변수가 포함됩니다: -~~~ +~~~ GET /url?id="1" ~~~ -응답은 지정된 id를 가진 항목만 포함하는 배열이어야 하며, 다음과 같이 포맷됩니다: +응답은 다음 형식으로 지정된 id를 가진 항목만 포함하는 배열을 반환해야 합니다: -~~~ +~~~ [ { "value": 1, "text": "Marketing"} ] ~~~ +2) 사용자가 선택 상자 입력에 텍스트를 입력하기 시작하면 컨트롤은 필터링된 값을 로드합니다. -2) 사용자가 콤보 입력란에 타이핑을 시작하면, 컨트롤은 필터링된 옵션을 불러옵니다. +클라이언트는 쿼리의 **mask** 매개변수에 입력한 텍스트를 포함하여 요청을 보냅니다: -요청에는 입력한 텍스트가 **mask** 쿼리 파라미터로 포함됩니다: - -~~~ +~~~ GET /url?mask="al" ~~~ -서버는 mask와 일치하는 모든 항목을 반환해야 합니다: +서버 응답은 마스크 값과 일치하는 모든 항목을 반환해야 합니다: -~~~ +~~~ [ { "value": 1, "text": "Albania"}, { "value": 3, "text": "Algeria"}, ] ~~~ -[PHP Connector](https://github.com/DHTMLX/connector-php) 라이브러리를 사용하는 경우, 서버 측 코드는 다음과 같을 수 있습니다: +백엔드 핸들러 예시(Node.js/Express): ~~~js -event->attach("beforeFilter", "by_id"); - function by_id($filter) { - if (isset($_GET['id'])) - $filter->add("item_id", $_GET['id'], '='); - } - - $combo->dynamic_loading(3); - $combo->render_table("Countries","item_id","item_nm"); - -?> +app.get("/api/countries", async (req, res) => { + const { id, mask } = req.query; + // Query your data source by id or mask + const items = await countriesService.find({ id, mask }); + res.json(items); // [{ value: 1, text: "Albania" }, ...] +}); ~~~ @@ -218,7 +205,7 @@ GET /url?mask="al" ## 자동 필터링 모드 -자동 필터링 모드는 사용자가 입력할 때 옵션이 자동으로 필터링되는 기능입니다. 이 모드를 활성화하려면 **filtering** 속성을 *true*로 설정하세요: +자동 필터링 모드는 사용자가 입력할 때 옵션이 자동으로 필터링되는 모드입니다. 모드를 활성화하려면 **filtering** 속성을 true로 설정합니다: ~~~js scheduler.config.lightbox.sections = [ @@ -227,8 +214,7 @@ scheduler.config.lightbox.sections = [ ]; ~~~ :::note -자동 필터링은 데이터가 클라이언트 또는 서버에서 불러와지는 방식과 관계없이 사용할 수 있습니다. +참고: 데이터의 출처(client 또는 server-side)에 관계없이 자동 필터링 모드를 사용할 수 있습니다. ::: - -더 자세한 내용은 dhtmlxCombo의 Filtering 문서를 참고하세요. +주제에 대한 자세한 내용은 dhtmlxCombo 문서 dhtmlxCombo. Filtering를 참조하십시오. \ No newline at end of file diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/custom-details-form.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/custom-details-form.md index 952444a7..67956268 100644 --- a/i18n/ko/docusaurus-plugin-content-docs/current/guides/custom-details-form.md +++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/custom-details-form.md @@ -1,49 +1,50 @@ ---- -title: "완전히 커스텀된 라이트박스" -sidebar_label: "완전히 커스텀된 라이트박스" +--- +title: "완전히 커스텀 라이트박스" +sidebar_label: "완전히 커스텀 라이트박스" --- -# 완전히 커스텀된 라이트박스 +# 완전히 커스텀 라이트박스 -스케줄러에서 완전히 커스텀된 라이트박스를 만들기 위해서는 [showLightbox](api/method/showlightbox.md) 메서드를 오버라이드해야 합니다: +스케줄러에 대해 완전히 커스텀 라이트박스를 지정하려면, [`showLightbox()`](api/method/showlightbox.md) 메서드를 재정의하십시오: ~~~js -scheduler.showLightbox = function(id){ +scheduler.showLightbox = (id) => { // id - 이벤트의 id ... 커스텀 폼을 표시하는 코드 ... -} +}; ~~~ -이를 더 쉽게 만들어주는 두 가지 헬퍼 메서드가 있습니다: - - -- [startLightbox](api/method/startlightbox.md) - 지정한 HTML 컨테이너 안에 커스텀 라이트박스를 화면 중앙에 표시합니다. -- [endLightbox](api/method/endlightbox.md) - 라이트박스를 닫습니다 +구현을 단순화하기 위해 사용할 수 있는 2개의 도우미 메서드가 있습니다: +- [`startLightbox()`](api/method/startlightbox.md) - 지정된 HTML 컨테이너에서 화면 중앙에 커스텀 라이트박스를 표시합니다 +- [`endLightbox()`](api/method/endlightbox.md) - 라이트박스를 닫습니다 -페이지 어딘가에 **#custom_form**이라는 ID를 가진 HTML 컨테이너가 있다고 가정해봅니다. 커스텀 라이트박스를 구현하려면 다음과 같이 할 수 있습니다: +페이지 어딘가에 `#custom_form` HTML 컨테이너가 있다고 가정합니다. 그러면 아래와 같이 커스텀 라이트박스를 구현할 수 있습니다: ~~~js -var custom_form = document.getElementById("custom_form"); +const customForm = document.getElementById("custom_form"); -scheduler.showLightbox = function(id){ - var ev = scheduler.getEvent(id); - scheduler.startLightbox(id, custom_form ); +scheduler.showLightbox = (id) => { + const event = scheduler.getEvent(id); + scheduler.startLightbox(id, customForm); //'여기서 폼에 값을 설정해야 합니다' - //document.getElementById("some_input").value = ev.text; -} + // document.getElementById("some_input").value = event.text; +}; + // '저장' 버튼에 연결되어야 합니다 -function save_form() { - var ev = scheduler.getEvent(scheduler.getState().lightbox_id); +const saveForm = () => { + const event = scheduler.getEvent(scheduler.getState().lightbox_id); //'여기서 폼에서 값을 가져와야 합니다' - //ev.text = document.getElementById("some_input").value; - scheduler.endLightbox(true, custom_form); -} + // event.text = document.getElementById("some_input").value; + scheduler.endLightbox(true, customForm); +}; + // '취소' 버튼에 연결되어야 합니다 -function close_form(argument) { - scheduler.endLightbox(false, custom_form); -} +const closeForm = () => { + scheduler.endLightbox(false, customForm); +}; ~~~ +### Related samples -[Fully custom lightbox](https://docs.dhtmlx.com/scheduler/samples/02_customization/16_custom_form.html) +- [완전히 커스텀 라이트박스](https://docs.dhtmlx.com/scheduler/samples/02_customization/16_custom_form.html) \ No newline at end of file diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/custom-events-color.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/custom-events-color.md index 63a12209..205b4de7 100644 --- a/i18n/ko/docusaurus-plugin-content-docs/current/guides/custom-events-color.md +++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/custom-events-color.md @@ -1,40 +1,42 @@ --- -title: "Custom Event's Color" -sidebar_label: "Custom Event's Color" +title: "사용자 정의 이벤트의 색상" +sidebar_label: "사용자 정의 이벤트의 색상" --- -# Custom Event's Color +# 사용자 정의 이벤트의 색상 -이벤트 색상을 사용자 정의하는 방법에는 세 가지가 있습니다: +이벤트에 대한 사용자 정의 색상을 지정하는 방법은 총 세 가지가 있습니다: -1. [이벤트 객체의 속성에 직접 색상 값을 지정하기](guides/custom-events-color.md#specifyingcolorsinpropertiesoftheeventobject); -2. [이벤트에 추가 CSS 클래스 적용하기](guides/custom-events-color.md#attachingadditionalcssclassestoanevent); -3. [데이터로부터 동적으로 스타일 생성하기](guides/custom-events-color.md#loadingcolorswithdata). +1. [이벤트 객체의 속성에 색상 값을 설정하려면](guides/custom-events-color.md#specifying-colors-in-properties-of-the-event-object); +2. [이벤트에 추가 CSS 클래스(들)를 적용하려면](guides/custom-events-color.md#attaching-additional-css-classes-to-an-event); +3. [데이터에서 스타일을 생성하려면](guides/custom-events-color.md#loading-colors-with-data). ![custom_event_color](/img/custom_event_color.png) -## 이벤트 객체의 속성에 색상 지정하기 {#specifyingcolorsinpropertiesoftheeventobject} +## 이벤트 객체의 속성에서 색상 지정 -이벤트에 사용자 정의 색상을 지정하려면, 이벤트 데이터 객체에 다음 속성 중 하나 또는 둘 다를 추가하세요: +이벤트에 대한 사용자 정의 색상을 지정하려면 데이터 객체에 2개의 추가 속성을 더하거나 두 속성 중 하나만 추가하면 됩니다: -- **textColor** - 이벤트의 글자 색상 지정; -- **color** - 이벤트의 배경 색상 지정. +- **textColor** - 이벤트의 글꼴 색상을 지정합니다; +- **color** - 이벤트의 배경 색상을 지정합니다. ![custom_color_model](/img/custom_color_model.png) -~~~js title="Setting the event's color in the data object" +데이터 객체에서 이벤트의 색상을 설정하는 예: + +~~~js scheduler.parse([ - {id:1, start_date:"2019-05-21",end_date:"2019-05-25",text:"Task1", color:"red"}, - {id:2, start_date:"2019-06-02",end_date:"2019-06-05",text:"Task2", color:"blue"} + {id:1, start_date:"2027-05-21",end_date:"2027-05-25",text:"Task1", color:"red"}, + {id:2, start_date:"2027-06-02",end_date:"2027-06-05",text:"Task2", color:"blue"} ],"json"); ... scheduler.getEvent(1).color = "yellow"; scheduler.updateEvent(1); ~~~ -이 속성들은 특별한 속성입니다. scheduler는 자동으로 이를 감지하여 이벤트 컨테이너와 텍스트에 지정된 색상을 적용합니다. 만약 이 속성이 없다면 기본 색상이 사용됩니다. +참고로, 이들 속성은 특수한 속성입니다. 기본적으로 Scheduler는 이벤트에 해당 속성이 있는지 항상 확인하고, 있을 경우 이벤트의 컨테이너와 텍스트에 관련 값을 적용합니다. 그렇지 않으면 Scheduler는 이벤트에 대해 미리 정의된 색상을 사용합니다. -이 속성들은 모든 유효한 CSS 색상 포맷을 지원합니다. 예를 들어: +속성은 임의의 유효한 CSS 색상 값이 될 수 있으며, 예를 들어 아래의 표기법 모두가 유효합니다: ~~~js ev.color = "#FF0000"; @@ -43,175 +45,166 @@ ev.color = "rgb(255,0,0)"; ~~~ -## 이벤트에 추가 CSS 클래스 적용하기 {#attachingadditionalcssclassestoanevent} - -이벤트의 색상을 지정하는 또 다른 방법은 커스텀 CSS 클래스를 적용하는 것입니다. +## 이벤트에 추가 CSS 클래스 적용하기 -### 방법 +이벤트에 색상을 지정하는 두 번째 방법은 추가 CSS 클래스(들)를 이벤트에 적용하는 것입니다. -[event_class](api/template/event_class.md) 템플릿을 사용하여 이벤트에 CSS 클래스를 적용할 수 있습니다. +### 기법 +이벤트에 CSS 클래스를 적용하려면 [event_class](api/template/event_class.md) 템플릿을 사용합니다. -기본적으로 템플릿은 다음과 같습니다: +템플릿의 기본 구현은 다음과 같습니다: ~~~js scheduler.templates.event_class = function(start, end, ev){ return ""; } ~~~ -*이 함수는 이벤트의 class 속성에 추가될 문자열을 반환합니다. 이벤트 상태에 따라 다른 클래스를 반환할 수 있습니다.* - - -[Coloring events](https://docs.dhtmlx.com/scheduler/samples/02_customization/01_events_coloring.html) +*이 함수는 이벤트 클래스에 추가될 문자열을 반환합니다. 따라서 이벤트의 상태에 따라 서로 다른 클래스를 반환할 수 있습니다.* +[이벤트 색칠하기](https://docs.dhtmlx.com/scheduler/samples/02_customization/01_events_coloring.html) ### 예시 +다음과 같이 매니저와 직원에게 서로 다른 색상의 이벤트를 할당하고 싶다고 가정해 봅시다: 매니저는 녹색, 직원은 주황색으로. 이 경우 두 가지를 수행합니다: -예를 들어, 이벤트가 관리자(manager)인지 직원(employee)인지에 따라 색상을 다르게 지정하고 싶다고 가정해봅시다: 관리자는 초록색, 직원은 주황색으로 표시합니다. 방법은 다음과 같습니다: - -1. 데이터 모델에 'type'과 같은 속성을 추가하여 사용자의 유형을 저장하세요: 'manager' 또는 'employee'. +1. 모델에 추가 데이터 속성(예: 'type')을 추가합니다. 이 속성은 사용자의 유형을 저장합니다: 'manager' 또는 'employee'. ![extended_data_model](/img/extended_data_model.png) -2. 이 유형에 해당하는 CSS 클래스를 생성하세요. 예를 들어 'manager_event'와 'employee_event'를 생성합니다. CSS 예시는 다음과 같습니다: +2. 이 유형들에 대해 관련 CSS 클래스를 지정합니다. 예를 들어 'manager_event'와 'employee_event'로 명명합니다. 이러한 이름에 대한 CSS 정의는 다음과 같이 보일 것입니다: - +[기본 CSS 클래스 재정의](Redefining the default CSS classes) - -~~~js title="Redefining the default CSS classes" ~~~html - + } + ~~~ -Scheduler 6.0 이하 버전에서는 CSS 변수 지원이 없으므로 아래와 같이 스타일을 지정할 수 있습니다: +Scheduler의 이전 버전(v6.0 이하)에서는 CSS 변수 사용이 불가능하며, 다음과 같은 스타일로 이벤트에 색상을 적용할 수 있습니다: ~~~html - -~~~ -3. 마지막으로, [event_class](api/template/event_class.md) 템플릿을 오버라이드하여 클래스를 할당하세요: - + /*일간 또는 주간 보기의 이벤트*/ + .dhx_cal_event.manager_event div{ + background-color: #009966 !important; + color: black !important; + } + .dhx_cal_event.employee_event div{ + background-color: #FF9933 !important; + color: black !important; + } + + /*월간 보기의 다중일 이벤트*/ + .dhx_cal_event_line.manager_event{ + background-color: #009966 !important; + color: black !important; + } + .dhx_cal_event_line.employee_event{ + background-color: #FF9933 !important; + color: black !important; + } + + /*모듈 시간 고정 이벤트, 월간 보기*/ + .dhx_cal_event_clear.manager_event{ + color: black !important; + } + .dhx_cal_event_clear.employee_event{ + color: black !important; + } +~~~ +3. 그리고 마지막으로 [event_class](api/template/event_class.md) 템플릿을 재정의합니다. -~~~js title="Applying additional CSS classes to events:" +[Applying additional CSS classes to events:](Applying additional CSS classes to events:) +~~~js scheduler.templates.event_class = function (start, end, event) { - if (event.type == 'manager') return "manager_event"; - return "employee_event"; + if (event.type == 'manager') return "manager_event"; + return "employee_event"; }; ~~~ - [Coloring events](https://docs.dhtmlx.com/scheduler/samples/02_customization/01_events_coloring.html) +[템플릿으로 이벤트 스타일링](https://docs.dhtmlx.com/scheduler/samples/02_customization/06_templates.html) -[Styling events with templates](https://docs.dhtmlx.com/scheduler/samples/02_customization/06_templates.html) +## 데이터로 색상 로딩 -## 데이터로부터 색상 불러오기 {#loadingcolorswithdata} +색상이 백엔드에서 오는 데이터의 일부인 경우(예: 작업 색상이 단계(stage)와 연관되거나 페이지에서 하드코딩할 수 없는 작업에 할당된 리소스), 데이터를 기반으로 스타일을 수동으로 생성하는 것이 좋은 해결책일 수 있습니다. -색상이 백엔드 데이터에서 오고, 예를 들어 작업의 색상이 단계나 할당된 리소스에 따라 달라지고 색상을 코드에 하드코딩할 수 없는 경우, 데이터로부터 동적으로 스타일을 생성할 수 있습니다. - -예를 들어, 작업에 할당된 사용자가 있고, 작업 스타일이 사용자 속성에 따라 달라진다고 가정해봅시다: +다음과 같은 사용자 모음이 있고, 이들을 작업에 배정할 수 있다고 가정해 봅시다. 작업의 스타일은 사용자 레코드의 속성으로 정의되어야 합니다: ~~~js [ - {"key":1, "label":"John", "backgroundColor":"#03A9F4", "textColor":"#FFF"}, - {"key":2, "label":"Mike", "backgroundColor":"#f57730", "textColor":"#FFF"}, - {"key":3, "label":"Anna", "backgroundColor":"#e157de", "textColor":"#FFF"}, - {"key":4, "label":"Bill", "backgroundColor":"#78909C", "textColor":"#FFF"}, - {"key":7, "label":"Floe", "backgroundColor":"#8D6E63", "textColor":"#FFF"} + {"key":1, "label":"John", "backgroundColor":"#03A9F4", "textColor":"#FFF"}, + {"key":2, "label":"Mike", "backgroundColor":"#f57730", "textColor":"#FFF"}, + {"key":3, "label":"Anna", "backgroundColor":"#e157de", "textColor":"#FFF"}, + {"key":4, "label":"Bill", "backgroundColor":"#78909C", "textColor":"#FFF"}, + {"key":7, "label":"Floe", "backgroundColor":"#8D6E63", "textColor":"#FFF"} ] ~~~ -이 경우 사용자와 색상 정보는 scheduler와 별도로 관리되며, scheduler는 사용자 ID나 색상을 미리 알지 못합니다. +이 사용 사례에서 사용자와 그 색상은 애플리케이션의 서로 다른 부분에서 생성되고 관리되며 Scheduler는 일반적으로 사용자 ID와 색상을 미리 알지 못합니다. -실제 적용 방법은 다음과 같습니다: +다음과 같이 처리할 수 있습니다: -- 이 컬렉션을 위한 명명된 serverList를 정의합니다: +- 이 컬렉션에 대해 이름이 있는 serverList를 정의합니다 ~~~js scheduler.serverList("people"); ~~~ -- 지원되는 [데이터 포맷](guides/data-formats.md#json-with-collections) 중 하나를 사용하거나 커스텀 XHR 요청으로 이 옵션을 페이지에 로드합니다. +- 지원되는 [데이터 형식](guides/data-formats.md#json-with-collections) 중 하나를 사용하거나 커스텀 xhr를 통해 페이지에 옵션을 로드합니다. -- 로드 후, 데이터로부터 동적으로 CSS 스타일을 생성합니다: +- 옵션이 로드되면 데이터를 기반으로 CSS 스타일을 생성할 수 있습니다: ~~~js scheduler.attachEvent("onLoadEnd", function(){ - // 스타일 요소의 고유 ID 사용 - var styleId = "dynamicSchedulerStyles"; + // 스타일 요소에 대한 임의의 id를 사용합니다 + const styleId = "dynamicSchedulerStyles"; - // 이미 존재하는 스타일 요소 재사용 + // 색상이 포함된 옵션을 다시 로드하는 경우 - 이전에 생성된 + // 스타일 요소를 재사용합니다 - var element = document.getElementById(styleId); - if(!element){ - element = document.createElement("style"); - element.id = styleId; - document.querySelector("head").appendChild(element); - } - var html = []; - var resources = scheduler.serverList("people"); + let element = document.getElementById(styleId); + if(!element){ + element = document.createElement("style"); + element.id = styleId; + document.querySelector("head").appendChild(element); + } + let html = []; + const resources = scheduler.serverList("people"); - // 각 사용자에 대해 CSS 규칙을 생성하여 스타일 요소에 삽입 + // 각 옵션에 대한 CSS 스타일을 생성하고 스타일 요소에 CSS를 작성합니다: - resources.forEach(function(r){ + resources.forEach(function(r){ html.push(`.event_resource_${r.key} { --dhx-scheduler-event-background:${r.backgroundColor}; --dhx-scheduler-event-color:${r.textColor}; }`); - }); - element.innerHTML = html.join(""); + }); + element.innerHTML = html.join(""); }); ~~~ -- 그리고 나서, event_class 템플릿에서 생성된 클래스를 할당합니다: +- 그다음 클래스 템플릿에서 생성한 관련 클래스를 할당할 수 있습니다: ~~~js scheduler.templates.event_class = function (start, end, event) { - var css = []; + let css = []; - if(event.owner_id){ - css.push("event_resource_" + event.owner_id); - } + if(task.owner_id){ + css.push("event_resource_" + event.owner_id); + } - return css.join(" "); + return css.join(" "); }; -~~~ +~~~ \ No newline at end of file diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/custom-events-display.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/custom-events-display.md index 6af3d3aa..27683afe 100644 --- a/i18n/ko/docusaurus-plugin-content-docs/current/guides/custom-events-display.md +++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/custom-events-display.md @@ -1,67 +1,68 @@ ---- -title: "커스텀 이벤트 박스" -sidebar_label: "커스텀 이벤트 박스" +--- +title: "사용자 정의 이벤트 박스" +sidebar_label: "사용자 정의 이벤트 박스" --- -# 커스텀 이벤트 박스 +# 사용자 정의 이벤트 박스 -dhtmlxScheduler를 사용하면 이벤트가 표시되는 방식을 사용자 정의할 수 있습니다. +dhtmlxScheduler는 이벤트에 대해 사용자 정의 표시를 정의할 수 있는 기능을 제공합니다. :::note -이 기능은 ["Day View"](views/day.md), ["주간 보기"](views/week.md), ["Units View"](views/units.md)에서만 작동합니다. +다음 뷰에 한해 적용됩니다: [일간 보기](views/day.md), [주간 보기](views/week.md) 및 [단위 보기](views/units.md) ::: -## 기술 +## 기법 -이벤트를 사용자 정의하려면 [renderEvent](api/method/renderevent.md) 메서드를 사용할 수 있습니다: +이벤트의 사용자 정의는 [renderEvent](api/method/renderevent.md) 메서드를 사용하여 달성됩니다: ~~~js scheduler.renderEvent = function(container, ev) { - // 사용자 정의 코드 작성 + // 당신의 커스터마이징 코드 } ~~~ -- **_container_** - 이벤트의 컨테이너 엘리먼트 -- **_ev_** - 이벤트 객체 자체 +- **_container_** - 이벤트 컨테이너 +- **_ev_** - 이벤트 객체 -[Custom event box](https://docs.dhtmlx.com/scheduler/samples/02_customization/27_custom_event_box.html) +[커스텀 이벤트 박스](https://docs.dhtmlx.com/scheduler/samples/02_customization/27_custom_event_box.html) -## 중요 팁 +## 중요한 팁 -- _true_를 반환하면 사용자 정의 렌더링이 적용되고, _false_를 반환하면 기본 렌더링이 사용됩니다. -- 일부 CSS 클래스는 특별한 역할을 하며, 엘리먼트의 className에서 첫 번째로 지정되어야 합니다: - - **_dhx_event_move_** - 엘리먼트를 드래그 가능하게 만듭니다(일반적으로 이벤트 헤더). - - **_dhx_event_resize_** - 엘리먼트 드래그로 이벤트 기간을 조절할 수 있게 합니다. +- true를 반환하면 사용자 정의 로직이 적용되고, false를 반환하면 기본 로직이 적용됩니다. +- 일부 CSS 클래스는 특별한 용도로 사용됩니다(요소의 className에서 먼저 위치해야 합니다): + - **_dhx_event_move_** - 이 스타일이 적용된 요소는 드래그할 수 있습니다(보통 이벤트 머리글임). + - **_dhx_event_resize_** - 이 스타일의 요소를 드래그하면 이벤트의 지속 시간이 변경됩니다. ~~~js -var html = "
"; - // 이벤트 내용 컨테이너 - html += "
"; + // 이벤트 내용의 컨테이너 + html+= "
"; html += ""; - // 두 가지 옵션: 짧은 이벤트는 시작 날짜만, 긴 이벤트는 시작+종료 표시 - if ((ev.end_date - ev.start_date)/60000 > 40) { // 이벤트가 40분 이상일 경우 + //두 가지 옵션 here: 짧은 이벤트의 시작 날짜만 표시하거나 긴 이벤트의 경우 시작+종료를 표시 + if ((ev.end_date - ev.start_date)/60000>40){//이벤트가 40분을 넘으면 html += scheduler.templates.event_header(ev.start_date, ev.end_date, ev); html += " @@ -69,16 +70,16 @@ scheduler.renderEvent = function(container, ev) { } else { html += scheduler.templates.event_date(ev.start_date) + ""; } - // 이벤트 텍스트 표시 - html += "" + scheduler.templates.event_text(ev.start_date, ev.end_date, ev) + - "
"; + // 이벤트의 텍스트 표시 + html += "" + scheduler.templates.event_text(ev.start_date,ev.end_date,ev)+ + "" + "
"; - // 리사이즈 핸들 부분 + // 크기 조정 섹션 html += "
"; container.innerHTML = html; - return true; // 필수: true는 커스텀 렌더링 사용, false는 기본 렌더링 + return true; //필수, true - 커스텀 폼 표시, false - 기본 폼 }; ~~~ @@ -86,7 +87,7 @@ scheduler.renderEvent = function(container, ev) { ~~~html ~~~ -또한, 고정 색상 대신 CSS 변수를 사용할 수도 있습니다: +다음과 같이 고정 색상 값 대신 CSS 변수를 사용할 수도 있습니다: ~~~html ~~~ - -[Custom event box](https://docs.dhtmlx.com/scheduler/samples/02_customization/27_custom_event_box.html) +[커스텀 이벤트 박스](https://docs.dhtmlx.com/scheduler/samples/02_customization/27_custom_event_box.html) \ No newline at end of file diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/custom-lightbox-editor.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/custom-lightbox-editor.md index f26e2b12..74df28f4 100644 --- a/i18n/ko/docusaurus-plugin-content-docs/current/guides/custom-lightbox-editor.md +++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/custom-lightbox-editor.md @@ -1,78 +1,78 @@ --- -title: "Custom Lightbox Control" -sidebar_label: "Custom Lightbox Control" +title: "사용자 정의 라이트박스 컨트롤" +sidebar_label: "사용자 정의 라이트박스 컨트롤" --- -# Custom Lightbox Control +# 사용자 정의 라이트박스 컨트롤 -사용자 정의 컨트롤(에디터)을 설정하려면 다음과 같이 새로운 객체를 정의합니다: +사용자 정의 컨트롤(에디터)을 만들려면 아래와 같이 새 객체를 정의합니다: ~~~js scheduler.form_blocks["my_editor"]={ - render:function(config){ // config - section configuration object - var height="(config.height||50)+""px"; + render:function(config){ // config- section configuration object + const height="(config.height||50)+""px"; return "
" + "
"; }, set_value:function(node,value,ev,config){ - // node - 위에서 정의한 HTML과 연결된 HTML 요소 - // value - map_to 속성에 지정된 값 - // ev - 이벤트 객체 + // node - HTML object related to HTML defined above + // value - value defined by map_to property + // ev - event object // config - section configuration object node.querySelector("textarea").value = value || ""; }, get_value:function(node,ev,config){ - // node - 위에서 정의한 HTML과 연결된 HTML 요소 + // node - HTML object related to HTML defined above // event object // config - section configuration object return node.querySelector("textarea").value; }, focus:function(node){ - // node - 위에서 정의한 HTML과 연결된 HTML 요소 + // node - HTML object related to HTML defined above node.querySelector("textarea").focus(); } }; ~~~ -사용 방법: +Usage: ~~~js scheduler.locale.labels.section_details = "Details"; -scheduler.config.lightbox.sections="[" +scheduler.config.lightbox.sections = [ { name:"details", height:35, map_to:"text", type:"my_editor", focus:true}, { name:"time", height:72, type:"time", map_to:"auto"} ]; ~~~ -"render" 함수에서 반환하는 HTML 내부에 self-closing 태그를 사용하지 않는 것이 **중요**합니다. 그렇지 않으면 브라우저 파싱에 문제가 발생할 수 있습니다: +확인하십시오, HTML 코드의 "render" 함수에서 반환되는 태그의 짧은 닫힘 구문(short closing syntax)을 사용하지 마십시오. 이는 브라우저에서 구문 분석 문제를 일으킬 수 있습니다: ~~~js -// 잘못된 예: +// bad: render:function(){ return "
"; } -// 올바른 예: +// good: render:function(){ return "
"; } ~~~ -[Custom editor in the lightbox](https://docs.dhtmlx.com/scheduler/samples/02_customization/05_custom_editor.html) +[라이트박스에서의 커스텀 에디터](https://docs.dhtmlx.com/scheduler/samples/02_customization/05_custom_editor.html) ## 예제 -다음은 이와 같은 사용자 정의 에디터를 만드는 예제입니다: +다음과 같은 커스텀 에디터를 만드는 방법을 살펴보겠습니다: -![custom_editor](/img/custom_editor.png) +![커스텀 에디터](/img/custom_editor.png) ~~~js scheduler.form_blocks["my_editor"]={ render:function(sns){ - return "
" + + return "
" + "Text  " + @@ -87,18 +87,18 @@ scheduler.form_blocks["my_editor"]={ return node.querySelector("[name='text']").value; }, focus:function(node){ - var input = node.querySelector("[name='text']"); + const input = node.querySelector("[name='text']"); input.select(); input.focus(); } }; scheduler.locale.labels.section_description = "Details"; -scheduler.config.lightbox.sections="[" +scheduler.config.lightbox.sections = [ { name:"description", map_to:"text", type:"my_editor" , focus:true}, { name:"time", height:72, type:"time", map_to:"auto"} ]; ~~~ -[Custom editor in the lightbox](https://docs.dhtmlx.com/scheduler/samples/02_customization/05_custom_editor.html) +[라이트박스에서의 커스텀 에디터](https://docs.dhtmlx.com/scheduler/samples/02_customization/05_custom_editor.html) \ No newline at end of file diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/custom-skins.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/custom-skins.md index 3e2d07c8..4a1b1675 100644 --- a/i18n/ko/docusaurus-plugin-content-docs/current/guides/custom-skins.md +++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/custom-skins.md @@ -1,14 +1,14 @@ --- -title: "스킨 커스터마이제이션" -sidebar_label: "스킨 커스터마이제이션" +title: "스킨 커스터마이징" +sidebar_label: "스킨 커스터마이징" --- -# 스킨 커스터마이제이션 +# 스킨 커스터마이징 -버전 7.0부터 Scheduler 스킨은 CSS 변수로 구성되어 있어 손쉽게 커스터마이즈 및 스타일링이 가능합니다. +버전 7.0부터 Scheduler의 스킨은 커스터마이징 및 스타일링에 사용할 수 있는 CSS 변수들을 사용합니다. - -[Customize and switch between themes](https://docs.dhtmlx.com/scheduler/samples/07_skins/07_themes.html) +### 관련 샘플 +- [테마를 커스터마이즈하고 전환하기](https://docs.dhtmlx.com/scheduler/samples/07_skins/07_themes.html) 주요 CSS 변수: @@ -76,129 +76,127 @@ sidebar_label: "스킨 커스터마이제이션" --dhx-scheduler-popup-border-radius: var(--dhx-scheduler-border-radius); } - ~~~ -모든 변수는 패키지 내 **codebase/sources/less/src/themes/variables.less** 파일에 위치해 있습니다. +모든 변수는 패키지의 **codebase/sources/less/src/themes/variables.less** 파일에서 확인할 수 있습니다. ## 스킨 커스터마이즈 방법 -Scheduler의 외형을 변경하는 가장 간단한 방법은 본인 스타일시트에서 CSS 변수를 재정의하는 것입니다. 예시: +Scheduler의 외관을 가장 쉽게 커스터마이즈하는 방법은 stylesheet에서 관련 CSS 변수들을 재정의하는 것입니다. 아래는 예시입니다: ~~~html ~~~ +### 관련 샘플 +- [테마를 커스터마이즈하고 전환하기](https://docs.dhtmlx.com/scheduler/samples/07_skins/07_themes.html) -[Customize and switch between themes](https://docs.dhtmlx.com/scheduler/samples/07_skins/07_themes.html) - -이렇게 변수를 지정하면 기본 스타일이 사용자가 정의한 스타일로 대체되며, 이 변경 사항은 Scheduler 전체에 적용됩니다. +변수를 이와 같이 정의하면 기본 스타일을 재정의할 수 있으며, 맞춤 스타일이 Scheduler에 반영되도록 보장됩니다. :::note -전체 테마에서 값의 일관된 상속을 위해서는 변수를 :root 요소에 정의하는 것이 가장 좋습니다. +전체 테마에 걸친 값의 올바른 상속을 보장하려면 변수 정의를 `:root` 요소에서 하십시오. ::: -**:root** 수준에서 스타일을 정의하면 컴포넌트 전체에 올바르게 상속됩니다. 한 변수가 다른 변수에 의존할 때, 변경 사항이 올바르게 연쇄적으로 적용됩니다. - -예를 들어, 변수 `--dhx-scheduler-scale-color`는 `--dhx-scheduler-container-color`의 값을 상속받습니다. +컴포넌트 전반에 걸친 상속 및 적용이 올바르게 이루어지도록 하려면 `:root` 요소에서 이 스타일을 정의하는 것이 중요합니다. 예를 들어, 다른 변수에서 상속받는 값인 `--dhx-scheduler-scale-color`가 이 변화를 반영하게 됩니다. -- **:root**에서 `--dhx-scheduler-container-color`를 재정의하면 `--dhx-scheduler-scale-color`도 함께 업데이트됩니다. +- `:root` 레벨에서 `--dhx-scheduler-container-color` 를 재정의하면 `--dhx-scheduler-scale-color`가 이를 반영합니다. ~~~html ~~~ -- 하지만 **.dhx_cal_container** 등 DOM 내부에서 `--dhx-scheduler-container-color`를 재정의하면 `--dhx-scheduler-scale-color`는 변경되지 않습니다. +- DOM 트리의 하위 수준(예: **.dhx_cal_container**)에서 `--dhx-scheduler-container-color`를 재정의하면, `--dhx-scheduler-scale-color` 변수에 영향을 주지 않습니다. ~~~html ~~~ +## 소스 코드를 사용하는 방법 -## 소스 코드 사용 방법 - -dhtmlxScheduler는 다음과 같은 형식의 스타일 파일을 제공합니다: +dhtmlxScheduler는 다음 형태의 스타일 파일로 배포됩니다: -- **codebase/dhtmlxscheduler.css** - 프로덕션용으로 압축된 CSS 파일 -- **codebase/sources/dhtmlxscheduler.css** - 읽기 쉬운 prebuilt CSS 파일 -- **codebase/sources/less/** - Scheduler 스킨의 소스 LESS 파일 +- **codebase/dhtmlxscheduler.css** - 스킨용으로 미리 압축된 CSS 파일로, 프로덕션 사용에 적합합니다; +- **codebase/sources/dhtmlxscheduler.css** - 미리 구성된 읽기 쉬운 CSS 파일; +- **codebase/sources/less/** - Scheduler 스킨의 소스 LESS 파일들. -소스 LESS 파일은 기존 스킨을 깊이 커스터마이즈하거나 새로운 스킨을 만들고자 할 때 유용합니다. +후자는 기존 스킨의 깊은 커스터마이징이나 새로운 스킨을 만드는 데 사용할 수 있습니다. -## 시작 방법 +## 시작하는 방법 -**codebase/sources/less**를 NPM 패키지로 설정할 수 있습니다. 이 소스 폴더에는 두 가지 유형의 파일이 포함되어 있습니다: +`codebase/sources/less`를 NPM 패키지로 초기화할 수 있습니다. +소스에는 두 가지 유형의 파일이 포함됩니다: -- 스타일 시트 -- 세밀한 조정이나 새로운 스킨 제작을 위한 마이크로 변수 선언 파일 +- 스타일 시트들; +- 스케줄러 뷰를 미세 조정하거나 새 스킨을 만드는 데 사용할 수 있는 마이크로 변수 선언 파일들. ## 스킨 빌드 방법 -**codebase/sources/less/** 내부에서 다음을 실행하세요: +`codebase/sources/less/`에서 실행하십시오: -~~~ +~~~sh > npm install ~~~ -설치가 완료되면 다음 명령어로 CSS 파일을 다시 빌드할 수 있습니다: +설치가 완료되면 다음 명령으로 CSS 파일을 다시 빌드할 수 있습니다: -~~~ +~~~sh > npm run build ~~~ -또는 변경 사항을 감지해 자동으로 빌드하려면: +또는 -~~~ +~~~sh > npm run watch ~~~ -이 스크립트들은 소스에서 CSS를 컴파일하여 Scheduler 패키지의 *codebase* 폴더에 결과물을 저장하며, 기존 CSS 파일을 대체합니다. +이 스크립트는 소스에서 CSS 파일을 다시 빌드하여 Scheduler 패키지의 codebase 폴더에 기존 파일을 대체합니다. ## 구조 -버전 7.0 기준(향후 릴리즈에서 변경될 수 있음) **less** 폴더 구조는 다음과 같습니다: +버전 7.0용 `less` 폴더의 구조(향후 버전에서 변경될 수 있음)는 아래와 같습니다: -### 이미지 +### Images -- **./src/imgs** - 모든 스킨에서 사용하는 SVG 아이콘 -- **./src/iconfont** - 웹폰트로 포함된 아이콘 +- **./src/imgs** - 모든 스킨에서 사용되는 SVG 아이콘 +- **./src/iconfont** - 웹 폰트에 미리 빌드된 아이콘 -### 스킨 정의 +### Skin 정의 -기본 변수는 `terrace` 스킨에 정의되어 있으며, 다른 스킨들은 이 변수를 오버라이드하고 자체 스타일을 추가합니다. +기본 변수 세트는 `terrace` 스킨에 정의되어 있으며, 다른 스킨은 해당 변수를 재정의하고 스타일을 추가합니다. - **./src/themes** - - *./src/themes/variables.less* - 모든 스킨(terrace 포함)에 공통적인 변수 - - *./src/themes/contrast_black* - contrast black 스킨 변수 - - *./src/themes/contrast_white* - contrast white 스킨 변수 - - *./src/themes/material* - material 스킨 변수 - - *./src/themes/dark* - dark 스킨 변수 - - *./src/themes/flat* - flat 스킨 변수 + - *./src/themes/variables.less* - 모든 스킨에서 사용하는 공통 변수, `terrace` 스킨 + - *./src/themes/contrast_black* - 대비 블랙 스킨 변수 + - *./src/themes/contrast_white* - 대비 화이트 스킨 변수 + - *./src/themes/material* - 머티리얼 스킨 변수 + - *./src/themes/dark* - 다크 스킨 변수 + - *./src/themes/flat* - 플랫 스킨 변수 -### 스킨 빌드 엔트리 포인트 +### 스킨 빌드의 진입점 - theme.less - package.json @@ -206,25 +204,25 @@ dhtmlxScheduler는 다음과 같은 형식의 스타일 파일을 제공합니 ## 커스텀 스킨 만들기 -새로운 스킨을 만들려면 **sources/less/src/themes**에서 기존 스킨을 복사해 이름을 바꾸는 것부터 시작하세요. 다음 단계를 따르세요: +새로운 스킨을 만들려면 `sources/less/src/themes` 폴더의 기존 스킨 중 하나를 복사하고 이름을 바꿀 수 있습니다. 아래 절차를 따르십시오: -1) 기존 스킨 파일 중 하나를 복사해 이름을 변경합니다. 예시: +1. `sources/less/src/themes` 폴더의 기존 파일 중 하나를 복사하고 이름을 바꿉니다. 예를 들면: -~~~ --> 복사: +~~~text +-> copy: codebase/sources/less/src/themes/material.less --> 이름 변경: +-> rename to: codebase/sources/less/src/themes/custom.less ~~~ -2) **sources/less/src/themes/index.less**에서 새 파일을 다음과 같이 import 합니다: +2. 새 파일을 `sources/less/src/themes/index.less`에 가져오도록 추가합니다. 예: -~~~ +~~~less @import "./custom"; ~~~ -그런 다음 아래와 같이 커스텀 변수를 정의하세요: +그리고 아래처럼 내용을 추가합니다: ~~~css :root[data-scheduler-theme='custom'] { @@ -236,25 +234,24 @@ codebase/sources/less/src/themes/custom.less } ~~~ -스킨 변수는 반드시 `:root` 셀렉터에서 `data-scheduler-theme` 속성을 사용하여 정의해야 합니다. +스킨 변수는 `:root` 요소 아래에서 정의해야 하며 `data-scheduler-theme` 선택자를 사용합니다. -모든 새로운 테마는 테마 이름을 지정하는 **--dhx-scheduler-theme** 변수를 포함해야 합니다. +새로운 테마에는 테마 이름과 함께 `--dhx-scheduler-theme` 변수가 포함되어야 합니다. -3) 다음 명령어로 스킨을 다시 빌드하세요: +3. 다음 명령을 실행하여 스킨을 다시 빌드합니다: -~~~ +~~~sh npm run build ~~~ - :::note -Scheduler는 사용 중인 스킨에 따라 일부 미리 정의된 설정을 적용할 수 있습니다. 기존 스킨을 복사해 새 스킨을 만들 경우, 해당 Scheduler 설정을 수동으로 조정해야 할 수도 있습니다. +스케줄러는 적용된 스킨에 따라 달력에 미리 정의된 설정을 적용할 수 있습니다. +기존 스킨을 복사하여 새 스킨을 만들 경우 Scheduler에 해당 설정을 수동으로 적용해야 할 수도 있습니다. ::: - ## JS 스타일링 설정 -Scheduler의 일부 스타일 옵션은 CSS만으로 제어되지 않고 JavaScript 설정을 통해 지정됩니다. 여기에는 다음이 포함됩니다: +Scheduler 스타일링의 모든 측면이 CSS에서 제어되는 것은 아니며, 일부 매개변수는 JavaScript 구성에서 정의됩니다. 이들은 다음과 같습니다: - [hour_size_px](api/config/hour_size_px.md) -- 그리고 [scheduler.xy](api/other/xy.md) 오브젝트의 모든 설정 +- 및 `[scheduler.xy](api/other/xy.md)` 객체의 모든 설정 \ No newline at end of file diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/customizing-edit-select-bars.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/customizing-edit-select-bars.md index ccad731f..ac965998 100644 --- a/i18n/ko/docusaurus-plugin-content-docs/current/guides/customizing-edit-select-bars.md +++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/customizing-edit-select-bars.md @@ -1,15 +1,15 @@ --- -title: "'Select' 및 'Edit' 바 커스터마이징" -sidebar_label: "'Select' 및 'Edit' 바 커스터마이징" +title: "'Select' 및 'Edit' 바 사용자 정의" +sidebar_label: "'Select' 및 'Edit' 바 사용자 정의" --- -# "Select" 및 "Edit" 바 커스터마이징 +# 'Select' 및 'Edit' 바 사용자 정의 -dhtmlxScheduler에서는 Edit 바와 Select 바 모두에 대해 사용자 지정 버튼 모음을 설정할 수 있습니다. +dhtmlxScheduler는 편집 및 선택 바에 대해 사용자 정의 버튼 세트를 정의할 수 있는 기능을 제공합니다. -## Select 바 +## 선택 바 -기본적으로 Select 바에는 3개의 버튼('Details', 'Edit', 'Delete')이 포함되어 있으며, 이는 [icons_select](api/config/icons_select.md) 설정 옵션으로 정의됩니다. +기본적으로 선택 바에는 [icons_select](api/config/icons_select.md) 구성 옵션으로 지정된 3개의 버튼('상세 정보', '편집', '삭제')이 포함되어 있습니다. ~~~js scheduler.config.icons_select = [ @@ -21,15 +21,15 @@ scheduler.config.icons_select = [ ### 사용 예시 -아래 이미지와 같이 Select 바의 예시가 있습니다: +아래 그림에 표시된 선택 바를 살펴보겠습니다: ![select_bar.png](/img/select_bar.png) -**Location**이라는 새 버튼이 기존 버튼과 함께 추가되었습니다. +여기에 기존 버튼들에 새 버튼인 - **위치**를 추가했습니다. -이를 구현하는 단계는 다음과 같습니다: +다음은 절차입니다: -- [icons_select](api/config/icons_select.md)를 다음과 같이 업데이트합니다: +- [icons_select](api/config/icons_select.md)을 아래와 같이 재정의합니다: ~~~js scheduler.config.icons_select = [ @@ -39,18 +39,18 @@ scheduler.config.icons_select = [ "icon_delete" ]; ~~~ - + :::note -Note, 모든 버튼 이름은 "icon_"으로 시작해야 합니다 +참고: 모든 버튼은 반드시 "icon_"로 시작해야 합니다. ::: -- 새 버튼의 라벨을 정의합니다: +- 새 버튼의 레이블을 설정합니다: ~~~js -scheduler.locale.labels.icon_location = "Location"; +scheduler.locale.labels.icon_location = "위치"; ~~~ -- 버튼에 대한 CSS 클래스를 지정합니다: +- 버튼의 CSS 클래스를 설정합니다: ~~~js .dhx_menu_icon.icon_location{ @@ -58,19 +58,19 @@ scheduler.locale.labels.icon_location = "Location"; } ~~~ -- 버튼의 클릭 핸들러를 제공합니다: +- 버튼 클릭 처리를 위한 핸들러를 지정합니다: ~~~js scheduler._click.buttons.location = function(id){ some_function(id); }; ~~~ - -여기서 **scheduler._click.buttons**는 바의 버튼들에 대한 onClick 핸들러를 담고 있습니다. 'location' 키는 [icons_select](api/config/icons_select.md)에서 'icon_' 접두사를 뺀 버튼 이름과 일치합니다. -## Edit 바 +여기서 **scheduler._click.buttons**는 바의 버튼들에 대한 onClick 핸들러의 모음을 포함합니다. 'location'은 'icon_' 뒤의 부분으로 [icons_edit](api/config/icons_edit.md)에서 설정된 버튼 이름입니다. + +## 편집 바 -일반적으로 Edit 바에는 2개의 버튼('Save', 'Cancel')이 있으며, 이는 [icons_edit](api/config/icons_edit.md) 옵션을 통해 설정됩니다. +일반적으로 편집 바에는 [icons_edit](api/config/icons_edit.md) 구성 옵션으로 지정된 2개의 버튼('저장', '취소')이 포함되어 있습니다. ~~~js scheduler.config.icons_edit = [ @@ -81,14 +81,14 @@ scheduler.config.icons_edit = [ ### 사용 예시 -아래 이미지와 같이 Edit 바를 예로 들 수 있습니다: +아래 그림에 표시된 편집 바를 살펴보겠습니다: ![customizing_edit_bar.png](/img/customizing_edit_bar.png) -**Save** 및 **Cancel** 버튼 외에 새로운 **Info** 버튼이 추가되었습니다. -구현 과정은 다음과 같습니다: +저장 버튼과 취소 버튼에 새 버튼 - **정보**를 추가했습니다. +다음은 절차입니다: -- [icons_edit](api/config/icons_edit.md)를 다음과 같이 업데이트합니다: +- [icons_edit](api/config/icons_edit.md)을 아래와 같이 재정의합니다: ~~~js scheduler.config.icons_edit = [ @@ -98,13 +98,13 @@ scheduler.config.icons_edit = [ ]; ~~~ -- 새 버튼의 라벨을 지정합니다: +- 새 버튼의 레이블을 설정합니다: ~~~js -scheduler.locale.labels.icon_custom = "Info"; +scheduler.locale.labels.icon_custom = "정보"; ~~~ -- 버튼에 대한 CSS 클래스를 정의합니다: +- 버튼의 CSS 클래스를 설정합니다: ~~~js .dhx_menu_icon.icon_custom{ @@ -112,7 +112,7 @@ scheduler.locale.labels.icon_custom = "Info"; } ~~~ -- 버튼의 클릭 핸들러를 지정합니다: +- 버튼 클릭 처리를 위한 핸들러를 지정합니다: ~~~js scheduler._click.buttons.custom = function(id){ @@ -120,19 +120,17 @@ scheduler._click.buttons.custom = function(id){ }; ~~~ -다시 한 번, **scheduler._click.buttons**는 버튼의 클릭 핸들러를 포함하며, 'custom'은 [icons_edit](api/config/icons_edit.md)에서 'icon_' 접두사를 뺀 버튼 이름과 일치합니다. - - +여기서 **scheduler._click.buttons**는 바의 버튼들에 대한 onClick 핸들러의 모음을 포함합니다. 'custom'은 'icon_' 뒤의 부분으로 [icons_edit](api/config/icons_edit.md)에서 설정된 버튼 이름입니다. ## 바 요소의 동적 변경 -특정 조건에 따라 Edit 바와 Select 바의 버튼을 동적으로 수정할 수 있습니다. +편집 및 선택 바의 버튼은 특정 조건에 따라 동적으로 변경될 수 있습니다. -예를 들어, 이벤트에 **important**라는 불리언 속성이 있어 해당 이벤트가 중요하며 삭제되어서는 안 된다는 것을 나타내는 경우, 이에 따라 Select 바에서 'delete' 버튼을 표시하거나 숨길 수 있습니다. 다음과 같이 구현할 수 있습니다: +예를 들어 이벤트에 사용자가 삭제할 수 없도록 하는 중요도 여부를 나타내는 사용자 정의 불리언 속성 **important**가 있다고 가정합니다. 이 속성의 값에 따라 선택 바에서 '삭제' 버튼을 숨기거나 표시하고자 할 수 있습니다. 이러한 동작을 구현하는 방법은 다음과 같습니다: ~~~js scheduler.attachEvent("onClick", function(id){ - var event = scheduler.getEvent(id); + const event = scheduler.getEvent(id); if (event.important) scheduler.config.icons_select = ["icon_details"]; else @@ -140,4 +138,4 @@ scheduler.attachEvent("onClick", function(id){ return true; }); -~~~ +~~~ \ No newline at end of file diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/data-export.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/data-export.md deleted file mode 100644 index 0bbad75f..00000000 --- a/i18n/ko/docusaurus-plugin-content-docs/current/guides/data-export.md +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: "데이터 내보내기 및 가져오기" -sidebar_label: "데이터 내보내기 및 가져오기" ---- - -# 데이터 내보내기 및 가져오기 - -- ["Google Calendar와의 통합"](integrations/google-calendar/google-calendar-sync.md) -- ["Export to PDF"](export/pdf.md) -- ["Export to PNG"](export/png.md) -- ["엑셀 및 iCal로 내보내기"](export/excel.md) -- ["데이터 직렬화: XML, JSON, iCal"](export/serialization.md) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/data-formats.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/data-formats.md index ca3f0c6a..4f69046f 100644 --- a/i18n/ko/docusaurus-plugin-content-docs/current/guides/data-formats.md +++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/data-formats.md @@ -1,16 +1,15 @@ +--- +title: "데이터 형식의 예" +sidebar_label: "데이터 형식의 예" --- -title: "데이터 포맷 예시" -sidebar_label: "데이터 포맷 예시" ---- - -# 데이터 포맷 예시 -이 문서에서는 지원되는 모든 데이터 포맷의 예시를 제공합니다. +# 데이터 형식의 예 +이 문서에서는 지원되는 모든 데이터 형식의 예제를 확인하실 수 있습니다. @@ -28,82 +27,82 @@ sidebar_label: "데이터 포맷 예시" - - - + + + - - - + + + - - - + + +
- 표 1 + 표 1 데모 이벤트
Meeting2019년 4월 11일 14:002019년 4월 11일 17:00회의April 11, 2027 14:00April 11, 2027 17:00
Conference2019년 4월 15일 12:002019년 4월 18일 19:00컨퍼런스April 15, 2027 12:00April 18, 2027 19:00
Interview2019년 4월 24일 09:002019년 4월 24일 10:00인터뷰April 24, 2027 09:00April 24, 2027 10:00
-## JSON {#json} +## JSON ~~~js [ { "id":"1", "text":"Meeting", - "start_date":"2019-04-11 14:00", - "end_date":"2019-04-11 17:00" + "start_date":"2027-04-11 14:00", + "end_date":"2027-04-11 17:00" }, { "id":"2", "text":"Conference", - "start_date":"2019-04-15 12:00", - "end_date":"2019-04-18 19:00" + "start_date":"2027-04-15 12:00", + "end_date":"2027-04-18 19:00" }, { "id":"3", "text":"Interview", - "start_date":"2019-04-24 09:00", - "end_date":"2019-04-24 10:00" + "start_date":"2027-04-24 09:00", + "end_date":"2027-04-24 10:00" } ] ~~~ -## 컬렉션이 포함된 JSON {#json-with-collections} +## JSON with Collections -이 포맷은 추가 데이터 컬렉션을 포함해야 할 때 유용합니다. -예를 들어, [서버에서 Timeline과 Units 섹션을 로드](guides/loading-data.md#collections)할 때 사용할 수 있습니다. +This format will be useful if you need to pass some additional data collections. +For example, it is useful when you want to [load Timeline and Units sections from the server](guides/loading-data.md#collections): ~~~js { "data":[ { "id":"1", - "start_date":"2019-03-02 00:00:00", - "end_date":"2019-03-04 00:00:00", + "start_date":"2027-03-02 00:00:00", + "end_date":"2027-03-04 00:00:00", "text":"dblclick me!", "type":"1" }, { "id":"2", - "start_date":"2019-03-09 00:00:00", - "end_date":"2019-03-11 00:00:00", + "start_date":"2027-03-09 00:00:00", + "end_date":"2027-03-11 00:00:00", "text":"and me!", "type":"2" }, { "id":"3", - "start_date":"2019-03-16 00:00:00", - "end_date":"2019-03-18 00:00:00", + "start_date":"2027-03-16 00:00:00", + "end_date":"2027-03-18 00:00:00", "text":"and me too!", "type":"3" }, { "id":"4", - "start_date":"2019-03-02 08:00:00", - "end_date":"2019-03-02 14:10:00", + "start_date":"2027-03-02 08:00:00", + "end_date":"2027-03-02 14:10:00", "text":"Type 2 event", "type":"2" } @@ -118,29 +117,29 @@ sidebar_label: "데이터 포맷 예시" } ~~~ -## XML {#xml} +## XML ~~~xml - 04/11/2013 14:00 - 04/11/2013 17:00 + 04/11/2027 14:00 + 04/11/2027 17:00 - 04/15/2013 12:00 - 04/18/2013 19:00 + 04/15/2027 12:00 + 04/18/2027 19:00 - 04/24/2013 09:00 - 04/24/2013 10:00 + 04/24/2027 09:00 + 04/24/2027 10:00 ~~~ -## iCal {#ical} +## iCal ~~~html BEGIN:VCALENDAR @@ -148,29 +147,30 @@ VERSION:2.0 PRODID:-//dhtmlXScheduler//NONSGML v2.2//EN DESCRIPTION: BEGIN:VEVENT -DTSTART:20130411T140000 -DTEND:20130411T170000 +DTSTART:20270411T140000 +DTEND:20270411T170000 SUMMARY:Meeting END:VEVENT BEGIN:VEVENT -DTSTART:20130415 -DTEND:20130418 +DTSTART:20270415 +DTEND:20270418 SUMMARY:Conference END:VEVENT BEGIN:VEVENT -DTSTART:20130424T090000 -DTEND:20130424T100000 +DTSTART:20270424T090000 +DTEND:20270424T100000 SUMMARY:Interview END:VEVENT END:VCALENDAR ~~~ -## 사용자 정의 속성이 포함된 데이터 {#datawithcustomproperties} -여기서는 기본 데이터 셋([위](guides/data-formats.md) 참고)에 두 개의 사용자 정의 속성이 추가된 예시를 보여줍니다: +## Data with Custom Properties + +초기 세트가 2개의 커스텀 속성을 가지고 있다고 가정해 보겠습니다(위의 [data-formats.md](guides/data-formats.md)에서 제시된). -- **room** - 이벤트가 열리는 방 번호입니다. -- **holder** - 이벤트 담당자의 이름입니다. +- **room** - 이벤트가 발생하는 방의 번호. +- **holder** - 이벤트를 담당하는 사람의 이름. #### JSON @@ -179,17 +179,18 @@ END:VCALENDAR { "id":"1", "text":"Meeting", - "start_date":"2019-04-11 14:00", - "end_date":"2019-04-11 17:00" + "start_date":"2027-04-11 14:00", + "end_date":"2027-04-11 17:00" "room":327, "holder":"James" } ] ~~~ -데이터 소스에서 반환하는 모든 속성은 이벤트 객체에 추가되며, [클라이언트 사이드 API](guides/event-object-operations.md)를 통해 접근할 수 있습니다. -예시: +참고로, 모든 속성은 데이터 소스가 반환하는 모든 속성은 이벤트 객체에 추가되며 [클라이언트 측 API](guides/event-object-operations.md)에서 사용할 수 있습니다. + +예를 들어: ~~~js scheduler.templates.event_text = function(start, end, event){ @@ -204,8 +205,8 @@ scheduler.templates.event_text = function(start, end, event){ - 04/11/2013 14:00 - 04/11/2013 17:00 + 04/11/2027 14:00 + 04/11/2027 17:00 327 @@ -213,7 +214,7 @@ scheduler.templates.event_text = function(start, end, event){ ~~~ #### iCal -클라이언트 사이드에서는 속성명(DTSTART, DTEND, SUMMARY 제외)이 대문자에서 소문자로 변환된다는 점에 유의하세요: ROOM → room, HOLDER → holder. +참고로 클라이언트 측에서 속성 이름은 (DTSTART, DTEND 및 SUMMARY를 제외하고) 대문자에서 소문자로 변환됩니다: ROOM -> room, HOLDER -> holder. ~~~html BEGIN:VCALENDAR @@ -221,11 +222,11 @@ VERSION:2.0 PRODID:-//dhtmlXScheduler//NONSGML v2.2//EN DESCRIPTION: BEGIN:VEVENT -DTSTART:20130411T140000 -DTEND:20130411T170000 +DTSTART:20270411T140000 +DTEND:20270411T170000 SUMMARY:Meeting ROOM:327 HOLDER:James END:VEVENT END:VCALENDAR -~~~ +~~~ \ No newline at end of file diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/datastore-integration.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/datastore-integration.md deleted file mode 100644 index 38df7343..00000000 --- a/i18n/ko/docusaurus-plugin-content-docs/current/guides/datastore-integration.md +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: "dhtmlxDataStore와의 통합" -sidebar_label: "dhtmlxDataStore와의 통합" ---- - -# dhtmlxDataStore와의 통합 - -이 문서에서는 [dhtmlXDataStore](https://docs.dhtmlx.com/datastore__index.html) 객체를 사용하여 [여러 개의 스케줄러](guides/multiple-per-page.md)를 동기화하는 방법을 다룹니다. 스케줄러들은 이 공유 저장소에서 데이터를 받아오기 때문에, 한 스케줄러에서 이벤트가 변경되면 다른 스케줄러에도 자동으로 업데이트됩니다. - -:::note -참고: dhtmlxDataStore는 [dhtmlxSuite5](https://dhtmlx.com/docs/products/dhtmlxSuite5/) 패키지의 일부이며, 기본적으로 dhtmlxScheduler에는 포함되어 있지 않습니다. 하지만 dhtmlxSuite 라이선스가 없어도 dhtmlxDataStore를 dhtmlxScheduler와 함께 무료로 사용할 수 있습니다. 아래 단계를 따라 앱에 설정해보세요. -::: - -- [dhtmlxDataStore 패키지 다운로드](https://files.dhtmlx.com/30d/33230caa09f4b5030ea5bfe374ef6d57/dhtmlxDataStore.zip) -- 페이지에서 dhtmlxscheduler.js를 로드한 후 *dhtmlxcommon.js*와 *datastore.js*를 추가하세요. 반드시 아래와 같은 순서를 지켜야 합니다: - -~~~js - - - -~~~ - -DataStore를 통해 스케줄러를 동기화하는 일반적인 방법은 다음과 같습니다: - -~~~js -function init() { - var data = new dhtmlXDataStore({ - url:"data/data.json", - scheme:{ - $init:function(obj){ - if (typeof obj.start_date == "string"){ - obj.start_date = scheduler.templates.parse_date(obj.start_date); - obj.end_date = scheduler.templates.parse_date(obj.end_date); - } - } - } - }); - - scheduler1 = Scheduler.getSchedulerInstance(); - scheduler1.init('scheduler_here',new Date(2019,05,12),"week"); - scheduler1.sync(data, { copy:true }); - - - scheduler2 = Scheduler.getSchedulerInstance(); - scheduler2.init('scheduler_here_too',new Date(2019,05,12),"month"); - scheduler2.sync(data, { copy:true }); -} -~~~ - -위 코드에서 일어나는 과정을 간단히 설명하면 다음과 같습니다: - -1. 먼저, dhtmlXDataStore를 일반적인 방식으로 초기화합니다. 자세한 내용은 [Initialization](https://docs.dhtmlx.com/datastore__initialization.html) 및 [Data scheme](https://docs.dhtmlx.com/datastore__data_scheme.html) 항목을 [dhtmlXDataStore 문서](https://docs.dhtmlx.com/datastore__index.html)에서 확인할 수 있습니다. -2. 다음으로, 두 개의 스케줄러를 생성합니다. 일반적인 방식으로 생성하되, [sync](https://docs.dhtmlx.com/api__datastore_sync.html) 메서드를 사용하여 DataStore와 연결합니다. - -[sync](https://docs.dhtmlx.com/api__datastore_sync.html) 메서드는 스케줄러를 DataStore와 연결하며, 두 개의 파라미터를 받습니다: - -+ **data** - (필수) 스케줄러에 데이터를 제공하는 dhtmlXDataStore 인스턴스입니다. -+ **(copy:true)** - (필수) 스케줄러가 DataStore 데이터의 복사본을 생성하도록 지정합니다. - -두 번째 파라미터는 dhtmlxScheduler에만 해당하는 옵션으로, dhtmlXDataStore 공식 문서에는 나와 있지 않으니 주의가 필요합니다. - -이 옵션은 각 스케줄러에 대해 데이터의 별도 복사본을 만들도록 DataStore에 지시합니다. 따라서 위 예시에서 _DataStore_, _scheduler1_, _scheduler2_는 각각 자체 데이터셋을 유지하게 됩니다. 하지만 이러한 데이터셋을 직접 동기화할 필요는 없습니다. 한 스케줄러에서 변경이 발생하면 DataStore를 통해 다른 스케줄러의 데이터셋도 자동으로 업데이트됩니다. - -결과가 같아 보이는데 왜 이런 추가 단계가 필요한지 궁금할 수 있습니다. - -이유는 다음과 같습니다: 이벤트의 주요 속성 외에도, 각 이벤트에는 Scheduler가 실행 중에 할당하는 여러 내부 속성이 있습니다. 이 내부 속성들은 현재 선택된 뷰에 따라 달라질 수 있습니다. 예를 들어, 동일한 이벤트가 두 스케줄러에서 서로 다른 뷰로 표시되고 있다면, 내부 속성값이 일치하지 않아 이벤트가 잘못 표시될 수 있습니다. - -이런 경우, (**(copy:true)**) 파라미터를 사용하면 적절한 데이터 처리가 이루어져 이러한 문제를 방지할 수 있습니다. 그리고 이 외에도 데이터를 복제하는 것이 유용한 경우가 있습니다. - -예를 들어, 한 페이지에 두 개의 스케줄러가 같은 이벤트를 서로 다른 시간대(예: 모스크바와 런던)로 보여줘야 한다면, 하나의 데이터셋을 공유하는 방식으로는 올바르게 표시하기 어렵습니다. 각 스케줄러에 별도의 데이터셋을 두면 두 시간대 모두에서 이벤트를 올바르게 보여줄 수 있습니다. - - -[Integration with dhtmlXDataStore](https://docs.dhtmlx.com/scheduler/samples/10_integration/04_datastore.html) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/date-formats.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/date-formats.md index e91acc4f..bf0f3f33 100644 --- a/i18n/ko/docusaurus-plugin-content-docs/current/guides/date-formats.md +++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/date-formats.md @@ -1,67 +1,59 @@ --- -title: "날짜 작업" -sidebar_label: "날짜 작업" +title: "날짜 연산" +sidebar_label: "날짜 연산" --- -# 날짜 작업 +# 날짜 연산 -라이브러리에는 다양한 날짜 포맷팅 메서드를 제공하는 [date](api/other/date.md) 객체가 포함되어 있습니다. - -이 문서에서는 가장 중요하고 자주 사용되는 메서드들을 소개합니다. 전체 메서드 목록은 [date object page](api/other/date.md)에서 확인하실 수 있습니다. +라이브러리에는 [date](api/other/date.md) 객체가 포함되어 있으며, 이는 날짜 형식 지정 메서드의 세트를 제공합니다. +이 문서에서는 특히 중요하고 자주 사용되는 메서드를 살펴봅니다. 전체 메서드 목록은 [date object page](api/other/date.md)에서 확인하실 수 있습니다. ## Date 객체를 문자열로 변환하기 -Date 객체를 문자열로 변환하려면 [date_to_str](api/other/date.md) 메서드를 사용합니다: - +Date 객체를 문자열로 변환하려면 [date_to_str](api/other/date.md) 메서드를 사용하세요: -*이 메서드는 지정된 패턴에 따라 Date 객체를 문자열로 포맷팅하는 함수를 반환합니다:* +*이 메서드는 지정된 형식의 문자열로 Date 객체를 변환하는 함수를 반환합니다:* ~~~js -var formatFunc = scheduler.date.date_to_str("%d/%m/%Y"); -var date = formatFunc(new Date(2013, 05, 29)); // -> "29/06/2013" +const formatFunc = scheduler.date.date_to_str("%d/%m/%Y"); +const date = formatFunc(new Date(2027, 05, 29)); // -> "29/06/2027" ~~~ - -[Displaying several weeks in Week view](https://docs.dhtmlx.com/scheduler/samples/11_scales/03_two_work_weeks.html) +[주간 보기에서 여러 주 표시](https://docs.dhtmlx.com/scheduler/samples/11_scales/03_two_work_weeks.html) ## 문자열을 Date 객체로 변환하기 -문자열을 Date 객체로 변환하려면 [str_to_date](api/other/date.md) 메서드를 사용할 수 있습니다: - +문자열을 Date 객체로 변환하려면 [str_to_date](api/other/date.md) 메서드를 사용하세요: -*이 메서드는 지정된 형식의 문자열을 파싱하여 Date 객체를 반환하는 함수를 제공합니다:* +*이 메서드는 지정된 형식의 문자열을 Date 객체로 변환하는 함수를 반환합니다:* - -날짜 파싱 함수는 다음과 같이 생성할 수 있습니다: +다음과 같이 날짜 변환 함수를 생성할 수 있습니다: ~~~js -var formatFunc = scheduler.date.str_to_date("%d/%m/%Y"); -var date = formatFunc("29/06/2019"); // -> 2019년 6월 29일 00:00:00 +const formatFunc = scheduler.date.str_to_date("%d/%m/%Y"); +const date = formatFunc("29/06/2027"); // -> 29 June, 2027 00:00:00 ~~~ - ## UTC로 변환하기 -로컬 날짜와 시간을 UTC로 변환하려면 [convert_to_utc](api/other/date.md) 메서드를 사용하세요: +로컬 시간을 UTC로 변환하려면 [convert_to_utc](api/other/date.md) 메서드를 사용하세요: ~~~js -//2019년 6월 29일 14:00 (로컬 시간) -> 2019년 6월 29일 12:00 (UTC) -var time = scheduler.date.convert_to_utc(new Date(2019, 05, 29, 14, 00)); +//29 June, 2027 14:00 (local time) -> 29 June, 2027 12:00 (utc) +const time = scheduler.date.convert_to_utc(new Date(2027, 05, 29, 14, 00)); ~~~ ## 날짜에 시간 간격 더하기(빼기) -지정한 날짜에 시간 간격을 더하거나 빼려면 [add](api/other/date.md) 메서드를 사용할 수 있습니다: +지정된 날짜에 시간 간격을 더하기(빼기) 하려면 [add](api/other/date.md) 메서드를 사용하세요: ~~~js -//지정한 날짜에 1년을 더함: 2019년 6월 29일 -> 2020년 6월 29일 -var newDate = scheduler.date.add(new Date(2019, 05, 29), 1, 'year'); +//지정된 날짜에 1년을 더합니다: 29 June, 2027 -> 29 June, 2020 +const newDate = scheduler.date.add(new Date(2027, 05, 29), 1, 'year'); ~~~ - -[Changing the Y-Axis step](https://docs.dhtmlx.com/scheduler/samples/02_customization/09_timestep.html) - +[Y 축 간격 변경](https://docs.dhtmlx.com/scheduler/samples/02_customization/09_timestep.html) :::note -날짜 포맷팅 메서드 전체 목록은 [여기](api/other/date.md)에서 확인하실 수 있습니다. -::: +날짜 형식 지정 메서드의 전체 목록은 [여기](api/other/date.md)에서 확인하실 수 있습니다. +::: \ No newline at end of file diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/dhtmlx-components-integration.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/dhtmlx-components-integration.md deleted file mode 100644 index 52bfd139..00000000 --- a/i18n/ko/docusaurus-plugin-content-docs/current/guides/dhtmlx-components-integration.md +++ /dev/null @@ -1,129 +0,0 @@ ---- -title: "드래그 앤 드롭(Drag-and-Drop) 작업" -sidebar_label: "드래그 앤 드롭(Drag-and-Drop) 작업" ---- - -# 드래그 앤 드롭(Drag-and-Drop) 작업 - -이 라이브러리에는 **outerdrag** 확장이 포함되어 있어, 외부 DHTMLX 컴포넌트나 다른 스케줄러에서 요소를 드래그하여 새로운 이벤트를 생성할 수 있습니다. - -## 외부 컴포넌트에서 드래그하기 {#draggingfromexternalcomponents} - -외부 소스에서 요소를 스케줄러로 드래그하면, 스케줄러는 자동으로 라이트박스를 열어 새로운 이벤트를 생성합니다. - - -![external_dnd](/img/external_dnd.png) - - -[Integration with dhtmlxTree](https://docs.dhtmlx.com/scheduler/samples/10_integration/02_dhtmlxtree_outer_drag.html) - - -아래는 dhtmlxTree 컴포넌트와 함께 외부 드래그 앤 드롭이 동작하는 방식입니다. - -스케줄러를 dhtmlxTree와 통합하려면 다음 단계를 따르세요: - -1. dhtmlxTree 패키지를 다운로드하여, 압축을 해제한 뒤 애플리케이션 루트 폴더에 넣으세요. -2. 필요한 js 및 css 파일을 페이지에 포함하세요: -~~~html - - -... -~~~ -3. outerdrag 확장을 활성화하세요: -~~~js -scheduler.plugins({ - outerdrag: true -}); -~~~ -4. dhtmlxTree 컴포넌트를 초기화하세요 (설명은 여기 참고): -~~~js -var tree = new dhtmlXTreeObject("treebox", "100%", "100%", 0); -tree.setImagePath("../common/dhtmlxTree/imgs/csh_yellowbooks/"); -tree.loadXML("./data/tree.xml"); -~~~ -5. dhtmlxTree 컴포넌트에서 드래그 앤 드롭을 활성화하세요 (설명은 여기 참고): -~~~js -tree.enableDragAndDrop(true); -~~~ -6. 스케줄러를 초기화 및 설정하세요: -~~~js -... -scheduler.init('scheduler_here', new Date(2019, 5, 30), "timeline"); -~~~ -7. 드래그된 요소의 텍스트가 이벤트에 어떻게 할당될지 정의하기 위해 [onExternalDragIn](api/event/onexternaldragin.md) 이벤트에 핸들러를 추가하세요: -~~~js -scheduler.attachEvent("onExternalDragIn", function(id, source, event){ - var label = tree.getItemText(tree._dragged[0].id); - scheduler.getEvent(id).text = label; - return true; -}); -~~~ - - -[Integration with dhtmlxTree](https://docs.dhtmlx.com/scheduler/samples/10_integration/02_dhtmlxtree_outer_drag.html) - - -이 과정을 마치면, 트리에서 원하는 노드를 드래그 앤 드롭하여 간단하게 새 이벤트를 생성할 수 있습니다. - -## 스케줄러 간 드래그 앤 드롭 {#drag-events} - -:::note -이 기능은 2021년 10월 6일 이후 Commercial, Enterprise, Ultimate 라이선스에서만 사용할 수 있습니다. -::: - -[한 페이지에 여러 스케줄러를 표시](guides/multiple-per-page.md)할 때, 스케줄러 간에 드래그 앤 드롭을 활성화하여 이벤트를 서로 이동할 수 있습니다. - -스케줄러 간 드래그 앤 드롭을 지원하려면 "**drag_between**" 확장을 포함하세요: - -~~~js title="여러 스케줄러 간 드래그 앤 드롭 지원 활성화" - - - - -~~~ - -**"samples/20_multiple/06_drag_between_layout.html"** 샘플은 [Scheduler PRO 패키지](https://dhtmlx.com/docs/products/dhtmlxScheduler/)에 포함되어 있습니다. - -### 스케줄러에서 이벤트 드래그 제한하기 -스케줄러에서 이벤트를 밖으로 드래그하지 못하게 하려면 [drag_out](api/config/drag_out.md) 속성을 *false*로 설정하세요: - -~~~js -scheduler.config.drag_out = false; // 이 스케줄러에서 이벤트를 밖으로 드래그하는 것 비활성화 /*!*/ -scheduler.init('scheduler_here',new Date(2019, 5,30),"week"); -scheduler.load("./data/units.xml"); - -scheduler2 = Scheduler.getSchedulerInstance(); -scheduler2.init('scheduler_here_2',new Date(2019, 5, 30),"week"); -~~~ - - -스케줄러로 이벤트를 드래그해오는 것을 막으려면 [drag_in](api/config/drag_in.md) 속성을 *false*로 설정하세요: - -~~~js -scheduler.init('scheduler_here',new Date(2019, 5, 30),"week"); -scheduler.load("./data/units.xml"); - -scheduler2.config.drag_in = false; // 이 스케줄러로 이벤트를 드래그해오는 것 비활성화 /*!*/ -scheduler2 = Scheduler.getSchedulerInstance(); -scheduler2.init('scheduler_here_2',new Date(2019, 5, 30),"week"); -~~~ - -**"samples/20_multiple/06_drag_between_layout.html"** 샘플은 [Scheduler PRO 패키지](https://dhtmlx.com/docs/products/dhtmlxScheduler/)에서 확인할 수 있습니다. - -### 드래그 관련 이벤트 - -- [onBeforeEventDragOut](api/event/onbeforeeventdragout.md) - 이벤트가 스케줄러에서 밖으로 드래그되기 전에 발생 -- [onEventDragOut](api/event/oneventdragout.md) - 이벤트가 스케줄러에서 밖으로 드래그될 때 발생 -- [onBeforeEventDragIn](api/event/onbeforeeventdragin.md) - 드래그된 이벤트가 스케줄러로 들어오기 전에 발생 -- [onEventDragIn](api/event/oneventdragin.md) - 드래그된 이벤트가 스케줄러 위로 이동할 때 발생 -- [onEventDropOut](api/event/oneventdropout.md) - 드래그된 이벤트가 스케줄러 영역 밖에 드롭될 때 발생 diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/dhxlayout-integration.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/dhxlayout-integration.md deleted file mode 100644 index e402de4a..00000000 --- a/i18n/ko/docusaurus-plugin-content-docs/current/guides/dhxlayout-integration.md +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: "dhtmlxLayout와의 통합" -sidebar_label: "dhtmlxLayout와의 통합" ---- - -# dhtmlxLayout와의 통합 - -dhtmlxLayout를 사용하면 [여러 개의 스케줄러](guides/multiple-per-page.md)를 한 페이지에 효과적으로 배치할 수 있습니다. dhtmlxLayout는 세련된 프레임을 제공하며, 페이지 크기 변화에 유연하게 적응하면서 다른 페이지 요소와의 상호작용을 관리하는 데 도움을 줍니다. - -:::note -dhtmlxLayout는 dhtmlxScheduler 라이브러리에 포함되어 있지 않습니다. 사용하는 dhtmlxSuite 라이브러리 버전에 따라 두 가지 버전의 Layout이 제공됩니다. -::: - -## dhtmlxSuite v5+ - -이 버전에서는 dhtmlxLayout를 독립형 제품 또는 dhtmlxSuite 라이브러리의 일부로 사용할 수 있습니다. 프로젝트에 dhtmlxLayout v5.X를 포함하려면 [라이선스 구매](https://dhtmlx.com/docs/products/dhtmlxSuite5/)가 필요합니다. - -**dhtmlxScheduler 인스턴스를 레이아웃 셀에 추가하려면** [attachScheduler()](https://docs.dhtmlx.com/api__dhtmlxcell_attachscheduler.html) 메서드를 사용하세요. - -**참고:** 스케줄러를 셀에 연결하면 자동으로 초기화됩니다. 따라서, 스케줄러를 레이아웃에 추가하기 전에 먼저 설정을 구성해야 합니다. - -~~~js -function init() { - var dhxLayout = new dhtmlXLayoutObject(document.body, "2U"); - - sched1 = Scheduler.getSchedulerInstance(); - sched1.config.multi_day = true; - dhxLayout.cells("a").attachScheduler(new Date(2019,05,30),"week",null,sched1); - sched1.load("/data/units") - - sched2 = Scheduler.getSchedulerInstance(); - dhxLayout.cells("b").attachScheduler(new Date(2019,05,30),"month",null,sched2); - sched2.load("/data/units") -} -~~~ - - -[Integration with dhtmlxLayout (dhx_terrace skin, Suite v5.1)](https://docs.dhtmlx.com/scheduler/samples/10_integration/05_dhtmlxlayout_terrace.html) - - -## dhtmlxSuite v6+ - -dhtmlxSuite 6.0부터는 dhtmlxLayout가 전체 Suite 라이브러리의 일부로만 제공됩니다. 이 방식을 사용하려면 [Suite 6.X 라이브러리](https://dhtmlx.com/docs/products/dhtmlxSuite/#licensing)에 대한 라이선스가 필요합니다. - -[버전 5.3](guides/what-s-new.md#53)부터 dhtmlxScheduler는 dhtmlxSuite v6+와 호환되는 공통 View 인터페이스를 구현하여 [어떤 셀에도 직접 연결](https://docs.dhtmlx.com/suite/layout/api/cell/layout_cell_attach_method/)할 수 있습니다. - -~~~js -// 스케줄러 인스턴스 생성 및 설정 -scheduler.config.header = [ - "day", - "week", - "month", - "date", - "prev", - "today", - "next" -]; -scheduler.config.multi_day = true; - -// 스케줄러가 연결된 후 onSchedulerReady가 발생합니다 -scheduler.attachEvent("onSchedulerReady", function () { - requestAnimationFrame(function(){ - // 여기서 초기 뷰와 날짜를 설정하고 데이터를 로드할 수 있습니다 - scheduler.setCurrentView(new Date(2017,5,3), "week"); - scheduler.load("../common/events.json"); - }); - -}); - -const layout = new dhx.Layout("layout", { - rows: [{ - id: "scheduler-cell", - header: "Appointment Scheduler", - html:"
" - }] -}); -layout.cell("scheduler-cell").attach(scheduler); -~~~ - -### 주의 사항 - -- `dhtmlxSuite Layout`은 비동기적으로 동작하므로, `.attach`를 호출한 직후에는 스케줄러가 바로 준비되지 않습니다. -- 초기화 이후 작업을 수행하려면 "onSchedulerReady" 이벤트를 반드시 감지해야 합니다. -- 현재 **dhtmlxSuite v6+와 함께 사용할 때 스케줄러 마크업을 지정하는 옵션은 없습니다**. 따라서 내비게이션 패널의 컨트롤은 [header](api/config/header.md) 설정을 통해 구성해야 합니다. diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/drag-between.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/drag-between.md new file mode 100644 index 00000000..bd398191 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/drag-between.md @@ -0,0 +1,70 @@ +--- +title: "스케줄러 간 드래그 앤 드롭" +sidebar_label: "스케줄러 간 드래그 앤 드롭" +--- + +# 스케줄러 간 드래그 앤 드롭 + +:::info +해당 기능은 Commercial(2021년 10월 6일 이후), Enterprise 및 Ultimate 라이선스에서만 사용할 수 있습니다. +::: + + +페이지에 [여러 스케줄러를 표시하는 경우](guides/multiple-per-page.md), 스케줄러 간의 드래그 앤 드롭 작업을 활성화할 수 있어 사용자가 한 스케줄러의 이벤트를 다른 스케줄러로 드래그하거나 그 반대 방향으로 이동시킬 수 있습니다. + +스케줄러에 드래그 앤 드롭 지원을 활성화하려면 페이지에 **"drag_between"** 확장 기능을 포함시키면 됩니다: + +[여러 스케줄러에 대한 드래그 앤 드롭 지원 활성화](Enabling drag-and-drop support for several schedulers) +~~~html + + + + +~~~ + +샘플 **"samples/20_multiple/06_drag_between_layout.html"** 는 [Scheduler PRO 패키지](https://dhtmlx.com/docs/products/dhtmlxScheduler/)에 포함되어 있습니다. + +### 하나의 스케줄러로부터/로부터의 드래그 차단 +스케줄러로부터 드래그 이벤트를 차단하려면 [drag_out](api/config/drag_out.md) 속성을 *false*로 설정합니다: + +~~~js +scheduler.config.drag_out = false;//restrict dragging events from this scheduler /*!*/ +scheduler.init('scheduler_here',new Date(2027, 5,30),"week"); +scheduler.load("./data/units.xml"); + +scheduler2 = Scheduler.getSchedulerInstance(); +scheduler2.init('scheduler_here_2',new Date(2027, 5, 30),"week"); +~~~ + + +스케줄러로의 드래그 이벤트를 차단하려면 [drag_in](api/config/drag_in.md) 속성을 *false*로 설정합니다: + +~~~js +scheduler.init('scheduler_here',new Date(2027, 5, 30),"week"); +scheduler.load("./data/units.xml"); + + +scheduler2.config.drag_in = false;//restrict dragging events to this scheduler /*!*/ +scheduler2 = Scheduler.getSchedulerInstance(); +scheduler2.init('scheduler_here_2',new Date(2027, 5, 30),"week"); +~~~ + +샘플 **"samples/20_multiple/06_drag_between_layout.html"** 은 [Scheduler PRO 패키지](https://dhtmlx.com/docs/products/dhtmlxScheduler/)에 포함되어 있습니다. + +### 드래그 이벤트 + +- [onBeforeEventDragOut](api/event/onbeforeeventdragout.md) - 드래그된 이벤트가 스케줄러 밖으로 이동하기 전에 발생합니다 +- [onEventDragOut](api/event/oneventdragout.md) - 드래그된 이벤트가 스케줄러 밖으로 이동할 때 발생합니다 +- [onBeforeEventDragIn](api/event/onbeforeeventdragin.md) - 드래그된 이벤트가 스케줄러 위로 이동하기 전에 발생합니다 +- [onEventDragIn](api/event/oneventdragin.md) - 드래그된 이벤트가 스케줄러 위로 이동할 때 발생합니다 +- [onEventDropOut](api/event/oneventdropout.md) - 드래그된 이벤트가 스케줄러 영역 밖으로 드롭될 때 발생합니다 \ No newline at end of file diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/event-object-operations.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/event-object-operations.md index c795806f..6fc7699a 100644 --- a/i18n/ko/docusaurus-plugin-content-docs/current/guides/event-object-operations.md +++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/event-object-operations.md @@ -1,98 +1,99 @@ ---- -title: "이벤트 객체 작업" -sidebar_label: "이벤트 객체 작업" +--- +title: "이벤트 객체 조작" +sidebar_label: "이벤트 객체 조작" --- -# 이벤트 객체 작업 +# 이벤트 객체 조작 ## 이벤트 객체 가져오기 -이벤트 객체를 가져오려면 [getEvent](api/method/getevent.md) 메서드를 사용하세요: +이벤트 객체를 가져오려면 [getEvent](api/method/getevent.md) 메서드를 사용합니다: ~~~js scheduler.parse([ - {id:1, start_date:"2019-05-13 6:00", end_date:"2019-05-13 8:00", text:"Event 1"}, - {id:2, start_date:"2019-06-09 6:00", end_date:"2019-06-09 8:00", text:"Event 2"} + {id:1, start_date:"2027-05-13 6:00", end_date:"2027-05-13 8:00", text:"Event 1"}, + {id:2, start_date:"2027-06-09 6:00", end_date:"2027-06-09 8:00", text:"Event 2"} ]); ... -var eventObj = scheduler.getEvent(1); -//->{id:1, start_date:"2019-05-13 6:00", end_date:"2019-05-13 8:00", text:"Event 1"} +const eventObj = scheduler.getEvent(1); +//->{id:1, start_date:"2027-05-13 6:00", end_date:"2027-05-13 8:00", text:"Event 1"} ~~~ -## 지정된 기간 내의 이벤트 가져오기 +## 지정된 기간의 이벤트 가져오기 -특정 기간 동안 발생하는 이벤트 목록을 얻으려면 [getEvents](api/method/getevents.md) 메서드를 사용하세요: +지정된 기간 동안 발생하는 이벤트 컬렉션을 가져오려면 [getEvents](api/method/getevents.md) 메서드를 사용합니다: ~~~js -var evs = scheduler.getEvents(new Date(2019,1,10),new Date(2019,2,10)); -//여기서 evs는 이벤트 객체의 배열입니다. +const evs = scheduler.getEvents(new Date(2027,1,10),new Date(2027,2,10)); +//where evs is an array of events' objects ~~~ ## 스케줄러의 모든 이벤트 가져오기 -스케줄러에 현재 로드된 모든 이벤트를 가져오려면, 아래와 같이 [getEvents](api/method/getevents.md) 메서드를 파라미터 없이 호출하세요: +스케줄러에 로드된 모든 이벤트를 가져오려면 매개변수 없이 [getEvents](api/method/getevents.md) 메서드를 호출합니다: ~~~js -var evs = scheduler.getEvents(); -// 모든 이벤트를 객체 배열로 반환합니다. +const evs = scheduler.getEvents(); +// returns all events as an array of objects ~~~ -## 현재 날짜부터 다음 이벤트 가져오기 +## 현재 날짜에서 시작하는 다음 이벤트 가져오기 ~~~js -var evs = scheduler.getEvents(new Date(), new Date(9999,1,1)); -//evs - 모든 다가오는 이벤트 목록 +const evs = scheduler.getEvents(new Date(), new Date(9999,1,1)); +//evs - list of all oncoming events evs.sort(function(a,b){ return (a.start_date > b.start_date ? 1 : -1); }); //evs[0] - 가장 가까운 다가오는 이벤트 ~~~ -## 이벤트의 id 가져오기 +## 이벤트의 ID 얻기 -이벤트의 속성 값 중 하나를 기반으로 이벤트의 id를 찾으려면 다음과 같은 방법을 사용할 수 있습니다: +이벤트의 속성 값 중 하나를 사용하여 이벤트의 ID를 얻으려면 다음과 같은 방법을 사용합니다: -~~~js title="Getting the event's id by the event's text" +예: 이벤트의 텍스트로 이벤트의 ID를 얻기. +~~~js scheduler.parse([ - {id:1, start_date:"2019-05-13 6:00", end_date:"2019-05-13 8:00", text:"Event 1"}, - {id:2, start_date:"2019-06-09 6:00", end_date:"2019-06-09 8:00", text:"Event 2"} + {id:1, start_date:"2027-05-13 6:00", end_date:"2027-05-13 8:00", text:"Event 1"}, + {id:2, start_date:"2027-06-09 6:00", end_date:"2027-06-09 8:00", text:"Event 2"} ]); ... -var evs = scheduler.getEvents(); //스케줄러에서 모든 이벤트를 가져옵니다. -for(var i="0;i 2 + const eventId = evs[i].id;// -> 2 }; ~~~ -이벤트의 대략적인 시간이 알려져 있다면, 성능 향상을 위해 이벤트를 가져올 때 범위를 제한하는 것이 좋습니다: + 필요 이벤트가 발생하는 대략적인 시간을 알고 있다면, 앱의 속도를 높이기 위해 반환되는 이벤트 컬렉션을 제한하는 것이 좋습니다: ~~~js -var evs = scheduler.getEvents(new Date(2019,05,01),new Date(2019,05,10)); -for(var i="0;i 2 + const eventId = evs[i].id;// -> 2 }; ~~~ -## 이벤트의 id 변경하기 +## 이벤트의 ID 변경 -이벤트의 id를 업데이트하려면, [changeEventId](api/method/changeeventid.md) 메서드를 다음과 같이 사용할 수 있습니다: +현재 이벤트의 ID를 변경하려면 [changeEventId](api/method/changeeventid.md) 메서드를 아래와 같이 사용할 수 있습니다: ~~~js -scheduler.changeEventId("ev15", "ev25"); //이벤트 id "ev15"를 "ev25"로 변경합니다. +scheduler.changeEventId("ev15", "ev25"); //changes the event id "ev15" -> "ev25" ~~~ -## 라이트박스 옵션의 레이블을 이벤트 텍스트로 설정하기 +## 라이트박스 옵션의 레이블을 이벤트의 텍스트로 설정하기 -기본적으로, Scheduler 이벤트의 텍스트는 라이트박스에서 매핑된 text 필드의 값으로 설정됩니다. +기본적으로 스케줄러 이벤트의 텍스트는 라이트박스의 매핑된 텍스트 필드를 통해 설정됩니다. ![default_event_text](/img/default_event_text.png) -기본 동작을 오버라이드하여, 콤보박스에서 선택한 옵션의 레이블을 이벤트의 텍스트로 사용할 수도 있습니다. +또한 기본 동작을 재정의하고 콤보박스에서 선택된 옵션의 레이블을 이벤트의 텍스트로 사용하는 것도 가능합니다. ![option_event_text](/img/option_event_text.png) -이벤트 텍스트는 뷰 타입에 따라 [event_text](api/template/event_text.md) 또는 [event_bar_text](api/template/event_bar_text.md) 중 하나의 템플릿에 의해 결정됩니다. 이벤트에 텍스트가 추가되는 방식을 커스터마이즈하려면 적절한 템플릿을 재정의해야 합니다. +이벤트의 텍스트는 뷰의 유형에 따라 다음 템플릿 중 하나([event_text](api/template/event_text.md) 또는 [event_bar_text](api/template/event_bar_text.md))으로 지정됩니다. 따라서 이벤트에 텍스트를 추가하는 방식을 변경하려면 해당 템플릿을 재정의해야 합니다. ~~~js scheduler.config.lightbox.sections = [ @@ -107,9 +108,9 @@ scheduler.config.lightbox.sections = [ ]; scheduler.templates.event_text = scheduler.templates.event_bar_text = function(start, end, event){ - var options = scheduler.serverList("options"); + const options = scheduler.serverList("options"); - for(var i = 0; i < options.length; i++){ + for(let i = 0; i < options.length; i++){ if(options[i].key == event.type){ return options[i].label; } @@ -119,10 +120,10 @@ scheduler.templates.event_text = scheduler.templates.event_bar_text = function(s }; ~~~ -위 코드와 관련하여 참고해야 할 몇 가지 사항: +다음과 같은 주의사항이 위 코드에 관련하여 있습니다: -- [serverList](api/method/serverlist.md) 메서드는 콤보박스에 대한 옵션을 제공하며, 템플릿 내에서 이를 가져옵니다. 또한 커넥터를 통해 다른 데이터와 함께 옵션을 로드하거나 동적으로 업데이트하는 데 사용할 수 있습니다. +- [serverList](api/method/serverlist.md) 메서드는 콤보박스의 옵션을 제공하고 템플릿 안에서 이를 가져오는 데 사용됩니다. JSON 컬렉션을 통해 이벤트 데이터와 함께 옵션을 로드하고(데이터 형식 참조: [Data formats](guides/data-formats.md#json-with-collections)) 나중에 [updateCollection](api/method/updatecollection.md)으로 업데이트할 수 있습니다. -- 템플릿은 선택된 항목을 찾기 위해 선형 탐색을 수행합니다. 이벤트나 옵션이 많은 경우, 이 템플릿이 자주 호출되므로 성능에 영향을 줄 수 있습니다. 효율성을 높이려면 배열을 매번 순회하는 대신 해시를 생성하여 빠르게 조회하는 방법을 고려하세요. +- 템플릿 내부에는 선택된 항목에 대한 선형 탐색이 존재합니다. 이벤트/옵션이 많아지면 성능에 눈에 띄는 영향을 줄 수 있는데, 이러한 템플릿은 자주 호출될 수 있기 때문입니다. 이 문제를 해결하려면 배열을 계속 반복하는 대신 빠른 검색을 위한 해시를 만들어 사용할 수 있습니다. -- 클라이언트 측에서 옵션을 제대로 표시하려면 전체 옵션 목록이 미리 로드되어 있어야 합니다. 그렇지 않은 경우, 예를 들어 자동완성 검색 등에서 옵션을 동적으로 가져오는 경우에는 옵션을 수동으로 로드해야 합니다. +- 클라이언트 측에는 표시를 위해 옵션의 전체 목록이 있어야 합니다. 그렇지 않으면 예를 들어 자동완성 검색 기능을 사용하는 경우 필요한 옵션을 동적으로 로드해야 하므로 옵션을 수동으로 로드해야 할 수 있습니다. \ No newline at end of file diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/excel.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/excel.md deleted file mode 100644 index 4b7e7961..00000000 --- a/i18n/ko/docusaurus-plugin-content-docs/current/guides/excel.md +++ /dev/null @@ -1,130 +0,0 @@ ---- -title: "엑셀 및 iCal로 내보내기" -sidebar_label: "엑셀 및 iCal로 내보내기" ---- - -# 엑셀 및 iCal로 내보내기 - -버전 4.2부터 dhtmlxScheduler는 모든 스케줄러 데이터를 엑셀(Excel) 및 iCal 형식으로 내보내는 기능을 제공합니다. - -## 요청 크기 제한 - -여러 내보내기 방법(*exportToPDF*, *exportToPNG* 등)에 사용되는 공용 API 엔드포인트 **https://export.dhtmlx.com/scheduler**가 있습니다. **최대 요청 크기는 10MB**입니다. - -## 엑셀로 내보내기 - -스케줄러 데이터를 엑셀 파일로 내보내려면 다음 단계를 따르세요: - -1. 온라인 내보내기 서비스를 활성화하려면 "https://export.dhtmlx.com/scheduler/api.js" 스크립트를 페이지에 추가하세요: -~~~html - - /*!*/ - -~~~ -2. exportToExcel 메서드를 사용하여 스케줄러 데이터를 내보냅니다: -~~~html -/*!*/ - - -~~~ - -#### 내보내기 메서드의 파라미터 - -**exportToExcel()** 메서드는 여러 속성을 포함하는 선택적 객체를 인자로 받을 수 있습니다: - - - - - - - - - - - - - - - - - - - - - - - - -
name(string) '.xlsx' 확장자를 포함한 출력 파일 이름
columns(array) 출력 시트의 컬럼을 설정합니다
  • 'id' - (string/number) 컬럼에 매핑될 이벤트 속성 ID
  • 'header' - (string) 컬럼 헤더 텍스트
  • 'width' - (number) 픽셀 단위의 컬럼 너비
server(string) 내보내기 요청을 보낼 API 엔드포인트를 지정합니다. 로컬에 설치된 내보내기 서비스를 지정할 수도 있습니다. 기본값은 https://export.dhtmlx.com/scheduler입니다.
start(string|object) 내보낼 데이터 범위의 시작 날짜를 설정합니다
end(string|object) 내보낼 데이터 범위의 종료 날짜를 설정합니다
- - -~~~js title="Calling the export method with optional properties" -scheduler.exportToExcel({ - name:"My document.xls", - columns:[ - { id:"text", header:"Title", width:150 }, - { id:"start_date", header:"Start date", width:250 } - ], - server:"https://myapp.com/myexport/scheduler", - start: new Date(1999, 01, 01), - end: new Date(2022, 01, 01) -}); -~~~ - -#### 날짜 형식 설정 - -내보낸 엑셀 파일에서 날짜가 표시되는 방식을 제어하려면 **xml_format** 템플릿을 다음과 같이 설정하세요: - -~~~js -scheduler.templates.xml_format = scheduler.date.date_to_str("%Y-%m-%d %H:%i"); -~~~ - -**Related sample** [Setting date format](https://snippet.dhtmlx.com/5/6d3de8fa2) - -날짜 포맷에 대한 자세한 내용은 [여기](guides/settings-format.md)에서 확인할 수 있습니다. - -## iCal로 내보내기 - -스케줄러 데이터를 iCal 문자열로 내보내려면 다음 절차를 따르세요: - -- 온라인 내보내기 서비스를 활성화하려면 "https://export.dhtmlx.com/scheduler/api.js" 스크립트를 포함하세요: - -~~~html - - /*!*/ - -~~~ - -- exportToICal 메서드를 사용하여 스케줄러 데이터를 내보냅니다: - -~~~html -/*!*/ - - -~~~ - -#### 내보내기 메서드의 파라미터 - -**exportToICal()** 메서드는 다음 속성을 포함하는 선택적 객체를 인자로 받을 수 있습니다: - - - - - - - - -
server(string) 내보내기 요청을 보낼 API 엔드포인트를 지정합니다. 로컬에 설치된 내보내기 서비스를 지정할 수도 있습니다. 기본값은 https://export.dhtmlx.com/scheduler입니다.
- - -~~~js title="Calling the export method with optional properties" -scheduler.exportToICal({ - server:"https://myapp.com/myexport/scheduler" -}); -~~~ diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/export.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/export.md deleted file mode 100644 index d485e0e1..00000000 --- a/i18n/ko/docusaurus-plugin-content-docs/current/guides/export.md +++ /dev/null @@ -1,175 +0,0 @@ ---- -title: "데이터 직렬화: XML, JSON, iCal" -sidebar_label: "데이터 직렬화: XML, JSON, iCal" ---- - -# 데이터 직렬화: XML, JSON, iCal - -## 준비하기 - -이 기능을 사용하려면 **serialize** 확장 기능을 활성화하면 됩니다. - -~~~js -scheduler.plugins({ - serialize: true -}); -~~~ - -## XML로 내보내기 - -스케줄러 데이터를 XML 문자열로 변환하려면 [toXML](api/method/toxml.md) 메서드를 사용하세요: - -~~~js -var xml = scheduler.toXML(); //xml string -~~~ - - -[Serialize scheduler events](https://docs.dhtmlx.com/scheduler/samples/04_export/01_serialize_data.html) - - -## JSON으로 내보내기 - -스케줄러 데이터를 JSON 문자열로 변환하려면 [toJSON](api/method/tojson.md) 메서드를 사용하세요: - -~~~js -var json_string = scheduler.toJSON(); //json string -~~~ - -:::note -이 메서드는 JavaScript 객체가 아닌 JSON 문자열을 반환합니다. 만약 JSON 객체가 필요하다면 [getEvents](api/method/getevents.md) 메서드를 사용하세요. -::: - - -[Serialize scheduler events](https://docs.dhtmlx.com/scheduler/samples/04_export/01_serialize_data.html) - - -## iCal로 내보내기 - -스케줄러 데이터를 iCal 문자열로 변환하려면 [toICal](api/method/toical.md) 메서드를 사용하세요: - -~~~js -var ical_string = scheduler.toICal(); //ical string -~~~ - -또한, [iCal 가져오기-내보내기 작업을 위한 외부 스크립트](guides/ical-export-import.md)도 있습니다. - - -[Serialize scheduler events](https://docs.dhtmlx.com/scheduler/samples/04_export/01_serialize_data.html) - - -## 직렬화 시 포함되는 속성 - -:::note -이 방식은 iCal 포맷에는 적용되지 않습니다. -::: - -기본적으로 내보내기에는 표준 속성(프로퍼티)만 포함됩니다: - -1. id -2. text -3. start_date (*직렬화 형식은 [date_format](api/config/date_format.md) 프로퍼티로 제어됩니다*) -4. end_date - -사용자 정의 속성을 포함하려면 **data_attributes** 메서드를 오버라이드할 수 있습니다. 간단한 예시는 다음과 같습니다: - -~~~js -scheduler.data_attributes = function(){ - return [ - ["id"],["text"],["date_start"],["date_end"], - ["custom_attribute"] - ]; -}; -~~~ - -이 메서드는 속성 이름의 목록을 반환합니다. - -직렬화 전에 속성 데이터를 처리할 포맷팅 함수를 지정할 수도 있습니다. - -날짜를 XML에 추가하기 전에 포맷팅이 필요한 경우 유용합니다. - -~~~js -scheduler.data_attributes = function(){ - return [ - ["id"], - ["text"], - ["start_date",scheduler.templates.format_date], - ["end_date",scheduler.templates.format_date]]; -} -~~~ - -## 반복 이벤트 직렬화 - -:::note -이 기술은 iCal 포맷에는 적용되지 않습니다. -::: - -"recurring" 확장 기능을 사용할 경우, 반복 이벤트와 관련된 추가 속성을 정의해야 합니다: - -~~~js -scheduler.data_attributes = function(){ - var empty = function(a){ return a||""; } - return [["id"], - ["text"], - ["start_date",scheduler.templates.xml_format], - ["end_date",scheduler.templates.xml_format], - ["rec_type",empty], - ["event_length",empty], - ["event_pid",empty]]; -} -~~~ - -## XML 파일로 데이터 저장하기 - -직렬화를 사용하면 데이터베이스 없이도 XML 파일에 데이터를 저장할 수 있습니다. - -- 먼저, **serialize** 확장 기능을 활성화합니다: - -~~~js -scheduler.plugins({ - serialize: true -}); -~~~ - -- 다음으로, 데이터를 저장할 숨겨진 폼을 페이지에 추가합니다: - -~~~xml -
- -
-~~~ - -- 페이지에 "저장" 버튼을 추가합니다 - -~~~html - -~~~ - -~~~js -function save(){ - var form = document.getElementById("xml_form"); - form.elements.data.value = scheduler.toXML(); - form.submit(); -} -~~~ - -- 서버 측에서는 데이터를 기존 파일에 기록합니다. xml_writer.php는 다음과 같을 수 있습니다: - -~~~php - -~~~ - -빈 data.xml 파일은 다음과 같습니다: - -~~~xml - -~~~ - -이 설정을 사용하면 스케줄러는 data.xml에서 이벤트를 불러올 수 있으며, "저장" 버튼을 누르면 현재 스케줄러 상태를 XML로 직렬화하여 파일에 다시 저장합니다. - -이렇게 하면 다음에 스케줄러를 불러올 때 이전에 저장한 이벤트가 표시됩니다. - -## 문제 해결 - -저장 시 원하지 않는 데이터 이스케이프가 발생한다면, PHP 설정에서 "magic_quotes"가 꺼져 있는지 확인하세요. diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/extensions-list.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/extensions-list.md index 9662992f..55912d16 100644 --- a/i18n/ko/docusaurus-plugin-content-docs/current/guides/extensions-list.md +++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/extensions-list.md @@ -1,23 +1,23 @@ --- -title: "전체 확장 기능 목록" -sidebar_label: "전체 확장 기능 목록" +title: "확장 기능 전체 목록" +sidebar_label: "확장 기능 전체 목록" --- -# 전체 확장 기능 목록 +# 확장 기능 전체 목록 -dhtmlxScheduler는 기본 기능을 확장하는 다양한 확장 기능을 제공합니다. +dhtmlxScheduler에는 표준 동작에 기능을 추가하는 여러 확장 기능이 포함되어 있습니다. -확장 기능을 활성화하려면 [scheduler.plugins](api/method/plugins.md) 메서드를 사용하여 활성화하세요. +확장 기능을 사용하려면 [`plugins()`](api/method/plugins.md) 메서드로 활성화합니다. :::info -v6.0부터 확장 기능 코드 파일이 **ext** 폴더에서 제거되고 *dhtmlxscheduler.js* 파일에 통합되었습니다. +v6.0 버전에서 확장 기능 코드 파일은 스케줄러 코드베이스의 **ext** 폴더에서 제거되었고 *dhtmlxscheduler.js* 파일에 포함되었습니다. -dhtmlxScheduler 5.3 이하 버전을 사용하는 경우 [마이그레이션 가이드](migration.md#53---60)를 참조하세요. +dhtmlxScheduler 5.3 및 그 이전 버전의 경우, [마이그레이션 문서](migration.md#53---60)를 확인하십시오. ::: -## Active Links {#active-links} +## 활성 링크 (Active Links) -Month 및 Week 뷰에서 일자 숫자를 클릭 가능한 링크로 표시하며, 이를 클릭하면 선택한 뷰에서 해당 날짜가 열립니다. +월 보기와 주 보기에서 날짜 수를 클릭 가능한 링크로 표시하여 지정된 보기에서 관련 날짜를 엽니다. ~~~js scheduler.plugins({ @@ -27,18 +27,15 @@ scheduler.plugins({ #### 관련 자료 -문서: ["Month View"](views/month.md#presentingdaysnumbersasclickablelinks) +문서: [월 보기](views/month.md) +API: [active_link_view](api/config/active_link_view.md) -API: [active_link_view](api/config/active_link_view.md) +샘플: [링크로 표시된 월 일수](https://docs.dhtmlx.com/scheduler/samples/03_extensions/06_links_plugin.html) +## 아젠다 뷰 (Agenda View) -[Month days as links](https://docs.dhtmlx.com/scheduler/samples/03_extensions/06_links_plugin.html) - - -## Agenda View {#agenda-view} - -Agenda 뷰를 위한 코드 파일입니다. +Agenda 뷰의 코드 파일. ~~~js scheduler.plugins({ @@ -48,15 +45,13 @@ scheduler.plugins({ #### 관련 자료 -문서: ["아젠다 뷰"](views/agenda.md) +문서: [아젠다 뷰](views/agenda.md) +샘플: [아젠다 뷰](https://docs.dhtmlx.com/scheduler/samples/03_extensions/03_agenda_view.html) -[Agenda view](https://docs.dhtmlx.com/scheduler/samples/03_extensions/03_agenda_view.html) +## All Timed - -## All Timed {#all-timed} - -여러 날에 걸친 이벤트를 단일 날짜 이벤트와 동일한 스타일로 표시합니다. +다일 다중 이벤트를 일반적인 방식으로 표시합니다(일일 이벤트는 이미 표시되는 방식으로 표시됩니다). ~~~js scheduler.plugins({ @@ -66,15 +61,13 @@ scheduler.plugins({ #### 관련 자료 -API: [all_timed](api/config/all_timed.md) - +API: [all_timed](api/config/all_timed.md) -[Displaying multi-day events in the regular way](https://docs.dhtmlx.com/scheduler/samples/03_extensions/26_multi_day_visible.html) +샘플: [다중 날짜 이벤트를 일반 방식으로 표시](https://docs.dhtmlx.com/scheduler/samples/03_extensions/26_multi_day_visible.html) +## 충돌 관리 (Collision) -## Collision {#collision} - -동일한 시간대에 발생하는 이벤트 수를 처리합니다. +시간 슬롯 내 이벤트 수를 관리합니다. ~~~js scheduler.plugins({ @@ -82,18 +75,15 @@ scheduler.plugins({ }); ~~~ - #### 관련 자료 -문서: ["타임 슬롯에서 중복 이벤트 방지하기"](guides/collisions.md) - +문서: [타임 슬롯에서 이중 이벤트 방지](guides/collisions.md) -[Controlling the number of events in a time slot](https://docs.dhtmlx.com/scheduler/samples/03_extensions/15_collision.html) +샘플: [타임 슬롯 내 이벤트 수 제어](https://docs.dhtmlx.com/scheduler/samples/03_extensions/15_collision.html) +## 컨테이너 자동 크기 조정 (Container Autoresize) -## Container Autoresize {#container-autoresize} - -스케줄러 컨테이너의 크기를 콘텐츠에 맞게 자동으로 조정합니다. +스케줄러 컨테이너에 대한 자동 리사이즈를 활성화합니다(콘텐츠에 맞춰 크기가 변경됨). ~~~js scheduler.plugins({ @@ -103,18 +93,15 @@ scheduler.plugins({ #### 관련 자료 -문서: ["dhtmlxScheduler를 순수 JS/HTML에서 사용하기"](guides/initialization.md#scheduler-autoresizing) - +문서: [dhtmlxScheduler를 Plain JS/HTML에서 사용하기](guides/initialization.md#scheduler-autoresizing) -API: [container_autoresize](api/config/container_autoresize.md) +API: [container_autoresize](api/config/container_autoresize.md) +샘플: [스케줄러 컨테이너의 자동 크기 조정](https://docs.dhtmlx.com/scheduler/samples/03_extensions/28_container_autoresize.html) -[Autoresizing the scheduler container](https://docs.dhtmlx.com/scheduler/samples/03_extensions/28_container_autoresize.html) +## 쿠키 (Cookie) - -## Cookie {#cookie} - -쿠키를 사용하여 현재 스케줄러 상태(모드 및 날짜)를 저장합니다. +스케줄러의 현재 상태(모드 및 날짜)를 쿠키에 저장합니다. ~~~js scheduler.plugins({ @@ -124,16 +111,15 @@ scheduler.plugins({ #### 관련 자료 -[Work with cookies](https://docs.dhtmlx.com/scheduler/samples/03_extensions/08_cookies_plugin.html) - +샘플: [쿠키로 작업하기](https://docs.dhtmlx.com/scheduler/samples/03_extensions/08_cookies_plugin.html) -## Daytimeline {#daytimeline} +## Daytimeline -:::info -이 확장 기능은 PRO 버전에서만 사용 가능합니다. +:::note +이 확장 기능은 PRO 버전에서만 사용할 수 있습니다. ::: -Timeline 뷰에 "Days" 모드를 제공합니다. +타임라인 뷰의 "Days" 모드에 대한 코드 파일. ~~~js scheduler.plugins({ @@ -141,22 +127,19 @@ scheduler.plugins({ }); ~~~ - #### 관련 자료 -문서: ["타임라인 뷰"](views/timeline.md) - +문서: [타임라인 뷰](views/timeline.md) -[Days as Timeline rows](https://docs.dhtmlx.com/scheduler/samples/06_timeline/14_days_as_sections.html) +샘플: [일을 타임라인 행으로 표시](https://docs.dhtmlx.com/scheduler/samples/06_timeline/14_days_as_sections.html) - -## Drag-n-Drop between Schedulers {#drag-n-drop-between-schedulers} +## Scheduler 간 드래그 앤 드롭 (Drag-n-Drop between Schedulers) :::info -이 확장 기능은 Scheduler PRO 버전(2021년 10월 6일 이후 Commercial, Enterprise, Ultimate 라이선스)에서만 사용 가능합니다. +이 확장 기능은 Scheduler PRO 버전(상용(2021년 10월 6일 이후), Enterprise 및 Ultimate 라이선스)에서만 사용할 수 있습니다. ::: -여러 개의 스케줄러 간에 이벤트를 드래그 앤 드롭하여 한 스케줄러에서 다른 스케줄러로 이벤트를 이동할 수 있습니다. +여러 스케줄러 간에 드래그 앤 드롭 작업을 가능하게 하며, 한 스케줄러에서 다른 스케줄러로 이벤트를 드래그하거나 그 반대를 수행할 수 있습니다. ~~~js scheduler.plugins({ @@ -166,13 +149,11 @@ scheduler.plugins({ #### 관련 자료 -문서: [Drag-and-drop between Schedulers](guides/drag-between.md#drag-events) - +문서: [다중 스케줄러 간 드래그 앤 드롭](guides/drag-between.md) -## Editors {#editors} +## 편집기 (Editors) -라이트박스에서 사용되는 [radio](guides/radio.md), [combo](guides/combo.md), -[checkbox](guides/checkbox.md) 컨트롤의 코드를 포함합니다. +라이트박스의 [라디오](guides/radio.md), [콤보](guides/combo.md), [체크박스](guides/checkbox.md) 컨트롤용 코드 파일. ~~~js scheduler.plugins({ @@ -180,18 +161,15 @@ scheduler.plugins({ }); ~~~ - #### 관련 자료 -문서: ["Lightbox 컨트롤"](guides/lightbox-editors.md) - - -[Radio button in the lightbox](https://docs.dhtmlx.com/scheduler/samples/02_customization/14_radio_buttons_section.html) +문서: [라이트박스 편집자](guides/lightbox-editors.md) +샘플: [라이트박스의 라디오 버튼](https://docs.dhtmlx.com/scheduler/samples/02_customization/14_radio_buttons_section.html) -## Expand {#expand} +## 확장 (Expand) -스케줄러 오른쪽 상단에 "확장" 아이콘을 추가합니다. 클릭 시 스케줄러가 원래 크기와 전체 화면 모드 사이에서 전환됩니다. +스케줄러의 오른쪽 구석에 "expand" 아이콘을 추가합니다. 이 아이콘을 클릭하면 스케줄러의 크기가 원래 크기에서 '전체 화면'으로, 다시 원래 크기로 변경됩니다. ~~~js scheduler.plugins({ @@ -199,21 +177,17 @@ scheduler.plugins({ }); ~~~ - #### 관련 자료 -API: [expand](api/method/expand.md), [collapse](api/method/collapse.md) - +API: [`expand()`](api/method/expand.md), [`collapse()`](api/method/collapse.md) 이벤트: [onBeforeExpand](api/event/onbeforeexpand.md), [onBeforeCollapse](api/event/onbeforecollapse.md), [onExpand](api/event/onexpand.md), [onCollapse](api/event/oncollapse.md) - - -[Full-screen view](https://docs.dhtmlx.com/scheduler/samples/03_extensions/05_expand_plugin.html) +샘플: [전체 화면 뷰](https://docs.dhtmlx.com/scheduler/samples/03_extensions/05_expand_plugin.html) -## Export service {#export-service} +## Export 서비스 (Export service) -온라인 내보내기 서비스를 활성화합니다. +온라인 내보내기 서비스를 활성화할 수 있는 가능성을 제공합니다. ~~~js scheduler.plugins({ @@ -223,19 +197,17 @@ scheduler.plugins({ #### 관련 자료 -문서: ["Export to PDF"](export/pdf.md) , ["Export to PNG"](export/png.md) +문서: [PDF로 내보내기](export/pdf.md), [PNG로 내보내기](export/png.md) +샘플: [PDF/PNG로 내보내기](https://docs.dhtmlx.com/scheduler/samples/04_export/06_online_export.html) -[Export to PDF/PNG](https://docs.dhtmlx.com/scheduler/samples/04_export/06_online_export.html) - - -## Grid View {#grid-view} +## Grid 뷰 (Grid View) :::info -이 확장 기능은 PRO 버전에서만 사용 가능합니다. +이 확장 기능은 PRO 버전에서만 사용할 수 있습니다. ::: -Grid 뷰를 위한 코드 파일입니다. +그리드 뷰 코드 파일. ~~~js scheduler.plugins({ @@ -243,18 +215,15 @@ scheduler.plugins({ }); ~~~ - #### 관련 자료 -문서: ["Grid View"](views/grid.md) +문서: [그리드 뷰](views/grid.md) +샘플: [그리드 뷰](https://docs.dhtmlx.com/scheduler/samples/03_extensions/27_grid_view.html) -[Grid view](https://docs.dhtmlx.com/scheduler/samples/03_extensions/27_grid_view.html) +## HTML 템플릿 (HTML Templates) - -## HTML Templates {#html-templates} - -HTML 코드를 사용하여 템플릿을 정의할 수 있습니다. +HTML 코드로 템플릿 정의를 허용합니다. ~~~js scheduler.plugins({ @@ -264,15 +233,13 @@ scheduler.plugins({ #### 관련 자료 -문서: [Templates](guides/templates.md#specifying-templates-via-markup) - +문서: [Templates](guides/templates.md#specifying-templates-with-code) -[Specifying templates with HTML](https://docs.dhtmlx.com/scheduler/samples/03_extensions/09_html_templates_plugin.html) +샘플: [HTML로 템플릿 지정](https://docs.dhtmlx.com/scheduler/samples/03_extensions/09_html_templates_plugin.html) +## 키보드 네비게이션 (Keyboard Navigation) -## Keyboard Navigation {#keyboard-navigation} - -키보드를 사용한 내비게이션을 활성화합니다. +키보드 네비게이션을 활성화합니다. ~~~js scheduler.plugins({ @@ -282,18 +249,15 @@ scheduler.plugins({ #### 관련 자료 -문서: ["키보드 내비게이션"](guides/keyboard-navigation.md) - +문서: [Keyboard Navigation](guides/keyboard-navigation.md) -[Keyboard Navigation and WAI-ARIA - Flat Skin](https://docs.dhtmlx.com/scheduler/samples/13_accessibility/01_regular_skin_all_views.html) +샘플: [키보드 네비게이션 및 WAI-ARIA - Flat Skin](https://docs.dhtmlx.com/scheduler/samples/13_accessibility/01_regular_skin_all_views.html) +샘플: [스케줄러의 키보드 네비게이션](https://docs.dhtmlx.com/scheduler/samples/03_extensions/07_navigation_plugin.html) -[Keyboard navigation in the scheduler](https://docs.dhtmlx.com/scheduler/samples/03_extensions/07_navigation_plugin.html) +## 레거시 (Legacy) - -## Legacy {#legacy} - -더 이상 사용되지 않는 API 지원을 활성화합니다. +더 이상 사용되지 않는 API를 활성화합니다. ~~~js scheduler.plugins({ @@ -303,12 +267,11 @@ scheduler.plugins({ #### 관련 자료 -문서: ["Migration From Older Versions"](migration.md) - +문서: [이전 버전에서의 마이그레이션](migration.md) -## Limit {#limit} +## 제한 (Limit) -특정 날짜를 차단 및 강조 표시할 수 있는 옵션을 제공합니다. +날짜 차단 및 하이라이팅 기능을 제공합니다. ~~~js scheduler.plugins({ @@ -318,15 +281,13 @@ scheduler.plugins({ #### 관련 자료 -문서: ["Blocking and Marking Dates"](guides/limits.md) - - -[Limiting dates for creating events](https://docs.dhtmlx.com/scheduler/samples/03_extensions/16_limitation.html) +문서: [날짜 차단 및 표시](guides/limits.md) +샘플: [이벤트 생성을 위한 날짜 제한](https://docs.dhtmlx.com/scheduler/samples/03_extensions/16_limitation.html) -## Map View {#map-view} +## 맵 뷰 (Map View) -Map 뷰를 위한 코드 파일입니다. +맵 뷰 코드 파일. ~~~js scheduler.plugins({ @@ -336,15 +297,13 @@ scheduler.plugins({ #### 관련 자료 -문서: ["Map View"](views/map.md) +문서: [맵 뷰](views/map.md) +샘플: [맵 뷰](https://docs.dhtmlx.com/scheduler/samples/03_extensions/19_map_view.html) -[Map view](https://docs.dhtmlx.com/scheduler/samples/03_extensions/19_map_view.html) +## 미니 달력(날짜 선택기) (Mini Calendar (Date Picker)) - -## Mini Calendar (Date Picker) {#mini-calendar-date-picker} - -미니 캘린더를 추가하는 플러그인입니다. +미니 달력용 플러그인. ~~~js scheduler.plugins({ @@ -354,19 +313,17 @@ scheduler.plugins({ #### 관련 자료 -문서: ["미니 캘린더(날짜 선택기)"](guides/minicalendar.md), ["시간 및 날짜"](guides/time.md#mini-calendar-in-the-lightbox) - +문서: [미니 달력(날짜 선택기)](guides/minicalendar.md), [시간과 날짜](guides/time.md#mini-calendar-in-the-lightbox) -[Mini calendar in the scheduler header](https://docs.dhtmlx.com/scheduler/samples/05_calendar/01_select.html) +샘플: [스케줄러 헤더의 미니 달력](https://docs.dhtmlx.com/scheduler/samples/05_calendar/01_select.html) - -## Multisection {#multisection} +## 다중 섹션 (Multisection) :::info -이 확장 기능은 PRO 버전에서만 사용 가능합니다. +이 확장 기능은 PRO 버전에서만 사용할 수 있습니다. ::: -Timeline 뷰에서 여러 구역 또는 Units 뷰에서 여러 유닛에 이벤트를 할당할 수 있습니다. +타임라인 뷰에서 여러 섹션에 이벤트를 할당하거나 단위 뷰에서 여러 유닛에 이벤트를 배치할 수 있는 기능을 제공합니다. ~~~js scheduler.plugins({ @@ -376,18 +333,15 @@ scheduler.plugins({ #### 관련 자료 -문서: ["타임라인 뷰"](views/timeline.md#assignmentofeventstoseveralsections), ["Units View"](views/units.md#assigningeventstoseveralunits) - +문서: [타임라인 뷰](views/timeline.md), [유닛 뷰](views/units.md) API: [multisection](api/config/multisection.md) +샘플: [타임라인 및 유닛 뷰의 다중 섹션 이벤트](https://docs.dhtmlx.com/scheduler/samples/12_multisection_events/01_multisection_events.html) -[Multisection events in Timeline and Units view](https://docs.dhtmlx.com/scheduler/samples/12_multisection_events/01_multisection_events.html) +## 다중 선택 (Multiselect) - -## Multiselect {#multiselect} - -라이트박스에서 [multiselect](guides/multiselect.md) 컨트롤을 지원합니다. +라이트박스의 [multiselect](guides/multiselect.md) 컨트롤용 플러그인. ~~~js scheduler.plugins({ @@ -397,15 +351,13 @@ scheduler.plugins({ #### 관련 자료 -문서: ["Lightbox 컨트롤"](guides/lightbox-editors.md) - +문서: [라이트박스 편집자](guides/lightbox-editors.md) -[Multiselect control in the lightbox](https://docs.dhtmlx.com/scheduler/samples/03_extensions/21_multiselect_options.html) +샘플: [라이트박스의 다중 선택 컨트롤](https://docs.dhtmlx.com/scheduler/samples/03_extensions/21_multiselect_options.html) +## 다중 소스 (Multisource) -## Multisource {#multisource} - -여러 소스에서 데이터를 불러올 수 있도록 지원합니다. +여러 소스에서 데이터를 불러올 수 있는 기능을 제공합니다. ~~~js scheduler.plugins({ @@ -415,15 +367,13 @@ scheduler.plugins({ #### 관련 자료 -문서: ["데이터 불러오기"](guides/loading-data.md#loadingdatafrommultiplesources) - - -[Loading data from multiple sources](https://docs.dhtmlx.com/scheduler/samples/03_extensions/13_multisource.html) +문서: [데이터 로딩](guides/loading-data.md#loading-data-from-multiple-sources) +샘플: [여러 소스에서 데이터 로딩](https://docs.dhtmlx.com/scheduler/samples/03_extensions/13_multisource.html) -## Outerdrag {#outerdrag} +## Outerdrag -dhtmlxTree와 같은 외부 DHTMLX 컴포넌트에서 이벤트를 드래그할 수 있습니다. +외부 DHTMLX 컴포넌트(예: dhtmlxTree)에서 이벤트를 드래그 앤 드롭할 수 있도록 합니다. ~~~js scheduler.plugins({ @@ -431,27 +381,23 @@ scheduler.plugins({ }); ~~~ - #### 관련 자료 -문서: ["드래그 앤 드롭(Drag-and-Drop) 작업"](guides/drag-between.md) - - -[Integration with dhtmlxTree](https://docs.dhtmlx.com/scheduler/samples/10_integration/02_dhtmlxtree_outer_drag.html) +문서: [드래그 앤 드롭 작업](guides/drag-between.md) +샘플: [dhtmlxTree 외부 드래그와의 통합](https://docs.dhtmlx.com/scheduler/samples/10_integration/02_dhtmlxtree_outer_drag.html) -## PDF {#pdf} +## PDF -PDF 문서로 내보내기를 지원합니다. +PDF 문서로의 내보내기를 제공합니다. -- [Export to PDF (version 4.0)](export/pdf-legacy.md) +- [PDF로 내보내기(버전 4.0)](export/pdf-legacy.md) -- [Export to PDF (version 4.1+)](["Export to PDF"](export/pdf.md)) +- [PDF로 내보내기(버전 4.1 이상)](export/pdf.md) +## 빠른 정보 (Quick Info) -## Quick Info {#quick-info} - -이벤트 세부 정보를 표시하는 팝업을 제공합니다. +이벤트 세부 정보를 담은 팝업을 제공합니다. ~~~js scheduler.plugins({ @@ -459,18 +405,15 @@ scheduler.plugins({ }); ~~~ - #### 관련 자료 -문서: ["Mobile Responsive Scheduler"](guides/touch-support.md) +문서: [Mobile Responsive Scheduler](guides/touch-support.md) +샘플: [터치형 일정 관리기](https://docs.dhtmlx.com/scheduler/samples/03_extensions/29_quick_info.html) -[Touch-oriented scheduler](https://docs.dhtmlx.com/scheduler/samples/03_extensions/29_quick_info.html) +## 읽기 전용(Readonly) - -## Readonly {#readonly} - -라이트박스 및 특정 이벤트에 대해 읽기 전용 모드를 활성화합니다. +라이트박스 및 특정 이벤트에 대해 읽기 전용 모드를 제공합니다. ~~~js scheduler.plugins({ @@ -478,18 +421,15 @@ scheduler.plugins({ }); ~~~ - #### 관련 자료 -문서: ["읽기 전용 모드"](guides/readonly.md) - - -[Read-only lightbox](https://docs.dhtmlx.com/scheduler/samples/03_extensions/12_readonly_form.html) +문서: [읽기 전용 모드](guides/readonly.md) +샘플: [읽기 전용 라이트박스](https://docs.dhtmlx.com/scheduler/samples/03_extensions/12_readonly_form.html) -## Recurring {#recurring} +## 반복 (Recurring) -반복 이벤트 지원을 추가합니다. +반복 이벤트를 지원합니다. ~~~js scheduler.plugins({ @@ -497,18 +437,15 @@ scheduler.plugins({ }); ~~~ - #### 관련 자료 -문서: ["반복 이벤트"](guides/recurring-events.md) - +문서: [반복 이벤트](guides/recurring-events.md) -[Recurring events](https://docs.dhtmlx.com/scheduler/samples/03_extensions/01_recurring_events.html) - +샘플: [반복 이벤트](https://docs.dhtmlx.com/scheduler/samples/03_extensions/01_recurring_events.html) -## Recurring Legacy {#recurring-legacy} +## 반복(레거시) (Recurring Legacy) -반복 이벤트에 대한 레거시 지원입니다. +반복 이벤트를 위한 레거시 엔진. ~~~js scheduler.plugins({ @@ -518,12 +455,11 @@ scheduler.plugins({ #### 관련 자료 -문서: ["Recurring Events (v7.1 이하)"](guides/recurring-events-legacy.md) - +문서: [반복 이벤트(버전 v7.1까지)](guides/recurring-events-legacy.md) -## Serialize {#serialize} +## 직렬화 (Serialize) -ICal, XML, JSON 형식으로 데이터 직렬화를 지원합니다. +ICal, XML, JSON 형식으로 직렬화하는 기능을 제공합니다. ~~~js scheduler.plugins({ @@ -531,24 +467,19 @@ scheduler.plugins({ }); ~~~ - #### 관련 자료 -문서: ["데이터 직렬화: XML, JSON, iCal"](export/serialization.md) - +문서: [XML, JSON, iCal로의 데이터 직렬화](export/serialization.md) - +샘플: [스케줄러 이벤트 직렬화](https://docs.dhtmlx.com/scheduler/samples/04_export/01_serialize_data.html) -[Serialize scheduler events](https://docs.dhtmlx.com/scheduler/samples/04_export/01_serialize_data.html) - - -## Timeline {#timeline} +## 타임라인 (Timeline) :::info -이 확장 기능은 PRO 버전에서만 사용 가능합니다. +이 확장 기능은 PRO 버전에서만 사용할 수 있습니다. ::: -Timeline 뷰 플러그인입니다. +타임라인 뷰 플러그인. ~~~js scheduler.plugins({ @@ -556,16 +487,13 @@ scheduler.plugins({ }); ~~~ - #### 관련 자료 -문서: ["타임라인 뷰"](views/timeline.md) +문서: [타임라인 뷰](views/timeline.md) +샘플: [막대 모드](https://docs.dhtmlx.com/scheduler/samples/06_timeline/02_lines.html) -[Bar mode](https://docs.dhtmlx.com/scheduler/samples/06_timeline/02_lines.html) - - -## Tooltip {#tooltip} +## 툴팁 (Tooltip) 이벤트에 툴팁을 활성화합니다. @@ -575,22 +503,19 @@ scheduler.plugins({ }); ~~~ - #### 관련 자료 -문서: ["툴팁 (Tooltips)"](guides/tooltips.md) +문서: [툴팁](guides/tooltips.md) +샘플: [툴팁](https://docs.dhtmlx.com/scheduler/samples/03_extensions/20_tooltip.html) -[Tooltips](https://docs.dhtmlx.com/scheduler/samples/03_extensions/20_tooltip.html) - - -## Treetimeline {#treetimeline} +## 트리타임라인 (Treetimeline) :::info -이 확장 기능은 PRO 버전에서만 사용 가능합니다. +이 확장 기능은 PRO 버전에서만 사용할 수 있습니다. ::: -Timeline 뷰에 "Tree" 모드를 제공합니다. +타임라인 뷰의 "트리" 모드에 대한 확장. ~~~js scheduler.plugins({ @@ -598,22 +523,19 @@ scheduler.plugins({ }); ~~~ - #### 관련 자료 -문서: ["타임라인 뷰"](views/timeline.md) - - -[Tree mode](https://docs.dhtmlx.com/scheduler/samples/06_timeline/03_tree.html) +문서: [타임라인 뷰](views/timeline.md) +샘플: [트리 모드](https://docs.dhtmlx.com/scheduler/samples/06_timeline/03_tree.html) -## Units {#units} +## 단위 (Units) :::info -이 확장 기능은 PRO 버전에서만 사용 가능합니다. +이 확장 기능은 PRO 버전에서만 사용할 수 있습니다. ::: -Units 뷰 확장 기능입니다. +유닛 뷰 확장. ~~~js scheduler.plugins({ @@ -621,25 +543,22 @@ scheduler.plugins({ }); ~~~ - #### 관련 자료 -문서: ["Units View"](views/units.md) +문서: [유닛 뷰](views/units.md) +샘플: [유닛 뷰](https://docs.dhtmlx.com/scheduler/samples/03_extensions/02_units_view.html) -[Units view](https://docs.dhtmlx.com/scheduler/samples/03_extensions/02_units_view.html) +## URL +스케줄러의 상태(날짜, 이벤트의 ID, 뷰)를 URL에 저장합니다. -## URL {#url} +예: -스케줄러의 상태(날짜, 이벤트 ID, 뷰)를 URL에 저장합니다. - -예시: -~~~js -10_url_date_plugin.html#date=2014-08-01,mode=month -또는 -10_url_date_plugin.html#event="15" -~~~ +```text +10_url_date_plugin.html#date=2027-08-01,mode=month +10_url_date_plugin.html#event=15 +``` ~~~js scheduler.plugins({ @@ -647,19 +566,17 @@ scheduler.plugins({ }); ~~~ - #### 관련 자료 -[Saving the scheduler state in URL](https://docs.dhtmlx.com/scheduler/samples/03_extensions/10_url_date_plugin.html) +샘플: [URL에 스케줄러 상태 저장](https://docs.dhtmlx.com/scheduler/samples/03_extensions/10_url_date_plugin.html) - -## Week Agenda {#week-agenda} +## 주간 아젠다 (Week Agenda) :::info -이 확장 기능은 PRO 버전에서만 사용 가능합니다. +이 확장 기능은 PRO 버전에서만 사용할 수 있습니다. ::: -Week Agenda 뷰를 위한 코드 파일입니다. +주간 아젠다 뷰 코드 파일. ~~~js scheduler.plugins({ @@ -667,18 +584,15 @@ scheduler.plugins({ }); ~~~ - #### 관련 자료 -문서: ["Week Agenda View"](views/weekagenda.md) - +문서: [주간 아젠다 뷰](views/weekagenda.md) -[WeekAgenda view](https://docs.dhtmlx.com/scheduler/samples/03_extensions/24_week_agenda.html) +샘플: [WeekAgenda 뷰](https://docs.dhtmlx.com/scheduler/samples/03_extensions/24_week_agenda.html) +## 연도 뷰 (Year) -## Year {#year} - -Year 뷰를 위한 코드 파일입니다. +연도 뷰 코드 파일. ~~~js scheduler.plugins({ @@ -688,7 +602,6 @@ scheduler.plugins({ #### 관련 자료 -문서: ["Year View"](views/year.md) - +문서: [연도 뷰](views/year.md) -[Year view](https://docs.dhtmlx.com/scheduler/samples/03_extensions/04_year_view.html) +샘플: [연도 뷰](https://docs.dhtmlx.com/scheduler/samples/03_extensions/04_year_view.html) \ No newline at end of file diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/filtering.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/filtering.md index 99a2cf86..ee9d542e 100644 --- a/i18n/ko/docusaurus-plugin-content-docs/current/guides/filtering.md +++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/filtering.md @@ -5,36 +5,37 @@ sidebar_label: "이벤트 필터링" # 이벤트 필터링 -각 뷰(view)마다 해당 뷰에서 어떤 이벤트가 스케줄러에 표시되고, 어떤 이벤트가 숨겨질지 결정하는 필터링 함수를 정의할 수 있습니다. +지정된 각 뷰에 대해 Scheduler에서 표시할 이벤트와 표시되지 않을 이벤트를 정의하는 필터링 함수를 설정할 수 있습니다. ~~~js -scheduler.filter_week = function(id, event){ - if(event.name == 'New event') +scheduler.filter_week = (id, event) => { + if (event.name === 'New event') { return false; // 이벤트가 필터링되어(렌더링되지 않음) 숨겨집니다. - //또는 - return true; // 이벤트가 렌더링되어 표시됩니다. -} + } + + return true; // 이벤트가 렌더링되어 표시됩니다. +}; ~~~ -여기서 'week'는 뷰의 이름을 의미하며 (*'scheduler.filter_week'*에서 사용됨) 해당 뷰에 대한 필터링 함수를 지정합니다. +여기서, `"week"`는 `scheduler.filter_week`에서 뷰의 이름입니다. -**filter_(viewName)** 함수는 두 개의 인자를 받습니다: +`filter_(viewName)` 메서드는 두 매개변수를 받습니다: -- **id** - 이벤트의 식별자 -- **event** - 이벤트 객체 자체 +- `id` - 이벤트의 ID +- `event` - 이벤트 객체 -또한, 다양한 뷰에 대해 서로 다른 필터링 함수를 지정하는 것도 가능합니다: +다른 뷰에 대해 서로 다른 필터링 함수를 설정할 수 있다는 점을 기억하세요: ~~~js -scheduler.filter_day = scheduler.filter_week = function(id, event){ - //some_code -} +scheduler.filter_day = scheduler.filter_week = (id, event) => { + // some code +}; ... -scheduler.filter_timeline = function(id, event){ - //some_other code -} +scheduler.filter_timeline = (id, event) => { + // some other code +}; ~~~ - -[Filtering events](https://docs.dhtmlx.com/scheduler/samples/09_api/09_filtering_events.html) +### 관련 샘플 +- [이벤트 필터링](https://docs.dhtmlx.com/scheduler/samples/09_api/09_filtering_events.html) \ No newline at end of file diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/guides.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/guides.md deleted file mode 100644 index c008b59e..00000000 --- a/i18n/ko/docusaurus-plugin-content-docs/current/guides/guides.md +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: "가이드" -sidebar_label: "가이드" ---- - -# 가이드 - -이 섹션은 dhtmlxScheduler를 효과적으로 사용하는 데 도움이 되는 주요 안내 자료를 포함하고 있습니다. -간단한 작업부터 복잡한 작업까지, 일반적이거나 드문 작업 모두를 돕기 위해 작업 중심의 매뉴얼로 구성되어 있습니다. -이 문서들은 필수 절차와 실용적인 솔루션을 다룹니다. - -dhtmlxScheduler 라이브러리의 [Standard 및 PRO 버전에서 제공되는 기능](guides/editions-comparison.md)을 확인해보세요. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

페이지에서 Scheduler 생성하기

  • [Scheduler 초기화](guides/initialization.md)
  • ["스케줄러 설치 방법"](guides/installation.md)
  • ["전체 확장 기능 목록"](guides/extensions-list.md)
Scheduler를 설치하고 초기화하는 방법과 사용 가능한 확장 목록을 설명합니다.

Scheduler와 프론트엔드에서 시작하기

  • ["dhtmlxScheduler를 순수 JS/HTML에서 사용하기"](guides/initialization.md)
  • ["dhtmlxScheduler와 Angular 연동"](integrations/angular/howtostart-angular.md)
  • ["dhtmlxScheduler와 React"](integrations/react/js-scheduler-react.md)
  • ["dhtmlxScheduler와 Vue.js"](integrations/vue/howtostart-vue.md)
  • ["dhtmlxScheduler와 Svelte 연동"](integrations/svelte/howtostart-svelte.md)
프론트엔드에서 표준 Scheduler를 구축하고 설정하는 방법을 다룹니다.

서버 사이드에서 Scheduler 시작하기

  • ["dhtmlxScheduler와 ASP.NET Core"](integrations/dotnet/howtostart-dotnet-core.md)
  • ["dhtmlxScheduler와 Node.js"](integrations/node/howtostart-nodejs.md)
  • ["dhtmlxScheduler와 ASP.NET MVC"](integrations/dotnet/howtostart-dotnet.md)
  • ["dhtmlxScheduler와 PHP"](integrations/php/howtostart-plain-php.md)
  • ["dhtmlxScheduler와 PHP:Laravel 연동하기"](integrations/php/howtostart-php-laravel.md)
  • ["dhtmlxScheduler와 PHP:Slim"](integrations/php/howtostart-php-slim4.md)
  • ["dhtmlxScheduler와 SalesForce LWC 통합하기"](integrations/salesforce/howtostart-salesforce.md)
  • ["dhtmlxScheduler와 Ruby on Rails 연동하기"](integrations/other/howtostart-ruby.md)
  • ["dhtmlxScheduler와 dhtmlxConnector 연동하기"](integrations/other/howtostart-connector.md)
다양한 서버 사이드 플랫폼에서 표준 Scheduler를 생성하고, 설정 구성, 템플릿 커스터마이징, 이벤트 연결 등으로 동작하게 하는 방법을 설명합니다.

Scheduler 설정하기

  • ["Mobile Responsive Scheduler"](guides/touch-support.md)
  • ["일반 설정 안내"](guides/configuration.md)
  • ["스케줄러 마크업"](guides/scheduler-markup.md)
  • ["RTL (오른쪽-왼쪽) 모드"](guides/rtl-mode.md)
  • ["Localization"](guides/localization.md)
  • ["페이지에서 여러 개의 Scheduler 생성하기"](guides/multiple-per-page.md)
  • ["접근성"](guides/accessibility.md)
Scheduler를 설정하고, 한 페이지에 여러 개의 Scheduler를 생성하거나, 인터페이스를 현지화하고, 접근성 기능을 활성화하는 방법 등을 보여줍니다.

데이터 불러오기 및 저장하기

  • ["데이터 불러오기"](guides/loading-data.md)
  • ["Server-Side Integration"](guides/server-integration.md)
Scheduler에 데이터를 불러오는 다양한 방법과 데이터 소스, 포맷, 기법 및 서버 사이드 연동에 대해 설명합니다.

뷰(View) 설정하기

  • [뷰 개요](/views/)
  • ["뷰의 X축에서 시간 단위 숨기기"](guides/custom-scales.md)
  • ["Custom View"](guides/custom-views.md)
  • ["Blocking and Marking Dates"](guides/limits.md)
스케일 단위 조정, 사용자 정의 뷰 생성, 특정 날짜 제한 등 뷰를 커스터마이즈하는 방법을 설명합니다.
라이트박스에서 컨트롤 추가/제거, 값 가져오기 및 설정, 라이트박스 외관 커스터마이징 등의 작업에 중점을 둡니다.

Scheduler에서 이벤트 관리하기

  • ["이벤트 객체 작업"](guides/event-object-operations.md)
  • ["이벤트 추가/삭제"](guides/adding-events.md)
  • ["이벤트 필터링"](guides/filtering.md)
  • ["드래그 앤 드롭(Drag-and-Drop) 작업"](guides/drag-between.md)
  • ["반복 이벤트"](guides/recurring-events.md)
  • ["읽기 전용 모드"](guides/readonly.md)
  • ["Validation"](guides/validation.md)
  • ["타임 슬롯에서 중복 이벤트 방지하기"](guides/collisions.md)
이벤트 객체의 추가, 삭제, 필터링과 같은 기본 작업을 다루며, 반복 이벤트 처리, Scheduler(또는 일부)의 읽기 전용 설정 등도 설명합니다.

이벤트 커스터마이징

  • [박스](guides/custom-events-display.md)
  • [색상](guides/custom-events-color.md)
  • [내용(템플릿)](guides/custom-events-content.md)
  • [툴팁](guides/tooltips.md)
  • [이벤트의 편집 및 선택 바](guides/customizing-edit-select-bars.md)
  • ["스케일 및 이벤트 박스 크기 조정"](guides/sizing.md)
이벤트의 텍스트 템플릿부터 박스의 시각적 외관까지, 다양한 이벤트 요소를 개인화하는 방법을 자세히 설명합니다.

데이터 내보내기/가져오기

  • [Google Calendar 연동](integrations/google-calendar/google-calendar-sync.md)
  • ["Export to PDF"](export/pdf.md)
  • ["Export to PNG"](export/png.md)
  • ["엑셀 및 iCal로 내보내기"](export/excel.md)
  • [ XML, JSON, iCal 및 기타 포맷](export/serialization.md)
Scheduler 데이터의 가져오기 및 내보내기를 위한 포맷과 방법을 설명합니다.

외관 및 스타일링

  • ["스킨(Skins)"](guides/skins.md)
  • ["레이블, 날짜, 스타일 포매팅"](guides/templates.md)
  • ["스킨 커스터마이제이션"](guides/custom-skins.md)
Scheduler의 그래픽 요소를 소개하고, 스타일을 지정하는 방법을 설명합니다.

날짜 다루기

  • ["날짜 형식 지정"](guides/settings-format.md)
  • ["날짜 작업"](guides/date-formats.md)
Scheduler에서 날짜를 다루는 중요한 주제(문자열 변환, 날짜 포맷에서 허용되는 문자 등)를 다룹니다.

통합(Integration)

  • ["Popup Messages and Modal Boxes"](guides/popups-and-modals.md)
  • ["타입스크립트와 함께 Scheduler 사용하기"](guides/scheduler-typescript.md)
  • ["jQuery 통합"](integrations/other/jquery-integration.md)
  • ["dhtmlxLayout와의 통합"](integrations/other/dhxlayout-integration.md)
Scheduler를 타사 프레임워크와 통합할 수 있는 옵션을 설명합니다.

특수 확장 및 에디션

  • ["미니 캘린더(날짜 선택기)"](guides/minicalendar.md)
  • ["Live Updates 모드 (레거시)"](guides/live-update.md)
  • ["여러 사용자"](guides/multiple-users.md)
라이브러리에 포함된 다양한 확장 기능을 활용하는 방법을 안내합니다.

사용자 인터페이스 가이드

  • ["Scheduler GUI"](guides/user-interface.md)
최종 사용자 관점에서 Scheduler 인터페이스 요소를 설명합니다.
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/how-to-start.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/how-to-start.md deleted file mode 100644 index d9ecdb1e..00000000 --- a/i18n/ko/docusaurus-plugin-content-docs/current/guides/how-to-start.md +++ /dev/null @@ -1,242 +0,0 @@ ---- -title: "시작하기" -sidebar_label: "시작하기" ---- - -# 시작하기 - -이 튜토리얼에서는 데이터베이스에서 데이터를 불러오고 다시 저장하는 기본 스케줄러를 만드는 과정을 안내합니다. -여기에서 제공하는 최종 예제는 dhtmlxScheduler로 앱을 구축하기 위한 탄탄한 기반이 될 수 있습니다. - -![init_scheduler_front.png](/img/init_scheduler_front.png) - - -[Loading data from a database](https://docs.dhtmlx.com/scheduler/samples/01_initialization_loading/05_loading_database.html) - - -## 1단계. 새 HTML 파일 생성 및 필수 코드 파일 추가 - -먼저, 새로운 HTML 파일을 만들고 필요한 스케줄러 스크립트와 스타일을 포함하세요. - -필요한 파일은 다음과 같습니다: - -- *dhtmlxscheduler.js* -- *dhtmlxscheduler_material.css* (Material 스킨용; [다른 사용 가능한 스킨](guides/skins.md)도 확인할 수 있습니다) - -~~~html - - - - How to start - - - - - //your code will be here - - -~~~ - -dhtmlxScheduler 패키지 구조를 간단히 살펴보면, 각 파일의 위치를 쉽게 알 수 있습니다: - -- sources - 소스 코드 파일로, 난독화되지 않아 디버깅에 주로 사용됩니다. -- samples - 예제 코드 스니펫이 들어 있습니다. -- docs - 컴포넌트의 전체 문서입니다. -- codebase - 프로덕션 환경에 최적화된 난독화된(minified) 파일이 들어 있습니다. 프로젝트에서는 이 폴더의 파일을 사용하세요. - -## 2단계. 관련 DIV 요소 정의 - -스케줄러를 초기화하기 전에, UI 요소를 위한 필수 DIV 컨테이너를 설정해야 합니다. - -스케줄러에 일반적으로 필요한 'div' 세트는 다음과 같습니다: - -~~~js -
-
-
 
-
 
-
-
-
-
-
-
-
-
-
-~~~ - -## 3단계. 스타일 적용 - -브라우저에서 올바른 전체화면 동작을 보장하려면, 아래와 같은 CSS 스타일을 추가하세요: - -~~~css - -~~~ - -전체화면 모드를 사용하지 않는 경우에는 이 스타일이 필요하지 않습니다. 대신, 메인 **div**에 원하는 CSS 속성을 직접 지정하세요: - -~~~html -
-... -~~~ - -## 4단계. 초기화 - -모든 준비가 끝나면, 스케줄러를 초기화할 수 있습니다. -스케줄러는 정적 객체이므로, 페이지당 한 번만 인스턴스화해야 합니다. -스케줄러 인스턴스는 **dhtmlxScheduler** 또는 간단히 **scheduler**로 참조할 수 있습니다. - -~~~js -scheduler.init('scheduler_here', new Date(),"month"); -~~~ - -## 5단계. 데이터 불러오기 - -이 시점에서 앱을 실행하면 스케줄러가 표시되지만, 아직 이벤트가 없습니다. - -데이터로 채우려면, 먼저 인라인 객체를 데이터 소스로 사용해보세요. -[parse](api/method/parse.md) 메서드를 사용하여 인라인 객체에서 데이터를 불러올 수 있습니다. - -각 이벤트 객체는 다음과 같은 속성을 포함합니다: - -- **id** - (*string, number*) 이벤트 식별자 -- **start_date** - (*string*) 이벤트 시작 날짜, 기본 형식 "%m/%d/%Y %H:%i" -- **end_date** - (*string*) 이벤트 종료 날짜, 기본 형식 "%m/%d/%Y %H:%i" -- **text** - (*string*) 이벤트 설명 - -~~~js -var events = [ - {id:1, text:"Meeting", start_date:"04/11/2018 14:00",end_date:"04/11/2018 17:00"}, - {id:2, text:"Conference",start_date:"04/15/2018 12:00",end_date:"04/18/2018 19:00"}, - {id:3, text:"Interview", start_date:"04/24/2018 09:00",end_date:"04/24/2018 10:00"} -]; - -scheduler.parse(events); // 데이터 소스와 형식 지정 -~~~ - -또한 [서버에서 데이터 불러오기](#step7loadingdatafromtheserver)도 가능합니다. - -:::note -서버 사이드와의 연동에 대한 자세한 내용은 ["Server-Side Integration"](guides/server-integration.md) 문서를 참고하세요. -::: - -## 6단계. 데이터베이스 구조 - -:::note -인라인 객체 대신 데이터베이스에서 데이터를 불러오려면 아래 단계를 따르세요. -::: - -서버에서 데이터를 불러오려면, 다음과 같은 구조의 데이터베이스 테이블이 필요합니다: - -![db_table](/img/db_table.png) - -아래 SQL 코드를 사용해 테이블을 생성할 수 있습니다: - -~~~js -CREATE TABLE `events` ( - `id` int(11) NOT NULL AUTO_INCREMENT, - `start_date` datetime NOT NULL, - `end_date` datetime NOT NULL, - `text` varchar(255) NOT NULL, - PRIMARY KEY (`id`) -) -~~~ - -이 필드 외에 필요하다면 추가 컬럼을 생성할 수 있으며, 클라이언트로 전송 후 [라이트박스에 매핑](guides/custom-details-form.md)할 수 있습니다. - -참고로, 데이터베이스의 datetime 형식 '%Y-%m-%d %H:%i'는 스케줄러의 기본 형식 '%m/%d/%Y %H:%i'와 다릅니다. -이를 올바르게 처리하려면 [xml_date](api/config/xml_date.md) 옵션을 사용해 스케줄러의 날짜 형식을 업데이트해야 합니다. - -아래와 같이, 스케줄러를 초기화하기 전에 설정 옵션을 지정하세요: - -~~~js -scheduler.config.xml_date="%Y-%m-%d %H:%i"; -... -scheduler.init('scheduler_here',new Date(),"month"); -~~~ - -## 7단계. 서버에서 데이터 불러오기 - -데이터베이스에서 데이터를 불러오려면 [load](api/method/load.md) 메서드를 사용하여, 데이터 처리를 담당하는 서버 사이드 스크립트의 URL을 지정합니다. - -:::note -[dhtmlxConnector](https://docs.dhtmlx.com/connector__php__index.html) 라이브러리를 사용하면 빠르게 시작할 수 있습니다. 그러나 새로운 프로젝트의 경우 더 유연한 백엔드 API를 직접 구축하는 것이 좋습니다. 자세한 내용은 ["Server-Side Integration"](guides/server-integration.md)를 참고하세요. -::: - -아래와 같이 메서드를 호출하면 됩니다: - -~~~js -// CRUD 작업을 처리하는 서버 사이드 스크립트의 URL 지정 -scheduler.load("data/connector.php"); -~~~ - -## 8단계. 서버 사이드 스크립트 - -아래는 dhtmlxScheduler를 위한 예시 서버 사이드 스크립트입니다: - -~~~php -render_table("events","id","start_date,end_date,text"); -~~~ - -### 데이터베이스 컬럼 매핑 - -**$connector->render_table**에서 컬럼의 순서가 중요합니다. -처음 세 컬럼은 실제 컬럼명과 상관없이 클라이언트 측 이벤트 객체의 *start_date*, *end_date*, *text* 속성에 대응됩니다: - -~~~js -$conn->render_table("events","EventId","Start,End,Name,details",""); -// JS: event.id, event.start_date, event.end_date, event.text, event.text, event.details -~~~ - -#### 추가 컬럼 매핑 - -추가 컬럼은 이름 그대로 매핑됩니다: - -~~~js -$conn->render_table("events","id","start_date,end_date,text,custom,details",""); -// JS: event.start_date, event.end_date, event.text, event.custom, event.details -~~~ - -별칭(alias)도 다음과 같이 사용할 수 있습니다: - -~~~js -$conn->render_table("events","id", - "start_date,end_date,text,custom_column(customProperty),details",""); -// JS: event.start_date, event.end_date, event.text, event.customProperty, event.details -~~~ - -## 9단계. 데이터 저장 - -이제 스케줄러가 데이터베이스에서 데이터를 불러올 수 있지만, 변경 사항을 자동으로 저장하지는 않습니다. -저장을 활성화하려면 dataProcessor를 사용하세요. - -dataProcessor 사용 방법은 간단합니다-초기화하고 스케줄러에 연결만 하면 됩니다: - -~~~js -var dp = scheduler.createDataProcessor("data/connector.php"); -dp.init(scheduler); -~~~ - -이제 데이터베이스와 연동하여 데이터를 불러오고 저장하는 기본 스케줄러가 완성되었습니다. - -여기서부터는 필요에 따라 기능을 추가하거나 확장할 수 있습니다. - - -[Loading data from a database](https://docs.dhtmlx.com/scheduler/samples/01_initialization_loading/05_loading_database.html) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/ical-export-import.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/ical-export-import.md index 44a7b53e..d3a2e2b7 100644 --- a/i18n/ko/docusaurus-plugin-content-docs/current/guides/ical-export-import.md +++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/ical-export-import.md @@ -3,34 +3,38 @@ title: "iCal 내보내기/가져오기" sidebar_label: "iCal 내보내기/가져오기" --- -# iCal 내보내기/가져오기 +# iCal 내보내기/가져오기 :::note -**이 도구는 더 이상 지원되지 않으며, 사용이 중단되었습니다. 따라서, 애플리케이션에서 사용하지 마십시오!** +이 도구는 더 이상 사용되지 않으며 지원되지 않습니다. 따라서 애플리케이션에서 사용하지 마세요! ::: -iCal 형식의 데이터를 가져오거나 내보내려면, 준비된 유틸리티 또는 API 메서드를 사용할 수 있습니다. +레거시 exporter/importer는 PHP 기반이므로 아래의 코드 조각은 PHP 예제입니다. 다른 백엔드를 사용 중인 경우, 플랫폼의 iCalendar 라이브러리를 사용하고 필드를 Scheduler 이벤트 속성에 매핑하십시오. -## iCal 내보내기 도구 (프론트엔드) +iCal 형식의 데이터를 가져오기/내보내기할 수 있는 방법은 미리 준비된 유틸리티를 사용하거나 API 메서드를 사용하여 가능합니다. + +## iCal 내보내기(프런트엔드) ![ical_exporter1.png](/img/ical_exporter1.png) -유틸리티의 프론트엔드는 두 개의 섹션으로 구성되어 있습니다: +유틸리티의 프런트엔드은 두 부분으로 구성됩니다: -- **리소스 설정** -- **데이터베이스 설정** +- **리소스 구성** +- **데이터베이스 구성**. -첫 번째 섹션에서는 데이터 경로를 지정합니다. 이는 열기 대화창에서 경로를 선택(**Ical file**, "Overview" 버튼)하거나, 직접 입력(**Ical URL**)하는 방법이 있습니다. +첫 번째 부분에서 데이터의 경로를 설정합니다. 열려 있는 대화 상자에서 경로를 선택(%Ical 파일%, 버튼 "개요") 하거나 수동으로 지정할 수 있습니다 (**Ical URL**). + -두 번째 섹션에는 iCal 데이터를 저장할 데이터베이스의 일반적인 설정(호스트, 데이터베이스 및 테이블명, 사용자명, 비밀번호)이 포함되어 있습니다. 또한, 기존 데이터를 삭제할지(**Delete all data**) 여부도 선택할 수 있습니다. +두 번째 부분에는 저장하고자 하는 iCal 데이터를 저장할 데이터베이스의 표준 설정( 호스트, 데이터베이스 및 테이블 이름, 사용자 이름과 비밀번호)들이 포함되어 있습니다. 또한 여기에서 이전 데이터를 삭제할지 여부를 설정할 수 있습니다 (**Delete all data** → **모든 데이터 삭제**). -## API 메서드 +## API 메서드 -아래는 애플리케이션에서 iCal 내보내기/가져오기를 구현할 수 있는 API 메서드입니다. +여기서는 앱에서 iCal 내보내기/가져오기를 구현하는 데 사용할 수 있는 모든 API 메서드를 확인할 수 있습니다. -### 초기화 +### 초기화 + +iCal 내보내기/가져오기를 초기화하려면 다음 코드를 사용하세요: -iCal 내보내기/가져오기 도구를 설정하려면 다음 코드를 사용하세요: ~~~php require_once("codebase/class.php"); @@ -38,27 +42,30 @@ $export = new ICalExporter(); ~~~ -### iCalendar 가져오기 -iCal 데이터를 가져올 때 사용하는 메서드는 다음과 같습니다: +### iCal 가져오기 + +다음 메서드를 사용하여 iCal 데이터를 가져올 수 있습니다: -- **setTitle($title)** - toICal() 메서드에서 iCal 파일의 제목을 지정합니다 +- **setTitle($title)** - toICal() 메서드에서 iCal 파일의 제목을 설정합니다 - **getTitle()** - iCal 파일의 제목을 가져옵니다 -- **toICal($events)** - 배열 또는 XML 문자열의 데이터를 iCalendar 형식으로 변환합니다 +- **toICal($events)** - 배열이나 XML 문자열의 정보를 icalendar 형식으로 변환합니다 -### iCalendar 내보내기 +### iCal 내보내기 -iCal 데이터를 내보낼 때 사용하는 메서드는 다음과 같습니다: +다음 메서드를 사용하여 iCal 데이터를 내보낼 수 있습니다: - **toHash($ical)** - iCal 문자열을 이벤트 배열로 변환합니다 - **toXML($ical)** - iCal 문자열을 XML 형식으로 변환합니다 -#### 예시 -아래는 iCal 내보내기/가져오기를 수행하는 코드 예제입니다. -+ iCalendar 제목 설정 +#### 예제 +여러 코드 조각이 iCal 내보내기/가져오기를 실행하는 방법을 여기에 제시합니다. -이 예제는 가져오거나 내보낼 iCalendar 데이터의 제목을 설정하는 방법을 보여줍니다. + ++ iCal 제목 설정 + +다음 코드는 가져오기/내보내기 iCalendar 데이터의 제목을 설정할 수 있게 해줍니다. ~~~php $xml = file_get_contents("events_rec.xml"); @@ -70,16 +77,18 @@ file_put_contents("ical.ics", $ical); ~~~ + + 이벤트 배열 -이 예제는 배열을 사용하여 데이터를 가져오거나 내보내는 방법을 보여줍니다. +이벤트 배열은 배열로부터의 가져오기/내보내기 데이터에서 참조되는 예시입니다. + ~~~php $events = array( array( "id" => 1, - "start_date" => "2010-04-05 08:00:00", - "end_date" => "2012-04-09 09:00:00", + "start_date" => "2027-04-05 08:00:00", + "end_date" => "2027-04-09 09:00:00", "text" => "text1", "rec_type" => "week_2___3,5", "event_pid" => null, @@ -88,8 +97,8 @@ $events = array( array( "id" => 2, - "start_date" => "2010-04-06 12:00:00", - "end_date" => "2010-04-06 18:00:00", + "start_date" => "2027-04-06 12:00:00", + "end_date" => "2027-04-06 18:00:00", "text" => "text2", "rec_type" => "", "event_pid" => null, @@ -98,8 +107,8 @@ $events = array( array( "id" => 3, - "start_date" => "2010-04-07 12:00:00", - "end_date" => "2010-04-07 18:00:00", + "start_date" => "2027-04-07 12:00:00", + "end_date" => "2027-04-07 18:00:00", "text" => "text3", "rec_type" => "", "event_pid" => null, @@ -108,8 +117,8 @@ $events = array( array( "id" => 4, - "start_date" => "2010-04-08 12:00:00", - "end_date" => "2010-04-08 18:00:00", + "start_date" => "2027-04-08 12:00:00", + "end_date" => "2027-04-08 18:00:00", "text" => "text4", "rec_type" => "", "event_pid" => null, @@ -119,9 +128,10 @@ $events = array( ~~~ + + 배열에서 iCal로 -이 코드 예제는 배열에서 iCal 문자열로 데이터를 내보내는 방법입니다: +다음 코드를 사용하여 배열에서 iCal 문자열로 데이터를 내보내세요: ~~~php require_once("codebase/class.php"); @@ -131,9 +141,10 @@ file_put_contents("ical.ics"); ~~~ + + XML에서 iCal로 -이 예제는 XML 데이터를 iCal 형식으로 내보내는 방법을 보여줍니다: +다음 코드를 사용하여 XML 데이터를 iCal로 내보내세요: ~~~php $xml = file_get_contents("events_rec.xml"); @@ -144,9 +155,10 @@ file_put_contents("ical.ics"); ~~~ + + iCal에서 배열로 -이 예제는 iCal 파일의 데이터를 배열로 내보내는 방법을 보여줍니다: +다음 코드를 사용하여 iCal 데이터를 배열로 변환합니다: ~~~php $ical = file_get_contents("ical.ics"); @@ -156,9 +168,10 @@ $events = $export->toHash($ical); ~~~ + + iCal에서 XML로 -이 예제는 iCal 파일의 데이터를 XML 형식으로 내보내는 방법을 보여줍니다: +다음 코드를 사용하여 iCal 데이터를 XML로 변환합니다: ~~~php $ical = file_get_contents("ical.ics"); @@ -167,4 +180,4 @@ $export = new ICalExporter(); $xml = $export->toXML($ical); file_put_contents("events_rec.xml", $xml); -~~~ +~~~ \ No newline at end of file diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/initialization.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/initialization.md index fefb5133..8963978c 100644 --- a/i18n/ko/docusaurus-plugin-content-docs/current/guides/initialization.md +++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/initialization.md @@ -7,9 +7,9 @@ import { FrameworkIcon } from '@site/src/components/FrameworkIcon'; # dhtmlxScheduler를 순수 JS/HTML에서 사용하기 -dhtmlxScheduler로 애플리케이션을 개발할 때, 가장 먼저 해야 할 일은 스케줄러를 페이지에 세팅하고 표시하는 것입니다. + dhtmlxScheduler를 사용하는 애플리케이션을 개발할 때, 가장 먼저 필요한 것은 Scheduler를 초기화하거나 간단히 말하면 페이지에 Scheduler를 표시하는 것입니다. -이 가이드는 순수 JS와 HTML을 사용하여 dhtmlxScheduler를 초기화하는 방법을 다룹니다. 프론트엔드 프레임워크와의 통합에 대해서는 아래 가이드들을 참고하세요: + 이 가이드는 Plain JS 및 HTML에서 dhtmlxScheduler를 초기화하는 방법에 대해 설명합니다. 프런트엔드 프레임워크와의 통합 가이드를 아래에서 확인할 수도 있습니다.
@@ -17,7 +17,7 @@ dhtmlxScheduler로 애플리케이션을 개발할 때, 가장 먼저 해야 할
React
- Use the ready-made ReactScheduler component with props and events. + props와 이벤트가 있는 이미 만들어진 ReactScheduler 컴포넌트를 사용합니다.
@@ -25,7 +25,7 @@ dhtmlxScheduler로 애플리케이션을 개발할 때, 가장 먼저 해야 할
Angular
- Integrate Scheduler into Angular projects using a thin wrapper. + 얇은 래퍼를 사용하여 Angular 프로젝트에 Scheduler를 통합합니다.
@@ -33,7 +33,7 @@ dhtmlxScheduler로 애플리케이션을 개발할 때, 가장 먼저 해야 할
Vue
- Use Scheduler inside Vue apps with a small wrapper and reactive configuration. + 작은 래퍼와 반응형 구성을 가진 Vue 앱 내에서 Scheduler를 사용합니다.
@@ -41,7 +41,7 @@ dhtmlxScheduler로 애플리케이션을 개발할 때, 가장 먼저 해야 할
Svelte
- Embed Scheduler in Svelte with a simple component that binds config and events. + 구성 및 이벤트를 바인드하는 간단한 컴포넌트로 Svelte에 Scheduler를 삽입합니다.
@@ -49,25 +49,25 @@ dhtmlxScheduler로 애플리케이션을 개발할 때, 가장 먼저 해야 할
Salesforce
- Use Scheduler in Salesforce Lightning Web Components and connect it to org data. + Salesforce Lightning Web Components에서 Scheduler를 사용하고 org 데이터에 연결합니다.
-스케줄러를 페이지에 초기화하는 방법은 두 가지가 있습니다: +페이지에서 Scheduler를 초기화하는 방법은 두 가지가 있습니다: -- [스케줄러의 마크업을 이용하는 방법](#initializing-scheduler-via-markup) -- [header 설정 속성을 사용하는 방법](#initializingschedulerviaheaderconfig) +- [마크업을 통한 Scheduler 초기화](#initializing-scheduler-via-markup) +- [헤더 구성 속성을 통한 초기화](#initializing-scheduler-via-header-config) -## 스케줄러를 마크업으로 초기화하기 {#initializing-scheduler-via-markup} +## 마크업을 통한 Scheduler 초기화 -마크업을 통해 기본 스케줄러를 페이지에 설정하려면 아래 3단계를 따르세요: +마크업을 통해 기본 Scheduler를 페이지에 표시하려면 3단계를 따르세요: -1. 페이지에 [dhtmlxScheduler 코드 파일](#requiredcodefiles)을 포함합니다. -2. 페이지에 DIV 컨테이너와 필요한 자식 DIV 요소들을 추가합니다. -3. 생성한 컨테이너에서 [init](api/method/init.md) 메서드를 사용해 dhtmlxScheduler를 초기화합니다. 이 메서드는 스케줄러가 렌더링될 HTML 컨테이너(또는 그 id)를 인자로 받습니다. +1. 페이지에 [dhtmlxScheduler 코드 파일들](#required-code-files)을 포함합니다. +2. 페이지에 DIV 컨테이너를 만들고 해당 요소의 자식 DIV 컨테이너들을 정의합니다. +3. 새로 생성한 컨테이너에서 [init](api/method/init.md) 메서드를 사용해 dhtmlxScheduler를 초기화합니다. 메서드의 매개변수로 Scheduler가 표시될 HTML 컨테이너(또는 그 ID)를 전달합니다. ~~~html @@ -92,7 +92,7 @@ dhtmlxScheduler로 애플리케이션을 개발할 때, 가장 먼저 해야 할
- @@ -105,16 +105,16 @@ dhtmlxScheduler로 애플리케이션을 개발할 때, 가장 먼저 해야 할 [Basic initialization](https://docs.dhtmlx.com/scheduler/samples/01_initialization_loading/01_basic_init.html) -## header config로 스케줄러 초기화하기 {#initializingschedulerviaheaderconfig} +## 헤더 구성 속성을 통한 Scheduler 초기화 -이 방법은 스케줄러를 [반응형](guides/initialization.md#makingschedulerresponsive)으로 만들고 싶을 때 권장됩니다. +이 방법으로 초기화해야만 [반응형](guides/initialization.md#making-scheduler-responsive)으로 작동합니다. -기본 스케줄러를 페이지에 설정하려면 다음 단계를 따르세요: +페이지에 기본 Scheduler를 표시하려면 다음 단계를 따르세요: -1. 페이지에 [dhtmlxScheduler 코드 파일](#requiredcodefiles)을 포함합니다. -2. 페이지에 DIV 컨테이너를 추가합니다. -3. [header](api/config/header.md) 설정 객체에서 스케줄러의 구조를 정의합니다. -4. [init](api/method/init.md) 메서드를 사용해 컨테이너에서 dhtmlxScheduler를 초기화합니다. 이때 컨테이너(또는 그 id)를 인자로 전달합니다. +1. 페이지에 [dhtmlxScheduler 코드 파일들](#required-code-files)을 포함합니다. +2. 페이지에 DIV 컨테이너를 생성합니다. +3. [헤더 구성 객체](api/config/header.md)에서 Scheduler의 구조를 명시합니다. +4. 새로 생성한 컨테이너에서 [init](api/method/init.md) 메서드를 사용해 초기화합니다. 매개변수로 Scheduler가 표시될 HTML 컨테이너(또는 아이디)를 전달합니다. ~~~html @@ -140,7 +140,7 @@ dhtmlxScheduler로 애플리케이션을 개발할 때, 가장 먼저 해야 할 "today", "next" ]; - scheduler.init('scheduler_here',new Date(2020,0,1),"week"); /*!*/ + scheduler.init('scheduler_here',new Date(2027,0,1),"week"); /*!*/ ~~~ @@ -149,34 +149,33 @@ dhtmlxScheduler로 애플리케이션을 개발할 때, 가장 먼저 해야 할 [Responsive scheduler](https://docs.dhtmlx.com/scheduler/samples/01_initialization_loading/13_touch_ui.html) -## 필수 코드 파일 {#requiredcodefiles} +## Required code files -포함해야 할 파일은 다음과 같습니다: +필수 코드 파일은 다음과 같습니다: - *dhtmlxscheduler.js* -- *dhtmlxscheduler.css* (사용 가능한 스킨은 ["스킨(Skins)"](guides/skins.md)에서 확인할 수 있습니다) +- *dhtmlxscheduler.css* (다양한 스킨도 확인해 볼 수 있습니다. [스킨 가이드](guides/skins.md) 참조) ~~~html ~~~ -아래는 dhtmlxScheduler 패키지 구조의 간단한 예시로, 파일 위치를 쉽게 찾을 수 있습니다: +dhtmlxScheduler 패키지의 파일들을 어디에서 찾을 수 있는지 빠르게 살펴보겠습니다. -- sources - 라이브러리의 소스 코드 파일들이 들어 있습니다. 이 파일들은 난독화되어 있지 않아 디버깅 용도로 주로 사용됩니다. +- sources - 라이브러리의 원본 코드 파일들. 파일들이 미니파이되지 않았고 읽기 쉽습니다. 패키지는 주로 컴포넌트 디버깅 용도로 사용됩니다. :::note -**Trial** 버전의 Scheduler 라이브러리에는 **sources** 폴더가 포함되어 있지 않습니다. +참고로 **Trial** 버전의 Scheduler 라이브러리에는 **sources** 폴더가 포함되어 있지 않습니다. ::: -- samples - 코드 샘플이 포함되어 있습니다. -- codebase - 라이브러리의 패키징된 코드 파일들이 있습니다. 이 파일들은 용량이 작고, 프로덕션 환경에서 사용하기에 적합합니다. 프로젝트에서는 이 폴더의 파일을 사용해야 합니다. +- samples - 코드 예제들. +- codebase - 라이브러리의 압축된 코드 파일들. 파일 크기가 훨씬 작고 프로덕션에서의 사용에 적합합니다. 앱에서는 이 폴더의 파일을 사용해야 합니다. -## 스케줄러 크기 설정 {#schedulersizing} +## Scheduler 크기 지정 -스케줄러는 컨테이너 요소(*scheduler_here* div, 위 예시 참고)의 전체 크기를 채우지만, 컨테이너 자체를 확장하지는 않습니다. -즉, 컨테이너에 높이가 지정되어 있지 않거나 0인 경우, 스케줄러도 높이가 0이 되어 화면에 표시되지 않습니다. +Scheduler는 위의 예제에서처럼 컨테이너 요소의 전체 크기를 차지합니다(예: 위의 예에서 *scheduler_here* DIV). 컨테이너의 높이를 지정하지 않거나 0으로 설정하면 Scheduler의 높이도 0이 되어 표시되지 않습니다. -예시에서는 스케줄러가 전체 화면을 차지하도록, 문서의 body와 스케줄러 컨테이너에 100% 너비와 높이를 설정합니다: +샘플에서 일반적으로 문서 본문과 Scheduler 컨테이너 요소에 100% 너비와 높이를 부여하여 Scheduler를 전체 화면으로 만듭니다: ~~~html -
+
~~~ -*scheduler_here* 요소가 기본 크기 설정이 된 div 내부에 위치할 경우, 문제가 발생할 수 있습니다: +만약 기본 크기가 지정되지 않은 div에 *scheduler_here* 요소를 넣으면 문제가 발생할 수 있습니다: ~~~html ~~~ -또한, sticky time scale의 올바른 top 위치를 지정하여 내비게이션 패널 바로 아래에 오도록 하기 위해 JavaScript 코드가 필요합니다. - -내비게이션 패널의 높이는 스타일과 내용에 따라 달라질 수 있으므로, 동적으로 높이를 계산하여 헤더의 top 위치에 적용해야 합니다. 예시는 다음과 같습니다: +또한 헤더의 올바른 상단 위치를 보장하기 위해 필요한 JavaScript가 있습니다. 네비게이션 패널은 다른 스타일과 콘텐츠에 따라 높이가 달라질 수 있으므로, 이 높이를 동적으로 계산해 헤더의 top 좌표로 적용해야 합니다: ~~~js scheduler.attachEvent("onViewChange", function(){ @@ -297,33 +291,36 @@ scheduler.attachEvent("onViewChange", function(){ }); ~~~ -아래 스니펫에서 전체 데모를 확인할 수 있습니다: +전체 데모는 아래 스니펫에서 확인할 수 있습니다: -**Related sample** [Container autoresize and sticky header](https://snippet.dhtmlx.com/syo8wm9s) +관련 샘플 [Container autoresize and sticky header](https://snippet.dhtmlx.com/syo8wm9s) -## Scheduler 반응형 처리 {#makingschedulerresponsive} +## Scheduler를 반응형으로 만들기 -Scheduler를 [header configuration property](#initializingschedulerviaheaderconfig)를 통해 초기화하면, 클라이언트의 화면 크기에 맞는 헤더 레이아웃을 선택할 수 있습니다. 또한, 작은 화면에서도 요소와 폰트가 잘 적응하도록 특정 스타일이 적용됩니다. +헤더 구성 속성으로 Scheduler를 초기화하면 클라이언트의 화면 크기에 맞는 헤더 구조를 선택할 수 있습니다. +또한 작은 화면에서 요소와 글꼴 크기를 반응형으로 만드는 특정 스타일이 적용됩니다. -자세한 내용은 별도의 문서인 ["Mobile Responsive Scheduler"](guides/touch-support.md)에서 확인하실 수 있습니다. +자세한 내용은 별도의 기사에서 확인할 수 있습니다: [Mobile Responsive Scheduler](guides/touch-support.md). -## ES6/7 및 TypeScript 앱에 파일 가져오기 {#import-files-into-es67-and-typescript-apps} +## ES6/7 및 TypeScript 앱에 파일 가져오기 -다음 명령어로 파일을 가져올 수 있습니다: +다음 명령을 사용해 파일을 가져옵니다: ~~~js import { scheduler } from 'dhtmlx-scheduler'; ~~~ -Commercial, Enterprise 또는 Ultimate 버전에서는 다음과 같이 가져옵니다: + +상용, 엔터프라이즈 또는 Ultimate 버전의 경우 명령은 다음과 같습니다: ~~~js import { scheduler, Scheduler } from 'dhtmlx-scheduler'; ~~~ -## Vite에서 Scheduler 사용하기 {#usingschedulerwithvite} -프로젝트에서 Vite를 사용하는 경우, 앱에 Scheduler가 제대로 포함되도록 **vite.config.js** 파일에 다음 설정을 추가하세요: +## Vite로 Scheduler 사용하기 + +프로젝트에서 Vite를 사용하는 경우, 애플리케이션에 Scheduler가 올바르게 포함되도록 **vite.config.js** 파일에 다음 설정이 필요합니다: ~~~js title="vite.config.js" optimizeDeps: { @@ -333,37 +330,39 @@ optimizeDeps: { } ~~~ -## RequireJS 기반 앱에 파일 포함하기 {#includefilesintoarequirejsbasedapp} + +RequireJS 기반 애플리케이션에 파일 포함하기 ------------------------------------------- -RequireJS 기반 앱에 dhtmlxScheduler 파일을 추가하려면, 아래 예시를 참고하세요: +RequireJS 기반 애플리케이션에 dhtmlxScheduler 파일을 포함하려면 아래 예제의 로직을 따라야 합니다: ~~~js requirejs(["codebase/dhtmlxscheduler"], function(dhx){ - var scheduler = dhx.scheduler; - var Scheduler = dhx.Scheduler;// for Enterprise builds - + const scheduler = dhx.scheduler; + const Scheduler = dhx.Scheduler;// Enterprise 빌드를 위한 것 + scheduler.init('scheduler_here',new Date(),"week"); scheduler.parse([ { - id: 1, text: "Event 1", start_date: "2022-07-15 09:00", - end_date: "2022-07-15 10:00" + id: 1, text: "Event 1", start_date: "2027-07-15 09:00", + end_date: "2027-07-15 10:00" }, { - id: 2, text: "Event 2", start_date: "2022-07-15 10:00", - end_date: "2022-07-15 11:00" + id: 2, text: "Event 2", start_date: "2027-07-15 10:00", + end_date: "2027-07-15 11:00" } ]); }); ~~~ -dhtmlxScheduler 라이브러리는 `scheduler`와 `Scheduler`(Commercial, Enterprise, Ultimate 버전에서 제공)를 포함하는 객체를 반환합니다. 이는 [여기](guides/multiple-per-page.md)에서 설명된 *scheduler* 및 *Scheduler* 객체와 동일합니다. + +dhtmlxScheduler 라이브러리는 `scheduler`와 `Scheduler`(상용, 엔터프라이즈 또는 Ultimate 버전에서)라는 필드를 가진 객체를 반환합니다 - 이 객체들에 대해서는 [여기](guides/multiple-per-page.md)를 참조하십시오. :::note -Scheduler를 RequireJS에서 커스텀 확장과 함께 사용할 때, RequireJS의 `shim` 구성을 반드시 지정하고 확장 파일의 의존성을 Scheduler로 선언해야 합니다. +RequireJS에서 Scheduler를 커스텀 확장과 함께 사용할 때는 RequireJS용 `shim` 구성을 명시하고 Scheduler에서 확장으로의 의존성을 직접 설정해야 합니다. ::: -아래 예시는 커스텀 확장 파일 *custom_tooltip_plugin.js*를 올바르게 설정하는 방법입니다: +다음 예제는 커스텀 확장 파일 *custom_tooltip_plugin.js*를 올바르게 설정하는 방법을 보여줍니다: ~~~js requirejs.config({ @@ -378,24 +377,25 @@ requirejs.config({ requirejs(["dhtmlxscheduler"], function (dhx) { - var scheduler = dhx.scheduler; + const scheduler = dhx.scheduler; scheduler.init('scheduler_here',new Date(),"week"); scheduler.parse([ { - id: 1, text: "Event 1", start_date: "2022-07-15 09:00", - end_date: "2022-07-15 10:00" + id: 1, text: "Event 1", start_date: "2027-07-15 09:00", + end_date: "2027-07-15 10:00" }, { - id: 2, text: "Event 2", start_date: "2022-07-15 10:00", - end_date: "2022-07-15 11:00" + id: 2, text: "Event 2", start_date: "2027-07-15 10:00", + end_date: "2027-07-15 11:00" } ]); }); ~~~ -패키지 내의 파일에 대한 모듈 이름은 반드시 *패키지의 'codebase' 폴더 내 상대 경로*와 *파일명*을 조합하여 지정해야 합니다. 예를 들어: -**코어 라이브러리:** +패키지 내 어떤 파일의 모듈 이름이 항상 *codebase 폴더 내부의 상대 경로*에 *파일명*을 붙여 지정되는지 확인하십시오. 예시: + +핵심 라이브러리: -- "dhtmlxscheduler": "./vendor/dhtmlxscheduler/dhtmlxscheduler" +- "dhtmlxscheduler": "./vendor/dhtmlxscheduler/dhtmlxscheduler" \ No newline at end of file diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/integration-with-bootstrap.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/integration-with-bootstrap.md deleted file mode 100644 index b76f42c9..00000000 --- a/i18n/ko/docusaurus-plugin-content-docs/current/guides/integration-with-bootstrap.md +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: "Bootstrap과의 통합" -sidebar_label: "Bootstrap과의 통합" ---- - -# Bootstrap과의 통합 - -Scheduler 라이브러리는 Bootstrap 프레임워크와 쉽게 통합할 수 있습니다. Bootstrap 기반 앱에 Scheduler를 포함하려면 다음 단계를 따르세요: - -1. dhtmlxScheduler 스크립트를 애플리케이션에 추가합니다: - -~~~html - -~~~ - -2. Bootstrap 컴포넌트와 함께 Scheduler 컨테이너 및 헤더 요소를 포함한 HTML 구조를 설정합니다. 예시는 다음과 같습니다: - -~~~html -
-
-
- dhtmlxScheduler -
-
- - -
- -
-
- -~~~ - -3. 일반적으로 Scheduler를 초기화하고 구성합니다: - -~~~js -scheduler.plugins({ - year_view: true, -}); -scheduler.config.first_hour = 8; -scheduler.config.limit_time_select = true; - -scheduler.init('scheduler_here',new Date(2017,5,30),"week"); -~~~ - - -[Bootstrap layout](https://docs.dhtmlx.com/scheduler/samples/10_integration/08_bootstrap.html) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/integration-with-dhtmlxmessage.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/integration-with-dhtmlxmessage.md deleted file mode 100644 index 1772c558..00000000 --- a/i18n/ko/docusaurus-plugin-content-docs/current/guides/integration-with-dhtmlxmessage.md +++ /dev/null @@ -1,364 +0,0 @@ ---- -title: "Popup Messages and Modal Boxes" -sidebar_label: "Popup Messages and Modal Boxes" ---- - -# Popup Messages and Modal Boxes - -스케줄러의 메시지는 사용자에게 오류를 알리거나, 작업을 확인 또는 거부하거나, 옵션을 선택하는 등 다양한 정보를 제공합니다. 스케줄러 메시지는 [dhtmlxMessage 저장소의 포크](https://github.com/DHTMLX/message)를 기반으로 하므로, dhtmlxMessage의 모든 기능이 dhtmlxScheduler 메시지에도 적용됩니다. - -메시지는 크게 두 가지 유형이 있습니다: [기본 팝업 메시지 박스](#basicpopupmessage)와 버튼이 포함되어 애플리케이션과의 상호작용을 차단하는 [모달 메시지 박스](#modalmessageboxes)입니다. - -모달 메시지 박스는 아래 세 가지 유형 중 하나일 수 있습니다: - -- [Alert 메시지 박스](#alert) -- [Confirm 메시지 박스](#confirm) -- [Modalbox](#modal) - -## 기본 팝업 메시지 - -기본 모달 메시지 박스를 표시하려면 [scheduler.message](api/method/message.md) 메서드를 사용하세요. 필수 파라미터는 메시지 텍스트입니다: - -~~~js -scheduler.message("The event is updated"); -~~~ - -메시지 박스는 세 가지 종류가 있습니다: - -- 기본 메시지 박스 (**type:"info"**) - -![default_message](/img/default_message.png) - -- 오류 메시지 박스 (**type:"error"**) - -![error_message](/img/error_message.png) - -- 경고 메시지 박스 (**type:"warning"**) - -![warning_message](/img/warning_message.png) - -특정 유형의 메시지 박스를 생성하려면 *type* 속성에 알맞은 값을 지정하세요: - -~~~js -// 오류 메시지 박스 생성 -scheduler.message({ - text: "Click on the buttons to explore Scheduler message types", - expire: -1, - type: "error" -}); -~~~ - - -[Different types of popups and modal boxes](https://docs.dhtmlx.com/scheduler/samples/09_api/11_popups_and_messages.html) - - -메시지 박스의 스타일을 커스터마이즈하려면 [여기](#styling)에서 설명한 대로 type 파라미터를 사용해 CSS 클래스를 지정할 수 있습니다. - -### 메시지 박스 위치 지정 - -기본적으로 팝업 메시지 박스는 창의 오른쪽 상단에 표시됩니다. [모달 메시지 박스](#modalmessageboxes)와 달리, 팝업 메시지는 애플리케이션과의 상호작용을 차단하지 않습니다. 위치는 **scheduler.message.position** 속성을 설정하여 변경할 수 있습니다: - -~~~js -scheduler.message.position = 'bottom'; -~~~ - -메시지 위치로 지정할 수 있는 값은 다음과 같습니다: - -- **top** - 메시지 박스를 오른쪽 상단에 표시 (기본값) -- **bottom** - 메시지 박스를 오른쪽 하단에 표시 -- **left** - 스케줄러 아래 왼쪽에 메시지 박스 표시 -- **right** - 스케줄러 아래 오른쪽에 메시지 박스 표시 - -### 표시 시간(Expire Interval) - -*expire* 파라미터를 설정하여 메시지 박스가 화면에 표시되는 시간을 제어할 수 있습니다. 이 값은 메시지가 사라지기 전까지의 시간을 밀리초 단위로 지정합니다. 기본값은 4000 밀리초입니다. - -이 시간을 변경하거나 메시지가 자동으로 사라지지 않게 하려면 *expire*를 "-1"로 설정하세요. 이 경우 메시지는 클릭해야만 닫힙니다. - -~~~js -scheduler.message({ - type:"error", - text:"Invalid data format", - expire:10000 -}); -~~~ - -### API로 메시지 박스 숨기기 - -특정 메시지 박스를 만료되기 전에 수동으로 숨기려면 **scheduler.message.hide(boxId)** 메서드를 사용하세요. 파라미터는 다음과 같습니다: - -- **boxId** - 메시지 박스를 생성할 때 할당한 ID - -~~~js -scheduler.message({ - id:"myBox", - text:"Page is loaded" -}); - -scheduler.message.hide("myBox"); -~~~ - -## 모달 메시지 박스 - -모달 메시지 박스는 버튼을 클릭하여 필요한 작업을 완료하기 전까지 애플리케이션과의 상호작용을 차단합니다. 버튼 클릭 시 닫히며, 지정된 콜백 함수가 실행됩니다. - -모달 메시지 박스에는 세 가지 유형이 있습니다: - -- [Alert 메시지 박스](#alert) - 단일 버튼이 있는 경고 박스 -- [Confirm 메시지 박스](#confirm) - 확인 또는 취소 버튼이 있는 확인 박스 -- [Modalbox](#modal) - 여러 개의 버튼을 지원하는 모달 박스 - -공통 속성은 다음과 같습니다: - -- **id** - 메시지 박스의 ID -- **title** - 헤더 텍스트 -- **type** - 메시지 유형(예: warning, error) -- **text** - 메시지 본문 텍스트 -- **ok** - "OK" 버튼의 텍스트 -- **cancel** - "Cancel" 버튼의 텍스트(confirm 박스 전용) -- **callback** - 버튼 클릭 시 호출되는 함수, 클릭한 버튼에 따라 *true* 또는 *false*를 받음 -- **position** - 현재 "top"만 지원; 다른 값은 박스를 중앙 정렬 -- **width** - 모달 박스의 너비(CSS [length](https://developer.mozilla.org/en-US/docs/Web/CSS/length) 또는 [percentage](https://developer.mozilla.org/en-US/docs/Web/CSS/percentage) 값, 예: "100px", "50%") -- **height** - 모달 박스의 높이(CSS [length](https://developer.mozilla.org/en-US/docs/Web/CSS/length) 또는 [percentage](https://developer.mozilla.org/en-US/docs/Web/CSS/percentage) 값, 예: "100px", "50%") - -## Alert 메시지 박스 (#alert) - -![alert](/img/alert.png) - -Alert 박스에는 "OK" 버튼 하나만 있습니다. 버튼 텍스트는 *ok* 파라미터로 지정할 수 있습니다: - -- 간단한 형태(메시지 텍스트만 지정, *text*에 자동 할당; 다른 파라미터는 기본값 사용): - -~~~js -scheduler.alert("Text"); -~~~ - -- 전체 형태(여러 파라미터 지정 가능; 지정하지 않은 값은 기본값 사용): - -~~~js -scheduler.alert({ - text: "some text", - title: "Alert", - ok: "Ok", - callback: function(){...} -}); -~~~ - -## Confirm 메시지 박스 (#confirm) - -![confirm](/img/confirm.png) - -Confirm 박스에는 "OK"와 "Cancel" 두 개의 버튼이 있습니다. 각 버튼의 텍스트는 해당 속성으로 설정합니다. - -- 간단한 형태 - -~~~js -scheduler.confirm("ConfirmText"); -~~~ - -- 전체 형태 - -~~~js -scheduler.confirm({ - title:"Confirm", - text:"This is a simple confirm", - ok:"Ok", - cancel:"Cancel", - callback: function(result){ - if(result){ - scheduler.message("You clicked Ok"); - }else{ - scheduler.message("You clicked Cancel"); - } - } -}); -~~~ - -## Modal Box (#modal) - -![modalbox](/img/modalbox.png) - -Modalbox는 다음과 같은 특징이 있습니다: - -- *text*에 임의의 *HTML* 내용을 포함할 수 있습니다 -- *buttons* 배열을 통해 여러 개의 버튼을 지원합니다. 각 버튼에 텍스트 라벨 지정 -- *callback* 함수는 눌린 버튼의 인덱스를 파라미터로 받음 - -~~~js -scheduler.modalbox({ - title:"Settings", - text: " ... html code here... ", - buttons:["Save", "Defaults", "Cancel"], - callback: function(result){ - scheduler.alert(result); - } -}); -~~~ - -### modalbox 버튼 구성 - -modalbox 버튼을 구성하는 방법은 두 가지가 있습니다: - -- 간단한 형태: - -~~~js -scheduler.modalbox({ - // 기타 설정 - buttons:["Save", "Delete", "Cancel"], - callback: function(result){ - switch(result){ - case "0": - //Save - break; - case "1": - //Delete - break; - case "2": - //Cancel - break; - } - } -}); -~~~ - -이 형태에서는 콜백에 클릭된 버튼의 인덱스가 문자열("0", "1", "2", ...)로 전달됩니다. 각 버튼에는 라벨의 소문자를 기반으로 한 CSS 클래스가 부여됩니다. 예: *scheduler_**save**_button*, *scheduler_**delete**_button*, *scheduler_**cancel**_button*. - -이 클래스들을 이용해 버튼 스타일을 지정할 수 있습니다: - -~~~js -.scheduler_delete_button div{ - background:red; -} -~~~ - -동일한 버튼 이름을 사용하는 여러 팝업에서 각기 다른 스타일이 필요하다면 **type** 속성을 사용할 수 있습니다: - -~~~js -scheduler.modalbox({ - // 기타 설정 - type:"special_popup", - buttons:["Save", "Delete", "Cancel"] -}); -~~~ - -**type** 값은 "scheduler_"로 접두어가 붙어 팝업 요소에 클래스가 추가됩니다: - -~~~js -.scheduler_special_popup .scheduler_delete_button div{ - background:red; -} -~~~ - -- 전체 형태: - -버튼 라벨, CSS 클래스, 콜백 값 등을 세부적으로 지정할 수 있습니다: - -~~~js -scheduler.modalbox({ - // 기타 설정 - buttons: [ - { label:"Save", css:"link_save_btn", value:"save" }, - { label:"Cancel", css:"link_cancel_btn", value:"cancel" }, - { label:"Delete", css:"link_delete_btn", value:"delete" } - ], - callback: function(result){ - switch(result){ - case "save": - //Save - break; - case "cancel": - //Cancel - break; - case "delete": - //Delete - break; - } - } -}); -~~~ - -**label** 파라미터만 필수이며, **css**와 **value**는 선택입니다. 생략하면 CSS 클래스는 라벨의 소문자 값에서 파생되고, 버튼 인덱스가 값으로 사용됩니다. - -**css** 클래스는 "scheduler_"로 접두어가 붙어 버튼 요소에 적용됩니다: - -~~~js -.scheduler_link_delete_btn div{ - background:red; -} -~~~ - -## 모달 메시지 박스 숨기기 - -모달 메시지 박스를 수동으로 닫으려면, 해당 모달박스의 컨테이너 엘리먼트를 **scheduler.modalbox.hide()** 메서드에 전달하세요: - -~~~js -var box = scheduler.modalbox({ - title: "Settings", - text: " ... html code here... ", - buttons: ["Save", "Defaults", "Cancel"], - callback: function(result){ - scheduler.alert(result); - } -}); - -scheduler.modalbox.hide(box); -~~~ - -**alert** 및 **confirm** 박스도 동일하게 **scheduler.modalbox.hide()** 메서드를 사용합니다: - -~~~js -var box = scheduler.confirm({ - text: "Continue?", - ok:"Yes", - cancel:"No", - callback: function(result){ - scheduler.message("Result: "+result); - } -}); - -scheduler.modalbox.hide(box); -~~~ - -## 스타일링 - -CSS 스타일을 정의하여 메시지 박스의 외형을 커스터마이즈할 수 있습니다. 일반적으로 *type* 파라미터로 CSS 클래스를 지정합니다. - -'type' 파라미터 사용 시 주의 사항: - -- alert 및 confirm 박스를 스타일링하려면 'window-related' 메서드로 초기화하세요. -- 메시지 박스를 스타일링하려면 'common' 메서드로 초기화하세요. -- CSS 클래스 이름은 'scheduler-'로 시작해야 합니다. -- 스타일을 올바르게 적용하려면 **.scheduler-some div**와 같은 선택자를 사용해 scheduler 메시지 내부 요소를 타겟팅하세요. - -예시: - -~~~js - - - -scheduler.message({ type:"myCss", text:"some text" }); -~~~ - -## 모달 창과 키보드 상호작용 - -모달 박스의 키보드 동작은 **scheduler.message.keyboard** 속성으로 제어하며, 기본값은 *true*입니다. - -활성화되어 있을 때, 모달 박스는 페이지의 대부분 키보드 이벤트를 차단합니다. 활성화된 키는 다음과 같습니다: - -- "space" 및 "enter" - 모달 박스에서 *true* 결과를 발생시킴 -- "escape" - *false* 결과를 발생시킴 - -**scheduler.message.keyboard**를 *false*로 설정하면 이 차단이 해제되어, 모달 박스 내에서 데이터 입력 등 일반적인 키보드 입력이 가능합니다: - -~~~js -scheduler.message.keyboard = false; -scheduler.modalbox({...}); -~~~ - -이렇게 하면 모달 창 내에서 일반적인 키보드 사용이 가능합니다. diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/jquery-integration.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/jquery-integration.md deleted file mode 100644 index dac33730..00000000 --- a/i18n/ko/docusaurus-plugin-content-docs/current/guides/jquery-integration.md +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: "jQuery 통합" -sidebar_label: "jQuery 통합" ---- - -# jQuery 통합 - -버전 4.0부터 dhtmlxScheduler는 jQuery와의 통합을 지원합니다. - -아래는 jQuery를 사용하여 표준 스케줄러를 초기화하는 방법입니다: - -~~~js -$(function(){ - $(".myscheduler").dhx_scheduler({ - date:new Date(2019,4,25), - mode:"month" - }); - - scheduler.load("data/events"); -}); -~~~ - -이 예시에서: - -- **".myscheduler"** - 스케줄러가 생성될 컨테이너에 대한 jQuery 호환 CSS 선택자입니다. (PRO 버전에서는 여러 컨테이너에 동시에 스케줄러를 초기화하는 것도 가능합니다.) -- **dhx_scheduler()** 메서드는 dhtmlxScheduler의 인스턴스를 생성합니다. 이 메서드는 설정 객체를 매개변수로 받습니다: - - **date** - (*Date*) 스케줄러의 초기 날짜를 지정합니다 (기본값은 현재 날짜) - - **mode** - (*string*) 초기 뷰를 지정합니다 (기본값은 "week") - - 기타 설정 옵션들(scheduler.config.xxxxx로 보통 설정하는 값들)도 이 방식으로 전달할 수 있습니다 -:::note -jQuery 메서드를 통해 초기화된 스케줄러도 표준 스케줄러와 동일한 설정 및 API를 지원합니다. -::: - - -[JQuery integration](https://docs.dhtmlx.com/scheduler/samples/10_integration/06_jquery.html) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/keyboard-navigation.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/keyboard-navigation.md index 48ca143b..9f3a8e8f 100644 --- a/i18n/ko/docusaurus-plugin-content-docs/current/guides/keyboard-navigation.md +++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/keyboard-navigation.md @@ -1,52 +1,52 @@ ---- -title: "키보드 내비게이션" -sidebar_label: "키보드 내비게이션" +--- +title: "키보드 네비게이션" +sidebar_label: "키보드 네비게이션" --- -# 키보드 내비게이션 +# 키보드 네비게이션 -Scheduler와 그 요소들은 개별 키 또는 키 조합을 사용하여 접근할 수 있습니다. 이 문서에서는 Scheduler의 키보드 내비게이션과 관련된 모든 사항, 포커스 동작 방식, 내장 단축키, 그리고 사용자 정의 단축키 생성 방법에 대해 설명합니다. +스케줄러와 그 요소에 키나 키 조합으로 접근할 수 있습니다. 이 문서는 Scheduler의 키보드 탐색 특성에 대한 모든 필요한 정보를 제공합니다. 포커스 동작, 준비된 단축키의 사용 및 사용자 정의 단축키 생성 등 -## 기능 활성화 {#enablingthefunctionality} +## 기능 활성화 방법 -Scheduler에서 키보드 내비게이션을 활성화하려면, 페이지에서 **key_nav** 확장 기능을 활성화하면 됩니다. +스케줄러에서 키보드 탐색을 사용하려면 페이지에서 **key_nav** 확장을 활성화해야 합니다. ~~~js scheduler.plugins({ - key_nav: true + key_nav: true; }); ~~~ -## 키보드 내비게이션 중 포커스 동작 {#focusbehaviorduringkeyboardnavigation} +## 키보드 탐색 중 포커스 동작 -### Scheduler에 포커스 맞추기 +### Scheduler에서의 포커스 -Tab 키를 누르면 다른 요소와 마찬가지로 Scheduler에 포커스가 설정됩니다. 포커스가 설정된 후에는 방향키 및 기타 단축키를 사용하여 Scheduler 내에서 이동할 수 있습니다. +Tab 키를 누르면 Scheduler는 일반 요소와 마찬가지로 포커스를 얻습니다. 그 후, Scheduler를 탐색하려면 화살표 키 및 기타 키를 사용할 수 있습니다. -Tab 키를 다시 누르면 Scheduler에서 포커스가 다른 페이지 요소로 이동합니다. +두 번째로 Tab 키를 누르면 포커스가 Scheduler를 벗어나 페이지의 다른 위치로 이동합니다. -### 모달 창에 포커스 맞추기 +### 모달 윈도우에서의 포커스 -모달 창(예: lightbox 또는 confirm 창)이 열리면, 포커스가 Scheduler에서 해당 창으로 이동하여 일반 폼처럼 내부를 탐색할 수 있습니다. 창을 닫으면 포커스가 다시 Scheduler로 돌아옵니다. +모달 윈도우(라이트박스, 확인 창)가 열리면 포커스가 Scheduler에서 이 창으로 이동하고, 이 창 안에서 탐색이 일반 양식처럼 이루어집니다. 창이 닫히면 포커스는 다시 Scheduler로 돌아갑니다. -프로그래밍적으로 Scheduler에 포커스를 다시 맞추려면 [focus](api/method/focus.md) 메서드를 사용하세요: +포커스를 Scheduler로 되돌리려면 [focus](api/method/focus.md) 메서드를 사용해야 합니다. ~~~js scheduler.focus(); ~~~ -Scheduler가 포커스를 다시 얻으면 내부의 활성 요소, 첫 번째 행 또는 최근에 선택된 항목에 포커스를 둡니다. +Scheduler가 다시 포커스를 얻으면 내부의 활성 요소, 또는 첫 번째 행, 또는 가장 최근에 선택된 요소에 포커스를 놓습니다. -모달 창 내에서의 기본 내비게이션 동작은 다음과 같습니다: +모달 창에서의 기본 내비게이션 동작은 다음과 같습니다: -- *Enter* - 확인 및 닫기 -- *Escape* - 변경사항을 저장하지 않고 닫기 +- *Enter* - 확인하고 닫기 +- *Escape* - 변경 없이 닫기 -포커스가 폼 버튼에 있을 때 *Space* 또는 *Enter*를 누르면 기본 동작 대신 해당 버튼의 동작이 실행됩니다. +포커스가 양식의 특정 버튼에 있을 경우, *Space* 또는 *Enter*를 누르면 포커스된 버튼이 눌려 해당 버튼의 동작이 실행되며, 다른 액션은 실행되지 않습니다. -## 포커스된 셀 스타일링 {#stylingcellsinfocus} +## 포커스가 있는 셀의 스타일링 -포커스된 셀은 기본적으로 회색/노란색 배경으로 강조 표시됩니다. 이 스타일을 변경하려면 **.dhx_focus_slot** CSS 클래스를 수정하면 됩니다: +셀에 포커스가 설정되면 회색/노란색으로 강조됩니다. 이 스타일을 변경하려면 .dhx_focus_slot CSS 클래스를 사용하세요: ~~~js ~~~ -## 범위(Scopes) {#scopes} +## 스코프 -키보드 동작은 컨텍스트에 따라 다르므로, Scheduler 내의 다양한 요소(범위)에 서로 다른 단축키를 지정할 수 있습니다. 사용 가능한 범위는 다음과 같습니다: +키 클릭 시 호출되는 동작은 컨텍스트에 따라 달라집니다. 즉, 서로 다른 요소들(스코프)에 서로 다른 동작을 연결할 수 있습니다. Scheduler에는 다음과 같은 컨텍스트 요소(스코프)가 있습니다: -- **"scheduler"** - 전체 Scheduler -- **"timeSlot"** - 타임 슬롯 -- **"event"** - 이벤트 -- **"minicalDate"** - 미니 캘린더의 날짜 -- **"minicalButton"** - 미니 캘린더의 화살표 버튼 +- **"scheduler"** - 전체 스케줄러 +- **"timeSlot"** - 하나의 시간 슬롯 +- **"event"** - 하나의 이벤트 +- **"minicalDate"** - 미니 달력의 날짜 +- **"minicalButton"** - 미니 달력의 화살표 버튼 -동일한 단축키가 여러 범위에 지정된 경우, 더 구체적인 요소에 연결된 단축키가 우선 적용됩니다. 예를 들어, 이벤트에 지정된 단축키는 전체 Scheduler에 지정된 동일한 단축키보다 우선합니다. +동일한 단축키가 여러 스코프에 연결된 경우, 더 구체적인 단축키가 작동합니다. 즉, 같은 단축키가 Scheduler와 그 요소에 모두 연결된 경우, 요소에 연결된 단축키가 우선적으로 호출됩니다. -### 단축키 추가하기 +### 단축키 추가 -새로운 키보드 단축키를 추가하려면, [addShortcut](api/method/addshortcut.md) 메서드를 세 가지 매개변수와 함께 사용하세요: +새로운 키보드 단축키를 만들려면 [addShortcut](api/method/addshortcut.md) 메서드를 사용하고 세 매개변수를 전달해야 합니다: -- **shortcut** - (*string*) 키 또는 키 조합 -- **handler** - (*function*) 단축키가 실행될 때 호출할 함수 -- **scope** - (*string*) 핸들러를 연결할 컨텍스트 요소 +- **shortcut** - (*string*) 새 단축키 키나 키 조합 이름 +- **handler** - (*function*) 단축키 호출 시 호출될 핸들러 함수 +- **scope** - (*string*) 핸들러 함수를 연결할 컨텍스트 요소의 이름 ~~~js scheduler.addShortcut("shift+w", function(e){ - var target = e.target; + const target = e.target; if(target.closest("[event_id]")) - var eventId = target.getAttribute("event_id"); + const eventId = target.getAttribute("event_id"); if(eventId) scheduler.showQuickInfo(eventId); },"event"); ~~~ -### 단축키 제거하기 +### 단축키 제거 -특정 범위에서 단축키를 제거하려면, [removeShortcut](api/method/removeshortcut.md) 메서드를 두 가지 매개변수와 함께 사용하세요: +스코프에서 단축키를 제거하려면 [removeShortcut](api/method/removeshortcut.md) 메서드를 사용해야 합니다. 이 메서드는 두 개의 매개변수를 받습니다: -- **shortcut** - (*string*) 단축키의 키 또는 키 조합 -- **scope** - (*string*) 단축키를 제거할 컨텍스트 요소 +- **shortcut** - (*string*) 단축키의 이름 +- **scope** - (*string*) 단축키가 연결된 컨텍스트 요소의 이름 ~~~js scheduler.removeShortcut("shift+w","event"); ~~~ -### 단축키 핸들러 가져오기 +### 단축키 핸들러 얻기 -[getShortcutHandler](api/method/getshortcuthandler.md)를 사용하여 단축키의 핸들러 함수를 가져올 수 있습니다. 다음 매개변수를 사용합니다: +키보드 단축키의 핸들러를 얻으려면 [getShortcutHandler](api/method/getshortcuthandler.md) 메서드를 사용합니다. 이 메서드는 두 매개변수를 받습니다: -- **shortcut** - (*string*) 키 또는 키 조합 -- **scope** - (*string*) 단축키가 연결된 컨텍스트 요소 +- **shortcut** - (*string*) 단축키의 이름 +- **scope** - (*string*) 단축키가 연결된 컨텍스트 요소의 이름 ~~~js -var shortcut_handler = scheduler.getShortcutHandler("shift+w","event"); +const shortcut_handler = scheduler.getShortcutHandler("shift+w","event"); ~~~ -이 메서드는 해당 단축키를 처리하는 함수를 반환합니다. +이 메서드는 단축키 호출의 핸들러를 담은 함수를 반환합니다. -## 단축키 문법 {#shortcut-syntax} +## 단축키 구문 -키보드 단축키는 다음과 같이 구성할 수 있습니다: +키보드 단축키는 다음 키 또는 키 조합으로 구성될 수 있습니다: -- 수정 키와 문자 키 조합(예: "ctrl+a") -- 수정 키와 비문자 키 조합(예: "ctrl+space") -- 단일 문자 키(예: "a") -- 단일 비문자 키(예: "space") +- 수정 키 + 문자 키("ctrl+a"); +- 수정 키 + 비문자 키("ctrl+space"); +- 문자 키("a"); +- 비문자 키("space") -여러 키 조합이 동일한 동작을 트리거하도록 할 수 있으며, 각 조합을 쉼표로 구분하여 나열합니다(예: "ctrl+a, ctrl+space"). +하나의 동작에 대해 여러 키 조합이 있을 수 있습니다. 이 경우 모든 조합은 쉼표로 구분하여 나열됩니다: "ctrl+a, ctrl+space". ### 단축키에 사용할 수 있는 키 목록 -- 수정 키: **shift**, **alt**, **ctrl**, **meta** -- 비문자 키: **backspace**, **tab**, **enter**, **esc**, **space**, **up**, **down**, **left**, **right**, **home**, **end**, **pageup**, **pagedown**, **delete**, **insert**, **plus**, **f1-f12** +- 수정 키: **shift**, **alt**, **ctrl**, **meta**; +- 비문자 키: **backspace**, **tab**, **enter**, **esc**, **space**, **up**, **down**, **left**, **right**, **home**, **end**, **pageup**, **pagedown**, **delete**, + **insert**, **plus**, **f1-f12**. -## 기존 단축키 {#existingshortcuts} +## 기존 단축키 -Scheduler에는 내비게이션을 위한 사전 정의된 단축키 세트가 포함되어 있습니다: +스케줄러를 탐색하는 데 사용할 수 있는 미리 정의된 단축키 세트가 있습니다: ### 일반 키보드 단축키 -- **Tab** - Scheduler에 포커스 -- **Alt+1, Alt+2, Alt+3, ...** - 뷰 전환 -- **Ctrl+Left/Right** - 이전/다음 날짜로 이동 +- **Tab** - 스케줄러에 포커스 설정 +- **Alt+1,Alt+2,Alt+3,...** - 보기 간 전환 +- **Ctrl+Left/Right** - 다음/이전 날짜로 이동 - **Ctrl+Up/Down** - 데이터 영역 스크롤 - **Ctrl+Enter** - 새 이벤트 생성 - **E, Shift+E** - 다음/이전 이벤트 선택 -- **Home** - 현재 날짜로 이동 -- **Ctrl+C, Ctrl+X, Ctrl+V** - 이벤트 복사, 잘라내기, 붙여넣기 +- **Home** - 현재 날짜로 전환 +- **Ctrl+C, Ctrl+X, Ctrl+V** - 이벤트 복사/잘라내기/붙여넣기 -### 타임 슬롯 단축키 +### 시간 슬롯 단축키 -- **위/아래/왼쪽/오른쪽 방향키** - 타임 슬롯 간 이동 -- **Shift+위/아래/왼쪽/오른쪽 방향키** - 선택된 타임 슬롯 확장 -- **Enter** - 선택된 타임 슬롯에 이벤트 생성 +- **Up/Down/Left/Right Arrow Keys** - 시간 슬롯 간 탐색 +- **Shift+Up/Down/Left/Right Arrow Keys** - 시간 슬롯 확장 +- **Enter** - 선택된 시간 슬롯에 이벤트 생성 ### 이벤트 단축키 -- **위/아래/왼쪽/오른쪽 방향키** - 타임 슬롯으로 이동 -- **Enter** - lightbox 열기 +- **Up/Down/Left/Right Arrow Keys** - 시간 슬롯으로 이동 +- **Enter** - 라이트박스 열기 -### 미니 캘린더 단축키 +### 미니 달력 단축키 -- **Tab** - 미니 캘린더에 포커스 -- **위/아래/왼쪽/오른쪽 방향키** - 버튼 및 날짜 탐색 -- **Enter** - 선택된 버튼 또는 날짜 활성화 +- **Tab** - 미니 달력에 포커스 설정 +- **Up/Down/Left/Right Arrow Keys** - 버튼/셀 간 탐색 +- **Enter** - 버튼/셀 클릭 [Keyboard Navigation and WAI-ARIA - Flat Skin](https://docs.dhtmlx.com/scheduler/samples/13_accessibility/01_regular_skin_all_views.html) - [Keyboard navigation in the scheduler](https://docs.dhtmlx.com/scheduler/samples/03_extensions/07_navigation_plugin.html) - ### 관련 이벤트 - [onEventCopied](api/event/oneventcopied.md) - [onEventCut](api/event/oneventcut.md) -- [onEventPasted](api/event/oneventpasted.md) +- [onEventPasted](api/event/oneventpasted.md) \ No newline at end of file diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/lightbox-editors-manipulations.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/lightbox-editors-manipulations.md index 7b9b419b..f097f3b5 100644 --- a/i18n/ko/docusaurus-plugin-content-docs/current/guides/lightbox-editors-manipulations.md +++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/lightbox-editors-manipulations.md @@ -1,29 +1,27 @@ --- -title: "Lightbox 조작하기" -sidebar_label: "Lightbox 조작하기" +title: "라이트박스 조작" +sidebar_label: "라이트박스 조작" --- -# Lightbox 조작하기 +# 라이트박스 조작 -## 컨트롤 값 가져오기/설정하기 {#gettingsettingthecontrolvalue} +## 컨트롤 값 가져오기/설정하기 -섹션의 컨트롤 값을 가져오거나 업데이트하려면 [formSection](api/method/formsection.md) 객체를 다음과 같이 사용하세요: +섹션의 컨트롤 값을 가져오거나 설정하려면 아래와 같이 [formSection] 객체를 사용합니다: ~~~js -// 값을 가져오기 -var value = scheduler.formSection('description').getValue(); +//값을 가져오기 +const value = scheduler.formSection('description').getValue(); -// 값을 설정하기 +//값을 설정하기 scheduler.formSection('description').setValue('abc'); ~~~ +[라이트박스 컨트롤의 값 설정/가져오기](https://docs.dhtmlx.com/scheduler/samples/02_customization/22_opertions_with_lightbox.html) -[Setting/getting values of lightbox's controls](https://docs.dhtmlx.com/scheduler/samples/02_customization/22_opertions_with_lightbox.html) +## 단일 클릭으로 라이트박스 열기 - -## 한 번의 클릭으로 라이트박스 열기 {#opening-the-lightbox-on-a-single-click} - -라이트박스를 한 번의 클릭으로 열도록 설정할 수 있습니다. 이는 [onClick](api/event/onclick.md) 이벤트와 [showLightbox](api/method/showlightbox.md) 메서드를 함께 사용하여 구현할 수 있습니다: +기존 라이트박스를 단일 클릭으로 열 수 있습니다. 이를 위해 [onClick] 이벤트와 [showLightbox] 메서드를 사용합니다: ~~~js scheduler.attachEvent("onClick", function (id, e){ @@ -32,36 +30,36 @@ scheduler.attachEvent("onClick", function (id, e){ }); ~~~ -**Related sample** [Opening the lightbox on one click](https://snippet.dhtmlx.com/5/50e639d2a) +**관련 샘플** [하나의 클릭으로 라이트박스 열기](https://snippet.dhtmlx.com/5/50e639d2a) -이 설정을 적용하면, 이벤트 박스를 마우스 왼쪽 버튼으로 클릭할 때 라이트박스가 열립니다. +사용자가 이벤트 박스를 왼쪽 마우스 버튼으로 클릭하면 라이트박스가 열립니다. -## 라이트박스가 열려 있는지 확인하기 {#checking-whether-the-lightbox-is-opened} +## 라이트박스가 열렸는지 확인하기 -라이트박스가 현재 열려 있는지 닫혀 있는지 확인하려면, [getState](api/method/getstate.md) 메서드가 반환하는 state 객체의 **lightbox_id** 속성을 확인하세요. -라이트박스가 열려 있으면 해당 라이트박스에 있는 이벤트의 id를 반환하고, 그렇지 않으면 'null' 또는 'undefined'를 반환합니다: +현재 라이트박스가 열려 있는지 닫혀 있는지 확인하려면 [getState](api/method/getstate.md) 메서드가 반환하는 상태 객체의 **lightbox_id** 속성을 사용합니다. +라이트박스가 열려 있다면 열려 있는 이벤트의 id를 반환하고, 그렇지 않으면 'null' 또는 'undefined'가 반환됩니다: ~~~js if (scheduler.getState().lightbox_id){ - // 라이트박스가 열려 있을 때 처리 코드 + // 열린 라이트박스에 대한 코드 } else { - // 라이트박스가 닫혀 있을 때 처리 코드 + // 닫힌 라이트박스에 대한 코드 } ~~~ -## 이벤트 객체의 속성을 라이트박스 섹션에 매핑하기 {#mapping-properties-of-an-event-object-to-the-lightbox-sections} +## 이벤트 객체의 속성을 라이트박스 섹션에 매핑하기 -이벤트 객체의 속성을 라이트박스 섹션에 연결하려면 다음 단계를 따르세요: +이벤트 객체의 속성을 라이트박스 섹션에 매핑하려면 다음을 수행합니다: -- 데이터 소스가 [지원되는 형식](guides/data-formats.md)으로 이벤트를 제공하는지 확인하세요. +- 데이터 소스가 [지원 형식](guides/data-formats.md)으로 이벤트를 반환하는지 확인합니다. ~~~js { "data":[ { "id":"1", - "start_date":"2019-03-02 00:00:00", - "end_date":"2019-03-04 00:00:00", + "start_date":"2027-03-02 00:00:00", + "end_date":"2027-03-04 00:00:00", "text":"Graduation ceremony", "type":"1", "location":"London" @@ -71,12 +69,12 @@ if (scheduler.getState().lightbox_id){ } ~~~ -데이터 소스가 반환하는 모든 속성은 이벤트 객체에 추가되며, [클라이언트 사이드 API](guides/event-object-operations.md)를 통해 접근할 수 있습니다. +참고로, 데이터 소스가 반환하는 모든 속성은 이벤트 객체에 추가되며 [클라이언트 측 API](guides/event-object-operations.md)에서 사용할 수 있습니다. -- 라이트박스 컨트롤을 특정 속성에 매핑하려면 섹션의 **map_to** 속성에 이벤트 속성명을 지정하세요: +- 특정 속성에 라이트박스 컨트롤을 매핑하려면 섹션의 **map_to** 속성에 이벤트 속성의 이름을 지정합니다: ~~~js -scheduler.config.lightbox.sections="[" +scheduler.config.lightbox.sections=[ {name:"description", height:70, map_to:"text", type:"textarea" , focus:true}, {name:"locationInput", height:35, map_to:"location", type:"textarea" }, {name:"typeSelect", map_to:"type", type:"select", options:scheduler.serverList("types")}, @@ -84,29 +82,27 @@ scheduler.config.lightbox.sections="[" ]; ~~~ -[time](guides/time.md) 및 [recurring](guides/recurring-events.md#recurringlightbox) 컨트롤은 예외로, 항상 고정된 속성(**event.start_date/event.end_date** 및 **event.rec_type/event.event_length/event.event_pid**)에 매핑됩니다. +다음 예외는 항상 고정 속성에 매핑되는 컨트롤로, [time] 및 [recurring] 컨트롤입니다(각각은 고정 속성에 매핑됩니다: **event.start_date/event.end_date** 및 **event.rec_type/event.event_length/event.event_pid**). -## Time 컨트롤에서 자동 종료 날짜 {#automatic-end-date-in-the-time-control} +## Time 컨트롤의 자동 종료 날짜 -이벤트의 기본 지속 시간을 설정하고, 해당 지속 시간을 유지하도록 종료 날짜가 자동으로 업데이트되게 하려면 다음 속성을 설정하세요: +초기 이벤트 지속 시간을 설정하고 종료 날짜가 자동으로 바뀌도록 하려면 [event_duration]과 [auto_end_date] 속성을 사용합니다: ~~~js -// auto_end_time 파라미터에 분 단위로 이벤트 지속 시간 지정 +//auto_end_time 매개변수에 대한 이벤트 지속 시간을 분 단위로 지정 scheduler.config.event_duration = 60; scheduler.config.auto_end_date = true; ~~~ - [Automatic end date](https://docs.dhtmlx.com/scheduler/samples/02_customization/11_auto_end_date.html) +이와 같은 구성으로 사용자가 라이트박스에서 시작 시간이나 날짜를 변경할 때마다 종료 시간과 날짜가 자동으로 변경되어 이벤트 지속 시간이 60분(옵션의 [event_duration])과 같아지게 됩니다. -이렇게 하면 사용자가 라이트박스에서 이벤트의 시작 시간이나 날짜를 변경할 때마다 종료 시간과 날짜가 자동으로 조정되어 이벤트 지속 시간이 60분( [event_duration](api/config/event_duration.md) 옵션에 지정된 대로)으로 유지됩니다. - -## 라이트박스 컨트롤의 기본값 설정하기 {#setting-the-default-value-for-a-lightboxs-control} +## 라이트박스 컨트롤의 기본값 설정하기 -라이트박스 섹션의 기본값을 지정하려면 해당 섹션의 **default_value** 속성을 사용하세요. +라이트박스 섹션의 기본값을 설정하려면 섹션 객체의 **default_value** 속성을 사용합니다. -예를 들어, 이벤트 위치에 대한 커스텀 섹션을 추가하고 'Location'으로 이름을 지정한 경우, 새 이벤트를 생성할 때 기본적으로 비어 있습니다. 이를 특정 주소(예: Greenwich Observatory)로 기본 표시하려면 다음과 같이 라이트박스를 설정하세요: +예를 들어, 이벤트의 위치를 표시하는 커스텀 섹션을 라이트박스에 추가하고 이를 'Location'이라고 부른 경우, 사용자가 새 이벤트를 만들 때 해당 필드는 비어 있습니다. 이러한 동작을 수정하고 Greenwich Observatory의 주소를 기본값으로 표시하려면 다음과 같이 라이트박스를 지정합니다: ~~~js scheduler.config.lightbox.sections = [ @@ -117,167 +113,162 @@ scheduler.config.lightbox.sections = [ ]; ~~~ -**default_value**는 라이트박스 섹션 자체의 기본 내용을 설정하며, 새 이벤트의 기본값을 설정하는 것이 아님에 유의하세요. 즉, 라이트박스가 열리고 이벤트가 저장된 후에만 새 이벤트에 지정한 값이 할당됩니다. +참고로, **default_value** 속성은 라이트박스 섹션의 기본값을 설정하며 새 이벤트의 기본값이 아닙니다. 즉, 새 이벤트는 사용자가 라이트박스를 열고 이벤트를 저장한 후에만 지정된 값을 받습니다. -새 이벤트가 생성될 때 바로 기본값을 할당하려면 [onEventCreated](api/event/oneventcreated.md) 이벤트를 사용하세요: +새 이벤트에 대해 직접 기본값을 설정하려면 [onEventCreated](api/event/oneventcreated.md) 이벤트를 사용합니다: ~~~js scheduler.attachEvent("onEventCreated", function(id,e){ scheduler.getEvent(id).location = 'Blackheath Avenue London, Greenwich...'; - scheduler.updateEvent(id); // 업데이트된 이벤트 렌더링 + scheduler.updateEvent(id); // 업데이트된 이벤트를 렌더링 return true; }); ~~~ -## 날짜-시간 컨트롤 순서 변경 및 시간 선택기 제거 {#changingtheorderofdatetimecontrolsandremovingtimeselectors} +## 날짜-시간 컨트롤의 순서 변경 및 시간 선택기 제거 -'Time period' 섹션에서 날짜-시간 컨트롤의 순서를 변경하거나 생략하려면 **time_format** 속성을 설정하세요: +'Time period' 섹션에서 날짜-시간 컨트롤의 순서를 변경하거나 일부를 제거할 수 있습니다. 이를 위해 **time_format** 속성을 사용합니다: ~~~js -scheduler.config.lightbox.sections="[" +scheduler.config.lightbox.sections= [ {name:"description", height:130, map_to:"text", type:"textarea" , focus:true}, {name:"time", ..., time_format:["%H:%i","%m","%d","%Y"]} ]; ~~~ :::note -이 설정은 배열 내 요소의 순서만 변경하며, 데이터 표시 형식 자체는 변경하지 않습니다. +참고: 데이터 표시 형식을 변경할 수 없으며, 배열 항목의 순서만 변경할 수 있습니다. ::: -예시: +예를 들어 형식을 아래와 같이 바꿀 수 있습니다: ~~~js -// 기본값 +//기본값 time_format:["%H:%i", "%m", "%d", "%Y"] -// 월이 먼저 오도록 +//월을 먼저 표시 time_format:["%m","%d", "%Y", "%H:%i"] -// 연도 선택기 생략 +// 연도 선택기를 제거 time_format:["%H:%i", "%m", "%d"] -// 잘못된 사용법 -time_format:["%H:%i", "%M", "%d", "%Y"] // "%m"이 실수로 "%M"으로 변경됨 +// 잘못된 예 +time_format:["%H:%i", "%M", "%d", "%Y"] //"%m"이 "%M"으로 변경됨 ~~~ -## 읽기 전용 모드 {#readonlymode} +## 읽기 전용 모드 -읽기 전용 모드에 대한 자세한 내용은 ["읽기 전용 모드"](guides/readonly.md) 챕터를 참고하세요. +읽기 전용 모드에 대한 자세한 내용은 [읽기 전용 모드](guides/readonly.md) 챕터를 참조하세요. -## 일부 이벤트에서 섹션 숨기기 {#makingasectionhiddenforsomeevents} - -특정 이벤트에 대해 섹션을 숨기려면, 해당 섹션의 **set_value** 메서드를 다음과 같이 오버라이드하세요: +## 특정 이벤트에 대해 섹션을 숨기기 +특정 이벤트에 대해 섹션을 숨기려면 해당 섹션의 **set_value** 메서드를 아래와 같이 재정의합니다: ~~~js -scheduler.form_blocks.textarea.set_value="function(node,value,ev){" - node.firstChild.value="value||"""; - var style = ev.some_property?"":"none"; - node.style.display="style;" // 에디터 영역 - node.previousSibling.style.display="style;" // 섹션 헤더 - scheduler.setLightboxSize(); // 라이트박스 크기 조정 +scheduler.form_blocks.textarea.set_value = function(node,value,ev){ + node.firstChild.value= value || ""; + let style = ev.some_property ? "" : "none"; + node.style.display = "style;" // 편집기 영역 + node.previousSibling.style.display = "style;" //섹션 헤더 + scheduler.setLightboxSize(); // 라이트박스의 올바른 크기 설정 } ~~~ ### '종일 이벤트' 옵션 -라이트박스에서 '종일 이벤트' 옵션을 활성화하려면 [full_day](api/config/full_day.md) 옵션을 *true*로 설정하세요: +라이트박스에 '종일 이벤트' 옵션을 추가하려면 [full_day](api/config/full_day.md) 옵션을 true로 설정합니다. 이를 위해 아래의 코드 줄을 추가하면 됩니다: ~~~js scheduler.config.full_day = true; ~~~ -이 옵션을 활성화하면 **Time period** 섹션의 왼쪽에 **Full Day** 체크박스가 나타납니다. 선택 시 해당 섹션의 모든 입력 필드가 비활성화되고, 이벤트 지속 시간이 현재 셀 날짜의 **0:00 AM**부터 다음날 **0:00 AM**까지로 설정됩니다. - +한 번 [full_day](api/config/full_day.md) 옵션이 활성화되면, 왼쪽 부분의 **Time period** 섹션에 있는 **Full Day** 체크박스가 표시됩니다. 선택하면 해당 섹션의 모든 입력 필드가 차단되고, 이벤트 지속 시간이 현재 셀 날짜의 자정부터 다음 날 자정까지의 전체 일정으로 설정됩니다. [Full day events](https://docs.dhtmlx.com/scheduler/samples/02_customization/12_full_day_event.html) +## 라이트박스의 유형 -## 라이트박스의 종류 {#types-of-lightbox} +라이트박스는 두 가지 유형 중 하나로 제시될 수 있습니다: -라이트박스는 두 가지 스타일로 제공됩니다: +- Standard (wide); +- Short. -- 표준형(와이드) -- 쇼트형 +기본 스킨에서는 표준(와이드) 유형으로만 표시될 수 있으며, 반면에 'glossy' 또는 'classic' 스킨에서는 두 유형 중 하나를 선택할 수 있습니다. -기본 스킨에서는 표준형(와이드) 라이트박스만 사용할 수 있고, 'glossy' 또는 'classic' 스킨에서는 두 가지 중 선택할 수 있습니다. - -선호하는 타입을 선택하려면 [wide_form](api/config/wide_form.md) 속성을 사용하세요: +원하는 유형을 설정하려면 [wide_form] 속성을 사용합니다: ~~~js scheduler.config.wide_form = true; ~~~ - -**표준형(와이드) 라이트박스**: +**Standard (wide) lightbox**: ![scheduler_wide_form.png](/img/scheduler_wide_form.png) -**쇼트형**: +**Short form**: ![scheduler_standard_form.png](/img/scheduler_standard_form.png) -### 섹션 헤더에 버튼 추가하기 +### 섹션 머리글의 버튼 -섹션 헤더에 커스텀 버튼을 추가하려면 다음 단계를 따르세요: +섹션 머리글에 커스텀 버튼을 두는 것이 가능합니다. 헤더에 버튼을 추가하려면 다음 절차를 따라야 합니다: -- 섹션 객체에 'button' 속성을 추가하세요: +- 섹션 객체에 'button' 속성을 지정합니다: ~~~js {name:"description", height:130, map_to:"text", type:"textarea", button:"help"} ~~~ -- 버튼의 라벨을 정의하세요: +- 버튼의 레이블을 설정합니다: ~~~js -// 'help'는 'button' 속성의 값과 일치해야 합니다. +// 'button' 속성의 값은 'help'입니다 scheduler.locale.labels.button_help = "Help label"; ~~~ -- 버튼 클릭 핸들러를 제공하세요: +- 버튼 클릭의 핸들러를 지정합니다: -~~~ -scheduler.form_blocks.textarea.button_click="function(index,button,shead,sbody){" - // 커스텀 코드 작성 +~~~js +scheduler.form_blocks.textarea.button_click = function(index,button,shead,sbody){ + // 사용자 정의 코드 } ~~~ 여기서: + +- **index** - (*number*) 섹션의 인덱스. 0부터 시작하는 번호 매김 +- **button** - (*HTMLElement*) 버튼의 HTML 요소 +- **shead** - (*HTMLElement*) 섹션 헤더의 HTML 요소 +- **sbody** - (*HTMLElement*) 섹션 본문의 HTML 요소 -- **index** - (*number*) 섹션의 0부터 시작하는 인덱스 -- **button** - (*HTMLElement*) 버튼 요소 -- **shead** - (*HTMLElement*) 섹션 헤더 요소 -- **sbody** - (*HTMLElement*) 섹션 바디 요소 - - -다음 CSS 클래스를 사용하여 버튼 이미지를 커스터마이즈할 수 있습니다: +버튼에 사용할 이미지를 아래의 CSS 클래스로 정의할 수 있습니다: -~~~js +~~~css .dhx_custom_button_help{ background-image:url(imgs/but_help.gif); } ~~~ -## 선택 컨트롤 연결하기 {#linkingselectcontrols} +## 선택 컨트롤 연결하기 -라이트박스 내의 select 컨트롤을 서로 연동할 수 있습니다. 아래와 같이 select 컨트롤의 [onchange 속성](guides/select.md#properties)을 사용하면 됩니다: +라이트박스에서 선택 컨트롤을 서로 의존적으로 만들 수 있습니다. 이를 위해 선택 컨트롤의 [onchange 속성](guides/select.md#properties)을 사용합니다: ~~~js -var update_select_options = function(select, options) { // 헬퍼 함수 +const update_select_options = function(select, options) { // 도우미 함수 select.options.length = 0; - for (var i="0;" ionchange 이벤트는 사용자가 부모 섹션의 선택 옵션을 변경할 때 트리거됩니다. 자식 섹션의 옵션이 그에 따라 변경됩니다. -onchange 이벤트는 사용자가 부모 섹션에서 다른 옵션을 선택할 때 발생하며, 이에 따라 자식 섹션의 옵션이 업데이트됩니다. +## 라이트박스 섹션의 동적 변경 -## 라이트박스 섹션 동적 변경 {#dynamic-changing-of-the-lightbox-sections} +라이트박스 섹션을 동적으로 변경하는 기능이 있습니다. 즉, 구성에 따라 라이트박스의 섹션을 숨기거나 차단하거나 표시할 수 있습니다. -라이트박스 섹션을 동적으로 변경할 수 있습니다. 즉, 특정 설정에 따라 라이트박스의 다양한 섹션을 숨기거나, 차단하거나, 표시할 수 있습니다. +다음의 [resetLightbox()](api/method/resetlightbox.md) 메서드를 통해 라이트박스 섹션을 동적으로 변경할 수 있습니다. 예를 들면: -이를 위해 [resetLightbox()](api/method/resetlightbox.md) 메서드를 사용할 수 있습니다. 사용 방법은 다음과 같습니다: - -1. 먼저, 라이트박스에 사용할 두 개의 컨트롤 배열을 생성합니다. +1. 두 가지 서로 다른 컨트롤 세트를 포함하는 두 개의 배열로 라이트박스 구성을 만듭니다. ~~~js -var full_lightbox = [ +const full_lightbox = [ { name: "description", height: 200, map_to: "text", type: "textarea", focus: true}, { name: "hidden", height: 23, map_to: "hidden", type: "textarea"}, { name: "time", height: 72, type: "time", map_to: "auto"} ]; -var restricted_lightbox = [ +const restricted_lightbox = [ { name: "description", height: 200, map_to: "text", type: "textarea", focus: true}, { name: "time", height: 72, type: "time", map_to: "auto"} ]; ~~~ -2. 다음을 구현하세요: +2. 다음 단계에서는 아래의 절차를 구현합니다. -- 새 라이트박스를 열기 전에 resetLightbox() 메서드를 호출하여 현재 컨트롤을 초기화하고, 원하는 컨트롤 배열로 새 라이트박스를 생성하세요. +- 새로운 라이트박스를 표시하기 전에 현재 편집 양식의 컨트롤 세트를 제거하고 다른 컨트롤 세트로 새로운 라이트박스 객체를 생성하기 위해 resetLightbox() 메서드를 호출합니다. -- 이벤트 id로 이벤트 객체를 가져와 어떤 라이트박스 구성을 적용할지 조건을 지정하세요. 아래 예시에서는 "restricted" 속성을 조건으로 사용합니다. +- id로 이벤트 객체를 가져오고, 이 라이트박스 구성 중 어떤 것을 적용할지 조건을 지정합니다. 아래 예제에서 조건은 "restricted" 속성으로 도입되었습니다. ~~~js scheduler.attachEvent("onBeforeLightbox", function(event_id) { scheduler.resetLightbox(); - var ev = scheduler.getEvent(event_id); + const ev = scheduler.getEvent(event_id); scheduler.config.lightbox.sections = (ev.restricted) ? restricted_lightbox : full_lightbox; return true; }); ~~~ -3. 이벤트의 'restricted' 속성 값에 따라 "restricted_lightbox" 구성이 사용됩니다. 설정되지 않은 경우 전체 라이트박스가 표시됩니다. +3. 'restricted' 이벤트 속성을 사용하여 "restricted_lightbox" 구성을 적용합니다. 그렇지 않으면 전체 라이트박스가 표시됩니다. ~~~js -scheduler.init('scheduler_here', new Date(2017, 5, 30), "week"); +scheduler.init('scheduler_here', new Date(2027, 5, 30), "week"); scheduler.parse([ - { start_date: "2017-06-27 04:00", end_date: "2017-06-27 7:00", + { start_date: "2027-06-27 04:00", end_date: "2027-06-27 7:00", text: "Restricted event", hidden: "You won't see me", restricted: true }, - { start_date: "2017-06-29 05:00", end_date: "2017-06-29 11:00", + { start_date: "2027-06-29 05:00", end_date: "2027-06-29 11:00", text: "Full access", hidden: "Hidden text" } ]); ~~~ -![dinamicchanges_lightbox](/img/dinamicchanges_lightbox.png) - +![dinamicchanges_lightbox.png](/img/dinamicchanges_lightbox.png) -[Dynamic changing of lightbox configurations](https://docs.dhtmlx.com/scheduler/samples/02_customization/29_changing_lightbox_configurations.html) +[동적으로 라이트박스 구성 변경](https://docs.dhtmlx.com/scheduler/samples/02_customization/29_changing_lightbox_configurations.html) \ No newline at end of file diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/limits.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/limits.md index 064a4e5c..95c78257 100644 --- a/i18n/ko/docusaurus-plugin-content-docs/current/guides/limits.md +++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/limits.md @@ -1,16 +1,16 @@ --- -title: "Blocking and Marking Dates" -sidebar_label: "Blocking and Marking Dates" +title: "날짜 차단 및 표시" +sidebar_label: "날짜 차단 및 표시" --- -# Blocking and Marking Dates +# 날짜 차단 및 표시 -이 라이브러리에는 특정 날짜 또는 날짜 범위를 차단하고 강조할 수 있는 **Limit** 확장 기능이 포함되어 있습니다. +라이브러리는 특정 날짜나 날짜 범위를 차단하고 표시(하이라이트)할 수 있는 **Limit** 확장을 제공합니다. -플러그인을 사용하려면, 페이지에서 활성화하세요. +플러그인을 사용하려면 페이지에서 활성화하세요. :::note -참고: ["타임라인 뷰"](views/timeline.md)를 사용하는 경우 'limit' 확장은 'timeline' 확장보다 먼저 활성화되어야 합니다: +참고: [](views/timeline.md)를 사용하는 경우, 'timeline' 확장은 'limit' 확장보다 먼저 활성화되어야 합니다: ::: ~~~js @@ -20,115 +20,115 @@ scheduler.plugins({ }); ~~~ -## 설정 옵션 {#configurationoptions} -이 확장에서 사용할 수 있는 설정 옵션은 다음과 같습니다: +## 구성 옵션 +확장 기능에서 사용할 수 있는 구성 옵션은 다음과 같습니다: -- [display_marked_timespans](api/config/display_marked_timespans.md) - 차단된(마킹된) 시간 구간이 스케줄러에서 강조 표시되는지 제어합니다 -- [check_limits](api/config/check_limits.md) - 제한 확인을 켜거나 끕니다 -- [mark_now](api/config/mark_now.md) - 현재 시간을 표시하는 마커를 켜거나 끕니다 -- [now_date](api/config/now_date.md) - [mark_now](api/config/mark_now.md) 옵션에서 사용하는 날짜를 설정합니다 -- [limit_end](api/config/limit_end.md) - 허용된 날짜 범위의 종료 제한을 정의합니다 -- [limit_start](api/config/limit_start.md) - 허용된 날짜 범위의 시작 제한을 정의합니다 -- [limit_view](api/config/limit_view.md) - 이벤트 조회를 제한합니다 +- [display_marked_timespans](api/config/display_marked_timespans.md) - 차단된(표시된) 시간 범위가 스케줄러에서 하이라이트될지 여부를 정의합니다 +- [check_limits](api/config/check_limits.md) - 제한 검사 활성화/비활성화를 제어합니다 +- [mark_now](api/config/mark_now.md) - 현재 시간을 표시하는 마커의 활성화/비활성화를 제어합니다 +- [now_date](api/config/now_date.md) - [mark_now](api/config/mark_now.md) 옵션에 대한 날짜를 설정합니다 +- [limit_end](api/config/limit_end.md) - 허용 가능한 날짜 범위의 끝 제한을 설정합니다 +- [limit_start](api/config/limit_start.md) - 허용 가능한 날짜 범위의 시작 제한을 설정합니다 +- [limit_view](api/config/limit_view.md) - 이벤트 보기 제한을 제어합니다 -[Current time marking](https://docs.dhtmlx.com/scheduler/samples/02_customization/23_current_time.html) +[현재 시간 표식](https://docs.dhtmlx.com/scheduler/samples/02_customization/23_current_time.html) -## 관련 이벤트 {#relatedevents} +## 관련 이벤트 -허용되지 않은 날짜에 이벤트를 생성하거나 변경하려고 하면, [onLimitViolation](api/event/onlimitviolation.md) 이벤트가 발생합니다. +스케줄러가 허용되지 않은 날짜로 이벤트를 생성/수정하려는 시도를 감지하면 [onLimitViolation](api/event/onlimitviolation.md) 이벤트가 생성됩니다. -## 특정 날짜를 차단하는 방법? {#how-to-block-certain-dates} +## 특정 날짜를 차단하는 방법은? -스케줄러에서 제한을 설정하는 방법에는 여러 가지가 있습니다: +스케줄러에서 제한을 지정하기 위해 사용할 수 있는 몇 가지 방법이 있습니다: -- [addMarkedTimespan](api/method/addmarkedtimespan.md) - 날짜를 마킹하며, 사용자 정의 스타일 옵션으로 차단할 수 있습니다 -- [markTimespan](api/method/marktimespan.md) - 기본 또는 사용자 정의 스타일로 날짜를 마킹하거나 차단합니다; 마킹은 내부 업데이트 후 제거되므로, 강조에 유용합니다 +- [addMarkedTimespan](api/method/addmarkedtimespan.md) - 날짜를 표시하되 특정 설정으로 차단을 만들어 내며(제한에 대한 사용자 정의 스타일링 설정 허용) +- [markTimespan](api/method/marktimespan.md) - 기본 스타일 또는 사용자 정의 스타일을 적용하여 날짜를 표시 및/또는 차단합니다. 애플리케이션 내부 업데이트가 발생한 직후 표시가 취소됩니다. 하이라이팅에 사용할 수 있습니다 -[Blocking dates](https://docs.dhtmlx.com/scheduler/samples/03_extensions/25_advanced_limitation.html) +[차단 날짜](https://docs.dhtmlx.com/scheduler/samples/03_extensions/25_advanced_limitation.html) -## 특정 날짜를 마킹하는 방법? {#how-to-mark-certain-dates} +## 특정 날짜를 표시하는 방법은? -다음 두 가지 메서드를 사용하여 특정 날짜를 강조할 수 있습니다: +지정된 날짜를 표시하는 데 사용할 수 있는 방법은 2가지가 있습니다: -- [addMarkedTimespan](api/method/addmarkedtimespan.md) - 날짜를 마킹하며, 사용자 정의 스타일 옵션으로 차단할 수 있습니다 -- [markTimespan](api/method/marktimespan.md) - 기본 또는 사용자 정의 스타일로 날짜를 마킹하거나 차단합니다; 마킹은 내부 업데이트 후 제거되므로, 강조에 유용합니다 +- [addMarkedTimespan](api/method/addmarkedtimespan.md) - 날짜를 표시하지만 특정 설정으로 차단을 만들어 내며(제한에 대한 사용자 정의 스타일링 설정 허용) +- [markTimespan](api/method/marktimespan.md) - 기본 스타일 또는 사용자 정의 스타일을 적용하여 날짜를 표시 및/또는 차단합니다. 애플리케이션 내부 업데이트가 발생한 직후 표시가 취소됩니다. 하이라이팅에 사용할 수 있습니다 -[Handling the pointer highlighting](https://docs.dhtmlx.com/scheduler/samples/09_api/06_hightlight_and_single_click_create.html) +[포인터 하이라이트 처리](https://docs.dhtmlx.com/scheduler/samples/09_api/06_hightlight_and_single_click_create.html) -## 마킹/차단 해제 {#removingmarkingblocking} +## 표시/차단 제거 -현재 마킹되거나 차단된 시간 구간을 해제하려면, 다음 메서드를 사용할 수 있습니다: +현재 표시/차단된 시간 범위를 제거하는 데 사용할 수 있는 방법이 몇 가지 있습니다: -- [deleteMarkedTimespan](api/method/deletemarkedtimespan.md) - [addMarkedTimespan](api/method/addmarkedtimespan.md)로 설정된 마킹 또는 차단을 제거합니다 -- [unmarkTimespan](api/method/unmarktimespan.md) - [markTimespan](api/method/marktimespan.md)로 설정된 마킹 또는 차단을 제거합니다 +- [deleteMarkedTimespan](api/method/deletemarkedtimespan.md) - [addMarkedTimespan](api/method/addmarkedtimespan.md) 메서드로 설정된 표시/차단을 제거 +- [unmarkTimespan](api/method/unmarktimespan.md) - [markTimespan](api/method/marktimespan.md) 메서드로 설정된 표시/차단을 제거 -[Handling the pointer highlighting](https://docs.dhtmlx.com/scheduler/samples/09_api/06_hightlight_and_single_click_create.html) +[포인터 하이라이트 처리](https://docs.dhtmlx.com/scheduler/samples/09_api/06_hightlight_and_single_click_create.html) -## 차단 우선순위 {#blocking-priority} +## 차단 우선순위 -여러 가지 차단 방법으로 서로 다른 범위를 지정한 경우, 차단 우선순위는 다음과 같이 적용됩니다(높은 순서부터 낮은 순서까지): +다수의 차단 메서드를 호출하고 서로 다른 구간을 차단하면 차단은 다음과 같은 우선순위로 적용됩니다(가장 높은 우선순위에서 가장 낮은 우선순위로): -1. 특정 항목에 대해 Date() 객체로 지정된 날짜; -2. 특정 항목에 대한 날짜(**sections** 파라미터가 설정된 경우); -3. Date() 객체로 지정된 날짜; +1. 특정 항목에 대해 Date() 객체를 통해 지정된 날짜; +2. 특정 항목의 날짜들(**sections** 매개변수가 정의된 경우); +3. Date() 객체를 통해 지정된 날짜; 4. 기타 날짜. -- 동일한 **type**을 가진 경우, 우선순위가 더 높은 차단이나 마킹이 더 낮은 우선순위를 덮어씁니다. -- 동일한 우선순위(시간이 겹치는 경우)의 차단이나 마킹은 함께 적용됩니다. +- 같은 **type**을 가진 경우 더 높은 우선순위의 차단/표시는 같은 우선순위의 차단/표시를 덮어씁니다. +- 동일한 우선순위를 가진 여러 차단/표시 메서드는 같은 시간 슬롯에서 동시에 적용됩니다. 예시: ~~~js -scheduler.addMarkedTimespan({ // 2012년 7월 4일(수요일) 차단 - days: new Date(2019, 7, 4), +scheduler.addMarkedTimespan({ // 4th July, 2027 차단(수요일) + days: new Date(2027, 7, 4), zones: "fullday", type: "dhx_time_block", - css: "red_section" // 적용되는 CSS 클래스 + css: "red_section" // 적용된 CSS 클래스의 이름 }); -scheduler.addMarkedTimespan({ // 매주 일, 월, 수요일 차단 +scheduler.addMarkedTimespan({ // 매주 일요일, 월요일, 수요일 차단 days: [0, 1, 3], zones: "fullday", type: "dhx_time_block", - css: "blue_section" // 적용되는 CSS 클래스 + css: "blue_section" // 적용된 CSS 클래스의 이름 }); -// id="2인" 항목에 대해 매주 일요일, 수요일만 차단 +// id="2"인 항목에 대해 일요일과 수요일만 차단 scheduler.addMarkedTimespan({ days: [0,3], zones: "fullday", type: "dhx_time_block", - css: "gray_section", // 적용되는 CSS 클래스 + css: "gray_section", // 적용된 CSS 클래스의 이름 sections: { timeline: 2} }); ~~~ -이 호출 이후, 스케줄러는 다음과 같이 동작합니다: +이 메서드들을 호출한 결과는 다음과 같습니다: -1. **Timeline 뷰에서 id="2인" 항목에 대해 매주 일요일과 수요일을 먼저 차단**하며, 회색으로 표시합니다. -2. 그 다음 **2012년 7월 4일**을 차단하고 빨간색으로 표시합니다. -3. 마지막으로 **매주 일요일, 월요일, 수요일**을 차단하며 파란색으로 표시합니다. +1. 먼저, 타임라인 뷰의 항목(id="2")에 대해 매주 일요일과 수요일을 차단하고 이를 회색으로 색칠합니다. +2. 그런 다음 2012년 7월 4일을 차단하고 이를 빨간색으로 표시합니다. +3. 마지막으로 매주 일요일, 월요일, 수요일을 차단하고 이를 파란색으로 표시합니다. ![limits_priority.png](/img/limits_priority.png) -모든 마커를 우선순위와 상관없이 표시하려면, [overwrite_marked_timespans](api/config/overwrite_marked_timespans.md) 옵션을 다음과 같이 설정하세요: +이 동작을 변경하고 우선순위에 관계없이 모든 표시를 표시하려면 [overwrite_marked_timespans](api/config/overwrite_marked_timespans.md) 설정을 사용할 수 있습니다: ~~~js scheduler.config.overwrite_marked_timespans_config = false; -~~~ +~~~ \ No newline at end of file diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/live-update.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/live-update.md index 5101bcbf..6a15593f 100644 --- a/i18n/ko/docusaurus-plugin-content-docs/current/guides/live-update.md +++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/live-update.md @@ -1,54 +1,55 @@ --- -title: "Live Updates 모드 (레거시)" -sidebar_label: "Live Updates 모드 (레거시)" +title: "라이브 업데이트 모드(레거시)" +sidebar_label: "라이브 업데이트 모드(레거시)" --- -# Live Updates 모드 (레거시) +# 라이브 업데이트 모드(레거시) :::warning -설명된 기능은 더 이상 사용되지 않으며 유지 관리되지 않습니다. +설명된 기능은 더 이상 사용되지 않으며 유지되지 않습니다. ::: + :::note -이 문서는 DHTMLX Scheduler의 레거시 Live Updates 모드에 대해 다룹니다. 최신 버전에 대한 정보는 [여기](guides/multiuser-live-updates.md)에서 확인하세요. +이 문서는 DHTMLX Scheduler의 라이브 업데이트 모드 레거시 구현에 대해 설명합니다. 현재 버전에 대한 자세한 내용은 [여기](guides/multiuser-live-updates.md)를 참조하십시오. ::: -Live Update 모드는 여러 사용자의 데이터를 실시간으로 동기화합니다. +라이브 업데이트는 실시간으로 동기화된 데이터 업데이트를 제공하는 모드입니다. -한 사용자가 변경을 하면, 그 변경 사항이 즉시 다른 모든 사용자에게 표시됩니다. +한 사용자가 변경하면 그 변경 사항이 다른 모든 사용자에게 즉시 보입니다. -이 모드는 `Faye` 소켓 라이브러리를 사용하여 페이지 전체를 새로고침하지 않고(해당 컴포넌트만 업데이트됨) 빠르고 유연하게 변경 사항을 반영합니다. +이 모드는 프로세스를 가능하면 빠르고 유연하게 만들기 위해 `Faye` 소켓 라이브러리를 사용하고 페이지 새로고침이 필요하지 않습니다(적용된 컴포넌트만 업데이트합니다). -여기서는 이 기능을 시작하는 간단한 가이드를 제공합니다. +이 기사에서는 주제를 빠르게 심층적으로 파고들 수 있는 단계별 튜토리얼을 제공합니다. ## 기본 원리 -Live Updates는 한 클라이언트에서 발생한 변경 사항을 연결된 모든 다른 클라이언트에 브로드캐스트하는 방식으로 작동합니다. 이를 위해 양방향 통신이 가능한 WebSocket 연결을 사용합니다. +라이브 업데이트는 한 연결된 클라이언트가 만든 변경 사항을 다른 모든 연결된 클라이언트에 브로드캐스트함으로써 달성됩니다. 이는 연결된 클라이언트와 백엔드 간의 양방향 메시지 교환을 위한 WebSocket 연결을 활용하는 방식으로 수행됩니다. -이 버전에서는 Live Updates 모듈이 `DataProcessor` 모듈을 확장하여 `Faye` 클라이언트 라이브러리와, 클라이언트 간 메시지 분배를 담당하는 백엔드 앱을 함께 사용합니다. +이 라이브 업데이트 모듈 버전에서는 `DataProcessor` 모듈을 확장하여 `Faye` 라이브러리 클라이언트를 사용하고, 클라이언트 간의 메시지를 전달하는 추가 백엔드 응용 프로그램을 통해 구현됩니다. -설정에는 다음과 같은 세 가지 구성 요소가 포함됩니다: +솔루션은 세 부분으로 구성됩니다: -1. Scheduler와 `DataProcessor` 모듈이 포함된 **프론트엔드** -2. 데이터베이스에서 CRUD 작업을 수행하는 **백엔드** -3. 클라이언트 연결을 관리하는 **live-updates 허브** +1. **프런트엔드**: Scheduler와 `DataProcessor` 모듈. +2. **백엔드**: 지속 저장소에 대한 CRUD 작업을 구현합니다. +3. **라이브 업데이트 허브**: 클라이언트를 연결하는 역할을 담당합니다. -사용자가 데이터를 업데이트하면: +사용자가 데이터를 변경하면: -- **프론트엔드**가 변경 사항을 **백엔드**로 전송합니다. -- 동시에, **프론트엔드**는 동일한 변경 사항을 **live-updates 허브**로 전송합니다. -- **live-updates 허브**는 이 변경 사항을 모든 연결된 클라이언트에 브로드캐스트합니다. -- **live-updates 허브**에서 업데이트를 받은 **프론트엔드**는 백엔드 CRUD 작업을 트리거하지 않고 Scheduler 데이터에 해당 변경 사항을 적용합니다. +- **프런트엔드**가 변경 사항을 **백엔드**로 보냅니다. +- 동시에, **프런트엔드**가 같은 변경 사항을 **라이브 업데이트 허브**로 보냅니다. +- **라이브 업데이트 허브**가 변경 사항을 모든 연결된 클라이언트에 브로드캐스트합니다. +- **프런트엔드**가 **라이브 업데이트 허브**로부터 변경 사항을 수신하면, CRUD 백엔드에 변화를 트리거하지 않는 방식으로 Scheduler 데이터에 적용합니다. ## 시작하기 전에 -이 튜토리얼을 따라 하려면, 데이터베이스에서 데이터를 불러오고 변경 사항을 저장하는 서버 사이드 로직이 통합된 dhtmlxScheduler 앱이 필요합니다. (자세한 내용은 [여기](integrations/howtostart-guides.md) 참고) +이 튜토리얼을 시작하려면 서버 측 로직이 통합된 완전한 기능의 dhtmlxScheduler 애플리케이션이 필요합니다. 데이터베이스에서 데이터를 로드하고 변경 사항을 다시 저장하는 애플리케이션이어야 합니다. (자세한 내용은 [여기](integrations/howtostart-guides.md)를 참조하십시오.) -간단한 예시는 다음과 같습니다: +그런 애플리케이션의 기본 예는 다음과 같을 수 있습니다: ~~~js ~~~ -## Live Updates 구성하기 +## 라이브 업데이트 구성 :::note -이 Live Updates 구현은 더 이상 지원되지 않으며, 메인 패키지에 포함되어 있지 않습니다. +이 라이브 업데이트 구현은 더 이상 권장되지 않으며 기본 패키지에 포함되지 않습니다. ::: -### 1단계. 설치 +### 1단계. 설정 -1. Scheduler용 **Live Updates 플러그인** 다운로드: [download link](https://files.dhtmlx.com/30d/20deb2ff205dc16bc94a7e9fcef4c5fe/live_updates.zip) -2. **Live Updates 백엔드** 앱 다운로드: [download link](https://files.dhtmlx.com/30d/57084e02b121f14bb14b6734d465ad41/websocket-backend.zip) -3. 백엔드 앱의 readme 파일을 참고하여 **Live Updates 백엔드**를 실행합니다. +1. Scheduler용 **Live Updates 플러그인**을 다운로드합니다: [다운로드 링크](https://files.dhtmlx.com/30d/20deb2ff205dc16bc94a7e9fcef4c5fe/live_updates.zip) +2. **Live Updates 백엔드** 앱을 다운로드합니다: [다운로드 링크](https://files.dhtmlx.com/30d/57084e02b121f14bb14b6734d465ad41/websocket-backend.zip) +3. 포함된 읽어보기 파일의 지시에 따라 **Live Updates 백엔드**를 시작합니다. -### 2단계. 프론트엔드 구성 +### 2단계. 프런트 엔드 구성 -Live Update 모드를 활성화하려면, 프론트엔드 앱에 두 개의 파일을 추가해야 합니다: +라이브 업데이트 모드를 사용하려면 프런트엔드 앱에 두 개의 추가 파일을 포함해야 합니다: -- **live_updates.js** - 앞 단계에서 받은 플러그인 파일 -- **client.js** - WebSocket 백엔드 앱에서 동적으로 생성되는 파일 +- **live_updates.js** - 이전 단계에서 다운로드한 파일 +- **client.js** - WebSocket 백엔드 앱에 의해 동적으로 생성되는 파일 ~~~js ~~~ -이 예시는 WebSocket 앱에 직접 연결합니다. 실제 환경에서는 보통 이 URL을 메인 앱을 통해 프록시하여, 보조 앱의 주소와 포트를 숨기는 것이 좋습니다. 이를 위해 리버스 프록시를 설정할 수 있습니다. +위 코드 샘플에서, 우리는 WebSocket 앱에 직접 연결합니다. 일반적으로는 보안을 위해 이 URL을 주 애플리케이션을 통해 라우팅하는 것이 좋습니다. 역방향 프록시를 사용하면 됩니다. -**메인 앱을 통한 프록시 요청(Node.js 예시):** +메인 앱(Node.js)로 요청 프록시하기: ~~~js const httpProxy = require('http-proxy'); @@ -98,16 +99,16 @@ module.exports = function(app){ } ~~~ -**프론트엔드:** +**프런트 엔드:** ~~~js ~~~ -### 3단계. Live Updates 활성화 +### 3단계. 라이브 업데이트 활성화 -`DataProcessor` 인스턴스에서 **live_updates()** 메서드를 호출하여 해당 모드를 활성화합니다. 반드시 `DataProcessor`가 먼저 초기화되어 있어야 하며, 메서드의 파라미터로 WebSocket 엔트리 포인트 URL을 전달합니다. +이 모드는 `DataProcessor` 인스턴스의 **live_updates()** 메서드를 호출하여 활성화됩니다. 이를 작동시키려면 먼저 `DataProcessor`가 초기화되어 있어야 합니다. 매개변수로는 WebSocket 진입점의 URL을 받습니다. ~~~js const dp = scheduler.createDataProcessor({ @@ -118,4 +119,4 @@ const dp = scheduler.createDataProcessor({ dp.live_updates("/liveUpdates"); ~~~ -전체 데모 애플리케이션은 [여기](https://files.dhtmlx.com/30d/0aea2facd959a8300bf7caec3f5a7f42/dhtmlxscheduler-live-updates.zip)에서 다운로드할 수 있습니다. +다음과 같은 완전한 데모 애플리케이션을 다운로드할 수 있습니다: [여기](https://files.dhtmlx.com/30d/0aea2facd959a8300bf7caec3f5a7f42/dhtmlxscheduler-live-updates.zip). \ No newline at end of file diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/loading-data.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/loading-data.md index 25467ef2..3726545d 100644 --- a/i18n/ko/docusaurus-plugin-content-docs/current/guides/loading-data.md +++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/loading-data.md @@ -1,203 +1,199 @@ ---- -title: "데이터 불러오기" -sidebar_label: "데이터 불러오기" +--- +title: "데이터 로딩" +sidebar_label: "데이터 로딩" --- -# 데이터 불러오기 +# 데이터 로딩 -dhtmlxScheduler는 아래의 세 가지 형식으로 데이터 로딩을 지원합니다: +dhtmlxScheduler는 여러 형식으로 데이터를 로드할 수 있습니다. 대부분의 애플리케이션은 **JSON**을 사용합니다. **iCalendar (.ics)** 및 **XML**은 또한 호환성 또는 가져오기 시나리오를 위해 지원됩니다. -1. JSON -2. XML -3. ICal +### 관련 가이드 -["데이터 포맷 예시"](guides/data-formats.md) +- [데이터 형식 개요](guides/data-formats.md) -## 인라인 데이터셋에서 데이터 불러오기 {#loadingdatafromaninlinedataset} +## 인라인 데이터 세트에서 데이터 로드 -인라인 데이터셋에서 직접 데이터를 불러오려면 [parse](api/method/parse.md) 메서드를 사용합니다: +인라인 데이터 세트에서 데이터를 로드하려면 [`parse()`](api/method/parse.md) 메소드를 사용하세요: ~~~js -scheduler.init('scheduler_here',new Date(2009,10,1),"month"); +scheduler.init("scheduler_here", new Date(2027, 4, 1), "month"); ... scheduler.parse([ - {text:"Meeting", start_date:"2019-04-11 14:00", end_date:"2019-04-11 17:00"}, - {text:"Conference", start_date:"2019-04-15 12:00", end_date:"2019-04-18 19:00"}, - {text:"Interview", start_date:"2019-04-24 09:00", end_date:"2019-04-24 10:00"} -],"json"); + { id: "1", text: "Meeting", start_date: "2027-05-11 14:00", end_date: "2027-05-11 17:00" }, + { id: "2", text: "Conference", start_date: "2027-05-15 12:00", end_date: "2027-05-18 19:00" }, + { id: "3", text: "Interview", start_date: "2027-05-24 09:00", end_date: "2027-05-24 10:00" } +]); ~~~ +### 관련 샘플 + +- [이벤트를 계단식으로 표시하기](https://docs.dhtmlx.com/scheduler/samples/02_customization/24_cascade_event_display.html) + +### 관련 API -[Displaying events as a cascade](https://docs.dhtmlx.com/scheduler/samples/02_customization/24_cascade_event_display.html) +- [`parse()`](api/method/parse.md) +### 관련 가이드 -## 데이터 파일에서 데이터 불러오기 {#loadingdatafromadatafile} +- [데이터 형식](guides/data-formats.md) -외부 파일에서 데이터를 불러오려면 [load](api/method/load.md) 메서드를 사용합니다: +## 데이터 파일에서 데이터 로드 + +데이터 파일에서 데이터를 로드하려면 [`load()`](api/method/load.md) 메소드를 사용하세요: ~~~js -scheduler.init('scheduler_here',new Date(2018,10,1),"month"); +scheduler.init("scheduler_here", new Date(2027, 4, 1), "month"); ... scheduler.load("data.json"); // 파일에서 데이터 불러오기 ~~~ +### 관련 샘플 + +- [Basic initialization](https://docs.dhtmlx.com/scheduler/samples/01_initialization_loading/01_basic_init.html) -[Basic initialization](https://docs.dhtmlx.com/scheduler/samples/01_initialization_loading/01_basic_init.html) +### 관련 API +- [`load()`](api/method/load.md) -## 데이터베이스에서 데이터 불러오기 {#loadingdatafromadatabase} +### 관련 가이드 -데이터베이스에서 데이터를 불러오는 방법은 두 가지가 있습니다. 두 방법 모두 클라이언트와 서버 측 처리가 필요합니다. +- [데이터 형식](guides/data-formats.md) -1) 첫 번째 방법은 REST API를 사용하여 서버와 통신합니다. +## 백엔드에서 데이터 로드 -- 서버 측 구현은 선택한 프레임워크에 따라 다릅니다. -예를 들어 Node.js의 경우, Scheduler가 AJAX 요청을 보내는 URL에 대한 서버 라우트를 추가합니다. +REST 엔드포인트를 노출시켜 JSON 형식으로 Scheduler 이벤트를 반환하면 백엔드에서 데이터를 로드합니다. -이 라우트는 JSON 응답을 생성합니다. +- 서버 측 구현은 스택에 따라 다릅니다. 예를 들어, Node.js에서는 이벤트 데이터를 반환하는 경로를 추가할 수 있습니다: ~~~js -app.get('/data', function(req, res){ - db.event.find().toArray(function(err, data){ - // 모든 레코드에 id 속성 설정 - for (var i = 0; i < data.length; i++) - data[i].id = data[i]._id; - - // 응답 출력 - res.send(data); - }); +app.get("/data", async (request, response) => { + const events = await db.event.find().toArray(); + response.json(events); }); ~~~ -- 클라이언트 측에서는 Scheduler가 데이터를 요청할 URL을 [load](api/method/load.md) 메서드에 지정합니다: +- 클라이언트 측에서는 데이터 URL과 함께 [`load()`](api/method/load.md)를 호출합니다: -~~~js title="Loading from a database. Client-side code" -scheduler.init('scheduler_here', new Date(), "month"); -scheduler.load("apiUrl"); +~~~js +scheduler.init("scheduler_here", new Date(2027, 4, 1), "month"); +scheduler.load("/data"); ~~~ :::note -REST API를 통한 서버 측 연동에 대한 자세한 내용은 ["Server-Side Integration"](guides/server-integration.md) 문서에서 확인할 수 있습니다. +서버로 변경 사항을 저장하려면 [`createDataProcessor()`](api/method/createdataprocessor.md)를 사용하세요. 서버 측 통합에 대해 참조 [Server-Side Integration](guides/server-integration.md). ::: -2) 두 번째 방법은 [PHP Connector](https://docs.dhtmlx.com/connector__php__index.html)를 사용하여 데이터베이스 테이블에서 데이터를 불러오는 방식입니다. - -- 서버 측에서는 XML 또는 JSON 형식의 데이터를 반환하는 스크립트를 구현합니다: - -~~~js title="Static loading from db. Server-side code" -include ('dhtmlxConnector/codebase/scheduler_connector.php'); - -$res="mysql_connect(""localhost","root",""); -mysql_select_db("sampleDB"); - -$calendar = new SchedulerConnector($res); -$calendar->render_table("events","id","event_start,event_end,text","type"); -~~~ +### Related API -- 클라이언트 측에서는 서버 스크립트 경로를 [load](api/method/load.md) 메서드에 지정합니다: - -~~~js title="Static loading from db. Client-side code" -scheduler.init('scheduler_here', new Date(), "month"); -scheduler.load("events.php"); -~~~ +- [`createDataProcessor()`](api/method/createdataprocessor.md) -:::note -자세한 내용은 ["dhtmlxScheduler와 dhtmlxConnector 연동하기"](integrations/other/howtostart-connector.md) 가이드에서 확인할 수 있습니다. -::: +### Related Guides + +- [Server-Side Integration](guides/server-integration.md) -## 여러 소스에서 데이터 불러오기 {#loadingdatafrommultiplesources} +## 다중 소스에서 데이터 로드 -여러 소스에서 데이터를 불러오려면 **multisource** 확장 기능을 사용할 수 있습니다: +다중 소스에서 데이터를 로드하려면 필요한 엔드포인트를 요청하고 결과를 합친 다음 [`parse()`](api/method/parse.md)를 호출합니다: ~~~js -scheduler.plugins({ - multisource: true +Promise.all([ + fetch("/api/events").then((response) => response.json()), + fetch("/api/holidays").then((response) => response.json()) +]).then(([events, holidays]) => { + scheduler.parse([...events, ...holidays]); }); ~~~ -:::note -여러 소스는 정적/동적 로딩 모두에서 사용할 수 있습니다. -::: +### Related API -관련 파일을 포함한 후, [load](api/method/load.md) 메서드는 소스 배열을 인자로 받을 수 있습니다: +- [`parse()`](api/method/parse.md) -~~~js -scheduler.load(["first/source/some","second/source/other"]); -~~~ - -## 데이터 속성 {#data-properties} +### Related Guides -### 필수 속성 +- [데이터 형식](guides/data-formats.md) -데이터 항목이 올바르게 파싱되려면 최소한 다음 세 가지 속성이 필요합니다: +## 데이터 속성 -- **start_date** - (*string*) 이벤트 시작 날짜 -- **end_date** - (*string*) 이벤트 종료 날짜 -- **text** - (*string*) 이벤트 설명 +### 필수 속성 -데이터베이스에서 불러올 때는 추가로 필수 속성이 필요합니다: +정확하게 구문 분석되려면 각 이벤트에 다음 속성이 포함되어야 합니다: -- **id** - (*string, number*) 이벤트 식별자 +- **id** - (*string|number*) 고유 이벤트 ID +- **start_date** - (*date|string*) 이벤트의 시작 날짜 +- **end_date** - (*date|string*) 이벤트의 종료 날짜 +- **text** - (*string*) 이벤트 제목/설명 -기본적으로 JSON 및 XML 데이터는 **'%Y-%m-%d %H:%i'** 형식의 날짜 포맷을 사용합니다(자세한 내용은 [날짜 포맷 명세](guides/settings-format.md) 참고). +JSON 및 XML 데이터의 기본 날짜 형식은 **'%Y-%m-%d %H:%i'** 입니다(날짜 형식 명세 참조: [date format specification](guides/settings-format.md)) - 이 포맷을 변경하려면 [date_format](api/config/date_format.md) 옵션을 사용하세요. +이를 변경하려면 [`date_format`](api/config/date_format.md) 구성 옵션을 사용하세요. ~~~js -scheduler.config.date_format="%Y-%m-%d %H:%i"; +scheduler.config.date_format = "%Y-%m-%d %H:%i"; ... -scheduler.init('scheduler_here', new Date(2019, 3, 18), "week"); +scheduler.init("scheduler_here", new Date(2027, 4, 18), "week"); ~~~ -### 사용자 정의 속성 +### Custom properties -필수 필드 외에도, 데이터 항목에 사용자 정의 속성을 추가할 수 있습니다. 이러한 추가 속성은 문자열로 파싱되며, 필요에 따라 클라이언트 측에서 활용할 수 있습니다. +위의 필수 속성에 국한되지 않으며 데이터 항목에 임의의 사용자 정의 속성을 추가할 수 있습니다. +추가 데이터 속성은 문자열로 구문 분석되며 클라이언트 쪽으로 로드되어 필요에 따라 사용할 수 있습니다. -사용자 정의 속성이 포함된 데이터 예시는 [여기](guides/data-formats.md#datawithcustomproperties) 에서 확인할 수 있습니다. +맞춤 속성이 포함된 데이터 예제는 [여기](guides/data-formats.md)에서 확인할 수 있습니다. -## 데이터베이스 구조 {#database-structure} +### Related API -스케줄러 이벤트를 위한 데이터베이스를 설정할 때, 권장되는 구조는 다음과 같습니다: +- [`date_format`](api/config/date_format.md) -- **events 테이블** - 스케줄러 이벤트 저장 - - **id** - (*string/int/guid*) - 이벤트 식별자. 기본키, 자동 증가. - - **start_date** - (*DateTime*) - 이벤트 시작 날짜, null 불가. - - **end_date** - (*DateTime*) - 이벤트 종료 날짜, null 불가. - - **text** - (*string*) - 이벤트 설명. +### Related Guides -반복 이벤트의 경우, 추가 컬럼이 필요합니다: +- [Event object](guides/event-object-operations.md) -- **events 테이블** - 스케줄러 이벤트 저장 - - **id** - (*string/int/guid*) - 이벤트 식별자. 기본키, 자동 증가. - - **start_date** - (*DateTime*) - 이벤트 시작 날짜, null 불가. - - **end_date** - (*DateTime*) - 이벤트 종료 날짜, null 불가. - - **text** - (*string*) - 이벤트 설명. - - **event_pid** - (*string/int/guid*) - 부모 이벤트 시리즈 id 참조. null 또는 기본값(빈 문자열, 0) 가능. - - **event_length** - (*string/bigint*) - 이벤트 기간 또는 수정된 반복의 타임스탬프. null 또는 기본값(빈 문자열, 0) 가능. 최대 길이(문자열)는 10. - - **rec_type** - (*string*) - 반복 규칙. null 또는 기본값(빈 문자열) 가능. 최대 길이 50. +## 데이터베이스 구조 -필요에 따라 추가 컬럼을 추가할 수 있으며, 클라이언트 API를 통해 접근할 수 있습니다. +데이터베이스를 설정할 때 Scheduler 이벤트에 기대되는 구조는 다음과 같습니다: -## 동적 로딩 {#dynamic-loading} +- **events table** - Scheduler 이벤트를 정의 +- **id** - (*string/int/guid*) 이벤트 ID. 기본 키, 자동 증가. +- **start_date** - (*DateTime*) 이벤트의 시작 날짜, 널 불가. +- **end_date** - (*DateTime*) 이벤트의 종료 날짜, 널 불가. +- **text** - (*string*) 작업의 설명. -기본적으로 dhtmlxScheduler는 모든 데이터를 한 번에 불러옵니다. 이는 대용량 데이터셋에서는 비효율적일 수 있습니다. 동적 로딩을 사용하면 현재 보이는 영역에 한정하여 데이터를 부분적으로 불러올 수 있습니다. +반복 이벤트가 있는 경우 다음 필드를 추가합니다: + +- **rrule** - (*string*) RFC-5545 형식의 반복 규칙 +- **duration** - (*number*) 각 항목의 지속 시간(초) +- **recurring_event_id** - (*string/int/guid*) 수정/삭제된 발생의 상위 시퀀스 ID +- **original_start** - (*DateTime*) 편집/삭제된 항목의 원래 시작 날짜 +- **deleted** - (*boolean*) 삭제된 발생 여부 표시 + +추가 열은 자유롭게 정의할 수 있으며, 클라이언트에 로드되어 클라이언트 측 API에서 사용할 수 있습니다. + +### Related Guides + +- [Recurring Events](guides/recurring-events.md) + +## 동적 로딩 + +기본적으로 dhtmlxScheduler는 모든 데이터를 한 번에 로드합니다. 큰 이벤트 컬렉션을 사용하는 경우 문제가 될 수 있습니다. +이러한 상황에서는 동적 로딩 모드를 사용하고 Scheduler의 현재 보기 영역을 채우는 데 필요한 부분만 로드할 수 있습니다. ### 기법 -동적 로딩을 활성화하려면 [setLoadMode](api/method/setloadmode.md) 메서드를 호출하세요: -~~~js title="Enabling the dynamic loading" +동적 로딩을 활성화하려면 [`setLoadMode()`](api/method/setloadmode.md) 메소드를 호출하세요: + +~~~js scheduler.setLoadMode("month"); -scheduler.load("some.php"); +scheduler.load("/api/events"); ~~~ -이 메서드는 불러올 데이터 크기를 결정하는 로딩 모드를 인자로 받습니다: *day, week, month,* 또는 *year.* - -예를 들어 'week' 모드로 설정하면, 스케줄러는 현재 주간에 해당하는 데이터만 요청하며, 필요 시 추가 데이터를 불러옵니다. +매개변수로 로딩 모드를 받으며, 이 모드는 로드할 데이터의 크기를 정의합니다: *day, week, month 또는 year.* +예를 들어 'week' 모드를 설정하면 스케줄러는 현재 주에 대한 데이터만 요청하고 나머지는 필요할 때 로드합니다. -#### 로딩 모드 동작 방식 +#### 로딩 모드 작동 방식 -로딩 모드는 선택한 기간에 대해 데이터를 불러오는 간격을 정의합니다. 예를 들어, 2018-01-29부터 2018-02-05까지의 주간 뷰를 연 경우: +사전 정의된 로딩 모드는 설정된 기간 내의 데이터 로딩 간격을 지정합니다. 예를 들어 다음 날짜의 주 보기를 열 경우: 2027-02-02에서 2027-02-09까지. +선택한 모드에 따라 동적 로딩은 다음과 같이 진행됩니다: - "day" 모드의 경우 @@ -205,7 +201,7 @@ scheduler.load("some.php"); scheduler.setLoadMode("day"); ~~~ -스케줄러는 일 단위로 데이터를 요청합니다. 예: 2018-01-29 ~ 2018-02-05 +스케줄러는 날짜별로 데이터를 요청합니다. 예: 2027-02-02에서 2027-02-09까지. - "month" 모드의 경우 @@ -213,7 +209,7 @@ scheduler.setLoadMode("day"); scheduler.setLoadMode("month"); ~~~ -스케줄러는 월 단위로 전체 달의 데이터를 요청합니다. 예: 2018-01-01 ~ 2018-03-01 +스케줄러는 한 달 단위로 데이터를 요청합니다. 예: 2027-02-01에서 2027-03-01까지. - "year" 모드의 경우 @@ -221,114 +217,132 @@ scheduler.setLoadMode("month"); scheduler.setLoadMode("year"); ~~~ -스케줄러는 연 단위로 전체 연도의 데이터를 요청합니다. 예: 2018-01-01 ~ 2019-01-01 +스케줄러는 연도 단위로 데이터를 요청합니다. 예: 2027-01-01에서 2028-01-01까지. -요청된 간격은 항상 화면에 표시되는 간격 이상입니다. +어떤 경우에도 요청된 간격은 렌더링된 간격보다 작지 않습니다. -로딩 간격은 다음에 영향을 미칩니다: +로딩 간격은 다음을 정의합니다: -- 동적 로딩 호출 빈도 +- 동적 로딩 호출의 빈도 -더 큰 간격은 로딩 호출 빈도를 줄여주며, 이미 불러온 데이터는 캐시됩니다. +로딩 간격이 커질수록 동적 로딩 호출 빈도가 줄어듭니다. Scheduler는 이미 로드된 데이터 부분을 메모리에 보관하고 그 부분에 대한 호출을 반복하지 않습니다. -- 각 요청의 처리 시간 +- 개별 요청 처리의 지속 시간 -더 큰 간격일수록 한 번에 더 많은 데이터를 처리하므로 시간이 더 오래 걸릴 수 있습니다. +로딩 간격이 커질수록 더 많은 데이터가 한 번에 로드되므로 요청 처리 시간이 길어집니다. -#### 요청 형식 +#### 요청 -요청은 다음과 같은 형식입니다: +생성된 요청은 다음과 같이 보입니다: ~~~js -some.php?from=DATEHERE&to=DATEHERE +/api/events?from=DATEHERE&to=DATEHERE ~~~ -*DATEHERE는 [load_date](api/config/load_date.md) 옵션에 지정된 유효한 날짜 형식이어야 합니다.* +*DATEHERE는 [`load_date`](api/config/load_date.md) 옵션으로 정의된 형식의 유효한 날짜 값입니다.* +### Related API -서버 측에서 dhtmlxConnector를 사용할 경우, 별도의 추가 처리가 필요 없습니다. +- [`setLoadMode()`](api/method/setloadmode.md) +- [`load_date`](api/config/load_date.md) +### Loading spinner -### 로딩 스피너 +대용량 데이터 크기를 다룰 때 로딩 스피너를 표시하는 것이 유용합니다. 사용자가 애플리케이션이 실제로 무언가를 하고 있음을 알 수 있습니다. -대용량 데이터셋을 사용할 때, 로딩 스피너를 표시하면 진행 상태를 알릴 수 있습니다. - -로딩 스피너를 활성화하려면 [show_loading](api/config/show_loading.md) 속성을 *true*로 설정하세요: +스케줄러에 대한 로딩 스피너를 활성화하려면 [`show_loading`](api/config/show_loading.md) 속성을 *true*로 설정하세요. ~~~js scheduler.config.show_loading = true; ... -scheduler.init('scheduler_here',new Date(2018,0,10),"month"); +scheduler.init("scheduler_here", new Date(2027, 4, 10), "month"); ~~~ :::note -스피너 이미지를 커스터마이즈하려면 'imgs/loading.gif'를 원하는 이미지로 교체하세요. +스피너 이미지를 변경하려면 'imgs/loading.gif'를 사용자 지정 이미지로 바꾸세요. ::: -## 서버에서 Timeline 및 Units 섹션 데이터 불러오기 {#collections} +## 타임라인 및 유닛 섹션의 데이터 서버에서 로딩 {#collections} -[Timeline](views/timeline.md) 및 [Units](views/units.md#loadingdatatotheview) 뷰에 데이터를 불러올 때는 섹션 배열이 필요합니다. +Timeline 및 Units 보기에 데이터를 로드하는 동안 뷰에 로드될 섹션 배열이 필요합니다. -백엔드에서 Timeline 및 Units 섹션을 불러오려면, 좀 더 상세한 구성이 필요합니다: +백엔드에서 Timeline 및 Units 섹션 데이터를 로드하려면 좀 더 확장된 구성이 필요합니다: -- Timeline 뷰 초기화 시, 섹션 배열 대신 [serverList](api/method/serverlist.md) 메서드와 컬렉션 이름을 사용하세요: +- Timeline 뷰 초기화 중, sections 배열 대신 [`serverList()`](api/method/serverlist.md) 메소드를 사용하고 컬렉션의 이름을 인수로 전달합니다: ~~~js scheduler.createTimelineView({ - .... - y_unit: scheduler.serverList("sections"), - ... + .... + y_unit: scheduler.serverList("sections"), + ... }); ~~~ -- [load](api/method/load.md) 메서드로 데이터를 스케줄러에 불러옵니다: +- 스케줄러로 데이터를 로드하려면 [`load()`](api/method/load.md) 메소드를 사용합니다: ~~~js scheduler.load("data.json"); ~~~ -- 서버 측에서는 다음과 같은 구조로 응답을 반환해야 합니다: - -~~~js title=""data.json"" -{ - "data":[ - { - "id":"1", - "start_date":"2018-03-02 00:00:00", - "end_date":"2018-03-04 00:00:00", - "text":"dblclick me!", - "type":"1" - }, - { - "id":"2", - "start_date":"2018-03-09 00:00:00", - "end_date":"2018-03-11 00:00:00", - "text":"and me!", - "type":"2" - }, - { - "id":"3", - "start_date":"2018-03-16 00:00:00", - "end_date":"2018-03-18 00:00:00", - "text":"and me too!", - "type":"3" - }, - { - "id":"4", - "start_date":"2018-03-02 08:00:00", - "end_date":"2018-03-02 14:10:00", - "text":"Type 2 event", - "type":"2" - } - ], - "collections": { - "sections":[ - {"value":"1","label":"Simple"}, - {"value":"2","label":"Complex"}, - {"value":"3","label":"Unknown"} - ] - } +데이터를 수동으로 가져오는 경우(예: 헤더를 추가하기 위해) 같은 페이로드를 [`parse()`](api/method/parse.md)로 전달할 수 있습니다: + +~~~js +fetch("/api/timeline") + .then((response) => response.json()) + .then((payload) => scheduler.parse(payload, "json")); +~~~ + +- 백엔드에서 scheduler 데이터 응답을 구현하는 동안 다음 형식을 사용합니다: + +~~~js title="data.json" +{ + "data":[ + { + "id":"1", + "start_date":"2027-03-02 00:00:00", + "end_date":"2027-03-04 00:00:00", + "text":"dblclick me!", + "type":"1" + }, + { + "id":"2", + "start_date":"2027-03-09 00:00:00", + "end_date":"2027-03-11 00:00:00", + "text":"and me!", + "type":"2" + }, + { + "id":"3", + "start_date":"2027-03-16 00:00:00", + "end_date":"2027-03-18 00:00:00", + "text":"and me too!", + "type":"3" + }, + { + "id":"4", + "start_date":"2027-03-02 08:00:00", + "end_date":"2027-03-02 14:10:00", + "text":"Type 2 event", + "type":"2" + } + ], + "collections": { + "sections":[ + {"value":"1","label":"Simple"}, + {"value":"2","label":"Complex"}, + {"value":"3","label":"Unknown"} + ] + } } ~~~ -이 예시에서 "data" 배열에는 캘린더 이벤트가 포함되어 있고, "collections" 객체에는 [serverList](api/method/serverlist.md) 메서드를 통해 참조되는 컬렉션이 포함되어 있습니다. +위의 예에서 "data" 배열은 달력 이벤트를 포함하고 있고, "collections" 해시는 [`serverList()`](api/method/serverlist.md) 메서드를 통해 참조될 수 있는 컬렉션을 포함합니다. + +### Related API + +- [`serverList()`](api/method/serverlist.md) + +### Related Guides + +- [Timeline view](views/timeline.md) +- [Units view](views/units.md) \ No newline at end of file diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/localization.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/localization.md index 8c3c36fe..9657a1e0 100644 --- a/i18n/ko/docusaurus-plugin-content-docs/current/guides/localization.md +++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/localization.md @@ -1,24 +1,24 @@ --- -title: "Localization" -sidebar_label: "Localization" +title: "현지화" +sidebar_label: "현지화" --- -# Localization +# 현지화 -이 라이브러리는 다양한 미리 정의된 로케일과 직접 로케일을 생성할 수 있는 옵션을 제공하여 스케줄러의 현지화를 지원합니다. 기본적으로 DHTMLX Scheduler는 [영어 로케일](api/other/locale.md)을 기본으로 제공합니다. +라이브러리는 미리 정의된 로케일을 다수 제공하고 커스텀 로케일을 생성할 수 있는 방법을 통해 스케줄러의 로컬라이제이션을 지원합니다. 기본적으로 DHTMLX Scheduler는 [영어 로케일](api/other/locale.md)을 사용합니다. -## 활성화 {#activation} +## 활성화 -스케줄러의 언어를 설정하려면 [scheduler.i18n](api/other/i18n.md) 객체의 **setLocale** 메서드를 사용하여 원하는 로케일을 활성화하면 됩니다. +스케줄러에 원하는 언어를 설정하려면 [scheduler.i18n](api/other/i18n.md) 객체의 `setLocale()` 메서드를 통해 필요한 로케일을 활성화합니다. ~~~js -scheduler.i18n.setLocale("fr"); +scheduler.i18n.setLocale("fr"); ~~~ -dhtmlxscheduler.js 파일에 포함된 [미리 정의된 로케일](#included-locales) 중 하나를 사용할 수 있으며, 또는 사용자 정의 로케일을 생성할 수도 있습니다. +번들에 포함된 dhtmlxscheduler.js 파일과 함께 제공되는 [미리 정의된 로케일들](#included-locales)을 사용하거나 커스텀 로케일을 정의할 수 있습니다. :::note -로케일은 실시간으로 변경할 수 있지만, 변경 사항은 **scheduler.render()** 또는 **scheduler.init()**을 호출하여 스케줄러를 완전히 다시 그린 후에만 적용됩니다. +로케일은 동적으로 전환할 수 있지만, 변경 사항은 Scheduler를 전체 다시 그린 뒤에만 적용됩니다(`scheduler.render()` 또는 `scheduler.init()` 호출). ::: ~~~js @@ -26,109 +26,110 @@ scheduler.i18n.setLocale("fr"); scheduler.init("scheduler_here"); ~~~ +### 관련 샘플 +- [Localization](https://docs.dhtmlx.com/scheduler/samples/01_initialization_loading/07_locale_usage.html) -[Localization](https://docs.dhtmlx.com/scheduler/samples/01_initialization_loading/07_locale_usage.html) - - -## 포함된 로케일 {#included-locales} +## 포함된 로케일들 :::note -Common 및 Recurring 로케일 파일 모두 **dhtmlxscheduler.js** 파일에 포함되어 있습니다. +Common 로케일 파일과 Recurring 로케일 파일은 모두 `dhtmlxscheduler.js` 파일에 포함되어 있습니다. ::: -dhtmlxScheduler는 다음 언어에 대한 현지화를 제공합니다: + +dhtmlxScheduler는 다음 언어들에 대한 로컬라이제이션을 포함합니다: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
언어언어 코드
Arabicar
Belarusianbe
Catalanca
Chinesecn
Czechcs
Danishda
Dutchnl
Englishen (default)
Finnishfi
Frenchfr
Germande
Greekel
Hebrewhe
Hungarianhu
Indonesianid
Italianit
Japanesejp
Norwegianno
Norwegian Bokmålnb
Polishpl
Portuguesept
Romanianro
Russianru
Slovaksk
Sloveniansi
Spanishes
Swedishsv
Turkishtr
Ukrainianua
언어언어 코드
아랍어ar
벨라루스어be
카탈로니아어ca
중국어cn
체코어cs
덴마크어da
네덜란드어nl
영어en (default)
핀란드어fi
프랑스어fr
독일어de
그리스어el
히브리어he
헝가리어hu
인도네시아어id
이탈리아어it
일본어jp
노르웨이어no
노르웨이어 부크말nb
폴란드어pl
포르투갈어pt
루마니아어ro
러시아어ru
슬로바키아어sk
슬로베니아어si
스페인어es
스웨덴어sv
터키어tr
우크라이나어ua
-## 사용자 정의 로케일 생성 {#creatingcustomlocale} +## 커스텀 로케일 만들기 :::note -[scheduler.i18n](api/other/i18n.md) 객체는 v6.0부터 제공됩니다. 이전 버전에서는 [scheduler.locale](api/other/locale.md) 객체가 사용되었습니다. 자세한 내용은 [Migration article](migration.md#53---60)을 참고하세요. +[v6.0]부터 scheduler.i18n 객체가 추가되었습니다. 이전 버전에서는 [scheduler.locale] 객체가 사용되었습니다. 자세한 내용은 Migration 문서(migration.md#53---60)를 참조하세요. ::: -사용자 정의 로케일을 만드는 가장 간단한 방법은 아래 예시에서 기본 영어 로케일을 복사하여 원하는 언어로 문자열을 번역하는 것입니다. +커스텀 로케일을 만드는 가장 쉬운 방법은 아래 샘플에서 기본 영어 로케일을 복사한 뒤 필요한 언어로 모든 문자열을 번역하는 것입니다. -사용자 정의 로케일을 Scheduler에 적용하는 방법은 두 가지가 있습니다: +커스텀 로케일은 Scheduler에 두 가지 방식으로 적용할 수 있습니다. -- **setLocale** 메서드에 로케일 객체를 전달하여 현재 로케일을 덮어씁니다: +- 현재 로케일을 대체하려면 로케일 객체를 인수로 전달하여 `setLocale()` 메서드를 호출합니다: ~~~js -scheduler.i18n.setLocale(localeObject); +scheduler.i18n.setLocale(localeObject); ~~~ -로케일 객체의 일부만 제공하면, scheduler는 기존 로케일에 해당 라벨만 병합합니다: +참고: 부분 로케일 객체를 제공하면 스케줄러는 현재 로케일에 라벨을 합칩니다: ~~~js scheduler.i18n.setLocale({ labels: { - day_tab: "Day", + day_tab: "일", } -}); +}); ~~~ -- 또는 여러 로케일 간 전환이 필요한 경우, 사용자 정의 언어 코드를 사용해 로케일을 추가한 후 전환할 수 있습니다: +- 또는 여러 로케일 간 전환이 필요하다면 커스텀 언어 코드로 로케일을 정의하고 나중에 스케줄러를 해당 로케일로 전환합니다: ~~~js -scheduler.i18n.addLocale("lang", localeObject); +scheduler.i18n.addLocale("lang", localeObject); scheduler.i18n.setLocale("lang"); ~~~ :::note -사용자 정의 로케일로 전환하면 앱의 인터페이스가 변경됩니다. 새로운 언어에서 스케줄러가 올바르게 표시되도록 로케일에 따라 달라질 수 있는 요소를 반드시 검토하고 조정하세요. +앱에서 커스텀 로케일을 활성화하면 앱의 인터페이스에 변경이 생깁니다. 새로운 언어에서 스케줄러가 올바르게 보이도록 로케일에 의존하는 모든 요소를 확인하고(필요 시) 재정의하십시오. ::: **참고** -- 사용자 정의 로케일 파일을 **support@dhtmlx.com**으로 보내면, 향후 릴리즈에 포함될 수 있습니다. -- 활성화된 로케일은 **scheduler.locale** 객체를 통해 접근할 수 있습니다. -- **monthFull**에는 1월부터 시작하는 전체 월 이름이 포함됩니다. -- **monthShort**에는 1월부터 시작하는 월의 약어가 포함됩니다. -- **dayFull**에는 일요일부터 시작하는 전체 요일명이 포함됩니다. -- **dayShort**에는 일요일부터 시작하는 요일의 약어가 포함됩니다. +- 커스텀 로케일 파일을 **support@dhtmlx.com**로 보내주시면 다음 릴리스에 포함해 드립니다. +- 현재 활성화된 로케일은 `scheduler.locale` 객체에서도 확인할 수 있습니다. +- `monthFull` - 1월부터 시작하는 달의 전체 이름 +- `monthShort` - 1월부터 시작하는 달의 짧은 이름 +- `dayFull` - 일요일부터 시작하는 주의 요일의 전체 이름 +- `dayShort` - 일요일부터 시작하는 주의 요일의 짧은 이름 -~~~js title="English locale definition" +### 영어 로케일 정의 +~~~js scheduler.i18n.setLocale({ - date:{ - month_full: ["January", "February", "March", "April", "May", "June", + date: { + month_full: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"], - month_short: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", + month_short: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], - day_full: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", + day_full: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"], day_short: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"] }, - labels:{ + labels: { dhx_cal_today_button: "Today", day_tab: "Day", week_tab: "Week", @@ -145,30 +146,30 @@ scheduler.i18n.setLocale({ section_time: "Time period", full_day: "Full day", - /*recurring events*/ - confirm_recurring:"Edit recurring event", - section_recurring:"Repeat event", - button_recurring:"Disabled", - button_recurring_open:"Enabled", + /* recurring events */ + confirm_recurring: "Edit recurring event", + section_recurring: "Repeat event", + button_recurring: "Disabled", + button_recurring_open: "Enabled", button_edit_series: "All events", button_edit_occurrence: "This event", button_edit_occurrence_and_following: "This and following events", - /*agenda view extension*/ + /* agenda view extension */ agenda_tab: "Agenda", date: "Date", description: "Description", - /*year view extension*/ + /* year view extension */ year_tab: "Year", /* week agenda extension */ week_agenda_tab: "Agenda", - /*grid view extension*/ + /* grid view extension */ grid_tab: "Grid", - /* touch tooltip*/ + /* touch tooltip */ drag_to_create: "Drag to create", drag_to_move: "Drag to move", @@ -224,20 +225,19 @@ scheduler.i18n.setLocale({ repeat_freq_year: "Year", repeat_on_date: "On date", repeat_ends: "Ends", - month_for_recurring: ["January", "February", "March", "April", "May", "June", + month_for_recurring: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"], - day_for_recurring: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", + day_for_recurring: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"] } }); ~~~ +### 관련 샘플 +- [Localization](https://docs.dhtmlx.com/scheduler/samples/01_initialization_loading/07_locale_usage.html) -[Localization](https://docs.dhtmlx.com/scheduler/samples/01_initialization_loading/07_locale_usage.html) - - -## 추가 참고 사항 {#additionalnotes} +## 추가 메모 -- **confirm_closing** 또는 **confirm_deleting** 라벨이 설정되지 않은 경우, 관련 확인 대화 상자는 표시되지 않으며(자동으로 확인됨); -- **section_(name)**와 같은 라벨은 해당 이름을 가진 lightbox 섹션에 대응합니다. -- **new_event** 라벨은 새 이벤트에 표시되는 기본 텍스트를 정의합니다. +- `confirm_closing` 또는 `confirm_deleting` 레이블이 정의되지 않으면 관련 확인 대화 상자가 전혀 표시되지 않습니다(자동 확인). +- `section_(name)` 레이블은 관련 이름의 라이트박스 섹션을 가리킵니다. +- `new_event` 레이블은 새 이벤트의 기본 텍스트를 정의합니다. \ No newline at end of file diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/minicalendar.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/minicalendar.md index 7408f785..e95532e6 100644 --- a/i18n/ko/docusaurus-plugin-content-docs/current/guides/minicalendar.md +++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/minicalendar.md @@ -1,35 +1,36 @@ ---- -title: "미니 캘린더(날짜 선택기)" -sidebar_label: "미니 캘린더(날짜 선택기)" +--- +title: "미니 달력(날짜 선택기)" +sidebar_label: "미니 달력(날짜 선택기)" --- -# 미니 캘린더(날짜 선택기) +# 미니 달력(날짜 선택기) -미니 캘린더(날짜 선택기)는 HTML 컨테이너 안에 컴팩트한 월간 뷰를 표시할 수 있는 편리한 확장 기능입니다. +미니 달력(날짜 선택기)은 페이지의 HTML 컨테이너에 작은 달 뷰를 렌더링할 수 있도록 하는 특수 확장 기능입니다. ![mini_calendar](/img/mini_calendar.png) -[Mini calendar without the scheduler](https://docs.dhtmlx.com/scheduler/samples/05_calendar/02_without_scheduler.html) +[스케줄러 없이 미니 달력](https://docs.dhtmlx.com/scheduler/samples/05_calendar/02_without_scheduler.html) :::note -앱에 미니 캘린더를 포함하려면, 페이지에 **minical** 확장 기능을 추가해야 합니다. -::: +앱에서 미니 달력을 사용하려면 페이지에 **minical** 확장을 포함하세요. + ::: + -## 헤더에 추가하기 {#intheheader} +## 헤더에서 -스케줄러의 헤더에 미니 캘린더(날짜 선택기)를 추가하려면 다음 단계를 따르세요(아래 이미지 참고): +스케줄러의 헤더에 미니 달력(날짜 선택기)을 배치하려면 아래의 절차를 따르십시오(아래 그림 참조): ![calendar_in_header](/img/calendar_in_header.png) -1. 확장 파일을 페이지에 포함하세요: +1. 페이지에 확장 파일을 포함합니다: ~~~js scheduler.plugins({ minical: true }); ~~~ -2. 미니 캘린더의 컨테이너를 정의하고 스케줄러 마크업에 추가하세요: +2. 미니 달력의 컨테이너를 지정하고 스케줄러 마크업에 추가합니다: ~~~js
... @@ -38,7 +39,7 @@ scheduler.plugins({ onclick="show_minical()"> 
~~~ -3. 미니 캘린더를 초기화([renderCalendar](api/method/rendercalendar.md) 메서드 사용) 및 제거([destroyCalendar](api/method/destroycalendar.md) 메서드 사용)하는 로직을 구현하세요: +3. 미니 달력을 초기화(renderCalendar)하고 파괴(destroyCalendar)하는 로직을 제공합니다: ~~~js function show_minical(){ if (scheduler.isCalendarVisible()){ @@ -57,47 +58,46 @@ function show_minical(){ } ~~~ - -[Mini calendar in the scheduler header](https://docs.dhtmlx.com/scheduler/samples/05_calendar/01_select.html) +[스케줄러 헤더의 미니 달력](https://docs.dhtmlx.com/scheduler/samples/05_calendar/01_select.html) -## 헤더에 추가하기 (서드파티 날짜 선택기) {#intheheaderthirdpartydatepicker} +## 헤더 안에서(Third-party Date Picker) -이 섹션에서는 서드파티 미니 캘린더(날짜 선택기)를 스케줄러 헤더에 통합하는 방법을 설명합니다. +이 섹션에서는 스케줄러의 헤더에 타사 미니 달력(날짜 선택기)을 추가하는 방법을 보여드립니다. ![custom_minicalendar](/img/custom_minicalendar.png) -**Related sample** [3rd party Mini Calendar in the header](https://snippet.dhtmlx.com/5/0dca14de9) +관련 샘플 [3rd party Mini Calendar in the header](https://snippet.dhtmlx.com/5/0dca14de9) -예제에서는 [jQuery](https://jquery.com)와 [Bootstrap Datepicker](https://bootstrap-datepicker.readthedocs.io/en/latest/)를 사용해 미니 캘린더를 추가합니다. 다른 라이브러리를 사용할 경우 코드를 적절히 조정해야 하지만, 전체적인 접근 방식은 비슷합니다. +샘플에서는 [jQuery](https://jquery.com)와 [Bootstrap Datepicker](https://bootstrap-datepicker.readthedocs.io/en/latest/)를 기반으로 미니 달력을 추가합니다. 다른 라이브러리를 사용하시는 경우에도 코드를 수정해야 할 수 있지만 주된 접근 방식은 동일하게 유지됩니다: -1. *캘린더 헤더 클릭 시 날짜 선택기 표시* +1. *헤더를 클릭할 때 날짜 선택기를 표시* -먼저, 스케줄러 헤더 안에 미니 캘린더(또는 다른 컨트롤)를 위한 DIV 컨테이너를 정의하세요. [마크업 초기화 방법](guides/initialization.md#initializing-scheduler-via-markup)을 사용할 경우 다음과 같이 작성합니다: +우선, 미니 달력의 DIV 컨테이너(또는 다른 컨트롤)를 스케줄러 헤더에 정의해야 합니다. 초기화에 대한 [마크업 방식(markup approach)으로의 초기화](guides/initialization.md#initializing-scheduler-via-markup)을 사용하는 경우, 아래와 같이 할 수 있습니다: ~~~js -
+
 
 
-
+ ~~~ -[헤더 설정](guides/initialization.md)을 사용할 경우, [커스텀 요소](api/config/header.md)를 다음과 같이 추가하세요: +만약 [header config](guides/initialization.md#initializing-scheduler-via-header-config)를 사용한다면, 커스텀 요소를 추가해야 합니다: ~~~js scheduler.config.header = [ "day", "week", "month", - {html:'
'+ + {html:''}, @@ -109,7 +109,7 @@ scheduler.config.header = [ scheduler.init("scheduler_here"); ~~~ -다음으로, 스케줄러가 준비된 후 네비게이션 패널의 날짜를 클릭하면 날짜 선택기가 표시되도록 클릭 이벤트를 설정하세요: +날짜를 탐색 패널의 날짜를 클릭하면 날짜 선택기를 표시하도록 하려면, 스케줄러가 준비되자마자 클릭 이벤트를 초기화합니다: ~~~js scheduler.attachEvent("onSchedulerReady", function(){ @@ -127,7 +127,7 @@ scheduler.attachEvent("onSchedulerReady", function(){ $node.datepicker().on("show", function () { $node.datepicker("update", scheduler.getState().date); - // center popup below date label + // date 라벨 아래에 팝업 중앙 정렬 centerDatepicker($(".dhx_cal_date")); }); ... @@ -135,7 +135,7 @@ scheduler.attachEvent("onSchedulerReady", function(){ }); ~~~ -`centerDatepicker` 함수는 드롭다운 날짜 선택기를 올바르게 위치시키는 데 사용됩니다: +`centerDatepicker`는 필요한 위치에 드롭다운 날짜 선택기를 렌더링하기 위해 우리가 구현하는 보조 함수입니다: ~~~js ... @@ -144,10 +144,10 @@ scheduler.attachEvent("onSchedulerReady", function(){ if (!$('.datepicker-dropdown').is(':visible')) { return; } - // center popup below date label - var offset = $(".dhx_cal_date").offset(); - var width = $(".dhx_cal_date").width(); - var popupWidth = $(".datepicker-dropdown").width(); + // date 라벨 아래에 팝업 중앙 정렬 + let offset = $(".dhx_cal_date").offset(); + let width = $(".dhx_cal_date").width(); + let popupWidth = $(".datepicker-dropdown").width(); $(".datepicker-dropdown").css({ top: offset.bottom + "px", left: (width - popupWidth) / 2 + "px" @@ -155,19 +155,19 @@ scheduler.attachEvent("onSchedulerReady", function(){ } ~~~ -2. *사용자가 날짜를 선택하면 스케줄러의 현재 날짜를 업데이트* +2. *사용자가 날짜 선택기에 날짜를 클릭하면 스케줄러를 선택된 날짜로 전환합니다* -날짜 선택기를 표시한 후, 날짜를 선택하면 스케줄러의 날짜를 업데이트하세요: +날짜 선택기를 필요에 따라 표시한 뒤, 달력에서 날짜를 선택하면 스케줄러의 날짜를 변경해야 합니다: ~~~js $node.datepicker().on("changeDate", function () { scheduler.setCurrentView($node.datepicker("getDate")); }); -~~~ +~~~ -3. *스케줄러에 표시 중인 날짜를 날짜 선택기에서 강조 표시* +3. *날짜 선택기에 현재 날짜를 하이라이트* -스케줄러에 현재 표시 중인 날짜를 강조하려면 간단한 CSS 클래스를 적용하세요: +날짜 선택기에 현재 스케줄러에 표시된 날짜를 하이라이트하려면 간단한 CSS 클래스를 사용합니다: ~~~js .datepicker table .scheduler-date{ @@ -175,7 +175,7 @@ scheduler.attachEvent("onSchedulerReady", function(){ } ~~~ -스케줄러에 보이는 모든 날짜 셀에 이 클래스를 추가합니다: +달력 안의 모든 셀 중에서 현재 스케줄러에 표시되는 날짜는 이 클래스를 받게 됩니다: ~~~js function fillDatepicker(scheduler) { @@ -184,7 +184,7 @@ scheduler.attachEvent("onSchedulerReady", function(){ $(".datepicker-dropdown").find("[data-date]").removeClass("scheduler-date"); // highlight scheduler date - var visibleDates = getVisibleDates(scheduler); + const visibleDates = getVisibleDates(scheduler); visibleDates.forEach(function (date) { $(".datepicker-dropdown").find( "[data-date='" + date + "']" @@ -194,17 +194,17 @@ scheduler.attachEvent("onSchedulerReady", function(){ } ~~~ -현재 보이는 날짜를 가져오려면 `scheduler.getState`를 사용하세요: +스케줄러에서 현재 보이는 날짜를 얻으려면 `scheduler.getState`를 사용할 수 있습니다: ~~~js function getVisibleDates(scheduler) { - var minVisible = scheduler.getState().min_date; - var maxVisible = scheduler.getState().max_date; + const minVisible = scheduler.getState().min_date; + const maxVisible = scheduler.getState().max_date; - var current = minVisible; - var result = []; + let current = minVisible; + let result = []; while (current.valueOf() < maxVisible.valueOf()) { - var currentUTC = Date.UTC( + let currentUTC = Date.UTC( current.getFullYear(),current.getMonth(),current.getDate() ); result.push(currentUTC.valueOf()); @@ -215,9 +215,9 @@ scheduler.attachEvent("onSchedulerReady", function(){ } ~~~ -4. *날짜 선택기에서 이벤트가 있는 날짜 표시* +4. *날짜 선택기에서 이벤트가 있는 날짜를 하이라이트* -스케줄러에서 이벤트가 있는 날짜를 강조하려면 또 다른 CSS 클래스를 추가하세요: +다음으로, 이벤트가 있는 날짜를 하이라이트하도록 합니다. 이를 위해서는 위와 동일한 방식으로 CSS 클래스를 추가합니다: ~~~js .datepicker table .has-event::after { @@ -230,26 +230,26 @@ scheduler.attachEvent("onSchedulerReady", function(){ } ~~~ -이렇게 하면 미니 캘린더에서 이벤트가 있는 날짜가 강조 표시됩니다. +위 예시에서 보듯, 미니 달력에서 이벤트가 있는 날짜를 하이라이트합니다. -날짜 위에 마우스를 올릴 때 해당 날짜의 이벤트 개수를 툴팁으로 표시하려면, 날짜 선택기에 현재 표시 중인 월의 이벤트를 가져오세요: +마우스를 올려 놓으면 해당 날짜의 이벤트 수를 표시하는 툴팁을 보려면, 날짜 선택기에 현재 보이는 월의 이벤트를 가져와야 합니다: ~~~js function getVisibleEvents(calendarDate, scheduler) { - var min = scheduler.date.month_start(new Date(calendarDate)); - var max = scheduler.date.add(calendarDate, 1, "month"); + const min = scheduler.date.month_start(new Date(calendarDate)); + const max = scheduler.date.add(calendarDate, 1, "month"); min = scheduler.date.week_start(min); if(scheduler.date.week_start(new Date(max)) < max){ max = scheduler.date.week_start(new Date(max)); max = scheduler.date.add(max, 1, "week"); } - var events = scheduler.getEvents(min, max); - var days = {}; + const events = scheduler.getEvents(min, max); + let days = {}; events.forEach(function (event) { - var eventDate = event.start_date; + let eventDate = event.start_date; while(eventDate < event.end_date){ - var day = Date.UTC( + let day = Date.UTC( eventDate.getFullYear(), eventDate.getMonth(), eventDate.getDate() @@ -264,20 +264,19 @@ scheduler.attachEvent("onSchedulerReady", function(){ } }); - var result = []; - for (var i in days) { + let result = []; + for (let i in days) { result.push({ timestamp: i, count: days[i] }); } return result; } ~~~ -이 방법은 스케줄러에서 이벤트 데이터를 가져오기 때문에, 현재 로드된 이벤트만 강조 표시됩니다. 앱에서 동적 로딩을 사용하는 경우, 일부 이벤트만 로드되므로 모든 이벤트가 표시되지 않을 수 있습니다. - +위 예제에서 이벤트 정보는 스케줄러로부터 가져옵니다. 즉, 이미 로드된 이벤트만 하이라이트할 수 있습니다. 동적 로딩을 사용하는 경우 전체 이벤트 중 일부만 스케줄러에 로드되므로 이 방식은 특히 성능에 불리할 수 있습니다. -대안으로 서버에서 이벤트 데이터를 요청할 수 있습니다. +대안은 서버로부터 이벤트 데이터를 요청하는 것입니다. -이벤트 타임스탬프와 개수를 얻은 후, 날짜 선택기를 다음과 같이 업데이트할 수 있습니다: +이벤트가 포함된 셀의 타임스탬프와 셀당 이벤트 수에 대한 데이터가 있을 때, 이를 이용해 날짜 선택기에 이 정보를 채워 넣을 수 있습니다, 예시는 다음과 같습니다: ~~~js function fillDatepicker(scheduler) { @@ -299,9 +298,9 @@ scheduler.attachEvent("onSchedulerReady", function(){ } ~~~ -5. *표시된 날짜 레이블을 스케줄러의 활성 날짜와 동기화* +5. *스케줄러의 활성 날짜와 날짜 선택기의 표시 라벨을 동기화* -마지막으로, 창 크기가 변경될 때 날짜 선택기를 다시 중앙에 위치시키고, 사용자가 날짜 선택기에서 날짜를 변경할 때 강조 표시를 업데이트하세요: +마지막으로, 창 크기가 바뀌거나 사용자가 날짜 선택기에서 현재 날짜를 바꿀 때 날짜 선택기를 다시 중심에 맞추고 하이라이트를 적용해야 합니다: ~~~js $(window).on('resize', function () { @@ -332,7 +331,7 @@ scheduler.attachEvent("onSchedulerReady", function(){ } ~~~ -스케줄러의 활성 날짜를 별도의 요소에 표시하는 경우, [onViewChange](api/event/onviewchange.md) 이벤트를 감지하여 해당 레이블을 업데이트하세요: +별도의 요소를 사용해 스케줄러의 활성 날짜를 표시하는 경우, [onViewChange](api/event/onviewchange.md) 이벤트를 캡처하고 거기서 날짜 레이블을 업데이트해야 합니다: ~~~js scheduler.attachEvent("onViewChange", function (newMode , newDate){ @@ -345,31 +344,31 @@ scheduler.attachEvent("onViewChange", function (newMode , newDate){ }); ~~~ -이 핸들러는 샘플 코드에서는 사용되지 않습니다. 내장된 날짜 헤더가 자동으로 업데이트되기 때문입니다. [기본 날짜 헤더를 숨기는 경우](guides/scheduler-markup.md#hidingtheschedulersheader)나, 활성 날짜를 여러 곳에 표시하고 싶을 때만 사용하세요. +참고로, 기본 날짜 헤더가 자동으로 업데이트되도록 코드를 구성하였으므로 본 코드 샘플에서는 이 핸들러를 사용하지 않습니다. 기본 날짜 헤더를 숨겼거나(active date를 여러 위치에 표시해야 하는 경우 등) 이 필요가 있을 때만 이러한 코드를 사용해야 합니다. +계속하여 사용하면 됩니다. +## 라이트박스에서 -## 라이트박스에서 사용하기 {#in-the-lightbox} - -미니 캘린더(날짜 선택기)는 라이트박스 안에서 "시작" 및 "종료" 날짜를 선택하는 데에도 사용할 수 있습니다. +미니 달력(날짜 선택기)은 시작 날짜와 종료 날짜를 선택하기 위한 라이트박스에서도 사용할 수 있습니다. ![in_the_lightbox](/img/in_the_lightbox.png) -라이트박스에 미니 캘린더를 추가하려면 다음 단계를 따르세요: +미니 달력을 라이트박스에 배치하려면 아래 절차를 따르세요: -1. 페이지에서 확장 기능을 활성화하세요: +1. 페이지에서 확장을 활성화합니다: ~~~js scheduler.plugins({ minical: true }); ~~~ -2. time 섹션의 type을 calendar_time으로 변경하세요: +2. 시간 섹션의 type을 calendar_time으로 설정합니다(대신 time이 아닌): ~~~js -//기본 라이트박스 정의 -scheduler.config.lightbox.sections="[" +//default lightbox definition +scheduler.config.lightbox.sections= [ {name:"description", height:200, map_to:"text", type:"textarea", focus:true}, {name:"time", height:72, type:"time", map_to:"auto"} ]; -//type:"time" -> type:"calendar_time"으로 변경 +//change type:"time" -> type:"calendar_time" scheduler.config.lightbox.sections = [ {name:"description", height:200, map_to:"text", type:"textarea", focus:true}, {name:"time", height:72, type:"calendar_time", map_to:"auto" } @@ -377,34 +376,34 @@ scheduler.config.lightbox.sections = [ ~~~ -[Mini calendar in the lightbox](https://docs.dhtmlx.com/scheduler/samples/05_calendar/03_in_form.html) +[미니 달력 라이트박스에서](https://docs.dhtmlx.com/scheduler/samples/05_calendar/03_in_form.html) -## 스케줄러 외부에서 사용하기 {#outsidethescheduler} +## 스케줄러 밖에서 -미니 캘린더(날짜 선택기)는 페이지 어디에나 배치할 수 있습니다. +미니 달력(날짜 선택기)은 페이지의 어떤 위치에서도 사용할 수 있습니다. ![outside_the_scheduler](/img/outside_the_scheduler.png) -스케줄러 외부의 HTML 컨테이너에 미니 캘린더를 추가하려면 다음 단계를 따르세요: +스케줄러 외부의 HTML 컨테이너에 미니 달력을 배치하려면 아래의 절차를 따르십시오: -1. 페이지에서 확장 기능을 활성화하세요: +1. 페이지에서 확장을 활성화합니다: ~~~js scheduler.plugins({ minical: true }); ~~~ -2. 페이지에 미니 캘린더 컨테이너를 정의하세요: +2. 페이지의 미니 달력 컨테이너를 지정합니다: ~~~js
...
-
-
+
+
~~~ -3. [renderCalendar](api/method/rendercalendar.md) 메서드를 호출해 미니 캘린더를 렌더링하세요: +3. 페이지에 미니 달력을 렌더링(renderCalendar)하는 메서드를 호출합니다: ~~~js const calendar = scheduler.renderCalendar({ container:"cal_here", @@ -416,13 +415,13 @@ const calendar = scheduler.renderCalendar({ ~~~ -[Mini calendar outside the scheduler](https://docs.dhtmlx.com/scheduler/samples/05_calendar/05_plain_structure.html) +[미니 달력 스케줄러 밖 샘플](https://docs.dhtmlx.com/scheduler/samples/05_calendar/05_plain_structure.html) -## 템플릿 및 스타일 {#templatesandstyles} +## 템플릿과 스타일 ### 템플릿 -mini calendar(날짜 선택기)에서 날짜가 표시되는 방식을 쉽게 변경하려면 ["Mini Calendar Templates"](guides/mini-calendar-templates.md) 문서에서 설명된 다양한 템플릿을 사용할 수 있습니다. +미니 달력(날짜 선택기)에 표시되는 날짜 형식을 사용자 정의하려면 [미니 달력 템플릿(Mini Calendar Templates)](guides/mini-calendar-templates.md) 문서에 나열된 여러 템플릿을 사용할 수 있습니다. ~~~js scheduler.templates.calendar_month = scheduler.date.date_to_str("%M, %Y"); @@ -433,30 +432,31 @@ const calendar = scheduler.renderCalendar({..}); ![mini_calendar_custom_template](/img/mini_calendar_custom_template.png) + ### CSS 클래스 -mini calendar(날짜 선택기)에서 날짜의 표시 방식을 조정하려면 아래 CSS 클래스를 오버라이드할 수 있습니다: +미니 달력(날짜 선택기)의 날짜 모양을 사용자 정의하려면 아래의 CSS 클래스를 재정의하면 됩니다: - + - - + + - - + + - - + + - - + +
CSS class적용 대상Applied to
.dhx_cal_container.dhx_mini_calendar .dhx_month_head하루의 셀.dhx_cal_container.dhx_mini_calendar .dhx_month_heada day's cell
.dhx_cal_container.dhx_mini_calendar .dhx_month_head.dhx_year_event이벤트가 할당된 하루의 셀.dhx_cal_container.dhx_mini_calendar .dhx_month_head.dhx_year_eventa day's cell with the assigned event(s)
.dhx_cal_container.dhx_mini_calendar .dhx_now .dhx_month_head현재 날짜에 해당하는 셀.dhx_cal_container.dhx_mini_calendar .dhx_now .dhx_month_heada day's cell with the current date
.dhx_cal_container.dhx_mini_calendar .dhx_calendar_click현재 활성화된 날짜의 셀.dhx_cal_container.dhx_mini_calendar .dhx_calendar_clicka day's cell with the currently active date
@@ -474,8 +474,8 @@ mini calendar(날짜 선택기)에서 날짜의 표시 방식을 조정하려면 ![mini_calendar_custom_css](/img/mini_calendar_custom_css.png) -### markCalendar() 메서드로 날짜 표시하기 -특정 날짜에 CSS 클래스를 지정하려면 [markCalendar](api/method/markcalendar.md) 메서드를 사용할 수 있습니다: +### Marking days with the markCalendar() method +날짜에 사용자 정의 CSS 클래스를 지정하려면 [markCalendar](api/method/markcalendar.md) 메서드를 사용할 수 있습니다: ~~~js ' /*!*/ -}); -~~~ - -이 방법은 전역적으로 접근 가능한 HTTP URL에서 동작합니다. 로컬 또는 인트라넷 환경에서는 모든 스타일을 직접 포함할 수 있습니다. 예를 들어: - -~~~js -scheduler.exportToPDF({ - header:"" -}); -~~~ - -## HTML 요소 내보내기 {#exportinghtmlelements} - -Scheduler를 PDF로 내보낼 때 보안상의 이유로 HTML 요소에 일부 제한이 있습니다. - -``, ``, `` 태그를 사용하세요(이 방법은 PNG 및 JPG 내보내기에서 동작하지만 Base64에는 적용되지 않음). 예시: - -~~~html - -~~~ - -- CSS의 *background* 또는 *background-image* 속성에 `url()`을 사용하여 이미지 URL 또는 Base64 문자열을 지정하세요(PNG, JPG, SVG 내보내기에서 동작): - -~~~css -.red { - background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABmJLR0QA/wD/AP+gvaeTAAAAB3RJTUUH1ggDCwMADQ4NnwAAAFVJREFUGJWNkMEJADEIBEcbSDkXUnfSgnBVeZ8LSAjiwjyEQXSFEIcHGP9oAi+H0Bymgx9MhxbFdZE2a0s9kTZdw01ZhhYkABSwgmf1Z6r1SNyfFf4BZ+ZUExcNUQUAAAAASUVORK5CYII=") 100%/contain no-repeat; - display: inline-block; - width: 32px; - height: 32px; -} -~~~ - -자체 내보내기 모듈을 사용하고 있으며 지원되지 않는 HTML 요소를 내보내야 하는 경우, 모듈을 수정하여 제한을 우회하는 방법에 대해 지원팀에 문의할 수 있습니다. 단, 이렇게 하면 서버가 XSS 취약점에 노출될 수 있다는 점을 유의하세요. diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/png.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/png.md deleted file mode 100644 index c0799232..00000000 --- a/i18n/ko/docusaurus-plugin-content-docs/current/guides/png.md +++ /dev/null @@ -1,184 +0,0 @@ ---- -title: "Export to PNG" -sidebar_label: "Export to PNG" ---- - -# Export to PNG - -버전 4.1부터 dhtmlxScheduler는 스케줄러를 PNG 이미지로 내보낼 수 있는 [온라인 내보내기 서비스](export/png.md#defaultexporttopng)를 제공합니다. - -:::note -이 서비스는 무료로 제공되지만, 내보내진 PNG에는 GPL 라이선스 하에서 라이브러리의 워터마크가 포함됩니다. 라이선스를 구매하면, 활성 지원 기간(모든 PRO 라이선스의 경우 12개월) 동안 워터마크 없이 내보내기가 가능합니다. -::: - -## 내보내기 서비스 사용하기 {#usingexportservices} - -여러 가지 내보내기 서비스를 사용할 수 있습니다. 온라인 서비스에 의존하지 않고 PNG로 Scheduler를 내보내기 위해 로컬에 설치할 수도 있습니다. - -내보내기 서비스는 Scheduler 패키지에 포함되어 있지 않습니다. 각 서비스의 사용 조건에 대한 자세한 내용은 [관련 문서](https://dhtmlx.com/docs/products/dhtmlxScheduler/export.shtml)를 참고하세요. - -## 요청 크기 제한 {#limitsonrequestsize} - -모든 내보내기 메서드(*exportToPDF*, *exportToPNG* 등)는 공통 API 엔드포인트 **https://export.dhtmlx.com/scheduler**를 사용합니다. 허용되는 최대 요청 크기는 **10 MB**입니다. - -## 기본 PNG 내보내기 {#defaultexporttopng} ----------------------- - -스케줄러를 PNG 이미지로 내보내려면 다음 단계를 따라주세요: - -- export_api 플러그인을 [plugins](api/method/plugins.md) 메서드를 사용하여 활성화합니다: - -~~~js -scheduler.plugins({ - export_api: true -}); -~~~ - -:::note -Scheduler 7.0 미만 버전의 경우, 온라인 내보내기 서비스를 활성화하려면 **https://export.dhtmlx.com/scheduler/api.js** 스크립트를 페이지에 포함해야 합니다. 예시: - -~~~js - - -~~~ -::: - -- exportToPNG 메서드를 사용하여 내보내기를 실행합니다: - -~~~html -/*!*/ -~~~ - - -[Export to PDF/PNG](https://docs.dhtmlx.com/scheduler/samples/04_export/06_online_export.html) - - -## 내보내기 메서드의 파라미터 {#parametersoftheexportmethod} - -[exportToPNG()](api/method/exporttopng.md) 메서드는 여러 가지 선택적 속성을 가진 객체를 인자로 받을 수 있습니다: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
name(string) 출력 파일의 이름을 지정합니다
format('A0', 'A1', 'A2', 'A3', 'A4', 'A5') 출력 PNG 이미지의 포맷을 설정합니다
orientation('portrait', 'landscape') 출력 PNG 이미지의 방향을 설정합니다
zoom(number) 출력 PNG 이미지의 줌 레벨을 조절합니다
header(string) 출력 PNG 이미지에 헤더를 추가합니다. 여기에 어떤 HTML도 사용할 수 있습니다
footer(string) 출력 PNG 이미지에 푸터를 추가합니다. 여기에 어떤 HTML도 사용할 수 있습니다
server(string) 내보내기 요청의 API 엔드포인트를 지정합니다. 로컬 내보내기 서비스를 사용하는 경우 유용합니다. 기본값은 https://export.dhtmlx.com/scheduler입니다
- - -~~~js title="선택적 속성을 포함하여 내보내기 메서드를 호출하는 예시" -scheduler.exportToPNG({ - format:"A4", - orientation:"portrait", - zoom:1, - header:"

My company

", - footer:"

Bottom line

", - server:"https://myapp.com/myexport/scheduler" -}); -~~~ - -## 출력 파일 이름 지정 {#nameoftheoutputfile} - -[exportToPNG](export/png.md#parametersoftheexportmethod) 메서드의 **name** 속성을 사용하여 내보내는 PNG의 파일명을 지정할 수 있습니다: - -~~~js -scheduler.exportToPNG({ - name:"my_beautiful_scheduler.png"/*!*/ -}); -~~~ - -## 출력 파일의 헤더/푸터 {#headerfooteroftheoutputfile} - -[exportToPNG](export/png.md#parametersoftheexportmethod) 메서드의 **header** 및 **footer** 속성을 사용하여 출력 PNG에 헤더나 푸터를 포함할 수 있습니다: - -:::note -여기에는 어떤 HTML도 삽입할 수 있습니다. 이미지를 포함할 때는 "src" 속성에 전역 URL을 사용해야 합니다. -::: - -~~~js -scheduler.exportToPNG({ - name:"myscheduler.png", - header:"

My company

", - footer:"

Bottom line

" -}); -~~~ - -## 출력 파일에 커스텀 스타일 적용 {#customstylefortheoutputfile} - -내보내는 스케줄러에 커스텀 스타일을 적용하려면 다음 방법 중 하나로 CSS를 추가하세요: - -- 스타일시트 링크 포함: - -~~~js -scheduler.exportToPNG({ - name:"calendar.png", - header:'' /*!*/ -}); -~~~ - -- 또는 'style' 태그로 스타일을 직접 삽입: - -~~~js -scheduler.exportToPNG({ - name:"calendar.png", - header:'' /*!*/ -}); -~~~ - -CSS가 로컬이나 인트라넷에 있다면 모든 스타일을 인라인으로 삽입할 수 있습니다: - -~~~js -scheduler.exportToPNG({ - header:"" -}); -~~~ - -## HTML 요소 내보내기 {#exportinghtmlelements} - -Scheduler를 PNG로 내보낼 때, 보안상의 이유로 일부 HTML 요소의 내보내기는 제한됩니다. - -``, ``, `` 태그 사용 (PNG 및 JPG 내보내기에서는 동작하지만 Base64 내보내기에서는 동작하지 않습니다): - -~~~html - -~~~ - -- CSS의 *background* 또는 *background-image*에 이미지 URL 또는 Base64 인코딩 이미지를 사용하는 방법(PNG/JPG/SVG 내보내기에서 동작): - -~~~css -.red { - background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABmJLR0QA/wD/AP+gvaeTAAAAB3RJTUUH1ggDCwMADQ4NnwAAAFVJREFUGJWNkMEJADEIBEcbSDkXUnfSgnBVeZ8LSAjiwjyEQXSFEIcHGP9oAi+H0Bymgx9MhxbFdZE2a0s9kTZdw01ZhhYkABSwgmf1Z6r1SNyfFf4BZ+ZUExcNUQUAAAAASUVORK5CYII=") 100%/contain no-repeat; - display: inline-block; - width: 32px; - height: 32px; -} -~~~ - -자체 내보내기 모듈을 사용하고 있고 온라인 내보내기 서버에서 지원하지 않는 HTML 요소를 내보내야 한다면, 지원팀에 문의하여 해당 제한을 제거하는 방법에 대해 안내를 받을 수 있습니다. 단, 이렇게 하면 서버가 XSS 취약성에 노출될 수 있다는 점을 염두에 두세요. diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/popups-and-modals.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/popups-and-modals.md new file mode 100644 index 00000000..1e8b5441 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/popups-and-modals.md @@ -0,0 +1,368 @@ +--- +title: "팝업 메시지와 모달 상자" +sidebar_label: "팝업 메시지와 모달 상자" +--- + +# 팝업 메시지 및 모달 상자 + +메시지는 Scheduler에서 오류를 알리거나, 작업을 확인하거나 거부하거나, 여러 옵션 중 하나를 선택하는 등 사용자를 위한 알림에 사용됩니다. +Scheduler 메시지는 [dhtmlxMessage 저장소의 포크 버전](https://github.com/DHTMLX/message)을 기초로 사용합니다. +따라서 dhtmlxMessage의 모든 기능은 dhtmlxScheduler 메시지에도 적용됩니다. + +메시지에는 두 가지 주요 유형이 있습니다: [간단한 팝업 메시지 박스](#basic-popup-message)와 [버튼이 있는 모달 메시지 박스](#modal-message-boxes)로, 애플리케이션의 작업을 차단합니다. + +모달 메시지 박스는 세 가지 가능한 유형 중 하나일 수 있습니다: + +- [경고 메시지 박스](#alert-message-box-alert) +- [확인 메시지 박스](#confirm-message-box-confirm) +- [모달박스](#modal-box-modal) + +## 기본 팝업 메시지 + +기본 팝업 메시지 박스를 만들려면 [scheduler.message](api/method/message.md) 메서드를 사용합니다. 메서드의 필수 매개변수는 메시지의 텍스트입니다: + +~~~js +scheduler.message("The event is updated"); +~~~ + +메시지 상자에는 세 가지 유형이 있습니다: + +- 기본 메시지 박스 (**type:"info"**) + +![default_message](/img/default_message.png) + +- 오류 메시지 박스 (**type:"error"**) + +![오류_메시지](/img/error_message.png) + +- 경고 메시지 박스 (**type:"warning"**) + +![경고_메시지](/img/warning_message.png) + +필요한 메시지 박스를 만들려면 해당 값으로 *type* 속성을 정의해야 합니다: + +~~~js +// 오류 메시지 박스 만들기 +scheduler.message({ + text: "Click on the buttons to explore Scheduler message types", + expire: -1, + type: "error" +}); +~~~ + +[다양한 팝업 및 모달 상자 유형](https://docs.dhtmlx.com/scheduler/samples/09_api/11_popups_and_messages.html) + +메시지 상자에 다른 스타일을 적용하려면 [여기](#styling)에서 설명한 대로 type 매개변수를 통해 CSS 클래스를 지정하면 됩니다. + +### 메시지 박스 위치 지정 + +기본적으로 팝업 메시지 박스는 창의 오른쪽 상단에 표시됩니다. 상위 애플리케이션의 작업을 차단하는 [모달 메시지 박스](#modal-message-boxes)와 달리 상위 애플리케이션을 덮어 쓰고 작업을 차단하지 않습니다. 메시지 박스의 위치를 변경하려면 **scheduler.message.position** 속성을 사용합니다: + +~~~js +scheduler.message.position = 'bottom'; +~~~ + +메시지 위치에는 네 가지 가능한 값이 있습니다: + +- **top** - 기본값으로 창의 오른쪽 상단 코너에 메시지 박스를 표시합니다 + +- **bottom** - 창의 오른쪽 하단 코너에 메시지 박스를 표시합니다 + +- **left** - Scheduler 아래 창의 왼쪽에 메시지 박스를 표시합니다 + +- **right** - Scheduler 아래 창의 오른쪽에 메시지 박스를 표시합니다 + +### 만료 간격 + +메시지 박스의 만료 간격은 *expire* 매개변수를 통해 사용자 정의할 수 있습니다. 이는 메시지 박스가 사라지는 시간(밀리초 단위)입니다. 기본값은 4000밀리초입니다. + +이 값을 변경하거나 만료 기간을 완전히 취소하려면 expire 매개변수를 "-1"로 설정합니다. 이 경우 마우스 클릭 시에만 사라집니다. + +~~~js +scheduler.message({ + type:"error", + text:"Invalid data format", + expire:10000 +}); +~~~ + +### API를 통한 메시지 박스 숨김 + +지정한 메시지 박스를 수동으로 숨기고 자동 숨김을 기다리지 않으려면 **scheduler.message.hide(boxId)** 메서드를 사용할 수 있습니다. 하나의 매개변수를 받습니다: + +- **boxId** - 박스의 생성자에서 지정된 박스 아이디 + +~~~js +scheduler.message({ + id:"myBox", + text:"Page is loaded" +}); + +scheduler.message.hide("myBox"); +~~~ + +## 모달 메시지 박스 + +모달 메시지 박스는 필요한 동작이 수행될 때까지(일반적으로 버튼 클릭) 상위 앱의 작업을 차단합니다. 버튼 클릭으로 닫히며, 실행되는 경우 콜백 함수가 있습니다. + +세 가지 유형의 모달 메시지 박스가 존재합니다: + +- [경고 메시지 박스](#alert-message-box-alert) - 버튼이 있는 경고 박스; +- [확인 메시지 박스](#confirm-message-box-confirm) - 두 개의 버튼(확인 또는 취소)으로 이루어진 확인 상자; +- [모달박스](#modal-box-modal) - 무한대의 버튼 수를 가진 모달 메시지 박스. + +박스의 공통 속성은 다음과 같습니다: + +- **id** - 메시지 박스의 아이디; +- **title** - 머리글의 텍스트; +- **type** - 메시지 박스의 유형(경고 또는 오류); +- **text** - 메시지 박스 본문의 텍스트; +- **ok** - "OK" 버튼의 텍스트; +- **cancel** - "Cancel" 버튼의 텍스트(확인 박스의 경우); +- **callback** - 버튼 클릭 시 호출되는 함수. 클릭된 버튼에 따라 true 또는 false를 매개변수로 받습니다; +- **position** - 현재 값은 오직 "top"만 지원하며, 다른 값은 중앙 정렬로 간주됩니다; +- **width** - 모달 박스의 너비(CSS [<length>](https://developer.mozilla.org/en-US/docs/Web/CSS/length) 또는 + [<percentage>](https://developer.mozilla.org/en-US/docs/Web/CSS/percentage) 값으로 설정; 예: "100px", "50%"); +- **height** - 모달 박스의 높이(CSS [<length>](https://developer.mozilla.org/en-US/docs/Web/CSS/length) 또는 + [<percentage>](https://developer.mozilla.org/en-US/docs/Web/CSS/percentage) 값으로 설정; 예: "100px", "50%"). + +## Alert Message Box (#alert) {#alert-message-box-alert} + +![alert](/img/alert.png) + +경고 메시지 박스에는 "OK" 버튼이 포함되어 있습니다. "OK" 버튼의 텍스트를 설정하려면 *ok* 매개변수를 텍스트 값으로 사용합니다: + +- 짧은 형식 (메시지 텍스트만 포함 - 매개변수 '텍스트'의 암시적 사용. 다른 매개변수는 기본값): + +~~~js +scheduler.alert("Text"); +~~~ + +- 전체 형식 (여러 사용 가능한 매개변수를 포함. 명시되지 않은 매개변수는 기본값): + +~~~js +scheduler.alert({ + text: "some text", + title: "Alert", + ok: "Ok", + callback: function(){...} +}); +~~~ + +## Confirm Message Box (#confirm) {#confirm-message-box-confirm} + +![confirm](/img/confirm.png) + +확인 메시지 박스에는 두 개의 버튼이 있습니다: "OK" 버튼과 "Cancel" 버튼. 버튼의 텍스트는 해당 이름의 속성으로 정의됩니다. + +- 짧은 형식 + +~~~js +scheduler.confirm("ConfirmText"); +~~~ + +- 전체 형식 + +~~~js +scheduler.confirm({ + title:"Confirm", + text:"This is a simple confirm", + ok:"Ok", + cancel:"Cancel", + callback: function(result){ + if(result){ + scheduler.message("You clicked Ok"); + }else{ + scheduler.message("You clicked Cancel"); + } + } +}); +~~~ + +## Modal Box (#modal) {#modal-box-modal} + +![modalbox](/img/modalbox.png) + +모달박스는 몇 가지 고유한 특징을 가집니다: + +- 그 *text*에는 어떤 HTML 콘텐츠도 포함될 수 있습니다; +- *buttons* 배열에 있는 텍스트 값을 가진 다수의 버튼이 있을 수 있습니다; +- *callback* 함수는 선택된 버튼의 인덱스를 매개변수로 받습니다. + +~~~js +scheduler.modalbox({ + title:"Settings", + text: " ... html code here... ", + buttons:["Save", "Defaults", "Cancel"], + callback: function(result){ + scheduler.alert(result); + } +}); +~~~ + +### 모달박스 버튼 구성 설정 + +모달박스 버튼 구성을 정의하는 두 가지 주요 방법이 있습니다: + +- 짧은 형식: + +~~~js +scheduler.modalbox({ + // other settings + buttons:["Save", "Delete", "Cancel"], + callback: function(result){ + switch(result){ + case "0": + //Save + break; + case "1": + //Delete + break; + case "2": + //Cancel + break; + } + } +}); +~~~ + +콜백 함수의 결과는 배열에서 누른 버튼의 문자열 인덱스("0", "1", "2",...)와 같습니다. 각 버튼은 레이블에서 소문자로 변환된 CSS 클래스를 받게 되는데, 예를 들면 *scheduler_**save**_button*, *scheduler_**delete**_button*, *scheduler_**cancel**_button* 와 같습니다. + +이 클래스를 사용해 버튼의 스타일을 적용할 수 있습니다: + +~~~js +.scheduler_delete_button div{ + background:red; +} +~~~ + +同樣 이름의 버튼이 여러 팝업에서 사용되어 서로 다르게 스타일링해야 하는 경우에는 **type** 구성을 사용할 수 있습니다: + +~~~js +scheduler.modalbox({ + // other settings + type:"special_popup", + buttons:["Save", "Delete", "Cancel"] +}); +~~~ + +- *type*은 "scheduler_" 문자열로 접두어가 붙고 팝업 요소의 클래스 이름으로 추가됩니다: + +~~~js +.scheduler_special_popup .scheduler_delete_button div{ + background:red; +} +~~~ + +- 전체 형식: + +더 긴 구성 형식을 사용해 버튼의 CSS 클래스와 콜백 값을 명시적으로 정의할 수 있습니다: + +~~~js +scheduler.modalbox({ + // other settings + buttons: [ + { label:"Save", css:"link_save_btn", value:"save" }, + { label:"Cancel", css:"link_cancel_btn", value:"cancel" }, + { label:"Delete", css:"link_delete_btn", value:"delete" } + ], + callback: function(result){ + switch(result){ + case "save": + //Save + break; + case "cancel": + //Cancel + break; + case "delete": + //Delete + break; + } + } +}); +~~~ + + +**label** 매개변수는 필수이며, **css**와 **value** 옵션은 생략될 수 있습니다. 누락된 매개변수는 버튼 구성의 짧은 형식과 같이 계산됩니다: CSS는 소문자로 변환된 버튼 레이블에서 상속되고 버튼의 인덱스가 값으로 사용됩니다. + +**css**는 "scheduler_" 문자열로 접두어를 붙여 버튼 요소에 클래스 이름으로 추가됩니다: + +~~~css +.scheduler_link_delete_btn div{ + background:red; +} +~~~ + +## 모달 메시지 박스 숨김 + +모달 메시지 박스를 수동으로 숨기려면 **scheduler.modalbox.hide()** 메서드를 사용할 수 있습니다. 매개변수로는 모달박스의 div 컨테이너를 받습니다: + +~~~js +const box = scheduler.modalbox({ + title: "Settings", + text: " ... html code here... ", + buttons: ["Save", "Defaults", "Cancel"], + callback: function(result){ + scheduler.alert(result); + } +}); + +scheduler.modalbox.hide(box); +~~~ + +경고(alert) 및 확인(confirm) 모달 박스의 경우에도 동일하게 **scheduler.modalbox.hide()** 메서드를 사용해야 합니다: + +~~~js +const box = scheduler.confirm({ + text: "Continue?", + ok:"Yes", + cancel:"No", + callback: function(result){ + scheduler.message("Result: "+result); + } +}); + +scheduler.modalbox.hide(box); +~~~ + +## 스타일링 + +어떤 유형의 메시지 박스든 원하는 모양을 얻기 위해 사용자 정의 스타일을 정의할 수 있습니다. 일반적으로 적절한 CSS 클래스는 *type* 매개변수를 통해 지정됩니다: CSS 클래스를 정의하고 매개변수를 그 이름으로 설정합니다. + +'type' 매개변수를 설정할 때 염두에 두어야 할 몇 가지 규칙이 있습니다: + +- 경고(alert) 및 확인(confirm) 박스에 대해 CSS 클래스를 설정하려면 해당 박스를 '윈도우 관련(window-related)' 방식으로 초기화해야 합니다. +- 메시지 박스에 CSS 클래스를 설정하려면 해당 박스를 '공통(common)' 방식으로 초기화해야 합니다. +- CSS 클래스의 이름은 'scheduler-' 접두사를 붙여야 합니다. +- 스타일을 올바르게 적용하려면 .scheduler-some div 형태의 클래스를 사용해 Scheduler 메시지 내부의 요소를 대상으로 한다고 지정해야 합니다. + +~~~js + + + +scheduler.message({ type:"myCss", text:"some text" }); +~~~ + +## 모달 창 및 키보드 상호 작용 + +모달 박스의 키보드 기능은 **scheduler.message.keyboard** 속성으로 제어됩니다. 최초 값은 *true*입니다. + +기본적으로 모달 박스는 페이지의 키보드 이벤트를 차단합니다. 사용할 수 있는 키는 다음과 같습니다: + +- "space"와 "enter" - 모달 박스의 결과로 *true* 값을 설정합니다; +- "escape" - 모달 박스의 결과로 *false* 값을 설정합니다. + +**keyboard** 속성을 *false*로 설정하면 키보드 이벤트를 사용할 수 있게 되며, 위에서 언급한 키는 작동하지 않게 됩니다: + +~~~js +scheduler.message.keyboard = false; +scheduler.modalbox({...}); +~~~ + +이를 통해 모달 박스 안의 입력란 등에 값을 입력하는 등 전체 키보드를 사용할 수 있습니다. \ No newline at end of file diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/quick-info.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/quick-info.md index e09d0636..21439940 100644 --- a/i18n/ko/docusaurus-plugin-content-docs/current/guides/quick-info.md +++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/quick-info.md @@ -5,11 +5,11 @@ sidebar_label: "더 쉬운 내비게이션을 위한 대형 버튼" # 더 쉬운 내비게이션을 위한 대형 버튼 -버전 3.7부터 dhtmlxScheduler는 ["Quick Info" 확장](guides/extensions-list.md#quick-info)을 도입했습니다. 이 기능을 사용하면 기존의 사이드바 버튼과 간소화된 편집 폼을 더 크고 사용자 친화적인 버튼으로 대체할 수 있습니다. +버전 3.7부터 dhtmlxScheduler는 새로운 ["Quick Info" 확장 기능](guides/extensions-list.md#quick-info)을 제공합니다. 이 확장은 표준 사이드바 버튼과 간소화된 편집 양식을 새롭고(더 크고 편리한) 버튼으로 교체할 수 있게 해줍니다. -## 대형 버튼 스케줄러 활성화하기 +## 큰 버튼 스케줄러 활성화 -대형 버튼 스케줄러를 활성화하려면, 페이지에서 ["Quick Info"](guides/extensions-list.md#quick-info) 확장을 활성화하세요: +큰 버튼 스케줄러를 활성화하려면 페이지에서 ["Quick Info"](guides/extensions-list.md#quick-info) 확장을 활성화하십시오: ~~~js @@ -17,34 +17,34 @@ sidebar_label: "더 쉬운 내비게이션을 위한 대형 버튼" scheduler.plugins({ quick_info: true }); - scheduler.init('scheduler_here',new Date(2009,5,30),"day"); + scheduler.init('scheduler_here',new Date(2027,5,30),"day"); ... + + +~~~ + +그런 다음 아래에 제공된 코드를 사용해 `src/main.js` 파일을 만들어 메인 자바스크립트 로직을 작성합니다. 이 코드는 Scheduler UI를 Firestore와 연결하고 실시간 업데이트를 처리합니다. + +~~~js title="src/main.js" +import { scheduler } from "dhtmlx-scheduler"; +import { db } from "./firebase.js"; +import { + collection, + query, + onSnapshot, + addDoc, + deleteDoc, + orderBy, + doc, + updateDoc, + getDocs, +} from "firebase/firestore"; + +import "dhtmlx-scheduler/codebase/dhtmlxscheduler.css"; + +const { remoteUpdates } = scheduler.ext.liveUpdates; + +scheduler.plugins({ + recurring: true, +}); + +scheduler.config.header = [ + "day", + "week", + "month", + "date", + "prev", + "today", + "next", +]; + +scheduler.init("scheduler_here", new Date(2025, 3, 20), "week"); + +const eventsRef = collection(db, "events"); + +scheduler.createDataProcessor(async function (entity, action, ev, id) { + switch (action) { + case "create": + { + const createdDoc = await addDoc(eventsRef, ev); + if (createdDoc.id) { + return { action: "inserted", tid: createdDoc.id }; + } + } + break; + case "update": + { + return updateDoc(doc(db, "events", id), ev); + } + break; + case "delete": + { + const deletedDoc = await deleteDoc(doc(db, "events", id)); + if (deletedDoc) { + return { action: "deleted" }; + } + } + break; + } +}); + +// helper functions to process event data +const processEvent = (docSnapshot) => { + const event = docSnapshot.data(); + event.id = docSnapshot.id; + return event; +}; + +// without it collection wouldn't call onSnapshot +const eventsQuery = query(eventsRef, orderBy("text", "desc")); + +(async () => { + const EventsSnap = await getDocs(eventsQuery); + const bulkEvents = EventsSnap.docs.map((ev) => processEvent(ev)); + scheduler.parse(bulkEvents); + watchRealtime(); +})(); + +const watchRealtime = () => { + let EventsLoaded = false; + + onSnapshot(eventsQuery, (querySnapshot) => { + if (!EventsLoaded) { + // first snapshot sends the current state + // we have already loaded it at the previous step + EventsLoaded = true; + return; + } + querySnapshot.docChanges().forEach((change) => { + // processes only the server-side changes + if (change.doc.metadata.hasPendingWrites) return; + + const event = processEvent(change.doc); + + switch (change.type) { + case "added": + remoteUpdates.events({ type: "add-event", event }); + break; + case "modified": + remoteUpdates.events({ type: "update-event", event }); + break; + case "removed": + remoteUpdates.events({ type: "delete-event", event }); + break; + } + }); + }); +}; +~~~ + +이 코드는 DHTMLX Scheduler 라이브러리와 Firebase Firestore를 통합하여 JavaScript 애플리케이션에서 실시간 인터랙티브한 이벤트 달력을 생성합니다. Scheduler UI와 Firestore 데이터베이스 간의 이벤트 데이터를 동기화하여 어느 한 쪽에서 변경된 내용이 다른 쪽에 즉시 반영되도록 합니다. 이 코드는 이벤트 생성, 업데이트, 삭제 및 반복 이벤트를 지원하며 Firestore의 실시간 기능을 활용합니다. + +### 주요 함수 요약 + +- **scheduler.createDataProcessor**: Firestore와 동기화하여 Scheduler 이벤트의 CRUD 작업을 처리합니다: + + - "create"일 때, "events" 컬렉션에 새 문서를 추가합니다. + - "update"일 때, 해당 Firestore 문서를 업데이트합니다. + - "delete"일 때, Firestore에서 문서를 제거합니다. + +- **processEvent(docSnapshot)**: Firestore 문서 스냅샷을 Scheduler 이벤트 객체로 변환하고 문서의 ID를 연결합니다. + +- **(...)() IIFE** : 초기 데이터 로딩. 페이지 로드 시 Firestore에서 기존 이벤트를 모두 불러와 Scheduler로 로드한 뒤 실시간 업데이트를 수신하기 시작합니다. + +- **watchRealtime**: Firestore의 `onSnapshot`을 사용해 이벤트 컬렉션의 변경 사항을 실시간으로 듣고 Scheduler UI를 실시간으로 업데이트합니다. 핵심 포인트는 다음과 같습니다: + + - 초기 스냅샷은 무시합니다(이미 로드됨) + - 서버 측 변경만 처리합니다(로컬, 커밋되지 않은 쓰기는 무시) + - 추가, 수정, 삭제 이벤트를 Scheduler의 `remoteUpdates`를 호출하여 처리합니다. + +- **onSnapshot(q, callback)**: 실시간으로 Firestore의 "events" 컬렉션의 변경 사항을 듣고, "text"를 내림차순으로 정렬하며 추가/수정/삭제 이벤트에 대해 Scheduler UI에 대응하는 실시간 업데이트를 `remoteUpdates.events`를 사용해 적용합니다. + +## 4단계: 프로젝트 초기화 및 배포 + +이제 Firebase Hosting과 Firestore를 초기화해야 합니다. 아래를 따라 진행합니다: + +1. 프로젝트 루트에서 다음 명령어를 실행합니다: + +~~~js +firebase init +~~~ + +그러고 나서 아래의 단계들을 수행합니다: + +- **Firestore**와 **Hosting** 기능을 선택하려면 스페이스바를 사용합니다 +- **Use an existing project**를 선택하고 Firebase 프로젝트를 고릅니다 +- Firestore 규칙, 인덱스, 공개 디렉토리에 대해 기본값을 사용합니다 +- 공개 디렉토리를 `dist`로 설정합니다( Vite 빌드 출력물) +- GitHub 배포 설정은 필요하지 않으면 건너뜁니다 + +2. 아래 명령으로 프로젝트를 빌드합니다: + +~~~js +npm run build +~~~ + +3. 아래 명령으로 Firebase Hosting에 배포합니다: + +~~~js +firebase deploy +~~~ + +배포가 완료되면 콘솔에 호스팅 URL이 표시됩니다. \ No newline at end of file diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/integrations/google-calendar/google-calendar-sync.md b/i18n/ko/docusaurus-plugin-content-docs/current/integrations/google-calendar/google-calendar-sync.md index bb175da0..7064fdbe 100644 --- a/i18n/ko/docusaurus-plugin-content-docs/current/integrations/google-calendar/google-calendar-sync.md +++ b/i18n/ko/docusaurus-plugin-content-docs/current/integrations/google-calendar/google-calendar-sync.md @@ -1,157 +1,167 @@ --- -title: "Two-way sync with Google Calendar (Node.js)" -sidebar_label: "Two-way sync (Node.js)" -description: "Implement a Node.js + Express integration that syncs DHTMLX Scheduler events with Google Calendar using OAuth 2.0 and Google Calendar API v3." +title: "Google Calendar와의 양방향 동기화 (Node.js)" +sidebar_label: "Google Calendar" +description: "OAuth 2.0 및 Google Calendar API v3를 사용하는 Node.js + Express 통합을 구현하여 DHTMLX Scheduler의 이벤트를 Google Calendar와 동기화합니다." --- -# DHTMLX Scheduler: Two-way sync with Google Calendar (Node.js) +# DHTMLX Scheduler: Google Calendar와의 양방향 동기화 (Node.js) -In this guide, you will implement **two-way sync** between **DHTMLX Scheduler** and **Google Calendar** in a small Node.js app: +이 가이드에서는 소규모 Node.js 앱에서 **DHTMLX Scheduler**와 **Google Calendar** 사이에 **양방향 동기화**를 구현합니다: -- Load calendars and events from Google Calendar into Scheduler -- Push Scheduler create/update/delete operations back to Google Calendar +- Google Calendar에서 Scheduler로 달력 및 이벤트를 로드 +- Scheduler의 생성/수정/삭제 작업을 Google Calendar로 다시 전송 :::note -This approach implements **two-way sync via API calls** (Scheduler → backend → Google Calendar). It does **not** implement real-time Google → Scheduler push updates (webhooks). If you change events directly in Google Calendar, reload the app (or reload a date range) to see the updated data in Scheduler. +이 접근 방식은 **API 호출을 통한 양방향 동기화**를 구현합니다(Scheduler → 백엔드 → Google Calendar). 실시간 Google → Scheduler 푸시 업데이트(webhook)는 구현하지 않습니다. Google Calendar에서 직접 이벤트를 변경하면 업데이트된 데이터를 Scheduler에서 보려면 앱을 새로고침하거나 날짜 범위를 다시 로드해야 합니다. ::: -You will build: +다음 구성을 구축합니다. -- a Node.js + Express backend with Google OAuth 2.0 ([Passport](https://www.npmjs.com/package/passport)) and a small REST API for Scheduler -- an event mapping layer (Google ↔ Scheduler), including basic recurring events/exceptions handling -- a Scheduler client wired to the backend via `scheduler.createDataProcessor()` +- Google OAuth 2.0을 사용하는 Node.js + Express 백엔드([Passport](https://www.npmjs.com/package/passport) 포함)와 Scheduler용 간단한 REST API +- Google ↔ Scheduler 간 매핑 계층(기본 반복 이벤트/예외 처리 포함) +- 백엔드를 통해 프런트엔드에 연결된 Scheduler 클라이언트(`scheduler.createDataProcessor()` 사용) -## Prerequisites +:::note +전체 소스 코드는 [GitHub에서 확인 가능](https://github.com/DHTMLX/scheduler-google-calendar-demo). +::: + +## 전제 조건 - Node.js 18+ -- A Google account with access to Google Cloud Console -- Basic familiarity with TypeScript and Express -- Access to DHTMLX Scheduler packages (the example uses `@dhx/trial-scheduler`) +- Google Cloud Console에 접근 권한이 있는 Google 계정 +- TypeScript 및 Express에 대한 기본 지식 +- DHTMLX Scheduler 패키지 접근 권한(예: `@dhx/trial-scheduler` 사용 예시) -## Demo repository +## 데모 저장소 -A complete working project that matches this guide is available on GitHub: -- https://github.com/dhtmlx/scheduler-google-auth-demo *(placeholder - replace with your actual repo)* +이 가이드와 일치하는 완전한 작동 프로젝트는 GitHub에서 확인할 수 있습니다: +- https://github.com/dhtmlx/scheduler-google-auth-demo -The guide explains the key steps and shows the integration code that matters. The repository is the "full runnable reference". +가이드는 핵심 단계와 중요한 통합 코드를 설명합니다. 저장소는 “실행 가능한 전체 참조”입니다. -## Project setup +## 프로젝트 구성 -In this section you will prepare Google OAuth credentials, configure the project, and run the app locally. +이 섹션에서는 Google OAuth 자격 증명을 준비하고 프로젝트를 구성한 뒤 로컬에서 앱을 실행하는 방법을 다룹니다. -### 1) Get the project code +### 1) 프로젝트 코드 가져오기 -Do one of the following: +다음 중 하나를 수행합니다: -- Clone the repository: +- 저장소를 클론합니다: ~~~bash title="Terminal" git clone https://github.com/dhtmlx/scheduler-google-auth-demo.git cd scheduler-google-auth-demo ~~~ -If your project installs `@dhx/*` packages from the private registry, configure npm: +프로젝트가 private 레지스트리에서 `@dhx/*` 패키지를 설치한다면 npm을 구성하십시오: ~~~bash title="Terminal" npm config set @dhx:registry https://npm.dhtmlx.com ~~~ -### 2) Configure Google Cloud (OAuth 2.0) +### 2) Google Cloud(OAuth 2.0) 구성 -In this step you will create OAuth credentials that the backend uses to access Google Calendar on behalf of a user. +이 단계에서 백엔드가 사용자를 대신해 Google Calendar에 접근할 수 있도록 OAuth 자격 증명을 생성합니다. -> The guide uses OAuth in **Testing** mode (recommended for development). In this mode, only users listed as **Test users** can authorize the app. +> 이 가이드는 개발에 적합한 권장 모드로 OAuth를 사용합니다. 이 모드에서는 명시적으로 등록된 테스트 사용자만 앱에 인증할 수 있습니다. -#### 2.1 Create or select a Google Cloud project +#### 2.1 Google Cloud 프로젝트 생성 또는 선택 -1. Open [Google Cloud Console](https://console.cloud.google.com/). -2. Select an existing project or create a new one. +1. [Google Cloud Console](https://console.cloud.google.com/)에 접속합니다. +2. 기존 프로젝트를 선택하거나 새 프로젝트를 생성합니다. -#### 2.2 Enable Google Calendar API +#### 2.2 Google Calendar API 활성화 -1. Go to **APIs & Services → Library**. -2. Search for **Google Calendar API**. -3. Click **Enable**. +1. APIs & Services → Library로 이동합니다. +2. Google Calendar API를 검색합니다. +3. Enable(활성화) 버튼을 클릭합니다. -#### 2.3 Configure the OAuth consent screen +#### 2.3 OAuth 동의 화면 구성 -1. Go to **APIs & Services → OAuth consent screen**. -2. Choose **External** (typical for consumer Google accounts), then click **Create**. -3. Fill in the required fields: - - **App name** - - **User support email** - - **Developer contact email** -4. Set **Publishing status** to **Testing**. -5. Add **Test users**: - - Add the Google accounts you will use to sign in while developing/testing. +1. APIs & Services → OAuth consent screen으로 이동합니다. +2. External를 선택한 다음 Create를 클릭합니다. +3. 필수 필드를 입력합니다: + - App name(앱 이름) + - User support email(사용자 지원 이메일) + - Developer contact email(개발자 연락 이메일) +4. Publishing status를 Testing으로 설정합니다. +5. Test users에 다음을 추가합니다: + - 개발/테스트 중에 로그인에 사용할 Google 계정을 추가합니다. :::note -If you skip test users in **Testing** mode, Google will block authorization for accounts that are not explicitly added. +Testing 모드에서 테스트 사용자를 건너뛰면 Google이 명시적으로 추가된 계정이 아니면 인증을 차단합니다. ::: -#### 2.4 Create OAuth client credentials +#### 2.4 OAuth 클라이언트 자격 증명 생성 + +1. APIs & Services → Credentials로 이동합니다. +2. Create credentials → OAuth client ID를 클릭합니다. +3. Application type: Web application으로 설정합니다. +4. Authorized JavaScript origin에 아래 값을 추가합니다: + +~~~text title="JavaScript origin" +http://localhost:3000 +~~~ -1. Go to **APIs & Services → Credentials**. -2. Click **Create credentials → OAuth client ID**. -3. Application type: **Web application**. -4. Add this **Authorized redirect URI**: +5. Authorized redirect URI에 아래 값을 추가합니다: ~~~text title="Redirect URI" http://localhost:3000/auth/google/callback ~~~ -5. Save and copy: - - **Client ID** - - **Client Secret** +6. 저장 후 다음 정보를 복사합니다: + - Client ID + - Client Secret -#### 2.5 Scope used by this integration +#### 2.5 이 통합에서 사용하는 범위 -The backend requests Google Calendar access via: +백엔드는 Google Calendar 액세스를 다음을 통해 요청합니다: -- `https://www.googleapis.com/auth/calendar` +- https://www.googleapis.com/auth/calendar -This scope is sufficient for listing calendars and performing event CRUD operations. +이 범위는 달력 목록 조회 및 이벤트 CRUD 작업에 충분합니다. -### 3) Configure environment variables +### 3) 환경 변수 구성 -In this step you will provide OAuth credentials and session settings to the backend. +이 단계에서 백엔드에 OAuth 자격 증명 및 세션 설정을 제공합니다. -Copy `.env.example` to `.env`, then fill in the values: +`.env.example`을 `.env`로 복사한 뒤 값을 채웁니다: ~~~ini title=".env" -GOOGLE_CLIENT_ID=... -GOOGLE_CLIENT_SECRET=... +GOOGLE_CLIENT_ID=<이전 단계에서 얻은 Client ID> +GOOGLE_CLIENT_SECRET=<이전 단계에서 얻은 Client Secret> GOOGLE_REDIRECT_URI=http://localhost:3000/auth/google/callback -SESSION_SECRET=some-long-random-string +SESSION_SECRET=일부 길고 임의의 문자열 PORT=3000 ~~~ -### 4) Install dependencies and run +### 4) 의존성 설치 및 실행 ~~~bash title="Terminal" npm install npm run start ~~~ -Open: +다음 주소를 열어 확인합니다: ~~~text title="App URL" http://localhost:3000 ~~~ -At this point you should be able to click **Add Google Calendars**, sign in, and see Scheduler populated with events. +이 시점에서 **Add Google Calendars**를 클릭하고 로그인하면 Scheduler에 이벤트가 채워진 것을 볼 수 있습니다. --- -## Implementation +## 구현 -The rest of the guide explains how the integration is put together. If you are adapting this to an existing app, treat each section below as an implementation milestone. +이 섹션에서는 통합이 어떻게 구성되는지 설명합니다. 기존 앱에 적용하는 경우 아래 각 섹션을 구현 마일스톤으로 간주하십시오. -## Step 1 - Split responsibilities (backend vs client) +## 1단계 - 책임 분리(백엔드 vs 클라이언트) -In this step you will separate responsibilities so Scheduler stays a UI component and the backend owns OAuth + Google API calls. +이 단계에서는 Scheduler를 UI 컴포넌트로 두고 백엔드가 OAuth + Google API 호출을 담당하도록 책임을 분리합니다. -A typical structure: +일반적인 구조: ~~~text title="Project structure" scheduler-google-auth-demo/ @@ -175,18 +185,18 @@ scheduler-google-auth-demo/ .env.example ~~~ -- **server/**: OAuth, token storage (in session), Google Calendar API calls, and REST endpoints for Scheduler -- **client/**: Scheduler init + loading, and [DataProcessor](guides/server-integration.md) that forwards CRUD actions to the server +- **server/**: OAuth, 토큰 저장(세션), Google Calendar API 호출 및 Scheduler용 REST 엔드포인트 +- **client/**: Scheduler 초기화 및 로딩, 백엔드로 CRUD를 전달하는 [DataProcessor](guides/server-integration.md) 설정 -## Step 2 - Implement Google OAuth (Express session + Passport) +## 2단계 - Google OAuth 구현(Express 세션 + Passport) -In this step you will make the backend able to authenticate a user and store Google access/refresh tokens. +이 단계에서 백엔드가 사용자 인증을 수행하고 Google 접근/갱신 토큰을 저장할 수 있도록 만듭니다. -### 2.1 Bootstrap the server (sessions + passport) +### 2.1 서버 부트스트랩(세션 + passport) -Update `server/index.ts` to enable sessions and passport, then mount your routes. +세션과 passport를 활성화하고 라우트를 마운트하도록 `server/index.ts`를 업데이트합니다. -Below is the core wiring (only the relevant parts are shown): +다음은 핵심 연결 코드의 발췌입니다(관련 부분만 보여줌): ~~~ts title="server/index.ts" app.use( @@ -206,7 +216,9 @@ app.use( app.use(passport.initialize()); app.use(passport.session()); -app.use("/events", eventsRoute); +app.use("/events", (req, res, next) => { + req.isAuthenticated() ? next() : res.status(401).json({ error: "Not authenticated" }); +}, eventsRoute); app.use("/auth", authRoute); app.get("/", (req, res) => { @@ -214,13 +226,23 @@ app.get("/", (req, res) => { }); ~~~ -### 2.2 Configure the Google strategy +`/events`의 인라인 미들웨어는 인증되지 않은 요청이 라우트 핸들러가 `AuthenticatedRequest`로 타입 캐스팅되었을 때 서버가 크래시 나는 것을 방지합니다. + +### 2.2 Google 전략 구성 -Update `server/config/passport.ts` to register `passport-google-oauth20`. +`server/config/passport.ts`를 업데이트하여 `passport-google-oauth20`를 등록합니다. -The key idea: keep `accessToken` and `refreshToken` on the user object stored in the session: +핵심 아이디어는 세션에 저장된 사용자 객체에서 `accessToken`과 `refreshToken`을 유지하는 것입니다: ~~~ts title="server/config/passport.ts" +passport.serializeUser((user: Express.User, done) => { + done(null, user); +}); + +passport.deserializeUser((obj: Express.User, done) => { + done(null, obj); +}); + passport.use( new GoogleStrategy( { @@ -241,12 +263,12 @@ passport.use( ~~~ :::note -Production apps usually persist tokens per user in a database and implement refresh token rotation/revocation. This example keeps tokens in-session to keep the flow easy to follow. +프로덕션 앱은 일반적으로 토큰을 사용자별 데이터베이스에 저장하고 토큰 갱신/폐기 정책을 구현합니다. 이 예제는 흐름의 이해를 돕기 위해 토큰을 세션에 보관합니다. ::: -### 2.3 Add OAuth routes +### 2.3 OAuth 라우트 추가 -Update `server/routes/auth.route.ts` to expose the OAuth entry point, callback, and logout: +`server/routes/auth.route.ts`를 업데이트하여 OAuth 진입점, 콜백, 로그아웃 엔드포인트를 노출합니다: ~~~ts title="server/routes/auth.route.ts" router.get( @@ -269,26 +291,109 @@ router.get("/google/logout", (req, res, next) => { }); ~~~ -At this point you should be able to hit `/auth/google`, complete the Google consent screen, and return to `/` with an authenticated session. +이 시점에서 `/auth/google`에 접속하고 Google 동의 화면을 완료한 후 인증 세션으로 `/`로 돌아올 수 있습니다. -## Step 3 - Expose a REST API for Scheduler CRUD +### Google Calendar 서비스 계층 생성 -In this step you will implement the API contract Scheduler uses: +`server/services/googleService.ts`를 생성하여 Google Calendar API v3 CRUD 메서드를 래핑합니다. 세션 토큰에서 OAuth2 클라이언트를 생성하고 달력 목록 조회/이벤트 조회 및 생성/수정/삭제를 위한 헬퍼를 노출합니다: -- `GET /events` - load calendars + events -- `POST /events` - create -- `PUT /events/:eventId` - update -- `DELETE /events/:eventId` - delete +~~~ts title="server/services/googleService.ts" +import { google, calendar_v3 } from "googleapis"; +import type { GoogleOAuthTokens } from "../types/auth.types.ts"; +import config from "../config/index.ts"; -### 3.1 Load calendars + events (GET /events) +const calendarClient = google.calendar("v3"); -Update `server/routes/events.route.ts` to return: +function oauthClient(tokens: GoogleOAuthTokens) { + const client = new google.auth.OAuth2( + config.GOOGLE_CLIENT_ID, + config.GOOGLE_CLIENT_SECRET, + config.GOOGLE_REDIRECT_URI + ); + client.setCredentials({ + access_token: tokens.accessToken, + refresh_token: tokens.refreshToken, + }); + return client; +} +/* ------ CRUD helpers ------- */ -- `data` containing Scheduler-style events -- `collections.calendars` containing list of calendars that will be [available on the client]](guides/loading-data.md#collections) +export async function listCalendars(tokens: GoogleOAuthTokens): Promise { + const { data } = await calendarClient.calendarList.list({ auth: oauthClient(tokens) }); + return data.items ?? []; +} -Below is a working example handler: +export async function listEvents( + tokens: GoogleOAuthTokens, + opts: calendar_v3.Params$Resource$Events$List +): Promise { + const { data } = await calendarClient.events.list({ + auth: oauthClient(tokens), + ...opts, + }); + return data.items ?? []; +} + +export async function createEvent( + tokens: GoogleOAuthTokens, + calendarId: string | undefined, + gEvent: calendar_v3.Schema$Event +): Promise { + const { data } = await calendarClient.events.insert({ + auth: oauthClient(tokens), + calendarId: calendarId || "primary", + requestBody: gEvent, + conferenceDataVersion: 1, + }); + return data; +} + +export async function updateEvent( + tokens: GoogleOAuthTokens, + calendarId: string | undefined, + eventId: string, + gPatch: calendar_v3.Schema$Event +): Promise { + const { data } = await calendarClient.events.patch({ + auth: oauthClient(tokens), + calendarId: calendarId || "primary", + eventId, + requestBody: gPatch, + }); + return data; +} + +export async function deleteEvent( + tokens: GoogleOAuthTokens, + calendarId: string | undefined, + eventId: string +): Promise { + await calendarClient.events.delete({ + auth: oauthClient(tokens), + calendarId: calendarId || "primary", + eventId, + }); +} +~~~ + +## 3단계 - Scheduler CRUD를 위한 REST API 노출 + +이 단계에서 Scheduler가 사용하는 API 계약을 구현합니다: + +- GET /events — 달력 + 이벤트 로드 +- POST /events — 생성 +- PUT /events/:eventId — 수정 +- DELETE /events/:eventId — 삭제 + +### 3.1 달력 + 이벤트 로드(GET /events) + +`server/routes/events.route.ts`를 업데이트하여 아래를 반환합니다: + +- Scheduler 스타일의 이벤트를 담은 `data` +- [클라이언트에서 사용 가능한] 목록 달력의 CALENDARS를 담은 `collections.calendars` + +다음은 작동하는 핸들러의 예시입니다: ~~~ts title="server/routes/events.route.ts" router.get("/", async (req, res, next) => { @@ -314,7 +419,7 @@ router.get("/", async (req, res, next) => { const googleEvents = await Promise.all( mappedCals.map(async (calendar) => { - const params: Record = { calendarId: calendar.id, timeMin: minDate }; + const params: calendar_v3.Params$Resource$Events$List = { calendarId: calendar.id, timeMin: minDate }; if (maxDate) params.timeMax = maxDate; const calendarEventsResponse = await googleService.listEvents(authedReq.user.tokens, params); @@ -336,13 +441,13 @@ router.get("/", async (req, res, next) => { }); ~~~ -Related docs: [Loading data](guides/loading-data.md#collections). +관련 문서: [데이터 로딩](guides/loading-data.md#collections). -### 3.2 Forward CRUD operations to Google Calendar +### 3.2 CRUD를 Google Calendar로 전달 -Update the same route module to handle create/update/delete. +동일한 라우트 모듈을 업데이트하여 생성/수정/삭제를 처리합니다. -Create: +생성: ~~~ts title="server/routes/events.route.ts" router.post("/", async (req, res, next) => { @@ -363,7 +468,7 @@ router.post("/", async (req, res, next) => { }); ~~~ -Update: +수정: ~~~ts title="server/routes/events.route.ts" router.put("/:eventId", async (req, res, next) => { @@ -385,15 +490,15 @@ router.put("/:eventId", async (req, res, next) => { }); ~~~ -Delete: +삭제: ~~~ts title="server/routes/events.route.ts" router.delete("/:eventId", async (req, res, next) => { const authedReq = req as AuthenticatedRequest; const calendarId = (req.body as DhxEvent)?.calendarId as string | undefined; - // If this is an exception occurrence (id contains "_"), there is nothing to delete on Google side. - // Google Calendar removes occurrences when deleting the main recurring event. + // 예외 발생(아이디에 "_"가 있는 경우)인 경우 Google 쪽에서 삭제할 대상이 없음 + // Google Calendar는 주기적 이벤트를 삭제하면 발생 항목을 삭제합니다. const dhxId = req.body?.id as string | undefined; if (typeof dhxId === "string" && dhxId.indexOf("_") > -1) { res.json({ action: "deleted" }); @@ -409,37 +514,38 @@ router.delete("/:eventId", async (req, res, next) => { }); ~~~ -At this point Scheduler can load `/events`, and basic CRUD can be wired on the client. - -## Step 4 - Map Google events to Scheduler events (and back) +이제 Scheduler가 `/events`를 로드할 수 있고, 클라이언트에서 기본 CRUD를 백엔드로 연결할 수 있습니다. -In this step you will implement a mapper that converts between: +## 4단계 - Google 이벤트를 Scheduler 이벤트로 매핑(그리고 그 반대) -- Google event fields (`start.dateTime` / `start.date`, `recurrence`, etc.) -- Scheduler event fields (`start_date`, `end_date`, `rrule`, etc.) +이 단계에서는 Google 이벤트 필드(`start.dateTime`/`start.date`, `recurrence` 등)와 Scheduler 이벤트 필드(`start_date`, `end_date`, `rrule` 등) 간의 변환을 담당하는 매퍼를 구현합니다. -### Key differences you must handle +### 다루어야 할 주요 차이점 -1) **All-day vs timed events** -- Google: all-day uses `start.date` / `end.date` -- Google: timed uses `start.dateTime` / `end.dateTime` and may include `timeZone` -- Scheduler: uses `start_date` / `end_date` (Date objects) +1) 모든 날(All-day) 이벤트 vs 시간 기반 이벤트 +- Google: 모든 날 이벤트는 `start.date` / `end.date`를 사용 +- Google: 시간 기반 이벤트는 `start.dateTime` / `end.dateTime`을 사용하며 `timeZone`을 포함할 수 있음 +- Scheduler: `start_date` / `end_date`를 사용(날짜 객체) -2) **Recurrence rules** -- Google stores recurrence as array strings with `RRULE:` prefix -- Scheduler uses `rrule` without the prefix +2) 반복 규칙 +- Google은 반복을 배열 문자열로 `RRULE:` 접두사와 함께 저장 +- Scheduler는 접두사 없이 `rrule`을 사용 -3) **Recurring series end date** -- Scheduler expects an `end_date` for recurring series. -- Google may use `UNTIL=` in RRULE, or no UNTIL (infinite series). +3) 반복 시퀀스 종료일 +- Scheduler는 반복 시퀀스의 종료일인 `end_date`를 기대합니다. +- Google은 RRULE에서 `UNTIL=`를 사용하거나 무한 반복일 수 있습니다. -Related docs: [Recurring events](guides/recurring-events.md). +관련 문서: [Recurring events](guides/recurring-events.md). ### Google → Scheduler -Update `server/mappers/eventMapper.ts` to map the Google event shape into Scheduler's event shape (excerpt below; keep helper functions like `calculateEndDate()` in the same module): +`server/mappers/eventMapper.ts`를 업데이트하여 Google 이벤트 형태를 Scheduler의 이벤트 형태로 매핑합니다(아래 발췌; `calculateEndDate()`와 같은 헬퍼 함수는 같은 모듈에 유지합니다): ~~~ts title="server/mappers/eventMapper.ts" +import moment from "moment-timezone"; +import type { DhxEvent, MappedCalendar } from "../types/types.ts"; +import type { calendar_v3 } from "googleapis"; + export function toDhxEvent(gEvent: calendar_v3.Schema$Event, calendar: MappedCalendar): DhxEvent { const ev: DhxEvent = { id: gEvent.id as string, @@ -456,7 +562,7 @@ export function toDhxEvent(gEvent: calendar_v3.Schema$Event, calendar: MappedCal const start = gEvent.start; const end = gEvent.end; - // Non-recurring + // 비반복 if (start?.dateTime && end?.dateTime && !gEvent.recurrence?.length) { ev.start_date = new Date(start.dateTime); ev.end_date = new Date(end.dateTime); @@ -465,7 +571,7 @@ export function toDhxEvent(gEvent: calendar_v3.Schema$Event, calendar: MappedCal ev.end_date = new Date(end.date + "T00:00:00"); } - // Recurring + // 반복 if (gEvent.recurrence?.length) { ev.rrule = String(gEvent.recurrence[0]).replace("RRULE:", ""); @@ -480,7 +586,7 @@ export function toDhxEvent(gEvent: calendar_v3.Schema$Event, calendar: MappedCal ev.end_date = calculateEndDate(gEvent); } - // Exceptions: original start time + // 예외: 원래 시작 시간 if (gEvent.originalStartTime?.dateTime) { ev.original_start = new Date(gEvent.originalStartTime.dateTime); } @@ -489,9 +595,27 @@ export function toDhxEvent(gEvent: calendar_v3.Schema$Event, calendar: MappedCal } ~~~ +### `calculateEndDate()` 헬퍼 + +Google의 반복 규칙에서 UNTIL 날짜를 추출하거나 무한 반복의 경우 먼 미래의 날짜를 반환합니다. 반복되는 이벤트의 종료일을 Scheduler가 기대하므로 이를 제공합니다: + +~~~ts title="server/mappers/eventMapper.ts" +// UNTIL=20260129T205959Z를 'YYYY-MM-DDTHH:mm:ssZ' 형식으로 변환 +// UNTIL이 없으면 -> 이벤트가 무한 반복 -> '9999-02-01T00:00:00Z' 반환 +function calculateEndDate(gEvent: calendar_v3.Schema$Event): Date { + const until = String(gEvent.recurrence?.[0] ?? "").match(/RRULE:.*?UNTIL=([^;]+)/)?.[1]; + + return until + ? new Date( + until.replace(/^([0-9]{4})([0-9]{2})([0-9]{2})T([0-9]{2})([0-9]{2})([0-9]{2})Z$/, "$1-$2-$3T$4:$5:$6Z") + ) + : new Date(9999, 1, 1); +} +~~~ + ### Scheduler → Google -Update the mapper to convert Scheduler event fields back into Google's schema: +Scheduler 이벤트 필드를 Google의 스키마로 되돌리기 위한 매퍼 업데이트: ~~~ts title="server/mappers/eventMapper.ts" export function toGoogleEventPayload(dhx: DhxEvent): calendar_v3.Schema$Event { @@ -500,12 +624,14 @@ export function toGoogleEventPayload(dhx: DhxEvent): calendar_v3.Schema$Event { description: dhx.details ?? "", }; + const tz = dhx.timeZone || "UTC"; + if (dhx.start_date && dhx.end_date) { const isAllDay = dhx.duration === 24 * 60 * 60 || new Date(dhx.end_date).getTime() - new Date(dhx.start_date).getTime() === 24 * 60 * 60 * 1000; - // Recurring + // 반복 if (dhx.rrule && dhx.duration) { gEvent.recurrence = ["RRULE:" + dhx.rrule]; @@ -514,49 +640,41 @@ export function toGoogleEventPayload(dhx: DhxEvent): calendar_v3.Schema$Event { gEvent.end = { date: moment(dhx.start_date).add(1, "day").format("YYYY-MM-DD") }; } else { gEvent.start = { - dateTime: moment - .tz(new Date(dhx.start_date).toISOString(), "YYYY-MM-DD HH:mm", dhx.timeZone) - .format("YYYY-MM-DDTHH:mm:ssZZ"), - timeZone: dhx.timeZone, + dateTime: moment(new Date(dhx.start_date).toISOString()).tz(tz).format("YYYY-MM-DDTHH:mm:ssZZ"), + timeZone: tz, }; const endDate = new Date(new Date(dhx.start_date).getTime() + dhx.duration * 1000).toISOString(); gEvent.end = { - dateTime: moment.tz(endDate, "YYYY-MM-DD HH:mm", dhx.timeZone).format("YYYY-MM-DDTHH:mm:ssZZ"), - timeZone: dhx.timeZone, + dateTime: moment(endDate).tz(tz).format("YYYY-MM-DDTHH:mm:ssZZ"), + timeZone: tz, }; } } else { - // Non-recurring + // 비반복 if (isAllDay) { gEvent.start = { date: moment(dhx.start_date).format("YYYY-MM-DD") }; gEvent.end = { date: moment(dhx.start_date).add(1, "day").format("YYYY-MM-DD") }; } else { gEvent.start = { - dateTime: moment - .tz(new Date(dhx.start_date).toISOString(), "YYYY-MM-DD HH:mm", dhx.timeZone) - .format("YYYY-MM-DDTHH:mm:ssZZ"), - timeZone: dhx.timeZone, + dateTime: moment(new Date(dhx.start_date).toISOString()).tz(tz).format("YYYY-MM-DDTHH:mm:ssZZ"), + timeZone: tz, }; gEvent.end = { - dateTime: moment - .tz(new Date(dhx.end_date).toISOString(), "YYYY-MM-DD HH:mm", dhx.timeZone) - .format("YYYY-MM-DDTHH:mm:ssZZ"), - timeZone: dhx.timeZone, + dateTime: moment(new Date(dhx.end_date).toISOString()).tz(tz).format("YYYY-MM-DDTHH:mm:ssZZ"), + timeZone: tz, }; } } - // Recurring exceptions support + // 반복 예외 지원 if (dhx.recurring_event_id) { gEvent.recurringEventId = dhx.recurring_event_id.toString(); } if (dhx.original_start) { gEvent.originalStartTime = { - dateTime: moment - .tz(new Date(dhx.original_start).toISOString(), "YYYY-MM-DD HH:mm", dhx.timeZone) - .format("YYYY-MM-DDTHH:mm:ssZZ"), - timeZone: dhx.timeZone, + dateTime: moment(new Date(dhx.original_start).toISOString()).tz(tz).format("YYYY-MM-DDTHH:mm:ssZZ"), + timeZone: tz, }; } if (dhx.deleted) { @@ -568,13 +686,13 @@ export function toGoogleEventPayload(dhx: DhxEvent): calendar_v3.Schema$Event { } ~~~ -## Step 5 - Wire Scheduler to the backend (load + CRUD) +## 5단계 - Scheduler를 백엔드와 연결(로드 + CRUD) -In this step you will initialize Scheduler, load data from `GET /events`, and send CRUD operations to the backend via DataProcessor. +이 단계에서는 Scheduler를 초기화하고 `/events`에서 데이터를 로드하며 DataProcessor를 통해 CRUD를 백엔드로 보냅니다. -### 5.1 Render a different UI for "authorized vs not authorized" +### 5.1 권한 부여된 상태와 그렇지 않은 상태의 UI 구분 렌더링 -Update `client/index.ejs` to expose an authorization flag to the client: +클라이언트에 권한 부여 여부 플래그를 노출하도록 `client/index.ejs`를 업데이트합니다: ~~~html title="client/index.ejs" ~~~ -### 5.2 Initialize Scheduler and load events +### 5.2 Scheduler 초기화 및 이벤트 로드 -Update `client/main.ts` to initialize Scheduler and load data once the user is authorized. +데이터를 로드하도록 `client/main.ts`를 업데이트합니다. 사용자가 인증된 경우에만 데이터를 로드합니다. -Only the relevant part is shown: +다음은 관련 부분만 발췌한 예시입니다: ~~~ts title="client/main.ts" scheduler.plugins({ recurring: true }); @@ -602,19 +720,19 @@ if (GOOGLE_AUTHORIZED) { } ~~~ -### 5.3 Enable two-way sync with DataProcessor +### 5.3 DataProcessor로 Scheduler의 양방향 동기화 활성화 -Update `client/main.ts` to forward Scheduler CRUD actions to the server. +`client/main.ts`를 업데이트하여 Scheduler의 CRUD를 백엔드로 전달합니다. ~~~ts title="client/main.ts" scheduler.createDataProcessor(async (entity, action, data, id) => { const calendars = scheduler.serverList("calendars") as MappedCalendar[]; - // Demo simplification: send everything into the first available calendar. - // In a real app, let users choose a target calendar. + // 데모 단순화: 모든 데이터를 첫 번째 사용 가능한 캘린더로 전송합니다. + // 실제 앱에서는 사용자가 대상 캘린더를 선택하도록 합니다. data.calendarId = calendars[0]?.id; - // Provide client timezone so the server can generate correct dateTime values. + // 서버가 올바른 dateTime 값을 생성할 수 있도록 클라이언트의 타임존을 제공합니다. data.timeZone = momentTz.tz.guess(); return fetchEvent(action, data, id); @@ -639,41 +757,41 @@ async function fetchEvent(action, data, id) { } ~~~ -Related docs: [DataProcessor](guides/server-integration.md#request-parameters). +관련 문서: [DataProcessor](guides/server-integration.md#technique). -At this point: +지금까지의 상태로: -- events from Google Calendar should appear in Scheduler after authorization -- creating/updating/deleting in Scheduler should update Google Calendar +- Google Calendar의 이벤트가 권한 부여 후 Scheduler에 나타나야 합니다 +- Scheduler에서 생성/수정/삭제가 Google Calendar를 업데이트해야 합니다 --- -## Troubleshooting +## Troubleshooting(문제 해결) ### "Error 400: redirect_uri_mismatch" -- **Cause:** The redirect URI in Google Cloud credentials does not match your app callback URL. -- **Fix:** Ensure the Authorized redirect URI is exactly: - - `http://localhost:3000/auth/google/callback` +- 원인: Google Cloud 자격 증명의 Redirect URI가 앱의 콜백 URL과 일치하지 않음 +- 해결: Authorized redirect URI가 정확히 아래와 같도록 설정 + - http://localhost:3000/auth/google/callback ### "Access blocked: app has not completed the Google verification process" -- **Cause:** Consent screen is not in Testing mode or you are not listed as a test user. -- **Fix:** Set Publishing status to **Testing** and add your account in **Test users**. +- 원인: Consent 화면이 Testing 모드가 아니거나 테스트 사용자로 목록에 없음 +- 해결: Publishing status를 Testing으로 설정하고 계정을 **Test users**에 추가 ### "No refresh token returned" -- **Cause:** Google may return a refresh token only the first time the user consents for a given client ID. -- **Fix:** Ensure your auth request includes `accessType: "offline"` and `prompt: "consent"`. If you already authorized before, revoke access in Google Account permissions and authorize again. +- 원인: 특정 클라이언트 ID에 대해 사용자가 최초로 동의할 때만 갱신 토큰이 반환될 수 있음 +- 해결: auth 요청에 `accessType: "offline"` 및 `prompt: "consent"`를 포함했는지 확인. 이미 인증한 경우 Google 계정 권한에서 액세스를 취소하고 다시 인증하십시오. -## Summary +## 요약 -You implemented two-way sync between Scheduler and Google Calendar: +다음과 같은 방식으로 Scheduler와 Google Calendar 간의 양방향 동기화를 구현했습니다: -- The backend authenticates users via Google OAuth 2.0 and stores tokens in the session -- Scheduler loads calendars and events through `GET /events` -- Scheduler CRUD operations are forwarded to Google Calendar via `POST/PUT/DELETE /events` -- A mapper converts timed/all-day and recurring events between Google Calendar and Scheduler +- 백엔드가 Google OAuth 2.0으로 사용자를 인증하고 세션에 토큰을 저장합니다 +- Scheduler는 `GET /events`를 통해 달력과 이벤트를 로드합니다 +- Scheduler의 CRUD 작업은 `POST/PUT/DELETE /events`를 통해 Google Calendar로 전달됩니다 +- Google Calendar와 Scheduler 간의 시간 기반/모든 날 이벤트 및 반복 이벤트를 매핑하는 매퍼를 통해 두 스키마 간의 변환이 이루어집니다 -## Demo repository link +## 데모 저장소 링크 -Full working source (replace with your real repo): +전체 작동 소스: -- https://github.com/dhtmlx/scheduler-google-auth-demo +- https://github.com/DHTMLX/scheduler-google-calendar-demo \ No newline at end of file diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/integrations/legacy/backbone-integration.md b/i18n/ko/docusaurus-plugin-content-docs/current/integrations/legacy/backbone-integration.md new file mode 100644 index 00000000..a78143d3 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/integrations/legacy/backbone-integration.md @@ -0,0 +1,57 @@ +--- +title: "Backbone 통합(레거시)" +sidebar_label: "Backbone 통합(레거시)" +--- + +# Backbone 통합(레거시) + +:::warning +이 문서는 레거시 통합에 대해 설명합니다. 새로 시작하는 경우 프레임워크 통합이나 바닐라 JS 설정을 참조하세요. +::: + + +버전 4.0부터 라이브러리는 Backbone 라이브러리와 스케줄러를 통합할 수 있도록 특별한 확장 [**mvc**](guides/extensions-list.md#legacy)을 제공합니다. + +Backbone 기반 애플리케이션이 있고 거기에 스케줄러를 추가하려면(데이터 관리는 여전히 Backbone으로), 아래의 기법을 사용하십시오: + +1. 앱에 dhtmlxScheduler 파일을 포함합니다: +~~~js + + +~~~ +2. 페이지에서 mvc 확장을 활성화합니다: +~~~js +scheduler.plugins({ + mvc: true +}); +~~~ +3. 일반적인 방식으로 스케줄러를 초기화하고 구성합니다: +~~~js +scheduler.full_day = true; + +scheduler.init("scheduler_here",new Date(2019,0,6),"month"); +~~~ +4. 이제 Backbone에서 데이터 컬렉션을 만들고 스케줄러를 그것에 연결할 수 있습니다: +~~~js +//you can use any model here +MyEvent = Backbone.Model.extend({}); +EventList = Backbone.Collection.extend({ + model:MyEvent, + url:"./data/backbone.json" +}); +events = new EventList(); + + +scheduler.backbone(events); //link scheduler to collection +~~~ + +그 후 스케줄러는 컬렉션에서 데이터를 로드하고 그 안의 모든 업데이트를 반영합니다. 또한 스케줄러의 UI를 통해 발생한 변경은 Backbone의 컬렉션에서 관련 이벤트를 트리거합니다. + + +보시다시피 꽤 간단합니다. 필요한 것은 일반적인 [load](api/method/load.md)나 [parse](api/method/parse.md) 대신 [backbone](api/method/backbone.md) 메서드를 사용하는 것뿐입니다. + +[Backbone](api/method/backbone.md) 메서드는 스케줄러가 Backbone 모델의 모든 데이터 변경 사항을 반영하고 그 반대도 마찬가지가 되도록 만듭니다. +매개변수로 이 메서드는 Backbone 컬렉션을 받습니다. + + +[Backbone 통합](https://docs.dhtmlx.com/scheduler/samples/10_integration/07_backbone.html) \ No newline at end of file diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/integrations/legacy/dhtmlx-dnd.md b/i18n/ko/docusaurus-plugin-content-docs/current/integrations/legacy/dhtmlx-dnd.md new file mode 100644 index 00000000..48eec479 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/integrations/legacy/dhtmlx-dnd.md @@ -0,0 +1,65 @@ +--- +title: "DHTMLX Suite v5.x의 Drag-and-Drop" +sidebar_label: "DHTMLX Suite v5.x의 Drag-and-Drop" +--- + +# 드래그 앤 드롭 작업(레거시) + +:::warning +이 문서는 레거시 통합에 대해 설명합니다. 새로 시작하는 경우 프레임워크 통합 또는 바닐라 JS 설정을 참조하세요. +::: + +라이브러리는 외부 DHTMLX 구성요소나 다른 스케줄러에서 요소를 드래그하여 새로운 이벤트를 생성할 수 있게 하는 **outerdrag** 확장을 제공합니다. + +## 외부 구성요소에서 드래그 + +사용자가 외부 요소를 스케줄러로 드래그하면, 스케줄러가 새 이벤트 생성을 위한 라이트박스를 엽니다. + +![external_dnd](/img/external_dnd.png) + +[Integration with dhtmlxTree](https://docs.dhtmlx.com/scheduler/samples/10_integration/02_dhtmlxtree_outer_drag.html) + +다음은 dhtmlxTree 컴포넌트의 맥락에서 외부 드래그 앤 드롭을 살펴보겠습니다. + +다음 단계에 따라 스케줄러를 dhtmlxTree와 통합합니다: + +1. 다운로드 패키지를 다운로드하고 [YOUR APPLICATION ROOT] 폴더에 내용을 압축 해제합니다 +2. 페이지에 필요한 js와 css 파일을 포함합니다: +~~~html + + +... +~~~ +3. 페이지에서 [outerdrag](guides/extensions-list.md#outerdrag) 확장을 활성화합니다: +~~~js +scheduler.plugins({ + outerdrag: true +}); +~~~ +4. dhtmlxTree 구성요소를 초기화합니다(여기를 참고): +~~~js +var tree = new dhtmlXTreeObject("treebox", "100%", "100%", 0); +tree.setImagePath("../common/dhtmlxTree/imgs/csh_yellowbooks/"); +tree.loadXML("./data/tree.xml"); +~~~ +5. dhtmlxTree 구성요소에서 드래그 앤 드롭을 활성화합니다(여기를 참고): +~~~js +tree.enableDragAndDrop(true); +~~~ +6. 스케줄러를 초기화하고 구성합니다: +~~~js +... +scheduler.init('scheduler_here', new Date(2019, 5, 30), "timeline"); +~~~ +7. [onExternalDragIn](api/event/onexternaldragin.md) 이벤트에 핸들러를 연결하여 드래그된 텍스트를 이벤트 속성으로 어떻게 변환할지 설정합니다: +~~~js +scheduler.attachEvent("onExternalDragIn", function(id, source, event){ + var label = tree.getItemText(tree._dragged[0].id); + scheduler.getEvent(id).text = label; + return true; +}); +~~~ + +[Integration with dhtmlxTree](https://docs.dhtmlx.com/scheduler/samples/10_integration/02_dhtmlxtree_outer_drag.html) + +이제 트리 데이터가 포함된 새 이벤트를 쉽게 만들 수 있습니다 - 원하는 노드를 드래그 앤 드롭하면 됩니다. \ No newline at end of file diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/integrations/other/bootstrap.md b/i18n/ko/docusaurus-plugin-content-docs/current/integrations/other/bootstrap.md new file mode 100644 index 00000000..b364d0ca --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/integrations/other/bootstrap.md @@ -0,0 +1,47 @@ +--- +title: "부트스트랩과의 통합" +sidebar_label: "부트스트랩과의 통합" +--- + +# 부트스트랩과의 통합 + +Scheduler 라이브러리를 Bootstrap 프레임워크와 통합할 수 있습니다. Bootstrap 애플리케이션에 Scheduler를 추가하려면 아래 단계를 따르십시오: + +1. 앱에 dhtmlxScheduler 파일을 포함합니다: + +~~~html + +~~~ + +2. Bootstrap 요소에 대한 HTML 마크업을 지정하고 Scheduler 컨테이너와 헤더 요소를 추가합니다. 아래와 같이: + +~~~html +
+
+
+ dhtmlxScheduler +
+
+ + +
+ +
+
+ +~~~ + +3. 일반적인 방법으로 Scheduler를 초기화하고 구성합니다: + +~~~js +scheduler.plugins({ + year_view: true, +}); +scheduler.config.first_hour = 8; +scheduler.config.limit_time_select = true; + +scheduler.init('scheduler_here',new Date(2027,5,30),"week"); +~~~ + +[부트스트랩 레이아웃](https://docs.dhtmlx.com/scheduler/samples/10_integration/08_bootstrap.html) \ No newline at end of file diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/integrations/other/dhxlayout-integration.md b/i18n/ko/docusaurus-plugin-content-docs/current/integrations/other/dhxlayout-integration.md new file mode 100644 index 00000000..65a9e94a --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/integrations/other/dhxlayout-integration.md @@ -0,0 +1,92 @@ +--- +title: "dhtmlxLayout와의 통합" +sidebar_label: "dhtmlxLayout와의 통합" +--- + +# dhtmlxLayout와의 통합 + +:::warning +설명된 기능은 더 이상 사용되지 않으며 유지 관리되지 않습니다. +::: + +여러 개의 스케줄러를 페이지에 배치하는 좋은 방법은 dhtmlxLayout를 사용하는 것입니다. 이는 아름다운 프레임을 제공할 뿐만 아니라 페이지의 다른 요소와의 올바른 상호 작용을 보장하고, 페이지 크기 변경에 따라 작동하도록 합니다. + +:::note +dhtmlxLayout은 dhtmlxScheduler 라이브러리의 일부가 아닙니다. +레이아웃의 버전에 따라 선택할 수 있는 두 가지 버전이 있으며, 이는 dhtmlxSuite 라이브러리의 버전에 따라 다릅니다. +::- + +## dhtmlxSuite v5+ + +이 버전에서 dhtmlxLayout는 독립적인 제품으로 사용하거나 dhtmlxSuite 라이브러리의 일부로 사용할 수 있습니다. 응용 프로그램에서 dhtmlxLayout v5.X를 사용하려면 [라이선스 구매](https://dhtmlx.com/docs/products/dhtmlxSuite/)를 해야 합니다. + +**To attach a dhtmlxScheduler instance to a layout cell**, use the [attachScheduler()] 메서드를 사용하세요. + +**참고**: 셀에 스케줄러를 연결하면 자동으로 초기화됩니다. 따라서 레이아웃에 배치하기 전에 스케줄러를 구성하십시오. + +~~~js +function init() { + const dhxLayout = new dhtmlXLayoutObject(document.body, "2U"); + + sched1 = Scheduler.getSchedulerInstance(); + sched1.config.multi_day = true; + dhxLayout.cells("a").attachScheduler(new Date(2027,05,30),"week",null,sched1); + sched1.load("/data/units") + + sched2 = Scheduler.getSchedulerInstance(); + dhxLayout.cells("b").attachScheduler(new Date(2027,05,30),"month",null,sched2); + sched2.load("/data/units") +} +~~~ + +[Integration with dhtmlxLayout (dhx_terrace skin, Suite v5.1)](https://docs.dhtmlx.com/scheduler/samples/10_integration/05_dhtmlxlayout_terrace.html) + + +## dhtmlxSuite v6+ + +dhtmlxSuite 6.0부터, dhtmlxLayout은 전체 Suite 라이브러리에서 별도로 얻을 수 없습니다. +이 방식으로 사용하려면 [Suite 6.X 라이브러리](https://dhtmlx.com/docs/products/dhtmlxSuite/#licensing)의 라이선스를 구매해야 합니다. + +dhtmlxScheduler of [version 5.3](whats-new.md#53) and newer implements a common View interface used in dhtmlxSuite v6+ and can be +[attached to any cell directly](https://docs.dhtmlx.com/suite/layout/api/cell/layout_cell_attach_method/): + +~~~js +// create and configure the scheduler instance +scheduler.config.header = [ + "day", + "week", + "month", + "date", + "prev", + "today", + "next" +]; +scheduler.config.multi_day = true; + +// after the scheduler is attached, onSchedulerReady will be fired +scheduler.attachEvent("onSchedulerReady", function () { + requestAnimationFrame(function(){ + // here you can set the initial view and date and load the data + scheduler.setCurrentView(new Date(2027,5,3), "week"); + scheduler.load("../common/events.json"); + }); + +}); + +const layout = new dhx.Layout("layout", { + rows: [{ + id: "scheduler-cell", + header: "Appointment Scheduler", + html:"
" + }] +}); +layout.cell("scheduler-cell").attach(scheduler); +~~~ + + + +### Pay attention + +- 주의: `dhtmlxSuite Layout`은 비동기식이며, `.attach` 호출 직후에 스케줄러가 초기화되지 않습니다. +- 초기화 이후 설정을 위해 onSchedulerReady를 캡처해야 합니다. +- 현재 dhtmlxSuite v6+와 함께 사용할 때 스케줄러 마크업을 지정하는 방법이 없으므로, 탐색 패널의 컨트롤을 지정하기 위해 [header](api/config/header.md) 구성을 사용해야 합니다. \ No newline at end of file diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/integrations/other/jquery-integration.md b/i18n/ko/docusaurus-plugin-content-docs/current/integrations/other/jquery-integration.md new file mode 100644 index 00000000..5b487ea0 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/integrations/other/jquery-integration.md @@ -0,0 +1,35 @@ +--- +title: "jQuery 통합" +sidebar_label: "jQuery 통합" +--- + +# jQuery 통합 + +버전 4.0부터 dhtmlxScheduler는 jQuery와 통합될 수 있습니다. + +표준 스케줄러를 jQuery를 사용하여 아래와 같이 초기화할 수 있습니다: + +~~~js +$(function(){ + $(".myscheduler").dhx_scheduler({ + date:new Date(2027,4,25), + mode:"month" + }); + + scheduler.load("data/events"); +}); +~~~ + +다음과 같습니다: + +- **".myscheduler"** - 컨테이너의 jQuery 호환 CSS 선택자이며, 이 컨테이너에 스케줄러가 생성됩니다( PRO 버전의 경우 한 번에 여러 컨테이너에 스케줄러를 초기화할 수 있습니다 ) +- **dhx_scheduler()** 메서드는 dhtmlxScheduler의 인스턴스를 초기화합니다. 매개변수로 구성 객체를 받습니다: + - **date** - (*Date*) 스케줄러의 초기 날짜(기본값은 현재 날짜) + - **mode** - (*string*) 초기 뷰의 이름(기본값은 "week") + - 다른 구성 매개변수은 ( 보통은 scheduler.config.xxxxx를 통해 설정 ) 이와 같은 방식으로 설정할 수 있습니다 +:::note +jQuery 호출을 통해 초기화된 스케줄러는 표준 스케줄러가 사용하는 동일한 구성과 API를 사용할 수 있습니다 +::: + + +[JQuery integration](https://docs.dhtmlx.com/scheduler/samples/10_integration/06_jquery.html) \ No newline at end of file diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/integrations/react/configuration-props.md b/i18n/ko/docusaurus-plugin-content-docs/current/integrations/react/configuration-props.md new file mode 100644 index 00000000..bc8ec4ca --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/integrations/react/configuration-props.md @@ -0,0 +1,213 @@ +--- +title: ReactScheduler에서 DHTMLX Scheduler 속성 사용 +sidebar_label: 구성 +description: "\"React Scheduler\"의 래퍼 props 전체 참조로, Scheduler 구성, 템플릿, 이벤트 및 데이터 콜백에 매핑됩니다." +--- + +# ReactScheduler에서 DHTMLX Scheduler 속성 사용 + +이 페이지는 **React Scheduler**가 수락하는 props와 그것들이 DHTMLX Scheduler API에 어떻게 매핑되는지 설명합니다. + +## 사용 가능한 속성 + +| 속성 | 유형 | 설명 | +|---|---|---| +| `events` | `Event[]` | 렌더링할 Scheduler 이벤트들. | +| `view` | `"day" \| "week" \| "month" \| "year" \| ...` | 활성 Scheduler 뷰. | +| `date` | `Date` | 선택된 보기를 렌더링하는 데 사용되는 활성 날짜. | +| `templates` | `SchedulerTemplates` | Scheduler 템플릿에 매핑합니다(예: 이벤트 스타일/텍스트 렌더링). | +| `config` | `SchedulerConfig` | Scheduler 구성 옵션에 매핑됩니다. | +| `xy` | `Record` | UI 크기 조정 설정(예: 내장 내비게이션 숨김 `nav_height: 0`). | +| `data` | `{ load?: string \| (() => Promise); save?: string \| SaveHandler; batchSave?: BatchSaveHandler }` | 데이터 로딩 및 변경 처리 콜백/URL. | +| `customLightbox` | `ReactElement \| null` | 내장 Lightbox를 사용자의 React 컴포넌트로 교체합니다. | +| `modals` | `SchedulerModals` | 내장 확인 대화상자를 재정의합니다(예: 이벤트 삭제 확인). | +| `filter` | `(event: Event) => boolean` | Scheduler에 표시될 이벤트를 필터링합니다. | +| `on` props | `(...args) => any` | Scheduler 이벤트에 매핑된 이벤트 핸들러들(`onViewChange`, `onBeforeLightbox` 등). | + +## 기본 예제 + +```tsx +import ReactScheduler, { + type Event, + type SchedulerConfig, + type SchedulerTemplates, +} from "@dhtmlx/trial-react-scheduler"; +import "@dhtmlx/trial-react-scheduler/dist/react-scheduler.css"; + +const events: Event[] = [ + { + id: 1, + text: "Planning", + start_date: new Date("2025-12-08T09:00:00Z"), + end_date: new Date("2025-12-08T10:00:00Z"), + }, +]; + +const templates: SchedulerTemplates = { + event_class: (_start, _end, event) => event.classname || "", +}; + +const config: SchedulerConfig = { + first_hour: 6, + last_hour: 22, + hour_size_px: 60, +}; + +export default function Demo() { + return ( + + ); +} +``` + +## 데이터 속성 (`load`, `save`, `batchSave`) + +`data` 속성을 사용하여 Scheduler를 백엔드나 React에서 관리하는 상태에 연결합니다. + +### 백엔드 URL 사용하기 + +```tsx + +``` + +### 콜백 핸들러 사용하기 + +```tsx + { + if (entity !== "event") return; + + if (action === "create") { + const response = await fetch("/api/events", { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify(item), + }); + + const created = await response.json(); + return { id: created.id }; + } + + if (action === "update") { + await fetch(`/api/events/${id}`, { + method: "PUT", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify(item), + }); + } + + if (action === "delete") { + await fetch(`/api/events/${id}`, { method: "DELETE" }); + } + }, + }} +/> +``` + +## 템플릿 및 구성 매핑 + +`templates`는 Scheduler 템플릿 함수에 매핑되고, `config`는 Scheduler 구성 옵션에 매핑됩니다. + +```tsx + + event.classname === "important" ? "event-important" : "", + }} + config={{ + first_hour: 7, + last_hour: 21, + time_step: 15, + }} +/> +``` + +## 이벤트 속성 + +Scheduler 이벤트를 React props로 전달할 수 있습니다. + +```tsx + { + console.log("View changed:", mode, date); + }} + onBeforeLightbox={(eventId) => { + console.log("Opening editor for", eventId); + return true; + }} +/> +``` + +지원되는 이벤트 및 콜백의 전체 목록은 다음을 참조하십시오: + +- [Scheduler events overview](api/overview/events_overview.md) +- [Scheduler methods overview](api/overview/methods_overview.md) +- [Scheduler properties overview](api/overview/properties_overview.md) + +## `customLightbox` 및 `modals` + +내장 이벤트 편집기를 사용자의 React 컴포넌트로 대체하려면 `customLightbox`를 사용합니다. +사용자 지정 확인 대화상자가 필요하다면 `modals`를 사용합니다. + +```tsx +} + modals={{ + onBeforeEventDelete: ({ event, callback }) => { + if (window.confirm(`Delete "${event.text}"?`)) { + callback(); + } + }, + }} +/> +``` + +## 이벤트 필터링 + +```tsx + event.text.toLowerCase().includes(search.toLowerCase())} +/> +``` + +## `ref`를 통한 직접 API 접근 + +Prop로 다루지 않는 사용 사례가 있다면, `ref`를 사용하여 기본 Scheduler 인스턴스에 직접 접근하십시오. + +```tsx +import { useEffect, useRef } from "react"; +import ReactScheduler, { type ReactSchedulerRef } from "@dhx/react-scheduler"; + +export default function DirectApiDemo() { + const schedulerRef = useRef(null); + + useEffect(() => { + const scheduler = schedulerRef.current?.instance; + if (!scheduler) return; + + console.log(scheduler.getEvents()); + scheduler.setCurrentView(new Date()); + }, []); + + return ; +} +``` + +## 관련 페이지 + +- [React Scheduler 개요](integrations/react/overview.md) +- [데이터 바인딩 및 상태 관리 기본](integrations/react/state/state-management-basics.md) +- [React Scheduler 빠른 시작](integrations/react/quick-start.md) \ No newline at end of file diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/integrations/react/copyright.md b/i18n/ko/docusaurus-plugin-content-docs/current/integrations/react/copyright.md new file mode 100644 index 00000000..7c67aae4 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/integrations/react/copyright.md @@ -0,0 +1,114 @@ +--- +title: "제3자 라이선스" +sidebar_label: "제3자 라이선스" +--- + +# 제3자 라이선스 + +이 페이지에는 **DHTMLX React Scheduler**의 일부로 배포되는 구성 요소에 대한 제3자 소프트웨어 고지 및 라이선스 조건이 수록되어 있습니다. + +DHTMLX React Scheduler는 DHTMLX Scheduler JavaScript 라이브러리를 포함하는 번들 배포판입니다. 그 결과, DHTMLX Scheduler와 함께 재배포되는 모든 제3자 구성 요소도 React Scheduler에 적용됩니다. + +이 페이지는 또한 React 래퍼 및 선택적 React 샘플 애플리케이션에 특화된 제3자 구성 요소를 추가로 나열합니다. + +## DHTMLX React Scheduler에 번들로 포함된 구성 요소 + +### Inter Font + +Copyright 2020 The Inter Project Authors ([https://github.com/rsms/inter](https://github.com/rsms/inter)) + +이 Font Software는 SIL Open Font License, Version 1.1의 적용을 받습니다. +이 라이선스는 아래에 복사되어 있으며 FAQ도 함께 제공됩니다: +[https://openfontlicense.org](https://openfontlicense.org) + +#### SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 + +PREAMBLE +Open Font License(OFL)의 목표는 전 세계적으로 협력적 글꼴 프로젝트의 개발을 촉진하고, 학술 및 언어학 커뮤니티의 글꼴 창작 활동을 지원하며, 다른 사람과의 협력 속에서 글꼴을 공유하고 개선할 수 있는 자유롭고 열린 프레임워크를 제공하는 것입니다. + +OFL은 라이선스된 글꼴을 본인 소유의 글꼴이 아닌 한도에서 자유롭게 사용, 연구, 수정 및 재배포할 수 있도록 허용합니다. 글꼴과 파생 저작물이 포함된 경우에도, 파생 저작물에서 특정 예약된 이름을 사용하지 않는 범위에서 소프트웨어와 함께 번들링, 임베딩, 재배포 및/또는 판매될 수 있습니다. 글꼴과 파생 저작물은 다른 종류의 라이선스로 공개될 수 없습니다. 글꼴이 이 라이선스로 남아 있어야 한다는 요건은 글꼴이나 그 파생물들을 사용하여 작성된 어떤 문서에도 적용되지 않습니다. + +DEFINITIONS +"Font Software"는 저작권 보유자에 의해 이 라이선스 하에 공개되고 이에 대해 명확히 표시된 파일 세트를 말합니다. 여기에는 소스 파일, 빌드 스크립트 및 문서가 포함될 수 있습니다. + +"Reserved Font Name"은 저작권 고지문 뒤에 특정으로 지정된 이름을 말합니다. + +"Original Version"은 저작권 보유자에 의해 배포된 Font Software 구성요소의 모음을 말합니다. + +"Modified Version"은 원본 버전의 구성요소를 부분적이거나 전체적으로 추가, 삭제 또는 치환하거나 형식을 변경하거나 새로운 환경으로 포팅하는 등의 파생물을 말합니다. + +"Author"는 Font Software에 기여한 디자이너, 엔지니어, 프로그래머, 기술 작가 또는 기타 사람을 말합니다. + +PERMISSION & CONDITIONS +다음의 조건들에 따라 Font Software를 수정 여부에 관계없이 자유롭게 사용할 수 있도록 허가됩니다. + +1) 원본 또는 수정된 버전의 Font Software 자체를 단독으로 판매할 수 없습니다. + +2) Font Software의 원본 또는 수정된 버전은 다른 소프트웨어와 함께 번들링, 재배포 및/또는 판매될 수 있으며, 각 사본에 위의 저작권 고지와 이 라이선스가 포함되어야 합니다. 이는 텍스트 파일로서, 사람에게 읽기 쉬운 헤더이거나 텍스트나 이진 파일의 기계가 읽을 수 있는 메타데이터 필드 내에 포함될 수 있습니다. + +3) Reserved Font Name 중 어떤 것도 수정된 버전에 사용될 수 없으며, 이는 해당 저작권 보유자에게 명시적 서면 허가를 받은 경우에만 예외로 인정됩니다. 이 제한은 주로 사용자에게 제시되는 기본 글꼴 이름에 대해서만 적용됩니다. + +4) 저작권 보유자 또는 글꼴 저작자의 이름은 수정된 버전을 홍보, 보증 또는 광고하는 데 사용할 수 없으며, 다만 저작권 보유자 및 저작자의 기여를 인정하는 경우나 그들의 명시적 서면 허가가 있는 경우에 한합니다. + +5) Font Software가 수정되었든 그렇지 않든, 부분적이든 전체든 이 라이선스 하에 완전히 배포되어야 하며, 다른 라이선스 하에서 배포될 수 없습니다. 글꼴이 이 라이선스로 남아 있어야 한다는 요건은 Font Software를 사용하여 작성된 문서에 적용되지 않습니다. + +TERMINATION +위의 조건 중 어느 하나라도 충족되지 않으면 이 라이선스는 무효가 됩니다. + +DISCLAIMER +FONT SOFTWARE는 "있는 그대로" 제공되며, 명시적이든 묵시적이든 어떤 보증도 하지 않습니다. 상업성, 특정 목적에의 적합성, 비침해 등에 관한 어떠한 명시적이거나 묵시적인 보증도 포함하지 않으며, 저작권, 특허, 상표 또는 기타 권리에 대한 침해로부터의 책임도 지지 않습니다. 계약상 책임, 불법행위 또는 기타 원인으로 인한 청구, 손해 또는 기타 책임은 Font Software의 사용 여부나 Font Software를 이용한 거래에서 발생하더라도 저작권 보유자나 저작권 소유자는 책임지지 않습니다. + +### lodash-es + +React Scheduler 래퍼는 런타임 기능을 위해 **[lodash-es](https://www.npmjs.com/package/lodash-es)** 를 번들에 포함합니다. + +저작권 OpenJS Foundation 및 기타 기여자 https://openjsf.org/ + +Underscore.js를 기반으로 하며 저작권자 Jeremy Ashkenas, DocumentCloud 및 Investigative Reporters & Editors http://underscorejs.org/ + +이 소프트웨어는 다수의 개인이 자발적으로 기여한 결과물입니다. 정확한 기여 이력은 아래의 수정 이력에서 확인할 수 있습니다: https://github.com/lodash/lodash + +다음 라이선스는 아래에 문서화된 내용 외에 이 소프트웨어의 모든 부분에 적용됩니다: + +#### MIT 라이선스 + +다음의 권한이 본 소프트웨어 및 관련 문서 파일("소프트웨어")에 대해 부여됩니다: +소프트웨어를 무상으로 취득한 모든 사람은 소프트웨어를 제한 없이 다룰 수 있으며, 사용, 복사, 수정, 병합, 게시, 배포, 재라이선스 및/또는 소프트웨어의 복사본을 판매할 수 있습니다. 또한 소프트웨어가 제공하는 사람들에게 소프트웨어를 제공하는 사람도 동일하게 허용합니다. 단, 아래의 조건을 따라야 합니다. + +1) 원본 또는 수정된 소프트웨어의 모든 사본에는 위 저작권 고지 및 이 허가 고지가 포함되어야 합니다. + +2) 소프트웨어는 "있는 그대로" 제공되며, 명시적이거나 묵시적인 어떠한 보증도 하지 않으며, 상품성이나 특정 목적에의 적합성, 비침해성 등에 대한 보증도 포함하지 않습니다. 저자나 저작권 보유자는 계약상, 불법행위상, 기타 모든 경우에 소프트웨어의 이용으로 발생하는 손해에 대해 책임지지 않습니다. + +==== + +샘플 코드에 대한 저작권 및 관련 권리는 CC0로 포기됩니다. 샘플 코드는 문서의 산문 부분에 표시된 모든 소스 코드를 의미합니다. + +CC0: http://creativecommons.org/publicdomain/zero/1.0/ + +==== + +node_modules 및 vendor 디렉터리에 위치한 파일은 이 소프트웨어에서 사용하는 외부 유지 관리 라이브러리로, 자체 라이선스를 가지며 위의 조건과 다를 수 있습니다. 사용자는 해당 라이선스를 읽어보길 권장합니다. + +## React Scheduler 샘플 애플리케이션에서 사용되는 구성 요소 + +DHTMLX React Scheduler는 선택적 샘플 애플리케이션과 함께 배포될 수 있습니다. 아래의 제3자 구성 요소는 **샘플 애플리케이션에서만 사용되며** React Scheduler 라이브러리 자체의 일부가 아닙니다. + +이 의존성은 샘플 애플리케이션의 `package.json`에 나와 있습니다. + +### React 생태계 및 UI 라이브러리 + +샘플 애플리케이션은 다음과 같은 제3자 라이브러리를 사용합니다: + +- React +- React DOM +- Ant Design +- Material UI +- Emotion +- React Router +- Day.js +- React Draggable +- Base UI components + +이 라이브러리들은 각 저자에 의해 명시된 해당 오픈 소스 라이선스(MIT, Apache License 2.0 또는 유사한 관대 라이선스)로 라이선스되어 있습니다. + +샘플 애플리케이션은 시연 목적의 예시로만 제공됩니다. 이 구성 요소들에 대한 라이선스 의무는 샘플 애플리케이션이 재배포되거나 수정될 때에만 적용됩니다. \ No newline at end of file diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/integrations/react/firebase-integration.md b/i18n/ko/docusaurus-plugin-content-docs/current/integrations/react/firebase-integration.md new file mode 100644 index 00000000..18ee236f --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/integrations/react/firebase-integration.md @@ -0,0 +1,210 @@ +--- +title: 리액트 스케줄러와 Firebase 통합 +sidebar_label: Firebase 빠른 시작 +description: "Firebase Firestore로 실시간 협업이 가능하도록 실시간 동기화되는 리액트 스케줄러를 구축합니다." +--- + +# 리액트 스케줄러와 Firebase 통합 + +본 튜토리얼은 **리액트 스케줄러**를 **Firebase Firestore**에 연결하여 실시간 다중 사용자 동기화를 구현하는 방법을 보여줍니다. + +다음과 같은 요소를 구축합니다: + +- React 상태(`events`)로 뒷받침되는 Scheduler 페이지 +- 실시간 업데이트를 위한 Firestore 리스너 +- 생성/수정/삭제를 위한 `data.save` 브리지 + +## 1단계. 프로젝트 생성 + +```bash +npm create vite@latest react-scheduler-firebase -- --template react-ts +cd react-scheduler-firebase +npm install firebase +``` + +다음 문서의 [React Scheduler 설치 가이드](integrations/react/installation.md)에 따라 React Scheduler를 설치합니다. + +평가용: + +```bash +npm install @dhtmlx/trial-react-scheduler +``` + +전문 패키지의 경우 trial 임포트를 `@dhx/react-scheduler`로 교체합니다. + +## 2단계. Firebase 구성 + +Firebase 콘솔에서: + +1. 프로젝트를 생성합니다. +2. **Firestore 데이터베이스**를 활성화합니다. +3. 웹 앱을 등록하고 Firebase 구성을 복사합니다. + +.env 파일 추가: + +```env +VITE_FIREBASE_CONFIGURATION={"apiKey":"YOUR_API_KEY","authDomain":"YOUR_AUTH_DOMAIN","projectId":"YOUR_PROJECT_ID","storageBucket":"YOUR_STORAGE_BUCKET","messagingSenderId":"YOUR_MESSAGING_SENDER_ID","appId":"YOUR_APP_ID"} +``` + +`src/firebase.ts` 생성: + +```ts +import { initializeApp } from "firebase/app"; +import { collection, getFirestore, query } from "firebase/firestore"; + +const firebaseConfig = JSON.parse(import.meta.env.VITE_FIREBASE_CONFIGURATION); + +const app = initializeApp(firebaseConfig); +const db = getFirestore(app); + +const eventsCollection = collection(db, "events"); +const eventsQuery = query(eventsCollection); + +export { db, eventsCollection, eventsQuery }; +``` + +## 3단계. 시드 및 타입 준비 + +`src/seed/data.ts` 생성: + +```ts +import type { Event as SchedulerEvent } from "@dhtmlx/trial-react-scheduler"; + +export const seedEvents: SchedulerEvent[] = [ + { + id: "event_1", + text: " Planning", + start_date: "2025-12-08T09:00:00Z", + end_date: "2025-12-08T10:00:00Z", + }, + { + id: "event_2", + text: "Client call", + start_date: "2025-12-08T11:00:00Z", + end_date: "2025-12-08T12:00:00Z", + }, +]; +``` + +## 4단계. Scheduler 렌더링 및 이벤트 로드 + +`src/components/Scheduler.tsx` 생성: + +```tsx +import { useEffect, useMemo, useState } from "react"; +import ReactScheduler, { type Event as SchedulerEvent } from "@dhtmlx/trial-react-scheduler"; +import "@dhtmlx/trial-react-scheduler/dist/react-scheduler.css"; + +import { + addDoc, + deleteDoc, + doc, + getDocs, + onSnapshot, + updateDoc, + type QueryDocumentSnapshot, + type QuerySnapshot, +} from "firebase/firestore"; + +import { db, eventsCollection, eventsQuery } from "../firebase"; + +const mapDoc = (snap: QueryDocumentSnapshot): SchedulerEvent => { + const data = snap.data(); + return { + ...data, + id: snap.id, + } as SchedulerEvent; +}; + +export default function SchedulerWithFirebase() { + const [events, setEvents] = useState([]); + + useEffect(() => { + let mounted = true; + + (async () => { + const initial = await getDocs(eventsQuery); + if (!mounted) return; + setEvents(initial.docs.map(mapDoc)); + })(); + + const unsubscribe = onSnapshot(eventsQuery, (snapshot: QuerySnapshot) => { + const nextEvents = snapshot.docs.map(mapDoc); + setEvents(nextEvents); + }); + + return () => { + mounted = false; + unsubscribe(); + }; + }, []); + + const data = useMemo( + () => ({ + save: async ( + entity: string, + action: string, + raw: SchedulerEvent, + id: string | number + ) => { + if (entity !== "event") return; + + if (action === "create") { + const created = await addDoc(eventsCollection, { + ...raw, + id: undefined, + }); + + return { id: created.id }; + } + + const targetId = String(raw?.id ?? id); + const targetRef = doc(db, "events", targetId); + + if (action === "update") { + await updateDoc(targetRef, { ...raw }); + return; + } + + if (action === "delete") { + await deleteDoc(targetRef); + } + }, + }), + [] + ); + + return ( +
+ +
+ ); +} +``` + +## 5단계. 앱에 마운트 + +`src/App.tsx`를 교체합니다: + +```tsx +import SchedulerWithFirebase from "./components/Scheduler"; + +export default function App() { + return ; +} +``` + +## 동기화에 대한 참고사항 + +- Firestore `onSnapshot`은 연결된 모든 클라이언트를 실시간으로 동기화합니다. +- `data.save`에서 `{ id: created.id }`를 반환하면 Scheduler가 임시 ID를 Firestore 문서 ID로 교체합니다. +- 생산 배포 전 보안 규칙을 엄격하게 유지하십시오. + +## 관련 페이지 + +- [데이터 바인딩 및 상태 관리 기본](integrations/react/state/state-management-basics.md) +- [리액트 스케줄러 개요](integrations/react/overview.md#bindingdata) +- [서버 통합](guides/server-integration.md) \ No newline at end of file diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/integrations/react/index.md b/i18n/ko/docusaurus-plugin-content-docs/current/integrations/react/index.md new file mode 100644 index 00000000..0cc0770b --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/integrations/react/index.md @@ -0,0 +1,45 @@ +--- +title: "React Scheduler" +sidebar_label: React Scheduler +description: "공식 래퍼를 사용하여 React에서 DHTMLX Scheduler를 설치, 구성 및 사용하는 방법." +image: /img/frameworks/react.png +--- + +React Scheduler는 DHTMLX Scheduler의 공식 React 래퍼입니다. 전체 구성 API를 계속 지원하는 한편 Scheduler 차트를 React 컴포넌트로 사용할 수 있습니다. + +전체 설명이 필요하다면 [개요](integrations/react/overview.md)에서 시작하십시오. + +## 시작하기 + +래퍼를 처음 사용하는 경우, 아래 순서를 따르십시오: + +1. [설치](integrations/react/installation.md) - React Scheduler의 평가판(public npm) 또는 Professional(private npm) 버전을 선택하세요. +2. [빠른 시작](integrations/react/quick-start.md) - 첫 차트를 렌더링하고 설정을 확인합니다. +3. [구성](integrations/react/configuration-props.md) - 프롭스, 템플릿 및 이벤트 핸들러를 다루는 방법을 알아봅니다. + +## 프레임워크 통합 + +앱이 메타 프레임워크로 구축된 경우, 프레임워크에 맞는 설정을 위한 아래 가이드를 사용하십시오: + +- [Next.js](integrations/react/nextjs.md) - 클라이언트 컴포넌트 설정 및 일반적인 SSR 제약 +- [Remix](integrations/react/remix.md) - 라우트 기반 설정 및 통합 노트 + +## 데이터 바인딩 모델 선택 + +React Scheduler는 두 가지 데이터 바인딩 방식을 지원합니다: + +- **React가 관리하는 데이터**(대부분의 React 앱에 권장). + 이벤트를 React나 상태 관리 도구에 보관하고, 이를 프롭스로 전달하며, 업데이트를 `data.save`/`data.batchSave` 콜백을 통해 처리합니다. + +- **Scheduler가 관리하는 데이터**(전문화된 경우 또는 성능에 민감한 경우에 유용). + 데이터를 한 번 초기화하고 Scheduler(및 백엔드)가 데이터 수명 주기를 소유하도록 합니다. React는 각 변경 후 업데이트된 props를 다시 적용하지 않습니다. + +두 가지 접근 방식과 그 트레이드오프를 이해하려면 [데이터 바인딩 및 상태 관리 기초](integrations/react/state/state-management-basics.md)를 읽어보십시오. + +## 데이터 및 상태 튜토리얼 + +상태 관리 라이브러리를 사용하는 경우, [데이터 및 상태 관리](/integrations/react/state/)의 가이드는 각 라이브러리(Redux Toolkit, Zustand, MobX 등)에 대해 동일한 통합 패턴을 구현하고 있으며 Firebase와의 실시간 동기화도 제공합니다. + +## 예제 및 평가 리소스 + +React Scheduler를 평가 중인 경우, 평가 페이지에서 평가 기간 동안 기술 지원에 접근할 수 있습니다. [설치](integrations/react/installation.md)를 참조하십시오. \ No newline at end of file diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/integrations/react/installation.md b/i18n/ko/docusaurus-plugin-content-docs/current/integrations/react/installation.md new file mode 100644 index 00000000..bd3bef58 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/integrations/react/installation.md @@ -0,0 +1,77 @@ +--- +title: React Scheduler 설치 +sidebar_label: 설치 +description: "npm을 통해 React Scheduler의 평가 버전 또는 상용 버전을 설치하는 방법." +--- + +# React Scheduler 설치 + +React Scheduler는 두 가지 배포판으로 제공됩니다: + +1. **평가 버전**(Evaluation version) 공개 npm에서 이용 가능하며, 체험 워터마크가 포함되고 기술 지원에 접근할 수 있는 무료 평가 기간과 함께 사용할 수 있습니다. +2. **Professional (상용) 버전** 비공개 DHTMLX npm 저장소에서 이용 가능하며 프로덕션 사용을 위한 것입니다. + +두 패키지는 동일한 API를 공유합니다. + +## 평가 버전 설치(공개 npm) + +평가 빌드는 npm에서 [@dhtmlx/trial-react-scheduler](https://www.npmjs.com/package/@dhtmlx/trial-react-scheduler)로 이용 가능합니다: + +~~~bash +npm install @dhtmlx/trial-react-scheduler +~~~ + +또는 Yarn으로: + +~~~bash +yarn add @dhtmlx/trial-react-scheduler +~~~ + +이 빌드는 완전히 작동하지만, 라이브러리가 평가 모드로 실행 중임을 나타내는 메시지가 표시됩니다. + +### 선택 사항: 전체 평가 기간 시작(권장) + +테스트 패키지는 제한 없이 설치되지만, 공식 평가를 웹사이트에서 시작할 수도 있습니다 +[https://dhtmlx.com/docs/products/dhtmlxScheduler-for-React/download.shtml](https://dhtmlx.com/docs/products/dhtmlxScheduler-for-React/download.shtml). + +정식 평가를 시작하면 평가 기간 동안 무료 기술 지원을 받을 수 있습니다. + +**오프라인 예제 다운로드(zip)** + +평가 양식에는 오프라인에서 사용할 수 있는 예제가 포함된 ZIP 파일도 함께 제공됩니다. + +또한 공식 GitHub에서 추가 예제 및 데모 프로젝트를 확인할 수 있습니다. [React Scheduler Demos on GitHub](https://github.com/DHTMLX/?q=react-scheduler&type=all&language=&sort=). + +## Professional 버전(비공개 npm) + +Professional 버전은 프로덕션 애플리케이션에 사용되며 상용 라이선스 및 기술 지원에 대한 완전한 액세스를 포함합니다. + +상용 라이선스를 얻으면 [고객 영역](https://dhtmlx.com/clients/)에서 개인 npm 자격 증명을 생성할 수 있습니다. + +로그인/비밀번호를 생성한 후, npm을 구성합니다: + +~~~bash +npm config set @dhx:registry=https://npm.dhtmlx.com +npm login --registry=https://npm.dhtmlx.com --scope=@dhx +~~~ + +그런 다음 Professional 패키지를 설치합니다: + +~~~bash +npm install @dhx/react-scheduler +~~~ + +또는 Yarn으로: + +~~~bash +yarn add @dhx/react-scheduler +~~~ + +## 다음 단계 + +설치 후에는 다음을 계속 진행합니다: + +- [빠른 시작](integrations/react/quick-start.md) +- [개요](integrations/react/overview.md) +- [데이터 바인딩 및 상태 관리 기초](integrations/react/state/state-management-basics.md) +- [프레임워크 가이드](/category/framework-integrations/) \ No newline at end of file diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/integrations/react/js-scheduler-react.md b/i18n/ko/docusaurus-plugin-content-docs/current/integrations/react/js-scheduler-react.md index 52ec4e40..dc2f8492 100644 --- a/i18n/ko/docusaurus-plugin-content-docs/current/integrations/react/js-scheduler-react.md +++ b/i18n/ko/docusaurus-plugin-content-docs/current/integrations/react/js-scheduler-react.md @@ -1,94 +1,92 @@ ---- -title: "dhtmlxScheduler와 React" -sidebar_label: "dhtmlxScheduler와 React" +--- +title: "React와 함께하는 dhtmlxScheduler" +sidebar_label: "React와 함께하는 dhtmlxScheduler" --- -# dhtmlxScheduler와 React +# React와 함께하는 dhtmlxScheduler -이 가이드는 [React](https://react.dev/)의 기본 개념과 패턴에 대한 이해가 있다고 가정합니다. React가 처음이라면 [React 공식 문서](https://legacy.reactjs.org/docs/getting-started.html)에서 입문 튜토리얼을 먼저 참고하는 것이 좋습니다. +이 문서를 사용하려면 [React](https://react.dev/)의 기본 개념과 패턴에 익숙해야 합니다. 익히지 않았다면 시작하기 튜토리얼을 위한 [React 문서](https://react.dev/learn)를 참조하십시오. -DHTMLX Scheduler는 React와 잘 호환됩니다. 관련 예제는 GitHub에서 확인할 수 있습니다: [DHTMLX Scheduler with React Demo](https://github.com/DHTMLX/react-scheduler-demo). +DHTMLX Scheduler는 React와 호환됩니다. GitHub에서 해당 예제를 확인할 수 있습니다: [DHTMLX Scheduler with React Demo](https://github.com/DHTMLX/react-scheduler-demo). -## 프로젝트 생성 +## 프로젝트 만들기 -프로젝트를 생성하기 전에 [Node.js](https://nodejs.org/en/)가 설치되어 있는지 확인하세요. +새 프로젝트를 만들기 시작하기 전에 [Node.js](https://nodejs.org/en/)를 설치해야 합니다. -간단한 React 프로젝트를 설정하려면 다음 명령어를 실행하세요: +다음 명령으로 기본 React 프로젝트를 만들 수 있습니다: -~~~ +~~~ npx create-vite my-react-scheduler-app --template react ~~~ ### 의존성 설치 -다음으로, 앱 디렉토리로 이동합니다. 이 예제에서는 **my-react-scheduler-app**을 사용합니다: +다음으로 앱 디렉터리로 이동합니다. 프로젝트를 **my-react-scheduler-app**로 설정하고 실행합시다: -~~~ +~~~ cd my-react-scheduler-app ~~~ -그런 다음, 원하는 패키지 매니저를 사용하여 의존성을 설치하고 개발 서버를 시작하세요: +그 후 의존성을 설치하고 개발 서버를 시작해야 합니다. 이를 위해 패키지 관리자를 사용해야 합니다: -- yarn을 사용하는 경우: +- yarn을 사용하는 경우 아래 명령을 실행합니다: -~~~ +~~~ yarn install yarn dev ~~~ -- npm을 사용하는 경우: +- npm을 사용하는 경우 아래 명령을 실행합니다: -~~~ +~~~ npm install npm run dev ~~~ -React 프로젝트가 **[http://localhost:5173](http://localhost:5173)** 에서 실행되고 있어야 합니다. +이제 React 프로젝트가 `http://localhost:5173` 에서 실행 중이어야 합니다. ![Scheduler React app running](/img/scheduler_react_app_run.png) -## Scheduler 생성 +## Scheduler 만들기 -DHTMLX Scheduler를 추가하려면, 먼저 명령줄에서 **Ctrl+C**를 눌러 앱을 중지하세요. 이후 Scheduler 패키지를 설치합니다. +이제 DHTMLX Scheduler 코드를 가져와야 합니다. 먼저 명령줄에서 **Ctrl+C**를 눌러 앱을 중지한 뒤 Scheduler 패키지 설치를 진행할 수 있습니다. -## 1단계. 패키지 설치 +### 1단계. 패키지 설치 -라이브러리의 PRO 버전은 당사 프라이빗 저장소에서 **npm/yarn**을 통해 제공됩니다. 접근 방법은 -[이 안내](guides/installation.md#npm---evaluation-and-pro-versions)를 참고하세요. +라이브러리의 PRO 버전은 우리의 프라이빗 저장소에서 **npm/yarn** 설치로 이용 가능합니다. 아래 [지침](guides/installation.md#npm---evaluation-and-pro-versions)을 따라 접근 권한을 얻으십시오. -Scheduler의 Evaluation 버전을 받았다면, 다음 명령어 중 하나로 설치하세요: +Scheduler의 Evaluation 버전을 얻은 후, 아래 명령으로 설치할 수 있습니다: -- npm 사용 시: +- npm의 경우: -~~~ +~~~ npm install @dhx/trial-scheduler ~~~ -- yarn 사용 시: +- yarn의 경우: -~~~ +~~~ yarn add @dhx/trial-scheduler ~~~ -또는, 라이브러리의 zip 패키지는 **npm** 모듈 구조이므로 -[로컬 폴더에서 설치](guides/installation.md#installing-the-package-from-a-local-folder)할 수도 있습니다. +또는 라이브러리의 zip 패키지가 **npm** 모듈로 구성되어 있기 때문에, [로컬 폴더에서 설치](guides/installation.md#installing-the-package-from-a-local-folder) 할 수 있습니다. -## 2단계. 컴포넌트 생성 +### 2단계. 컴포넌트 생성 -이제 React 컴포넌트를 만들어 앱에 Scheduler를 추가합니다. ***src/components/Scheduler*** 폴더를 만들고, 그 안에 ***Scheduler.jsx***, ***Scheduler.css***, ***index.js*** 파일을 생성하세요. +이제 애플리케이션에 Scheduler를 추가하기 위한 React 컴포넌트를 생성해야 합니다. ***src/components/Scheduler*** 폴더를 만들어 봅시다. 여기에서 ***Scheduler.jsx***, ***Scheduler.css***, 그리고 ***index.js*** 파일을 생성합니다. -먼저 *scheduler-container* 스타일을 적용할 ***Scheduler.css***를 만듭니다: +***Scheduler.css*** 파일을 만들고 *scheduler-container*에 대한 스타일을 추가합니다: -~~~js title="src/components/Scheduler/Scheduler.css" +~~~ css title="src/components/Scheduler/Scheduler.css" .scheduler-container { height: 100vh; width: 100vw; } ~~~ -Scheduler 컨테이너가 body 전체를 채우도록 하려면, ***src*** 폴더의 ***App.css***에서 기본 스타일을 제거하고 다음을 추가하세요: +Scheduler 컨테이너가 바디의 전체 공간을 차지하도록 하려면 ***src*** 폴더에 위치한 기본 스타일 파일인 App.css의 기본 스타일을 제거하고 아래의 스타일을 추가해야 합니다: -~~~ +~~~ css #root { margin: 0; padding: 0; @@ -97,39 +95,39 @@ Scheduler 컨테이너가 body 전체를 채우도록 하려면, ***src*** 폴 } ~~~ -그런 다음 ***index.js*** 파일에 아래 내용을 추가합니다: +그리고 아래 내용으로 ***index.js*** 파일을 추가합니다: -~~~js title="src/components/Scheduler/index.js" +~~~ js title="src/components/Scheduler/index.js" import Scheduler from './Scheduler'; import './Scheduler.css'; export default Scheduler; ~~~ -### 소스 파일 임포트 +### 소스 파일 가져오기 -***Scheduler.jsx***를 열고 Scheduler 소스 파일을 임포트합니다. 패키지 설치 방식에 따라 임포트 경로가 달라질 수 있습니다: +새로 생성한 ***Scheduler.jsx*** 파일을 열고 Scheduler 소스 파일을 가져옵니다. 참고로: -- 로컬 폴더에서 설치한 경우: +- 로컬 폴더에서 Scheduler 패키지를 설치한 경우 가져오기 경로는 아래와 같이 보일 수 있습니다: -~~~js title="Scheduler.jsx" +~~~ js title="Scheduler.jsx" import { Scheduler } from 'dhtmlx-scheduler'; import 'dhtmlx-scheduler/codebase/dhtmlxscheduler.css'; ~~~ -- trial 버전 사용 시: +- Trial 버전을 설치하기로 선택한 경우 가져오기 경로는 아래와 같이 될 수 있습니다: -~~~js title="Scheduler.jsx" +~~~ js title="Scheduler.jsx" import { Scheduler } from '@dhx/trial-scheduler'; import '@dhx/trial-scheduler/codebase/dhtmlxscheduler.css'; ~~~ -이 튜토리얼에서는 **trial** 버전을 사용합니다. +이 튜토리얼에서는 **trial** 버전의 Scheduler를 사용할 것입니다. ### 컨테이너 설정 및 Scheduler 추가 -Scheduler를 페이지에 렌더링하려면 컨테이너를 설정해야 합니다. ***Scheduler.jsx***에 다음 코드를 작성하세요: +페이지에 Scheduler를 표시하려면 컴포넌트를 렌더링할 컨테이너를 설정해야 합니다. 아래 코드로 ***Scheduler.jsx*** 파일을 생성합니다: -~~~js title="src/components/Scheduler/Scheduler.jsx" +~~~ js title="src/components/Scheduler/Scheduler.jsx" import { useEffect, useRef } from "react"; import { Scheduler } from "@dhx/trial-scheduler"; import "@dhx/trial-scheduler/codebase/dhtmlxscheduler.css"; @@ -164,9 +162,9 @@ export default function SchedulerView( ) { ## 3단계. 앱에 Scheduler 추가 -이제 Scheduler 컴포넌트를 앱에 추가합니다. ***src/App.jsx***를 열고 기본 내용을 다음으로 교체하세요: +이제 컴포넌트를 앱에 추가할 시간입니다. ***src/App.jsx***를 열고 기본 콘텐츠 대신 *Scheduler* 컴포넌트를 아래 코드로 삽입하여 사용합니다: -~~~js title="src/App.jsx" +~~~ js title="src/App.jsx" import Scheduler from "./components/Scheduler"; import "./App.css"; @@ -180,15 +178,15 @@ function App() { export default App; ~~~ -앱을 다시 실행하면 빈 Scheduler가 페이지에 표시됩니다: +그 후 앱을 시작하면 페이지에 빈 Scheduler가 표시되어야 합니다: ![Scheduler React init](/img/scheduler_init.png) ## 4단계. 데이터 제공 -Scheduler에 일정을 표시하려면 데이터셋을 제공해야 합니다. ***src*** 디렉토리에 ***data.js***를 생성하고 몇 가지 이벤트를 추가하세요: +Scheduler에 데이터를 추가하려면 데이터 세트를 제공해야 합니다. ***src/*** 디렉터리에 ***data.js*** 파일을 만들고 데이터를 추가합시다: -~~~js title="src/data.js" +~~~ js title="src/data.js" export function getData() { const data = [ { @@ -208,9 +206,9 @@ export function getData() { } ~~~ -그런 다음, 이 데이터를 ***App.jsx***에서 Scheduler 컴포넌트에 props로 전달합니다: +그리고 ***App.jsx***에서 Scheduler 컴포넌트에 props(데이터)를 전달해야 합니다: -~~~js title="App.jsx" +~~~ js title="App.jsx" import { getData } from "./data.js"; import Scheduler from "./components/Scheduler"; import "./App.css"; @@ -225,9 +223,9 @@ function App() { export default App; ~~~ -Scheduler 컴포넌트 내에서 **scheduler.parse()** 메서드에 props를 사용하세요: +그리고 Scheduler 컴포넌트의 **scheduler.parse()** 메서드에서 props를 사용합니다: -~~~js title="Scheduler.jsx" +~~~ js title="Scheduler.jsx" import { useEffect, useRef } from "react"; import { Scheduler } from "@dhx/trial-scheduler"; import "@dhx/trial-scheduler/codebase/dhtmlxscheduler.css"; @@ -261,28 +259,28 @@ export default function SchedulerView({events}) { } ~~~ -이제 앱 페이지를 새로고침하면 이벤트가 로드된 Scheduler가 표시됩니다: +이제 앱 페이지를 다시 열면 이벤트가 있는 Scheduler가 표시되어야 합니다: ![Scheduler React events](/img/scheduler_events.png) ## 5단계. 데이터 저장 -Scheduler에서 변경된 내용을 처리하려면 [dataProcessor](https://docs.dhtmlx.com/dataprocessor__index.html) 핸들러를 사용할 수 있습니다. 이를 통해 서버 백엔드와 통신할 수 있습니다. 핸들러는 함수 또는 라우터 객체가 될 수 있습니다. dhtmlxScheduler는 핸들러의 Promise 응답도 지원하므로, 작업 완료 처리가 올바르게 이루어집니다. +Scheduler에서 수행된 변경 사항을 캡처하려면 서버 측 백엔드와의 “통신”을 가능하게 하는 [dataProcessor](https://docs.dhtmlx.com/dataprocessor__index.html) 핸들러를 사용할 수 있습니다. 핸들러는 함수나 라우터 객체로 선언할 수 있습니다. dhtmlxScheduler는 핸들러의 Promise 응답을 허용하므로 작업의 완료를 올바르게 처리합니다. -**createDataProcessor()**를 사용하여 **DataProcessor**를 생성하고 다음과 같이 변경 사항을 감지할 수 있습니다: +다음과 같이 API 메서드인 **createDataProcessor()**를 통해 **DataProcessor**를 생성하고 변경 사항을 캡처할 수 있습니다: -~~~ +~~~ scheduler.createDataProcessor(function(entity, action, data, id) {​ scheduler.message(`${​entity} ${​action}`); }); ~~~ -백엔드에서 새 항목을 생성한 후 이벤트 id가 변경되는 경우(일반적임), Promise에서 **(id: databaseId)** 또는 **(tid: databaseId)** 객체를 반환해야 합니다. 이렇게 하면 Scheduler가 새 데이터베이스 id로 레코드를 업데이트할 수 있습니다. 자세한 내용은 [server side integration](guides/server-integration.md)을 참고하세요. +서비스가 새 레코드를 만든 뒤 이벤트 id를 변경하는 경우가 흔튼데, Promise가 데이터베이스 ID를 가진 객체를 반환하도록 하여(예: **(id: databaseId)** 또는 **(tid: databaseId)**) Scheduler가 새 데이터베이스 id를 레코드에 적용할 수 있도록 해야 합니다. 서버 측에 대한 자세한 내용은 [guides/server-integration.md](guides/server-integration.md)를 참조하십시오. -이로써 React Scheduler 설정이 완료되었습니다. 전체 데모는 GitHub에서 확인할 수 있습니다: [DHTMLX react-scheduler-demo](https://github.com/DHTMLX/react-scheduler-demo). +자, React Scheduler가 준비되었습니다. 전체 데모를 GitHub에서 확인하려면 [GitHub의 전체 데모 확인하기](https://github.com/DHTMLX/react-scheduler-demo)를 참고하세요. ## XSS, CSRF 및 SQL Injection 공격 -Scheduler 자체는 SQL 인젝션, XSS, CSRF 공격과 같은 위협에 대한 보호 기능을 제공하지 않습니다. 이러한 위험으로부터 애플리케이션을 보호하는 것은 백엔드 개발자의 책임입니다. +Scheduler는 SQL 인젝션이나 XSS 및 CSRF 공격과 같은 다양한 위협으로부터 애플리케이션을 방지하는 방법을 제공하지 않는다는 점에 주의하십시오. 애플리케이션의 보안을 유지하는 책임은 백엔드를 구현하는 개발자에게 있습니다. -일반적인 취약점과 보안 강화 방법은 [Application Security](guides/app-security.md) 문서를 참고하세요. +구성 요소의 가장 취약한 지점과 애플리케이션 보안을 강화하기 위한 조치를 알아보려면 [Application Security](guides/app-security.md) 문서를 참조하십시오. \ No newline at end of file diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/integrations/react/nextjs.md b/i18n/ko/docusaurus-plugin-content-docs/current/integrations/react/nextjs.md new file mode 100644 index 00000000..b39995e9 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/integrations/react/nextjs.md @@ -0,0 +1,264 @@ +--- +title: Next.js와 함께하는 React Scheduler +sidebar_label: Next.js +description: App Router를 사용하여 Next.js에 DHTMLX React Scheduler를 통합하는 방법을 배우고, 클라이언트 컴포넌트 설정 및 데모 데이터를 포함합니다. +--- + +# Next.js와 함께하는 React Scheduler + +이 튜토리얼은 간단한 **Next.js** 애플리케이션을 만들고 페이지에 **DHTMLX React Scheduler**를 렌더링하는 방법을 보여줍니다. + +:::note +전체 소스 코드는 [GitHub에서 확인 가능](https://github.com/dhtmlx/react-scheduler-nextjs-starter)합니다. +::: + +## 준비물 + +- Node.js (권장 버전 LTS) +- React + TypeScript 기본 지식 +- Next.js 기본 지식(앱 라우터, 서버/클라이언트 컴포넌트). 복습이 필요하면 Next.js 문서를 참고하세요: https://nextjs.org/docs + +## 빠른 설정 - 프로젝트 생성하기 + +다음 명령으로 Next.js 애플리케이션의 골격을 구성합니다: + +~~~bash +npx create-next-app@latest +~~~ + +프롬프트가 나타나면 다음을 선택합니다: + +- 프로젝트 이름: **react-scheduler-nextjs-quick-start** +- 기본 템플릿 사용(TyepeScript, ESLint, Tailwind CSS, App Router, Turbopack) + +Next.js가 프로젝트 구조를 생성하고 기본 의존성을 설치합니다. + +설치가 끝나면 프로젝트 디렉토리로 이동합니다: + +```bash +cd react-scheduler-nextjs-quick-start +``` + +### React Scheduler 설치 + +React Scheduler 설치는 [React Scheduler installation guide](integrations/react/installation.md)를 따라 진행합니다. + +본 튜토리얼에서는 평가 패키지를 사용합니다: + +~~~bash +npm install @dhtmlx/trial-react-scheduler +~~~ + +또는 + +~~~bash +yarn add @dhtmlx/trial-react-scheduler +~~~ + +Professional 패키지를 이미 사용 중인 경우 명령과 임포트에서 `@dhtmlx/trial-react-scheduler`를 `@dhx/react-scheduler`로 바꿉니다. 이름과 API를 그대로 유지합니다. + +## 데모 데이터 준비하기 + +프로젝트 루트에 `data/` 폴더를 생성합니다. 그 안에 Scheduler의 초기 데이터를 담은 `demoData.ts` 파일을 추가합니다: + +~~~ts title="data/demoData.ts" +import type { Event } from '@dhtmlx/trial-react-scheduler'; + +export const events: Event[] = [ + { + id: 1, + classname: 'blue', + start_date: new Date('2025-12-08T02:00:00Z'), + end_date: new Date('2025-12-08T10:20:00Z'), + text: 'Product Strategy Hike', + }, + { + id: 2, + classname: 'blue', + start_date: new Date('2025-12-08T12:00:00Z'), + end_date: new Date('2025-12-08T16:00:00Z'), + text: 'Agile Meditation and Release', + }, + { + id: 3, + classname: 'violet', + start_date: new Date('2025-12-09T06:00:00Z'), + end_date: new Date('2025-12-09T11:00:00Z'), + text: 'Tranquil Tea Time', + }, + { + id: 4, + classname: 'green', + start_date: new Date('2025-12-09T11:30:00Z'), + end_date: new Date('2025-12-09T19:00:00Z'), + text: 'Sprint Review and Retreat', + }, + { + id: 5, + classname: 'yellow', + start_date: new Date('2025-12-10T06:00:00Z'), + end_date: new Date('2025-12-10T08:00:00Z'), + text: 'Stakeholder Sunset Yoga Session', + }, +]; +~~~ + +:::note +동반 데모에는 시각적 표현을 풍부하게 해 주는 추가 이벤트가 포함되어 있습니다. +::: + +## Scheduler 컴포넌트 만들기 + +Next.js는 기본적으로 서버 컴포넌트를 사용하지만, 대부분의 실용적인 경우에는 React Scheduler를 클라이언트 컴포넌트 안에서 렌더링해야 합니다. + +다음 상황에서 필요합니다: + +- Scheduler 인스턴스에 접근하기 위해 `ref`를 사용할 때 +- 콜백(이벤트, 템플릿, 데이터 핸들러)을 전달할 때 +- React Scheduler `hooks`를 사용할 때 +- 동적 구성이나 React 요소를 제공할 때 + +따라서 우리의 Scheduler 컴포넌트는 `"use client"`로 시작합니다. + +`components/Scheduler/Scheduler.tsx` 파일을 새로 만듭니다: + +~~~tsx title="components/Scheduler/Scheduler.tsx" +'use client'; + +import { useMemo, useRef } from 'react'; +import ReactScheduler, { + type ReactSchedulerRef, + type Event, + type SchedulerTemplates, + type SchedulerConfig, +} from '@dhtmlx/trial-react-scheduler'; +import '@dhtmlx/trial-react-scheduler/dist/react-scheduler.css'; + +export interface ReactSchedulerProps { + events: Event[]; + activeView?: string; + activeDate?: Date; +} + +export default function Scheduler({ + events, + activeView = 'week', + activeDate = new Date('2025-12-08T00:00:00Z'), +}: ReactSchedulerProps) { + const schedulerRef = useRef(null); + + const templates: SchedulerTemplates = useMemo( + () => ({ + event_class: (start: Date, end: Date, event: Event) => { + return event.classname || ''; + }, + }), + [] + ); + + const config: SchedulerConfig = useMemo(() => { + return { + first_hour: 6, + last_hour: 22, + hour_size_px: 60, + }; + }, []); + + return ( + { + console.log(`${entity} - ${action} - ${id}`, data); + }, + }} + /> + ); +} +~~~ + +이 컴포넌트는 Scheduler를 초기화하고 구성, 초기 데이터 및 향후 API 호출용 `ref`를 제공합니다. `config` 객체는 타임라인의 레이아웃을 제어하고, `events` prop은 Scheduler에 데이터 세트를 제공합니다. 또한 상위 컴포넌트가 Scheduler가 표시하는 내용을 제어할 수 있도록 `activeView` 및 `activeDate`를 prop로 전달합니다. + +`data` prop 내부의 `save` 함수는 Scheduler 안의 이벤트에 대한 업데이트를 추적하는 데 사용됩니다. 이 튜토리얼에서는 변경 추적을 위한 간단한 자리 표시자 핸들러를 추가합니다. 백엔드로 업데이트를 전송하거나 React 상태에 바인딩하려면 공식 데이터 바인딩 가이드([bindingdata](integrations/react/overview.md#bindingdata))를 따라 하세요. + +## 이벤트 색상 스타일 추가 + +CSS 클래스(`.blue`, `.violet`, `.green`, `.yellow`)는 이벤트의 시각적 표현을 커스터마이즈하기 위해 `event_class` 템플릿을 통해 적용됩니다. 다음 내용을 `app/globals.css`에 추가합니다: + +~~~css title="app/globals.css" +.blue { + --dhx-scheduler-event-background: linear-gradient(180deg, #0e8af0 0%, #0ec1f0 100%); +} +.violet { + --dhx-scheduler-event-background: linear-gradient(180deg, #d071ef 0%, #ee71d5 100%); +} +.green { + --dhx-scheduler-event-background: linear-gradient(180deg, #12d979 0%, #1ecdeb 100%); +} +.yellow { + --dhx-scheduler-event-background: linear-gradient(180deg, #ffb725 0%, #ffbb25 31.25%, #faea27 100%); +} +~~~ + +:::note +Scheduler가 페이지 전체를 깔끔하게 차지하도록, `app/globals.css`에서 기본 다크 모드 테마 변수들을 제거하고 본문 여백이 없는지 확인합니다: + +~~~css +body { + margin: 0; + padding: 0; +} +~~~ +::: + +## 페이지에 Scheduler 추가하기 + +`app/page.tsx`를 열고 메인 페이지에 Scheduler를 렌더링합니다: + +~~~tsx title="app/page.tsx" +import Scheduler from '../components/Scheduler/Scheduler'; +import { events } from '../data/demoData'; + +export default function HomePage() { + return ( +
+ +
+ ); +} +~~~ + +이제 페이지가 전체 화면 Scheduler를 표시합니다. + +## 애플리케이션 시작하기 + +개발 서버를 실행합니다: + +~~~bash +npm run dev +~~~ + +그런 다음 브라우저에서 http://localhost:3000 를 열어보면 Next.js 애플리케이션 안에서 초기 데이터와 함께 작동하는 Scheduler를 볼 수 있습니다. + +## 요약 + +다음과 같은 최소한의 Next.js 프로젝트와 DHTMLX React Scheduler를 구성했습니다: + +- Scheduler가 Next.js App Router 내부의 Client Component(`"use client"`)로 렌더링됩니다 +- 데모 데이터가 별도 파일에서 로드되어 props로 전달됩니다 +- `event_class` 템플릿이 이벤트에 커스텀 색상 그라데이션을 적용합니다 +- `data.save` 콜백이 콘솔에 편집 내용을 로깅합니다(백엔드와 연결하기 쉽게 준비되어 있습니다) + +## 다음 단계 + +- [React 기반 데이터 흐름](integrations/react/overview.md#bindingdata) +- [React Scheduler 템플릿 문서](integrations/react/configuration-props.md) +- 상태 관리와의 통합 탐색: + - [Redux Toolkit와 함께 React Scheduler 사용](integrations/react/state/redux-toolkit.md) + - [MobX와 함께 React Scheduler 사용](integrations/react/state/mobx.md) + - [Zustand와 함께 React Scheduler 사용](integrations/react/state/zustand.md) \ No newline at end of file diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/integrations/react/overview.md b/i18n/ko/docusaurus-plugin-content-docs/current/integrations/react/overview.md new file mode 100644 index 00000000..060ba2f9 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/integrations/react/overview.md @@ -0,0 +1,486 @@ +--- +title: "리액트 스케줄러" +sidebar_label: "개요" +description: "리액트 스케줄러 래퍼의 개요, 데이터 바인딩 모드, 커스터마이제이션 옵션 및 프레임워크 호환성에 대한 개요." +--- + +# 리액트 스케줄러 + +:::note +리액트 스케줄러는 [상용, 엔터프라이즈 및 얼티밋 라이선스](https://dhtmlx.com/docs/products/licenses.shtml) 하에 제공됩니다. +스케줄러의 개인(Individual) 또는 GPL 에디션을 사용하는 경우, [React용 dhtmlxScheduler](integrations/react/js-scheduler-react.md)를 사용하시기 바랍니다. +::: + +## 개요 + +DHTMLX React Scheduler는 DHTMLX Scheduler의 공식 React 래퍼입니다. 고급 제어가 필요할 때 기본 Scheduler 인스턴스를 노출하면서도 Scheduler를 렌더링하고 구성하기 위한 선언적 API를 제공합니다. + +**주요 기능:** + +- 프롭스로 `events`, `view`, 및 `date` 전달 +- `config` 및 `templates`로 동작을 커스터마이즈 +- 사용자의 변경을 `data.save` 또는 `data.batchSave`를 통해 처리 +- Scheduler API 메서드에 직접 접근하려면 `ref` 사용 + +DHTMLX Scheduler에 익숙하지 않다면, 기능 개요를 보려면 [DHTMLX Scheduler 문서](/guides/)를 참고하세요. + +## 설치 및 npm 접근 + +평가판 및 전문가용 패키지 설치에 대한 내용은 아래를 참고하세요: + +- [설치 방법](integrations/react/installation.md) + +## 버전 요구사항 + +- 리액트 `18+` + +## 기본 사용법 + +```tsx +import { useMemo, useRef } from "react"; +import ReactScheduler, { + type Event, + type ReactSchedulerRef, + type SchedulerConfig, + type SchedulerTemplates, +} from "@dhtmlx/trial-react-scheduler"; +import "@dhtmlx/trial-react-scheduler/dist/react-scheduler.css"; + +const events: Event[] = [ + { + id: 1, + text: "Product Strategy Hike", + classname: "blue", + start_date: new Date("2025-12-08T02:00:00Z"), + end_date: new Date("2025-12-08T10:20:00Z"), + }, +]; + +export default function BasicSchedulerDemo() { + const schedulerRef = useRef(null); + + const templates: SchedulerTemplates = useMemo( + () => ({ + event_class: (_start, _end, event) => event.classname || "", + }), + [] + ); + + const config: SchedulerConfig = useMemo( + () => ({ + first_hour: 6, + last_hour: 22, + hour_size_px: 60, + }), + [] + ); + + return ( +
+ +
+ ); +} +``` + +## 데이터 바인딩 {#bindingdata} + +리액트 스케줄러는 두 가지 데이터 바인딩 모델을 지원합니다. + +### 핵심 원천으로서의 React 상태(권장) + +이 모델에서 React(또는 상태 관리 도구)가 이벤트 데이터를 소유합니다: + +- Scheduler는 프롭스로 이벤트를 읽습니다 +- 사용자의 변경은 `data.save` 콜백을 호출합니다 +- 콜백이 React 상태를 업데이트합니다 +- React가 업데이트된 프롭으로 Scheduler를 다시 렌더링합니다 + +```tsx +import { useMemo, useState } from "react"; +import ReactScheduler, { type Event } from "@dhtmlx/trial-react-scheduler"; + +export default function ReactDrivenExample({ seedEvents }: { seedEvents: Event[] }) { + const [events, setEvents] = useState(seedEvents); + + const data = useMemo( + () => ({ + save: (entity: string, action: string, item: Event, id: string | number) => { + if (entity !== "event") return; + + if (action === "create") { + setEvents((prev) => [...prev, item]); + return; + } + + if (action === "update") { + setEvents((prev) => prev.map((e) => (e.id === id ? item : e))); + return; + } + + if (action === "delete") { + setEvents((prev) => prev.filter((e) => e.id !== id)); + } + }, + }), + [] + ); + + return ; +} +``` + +이 모델은 다른 React UI가 Scheduler 데이터와 동기화되어 있어야 할 때 가장 적합합니다. + +### Scheduler를 진실의 원천으로 + +이 모델에서 Scheduler는 내부 상태를 관리하고 수정사항을 백엔드로 전달합니다. + +```tsx + +``` + +이 모델은 React가 매 업데이트를 즉시 반영할 필요가 없을 때 유용합니다. + +### 데이터 로드 + +프롭스나 `data.load` 중 하나를 사용하여 데이터를 로드할 수 있습니다: + +```tsx +// Props 기반 로딩 + + +// 전송 기반 로딩 + +``` + +데이터 형식 요구사항은 [데이터 로딩](guides/loading-data.md)을 참조하세요. + +### 변경 사항 저장 + +`data.save`는 URL이 될 수 있으며 콜백일 수도 있습니다. + +```tsx + { + if (entity !== "event") return; + + if (action === "create") { + const response = await fetch("/api/events", { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify(item), + }); + + const created = await response.json(); + return { id: created.id }; + } + + if (action === "update") { + await fetch(`/api/events/${id}`, { + method: "PUT", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify(item), + }); + } + + if (action === "delete") { + await fetch(`/api/events/${id}`, { method: "DELETE" }); + } + }, + }} +/> +``` + +백엔드 동작에 대한 세부 내용은 [Server Integration](guides/server-integration.md)을 참조하세요. + +## 라이트박스 교체 + +스케줄러에는 [라이트박스](guides/lightbox-editors.md)라고 하는 내장 이벤트 편집기가 포함되어 있습니다. + +이를 `customLightbox`를 사용하여 교체할 수 있습니다: + +```tsx +import React, { useState } from 'react'; + +export interface CustomLightboxProps { + data?: any; + onSave?: (event: any) => void; + onCancel?: () => void; + onDelete?: () => void; +} + +const CustomLightbox: React.FC = ({ + data, + onSave, + onCancel, + onDelete +}) => { + + let updatedEventText = data.text || ""; + + const handleSaveClick = () => { + if(onSave) + onSave({ ...data, text: updatedEventText }); + }; + + function PaperComponent(props: any) { + const nodeRef = React.useRef(null); + return ( + + + + ); + } + + + function TextComponent() { + const [description, setDescription] = useState(data.text || ''); + + return ( + { + updatedEventText = e.target.value; + setDescription(e.target.value) + }} + sx="{{" width: '100%', padding: '8px', marginTop: '10px' }} + /> + ) + } + + + return ( + + + Edit Event + + + + Description + + + + + + + + + + + + + ); +}; + +export default CustomLightbox; +``` + +에디터 열기를 차단하는 훅도 제공됩니다(`onBeforeLightbox`): + +```tsx +import { useEffect, useRef } from 'react'; +import ReactScheduler from "@dhx/react-scheduler"; +import "@dhx/react-scheduler/dist/react-scheduler.css"; +import { useNavigate } from 'react-router-dom'; + + +export default function BasicInitDemo() { + const schedulerRef = useRef(null); + + const { events, handleSaveEvent, handleDeleteEvent, createEvent } + = useOutletContext(); + const navigate = useNavigate(); + + const handleEventEdit = (id: any) => { + const schedulerInstance = schedulerRef.current?.instance; + navigate(`/editor/${id}`, { state: { task: schedulerInstance.getTask(id) } }); + }; + + return ( + + ); +} +``` + +참고: [onBeforeLightbox](api/event/onbeforelightbox.md) + +## 내장 모달 교체 + +삭제 확인 다이얼로그는 `modals`를 통해 재정의할 수 있습니다. + +```tsx + { + if (window.confirm(`Delete "${event.text}"?`)) { + callback(); // 콜백을 호출하면 이벤트가 삭제됩니다 + } + }, + }} +/> +``` + +### 반복 일정 확인 모달 커스터마이즈하기 {#customizingtherecurrenceconfirmationmodal} + +사용자가 반복 이벤트를 편집하거나 끌어다 놓은 경우, 특정 발생건만 수정할지, 이후 이벤트까지 포함할지, 아니면 전체 시퀀스를 수정할지 물어보는 확인 모달이 나타납니다. 이 내장 대화상자를 `modals.onRecurrenceConfirm`으로 대체할 수 있습니다. + +콜백은 컨텍스트 객체를 받고 결정을 반환해야 합니다(또는 이를 해결하는 Promise): + +| 필드 | 타입 | 설명 | +|---|---|---| +| `origin` | `"lightbox" \| "dnd"` | 라이트박스에서 트리거되었는지 여부 또는 드래그 앤 드롭으로 트리거되었는지 여부 | +| `occurrence` | `any` | 편집 중인 특정 발생 건 | +| `series` | `any` | 부모 반복 이벤트 | +| `labels` | `object` | 지역화된 레이블: `title`, `ok`, `cancel`, `occurrence`, `following`, `series` | +| `options` | `string[]` | 사용 가능한 선택지 예: `["occurrence", "following", "series"]` | + +Return value (`RecurrenceDecision`): `"occurrence"`, `"following"`, `"series"`, 또는 취소를 의미하는 `null`. + +예시: + +```tsx +import { useState, useCallback } from "react"; + +function App() { + const [recurrencePrompt, setRecurrencePrompt] = useState(null); + + const onRecurrenceConfirm = useCallback((context) => { + return new Promise((resolve) => { + setRecurrencePrompt({ context, resolve }); + }); + }, []); + + return ( + <> + + {recurrencePrompt && ( + { + recurrencePrompt.resolve(choice); + setRecurrencePrompt(null); + }} + onCancel={() => { + recurrencePrompt.resolve(null); + setRecurrencePrompt(null); + }} + /> + )} + + ); +} +``` + +## 필터링 + +표시되는 이벤트를 제어하려면 `filter` 프롭을 사용하세요: + +```tsx +import { useCallback, useState } from "react"; + +function FilteredScheduler({ events }: { events: any[] }) { + const [query, setQuery] = useState(""); + + const filterFn = useCallback( + (event: any) => { + if (!query.trim()) return true; + return event.text?.toLowerCase().includes(query.trim().toLowerCase()); + }, + [query] + ); + + return ( + <> + setQuery(e.target.value)} + /> + + + ); +} +``` + +## 기본 Scheduler API에 접근하기 + +프롭스만으로 부족할 때는 `ref`를 통해 Scheduler 인스턴스에 접근합니다: + +```tsx +import { useEffect, useRef } from "react"; +import ReactScheduler, { type ReactSchedulerRef } from "@dhx/react-scheduler"; + +export function DirectRefExample({ events }: { events: any[] }) { + const schedulerRef = useRef(null); + + useEffect(() => { + const scheduler = schedulerRef.current?.instance; + if (!scheduler) return; + + console.log("Events:", scheduler.getEvents()); + scheduler.setCurrentView(new Date()); + }, []); + + return ; +} +``` + +프로퍼티를 직접 수정하는 경우, 상태 드리프트를 피하기 위해 React 프롭스를 동기화해 두는 것이 좋습니다. + +가능한 메서드 목록은 [Scheduler Methods Overview](api/overview/methods_overview.md)를 참조하세요. + +#### React 프롭스와의 충돌 방지 + +- 코드에서 수동으로 `scheduler.parse(( events ))`를 호출하거나 `scheduler.addEvent()`를 호출하는 경우, React 프롭스를 동기화 상태로 유지해야 할 수 있습니다. 그렇지 않으면 다음 React 렌더링 시 수동 변경이 덮어써질 수 있습니다. +- 권장되는 방법은 이벤트에 대해 래퍼의 프롭스에 의존하거나 React 상태에서 관리하는 것이며, 그런 다음 래퍼가 재파싱을 처리하게 두는 것입니다. + +## SSR 프레임워크(Next.js, Remix)와의 호환성 + +:::note +리액트 스케줄러는 SSR 친화적입니다. 서버 렌더링 중에는 플레이스홀더 컨테이너를 출력하고 클라이언트에서 하이드레이션합니다. +::: + +세부 내용은 프레임워크별 가이드를 참고하세요: + +- [Next.js에서의 React Scheduler](integrations/react/nextjs.md) +- [Remix에서의 React Scheduler](integrations/react/remix.md) + +## 다음 단계 + +- [구성(Configuration)](integrations/react/configuration-props.md) +- [데이터 바인딩 및 상태 관리 기초](integrations/react/state/state-management-basics.md) +- [빠른 시작(Quick Start)](integrations/react/quick-start.md) \ No newline at end of file diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/integrations/react/quick-start.md b/i18n/ko/docusaurus-plugin-content-docs/current/integrations/react/quick-start.md new file mode 100644 index 00000000..4f79c2bb --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/integrations/react/quick-start.md @@ -0,0 +1,203 @@ +--- +title: React Scheduler 빠른 시작 +sidebar_label: 빠른 시작 +description: 'React Scheduler 컴포넌트 사용에 대한 단계별 가이드' +--- + +# React Scheduler 빠른 시작 + +:::note +본 튜토리얼은 DHTMLX Scheduler의 Commercial, Enterprise, Ultimate 에디션에 포함된 React 래퍼를 다룹니다. +만약 **Individual** 또는 **GPL** 에디션을 사용 중이라면 대체 가이드를 따라가세요: +[React로 시작하기](integrations/react/js-scheduler-react.md). +::: + +**React Scheduler** 컴포넌트는 **DHTMLX Scheduler**의 공식 래퍼입니다. +이 가이드는trial 패키지를 사용하여 간단한 React 애플리케이션을 만들고 기본 Scheduler를 렌더링하는 과정을 안내합니다. + +React가 처음이라면 공식 [React 문서](https://react.dev/learn)부터 시작하세요. 이 튜토리얼을 따라 작동하는 완전한 프로젝트를 GitHub에서 확인하려면 [GitHub의 전체 작동 예제](https://github.com/dhtmlx/react-scheduler-quick-start)를 확인하세요. + +## 버전 요구사항 + +- React **18 이상** + +## 새로운 React 프로젝트 생성 + +React 프로젝트를 생성하고 프로젝트 디렉터리로 이동하려면 아래 명령어를 실행합니다: + +~~~bash +npm create vite@latest react-scheduler-quick-start -- --template react-ts +cd react-scheduler-quick-start +~~~ + +### React Scheduler 설치 + +React Scheduler 설치는 [React Scheduler 설치 가이드](integrations/react/installation.md)에 따라 진행합니다. + +이 튜토리얼에서는 평가 패키지를 사용합니다: + +~~~bash +npm install @dhtmlx/trial-react-scheduler +~~~ + +또는 + +~~~bash +yarn add @dhtmlx/trial-react-scheduler +~~~ + +Professional 패키지를 이미 사용 중인 경우, 명령어와 임포트에서 `@dhtmlx/trial-react-scheduler`를 `@dhx/react-scheduler`로 바꾸어 사용합니다. + +## Demo 데이터 추가 + +이 예제에는 정적 데이터를 사용합니다. `src/demoData.ts` 파일을 생성합니다: + +~~~ts +import type { Event } from '@dhtmlx/trial-react-scheduler'; + +export const events: Event[] = [ + { + id: 1, + classname: 'blue', + start_date: new Date('2025-12-08T02:00:00Z'), + end_date: new Date('2025-12-08T10:20:00Z'), + text: 'Product Strategy Hike', + }, + { + id: 2, + classname: 'blue', + start_date: new Date('2025-12-08T12:00:00Z'), + end_date: new Date('2025-12-08T16:00:00Z'), + text: 'Agile Meditation and Release', + }, + { + id: 3, + classname: 'violet', + start_date: new Date('2025-12-09T06:00:00Z'), + end_date: new Date('2025-12-09T11:00:00Z'), + text: 'Tranquil Tea Time', + }, + // .... +]; +~~~ + +## Scheduler 컴포넌트 추가 + +Scheduler 컴포넌트를 추가하려면 `src/components/Scheduler/Scheduler.tsx` 파일을 아래 내용으로 생성합니다: + +~~~tsx +import { useMemo, useRef } from 'react'; +import ReactScheduler, { + type ReactSchedulerRef, + type Event, + type SchedulerTemplates, + type SchedulerConfig, +} from '@dhtmlx/trial-react-scheduler'; +import '@dhtmlx/trial-react-scheduler/dist/react-scheduler.css'; +import './styles.css'; + +export interface ReactSchedulerProps { + events: Event[]; + activeView?: string; + activeDate?: Date; +} + +export default function Scheduler({ + events, + activeView = 'week', + activeDate = new Date('2025-12-08T00:00:00Z'), +}: ReactSchedulerProps) { + const schedulerRef = useRef(null); + + const templates: SchedulerTemplates = useMemo( + () => ({ + event_class: (start: Date, end: Date, event: Event) => { + return event.classname || ''; + }, + }), + [] + ); + + const config: SchedulerConfig = useMemo(() => { + return { + first_hour: 6, + last_hour: 22, + hour_size_px: 60, + }; + }, []); + + return ( + { + console.log(`${entity} - ${action} - ${id}`, data); + }, + }} + /> + ); +} +~~~ + +마지막으로, CSS 클래스(`.violet`, `.green`, `.yellow`)는 이벤트의 시각적 외관을 커스터마이즈하기 위해 `event_class` 템플릿을 통해 적용됩니다: + +~~~css +.violet { + --dhx-scheduler-event-background: linear-gradient(180deg, #d071ef 0%, #ee71d5 100%); +} +.green { + --dhx-scheduler-event-background: linear-gradient(180deg, #12d979 0%, #1ecdeb 100%); +} +.yellow { + --dhx-scheduler-event-background: linear-gradient(180deg, #ffb725 0%, #ffbb25 31.25%, #faea27 100%); +} +~~~ + + +## 앱에서 Scheduler 렌더링 + +App에 Scheduler를 표시하려면 `src/App.tsx`의 코드를 아래 코드로 교체합니다: + +~~~tsx +import './App.css'; +import Scheduler from './components/Scheduler/Scheduler'; +import { events } from './demoData'; + +function App() { + return ( +
+ +
+ ); +} + +export default App; +~~~ + +그런 다음 아래 명령어로 앱을 실행합니다: + +~~~bash +npm run dev +~~~ + +이 시점에서 **완전히 작동하는 React + DHTMLX Scheduler 애플리케이션**을 얻을 수 있습니다. + +이 설정은 다음을 수행하는 데 필요한 최소 구성(minimum configuration)을 나타냅니다: + +- Scheduler를 렌더링 +- 이벤트를 표시 +- 기본 스케일 구성을 적용 +- React ref를 통해 Scheduler 인스턴스 연결 +- `data.save` 콜백을 통해 이벤트 수신 + +GitHub 데모 프로젝트에 동일한 최소 예제가 있습니다: [GitHub 데모 프로젝트](https://github.com/dhtmlx/react-scheduler-quick-start). + +다음 단계 + +- 사용 가능한 모든 [React Scheduler props](integrations/react/configuration-props.md)을 공부하기 +- [Guides](/guides/)에서 고급 Scheduler 기능 탐색하기 \ No newline at end of file diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/integrations/react/remix.md b/i18n/ko/docusaurus-plugin-content-docs/current/integrations/react/remix.md new file mode 100644 index 00000000..ae935a6a --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/integrations/react/remix.md @@ -0,0 +1,270 @@ +--- +title: Remix와 함께하는 React Scheduler +sidebar_label: Remix +description: Remix (React Router v7)와 함께 DHTMLX React Scheduler를 통합하는 방법, 클라이언트 컴포넌트 설정 및 데모 데이터 포함. +--- + +# Remix와 함께하는 React Scheduler + +이 튜토리얼은 간단한 **Remix** 애플리케이션을 생성하고 페이지에 **DHTMLX React Scheduler**를 렌더링하는 방법을 보여줍니다. + +:::note +전체 소스 코드는 [GitHub에서 확인할 수 있습니다](https://github.com/dhtmlx/react-scheduler-remix-starter). +::: + +## 사전 요구사항 + +- Node.js (LTS 권장) +- React + TypeScript 기초 +- Remix / React Router 기본 지식. 필요하면 Remix 문서를 참조하세요: https://remix.run/docs + +## 빠른 설정 - 프로젝트 생성 + +Remix가 이제 **React Router v7**의 일부로 제공되므로, 프로젝트를 구성하는 권장 방법은 다음과 같습니다: + +~~~bash +npx create-react-router@latest +~~~ + +프롬프트가 표시되면 다음을 선택하세요: + +- 프로젝트 이름: **react-scheduler-remix-quick-start** +- 기본 템플릿 사용(React, TypeScript, TailwindCSS, SSR) +- **설치 의존성**: 예 + +설치가 끝나면 프로젝트 디렉터리로 이동합니다: + +```bash +cd react-scheduler-remix-quick-start +``` + +### React Scheduler 설치 + +React Scheduler 설치는 [React Scheduler 설치 가이드](integrations/react/installation.md)에 따라 진행합니다. + +이 튜토리얼에서는 평가 패키지를 사용합니다: + +~~~bash +npm install @dhtmlx/trial-react-scheduler +~~~ + +또는 + +~~~bash +yarn add @dhtmlx/trial-react-scheduler +~~~ + +Professional 패키지를 이미 사용 중이라면 명령과 임포트에서 `@dhtmlx/trial-react-scheduler`를 `@dhx/react-scheduler`로 바꾸세요. + +## 데모 데이터 준비 + +프로젝트 루트에 `data/` 폴더를 생성합니다. 그 안에 Scheduler의 초기 데이터를 담은 `demoData.ts` 파일을 추가합니다: + +~~~ts title="data/demoData.ts" +import type { Event } from '@dhtmlx/trial-react-scheduler'; + +export const events: Event[] = [ + { + id: 1, + classname: 'blue', + start_date: new Date('2025-12-08T02:00:00Z'), + end_date: new Date('2025-12-08T10:20:00Z'), + text: 'Product Strategy Hike', + }, + { + id: 2, + classname: 'blue', + start_date: new Date('2025-12-08T12:00:00Z'), + end_date: new Date('2025-12-08T16:00:00Z'), + text: 'Agile Meditation and Release', + }, + { + id: 3, + classname: 'violet', + start_date: new Date('2025-12-09T06:00:00Z'), + end_date: new Date('2025-12-09T11:00:00Z'), + text: 'Tranquil Tea Time', + }, + { + id: 4, + classname: 'green', + start_date: new Date('2025-12-09T11:30:00Z'), + end_date: new Date('2025-12-09T19:00:00Z'), + text: 'Sprint Review and Retreat', + }, + { + id: 5, + classname: 'yellow', + start_date: new Date('2025-12-10T06:00:00Z'), + end_date: new Date('2025-12-10T08:00:00Z'), + text: 'Stakeholder Sunset Yoga Session', + }, +]; +~~~ + +:::note +동반 데모에는 더 풍성한 시각 효과를 위한 추가 이벤트가 포함되어 있습니다. +::: + +## Scheduler 컴포넌트 생성 + +Remix는 표준 React 아키텍처를 통해 클라이언트 측 컴포넌트를 사용할 수 있습니다. 실무에서는 대부분의 경우 Client Component 안에 React Scheduler를 렌더링해야 합니다. + +다음과 같은 경우에 필요합니다: + +- Scheduler 인스턴스에 접근하기 위해 `ref`를 사용할 때 +- 콜백(이벤트, 템플릿, 데이터 핸들러)을 전달할 때 +- ReactScheduler의 `hooks`를 사용할 때 +- 동적 구성이나 React 요소를 제공할 때 + +따라서 우리의 Scheduler 컴포넌트는 `"use client"`로 시작합니다. + +프로젝트 내 새 파일을 `components/Scheduler/Scheduler.tsx` 경로에 생성합니다: + +~~~tsx title="components/Scheduler/Scheduler.tsx" +'use client'; + +import { useMemo, useRef } from 'react'; +import ReactScheduler, { + type ReactSchedulerRef, + type Event, + type SchedulerTemplates, + type SchedulerConfig, +} from '@dhtmlx/trial-react-scheduler'; +import '@dhtmlx/trial-react-scheduler/dist/react-scheduler.css'; + +export interface ReactSchedulerProps { + events: Event[]; + activeView?: string; + activeDate?: Date; +} + +export default function Scheduler({ + events, + activeView = 'week', + activeDate = new Date('2025-12-08T00:00:00Z'), +}: ReactSchedulerProps) { + const schedulerRef = useRef(null); + + const templates: SchedulerTemplates = useMemo( + () => ({ + event_class: (start: Date, end: Date, event: Event) => { + return event.classname || ''; + }, + }), + [] + ); + + const config: SchedulerConfig = useMemo(() => { + return { + first_hour: 6, + last_hour: 22, + hour_size_px: 60, + }; + }, []); + + return ( + { + console.log(`${entity} - ${action} - ${id}`, data); + }, + }} + /> + ); +} +~~~ + +이 컴포넌트는 Scheduler를 초기화하고 구성, 초기 데이터를 제공하며 향후 API 호출을 위한 `ref`를 제공합니다. `config` 객체는 타임라인의 레이아웃을 제어하고, `events` props는 Scheduler에 데이터 세트를 제공합니다. 또한 부모 컴포넌트가 Scheduler가 표시할 내용을 제어할 수 있도록 `activeView`와 `activeDate`를 props로 전달합니다. + +`data` prop 안의 `save` 함수는 Scheduler 내부에서 이벤트에 대한 업데이트를 추적하는 데 사용됩니다. 이 튜토리얼에서는 변경 추적용 간단한 플레이스홀더 핸들러를 추가합니다. 백엔드로 업데이트를 전송하거나 React 상태에 바인딩하려면 공식 데이터 바인딩 가이드에 따라 구현할 수 있습니다: [가이드](integrations/react/overview.md#bindingdata). + +## 이벤트 색상 스타일 추가 + +CSS 클래스(`.blue`, `.violet`, `.green`, `.yellow`)는 이벤트의 시각적 모양을 커스터마이즈하기 위해 `event_class` 템플릿을 통해 적용됩니다. 아래 내용을 `app/app.css`에 추가하세요: + +~~~css title="app/app.css" +.blue { + --dhx-scheduler-event-background: linear-gradient(180deg, #0e8af0 0%, #0ec1f0 100%); +} +.violet { + --dhx-scheduler-event-background: linear-gradient(180deg, #d071ef 0%, #ee71d5 100%); +} +.green { + --dhx-scheduler-event-background: linear-gradient(180deg, #12d979 0%, #1ecdeb 100%); +} +.yellow { + --dhx-scheduler-event-background: linear-gradient(180deg, #ffb725 0%, #ffbb25 31.25%, #faea27 100%); +} +~~~ + +:::note +Scheduler가 페이지 전체를 깔끔하게 차지하도록 바디 여백을 제거하세요: +~~~css +body { + margin: 0; + padding: 0; +} +~~~ +::: + +## 루트 경로에서 Scheduler 렌더링 + +메인 페이지 경로 — `app/routes/home.tsx`를 열고 내용을 아래로 바꿉니다: + +~~~tsx title="app/routes/home.tsx" +import { events } from '../../data/demoData'; +import type { Route } from './+types/home'; +import Scheduler from 'components/Scheduler/Scheduler'; + +export function meta({}: Route.MetaArgs) { + return [ + { title: 'DHTMLX React Scheduler | Remix (React Router) Quick Start' }, + { name: 'description', content: 'DHTMLX React Scheduler | Remix (React Router) Quick Start' }, + ]; +} + +export default function Home() { + return ( +
+ +
+ ); +} +~~~ + +이제 Scheduler가 `/` 경로에 표시됩니다. + +## 애플리케이션 시작 + +개발 서버를 시작합니다: + +~~~bash +npm run dev +~~~ + +그런 다음 브라우저에서 http://localhost:5173 를 열어보세요. Remix 애플리케이션 안에서 초기 데이터와 함께 작동하는 Scheduler가 표시되는 것을 확인할 수 있습니다. + +## 요약 + +다음과 같은 최소한의 Remix 프로젝트가 준비되어 있습니다. DHTMLX React Scheduler: + +- Scheduler는 Remix / React Router v7 내부의 Client Component(`"use client"`)로 렌더링됩니다 +- 데모 데이터는 별도 파일에서 로드되어 prop으로 전달됩니다 +- `event_class` 템플릿은 이벤트에 커스텀 컬러 그라데이션을 적용합니다 +- `data.save` 콜백은 콘솔에 수정 내역을 로그합니다(백엔드에 연결하거나 React 상태에 바인딩할 준비가 되어 있음) + +## 다음 단계 + +- [React-driven data flow](integrations/react/overview.md#bindingdata) +- [React Scheduler Templates Documentation](integrations/react/configuration-props.md) +- 상태 관리 통합 탐색: + - [Using React Scheduler with Redux Toolkit](integrations/react/state/redux-toolkit.md) + - [Using React Scheduler with MobX](integrations/react/state/mobx.md) + - [Using React Scheduler with Zustand](integrations/react/state/zustand.md) \ No newline at end of file diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/integrations/react/state/index.md b/i18n/ko/docusaurus-plugin-content-docs/current/integrations/react/state/index.md new file mode 100644 index 00000000..d45905f1 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/integrations/react/state/index.md @@ -0,0 +1,40 @@ +--- +title: "데이터 및 상태 관리" +description: "React Scheduler를 React 상태 또는 상태 관리자로 바인딩하고, 사용자 편집을 처리하며, React 관리형 데이터 모델과 Scheduler 관리형 데이터 모델 간의 선택 방법." +--- + +이 섹션은 Scheduler 데이터를 애플리케이션 상태와 동기화하는 방법을 설명합니다. 권장되는 React 기반 모델(단일 소스로 React 또는 저장소를 사용하는 모델), 성능 중심의 Scheduler 관리 모델, 그리고 널리 사용되는 상태 관리 라이브러리들에 대한 실용적인 구현을 다룹니다. + +## 여기에서 시작 + +다음은 두 가지 지원 데이터 모델과 일반적인 통합 패턴을 이해하기 위해 먼저 읽어야 할 내용입니다: + +- [데이터 바인딩 및 상태 관리 기본](integrations/react/state/state-management-basics.md) + +이 섹션은 `data.save` 및 `data.batchSave` 콜백을 사용하는 방법, 로딩이 각 모델에 어떻게 적용되는지, 그리고 Scheduler가 데이터를 내부적으로 관리할 때 어떤 변화가 생기는지 설명합니다. + +## 상태 관리 라이브러리 선택 + +아래의 각 튜토리얼은 동일한 핵심 패턴(state -> props -> Scheduler, changes -> callbacks -> state)을 적용하지만, 특정 라이브러리의 관용어를 사용합니다: + +- [Redux Toolkit](integrations/react/state/redux-toolkit.md) +- [Zustand](integrations/react/state/zustand.md) +- [MobX](integrations/react/state/mobx.md) +- [XState](integrations/react/state/xstate.md) +- [Jotai](integrations/react/state/jotai.md) +- [Valtio](integrations/react/state/valtio.md) + +## 실시간 동기화 + +실시간 업데이트가 필요한 경우, 여기를 시작하세요: + +- [Firebase 통합](integrations/react/firebase-integration.md) + +## 성능 주의사항 + +앱에서 대규모 작업(대량 편집, 빈번한 업데이트, 대용량 데이터 세트)을 수행하는 경우 주의해야 할 점: + +- 업데이트 오버헤드를 줄이기 위해 `data.batchSave`를 사용합니다, +- React가 모든 변경을 즉시 반영할 필요가 없을 때의 **Scheduler 관리 데이터 모델**. + +두 주제 모두 [데이터 바인딩 및 상태 관리 기본](integrations/react/state/state-management-basics.md)에서 다룹니다. \ No newline at end of file diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/integrations/react/state/jotai.md b/i18n/ko/docusaurus-plugin-content-docs/current/integrations/react/state/jotai.md new file mode 100644 index 00000000..99aee55f --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/integrations/react/state/jotai.md @@ -0,0 +1,597 @@ +--- +title: 리액트 스케줄러 - Jotai 튜토리얼 +sidebar_label: Jotai +description: 이벤트 CRUD, 뷰/날짜 동기화, 읽기 전용 구성, 그리고 스냅샷 기반 undo/redo를 포함하여 DHTMLX React Scheduler를 Jotai와 함께 통합하는 방법을 학습합니다. +--- + +# 리액트 스케줄러 - Jotai 튜토리얼 + +이 튜토리얼은 **DHTMLX React Scheduler**를 **Jotai** 저장소에 연결하는 방법을 보여줍니다. 이벤트와 UI 상태(뷰/날짜/구성)을 원자(atom)에 보관하고, Scheduler의 편집을 `data.save`를 통해 라우팅하며, 스냅샷 기반 이력으로 **undo/redo**를 추가합니다. + +:::note +The complete source code is [available on GitHub](https://github.com/DHTMLX/react-scheduler-jotai-starter). +::: + +## 전제 조건 + +- Node.js (LTS 권장) +- React + TypeScript 기본 지식 +- Jotai 원자와 `useAtom`/`useSetAtom`에 대한 기본 이해. 복습이 필요하다면 Jotai 문서를 참조하세요: https://jotai.org/ + +## 빠른 설정 - 프로젝트 생성 + +Vite + React + TypeScript 프로젝트를 생성합니다: + +~~~bash +npm create vite@latest scheduler-jotai-demo -- --template react-ts +cd scheduler-jotai-demo +npm install +~~~ + +Jotai를 설치합니다: + +~~~bash +npm install jotai +~~~ + +데모 툴바에 사용되는 Material UI를 설치합니다: + +~~~bash +npm install @mui/material @mui/icons-material @emotion/react @emotion/styled +~~~ + +### React Scheduler 설치 + +React Scheduler 설치 방법은 [React Scheduler 설치 가이드](integrations/react/installation.md) 를 참조하십시오. + +이 튜토리얼에서는 평가 패키지를 사용합니다: + +```bash +npm install @dhtmlx/trial-react-scheduler +``` + +또는 + +```bash +yarn add @dhtmlx/trial-react-scheduler +``` + +Professional 패키지를 이미 사용하는 경우, 명령과 임포트에서 `@dhtmlx/trial-react-scheduler`를 `@dhx/react-scheduler`로 대체하십시오. + +개발 서버를 실행합니다: + +~~~bash +npm run dev +~~~ + +:::note +Scheduler 전체 화면 차지를 원하면, 기본 스타일을 `src/App.css`에서 제거하고 아래를 추가합니다: + +~~~css +#root { + margin: 0; + padding: 0; + height: 100%; + width: 100%; +} + +body { + margin: 0; +} +~~~ +::: + +## 공유 타입 정의 + +`src/types.ts`를 생성합니다. 이 타입은 원자와 컴포넌트 전반에 공유됩니다: + +~~~ts +export type SchedulerView = "day" | "week" | "month"; +export type SchedulerEventId = string | number; + +export interface SchedulerEvent { + id: SchedulerEventId; + start_date: string; + end_date: string; + text: string; + + // Scheduler가 런타임에 추가 필드를 붙일 수 있습니다(예: 커스텀 props). 예제는 허용적으로 작성합니다. + [key: string]: unknown; +} + +export type SchedulerConfig = Record; + +export interface SchedulerSnapshot { + events: SchedulerEvent[]; + config: SchedulerConfig; +} +~~~ + +- `SchedulerEvent`는 런타임에 추가 필드를 Scheduler가 붙일 수 있도록 인덱스 시그니처를 사용합니다. +- `SchedulerSnapshot`은 undo/redo를 위한 필요한 데이터를 캡처합니다(이벤트 + 구성). + +## 샘플 데이터 설정 + +`src/seed/data.ts`를 생성하고 몇 개의 이벤트와 초기 UI 상태를 추가합니다. 주의: `seedDate`는 숫자(타임스탬프)로 저장되어 원자 상태를 직렬화 가능한 상태로 유지합니다. + +~~~ts +import type { SchedulerEvent, SchedulerView } from "../types"; + +export const seedEvents: SchedulerEvent[] = [ + { id: 1, start_date: "2025-08-11T02:00:00Z", end_date: "2025-08-11T10:20:00Z", text: "Product Strategy Hike" }, + { id: 2, start_date: "2025-08-12T06:00:00Z", end_date: "2025-08-12T11:00:00Z", text: "Tranquil Tea Time" }, + { id: 3, start_date: "2025-08-15T03:00:00Z", end_date: "2025-08-15T08:00:00Z", text: "Demo and Showcase" }, +]; + +export const seedDate = Date.parse("2025-08-15T00:00:00Z"); +export const seedView: SchedulerView = "week"; +~~~ + +:::note + companion 데모에는 더 풍부한 시각적 효과를 위한 추가 이벤트가 포함되어 있습니다. + ::: + +## Jotai 원자와 액션 만들기 + +`src/schedulerAtoms.ts`를 생성합니다. 이 설정은 다음을 저장합니다: + +- `events` (Scheduler 데이터) +- `currentDate` (타임스탬프) +- `view` (`day | week | month`) +- `config` (Scheduler 구성 객체, `readonly` 포함) +- undo/redo를 위한 `past` / `future` 스냅샷 + +이 예제에서 undo/redo는 **이벤트 및 구성 변경만** 추적합니다. 날짜 탐색 및 뷰 전환은 히스토리에 추가되지 않습니다. + +~~~ts +import { atom } from "jotai"; +import { seedDate, seedEvents, seedView } from "./seed/data"; +import type { + SchedulerConfig, + SchedulerEvent, + SchedulerEventId, + SchedulerSnapshot, + SchedulerView, +} from "./types"; + +interface SchedulerState { + events: SchedulerEvent[]; + currentDate: number; + view: SchedulerView; + config: SchedulerConfig; +} + +export type SchedulerAction = + | { + type: "updateEvent"; + payload: Partial & Pick; + } + | { + type: "createEvent"; + payload: Omit & Partial>; + } + | { type: "deleteEvent"; payload: SchedulerEventId } + | { type: "setCurrentDate"; payload: number } + | { type: "setView"; payload: SchedulerView } + | { type: "updateConfig"; payload: Partial } + | { type: "undo" } + | { type: "redo" }; + +const schedulerStateAtom = atom({ + events: seedEvents as unknown as SchedulerEvent[], + currentDate: seedDate, + view: seedView, + config: {}, +}); + +const pastAtom = atom([]); +const futureAtom = atom([]); +const MAX_HISTORY_SIZE = 50; + +const deepCopy = (value: T): T => { + return JSON.parse(JSON.stringify(value)) as T; +}; + +const createSnapshot = (state: SchedulerState): SchedulerSnapshot => ({ + events: deepCopy(state.events), + config: deepCopy(state.config), +}); + +export const schedulerActionsAtom = atom( + null, + (get, set, action: SchedulerAction): SchedulerEvent | void => { + const currentState = get(schedulerStateAtom); + const past = get(pastAtom); + const future = get(futureAtom); + + const pushHistory = () => { + set(pastAtom, [...past.slice(-MAX_HISTORY_SIZE + 1), createSnapshot(currentState)]); + set(futureAtom, []); + }; + + if (action.type === "setCurrentDate") { + set(schedulerStateAtom, { ...currentState, currentDate: action.payload }); + return; + } + + if (action.type === "setView") { + set(schedulerStateAtom, { ...currentState, view: action.payload }); + return; + } + + if (action.type === "createEvent") { + pushHistory(); + const id = action.payload.id != null ? action.payload.id : `id_${Date.now().toString()}`; + const newEvent: SchedulerEvent = { ...action.payload, id } as SchedulerEvent; + + set(schedulerStateAtom, { + ...currentState, + events: [...currentState.events, newEvent], + }); + return newEvent; + } + + if (action.type === "updateEvent") { + const index = currentState.events.findIndex((event) => String(event.id) === String(action.payload.id)); + if (index === -1) return; + + pushHistory(); + set(schedulerStateAtom, { + ...currentState, + events: [ + ...currentState.events.slice(0, index), + { ...currentState.events[index], ...action.payload }, + ...currentState.events.slice(index + 1), + ], + }); + return; + } + + if (action.type === "deleteEvent") { + const exists = currentState.events.some((event) => String(event.id) === String(action.payload)); + if (!exists) return; + + pushHistory(); + set(schedulerStateAtom, { + ...currentState, + events: currentState.events.filter((event) => String(event.id) !== String(action.payload)), + }); + return; + } + + if (action.type === "updateConfig") { + pushHistory(); + set(schedulerStateAtom, { + ...currentState, + config: { ...currentState.config, ...action.payload }, + }); + return; + } + + if (action.type === "undo") { + if (past.length === 0) return; + + const previous = past[past.length - 1]; + set(pastAtom, past.slice(0, -1)); + set(futureAtom, [createSnapshot(currentState), ...future]); + set(schedulerStateAtom, { + ...currentState, + events: previous.events, + config: previous.config, + }); + return; + } + + if (action.type === "redo") { + if (future.length === 0) return; + + const next = future[0]; + set(futureAtom, future.slice(1)); + set(pastAtom, [...past, createSnapshot(currentState)]); + set(schedulerStateAtom, { + ...currentState, + events: next.events, + config: next.config, + }); + } + } +); + +export const schedulerStateViewAtom = atom((get) => get(schedulerStateAtom)); +export const canUndoAtom = atom((get) => get(pastAtom).length > 0); +export const canRedoAtom = atom((get) => get(futureAtom).length > 0); +~~~ + +## 컨트롤 툴바 빌드 + +`src/components/Toolbar.tsx`를 생성합니다. 이 툴바는 다음을 수행합니다: + +- 뷰를 전환합니다(일/주/월) +- 이전/오늘/다음으로 네비게이트 +- undo/redo를 비활성화 상태로 표시 +- 읽기 전용 모드를 토글 + +~~~tsx +import { ButtonGroup, Button, Typography, Stack, FormControlLabel, Switch } from "@mui/material"; +import UndoIcon from "@mui/icons-material/Undo"; +import RedoIcon from "@mui/icons-material/Redo"; +import React from "react"; +import type { SchedulerView } from "../types"; + +export interface ToolbarProps { + currentView: SchedulerView; + currentDate: Date; + isReadOnly: boolean; + canUndo: boolean; + canRedo: boolean; + onUndo?: () => void; + onRedo?: () => void; + onNavigate?: (action: "prev" | "next" | "today") => void; + onReadOnlyChange?: (value: boolean) => void; + setView: (view: SchedulerView) => void; +} + +export default React.memo(function Toolbar({ + currentView, + currentDate, + isReadOnly, + canUndo, + canRedo, + onUndo, + onRedo, + onNavigate, + onReadOnlyChange, + setView, +}: ToolbarProps) { + return ( + + + {(["day", "week", "month"] as const).map((label) => ( + + ))} + + + + + + onReadOnlyChange?.(event.target.checked)} + inputProps={{ "aria-label": "Toggle read-only" }} + /> + } + /> + + + {new Date(currentDate)?.toLocaleDateString(undefined, { weekday: "short", month: "short", day: "numeric" })} + + + + + + + + ); +}); +~~~ + +## Scheduler를 Jotai에 연결하기 + +`src/components/Scheduler.tsx`를 생성합니다. 이 컴포넌트는 다음을 수행합니다: + +- 원자에서 `events/view/currentDate/config`를 읽습니다 +- Scheduler CRUD(`create/update/delete`)를 `data.save`로 연결합니다 +- undo/redo, 네비게이션, 읽기 전용 토글을 연결합니다 +- 내비게이션 바를 숨기고 커스텀 툴바를 사용합니다 + +~~~tsx +import { useCallback, useMemo } from "react"; +import { useAtomValue, useSetAtom } from "jotai"; +import ReactScheduler from "@dhtmlx/trial-react-scheduler"; +import "@dhtmlx/trial-react-scheduler/dist/react-scheduler.css"; + +import Toolbar from "./Toolbar"; +import { + canRedoAtom, + canUndoAtom, + schedulerActionsAtom, + schedulerStateViewAtom, +} from "../schedulerAtoms"; +import type { SchedulerEvent, SchedulerEventId, SchedulerView } from "../types"; + +type SaveAction = "create" | "update" | "delete"; +type SaveEntity = "event"; + +export default function DemoJotaiScheduler() { + const state = useAtomValue(schedulerStateViewAtom); + const dispatchAction = useSetAtom(schedulerActionsAtom); + const canUndo = useAtomValue(canUndoAtom); + const canRedo = useAtomValue(canRedoAtom); + + const { events, view, currentDate, config } = state; + const activeDate = useMemo(() => new Date(currentDate), [currentDate]); + const isReadOnly = Boolean((config as { readonly?: unknown }).readonly); + + const setCurrentDate = useCallback( + (dateMs: number) => dispatchAction({ type: "setCurrentDate", payload: dateMs }), + [dispatchAction] + ); + const setView = useCallback( + (nextView: SchedulerView) => dispatchAction({ type: "setView", payload: nextView }), + [dispatchAction] + ); + const undo = useCallback(() => dispatchAction({ type: "undo" }), [dispatchAction]); + const redo = useCallback(() => dispatchAction({ type: "redo" }), [dispatchAction]); + const updateReadOnly = useCallback( + (value: boolean) => dispatchAction({ type: "updateConfig", payload: { readonly: value } }), + [dispatchAction] + ); + + const handleDateNavigation = useCallback( + (action: "prev" | "next" | "today") => { + if (action === "today") { + setCurrentDate(Date.now()); + return; + } + + const step = action === "next" ? 1 : -1; + const date = new Date(currentDate); + + if (view === "day") { + date.setDate(date.getDate() + step); + } else if (view === "week") { + date.setDate(date.getDate() + step * 7); + } else { + date.setMonth(date.getMonth() + step); + } + + setCurrentDate(date.getTime()); + }, + [currentDate, view, setCurrentDate] + ); + + const handleViewChange = useCallback( + (mode: string, date: Date) => { + const nextView: SchedulerView = mode === "day" || mode === "week" || mode === "month" ? mode : "month"; + setView(nextView); + setCurrentDate(date.getTime()); + }, + [setView, setCurrentDate] + ); + + // Scheduler <-> Jotai data bridge + const dataBridge = useMemo( + () => ({ + save: (entity: SaveEntity, action: SaveAction, payload: unknown, id: unknown) => { + if (entity !== "event") return; + + switch (action) { + case "update": { + const eventData = + payload && typeof payload === "object" ? (payload as Partial) : ({} as Partial); + const eventId = eventData.id ?? id; + if (eventId == null) { + console.warn("Update called without an id", { payload, id }); + return; + } + + const updatedEvent = { ...eventData, id: eventId } as Partial & Pick; + dispatchAction({ type: "updateEvent", payload: updatedEvent }); + return updatedEvent; + } + case "create": { + const eventData = + payload && typeof payload === "object" + ? (payload as Omit & Partial>) + : null; + if (!eventData) { + console.warn("Create called without event payload", { payload }); + return; + } + return dispatchAction({ type: "createEvent", payload: eventData }); + } + case "delete": { + const deleteId = + payload && typeof payload === "object" + ? ((payload as { id?: unknown }).id ?? id) + : payload ?? id; + + if (deleteId == null) { + console.warn("Delete called without an id", { payload, id }); + return; + } + + dispatchAction({ type: "deleteEvent", payload: deleteId as SchedulerEventId }); + return deleteId; + } + default: + console.warn(`Unknown action: ${action}`); + return; + } + }, + }), + [dispatchAction] + ); + + const memoizedXY = useMemo(() => ({ nav_height: 0 }), []); + + return ( +
+ + + +
+ ); +} +~~~ + +## 앱에서 Scheduler 렌더링 + +`src/App.tsx`를 업데이트합니다: + +~~~tsx +import Scheduler from "./components/Scheduler"; +import "./App.css"; + +function App() { + return ; +} + +export default App; +~~~ + +## 요약 + +이제 React Scheduler가 Jotai로 완전히 구동됩니다. + +- Jotai 원자들이 `events`, `view`, `currentDate`, `config`를 단일 진실 소스로 보관합니다 +- Scheduler 편집은 타입이 지정된 Jotai 액션으로 연결된 `data.save`를 통해 이루어집니다 +- undo/redo는 이벤트/구성 변경에 대한 스냅샷 기반 이력으로 구현됩니다 +- 읽기 전용 구성 토글을 통해 Scheduler의 편집을 잠글 수 있습니다 +- 커스텀 툴바가 내비게이션, 뷰 전환 및 이력 제어를 처리합니다 + +## 다음 단계 + +- 이 예제의 개념을 [데이터 바인딩 및 상태 관리 기초](integrations/react/state/state-management-basics.md)에서 재검토하기 +- [React Scheduler 개요](integrations/react/overview.md)에서 Scheduler의 구성 및 템플레이팅 옵션을 살펴보기 +- API에서 이벤트를 로드/저장하고 원자 액션을 디스패치하여 지속성을 추가하기 +- 동일한 패턴을 다른 상태 관리 도구와 함께 살펴보기: + - [Redux Toolkit과 함께 React Scheduler 사용하기](integrations/react/state/redux-toolkit.md) + - [MobX와 함께 React Scheduler 사용하기](integrations/react/state/mobx.md) + - [XState와 함께 React Scheduler 사용하기](integrations/react/state/xstate.md) + - [Zustand과 함께 React Scheduler 사용하기](integrations/react/state/zustand.md) + - [Valtio와 함께 React Scheduler 사용하기](integrations/react/state/valtio.md) \ No newline at end of file diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/integrations/react/state/mobx.md b/i18n/ko/docusaurus-plugin-content-docs/current/integrations/react/state/mobx.md new file mode 100644 index 00000000..6188bf75 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/integrations/react/state/mobx.md @@ -0,0 +1,623 @@ +--- +title: MobX와 함께하는 React Scheduler 사용 +sidebar_label: MobX +description: "observable MobX 상태에서 React Scheduler를 렌더링하고 `data.save`를 통해 생성/수정/삭제를 처리하며 스냅샷 기반의 실행 취소/다시 실행을 지원합니다." +--- + +# React Scheduler - MobX 튜토리얼 + +이 튜토리얼은 **DHTMLX React Scheduler**를 Vite + React + TypeScript 앱에서 렌더링하고 이를 **MobX** 저장소에서 구동하는 방법을 보여줍니다. +마지막에는 **create/update/delete**, **뷰(view) + 날짜 탐색**, 이벤트 변경에 대한 **스냅샷 기반 Undo/Redo**, 그리고 **읽기 전용(Read-only)** 토글을 지원하는 작동하는 스케줄러를 얻게 됩니다. +또한 Scheduler 위에 배치되는 간단한 도구 모음도 함께 제공합니다. + +:::note +전체 소스 코드는 [GitHub에서 확인 가능합니다](https://github.com/DHTMLX/react-scheduler-mobx-starter). +::: + +구현 목표: + +- `events`, 현재의 `view`, 그리고 `date`를 소유하는 MobX 저장소 +- Scheduler 편집을 저장소 액션으로 변환하는 `data.save` 브리지 +- Scheduler 위에 위치하는 간단한 도구 모음(뷰, 탐색, undo/redo, 읽기 전용 토글) + +## 사전 지식 + +- React, TypeScript, Vite, 그리고 MobX에 대한 기초 지식 +- 데이터 바인딩 모드와 이 튜토리얼이 기반으로 하는 `data.save` 콜백 구조를 이해하기 위해 [데이터 바인딩 및 상태 관리 기초](integrations/react/state/state-management-basics.md) 문서를 읽어보는 것을 권장합니다. + +## 빠른 설정 - 프로젝트 생성하기 + +이번 단계에서는 Vite 프로젝트를 생성하고 의존성을 설치한 뒤 앱이 정상적으로 동작하는지 확인합니다. + +수행할 작업: + +- Vite React + TypeScript 프로젝트 생성 +- MobX + UI 의존성 설치 +- React Scheduler(평가 패키지) 설치 +- Scheduler가 뷰포트를 채우도록 기본 Vite 스타일 제거 + +시작하기 전에 [Node.js](https://nodejs.org/en/)를 설치합니다. + +Vite React + TypeScript 프로젝트를 생성: + +~~~bash +npm create vite@latest react-scheduler-mobx-demo -- --template react-ts +cd react-scheduler-mobx-demo +~~~ + +이제 필요한 의존성을 설치합니다. + +* npm 사용 시: +~~~bash +npm install mobx mobx-react-lite @mui/material @mui/icons-material @emotion/react @emotion/styled +~~~ + +* yarn 사용 시: +~~~bash +yarn add mobx mobx-react-lite @mui/material @mui/icons-material @emotion/react @emotion/styled +~~~ + +### React Scheduler 설치하기 + +React Scheduler 설치 방법은 [React Scheduler 설치 가이드](integrations/react/installation.md)를 참고합니다. + +이 튜토리얼에서는 평가 패키지를 사용합니다: + +```bash +npm install @dhtmlx/trial-react-scheduler +``` + +또는 + +```bash +yarn add @dhtmlx/trial-react-scheduler +``` + +Professional 패키지를 이미 사용하는 경우, 명령어와 임포트에서 `@dhtmlx/trial-react-scheduler`를 `@dhx/react-scheduler`로 교체해 주세요. +다음으로 개발 서버를 시작할 수 있습니다: + +~~~bash +npm run dev +~~~ + +이제 `http://localhost:5173`에서 React 프로젝트가 실행 중이어야 합니다. + +:::note +Scheduler가 페이지의 전체 공간을 차지하도록 `src/App.css`의 기본 Vite 스타일을 제거해 주세요. +다음과 같이 `src/App.css`를 업데이트합니다. +::: + +~~~css title="src/App.css" +#root, body { + margin: 0; + padding: 0; + height: 100%; + width: 100%; +} +~~~ + +## 샘플 데이터 설정 + +이 단계에서는 Scheduler가 모든 실행에서 동일하게 보이도록 Deterministic Seed 데이터를 생성합니다. + +수행할 작업: + +- `src/seed/data.ts`를 만들고 작은 이벤트 집합을 추가 +- Scheduler가 예측 가능한 상태에서 시작되도록 초기 `view`와 `date`를 내보냄 + +`src/seed/data.ts`를 생성: + +~~~ts title="src/seed/data.ts" +export type SchedulerView = "day" | "week" | "month"; + +export interface SeedEvent { + id: string | number; + start_date: string; + end_date: string; + text: string; +} + +export const seedEvents: SeedEvent[] = [ + { id: 1, start_date: "2025-08-11T02:00:00Z", end_date: "2025-08-11T10:20:00Z", text: "Product Strategy Hike" }, + { id: 2, start_date: "2025-08-12T06:00:00Z", end_date: "2025-08-12T11:00:00Z", text: "Tranquil Tea Time" }, + { id: 3, start_date: "2025-08-15T03:00:00Z", end_date: "2025-08-15T08:00:00Z", text: "Demo and Showcase" }, +]; + +export const seedDate = Date.parse("2025-08-15T00:00:00Z"); + +export const seedView: SchedulerView = "week"; +~~~ + +:::note +Companion 데모에는 시각적 효과를 더하기 위한 추가 이벤트가 포함되어 있습니다. +::: + +## 컨트롤 도구 모음 컴포넌트 구성하기 + +이 단계에서는 Scheduler 내비게이션과 이력(history)을 제어하는 간단하고 재사용 가능한 도구 모음을 구성합니다. + +수행할 작업: + +- `src/components/Toolbar.tsx` 생성 +- **Day / Week / Month** 버튼 추가 +- **Prev / Today / Next** 네비게이션 버튼 추가 +- 콜백에 연결된 **Undo / Redo** 버튼 추가 +- **Read-only** 토글 스위치 추가 + +`src/components/Toolbar.tsx` 생성: + +~~~tsx title="src/components/Toolbar.tsx" +import { ButtonGroup, Button, Typography, Stack, FormControlLabel, Switch } from "@mui/material"; +import UndoIcon from "@mui/icons-material/Undo"; +import RedoIcon from "@mui/icons-material/Redo"; +import React from "react"; + +export interface ToolbarProps { + currentView: string; + currentDate: Date; + isReadOnly: boolean; + canUndo?: boolean; + canRedo?: boolean; + onUndo?: () => void; + onRedo?: () => void; + onNavigate?: (action: "prev" | "next" | "today") => void; + onReadOnlyChange?: (value: boolean) => void; + setView: (view: "day" | "week" | "month") => void; +} + +export default React.memo(function Toolbar({ + currentView, + currentDate, + isReadOnly, + canUndo, + canRedo, + onUndo, + onRedo, + onNavigate, + onReadOnlyChange, + setView, +}: ToolbarProps) { + return ( + + + {(["day", "week", "month"] as const).map((label) => ( + + ))} + + + + + + + onReadOnlyChange?.(e.target.checked)} + inputProps={{ "aria-label": "Toggle read-only" }} + /> + } + /> + + + + {new Date(currentDate).toLocaleDateString(undefined, { + weekday: "short", + month: "short", + day: "numeric", + })} + + + + + + + + + ); +}); +~~~ + +## MobX 저장소 설정하기 + +이 단계에서는 Scheduler 상태를 소유하고 스냅샷 기반 Undo/Redo를 구현하는 MobX 저장소를 만듭니다. + +수행할 작업: + +- `src/store.ts` 생성 +- `events`, 현재의 `view`, `currentDate`, 그리고 `config`를 관찰 가능한 상태로 저장 +- `createEvent`, `updateEvent`, `deleteEvent` 메서드 구현 +- 읽기 전용 토글을 위한 `updateConfig` 추가 +- 과거/미래 히스토리 스택과 Undo/Redo 연산 추가 + +`src/store.ts` 생성: + +~~~ts title="src/store.ts" +import { makeAutoObservable } from "mobx"; +import type { SchedulerConfig } from "@dhtmlx/trial-react-scheduler"; +import { seedEvents, seedView, seedDate, type SeedEvent, type SchedulerView } from "./seed/data"; + +export interface SchedulerEvent extends SeedEvent { + /** + * Extra Scheduler fields are allowed. + * The demo only relies on id/start_date/end_date/text. + */ + [key: string]: unknown; +} + +interface Snapshot { + events: SchedulerEvent[]; + config: SchedulerConfig; +} + +function cloneJson(value: T): T { + return JSON.parse(JSON.stringify(value)) as T; +} + +class SchedulerStore { + events: SchedulerEvent[] = seedEvents as SchedulerEvent[]; + view: SchedulerView = seedView; + currentDate: number = seedDate; + config: SchedulerConfig = {}; + + past: Snapshot[] = []; + future: Snapshot[] = []; + maxHistory = 50; + + constructor() { + makeAutoObservable(this, {}, { autoBind: true }); + } + + get canUndo(): boolean { + return this.past.length > 0; + } + + get canRedo(): boolean { + return this.future.length > 0; + } + + private generateId(): string { + return `id_${Date.now().toString()}`; + } + + private snapshot(): Snapshot { + return { + events: cloneJson(this.events), + config: cloneJson(this.config), + }; + } + + private saveToHistory(): void { + this.past.push(this.snapshot()); + if (this.past.length > this.maxHistory) { + this.past.shift(); + } + this.future = []; + } + + private restore(snapshot: Snapshot): void { + this.events = snapshot.events; + this.config = snapshot.config; + } + + /** + * Navigation is not part of history: undo/redo in this demo is focused on event mutations. + */ + setCurrentDate(date: number): void { + this.currentDate = date; + } + + /** + * Navigation is not part of history: undo/redo in this demo is focused on event mutations. + */ + setView(view: SchedulerView): void { + this.view = view; + } + + updateConfig(partial: Partial): void { + this.saveToHistory(); + this.config = { ...this.config, ...partial }; + } + + /** + * Called by Scheduler's data processor (data.save) on event creation. + * + * Important: we return the created event with a final id (simulating a backend-generated id), + * so Scheduler can replace its temporary id and keep subsequent updates working correctly. + */ + createEvent(eventDraft: Partial): SchedulerEvent { + this.saveToHistory(); + + const id = this.generateId(); + const newEvent: SchedulerEvent = { + ...eventDraft, + id, + start_date: String(eventDraft.start_date ?? new Date().toISOString()), + end_date: String(eventDraft.end_date ?? new Date().toISOString()), + text: String(eventDraft.text ?? "(no title)"), + }; + + this.events = [...this.events, newEvent]; + return newEvent; + } + + updateEvent(updatedEvent: Partial & { id: string | number }): void { + this.saveToHistory(); + this.events = this.events.map((event) => { + if (String(event.id) === String(updatedEvent.id)) { + return { ...event, ...updatedEvent }; + } + return event; + }); + } + + deleteEvent(id: string | number): void { + this.saveToHistory(); + this.events = this.events.filter((event) => String(event.id) !== String(id)); + } + + undo(): void { + if (this.past.length === 0) { + return; + } + + const previous = this.past.pop(); + if (!previous) { + return; + } + + this.future.unshift(this.snapshot()); + this.restore(previous); + } + + redo(): void { + if (this.future.length === 0) { + return; + } + + const next = this.future.shift(); + if (!next) { + return; + } + + this.past.push(this.snapshot()); + this.restore(next); + } +} + +const schedulerStore = new SchedulerStore(); +export default schedulerStore; +~~~ + +## 메인 Scheduler 컴포넌트 생성 + +이 단계에서는 React Scheduler를 렌더링하고 MobX 저장소에 연결합니다. + +수행할 작업: + +- `src/components/Scheduler.tsx` 생성 +- 저장소 변경 시 재렌더링 되도록 `observer`로 컴포넌트 래핑 +- 저장소의 액션 호출로 create/update/delete를 수행하는 `data.save` 다리 생성 +- 내부 Scheduler 뷰 변경을 상태와 동기화하는 `onViewChange` 핸들러 추가 +- 읽기 전용 토글을 `updateConfig`를 통해 연결 +- Scheduler의 내장 내비게이션 바를 숨기고 도구 모음을 사용하도록 구성 + +`src/components/Scheduler.tsx` 생성: + +~~~tsx title="src/components/Scheduler.tsx" +import { observer } from "mobx-react-lite"; +import ReactScheduler from "@dhtmlx/trial-react-scheduler"; +import "@dhtmlx/trial-react-scheduler/dist/react-scheduler.css"; +import Toolbar from "./Toolbar"; +import schedulerStore, { type SchedulerEvent } from "../store"; +import type { SchedulerView } from "../seed/data"; +import { useCallback, useMemo } from "react"; + +const DemoMobxScheduler = observer(() => { + const { + events, + view, + currentDate, + config, + canUndo, + canRedo, + setView, + setCurrentDate, + updateConfig, + createEvent, + updateEvent, + deleteEvent, + undo, + redo, + } = schedulerStore; + + const activeDate = useMemo(() => new Date(currentDate), [currentDate]); + + const handleDateNavigation = useCallback( + (action: "prev" | "next" | "today") => { + if (action === "today") { + setCurrentDate(Date.now()); + return; + } + + const step = action === "next" ? 1 : -1; + const date = new Date(currentDate); + + if (view === "day") { + date.setDate(date.getDate() + step); + } else if (view === "week") { + date.setDate(date.getDate() + step * 7); + } else { + date.setMonth(date.getMonth() + step); + } + + setCurrentDate(date.getTime()); + }, + [currentDate, view, setCurrentDate] + ); + + const handleViewChange = useCallback( + (mode: string, date: Date) => { + const nextView: SchedulerView = + mode === "day" || mode === "week" || mode === "month" ? mode : "month"; + setView(nextView); + setCurrentDate(date.getTime()); + }, + [setView, setCurrentDate] + ); + + const isReadOnly = Boolean((config as { readonly?: unknown }).readonly); + const handleReadOnlyChange = useCallback( + (value: boolean) => updateConfig({ readonly: value }), + [updateConfig] + ); + + type DataAction = "create" | "update" | "delete"; + + const dataBridge = useMemo( + () => ({ + save: (entity: string, action: string, payload: unknown, id: string | number) => { + if (entity !== "event") { + return; + } + + const safeAction = action as DataAction; + + if (safeAction === "update") { + return updateEvent(payload as Partial & { id: string | number }); + } + + if (safeAction === "create") { + // Important: return the created event with the final id. + // This simulates a backend-generated id and keeps subsequent updates working. + return createEvent(payload as Partial); + } + + if (safeAction === "delete") { + return deleteEvent(id); + } + + console.warn(`Unknown data.save action: ${action}`); + return; + }, + }), + [updateEvent, createEvent, deleteEvent] + ); + + const handleUndo = useCallback(() => undo(), [undo]); + const handleRedo = useCallback(() => redo(), [redo]); + + const memoizedXY = useMemo(() => ({ nav_height: 0 }), []); + + return ( +
+ + + +
+ ); +}); + +export default DemoMobxScheduler; +~~~ + +마지막으로 `src/App.tsx`를 업데이트하여 Scheduler 컴포넌트를 렌더링하도록 합니다: + +~~~tsx title="src/App.tsx" +import { useEffect } from "react"; +import Scheduler from "./components/Scheduler"; +import "./App.css"; + +function App() { + useEffect(() => { + document.title = "DHTMLX React Scheduler - MobX Demo"; + }, []); + + return ; +} + +export default App; +~~~ + +이제 프로젝트는 커스텀 도구 모음이 위에 있는 Scheduler를 렌더링해야 합니다. + +## 애플리케이션 실행 + +이 단계에서는 데모를 실행하고 편집 및 히스토리 기능이 작동하는지 확인합니다. + +수행할 작업: + +- 개발 서버를 시작합니다(이미 실행 중이 아니면) +- 이벤트 생성/수정/드래그를 수행하고 `data.save`를 통해 저장소가 업데이트되는지 확인 +- Undo/Redo를 사용하여 이벤트 변경을 되돌리거나 적용 +- 읽기 전용 모드를 토글하여 Scheduler를 편집에서 잠그기 + +실행 방법: + +~~~bash +npm run dev +~~~ + +다음과 같이 시도해 보세요: + +- 캘린더에서 더블클릭 또는 내장 편집 UI를 사용해 이벤트를 생성 +- 이벤트의 텍스트/시간을 수정 +- 이벤트를 새로운 시간대로 드래그 +- 도구 모음의 **Undo** / **Redo**를 사용 +- Scheduler를 편집 불가로 잠그려면 **Read-only** 토글을 켜기 + +## 요약 + +이 튜토리얼에서 배운 점: + +- Vite + React 프로젝트를 생성했습니다 +- React Scheduler를 추가하고 MobX 저장소에 연결했습니다 +- `past`/`future` 히스토리 배열을 이용한 스냅샷 기반 Undo/Redo를 구현했습니다 +- 이벤트, 뷰/날짜, 그리고 설정을 관찰 가능한 MobX 상태에서 제어했습니다 +- Scheduler 변경이 저장소 액션으로 전환되도록 `data.save` 콜백을 사용했습니다 +- 읽기 전용 구성 토글로 Scheduler를 편집에서 잠글 수 있습니다 + +이 구조는 Scheduler 컴포넌트를 완전히 선언적 상태로 유지하면서 모든 변이 로직과 히스토리 관리는 MobX 상태 내부에 캡슐화됩니다. + +## 다음 단계 + +더 깊이 살펴보고 싶다면: + +- [데이터 바인딩 및 상태 관리 기초](integrations/react/state/state-management-basics.md) 문서를 다시 확인해 데이터 바인딩의 개념과 이 튜토리얼이 기반으로 하는 `data.save` 흐름을 이해하기 +- [React Scheduler 개요](integrations/react/overview.md)에서 Scheduler의 구성 및 템플레이팅 옵션을 탐색하기 +- 다른 상태 관리 도구에서도 같은 패턴을 살펴보기: + - [Redux Toolkit과 함께하는 React Scheduler](integrations/react/state/redux-toolkit.md) + - [Zustand와 함께하는 React Scheduler](integrations/react/state/zustand.md) + - [XState와 함께하는 React Scheduler](integrations/react/state/xstate.md) + - [Jotai와 함께하는 React Scheduler](integrations/react/state/jotai.md) + - [Valtio와 함께하는 React Scheduler](integrations/react/state/valtio.md) \ No newline at end of file diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/integrations/react/state/redux-toolkit.md b/i18n/ko/docusaurus-plugin-content-docs/current/integrations/react/state/redux-toolkit.md new file mode 100644 index 00000000..a1b20a2a --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/integrations/react/state/redux-toolkit.md @@ -0,0 +1,590 @@ +--- +title: 리액트 스케줄러 - Redux Toolkit 튜토리얼 +sidebar_label: Redux Toolkit +description: DHTMLX React Scheduler를 Redux Toolkit과 통합하는 방법을 알아보고, 이벤트 CRUD, 뷰/날짜 동기화, 그리고 스냅샷 기반의 undo/redo를 포함합니다. +--- + +# 리액트 스케줄러 - Redux Toolkit 튜토리얼 + +이 튜토리얼은 **DHTMLX React Scheduler**를 **Redux Toolkit** 저장소에 연결하는 방법을 보여줍니다. 이벤트와 UI 상태(뷰/날짜/구성)를 Redux에 보관하고, Scheduler 편집을 `data.save`를 통해 라우팅하며, 스냅샷 기반의 히스토리로 **undo/redo**를 추가하고 **읽기 전용(read-only)** 토글을 제공합니다. + +:::note +전체 소스 코드는 [GitHub에서 확인할 수 있습니다](https://github.com/DHTMLX/react-scheduler-redux-starter). +::: + +## 전제 조건 + +- Node.js (권장 LTS) +- React + TypeScript 기본 지식 +- Redux 기본 개념(액션, 리듀서, 스토어). 복습이 필요하다면 Redux 문서를 참고하세요: https://redux.js.org/ + +## Quick setup - 프로젝트 생성 + +Vite + React + TS 프로젝트를 생성합니다: + +~~~bash +npm create vite@latest scheduler-redux-demo -- --template react-ts +cd scheduler-redux-demo +npm install +~~~ + +Redux Toolkit + React Redux를 설치합니다: + +~~~bash +npm install @reduxjs/toolkit react-redux +~~~ + +데모 도구 모음에 사용되는 Material UI를 설치합니다: + +~~~bash +npm install @mui/material @mui/icons-material @emotion/react @emotion/styled +~~~ + +### React Scheduler 설치 + +다음의 [React Scheduler 설치 가이드](integrations/react/installation.md)에 따라 React Scheduler를 설치합니다. + +이번 튜토리얼에서는 평가 패키지를 사용합니다: + +```bash +npm install @dhtmlx/trial-react-scheduler +``` + +또는 + +```bash +yarn add @dhtmlx/trial-react-scheduler +``` + +Professional 패키지를 이미 사용하는 경우, 명령과 임포트에서 `@dhtmlx/trial-react-scheduler`를 `@dhx/react-scheduler`로 교체합니다. + +개발 서버를 실행합니다: + +~~~bash +npm run dev +~~~ + +:::note +Scheduler를 페이지 전체에 차지하도록 만들려면 `src/App.css`의 기본 스타일을 제거하고 아래를 추가합니다: + +~~~css +#root { + margin: 0; + padding: 0; + height: 100%; + width: 100%; +} + +body { + margin: 0; +} +~~~ +::: + +## Redux 저장소 구성 + +`src/redux/store.ts`를 만들고 `scheduler` 리듀서를 Redux 저장소에 연결합니다: + +~~~ts +import { configureStore } from "@reduxjs/toolkit"; +import schedulerReducer from "./schedulerSlice"; + +export const store = configureStore({ + reducer: { + scheduler: schedulerReducer, + }, +}); + +export type RootState = ReturnType; +export type AppDispatch = typeof store.dispatch; +~~~ + +## 공유 타입 정의 + +`src/redux/types.ts`를 생성합니다. 이 타입은 슬라이스, 액션, 컴포넌트 전반에 걸쳐 공유됩니다: + +~~~ts +export type SchedulerView = "day" | "week" | "month"; + +export interface SchedulerEvent { + id: string | number; + start_date: string; + end_date: string; + text: string; + + // Scheduler가 런타임에 추가 필드를 붙일 수 있도록 허용 + [key: string]: unknown; +} + +export type SchedulerConfig = Record; + +export interface SchedulerSnapshot { + events: SchedulerEvent[]; + config: SchedulerConfig; +} +~~~ + +- `SchedulerEvent`는 런타임에 추가 필드를 붙일 수 있도록 인덱스 시그니처를 사용합니다. +- `SchedulerSnapshot`은 undo/redo에 필요한 데이터(이벤트 + 구성)를 포착합니다. + +## 샘플 데이터 설정 + +`src/seed/data.ts`를 만들고 몇 개의 이벤트와 초기 UI 상태를 추가합니다. 주의: `currentDate`는 **숫자**(타임스탬프)로 저장되어 Redux 상태의 직렬화를 유지합니다. + +~~~ts +export const seedEvents = [ + { id: 1, start_date: "2025-08-11T02:00:00Z", end_date: "2025-08-11T10:20:00Z", text: "Product Strategy Hike" }, + { id: 2, start_date: "2025-08-12T06:00:00Z", end_date: "2025-08-12T11:00:00Z", text: "Tranquil Tea Time" }, + { id: 3, start_date: "2025-08-15T03:00:00Z", end_date: "2025-08-15T08:00:00Z", text: "Demo and Showcase" }, +]; + +export const seedDate = Date.parse("2025-08-15T00:00:00Z"); +export const seedView = "week"; +~~~ + +:::note +동반 데모에는 더 풍부한 시각화를 위한 추가 이벤트가 포함되어 있습니다. +::: + +## Scheduler 동작 정의(생성/수정/삭제) + +Scheduler 편집은 Redux 액션을 통해 라우팅됩니다. `src/redux/actions.ts`를 만듭니다. + +`createEvent` 액션은 안정적인 ID를 생성하기 위해 "prepare" 콜백을 사용합니다(백엔드에서 생성된 ID를 시뮬레이션). 또한 디스패치된 페이로드를 일관되게 반환하는 작은 헬퍼(`dispatchAction`)를 추가합니다. 이 헬퍼는 Scheduler의 `data.save`가 생성/수정 엔티티를 반환할 수 있기 때문입니다. + +~~~ts +import { createAction } from "@reduxjs/toolkit"; +import type { Dispatch } from "redux"; +import type { SchedulerEvent } from "./types"; + +// 백엔드에서 ID를 받는 것을 시뮬레이션합니다. +const generateId = () => `id_${Date.now().toString()}`; + +export const createEvent = createAction( + "schedulerDomain/createEvent", + (eventData: Omit, "id">) => { + const newEvent: SchedulerEvent = { + ...(eventData as Omit), + id: generateId(), + }; + return { payload: newEvent }; + } +); + +export const deleteEvent = createAction( + "schedulerDomain/deleteEvent", + (id: SchedulerEvent["id"]) => ({ payload: id }) +); + +export const updateEvent = createAction( + "schedulerDomain/updateEvent", + (eventData: Partial & Pick) => ({ payload: eventData }) +); + +// 디스패치를 실행하고 일관되게 payload를 반환하는 헬퍼 함수 +export function dispatchAction( + dispatch: Dispatch, + actionCreator: (arg: Arg) => { type: string; payload: Payload }, + arg: Arg +): Payload { + return dispatch(actionCreator(arg)).payload; +} +~~~ + +## Redux 슬라이스 생성 + +이제 `src/redux/schedulerSlice.ts`를 만듭니다. 이 슬라이스는 다음을 저장합니다: + +- `events`(스케줄러 데이터) +- `currentDate`(타임스탬프) +- `view`(`day | week | month`) +- `config`(스케줄러 구성 객체, 포함 `readonly`) +- `past` / `future`(undo/redo를 위한 스냅샷 배열) + +Undo/redo는 스냅샷을 직접 슬라이스에 통합하여 구현합니다. 데이터를 수정하기 전마다 `pushHistory`가 현재 이벤트와 구성을 스냅샷으로 저장합니다. `undo` 와 `redo` 리듀서는 현재 상태를 히스토리의 스냅샷으로 교환합니다. + +~~~ts +import { createSlice, type PayloadAction } from "@reduxjs/toolkit"; +import { seedEvents, seedDate, seedView } from "../seed/data"; +import { createEvent, deleteEvent, updateEvent } from "./actions"; +import type { SchedulerConfig, SchedulerEvent, SchedulerSnapshot, SchedulerView } from "./types"; + +interface SchedulerState { + events: SchedulerEvent[]; + currentDate: number; + view: SchedulerView; + config: SchedulerConfig; + + past: SchedulerSnapshot[]; + future: SchedulerSnapshot[]; + maxHistory: number; +} + +const deepCopy = (value: T): T => { + // 이 데모에 충분한 JSON 복제: + // - 이벤트/구성은 순수 객체 + // - undo/redo를 위한 불변 스냅샷 + return JSON.parse(JSON.stringify(value)) as T; +}; + +const createSnapshot = (state: SchedulerState): SchedulerSnapshot => ({ + events: deepCopy(state.events), + config: deepCopy(state.config), +}); + +const pushHistory = (state: SchedulerState) => { + state.past.push(createSnapshot(state)); + + if (state.maxHistory > 0 && state.past.length > state.maxHistory) { + state.past.shift(); + } + + state.future = []; +}; + +const initialState: SchedulerState = { + events: seedEvents as unknown as SchedulerEvent[], + currentDate: seedDate, + view: seedView as SchedulerView, + config: {}, + + past: [], + future: [], + maxHistory: 50, +}; + +const schedulerSlice = createSlice({ + name: "scheduler", + initialState, + reducers: { + undo(state) { + if (state.past.length === 0) return; + + const previous = state.past[state.past.length - 1]; + const newFuture = createSnapshot(state as SchedulerState); + + state.events = previous.events; + state.config = previous.config; + state.past = state.past.slice(0, -1); + state.future = [newFuture, ...state.future]; + }, + redo(state) { + if (state.future.length === 0) return; + + const next = state.future[0]; + const newPast = createSnapshot(state as SchedulerState); + + state.events = next.events; + state.config = next.config; + state.future = state.future.slice(1); + state.past = [...state.past, newPast]; + }, + + // 사용자가 수행한 네비게이션은 undo 가능行动이 아닙니다. + setCurrentDate(state, { payload }: PayloadAction) { + state.currentDate = payload; + }, + setView(state, { payload }: PayloadAction) { + state.view = payload; + }, + + updateConfig(state, { payload }: PayloadAction>) { + pushHistory(state as SchedulerState); + state.config = { ...state.config, ...payload }; + }, + }, + extraReducers: (builder) => { + builder + .addCase(createEvent, (state, action) => { + pushHistory(state as SchedulerState); + state.events.push(action.payload); + }) + .addCase(deleteEvent, (state, action) => { + pushHistory(state as SchedulerState); + state.events = state.events.filter((e) => String(e.id) !== String(action.payload)); + }) + .addCase(updateEvent, (state, action) => { + pushHistory(state as SchedulerState); + + const index = state.events.findIndex((e) => String(e.id) === String(action.payload.id)); + if (index !== -1) { + state.events[index] = { ...state.events[index], ...action.payload }; + } + }); + }, +}); + +export const { undo, redo, setCurrentDate, setView, updateConfig } = schedulerSlice.actions; +export default schedulerSlice.reducer; +~~~ + +## 컨트롤 도구 모음(Toolbar) 구성 + +`src/components/Toolbar.tsx`를 만듭니다. 이는 다음 기능을 가진 간단한 MUI 도구 모음입니다: + +- 뷰 전환(day/week/month) +- 이전/오늘/다음으로 이동 +- undo/redo +- 읽기 전용 모드 토글 + +~~~tsx +import { ButtonGroup, Button, Typography, Stack, FormControlLabel, Switch } from "@mui/material"; +import UndoIcon from "@mui/icons-material/Undo"; +import RedoIcon from "@mui/icons-material/Redo"; +import React from "react"; +import type { SchedulerView } from "../redux/types"; + +export interface ToolbarProps { + currentView: SchedulerView; + currentDate: Date; + isReadOnly: boolean; + canUndo: boolean; + canRedo: boolean; + onUndo?: () => void; + onRedo?: () => void; + onNavigate?: (action: "prev" | "next" | "today") => void; + onReadOnlyChange?: (value: boolean) => void; + setView: (view: SchedulerView) => void; +} + +export default React.memo(function Toolbar({ + currentView, + currentDate, + isReadOnly, + canUndo, + canRedo, + onUndo, + onRedo, + onNavigate, + onReadOnlyChange, + setView, +}: ToolbarProps) { + return ( + + + {(["day", "week", "month"] as const).map((l) => ( + + ))} + + + + + + onReadOnlyChange?.(e.target.checked)} + inputProps={{ "aria-label": "Toggle read-only" }} + /> + } + /> + + + {new Date(currentDate)?.toLocaleDateString(undefined, { weekday: "short", month: "short", day: "numeric" })} + + + + + + + + ); +}); +~~~ + +## Redux에 Scheduler 연결 + +`src/components/Scheduler.tsx`를 만듭니다. 이 컴포넌트는 다음을 수행합니다: + +- 플랫(flat) Redux 상태에서 `events`/`view`/`currentDate`/`config`를 읽습니다 +- Redux 액션을 디스패치하는 `data.save` 콜백을 노출합니다 +- `save`에서 생성된/수정된 엔티티를 반환하여 Scheduler의 내부 기록과 동기화합니다 +- `undo/redo` 및 `읽기 전용(read-only)` 구성 토글을 연동합니다 +- 내장 네비게이션 바를 숨기고 커스텀 도구 모음을 사용합니다 + +~~~tsx +import { useCallback, useMemo } from "react"; +import { useDispatch, useSelector } from "react-redux"; + +// 트라이얼 임포트: +// import ReactScheduler from "@dhtmlx/trial-react-scheduler"; +// import "@dhtmlx/trial-react-scheduler/dist/react-scheduler.css"; + +// 프로 임포트: +import ReactScheduler from "@dhx/react-scheduler"; +import "@dhx/react-scheduler/dist/react-scheduler.css"; + +import Toolbar from "./Toolbar"; +import { redo, setCurrentDate, setView, undo, updateConfig } from "../redux/schedulerSlice"; +import { createEvent, updateEvent, deleteEvent, dispatchAction } from "../redux/actions"; +import type { AppDispatch, RootState } from "../redux/store"; +import type { SchedulerEvent, SchedulerView } from "../redux/types"; + +export default function ReactSchedulerReduxDemo() { + const dispatch = useDispatch(); + const { past, future, events, view, currentDate, config } = useSelector((s: RootState) => s.scheduler); + const canUndo = past.length > 0; + const canRedo = future.length > 0; + const activeDate = useMemo(() => new Date(currentDate), [currentDate]); + const isReadOnly = Boolean((config as { readonly?: unknown }).readonly); + + const handleDateNavigation = useCallback((action: "prev" | "next" | "today") => { + if (action === "today") { + dispatch(setCurrentDate(Date.now())); + return; + } + + const step = action === "next" ? 1 : -1; + const date = new Date(activeDate); + + if (view === "day") { + date.setDate(date.getDate() + step); + } else if (view === "week") { + date.setDate(date.getDate() + step * 7); + } else { + date.setMonth(date.getMonth() + step); + } + dispatch(setCurrentDate(date.getTime())); + }, [activeDate, view, dispatch]); + + // Scheduler <-> Redux 데이터 다리 + const dataBridge = useMemo(() => ({ + save: (entity: string, action: string, payload: unknown, id: unknown) => { + if (entity !== "event") return; + + switch (action) { + case "update": { + const eventData = payload && typeof payload === "object" ? (payload as Record) : {}; + const eventId = (eventData as Record).id ?? id; + if (eventId == null) { + console.warn("Update called without an id", { payload, id }); + return; + } + + const eventWithId = { ...eventData, id: eventId } as Partial & Pick; + return dispatchAction(dispatch, updateEvent, eventWithId); + } + case "create": + return dispatchAction(dispatch, createEvent, payload as Omit, "id">); + case "delete": { + const deleteId = + payload && typeof payload === "object" + ? (payload as Record).id ?? id + : payload ?? id; + if (deleteId == null) { + console.warn("Delete called without an id", { payload, id }); + return; + } + return dispatchAction(dispatch, deleteEvent, deleteId as SchedulerEvent["id"]); + } + default: + console.warn(`Unknown action: ${action}`); + return; + } + }, + }), [dispatch]); + + const handleViewChange = useCallback( + (mode: string, date: Date) => { + const nextView: SchedulerView = mode === "day" || mode === "week" || mode === "month" ? mode : "month"; + dispatch(setView(nextView)); + dispatch(setCurrentDate(date.getTime())); + }, + [dispatch] + ); + + const handleSetView = useCallback((nextView: SchedulerView) => dispatch(setView(nextView)), [dispatch]); + + const handleUndo = useCallback(() => dispatch(undo()), [dispatch]); + const handleRedo = useCallback(() => dispatch(redo()), [dispatch]); + const handleReadOnlyChange = useCallback( + (value: boolean) => dispatch(updateConfig({ readonly: value })), + [dispatch] + ); + const memoizedXY = useMemo(() => ({ nav_height: 0 }), []); + + return ( +
+ + + +
+ ); +} +~~~ + +## Redux Provider 연결 + +마지막으로 애플리케이션을 Redux `Provider`로 감쌉니다. `src/App.tsx`를 업데이트합니다: + +~~~tsx +import { Provider } from "react-redux"; +import { store } from "./redux/store"; +import Scheduler from "./components/Scheduler"; +import "./App.css"; + +function App() { + return ( + + + + ); +} + +export default App; +~~~ + +## 요약 + +이제 React Scheduler가 Redux Toolkit으로 완전히 구동됩니다: + +- Scheduler는 Redux에서 `events`, `view`, `currentDate`, `config`를 읽습니다 +- 사용자의 편집은 `data.save`를 통해 Redux 액션으로 라우팅됩니다 +- Scheduler가 프롭스로 업데이트된 `events`를 받기 때문에 UI가 동기화됩니다 +- undo/redo는 슬라이스에 직접 통합된 스냅샷 기반 히스토리로 구현됩니다 +- 읽기 전용 구성 토글을 통해 Scheduler를 편집에서 잠글 수 있습니다 + +## 앞으로의 내용 + +- 이 예제의 개념을 [Data Binding & State Management Basics](integrations/react/state/state-management-basics.md)에서 다시 살펴보기 +- [React Scheduler 개요](integrations/react/overview.md)에서 Scheduler의 구성 및 템플레이팅 옵션을 탐색하기 +- 비동기 thunk를 디스패치하고 슬라이스를 적절히 업데이트하여 API에서 이벤트를 로드/저장하는 방식으로 지속성을 추가하기 +- 동일한 패턴을 다른 상태 관리 도구와 함께 적용하기: + - [Using React Scheduler with MobX](integrations/react/state/mobx.md) + - [Using React Scheduler with XState](integrations/react/state/xstate.md) + - [Using React Scheduler with Zustand](integrations/react/state/zustand.md) + - [Using React Scheduler with Valtio](integrations/react/state/valtio.md) + - [Using React Scheduler with Jotai](integrations/react/state/jotai.md) \ No newline at end of file diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/integrations/react/state/state-management-basics.md b/i18n/ko/docusaurus-plugin-content-docs/current/integrations/react/state/state-management-basics.md new file mode 100644 index 00000000..27023592 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/integrations/react/state/state-management-basics.md @@ -0,0 +1,301 @@ +--- +title: React Scheduler의 데이터 바인딩 및 관리 기본 +sidebar_label: 기본 +description: "React Scheduler의 두 가지 데이터 바인딩 모델과 React 상태 및 상태 관리 도구의 기본 패턴에 대한 개요." +--- + +# React Scheduler의 데이터 바인딩 및 상태 관리 + +React Scheduler는 두 가지 데이터 바인딩 패턴을 지원합니다: + +1. **소스 오브 트루스로서의 React 상태**(대부분의 React 앱에 대해 권장) +2. **소스 오브 트루스로서의 Scheduler**(특수하고 고처리량 케이스에 유용) + +두 모델은 모두 유효합니다. 화면당 하나의 모델을 선택하고 일관되게 유지하세요. + +아직 기본 차트를 렌더링하지 않았다면 [빠른 시작](integrations/react/quick-start.md)으로 시작하세요. + +## 데이터 모델 + +### 소스 오브 트루스로서의 React 상태(권장) + +이 모델에서: + +- `events`(종종 `view`/`date`도 함께)를 React 상태나 상태 관리 도구에 보관합니다 +- 그 상태를 ``의 props로 전달합니다 +- 사용자가 데이터를 편집하면 Scheduler가 `data.save` / `data.batchSave`를 호출합니다 +- 상태를 업데이트하면 React가 새 props로 Scheduler를 다시 렌더링합니다 + +다른 React 컴포넌트가 Scheduler 데이터와 동기화되어 있어야 할 때 이 모델을 사용하세요. + +### Scheduler를 진실의 소스로 사용 + +이 모델에서: + +- Scheduler가 내부적으로 데이터를 로드하고 수정합니다 +- 필요에 따라 편집 내용을 백엔드 엔드포인트로 전달할 수 있습니다 +- React는 모든 개별 이벤트 업데이트를 상태에 미러링하지 않습니다 + +React가 개별 Scheduler 변경을 즉시 반영할 필요가 없을 때 이 모델을 사용하세요. + +## React state as source of truth {#reactstateasthesourceoftruth} + +### 최소 예제 + +```tsx +import { useMemo, useState } from "react"; +import ReactScheduler, { type Event } from "@dhtmlx/trial-react-scheduler"; +import "@dhtmlx/trial-react-scheduler/dist/react-scheduler.css"; + +import { seedEvents } from "./seed/data"; + +export default function ReactStateScheduler() { + const [events, setEvents] = useState(seedEvents); + + const data = useMemo( + () => ({ + save: (entity: string, action: string, item: Event, id: string | number) => { + if (entity !== "event") return; + + if (action === "create") { + setEvents((prev) => [...prev, item]); + return; + } + + if (action === "update") { + setEvents((prev) => prev.map((e) => (e.id === id ? item : e))); + return; + } + + if (action === "delete") { + setEvents((prev) => prev.filter((e) => e.id !== id)); + } + }, + }), + [] + ); + + return ( +
+ +
+ ); +} +``` + +이 패턴은 React를 이벤트 데이터의 정식 소유자로 만듭니다. + +## `data.save`로 업데이트 처리 {#handlingchangeswithdatasave} + +`data.save`는 사용자 변경마다 호출됩니다: + +```ts +(entity: string, action: string, item: any, id: string | number) => void | Promise +``` + +Scheduler 이벤트 CRUD의 경우: + +- `entity`는 `"event"` +- `action`은 `"create" | "update" | "delete"` +- `item`은 생성/수정/삭제된 이벤트 +- `id`는 영향을 받은 이벤트의 ID + +### 백엔드 지향 예제 + +```tsx +const data = { + save: async (entity: string, action: string, item: any, id: string | number) => { + if (entity !== "event") return; + + if (action === "create") { + const response = await fetch("/api/events", { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify(item), + }); + + const created = await response.json(); + return { id: created.id }; + } + + if (action === "update") { + await fetch(`/api/events/${id}`, { + method: "PUT", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify(item), + }); + return; + } + + if (action === "delete") { + await fetch(`/api/events/${id}`, { method: "DELETE" }); + } + }, +}; +``` + +백엔드가 생성 시 임시 ID를 realId로 대체하는 경우 Scheduler가 클라이언트와 서버 ID를 조정할 수 있도록 `{ id: realId }`를 반환하세요. + +## `data.batchSave`로 대량 업데이트 + +`data.batchSave`는 짧은 시간에 많은 변경이 발생할 때(예: 촘촘한 편집 세션) 유용합니다. + +다음과 같은 상황에서 사용하세요: + +- 그룹화된 변경으로 요청 수를 줄이고자 할 때 +- 하나의 리듀서/스토어 트랜잭션에서 업데이트를 처리할 때 + +```tsx + { + await fetch("/api/events/batch", { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify(changes), + }); + }, + }} +/> +``` + +간단한 개별 변경 로직에는 `save`를, 그룹화된 동기화에는 `batchSave`를 사용하세요. + +## React 상태로 데이터 로딩 + +React 주도 모델에서 Scheduler는 React 상태에서 데이터를 가져옵니다. 일반적인 소스는: + +- 로컬 컴포넌트 상태 +- 글로벌 상태 관리 도구(Redux Toolkit, Zustand, MobX, XState, Jotai, Valtio) +- API 호출 + +### 로컬 상태 소스 + +```tsx +import { useState } from "react"; +import ReactScheduler, { type Event } from "@dhtmlx/trial-react-scheduler"; +import { seedEvents, seedView, seedDate } from "./seed/data"; + +export default function LocalStateExample() { + const [events] = useState(seedEvents); + + return ( + + ); +} +``` + +### 상태 관리 도구 소스 + +모든 라이브러리는 동일한 흐름을 따릅니다: + +- selector/hook이 상태를 읽습니다 +- props가 Scheduler에 데이터를 공급합니다 +- `data.save`가 액션/스토어 변이를 디스패치합니다 + +```tsx +const events = useSchedulerStore((s) => s.events); +const onSave = useSchedulerStore((s) => s.handleSave); + +; +``` + +상태 관리 도구 튜토리얼들: + +- [Redux Toolkit으로 React Scheduler 사용](integrations/react/state/redux-toolkit.md) +- [Zustand로 React Scheduler 사용](integrations/react/state/zustand.md) +- [MobX로 React Scheduler 사용](integrations/react/state/mobx.md) +- [XState로 React Scheduler 사용](integrations/react/state/xstate.md) +- [Jotai로 React Scheduler 사용](integrations/react/state/jotai.md) +- [Valtio로 React Scheduler 사용](integrations/react/state/valtio.md) + +### API 로딩 소스 + +```tsx +import { useEffect, useState } from "react"; +import ReactScheduler, { type Event } from "@dhtmlx/trial-react-scheduler"; + +export default function SchedulerWithApi() { + const [events, setEvents] = useState(null); + + useEffect(() => { + let disposed = false; + + (async () => { + const response = await fetch("/api/events"); + const payload = await response.json(); + if (!disposed) setEvents(payload.events || []); + })(); + + return () => { + disposed = true; + }; + }, []); + + if (!events) return
Loading Scheduler...
; + + return ; +} +``` + +## Scheduler를 진실의 소스로 {#schedulerasthesourceoftruth} + +이 모드에서 React는 컴포넌트를 렌더링하지만 정식 이벤트 상태를 보유하지 않습니다. + +### URL 전송 예제 + +```tsx + +``` + +### 콜백 전송 예제 + +```tsx + { + const response = await fetch("/api/scheduler/load"); + return response.json(); + }, + save: async (entity, action, item, id) => { + await fetch("/api/scheduler/save", { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ entity, action, item, id }), + }); + }, + }} +/> +``` + +이 접근 방식은 Scheduler가 주된 런타임 저장소로 남아 있고 React가 모든 단일 업데이트를 렌더링할 필요가 없을 때 사용합니다. + +## 올바른 모델 선택 + +다음 상황에서 **React 주도형** 모델을 사용하세요: + +- 여러 React 컴포넌트가 Scheduler 데이터에 의존할 때 +- 예측 가능한 글로벌 상태 통합이 필요할 때 +- 앱 상태에서 직관적인 실행 취소/다시 실행이 필요할 때 + +다음 상황에서 **Scheduler 주도형** 모델을 사용하세요: + +- React가 대부분 셸/레이아웃인 경우 +- Scheduler가 런타임 변이를 관리하는 것을 선호할 때 +- 서버 전송이 주요 동기화 메커니즘인 경우 + +## 다음 단계 + +- [React Scheduler 개요](integrations/react/overview.md#bindingdata) +- [React Scheduler 구성](integrations/react/configuration-props.md) +- [서버 통합](guides/server-integration.md) \ No newline at end of file diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/integrations/react/state/valtio.md b/i18n/ko/docusaurus-plugin-content-docs/current/integrations/react/state/valtio.md new file mode 100644 index 00000000..a659b1d9 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/integrations/react/state/valtio.md @@ -0,0 +1,574 @@ +--- +sidebar_label: Valtio +title: Valtio와 함께 React Scheduler 사용하기 +description: Valtio 프록시 저장소로 React Scheduler의 상태를 관리하고, 사용자 편집을 data.save를 통해 적용하며, 스냅샷 기반의 undo/redo를 추가합니다. +--- + +# React Scheduler - Valtio 튜토리얼 + +이 튜토리얼은 Vite + React + TypeScript 앱에서 **React Scheduler**를 렌더링하고 **Valtio**로 상태를 관리하는 방법을 보여줍니다. 이벤트, 현재 날짜, 활성 보기를 Valtio 프록시 저장소에 보관한 다음, 사용자의 편집을 Scheduler의 `data.save` 콜백으로 라우팅합니다. + +끝까지 따라오면 다음을 갖춘 Scheduler를 얻게 됩니다: + +- 재사용 가능한 도구 모음(뷰 전환기, 날짜 탐색, 되돌리기/다시 실행, 읽기 전용 토글) +- 저장소 기반 이벤트 CRUD(생성/수정/삭제) +- 스냅샷 기반 undo/redo(이벤트 + 구성) + +:::note +전체 소스 코드는 [GitHub에서 확인 가능](https://github.com/nicetip/react-scheduler-valtio-starter). +::: + +## Prerequisites +- React + TypeScript 기초 +- Vite 기초 +- Valtio에 대한 기본 이해 +- 권장: [React Scheduler 문서: 데이터 바인딩](integrations/react/state/state-management-basics.md)에서 `data.save` 및 데이터 바인딩에 대해 읽어보기 + +## Creating a project +Vite + React + TypeScript 프로젝트를 생성합니다: + +~~~bash +npm create vite@latest scheduler-valtio-demo -- --template react-ts +cd scheduler-valtio-demo +~~~ + +## Installing dependencies +이 튜토리얼은 다음을 사용합니다: + +- **Valtio**를 상태 관리에 사용 +- **Material UI**를 도구 모음 UI에 사용 + +패키지를 설치합니다: + +~~~bash +npm install valtio @mui/material @mui/icons-material @emotion/react @emotion/styled +~~~ + + Yarn을 사용하는 경우: + +~~~bash +yarn add valtio @mui/material @mui/icons-material @emotion/react @emotion/styled +~~~ + +## Installing React Scheduler +React Scheduler를 [React Scheduler 설치 가이드](integrations/react/installation.md)에 따라 설치합니다. + +이 튜토리얼에서는 평가판 패키지를 사용합니다: + +```bash +npm install @dhtmlx/trial-react-scheduler +``` + +또는 + +```bash +yarn add @dhtmlx/trial-react-scheduler +``` + +Professional 패키지를 이미 사용 중이라면 명령어와 임포트에서 `@dhtmlx/trial-react-scheduler`를 `@dhx/react-scheduler`로 바꿔서 사용합니다. + +## Preparing app styles +React Scheduler는 결정된 높이를 가진 상위 컨테이너를 필요로 합니다. 기본 스타일을 `src/App.css`에서 다음으로 교체합니다: + +~~~css title="src/App.css" +#root { + margin: 0; + padding: 0; + height: 100%; + width: 100%; +} +~~~ + +## Adding seed data +작은 데이터 세트와 기본 뷰/날짜를 설정하고 `src/seed/data.ts`를 생성합니다: + +~~~ts title="src/seed/data.ts" +export const seedEvents = [ + { + id: 1, + start_date: "2025-08-11T02:00:00Z", + end_date: "2025-08-11T10:20:00Z", + text: "Product Strategy Hike", + }, + { + id: 2, + start_date: "2025-08-12T06:00:00Z", + end_date: "2025-08-12T11:00:00Z", + text: "Tranquil Tea Time", + }, + { + id: 3, + start_date: "2025-08-15T03:00:00Z", + end_date: "2025-08-15T08:00:00Z", + text: "Demo and Showcase", + }, + { + id: 4, + start_date: "2025-08-12T11:30:00Z", + end_date: "2025-08-12T19:00:00Z", + text: "Sprint Review and Retreat", + }, +]; + +export const seedDate = Date.parse("2025-08-15T00:00:00Z"); + +export type SchedulerView = "day" | "week" | "month"; +export const seedView: SchedulerView = "week"; +~~~ + +:::note +보조 데모에는 더 풍성한 시각 효과를 위한 추가 이벤트가 포함되어 있습니다. +::: + +## Creating a Valtio store +`src/store.ts`를 생성합니다. 이 저장소는 다음을 소유합니다: + +- `events` (Scheduler에 전달되는 이벤트 배열) +- `currentDate` 및 `view` (또한 props로 전달) +- `config` (Scheduler 구성 객체, `readonly` 포함) +- `_past` / `_future` 스택은 Undo/Redo 이력 관리 + +주요 포인트는 **스냅샷 기반 이력**입니다. 깊은 복제된 스냅샷을 저장하여 Undo/Redo가 mutable 배열에 대한 참조를 유지하지 않도록 합니다. 탐색(`setCurrentDate`/`setView`)은 의도적으로 Undoable하지 않으며 — 데이터를 변경하는 동작(CRUD, 구성 변경)만 이력 스택에 푸시됩니다. + +~~~ts title="src/store.ts" +import { proxy, snapshot } from "valtio"; +import { seedEvents, seedView, seedDate, type SchedulerView } from "./seed/data"; + +export type SchedulerEvent = { + id: string | number; + start_date: string; + end_date: string; + text: string; + [key: string]: unknown; +}; + +export type SchedulerConfig = Record; + +type HistorySnapshot = { + events: SchedulerEvent[]; + config: SchedulerConfig; +}; + +const deepClone = (value: T): T => { + if (typeof structuredClone === "function") { + return structuredClone(value); + } + + return JSON.parse(JSON.stringify(value)) as T; +}; + +const normalizeId = (value: unknown) => String(value); + +export const createSchedulerStore = () => { + const state = proxy({ + events: seedEvents as SchedulerEvent[], + currentDate: seedDate as number, + view: seedView as SchedulerView, + config: {} as SchedulerConfig, + + // Undo/redo history stacks and capacity + _past: [] as HistorySnapshot[], + _future: [] as HistorySnapshot[], + _cap: 50, + }); + + const getHistorySnapshot = (): HistorySnapshot => { + const snap = snapshot(state); + + return { + events: deepClone(snap.events as SchedulerEvent[]), + config: deepClone(snap.config as SchedulerConfig), + }; + }; + + const recordHistory = () => { + const snapshotItem = getHistorySnapshot(); + + state._past = [...state._past.slice(-state._cap + 1), snapshotItem]; + state._future = []; + }; + + const actions = { + updateEvent: (payload: Partial & { id?: string | number }) => { + const payloadId = payload.id; + + if (payloadId === undefined || payloadId === null) { + return; + } + + recordHistory(); + const normalizedPayloadId = normalizeId(payloadId); + + state.events = state.events.map((eventItem) => { + if (normalizeId(eventItem.id) !== normalizedPayloadId) { + return eventItem; + } + + return { ...eventItem, ...payload, id: eventItem.id }; + }); + }, + + createEvent: (payload: Partial) => { + recordHistory(); + + const newEventId = `id_${Date.now().toString()}`; + const newEvent = { ...payload, id: newEventId } as SchedulerEvent; + + state.events = [...state.events, newEvent]; + return newEvent; + }, + + deleteEvent: (id: string | number) => { + recordHistory(); + const normalizedId = normalizeId(id); + + state.events = state.events.filter((eventItem) => { + return normalizeId(eventItem.id) !== normalizedId; + }); + }, + + // Navigation is not an undoable user action in this demo. + setCurrentDate: (date: number) => { + state.currentDate = date; + }, + + // Navigation is not an undoable user action in this demo. + setView: (view: SchedulerView) => { + state.view = view; + }, + + updateConfig: (partial: Partial) => { + recordHistory(); + state.config = { ...state.config, ...partial }; + }, + + undo: () => { + if (state._past.length === 0) return; + + const previous = state._past[state._past.length - 1]; + const current = getHistorySnapshot(); + + state._past = state._past.slice(0, -1); + state._future = [current, ...state._future]; + + state.events = previous.events; + state.config = previous.config; + }, + + redo: () => { + if (state._future.length === 0) return; + + const next = state._future[0]; + const current = getHistorySnapshot(); + + state._future = state._future.slice(1); + state._past = [...state._past.slice(-state._cap + 1), current]; + + state.events = next.events; + state.config = next.config; + }, + }; + + return { state, actions }; +}; + +export const schedulerStore = createSchedulerStore(); +export default schedulerStore; +~~~ + +## Creating a reusable toolbar +`src/components/Toolbar.tsx`를 생성합니다. 이 작은 MUI 도구 모음은 다음 기능을 제공합니다: + +- 뷰 전환(일/주/월) +- 이전/오늘/다음으로 탐색 +- 실행 취소/다시 실행 +- 읽기 전용 모드 토글 + +~~~tsx title="src/components/Toolbar.tsx" +import { ButtonGroup, Button, Typography, Stack, FormControlLabel, Switch } from "@mui/material"; +import UndoIcon from "@mui/icons-material/Undo"; +import RedoIcon from "@mui/icons-material/Redo"; +import React from "react"; + +import type { SchedulerView } from "../seed/data"; + +export interface ToolbarProps { + currentView: SchedulerView; + currentDate: Date; + isReadOnly: boolean; + canUndo: boolean; + canRedo: boolean; + onUndo?: () => void; + onRedo?: () => void; + onNavigate?: (action: "prev" | "next" | "today") => void; + onReadOnlyChange?: (value: boolean) => void; + setView: (view: SchedulerView) => void; +} + +export default React.memo(function Toolbar({ + currentView, + currentDate, + isReadOnly, + canUndo, + canRedo, + onUndo, + onRedo, + onNavigate, + onReadOnlyChange, + setView, +}: ToolbarProps) { + return ( + + + {(["day", "week", "month"] as const).map((l) => ( + + ))} + + + + + + onReadOnlyChange?.(e.target.checked)} + inputProps={{ "aria-label": "Toggle read-only" }} + /> + } + /> + + + {new Date(currentDate)?.toLocaleDateString(undefined, { weekday: "short", month: "short", day: "numeric" })} + + + + + + + + ); +}); +~~~ + +## Rendering React Scheduler and connecting it to Valtio +`src/components/Scheduler.tsx`를 생성합니다. 이 컴포넌트는 다음을 수행합니다: + +- `useSnapshot`을 통해 Valtio 프록시에 구독 +- 이벤트들(`events`), 날짜(`date`), 뷰(`view`), 구성(`config`)를 React Scheduler 속성으로 전달 +- `data.save`를 브리지로 구현하여 변경 내용을 저장소 액션으로 라우팅하는 `switch/case` 구현 +- `undo/redo` 및 `읽기 전용` 구성을 연결 +- 내장 네비게이션 바를 숨기고 커스텀 툴바를 사용 + +~~~tsx title="src/components/Scheduler.tsx" +import { useCallback, useMemo } from "react"; + +// Trial import: +import ReactScheduler from "@dhtmlx/trial-react-scheduler"; +import "@dhtmlx/trial-react-scheduler/dist/react-scheduler.css"; + +// Pro import: +// import ReactScheduler from "@dhx/react-scheduler"; +// import "@dhx/react-scheduler/dist/react-scheduler.css"; + +import { useSnapshot } from "valtio"; + +import Toolbar from "./Toolbar"; +import schedulerStore from "../store"; +import type { SchedulerEvent } from "../store"; +import type { SchedulerView } from "../seed/data"; + +export default function DemoValtioScheduler() { + const snap = useSnapshot(schedulerStore.state); + + const canUndo = snap._past.length > 0; + const canRedo = snap._future.length > 0; + const isReadOnly = Boolean((snap.config as { readonly?: unknown }).readonly); + + const activeDate = useMemo(() => { + return new Date(snap.currentDate); + }, [snap.currentDate]); + + const handleSetCurrentDate = useCallback((date: number) => { + schedulerStore.actions.setCurrentDate(date); + }, []); + + const handleSetView = useCallback((view: SchedulerView) => { + schedulerStore.actions.setView(view); + }, []); + + const handleUndo = useCallback(() => { + schedulerStore.actions.undo(); + }, []); + + const handleRedo = useCallback(() => { + schedulerStore.actions.redo(); + }, []); + + const handleReadOnlyChange = useCallback((value: boolean) => { + schedulerStore.actions.updateConfig({ readonly: value }); + }, []); + + const handleDateNavigation = useCallback( + (action: "prev" | "next" | "today") => { + if (action === "today") { + handleSetCurrentDate(Date.now()); + return; + } + + const step = action === "next" ? 1 : -1; + const date = new Date(snap.currentDate); + + if (snap.view === "day") { + date.setDate(date.getDate() + step); + } else if (snap.view === "week") { + date.setDate(date.getDate() + step * 7); + } else { + date.setMonth(date.getMonth() + step); + } + + handleSetCurrentDate(date.getTime()); + }, + [handleSetCurrentDate, snap.currentDate, snap.view] + ); + + // Scheduler <-> Valtio data bridge + const dataBridge = useMemo(() => { + return { + save: (entity: string, action: string, payload: unknown, id: unknown) => { + if (entity !== "event") return; + + switch (action) { + case "update": { + const eventData = payload && typeof payload === "object" ? (payload as Record) : {}; + const eventId = (eventData as Record).id ?? id; + if (eventId == null) { + console.warn("Update called without an id", { payload, id }); + return; + } + + const eventWithId = { ...eventData, id: eventId } as Partial & Pick; + return schedulerStore.actions.updateEvent(eventWithId); + } + case "create": + return schedulerStore.actions.createEvent(payload as Omit, "id">); + case "delete": { + const deleteId = + payload && typeof payload === "object" + ? (payload as Record).id ?? id + : payload ?? id; + if (deleteId == null) { + console.warn("Delete called without an id", { payload, id }); + return; + } + return schedulerStore.actions.deleteEvent(deleteId as SchedulerEvent["id"]); + } + default: + console.warn(`Unknown action: ${action}`); + return; + } + }, + }; + }, []); + + const handleViewChange = useCallback( + (mode: string, date: Date) => { + const nextView: SchedulerView = mode === "day" || mode === "week" || mode === "month" ? mode : "month"; + schedulerStore.actions.setView(nextView); + schedulerStore.actions.setCurrentDate(date.getTime()); + }, + [] + ); + + const memoizedXY = useMemo(() => ({ nav_height: 0 }), []); + + return ( +
+ + + +
+ ); +} +~~~ + +## Mounting the Scheduler +`src/App.tsx`를 업데이트합니다: + +~~~tsx title="src/App.tsx" +import Scheduler from "./components/Scheduler"; +import "./App.css"; + +function App() { + return ; +} + +export default App; +~~~ + +## Run the application +개발 서버를 시작합니다: + +~~~bash +npm run dev +~~~ + +또는: + +~~~bash +yarn dev +~~~ + +## Summary +이 튜토리얼을 통해 다음을 수행했습니다: + +- Vite + React 프로젝트를 생성 +- 결정된 높이의 컨테이너를 가진 React Scheduler 렌더링 +- 단일 Valtio 프록시 저장소에 `events`, `view`, `currentDate`, `config`를 모델링 +- `_past`/`_future` 스택을 이용한 스냅샷 기반 Undo/Redo 구현 (이벤트 + 구성) +- Scheduler의 모든 변경을 `data.save`를 통해 저장소 액션으로 라우팅 +- 읽기 전용 토글을 추가하여 Scheduler 편집을 차단 + +이로써 Scheduler 컴포넌트는 선언적 상태(상태 -> Props)를 유지하고, 저장소가 모든 변경 로직과 히스토리를 책임지게 됩니다. + +## What's next +- React Scheduler의 두 가지 데이터 바인딩 모델에 대해 더 알아보기: [React Scheduler docs: Binding Data](integrations/react/state/state-management-basics.md) +- `templates` prop을 사용해 커스텀 템플릿과 UI를 추가하기 +- 같은 패턴을 다른 상태 관리 도구와 함께 적용하기: + - [Redux Toolkit과 함께 React Scheduler 사용](integrations/react/state/redux-toolkit.md) + - [MobX와 함께 React Scheduler 사용](integrations/react/state/mobx.md) + - [XState와 함께 React Scheduler 사용](integrations/react/state/xstate.md) + - [Zustand와 함께 React Scheduler 사용](integrations/react/state/zustand.md) + - [Jotai와 함께 React Scheduler 사용](integrations/react/state/jotai.md) \ No newline at end of file diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/integrations/react/state/xstate.md b/i18n/ko/docusaurus-plugin-content-docs/current/integrations/react/state/xstate.md new file mode 100644 index 00000000..28eadc84 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/integrations/react/state/xstate.md @@ -0,0 +1,555 @@ +--- +title: 리액트 스케줄러 - XState 튜토리얼 +sidebar_label: XState +description: "리액트 스케줄러를 XState와 통합합니다. 머신에서 스케줄러 상태를 모델링하고, data.save를 통한 CRUD 처리, 그리고 undo/redo 및 커스텀 내비게이션을 추가하는 방법을 다룹니다." +--- + +# 리액트 스케줄러 - XState 튜토리얼 + +이 튜토리얼은 **DHTMLX React Scheduler**를 **XState** 상태 머신에 연결하는 방법을 보여줍니다. 이벤트와 UI 상태(view/date/config)를 머신에 유지하고, Scheduler 편집을 `data.save`를 통해 라우팅하며, 스냅샷 기반 히스토리로 **undo/redo**를 추가합니다. + +:::note +전체 소스 코드는 [GitHub에서 확인 가능](https://github.com/DHTMLX/react-scheduler-xstate-starter). +::: + +## 전제 조건 + +- Node.js (권장 버전 LTS) +- 리액트 + 타입스크립트 기본 이해 +- XState 기초 지식(머신, 이벤트, 액션). 복습이 필요하다면 XState 문서를 참조하세요: https://stately.ai/docs/xstate + +## 빠른 설정 - 프로젝트 생성 + +Vite + 리액트 + TS 프로젝트를 생성합니다: + +~~~bash +npm create vite@latest scheduler-xstate-demo -- --template react-ts +cd scheduler-xstate-demo +npm install +~~~ + +XState + React 바인딩을 설치합니다: + +~~~bash +npm install xstate @xstate/react +~~~ + +Material UI 설치(데모 도구 모음에 사용): + +~~~bash +npm install @mui/material @mui/icons-material @emotion/react @emotion/styled +~~~ + +### React Scheduler 설치 + +React Scheduler를 [React Scheduler 설치 가이드](integrations/react/installation.md)에 따라 설치합니다. + +이 튜토리얼에서는 평가용 패키지를 사용합니다: + +```bash +npm install @dhtmlx/trial-react-scheduler +``` + +또는 + +```bash +yarn add @dhtmlx/trial-react-scheduler +``` + +Professional 패키지를 이미 사용 중인 경우, 명령과 임포트에서 `@dhtmlx/trial-react-scheduler`를 `@dhx/react-scheduler`로 교체합니다. + +개발 서버를 실행합니다: + +~~~bash +npm run dev +~~~ + +:::note +Scheduler를 전체 페이지에 차지하도록 하려면 `src/App.css`의 기본 스타일을 제거하고 다음을 추가합니다: + +~~~css +#root { + margin: 0; + padding: 0; + height: 100%; + width: 100%; +} + +body { + margin: 0; +} +~~~ +::: + +## 샘플 데이터 설정 + +몇 개의 이벤트와 초기 UI 상태를 가진 `src/seed/data.ts`를 생성합니다. 주의: `date`는 숫자(타임스탬프)로 저장되어 머신 컨텍스트가 직렬화 가능하게 유지됩니다. + +~~~ts title="src/seed/data.ts" +export type SchedulerView = "day" | "week" | "month"; +export type SchedulerConfig = Record; + +export interface SchedulerEvent { + id: string | number; + start_date: string; + end_date: string; + text: string; + [key: string]: unknown; +} + +export const seedEvents: SchedulerEvent[] = [ + { id: 1, classname: "blue", start_date: "2025-08-11T02:00:00Z", end_date: "2025-08-11T10:20:00Z", text: "Product Strategy Hike" }, + { id: 2, classname: "violet", start_date: "2025-08-12T06:00:00Z", end_date: "2025-08-12T11:00:00Z", text: "Tranquil Tea Time" }, + { id: 3, classname: "blue", start_date: "2025-08-15T03:00:00Z", end_date: "2025-08-15T08:00:00Z", text: "Demo and Showcase" }, +]; + +export const seedDate = Date.parse("2025-08-15T00:00:00Z"); +export const seedView: SchedulerView = "week"; +~~~ + +- `SchedulerEvent`는 런타임에 추가 필드를 달 수 있도록 인덱스 시그니처를 사용합니다. + +:::note +동반 데모에는 시각적 효과를 풍부하게 하는 색상 클래스가 추가로 포함되어 있습니다. +::: + +## XState 머신 설정 + +`src/machine.ts`를 생성합니다. 이 머신은 다음을 저장합니다: + +- `events` (스케줄러 데이터) +- `date` (타임스탬프로 저장) +- `view` (`day | week | month`) +- `config` (스케줄러 구성 객체) +- `past` / `future` (undo/redo용 스냅샷 배열) + +Undo/redo는 스냅샷을 사용하여 머신에 직접 통합됩니다. 데이터를 수정하기 전마다 `saveToHistory`가 현재의 이벤트, 뷰, 날짜의 스냅샷을 저장합니다. `undo`와 `redo` 트랜지션은 히스토리에서 스냅샷과 현재 상태를 교환합니다. + +~~~ts title="src/machine.ts" +import { createMachine, assign } from "xstate"; +import { + seedEvents, + seedView, + seedDate, + type SchedulerView, + type SchedulerEvent, + type SchedulerConfig, +} from "./seed/data"; + +export interface SchedulerMachineContext { + events: SchedulerEvent[]; + view: SchedulerView; + date: number; + config: SchedulerConfig; + past: SchedulerSnapshot[]; + future: SchedulerSnapshot[]; + maxHistory: number; +} + +interface SchedulerSnapshot { + events: SchedulerEvent[]; + view: SchedulerView; + date: number; +} + +type SchedulerMachineEvent = + | { type: "SET_VIEW"; view: SchedulerView } + | { type: "SET_DATE"; date: number } + | { type: "CREATE_EVENT"; event: SchedulerEvent } + | { type: "UPDATE_EVENT"; event: SchedulerEvent } + | { type: "DELETE_EVENT"; id: string | number } + | { type: "UNDO" } + | { type: "REDO" }; + +const deepClone = (value: T): T => { + if (typeof structuredClone === "function") { + return structuredClone(value); + } + return JSON.parse(JSON.stringify(value)) as T; +}; + +const takeSnapshot = (ctx: SchedulerMachineContext): SchedulerSnapshot => ({ + events: deepClone(ctx.events), + view: ctx.view, + date: ctx.date, +}); + +export const schedulerMachine = createMachine({ + id: "scheduler", + types: { + context: {} as SchedulerMachineContext, + events: {} as SchedulerMachineEvent, + }, + context: { + events: seedEvents, + view: seedView, + date: seedDate, + config: {}, + past: [], + future: [], + maxHistory: 50, + }, + initial: "ready", + states: { + ready: { + on: { + SET_VIEW: { actions: ['saveToHistory', 'setView'] }, + SET_DATE: { actions: ['saveToHistory', 'setDate'] }, + CREATE_EVENT: { actions: ['saveToHistory', 'createEvent'] }, + UPDATE_EVENT: { actions: ['saveToHistory', 'updateEvent'] }, + DELETE_EVENT: { actions: ['saveToHistory', 'deleteEvent'] }, + UNDO: { + guard: ({ context }) => context.past.length > 0, + actions: ['undo'] + }, + REDO: { + guard: ({ context }) => context.future.length > 0, + actions: ['redo'] + }, + } + } + }, +}, + { + actions: { + saveToHistory: assign({ + past: ({ context }) => { + const newPast = [...context.past, takeSnapshot(context)]; + if (newPast.length > context.maxHistory) { + newPast.shift(); + } + return newPast; + }, + future: () => [], + }), + setView: assign({ + view: ({ event }) => (event as { type: "SET_VIEW"; view: SchedulerView }).view + }), + setDate: assign({ + date: ({ event }) => (event as { type: "SET_DATE"; date: number }).date + }), + createEvent: assign({ + events: ({ context, event }) => { + const newId = `id_${Date.now()}`; + const newEvent = { ...(event as { type: "CREATE_EVENT"; event: SchedulerEvent }).event, id: newId }; + return [...context.events, newEvent]; + } + }), + updateEvent: assign({ + events: ({ context, event }) => + context.events.map(ev => + String(ev.id) === String((event as { type: "UPDATE_EVENT"; event: SchedulerEvent }).event.id) + ? { ...ev, ...(event as { type: "UPDATE_EVENT"; event: SchedulerEvent }).event } + : ev + ) + }), + deleteEvent: assign({ + events: ({ context, event }) => + context.events.filter(ev => String(ev.id) !== String((event as { type: "DELETE_EVENT"; id: string | number }).id)) + }), + undo: assign(({ context }) => { + const currentState = takeSnapshot(context); + const previousState = context.past[context.past.length - 1]; + const newPast = context.past.slice(0, -1); + const newFuture = [currentState, ...context.future]; + + return { + ...previousState, + past: newPast, + future: newFuture, + }; + }), + redo: assign(({ context }) => { + const currentState = takeSnapshot(context); + const nextState = context.future[0]; + const newFuture = context.future.slice(1); + const newPast = [...context.past, currentState]; + + return { + ...nextState, + past: newPast, + future: newFuture, + }; + }) + } + } +); +~~~ + + + +이 시점에서 이 머신은 다음을 제공합니다: + +- Scheduler 속성의 단일 소스 +- 스냅샷 기반 Undo/Redo(히스토리는 참조가 아닌 복사본을 포함) +- 단일 `SET_DATE` 이벤트 — 전/다음/오늘 탐색 로직은 컴포넌트에 있습니다 + +:::tip +현대 브라우저만 대상으로 한다면, `deepClone()` 헬퍼는 이미 `structuredClone()`을 우선적으로 사용하고, 더 오래된 환경에서는 JSON 복제를 대체로 사용합니다. +::: + +## 제어 도구 모음 컴포넌트 빌드 + +`src/components/Toolbar.tsx`를 만듭니다. 이 컴포넌트는 작고 MUI 툴바로: + +- 뷰를 전환합니다 (일/주/월) +- 이전/오늘/다음으로 탐색 +- Undo/Redo를 비활성 상태로 표시하며 동작합니다 + +~~~tsx title="src/components/Toolbar.tsx" +import { ButtonGroup, Button, Typography, Stack } from '@mui/material'; +import UndoIcon from '@mui/icons-material/Undo'; +import RedoIcon from '@mui/icons-material/Redo'; +import React from 'react'; +import type { SchedulerView } from "../seed/data"; + +export interface ToolbarProps { + currentView: SchedulerView; + currentDate: Date; + canUndo: boolean; + canRedo: boolean; + onUndo?: () => void; + onRedo?: () => void; + onNavigate?: (action: 'prev' | 'next' | 'today') => void; + setView: (view: SchedulerView) => void; +} + +export default React.memo(function Toolbar({ currentView, currentDate, canUndo, canRedo, onUndo, onRedo, onNavigate, setView }: ToolbarProps) { + return ( + + + {(["day", "week", "month"] as const).map(l => ( + + ))} + + + + + + + {new Date(currentDate)?.toLocaleDateString(undefined, { weekday: "short", month: "short", day: "numeric" })} + + + + + + + + ); +}); +~~~ + + +## XState에 Scheduler 연결 + +`src/components/Scheduler.tsx`를 만듭니다. 이 컴포넌트는: + +- XState 머신 컨텍스트에서 `events/view/date/config`를 읽습니다 +- 머신 이벤트를 보내는 `data.save` 콜백을 노출합니다 +- Undo/Redo 및 내비게이션을 연결합니다 +- 기본 내비게이션 바를 숨기고 커스텀 툴바를 사용합니다 +- `event_class` 템플릿을 통해 색상 클래스를 적용합니다 + +~~~tsx title="src/components/Scheduler.tsx" +import { useCallback, useMemo } from "react"; +import { useMachine } from "@xstate/react"; +import ReactScheduler from "@dhtmlx/trial-react-scheduler"; +import "@dhtmlx/trial-react-scheduler/dist/react-scheduler.css"; +import "./styles.css"; +import Toolbar from "./Toolbar"; +import { schedulerMachine } from "../machine"; +import { type SchedulerView } from "../seed/data"; + +export default function DemoXStateScheduler() { + const [state, send] = useMachine(schedulerMachine); + + const canUndo = state.context.past.length > 0; + const canRedo = state.context.future.length > 0; + const activeDate = useMemo(() => new Date(state.context.date), [state.context.date]); + + const templates = useMemo(() => ({ + event_class: (_start: Date, _end: Date, event: Record | null) => { + if (event == null) { + return ""; + } + if (typeof event.classname === "string") { + return event.classname; + } + return ""; + } + }), []); + + const data = useMemo(() => ({ + save: (entity: string, action: string, payload: Record, id: string | number) => { + if (entity !== "event") { + return; + } + switch (action) { + case "create": + send({ type: "CREATE_EVENT", event: payload as never }); + break; + case "update": + send({ type: "UPDATE_EVENT", event: payload as never }); + break; + case "delete": + send({ type: "DELETE_EVENT", id }); + break; + default: + console.warn(`Unhandled action: ${action}`); + } + } + }), [send]); + + const handleDateNavigation = useCallback((action: 'prev' | 'next' | 'today') => { + if (action === 'today') { + send({ type: "SET_DATE", date: Date.now() }) + return; + } + const step = action === 'next' ? 1 : -1; + const date = new Date(state.context.date); + + if (state.context.view === "day") { + date.setDate(date.getDate() + step); + } else if (state.context.view === "week") { + date.setDate(date.getDate() + step * 7); + } else { + date.setMonth(date.getMonth() + step); + } + send({ type: "SET_DATE", date: date.getTime() }) + }, [state.context.date, state.context.view, send]); + + const handleUndo = useCallback(() => send({ type: "UNDO" }), [send]); + const handleRedo = useCallback(() => send({ type: "REDO" }), [send]); + const handleSetView = useCallback((view: SchedulerView) => send({ type: "SET_VIEW", view: view }), [send]); + const memoizedXY = useMemo(() => ({ nav_height: 0 }), []); + + return ( +
+ + +
+ ); +} +~~~ + + + +주목할 몇 가지 포인트: + +- 머신 컨텍스트는 `events`, `view`, `date`에 대한 단일 진실의 원천입니다. +- `data.save` 핸들러는 엔터티 기반의 Scheduler 변경을 머신 이벤트로 변환합니다. +- 기본 Scheduler 탐색 모음을 숨기고(내비게이션 바를 제거) 커스텀 툴바로 대체합니다. +- `event_class` 템플릿은 각 이벤트의 `classname` 필드를 읽어 CSS 클래스으로 적용합니다. + +## 이벤트 색상 스타일 + +`src/components/styles.css`를 생성하고 seed 데이터의 `classname` 값과 일치하는 CSS 클래스를 정의합니다. `event_class` 템플릿이 각 이벤트 요소에 이 클래스를 적용합니다. + +~~~css title="src/components/styles.css" +/* + 이벤트 색상화. + Scheduler는 템플릿에서 반환된 값을 이벤트 컨테이너에 적용합니다. + Seed 데이터는 `classname`을 사용하므로 템플릿을 통해 매핑하고 이 CSS에서 클래스를 스타일합니다. +*/ + +.blue { + background: #3b82f6 !important; + border-color: #2563eb !important; + color: #ffffff !important; +} + +.green { + background: #22c55e !important; + border-color: #16a34a !important; + color: #ffffff !important; +} + +.violet { + background: #a855f7 !important; + border-color: #9333ea !important; + color: #ffffff !important; +} + +.yellow { + background: #f59e0b !important; + border-color: #d97706 !important; + color: #111827 !important; +} +~~~ + +## 앱에 Scheduler 통합하기 + +`src/App.tsx`와 `src/App.css`를 업데이트합니다: + +~~~tsx title="src/App.tsx" +import Scheduler from "./components/Scheduler"; +import "./App.css"; + +function App() { + return ( + + ); +} +export default App; +~~~ + +~~~css title="src/App.css" +#root, body { + margin: 0; + padding: 0; + height: 100%; + width: 100%; +} +~~~ + +## 요약 + +이제 XState에 의해 완전히 제어되는 React Scheduler를 얻게 되었습니다: + +- Scheduler는 XState 머신 컨텍스트에서 `events`, `view`, `date`, `config`를 읽습니다. +- 사용자의 편집은 `data.save`를 통해 CRUD를 위한 머신 이벤트로 라우팅됩니다. +- Scheduler가 프롭으로 업데이트된 상태를 받기 때문에 UI가 항상 동기화됩니다. +- 스냅샷 기반 히스토리와 `guard` 조건으로 Undo/Redo를 구현했습니다. +- 커스텀 툴바를 통해 뷰 전환, 날짜 탐색, 비활성화된 상태의 Undo/Redo를 제공합니다. + +## 다음 단계 + +- 이 예제의 개념을 다시 살펴보려면 [데이터 바인딩 및 상태 관리 기초](integrations/react/state/state-management-basics.md)를 확인하세요. +- Scheduler의 구성 및 템플레이팅 옵션은 [React Scheduler 개요](integrations/react/overview.md)에서 확인해 보세요. +- API로 이벤트를 로드/저장하는 등 지속성을 추가하려면 머신에 비동기 이벤트를 디스패치하세요. +- 동일한 패턴을 다른 상태 관리 도구와 함께 살펴보려면: + - [Redux Toolkit과 함께 React Scheduler 사용](integrations/react/state/redux-toolkit.md) + - [MobX와 함께 React Scheduler 사용](integrations/react/state/mobx.md) + - [Zustand와 함께 React Scheduler 사용](integrations/react/state/zustand.md) + - [Jotai와 함께 React Scheduler 사용](integrations/react/state/jotai.md) + - [Valtio와 함께 React Scheduler 사용](integrations/react/state/valtio.md) + diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/integrations/react/state/zustand.md b/i18n/ko/docusaurus-plugin-content-docs/current/integrations/react/state/zustand.md new file mode 100644 index 00000000..a8029e8a --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/integrations/react/state/zustand.md @@ -0,0 +1,503 @@ +--- +title: 리액트 스케줄러 - Zustand 튜토리얼 +sidebar_label: Zustand +description: DHTMLX React Scheduler를 Zustand와 통합하는 방법을 알아보고, 이벤트 CRUD, 뷰/날짜 동기화, 그리고 스냅샷 기반 히스토리를 활용한 undo/redo를 학습합니다. +--- + +# 리액트 스케줄러 - Zustand 튜토리얼 + +이 튜토리얼은 **DHTMLX React Scheduler**를 **Zustand** 저장소에 연결하는 방법을 보여줍니다. 이벤트와 UI 상태(view/date/config)를 Zustan에 보관하고, Scheduler 편집을 `data.save`를 통해 라우팅하며, 스냅샷 기반 히스토리로 **undo/redo**를 추가합니다. + +:::note +전체 소스 코드는 [GitHub에서 확인 가능합니다](https://github.com/DHTMLX/react-scheduler-zustand-starter). +::: + +## 전제 조건 + +- Node.js (권장: LTS) +- React + TypeScript 기초 +- Zustand 훅과 셀렉터에 대한 기본 지식. 복습이 필요한 경우 Zustand 문서를 참조하세요: https://zustand.docs.pmnd.rs/ + +## 빠른 설정 - 프로젝트 생성 + +Vite + React + TS 프로젝트 생성: + +~~~bash +npm create vite@latest scheduler-zustand-demo -- --template react-ts +cd scheduler-zustand-demo +npm install +~~~ + +Zustand 설치: + +~~~bash +npm install zustand +~~~ + +Material UI 설치 (데모 툴바에 사용): + +~~~bash +npm install @mui/material @mui/icons-material @emotion/react @emotion/styled +~~~ + +### React Scheduler 설치 + +React Scheduler를 [React Scheduler 설치 가이드](integrations/react/installation.md)에 따라 설치합니다. + +이 튜토리얼에서는 평가 패키지를 사용합니다: + +```bash +npm install @dhtmlx/trial-react-scheduler +``` + +또는 + +```bash +yarn add @dhtmlx/trial-react-scheduler +``` + +이미 Professional 패키지를 사용하는 경우, 명령과 임포트에서 `@dhtmlx/trial-react-scheduler`를 `@dhx/react-scheduler`로 교체하세요. + +개발 서버를 실행합니다: + +~~~bash +npm run dev +~~~ + +:::note +Scheduler가 페이지 전체를 차지하도록 기본 스타일을 제거하고 아래를 추가합니다: + +~~~css +#root { + margin: 0; + padding: 0; + height: 100%; + width: 100%; +} + +body { + margin: 0; +} +~~~ +::: + +## 공유 타입 정의 + +`src/types.ts`를 생성합니다. 이 타입은 저장소와 컴포넌트 전반에서 공유됩니다: + +~~~ts +export type SchedulerView = "day" | "week" | "month"; + +export interface SchedulerEvent { + id: string | number; + start_date: string; + end_date: string; + text: string; + + // Scheduler may attach extra fields (e.g. custom props). Keep the demo permissive. + [key: string]: unknown; +} + +export type SchedulerConfig = Record; + +export interface SchedulerSnapshot { + events: SchedulerEvent[]; +} +~~~ + +- `SchedulerEvent`는 런타임에 추가 필드를 덧붙일 수 있도록 인덱스 시그니처를 사용합니다. +- `SchedulerSnapshot`은 undo/redo에 필요한 데이터를 캡처합니다(이벤트). + +## 샘플 데이터 설정 + +`src/seed/data.ts`를 생성하고 몇 개의 이벤트와 초기 UI 상태를 정의합니다. 주의: `currentDate`는 **숫자**(타임스탬프)로 저장되므로 저장소 상태가 직렬화 가능하게 유지됩니다. + +~~~ts +export const seedEvents = [ + { id: 1, start_date: "2025-08-11T02:00:00Z", end_date: "2025-08-11T10:20:00Z", text: "Product Strategy Hike" }, + { id: 2, start_date: "2025-08-12T06:00:00Z", end_date: "2025-08-12T11:00:00Z", text: "Tranquil Tea Time" }, + { id: 3, start_date: "2025-08-15T03:00:00Z", end_date: "2025-08-15T08:00:00Z", text: "Demo and Showcase" }, +]; + +export const seedDate = Date.parse("2025-08-15T00:00:00Z"); +export const seedView = "week"; +~~~ + +:::note +동반 데모에는 더 풍부한 시각화를 위한 추가 이벤트가 포함되어 있습니다. +::: + +## Zustand 저장소 생성 + +`src/store.ts`를 생성합니다. 이 저장소는 다음을 보유합니다: + +- `events` (Scheduler 데이터) +- `currentDate` (타임스탬프 형태) +- `view` (`day | week | month`) +- `config` (Scheduler 구성 객체) +- `past` / `future` (undo/redo를 위한 스냅샷 배열) + +Undo/redo는 스냅샷을 이용해 저장소에 직접 통합됩니다. 데이터를 수정하기 전마다 `pushHistory`가 현재 이벤트의 스냅샷을 저장합니다. `undo` 및 `redo` 액션은 현재 상태를 히스토리의 스냅샷과 교환합니다. + +~~~ts +import { create } from "zustand"; + +import { seedDate, seedEvents, seedView } from "./seed/data"; +import type { SchedulerConfig, SchedulerEvent, SchedulerSnapshot, SchedulerView } from "./types"; + +export interface SchedulerStoreState { + events: SchedulerEvent[]; + currentDate: number; + view: SchedulerView; + config: SchedulerConfig; + + past: SchedulerSnapshot[]; + future: SchedulerSnapshot[]; + maxHistory: number; + + setCurrentDate: (date: number) => void; + setView: (view: SchedulerView) => void; + + createEvent: (event: Omit & Partial>) => SchedulerEvent; + updateEvent: (event: Partial & Pick) => void; + deleteEvent: (id: SchedulerEvent["id"]) => void; + + undo: () => void; + redo: () => void; +} + +const deepCopy = (value: T): T => { + return JSON.parse(JSON.stringify(value)) as T; +}; + +const createSnapshot = (events: SchedulerEvent[]): SchedulerSnapshot => ({ + events: deepCopy(events), +}); + +// Simulate receiving an ID from a backend. +const generateId = () => `id_${Date.now().toString()}`; + +export const useSchedulerStore = create((set, get) => { + const pushHistory = () => { + const { events, past, maxHistory } = get(); + const snapshot = createSnapshot(events); + + set({ + past: [...past.slice(-maxHistory + 1), snapshot], + future: [], + }); + }; + + return { + events: seedEvents as unknown as SchedulerEvent[], + currentDate: seedDate, + view: seedView as SchedulerView, + config: {}, + + past: [], + future: [], + maxHistory: 50, + + setCurrentDate: (date) => set({ currentDate: date }), + setView: (view) => set({ view }), + + createEvent: (event) => { + pushHistory(); + + const id = event.id != null ? event.id : generateId(); + const newEvent: SchedulerEvent = { ...event, id } as SchedulerEvent; + + set({ events: [...get().events, newEvent] }); + return newEvent; + }, + + updateEvent: (event) => { + const events = get().events; + const index = events.findIndex((e) => String(e.id) === String(event.id)); + if (index === -1) return; + + pushHistory(); + set({ + events: [...events.slice(0, index), { ...events[index], ...event }, ...events.slice(index + 1)], + }); + }, + + deleteEvent: (id) => { + const events = get().events; + const exists = events.some((e) => String(e.id) === String(id)); + if (!exists) return; + + pushHistory(); + set({ events: events.filter((e) => String(e.id) !== String(id)) }); + }, + + undo: () => { + const { past, future, events } = get(); + if (past.length === 0) return; + + const previous = past[past.length - 1]; + set({ + events: previous.events, + past: past.slice(0, -1), + future: [createSnapshot(events), ...future], + }); + }, + + redo: () => { + const { past, future, events } = get(); + if (future.length === 0) return; + + const next = future[0]; + set({ + events: next.events, + past: [...past, createSnapshot(events)], + future: future.slice(1), + }); + }, + }; +}); +~~~ + +## 컨트롤 툴바 컴포넌트 구축 + +`src/components/Toolbar.tsx`를 생성합니다. 이 컴포넌트는 작은 MUI 툴바로 다음을 제공합니다: + +- 뷰 전환(일/주/월) +- 이전/오늘/다음으로 이동 +- undo/redo + +~~~tsx +import { ButtonGroup, Button, Typography, Stack } from "@mui/material"; +import UndoIcon from "@mui/icons-material/Undo"; +import RedoIcon from "@mui/icons-material/Redo"; +import React from "react"; +import type { SchedulerView } from "../types"; + +export interface ToolbarProps { + currentView: SchedulerView; + currentDate: Date; + canUndo: boolean; + canRedo: boolean; + onUndo?: () => void; + onRedo?: () => void; + onNavigate?: (action: "prev" | "next" | "today") => void; + setView: (view: SchedulerView) => void; +} + +export default React.memo(function Toolbar({ + currentView, + currentDate, + canUndo, + canRedo, + onUndo, + onRedo, + onNavigate, + setView, +}: ToolbarProps) { + return ( + + + {(["day", "week", "month"] as const).map((l) => ( + + ))} + + + + + + + {new Date(currentDate)?.toLocaleDateString(undefined, { weekday: "short", month: "short", day: "numeric" })} + + + + + + + + ); +}); +~~~ + +## Zustand에 Scheduler 연결 + +`src/components/Scheduler.tsx`를 생성합니다. 이 컴포넌트는 다음을 수행합니다: + +- Zustand 저장소에서 selectors를 통해 `events/view/currentDate/config`를 읽습니다 +- 저장소의 액션을 호출하는 `data.save` 콜백을 노출합니다 +- Scheduler의 내부 기록과 동기화를 위해 `save`에서 생성/수정된 엔티티를 반환합니다 +- `undo/redo`를 연결합니다 +- 기본 내비바를 숨기고 커스텀 툴바를 사용합니다 + +~~~tsx +import { useCallback, useMemo } from "react"; +import ReactScheduler from "@dhtmlx/trial-react-scheduler"; +import "@dhtmlx/trial-react-scheduler/dist/react-scheduler.css"; + +import Toolbar from "./Toolbar"; +import { useSchedulerStore } from "../store"; +import type { SchedulerEvent, SchedulerView } from "../types"; + +export default function DemoZustandScheduler() { + const events = useSchedulerStore((s) => s.events); + const view = useSchedulerStore((s) => s.view); + const currentDate = useSchedulerStore((s) => s.currentDate); + const config = useSchedulerStore((s) => s.config); + + const setView = useSchedulerStore((s) => s.setView); + const setCurrentDate = useSchedulerStore((s) => s.setCurrentDate); + const createEvent = useSchedulerStore((s) => s.createEvent); + const updateEvent = useSchedulerStore((s) => s.updateEvent); + const deleteEvent = useSchedulerStore((s) => s.deleteEvent); + const undo = useSchedulerStore((s) => s.undo); + const redo = useSchedulerStore((s) => s.redo); + + const canUndo = useSchedulerStore((s) => s.past.length > 0); + const canRedo = useSchedulerStore((s) => s.future.length > 0); + + const activeDate = useMemo(() => new Date(currentDate), [currentDate]); + + const handleDateNavigation = useCallback((action: "prev" | "next" | "today") => { + if (action === "today") { + setCurrentDate(Date.now()); + return; + } + + const step = action === "next" ? 1 : -1; + const date = new Date(currentDate); + + if (view === "day") { + date.setDate(date.getDate() + step); + } else if (view === "week") { + date.setDate(date.getDate() + step * 7); + } else { + date.setMonth(date.getMonth() + step); + } + setCurrentDate(date.getTime()); + }, [currentDate, view, setCurrentDate]); + + // Scheduler <-> Zustand data bridge (maps Scheduler CRUD events to store actions) + const dataBridge = useMemo(() => ({ + save: (entity: string, action: string, payload: unknown, id: unknown) => { + if (entity !== "event") return; + + switch (action) { + case "update": { + const eventData = payload && typeof payload === "object" ? (payload as Record) : {}; + const eventId = (eventData as Record).id ?? id; + if (eventId == null) { + console.warn("Update called without an id", { payload, id }); + return; + } + return updateEvent({ ...eventData, id: eventId } as Partial & Pick); + } + case "create": + return createEvent(payload as Omit); + case "delete": { + const deleteId = + payload && typeof payload === "object" + ? (payload as Record).id ?? id + : payload ?? id; + if (deleteId == null) { + console.warn("Delete called without an id", { payload, id }); + return; + } + return deleteEvent(deleteId as SchedulerEvent["id"]); + } + default: + console.warn(`Unknown action: ${action}`); + return; + } + }, + }), [updateEvent, createEvent, deleteEvent]); + + const handleViewChange = useCallback( + (mode: string, date: Date) => { + const nextView: SchedulerView = mode === "day" || mode === "week" || mode === "month" ? mode : "month"; + setView(nextView); + setCurrentDate(date.getTime()); + }, + [setView, setCurrentDate] + ); + + const handleSetView = useCallback((nextView: SchedulerView) => setView(nextView), [setView]); + + const handleUndo = useCallback(() => undo(), [undo]); + const handleRedo = useCallback(() => redo(), [redo]); + const memoizedXY = useMemo(() => ({ nav_height: 0 }), []); + + return ( +
+ + + +
+ ); +} +~~~ + +주: Redux Toolkit과 달리 Zustand는 `Provider` 래퍼가 필요하지 않습니다. `useSchedulerStore` 훅이 저장소에서 직접 데이터를 읽습니다. + +## 앱에서 Scheduler 렌더링 + +`src/App.tsx`를 업데이트합니다: + +~~~tsx +import Scheduler from "./components/Scheduler"; +import "./App.css"; + +function App() { + return ; +} + +export default App; +~~~ + +## 요약 + +이제 Zustand로 완전히 구동되는 React Scheduler를 얻었습니다: + +- Zustand가 `events`, `view`, `currentDate`, `config`를 단일 진실의 원천으로 유지합니다 +- 사용자 편집은 `data.save` → 저장소 액션으로 라우팅됩니다 +- Scheduler가 업데이트된 `events`를 props로 받아 UI가 계속 동기화됩니다 +- undo/redo는 스냅샷 기반 히스토리를 사용한 제한된 히스토리 스택으로 구현됩니다 + +## What's next + +- 이 예제의 개념을 [데이터 바인딩 및 상태 관리 기초](integrations/react/state/state-management-basics.md)에서 다시 살펴보세요 +- [React Scheduler 개요](integrations/react/overview.md)에서 스케줄러의 구성 및 템플레이팅 옵션을 탐색하세요 +- Zustand 액션에서 API로부터 이벤트를 로드/저장하는 방식으로 지속성을 추가하고 스토어를 업데이트해 보세요 +- 동일한 패턴을 다른 상태 관리 도구와 함께 살펴보기: + - [Using React Scheduler with Redux Toolkit](integrations/react/state/redux-toolkit.md) + - [Using React Scheduler with MobX](integrations/react/state/mobx.md) + - [Using React Scheduler with XState](integrations/react/state/xstate.md) + - [Using React Scheduler with Valtio](integrations/react/state/valtio.md) + - [Using React Scheduler with Jotai](integrations/react/state/jotai.md) \ No newline at end of file diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/integrations/salesforce/howtostart-salesforce.md b/i18n/ko/docusaurus-plugin-content-docs/current/integrations/salesforce/howtostart-salesforce.md index c4e504ed..7ebd54b8 100644 --- a/i18n/ko/docusaurus-plugin-content-docs/current/integrations/salesforce/howtostart-salesforce.md +++ b/i18n/ko/docusaurus-plugin-content-docs/current/integrations/salesforce/howtostart-salesforce.md @@ -1,62 +1,65 @@ --- -title: "dhtmlxScheduler와 SalesForce LWC 통합하기" -sidebar_label: "dhtmlxScheduler와 SalesForce LWC 통합하기" +title: "dhtmlxScheduler with SalesForce LWC" +sidebar_label: "Salesforce" --- -# dhtmlxScheduler와 SalesForce LWC 통합하기 +# dhtmlxScheduler와 SalesForce LWC -이 튜토리얼에서는 dhtmlxScheduler를 [SalesForce Lightning Web Component](https://developer.salesforce.com/docs/platform/lwc/guide)에 통합하는 방법을 안내합니다. +이 튜토리얼은 dhtmlxScheduler를 [SalesForce Lightning Web Component](https://developer.salesforce.com/docs/platform/lwc/guide)에 추가하는 방법을 설명합니다. -다른 기술을 사용 중이라면, 아래에 나열된 다른 통합 옵션도 참고하시기 바랍니다: +다음의 온라인 데모에서 DHTMLX 컴포넌트를 Salesforce LWC와 통합하는 방법을 확인해 보세요(로그인: *user*, 비밀번호: *demo*). 데모의 소스 코드는 [GitHub에서 제공됩니다](https://github.com/DHTMLX/salesforce-lwc-demo). -- ["dhtmlxScheduler와 ASP.NET Core"](integrations/dotnet/howtostart-dotnet-core.md) -- ["dhtmlxScheduler와 ASP.NET MVC"](integrations/dotnet/howtostart-dotnet.md) -- ["dhtmlxScheduler와 PHP"](integrations/php/howtostart-plain-php.md) -- ["dhtmlxScheduler와 PHP:Slim"](integrations/php/howtostart-php-slim4.md) -- ["dhtmlxScheduler와 PHP:Laravel 연동하기"](integrations/php/howtostart-php-laravel.md) -- ["dhtmlxScheduler와 Ruby on Rails 연동하기"](integrations/other/howtostart-ruby.md) -- ["dhtmlxScheduler와 dhtmlxConnector 연동하기"](integrations/other/howtostart-connector.md) +다른 기술을 사용하는 경우 아래에서 사용할 수 있는 통합 변형 목록을 확인하십시오: -이 가이드에서는 [SalesForce CLI](https://developer.salesforce.com/tools/salesforcecli)를 사용하여 Lightning Web Component를 생성하고, 이를 조직에 배포하는 과정을 다룹니다. 설치 관련 자세한 내용은 [이 문서](https://developer.salesforce.com/docs/atlas.en-us.sfdx_setup.meta/sfdx_setup/sfdx_setup_intro.htm)를 참고하세요. 또한, Visual Studio Code에서 개발 환경을 더욱 편리하게 사용하려면 [Salesforce Extension Pack](https://marketplace.visualstudio.com/items?itemName="salesforce.salesforcedx-vscode)을" 설치할 수 있습니다. +- [dhtmlxScheduler with ASP.NET Core](integrations/dotnet/howtostart-dotnet-core.md) +- [dhtmlxScheduler with ASP.NET MVC](integrations/dotnet/howtostart-dotnet.md) +- [dhtmlxScheduler with PHP](integrations/php/howtostart-plain-php.md) +- [dhtmlxScheduler with PHP:Slim](integrations/php/howtostart-php-slim4.md) +- [dhtmlxScheduler with PHP:Laravel](integrations/php/howtostart-php-laravel.md) +- [dhtmlxScheduler with Ruby on Rails](integrations/other/howtostart-ruby.md) +- [dhtmlxScheduler with dhtmlxConnector](integrations/other/howtostart-connector.md) + +우리는 [SalesForce CLI](https://developer.salesforce.com/tools/salesforcecli)를 사용하여 Lightning Web Component를 만들고 조직에 업로드합니다. 설치 방법은 [이 문서](https://developer.salesforce.com/docs/atlas.en-us.sfdx_setup.meta/sfdx_setup/sfdx_setup_intro.htm)를 참조하십시오. 개발 조직과 함께 작업하기 위해 Visual Studio Code에 [Salesforce Extension Pack](https://marketplace.visualstudio.com/items?itemName=salesforce.salesforcedx-vscode)을 설치할 수도 있습니다. :::note -전체 소스 코드는 [GitHub](https://github.com/DHTMLX/salesforce-scheduler-demo)에서 확인하실 수 있습니다. +이 튜토리얼에서 생성된 데모의 전체 소스 코드는 [GitHub에서 확인 가능합니다](https://github.com/DHTMLX/salesforce-scheduler-demo). ::: -아래 영상 가이드에서는 Salesforce LWC와 함께 Scheduler를 구축하는 방법을 시연합니다. + +비디오 가이드를 통해 Salesforce LWC로 Scheduler를 만드는 방법을 확인해 보세요. -## 사전 준비 사항 +## 필수 조건 -[SalesForce CLI](https://developer.salesforce.com/tools/salesforcecli)가 설치되어 있는지 확인하세요. 설치가 되어 있지 않다면, [이 문서](https://developer.salesforce.com/docs/atlas.en-us.sfdx_setup.meta/sfdx_setup/sfdx_setup_intro.htm)를 참고하여 설치를 진행하세요. +아직 설치하지 않았다면 [SalesForce CLI]를 설치하십시오. 설치 방법은 [이 문서](https://developer.salesforce.com/docs/atlas.en-us.sfdx_setup.meta/sfdx_setup/sfdx_setup_intro.htm)를 참조하십시오. -## 1단계. 프로젝트 생성 +## 1단계. 프로젝트 만들기 -아직 개발자 계정이 없다면, [여기](https://developer.salesforce.com/)에서 무료 개발자 계정에 가입하세요. 자세한 안내는 [이 글](https://webkul.com/blog/create-free-developer-account-in-salesforce/)을 참고하실 수 있습니다. +계정이 없으면 무료 개발자 계정에 가입하십시오. 설치 방법은 [이 글](https://webkul.com/blog/create-free-developer-account-in-salesforce/)을 참고하십시오. -좌측 검색창에서 *Dev Hub*를 검색하여 선택하세요: +왼쪽의 검색창에서 Dev Hub를 찾아 선택합니다: -![](/img/sf_devhub.png) +![sf_devhub](/img/sf_devhub.png) -이후 나타나는 설정 창에서 *Dev Hub*를 활성화합니다: +새 설정 창에서 Dev Hub를 활성화합니다: -![](/img/sf_enabledh.png) +![sf_enabledh](/img/sf_enabledh.png) -Salesforce DX 프로젝트를 위한 기본 폴더를 생성합니다: +Salesforce DX 프로젝트의 기본 디렉터리를 만들어 봅시다: ~~~js $ mkdir ~/salesforce ~~~ -CLI를 사용하여 Salesforce DX 프로젝트를 생성합니다: +CLI를 통해 Salesforce DX 프로젝트를 만듭니다: ~~~js $ cd ~/salesforce $ sfdx project generate -n scheduler-salesforce-app target dir = C:UsersUsersalesforce create scheduler-salesforce-appconfigproject-scratch-def.json - create scheduler-salesforce-appguides/README.md + create guides/scheduler-salesforce-appREADME.md create scheduler-salesforce-appsfdx-project.json create scheduler-salesforce-app.huskypre-commit create scheduler-salesforce-app.vscodeextensions.json @@ -75,15 +78,15 @@ $ sfdx project generate -n scheduler-salesforce-app create scheduler-salesforce-apppackage.json ~~~ -새로 생성된 프로젝트 폴더로 이동합니다: +생성된 프로젝트로 이동합니다: ~~~js $ cd scheduler-salesforce-app ~~~ -## 2단계. 인증 +## 2단계. 권한 부여 -다음 명령어를 실행하여 Web Server Flow를 통해 조직에 인증합니다: +Web Server Flow를 사용하여 Org에 인증합니다: ~~~js $ sfdx org login web -d @@ -91,15 +94,16 @@ $ sfdx org login web -d Successfully authorized ...@...com with org ID ... ~~~ -이제 프로젝트 설정 파일(*sfdx-project.json*)에서 "sfdcLoginUrl" 파라미터를 자신의 "My Domain URL"로 설정합니다. 해당 URL은 조직의 "My Domain" 설정 페이지에서 확인할 수 있습니다. 예시: +프로젝트 구성 파일(*sfdx-project.json*)을 업데이트합니다. "sfdcLoginUrl" 파라미터를 자신의 "My Domain URL"로 설정합니다. 조직의 "My Domain URL"은 "My Domain" 설정 페이지에서 확인할 수 있습니다. 예를 들면: + +![sf_mydomain](/img/sf_mydomain.png) -![](/img/sf_mydomain.png) ~~~js title="scheduler-salesforce-app/sfdx-project.json" "sfdcLoginUrl" : "https://xbs2-dev-ed.my.salesforce.com" ~~~ -다음 명령어로 Scratch Org를 생성합니다: +Scratch Org를 만듭니다: ~~~js $ sfdx org create scratch -f config/project-scratch-def.json -d @@ -123,85 +127,83 @@ Your scratch org is ready. ## 3단계. Salesforce에 Scheduler 추가 -라이브러리를 사용하려면, Salesforce에 Static Resource로 업로드해야 합니다. 아래 명령어로 Scratch Org를 엽니다: +라이브러리를 사용하려면 Salesforce에 Static Resource로 업로드해야 합니다. 따라서 Scratch Org를 엽니다: ~~~js $ sfdx org open ~~~ -"Static Resources" 탭으로 이동한 후, "New" 버튼을 클릭하세요: +이제, "Static Resources" 탭을 열고 "New" 버튼을 누릅니다 -![](/img/sf_staticresources.png) +![sf_staticresources](/img/sf_staticresources.png) -리소스 이름(예: *dhtmlxscheduler*)을 명확하게 지정하고, 라이브러리 파일(*dhtmlxscheduler.js* 및 *dhtmlxscheduler.css*)이 포함된 ZIP 압축 파일을 업로드합니다. Cache Control은 "Public"으로 설정하여 성능을 향상시킵니다. "Save"를 클릭하세요. +의미 있는 이름을 지정합니다(여기서는 *dhtmlxscheduler*를 사용), 라이브러리 자체가 들어 있는 ZIP 아카이브를 선택합니다(아카이브에는 *dhtmlxscheduler.js*와 *dhtmlxscheduler.css* 파일이 포함되어 있어야 함), 그리고 성능 향상을 위해 "Public" Cache Control을 선택합니다. "Save" 버튼을 눌니다. ![sf_load_zip](/img/sf_load_zip.png) -이제 dhtmlxScheduler가 Salesforce 내에서 사용 가능합니다. +이제 Salesforce 안에 dhtmlxScheduler가 있습니다. ![sf_scheduler_in_sf](/img/sf_scheduler_in_sf.png) -## 4단계. 데이터 모델 생성 +## 4단계. 데이터 모델 만들기 -dhtmlxScheduler의 핵심 엔터티는 이벤트입니다. 이들을 효과적으로 관리하기 위해, 모든 속성을 Salesforce 내에서 plain JSON 형태로 저장하는 것이 실용적입니다. 이를 위해 새로운 Event 오브젝트를 생성하세요. Object Manager를 열고, "Create" → "Custom Object"를 선택합니다: +핵심 dhtmlxScheduler 엔티티는 Events입니다. dhtmlxScheduler 엔티티의 모든 속성을 Salesforce 내부의 일반 JSON으로 저장하는 것이 좋은 방법입니다. Event 객체를 만들어 봅시다. Object Manager를 열고 "Create"를 선택한 다음 "Custom Object"를 선택합니다: -![](/img/sf_new_object.png) +![sf_new_object](/img/sf_new_object.png) +### **Event 객체** -### **이벤트 객체** - -이벤트 객체의 이름을 *SchedulerEvent* 또는 *SchedulerEvents*로 지정하세요. +이벤트 객체의 이름을 정합니다. 예를 들어 *SchedulerEvent/SchedulerEvents*로 합시다. ![sf_schedulerevent](/img/sf_schedulerevent.png) :::note -레코드 이름이 객체 이름과 일치하는지 확인하세요. 예를 들어: +레코드 이름은 객체 이름과 일치해야 합니다. 예: -객체 이름: SchedulerEvent => 레코드 이름: SchedulerEvent Name +Object Name: SchedulerEvent => Record Name: SchedulerEvent Name ::: -"저장" 버튼을 클릭하세요. - -객체가 생성되면 "필드 및 관계" 탭으로 이동하여 "새로 만들기" 버튼을 클릭합니다. +"Save" 버튼을 누릅니다. +객체가 생성된 후에는 "Fields & Relationships" 탭을 열고 "New" 버튼을 누릅니다. ![sf_new_field](/img/sf_new_field.png) -- **시작 날짜** +- **Start Date** -데이터 유형으로 "날짜/시간"을 선택한 후 "다음"을 클릭하세요. +Data Type으로 "Date/Time"을 선택하고 "Next" 버튼을 누릅니다. ![sf_field_type](/img/sf_field_type.png) -이 필드의 이름을 "Start Date"로 지정합니다. 이 필드는 JSON으로 직렬화된 Task 속성을 저장합니다. +이름을 "Start Date"로 지정합니다. 이 필드는 JSON으로 직렬화된 Task 속성을 저장합니다. ![sf_start_date](/img/sf_start_date.png) -"다음"을 클릭하고 "저장 및 새로 만들기" 버튼이 나타날 때까지 모든 기본 설정을 그대로 두세요. +다음 버튼을 눌러 기본 설정은 그대로 두고 계속 진행합니다(마지막에 "Save & New" 버튼이 활성화될 때까지). -- **종료 날짜** +- **End Date** -"End Date" 필드를 추가하고, 데이터 유형으로 "날짜/시간"을 선택하세요. +"End Date" 필드를 생성합니다. Data Type으로 "Date/Time"을 선택합니다. ![sf_end_date](/img/sf_end_date.png) -"다음"을 클릭하고 "저장 및 새로 만들기" 버튼이 나타날 때까지 기본 설정을 그대로 두세요. +다음 버튼을 눌러 기본 설정은 그대로 두고 계속 진행합니다(마지막에 "Save & New" 버튼이 활성화될 때까지). -- **텍스트** +- **Text** -"Text" 필드를 만들고 데이터 유형으로 "Text"를 선택하세요. +"Text" 필드를 만듭니다. Data Type으로 "Text"를 선택합니다. ![sf_text](/img/sf_text.png) -"다음"을 클릭하고 "저장" 버튼이 활성화될 때까지 모든 기본 설정을 그대로 두세요. +다음 버튼을 누릅니다(기본 설정으로 두고 계속 진행). -마지막에는 필드가 다음과 같이 보여야 합니다: +마지막으로 화면은 아래와 같아야 합니다: ![sf_schedulerevent_fields](/img/sf_schedulerevent_fields.png) -## 5단계. Lightning Web Component 생성 +## 5단계. Lightning Web Component 만들기 -Lightning Web Component를 생성하려면 다음 명령어를 사용하세요: +Lightning Web Component를 만들려면 다음 명령을 실행합니다: ~~~js $ sfdx lightning generate component --type lwc -n scheduler -d force-app/main/default/lwc @@ -213,7 +215,10 @@ target dir = C:UsersUsersourcesalesforcescheduler-salesforce-appforce-appmaindef create force-appmaindefaultlwcschedulerscheduler.js-meta.xml ~~~ -Lightning App Builder에 노출되도록 *scheduler.js-meta.xml*에서 컴포넌트 정의를 수정하세요: +컴포넌트 정의를 *scheduler.js-meta.xml*에서 Lightning App Builder에 노출되도록 변경합니다: + + + ~~~js title="force-app/main/default/lwc/scheduler/scheduler.js-meta.xml" @@ -235,7 +240,7 @@ Lightning App Builder에 노출되도록 *scheduler.js-meta.xml*에서 컴포넌 ~~~js title="force-app/main/default/lwc/scheduler/scheduler.html" ~~~ @@ -364,9 +369,9 @@ export default class SchedulerView extends LightningElement { } ~~~ -## 6단계. Apex 클래스 생성 +## 6단계. Apex 클래스 만들기 -다음 단계는 Lightning Component와 데이터 모델 간의 상호작용을 가능하게 하는 클래스를 만드는 것입니다. +다음 단계는 Lightning 컴포넌트와 데이터 모델 간의 상호 작용을 가능하게 하는 클래스를 만드는 것입니다. ~~~js $ sfdx apex generate class -n SchedulerData -d force-app/main/default/classes @@ -376,7 +381,8 @@ target dir = C:UsersUsersalesforcescheduler-salesforce-appforce-appmaindefaultcl create force-appmaindefaultclassesSchedulerData.cls-meta.xml ~~~ -생성 후, *SchedulerData.cls*를 열고 다음 코드를 추가하세요: +생성 후 *SchedulerData.cls*를 열고 다음 코드를 추가합니다: + ~~~js title="force-app/main/default/classes/SchedulerData.cls" public with sharing class SchedulerData { @@ -396,67 +402,66 @@ public with sharing class SchedulerData { } ~~~ -Scratch Org에서 소스를 프로젝트로 가져옵니다: +Scratch Org에서 로컬 프로젝트로 소스를 끌어옵니다: ~~~js $ sfdx project retrieve start ~~~ -그런 다음 소스를 다시 Scratch Org로 푸시합니다: +그리고 소스를 Scratch Org에 푸시합니다: ~~~js $ sfdx project deploy start ~~~ -## 7단계. Lightning 페이지 생성 +## 7단계. Lightning 페이지 만들기 -"Lightning App Builder"를 열고 새 Lightning Page를 만드세요. +"Lightning App Builder"를 열고 새 Lightning Page를 만듭니다. -![](/img/sf_lightning_app_builder.png) +![sf_lightning_app_builder](/img/sf_lightning_app_builder.png) -"App Page"를 선택한 후 페이지 이름을 입력하고 레이아웃을 선택하세요. +"App Page"를 선택한 후 페이지 이름과 레이아웃을 지정합니다. -![](/img/sf_app_page.png) +![sf_app_page](/img/sf_app_page.png) ![sf_new_lightning_page](/img/sf_new_lightning_page.png) -![](/img/sf_page_layout.png) +![sf_page_layout](/img/sf_page_layout.png) -Scheduler 커스텀 컴포넌트가 새 페이지에서 사용 가능해야 합니다. 원하는 영역에 추가하고 저장하세요. +새 페이지에서 Scheduler 커스텀 컴포넌트를 볼 수 있어야 합니다. 이를 임의의 영역에 추가하고 저장합니다. ![sf_scheduler](/img/sf_scheduler.png) -페이지를 활성화하세요. +페이지를 활성화합니다. -![](/img/sf_page_saved.png) +![sf_page_saved](/img/sf_page_saved.png) -변경 사항을 저장하세요. +변경사항을 저장합니다. ![sf_activation](/img/sf_activation.png) -![](/img/sf_add_page_to_nm.png) +![sf_add_page_to_nm](/img/sf_add_page_to_nm.png) ![sf_scheduler_in_app](/img/sf_scheduler_in_app.png) -애플리케이션 페이지를 엽니다. 앱 실행기에서 Scheduler를 입력하면 접근할 수 있습니다. +애플리케이션 페이지를 엽니다. 앱 런처에서 Scheduler를 클릭하거나 검색하면 열 수 있습니다. ![sf_home_scheduler](/img/sf_home_scheduler.png) -모든 설정이 올바르게 완료되었다면, Lightning Page에서 간단한 Scheduler 데모가 표시됩니다. +모든 것이 잘 작동했다면 Lightning Page에서 간단한 Scheduler 데모를 볼 수 있습니다. ![sf_final](/img/sf_final.png) ## 애플리케이션 보안 -Scheduler 자체에는 SQL 인젝션, XSS 또는 CSRF 공격과 같은 위협에 대한 보호 기능이 포함되어 있지 않습니다. 애플리케이션의 보안은 개발자의 책임입니다. 자세한 내용은 [관련 문서](guides/app-security.md)를 참고하세요. Salesforce는 데이터와 애플리케이션을 보호하는 보안 기능을 제공하며, 조직의 요구에 맞는 추가 보안 조치도 구현할 수 있습니다. 자세한 내용은 [Salesforce Security Guide](https://developer.salesforce.com/docs/atlas.en-us.securityImplGuide.meta/securityImplGuide/salesforce_security_guide.htm)를 참고하세요. 또한, [이 리소스](https://developer.salesforce.com/docs/atlas.en-us.secure_coding_guide.meta/secure_coding_guide/secure_coding_lightning_security.htm)에서 필수적인 보안 실무를 확인할 수 있습니다. +Scheduler는 SQL 인젝션이나 XSS, CSRF 공격과 같은 다양한 위협으로부터 애플리케이션을 보호하는 방법을 제공하지 않습니다. 애플리케이션의 보안을 안전하게 유지하는 책임은 애플리케이션을 구현하는 개발자에게 있습니다. 해당 문서의 세부 정보를 읽어보십시오(Salesforce는 데이터를 보호하기 위해 보안 기능으로 구축되어 있습니다). 조직의 구조와 필요에 맞게 자체 보안 체계를 구현할 수도 있습니다. 자세한 내용은 [Salesforce Security Guide](https://developer.salesforce.com/docs/atlas.en-us.securityImplGuide.meta/securityImplGuide/salesforce_security_guide.htm)를 참조하십시오. [여기](https://developer.salesforce.com/docs/atlas.en-us.secure_coding_guide.meta/secure_coding_guide/secure_coding_lightning_security.htm)에서 보안에 대해 알아야 할 내용을 확인할 수 있습니다. ## 문제 해결 -통합 단계를 완료한 후 Scheduler가 이벤트를 표시하지 않는 경우, [Troubleshooting Backend Integration Issues](guides/troubleshooting.md) 문서를 참고하세요. 일반적인 문제를 식별하고 해결하는 방법을 안내합니다. +위의 단계들을 따라 Scheduler를 Salesforce와 연동하는 과정을 완료했지만 페이지에서 이벤트가 렌더링되지 않는 경우, [문제 해결 백엔드 통합 이슈](guides/troubleshooting.md) 문서를 확인해 보십시오. 문제의 근본 원인을 식별하는 방법이 설명되어 있습니다. ## 다음 단계 -이 시점에서 Scheduler는 완전히 동작합니다. 전체 코드는 [GitHub](https://github.com/DHTMLX/salesforce-scheduler-demo)에서 복제하거나 다운로드하여 프로젝트에 사용할 수 있습니다. - -또한 [Scheduler의 기능을 다루는 가이드](/guides/)나 [다른 백엔드 프레임워크와의 통합 튜토리얼](integrations/howtostart-guides.md)도 참고할 수 있습니다. +이제 완전히 작동하는 Scheduler를 갖게 되었습니다. 전체 코드는 [GitHub](https://github.com/DHTMLX/salesforce-scheduler-demo)에서 확인하거나 클론 또는 다운로드하여 프로젝트에 사용할 수 있습니다. +Scheduler의 다양한 기능에 대한 안내를 [guides](/guides/)에서 확인하거나 Scheduler를 다른 백엔드 프레임워크와 통합하는 방법에 대한 튜토리얼을 [통합 가이드](integrations/howtostart-guides.md)에서 확인할 수 있습니다. \ No newline at end of file diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/views/agenda-legacy.md b/i18n/ko/docusaurus-plugin-content-docs/current/views/agenda-legacy.md index 76b0b6ba..4eb75033 100644 --- a/i18n/ko/docusaurus-plugin-content-docs/current/views/agenda-legacy.md +++ b/i18n/ko/docusaurus-plugin-content-docs/current/views/agenda-legacy.md @@ -74,11 +74,11 @@ Agenda 뷰에는 로케일에 3개의 라벨이 포함되어 있습니다: Agenda 뷰에 표시되는 날짜의 범위를 지정하려면, [agenda_end](api/config/agenda_end.md) 및 [agenda_start](api/config/agenda_start.md) 속성을 사용하세요: ~~~js -//2019년 6월 1일부터의 날짜를 표시하려면 -scheduler.config.agenda_start = new Date(2019, 5, 1); +//2026년 6월 1일부터의 날짜를 표시하려면 +scheduler.config.agenda_start = new Date(2026, 5, 1); -//2020년 6월 1일까지의 날짜를 표시하려면 -scheduler.config.agenda_end = new Date(2020, 5, 1); +//2027년 6월 1일까지의 날짜를 표시하려면 +scheduler.config.agenda_end = new Date(2027, 5, 1); ~~~ ## 다음/이전/오늘 버튼 활성화 diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/views/agenda.md b/i18n/ko/docusaurus-plugin-content-docs/current/views/agenda.md index 162d8613..eec2df8f 100644 --- a/i18n/ko/docusaurus-plugin-content-docs/current/views/agenda.md +++ b/i18n/ko/docusaurus-plugin-content-docs/current/views/agenda.md @@ -93,8 +93,8 @@ scheduler.date.add_agenda = function(date, inc){ [agenda_end](api/config/agenda_end.md) 및 [agenda_start](api/config/agenda_start.md) 속성을 설정하여 표시 범위를 고정할 수도 있습니다: ~~~js -scheduler.config.agenda_start = new Date(2023, 5, 1); -scheduler.config.agenda_end = new Date(2023, 6, 1); +scheduler.config.agenda_start = new Date(2027, 5, 1); +scheduler.config.agenda_end = new Date(2027, 6, 1); ~~~ ## 관련 가이드 diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/views/day.md b/i18n/ko/docusaurus-plugin-content-docs/current/views/day.md index 9c3699cb..eff2b087 100644 --- a/i18n/ko/docusaurus-plugin-content-docs/current/views/day.md +++ b/i18n/ko/docusaurus-plugin-content-docs/current/views/day.md @@ -16,7 +16,7 @@ Day View는 [기본 스케줄러 마크업](guides/scheduler-markup.md)에 기 ~~~js //표준 초기화. Day View는 자동으로 포함됩니다. -scheduler.init('scheduler_here', new Date(2019,0,10), "week"); +scheduler.init('scheduler_here', new Date(2027,0,10), "week"); ... scheduler.load("/data/events"); ~~~ diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/views/grid.md b/i18n/ko/docusaurus-plugin-content-docs/current/views/grid.md index 9d7dd03f..87048481 100644 --- a/i18n/ko/docusaurus-plugin-content-docs/current/views/grid.md +++ b/i18n/ko/docusaurus-plugin-content-docs/current/views/grid.md @@ -51,8 +51,8 @@ scheduler.createGridView({ {id:"date", label:'Date', sort:'date', width:'*'}, {id:"text", label:'Text', sort:'str', width:200, align:'left'} ], - from:new Date(2019, 3, 10),//허용된 날짜 범위의 왼쪽 경계 - to:new Date(2019, 5, 23) //허용된 날짜 범위의 오른쪽 경계 + from:new Date(2027, 3, 10),//허용된 날짜 범위의 왼쪽 경계 + to:new Date(2027, 5, 23) //허용된 날짜 범위의 오른쪽 경계 }); ~~~ @@ -71,8 +71,8 @@ scheduler.createGridView({ scheduler.createGridView({ name:"grid", .. - from:new Date(2024, 0, 1), - to:new Date(2025, 0, 1) + from:new Date(2025, 0, 1), + to:new Date(2027, 0, 1) }); ~~~ diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/views/map.md b/i18n/ko/docusaurus-plugin-content-docs/current/views/map.md index 36f93186..ac5a1113 100644 --- a/i18n/ko/docusaurus-plugin-content-docs/current/views/map.md +++ b/i18n/ko/docusaurus-plugin-content-docs/current/views/map.md @@ -114,7 +114,7 @@ scheduler.config.map_settings = { } } ... -scheduler.init('scheduler_here',new Date(2024,5,11),"map"); +scheduler.init('scheduler_here',new Date(2027,5,11),"map"); ~~~ [자세한 내용 보기](views/map.md#maprelatedconfigurationoptions) @@ -126,7 +126,7 @@ scheduler.init('scheduler_here',new Date(2024,5,11),"map"); ~~~js scheduler.config.map_view_provider = "googleMap"; ... -scheduler.init('scheduler_here',new Date(2024,5,11),"map"); +scheduler.init('scheduler_here',new Date(2027,5,11),"map"); ~~~ 사용 가능한 값: *"googleMap", "openStreetMaps", "mapbox"*. @@ -138,7 +138,7 @@ scheduler.config.map_settings = { view_provider: "googleMap" } ... -scheduler.init('scheduler_here',new Date(2024,5,11),"map"); +scheduler.init('scheduler_here',new Date(2027,5,11),"map"); ~~~ ## 지도 관련 구성 옵션 {#maprelatedconfigurationoptions} @@ -169,7 +169,7 @@ scheduler.config.map_settings = { view_provider: "googleMap" } ... -scheduler.init('scheduler_here',new Date(2024,5,11),"map"); +scheduler.init('scheduler_here',new Date(2027,5,11),"map"); ~~~ 이 속성들은 다음을 포함합니다: diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/views/month.md b/i18n/ko/docusaurus-plugin-content-docs/current/views/month.md index 3f309f3c..030a4192 100644 --- a/i18n/ko/docusaurus-plugin-content-docs/current/views/month.md +++ b/i18n/ko/docusaurus-plugin-content-docs/current/views/month.md @@ -15,7 +15,7 @@ Month View는 [기본 스케줄러 마크업](guides/scheduler-markup.md)에 기 ~~~js // 표준 초기화; Month View는 자동으로 포함됩니다 -scheduler.init('scheduler_here', new Date(2019,0,10), "month"); +scheduler.init('scheduler_here', new Date(2027,0,10), "month"); ... scheduler.load("/data/events"); ~~~ @@ -41,10 +41,10 @@ Month View 탭을 제거하려면, [스케줄러 마크업](guides/scheduler-mar 셀당 최대 이벤트 개수를 설정하려면 [max_month_events](api/config/max_month_events.md) 옵션을 사용하세요: -~~~ +~~~js scheduler.config.max_month_events = 3; .. -scheduler.init('scheduler_here', new Date(2019,5,30), "month"); +scheduler.init('scheduler_here', new Date(2027,5,30), "month"); ~~~ 설정한 개수보다 더 많은 이벤트가 있을 경우, 'View more' 링크가 나타납니다. 이 링크를 클릭하면 Day View로 이동하여 모든 이벤트를 확인할 수 있습니다. @@ -89,7 +89,7 @@ scheduler.plugins({ // 날짜 클릭 시 Week View로 이동 scheduler.config.active_link_view = "week"; ... -scheduler.init('scheduler_here', new Date(2012,7,6), "month"); +scheduler.init('scheduler_here', new Date(2027,7,6), "month"); ~~~ @@ -106,7 +106,7 @@ scheduler.init('scheduler_here', new Date(2012,7,6), "month"); // 여러 날 이벤트 드래그앤드롭 크기 조절 활성화 scheduler.config.resize_month_events = true; /*!*/ -scheduler.init('scheduler_here', new Date(2019,0,10), "month"); +scheduler.init('scheduler_here', new Date(2027,0,10), "month"); ~~~ [Resizable events in Month view](https://docs.dhtmlx.com/scheduler/samples/02_customization/32_resizable_month_events.html) @@ -118,7 +118,7 @@ scheduler.init('scheduler_here', new Date(2019,0,10), "month"); // 단일 및 여러 날 이벤트 모두 드래그앤드롭 크기 조절 활성화 scheduler.config.resize_month_events = true;/*!*/ scheduler.config.resize_month_timed = true; /*!*/ -scheduler.init('scheduler_here', new Date(2019,0,10), "month"); +scheduler.init('scheduler_here', new Date(2027,0,10), "month"); ~~~ **참고:** diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/views/timeline.md b/i18n/ko/docusaurus-plugin-content-docs/current/views/timeline.md index 8a140fbf..ae70e32e 100644 --- a/i18n/ko/docusaurus-plugin-content-docs/current/views/timeline.md +++ b/i18n/ko/docusaurus-plugin-content-docs/current/views/timeline.md @@ -149,7 +149,7 @@ scheduler.createTimelineView({ ... }); -var timeline = scheduler.matrix.timeline; +const timeline = scheduler.matrix.timeline; ~~~ 생성 후 아래의 메서드들을 사용할 수 있습니다. @@ -159,7 +159,7 @@ var timeline = scheduler.matrix.timeline; 타임라인 뷰 객체를 가져오려면 [getView](api/method/getview.md) 메서드를 사용하세요. 뷰의 이름을 파라미터로 받습니다. 파라미터가 없으면 현재 뷰를 반환합니다. ~~~js -var timeline = scheduler.getView(); +const timeline = scheduler.getView(); timeline.x_size = 8; scheduler.setCurrentView(); ~~~ @@ -253,7 +253,7 @@ timeline.scrollTo({left:300, top:500}); - 스케일에서 특정 날짜의 X좌표를 얻으려면 **posFromDate()**를 Date 파라미터와 함께 사용하세요: ~~~js -var left = timeline.posFromDate(new Date()); +const left = timeline.posFromDate(new Date()); ~~~ :::note @@ -263,7 +263,7 @@ var left = timeline.posFromDate(new Date()); - 특정 행의 Y좌표를 얻으려면 **getSectionTop()**을 섹션 번호와 함께 사용하세요: ~~~js -var top = timeline.getSectionTop(section.key); +const top = timeline.getSectionTop(section.key); ~~~ :::note @@ -296,7 +296,7 @@ const top = timeline.getEventTop(scheduler.getEvent(event.id)); 현재 스크롤바 위치를 확인하려면 **timeline.getScrollPosition()**을 호출하세요. 스크롤 좌표가 담긴 객체를 반환합니다: ~~~js -var timeline = scheduler.getView(); +const timeline = scheduler.getView(); timeline.getScrollPosition(); // { left: 0, top: 0 } ~~~ @@ -308,7 +308,7 @@ timeline.getScrollPosition(); // { left: 0, top: 0 } **onScroll** 이벤트를 사용해 스크롤 변경을 감지할 수도 있습니다. 이 이벤트는 새로운 left, top 위치를 전달받습니다: ~~~js -var timeline = scheduler.getView(); +const timeline = scheduler.getView(); timeline.attachEvent("onScroll", function(left, top){}); ~~~ @@ -334,9 +334,9 @@ timeline.attachEvent("onScroll", function(left, top){}); 이 메서드는 이벤트 객체 배열을 반환합니다. ~~~js -var timeline = scheduler.getView(); +const timeline = scheduler.getView(); -var events = timeline.selectEvents({ +const events = timeline.selectEvents({ section: section.key, date: date, selectNested: true @@ -390,11 +390,11 @@ scheduler.createTimelineView({ scheduler.init('scheduler_here'); scheduler.parse([ - {text:"Conference", start_date:"17/09/2012 12:00", end_date:"18/09/2012 21:00", + {text:"Conference", start_date:"17/09/2027 12:00", end_date:"18/09/2027 21:00", room_id:"1"}, - {text:"Meeting", start_date:"17/09/2012 09:00", end_date:"17/09/2012 21:00", + {text:"Meeting", start_date:"17/09/2027 09:00", end_date:"17/09/2027 21:00", room_id:"2"}, - {text:"Conference", start_date:"17/09/2012 15:00", end_date:"18/09/2012 15:00", + {text:"Conference", start_date:"17/09/2027 15:00", end_date:"18/09/2027 15:00", room_id:"3"} ]); ~~~ @@ -443,7 +443,7 @@ scheduler.createTimelineView({ y_property: "section_id", /*!*/ ... }); -scheduler.init('scheduler_here', new Date(2012, 5, 30), "timeline"); +scheduler.init('scheduler_here', new Date(2027, 5, 30), "timeline"); scheduler.parse([ { id:1, text:"Task A", section_id:'1', ...},/*!*/ @@ -596,9 +596,9 @@ scheduler.ignore_timeline = function(date){ // "timeline"은 뷰 이름 ~~~js scheduler._click.dhx_cal_next_button = function(dummy,step){ - var mode = scheduler.getState().mode; - var minDate = scheduler.getState().min_date; - var formFunc = scheduler.date.date_to_str("%D"); + const mode = scheduler.getState().mode; + const minDate = scheduler.getState().min_date; + const formFunc = scheduler.date.date_to_str("%D"); // 주말 건너뛰기 if(mode=='timeline'){ @@ -874,7 +874,7 @@ scheduler.createTimelineView({ render: "bar", scrollable: true, /*!*/ column_width: 70, /*!*/ - scroll_position:new Date(2018, 0, 15) /*!*/ + scroll_position:new Date(2027, 0, 15) /*!*/ }); ~~~ @@ -984,15 +984,15 @@ scheduler.createTimelineView({ scheduler.templates.timeline_cell_value = function (evs, date, section){ if(section.children){ - var timeline = scheduler.getView(); + const timeline = scheduler.getView(); - var events = timeline.selectEvents({ + const events = timeline.selectEvents({ section: section.key, date: date, selectNested: true }); - var className = ""; + const className = ""; if(!events.length){ className = "load-marker-no"; }else if(events.length < 3){ diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/views/units.md b/i18n/ko/docusaurus-plugin-content-docs/current/views/units.md index 34abb0a8..bdcc4d16 100644 --- a/i18n/ko/docusaurus-plugin-content-docs/current/views/units.md +++ b/i18n/ko/docusaurus-plugin-content-docs/current/views/units.md @@ -74,11 +74,11 @@ scheduler.createUnitsView({ scheduler.init('scheduler_here'); scheduler.parse([ - {id:1, text:"Task1", start_date:"2019-09-17 12:00", end_date:"2019-09-18 21:00", + {id:1, text:"Task1", start_date:"2027-09-17 12:00", end_date:"2027-09-18 21:00", unit_id:"1"}, - {id:2, text:"Task2", start_date:"2019-09-17 09:00", end_date:"2019-09-17 21:00", + {id:2, text:"Task2", start_date:"2027-09-17 09:00", end_date:"2027-09-17 21:00", unit_id:"3"}, - {id:3, text:"Task3", start_date:"2019-09-17 15:00", end_date:"2019-09-18 15:00", + {id:3, text:"Task3", start_date:"2027-09-17 15:00", end_date:"2027-09-18 15:00", unit_id:"2"} ]); ~~~ @@ -177,7 +177,7 @@ scheduler.createUnitsView({ property: "section_id", /*!*/ ... }); -scheduler.init('scheduler_here', new Date(2019, 5, 30), "unit"); +scheduler.init('scheduler_here', new Date(2027, 5, 30), "unit"); scheduler.parse([ { id:1, text:"Task A", section_id:'1', ...},/*!*/ @@ -238,15 +238,15 @@ scheduler.createUnitsView({ "data":[ { "id":"1", - "start_date":"2019-03-02 15:00:00", - "end_date":"2019-03-04 16:00:00", + "start_date":"2027-03-02 15:00:00", + "end_date":"2027-03-04 16:00:00", "text":"Team meeting", "type_id":"1" }, { "id":"2", - "start_date":"2019-03-02 17:00:00", - "end_date":"2019-03-04 18:00:00", + "start_date":"2027-03-02 17:00:00", + "end_date":"2027-03-04 18:00:00", "text":"Strategy meeting", "type_id":"2" } diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/views/week.md b/i18n/ko/docusaurus-plugin-content-docs/current/views/week.md index 5c907099..150a3ed7 100644 --- a/i18n/ko/docusaurus-plugin-content-docs/current/views/week.md +++ b/i18n/ko/docusaurus-plugin-content-docs/current/views/week.md @@ -16,7 +16,7 @@ sidebar_label: "주간 보기" ~~~js // 표준 초기화. 주간 보기는 자동으로 추가됩니다 -scheduler.init('scheduler_here',new Date(2019,0,10),"week"); +scheduler.init('scheduler_here',new Date(2027,0,10),"week"); ... scheduler.load("/data/events"); ~~~ diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/whats-new.md b/i18n/ko/docusaurus-plugin-content-docs/current/whats-new.md index 528cfea3..f63b4055 100644 --- a/i18n/ko/docusaurus-plugin-content-docs/current/whats-new.md +++ b/i18n/ko/docusaurus-plugin-content-docs/current/whats-new.md @@ -1,11 +1,112 @@ --- -title: "What's New" -sidebar_label: "What's New" +title: "새로운 기능" +sidebar_label: "새로운 기능" --- -# What's New +# 새로운 기능 -이전 버전의 Scheduler에서 업그레이드하는 경우, 자세한 내용은 ["Migration From Older Versions"](migration.md)를 참고하세요. +오래된 버전의 Scheduler를 업데이트하는 경우, 자세한 내용은 [이전 버전에서의 마이그레이션](migration.md)을 확인하십시오. + +## 7.2.13 +------------- +2026년 3월 31일. 버그 수정 릴리스 + +### 수정 사항 + +- React Scheduler에서 잘못된 체험 경고를 수정 +- React Scheduler에서 이벤트를 편집할 때 기존 이벤트에 변경 사항이 적용되지 않던 원격 업데이트 관련 회귀를 수정 + + +## 7.2.12 +------------- +2026년 3월 23일. 버그 수정 릴리스 + +### 수정 사항 + +- [cookie] 플러그인이 활성화된 상태에서 비기본 테마를 사용할 때 [React Scheduler](integrations/react/overview.md)에서 페이지를 다시 로드할 때 발생하는 충돌을 수정 +- [React Scheduler](integrations/react/overview.md)에서 data 프롭의 save URL이 올바르게 적용되지 않던 회귀를 수정 +- 이 및 이후의 이벤트 모드에서 반복 이벤트의 두 번째 이후 항목을 편집할 때 모든 [Lightbox](guides/configuring-the-lightbox.md) 필드 변경이 적용되지 않던 문제를 수정 +- 이벤트 조건에 따라 동적으로 변경되는 [Quick Info](guides/quick-info.md) 버튼이 팝업을 올바르게 업데이트하지 않던 문제를 수정 +- "This and following events" 모드에서 단일 [recurring event](guides/recurring-events.md) 발생의 텍스트가 이후 항목 편집 후에 덮어써지던 문제를 수정 +- 긴 이벤트 설명을 올바르게 처리하기 위한 [Quick Info](guides/quick-info.md) 팝업의 오버플로우 스타일을 수정 +- [useState] 함수를 통해 기존 데이터 세트에 이벤트를 추가할 때 발생하던 스크립트 오류를 수정 + +### 업데이트 + +- [recurring event confirmation modal](guides/recurring-events.md#customconfirmationmodal)을 사용자 정의 대화상자로 대체하는 기능을 추가 +- [recurring event confirmation modal](integrations/react/overview.md#customizingtherecurrenceconfirmationmodal)을 React Scheduler에서 modals.onRecurrenceConfirm 속성을 통해 대체하는 기능을 추가 + + +## 7.2.11 +------------- +2026년 1월 12일. 버그 수정 릴리스 + +### 수정 사항 + +- [React Scheduler](integrations/react/overview.md)에서 `save` 핸들러가 새 ID를 반환하지 않는 경우 새 이벤트가 중복 생성되던 문제를 수정 +- [Timeline view](views/timeline.md) 템플릿이 [React Scheduler]( integrations/react/overview.md)에서 적용되지 않던 문제를 수정 +- 필터링이 사용될 때 Timeline 뷰에서 이벤트가 섹션에 잘못 바인딩되던 문제를 수정 +- [Agenda view](views/agenda.md)에서 `date` 섹션이 [header 구성](guides/initialization.md#initializing-scheduler-via-header-config)에 포함되지 않았을 때 발생하던 스크립트 오류를 수정 +- [Material skin](guides/skins.md#material-skin)을 사용할 때 Year 뷰와 Agenda 뷰의 헤더 요소가 잘못 표시되던 문제를 수정 +- 플러그인 기반 초기 뷰에서 표준 뷰로 전환할 때 [React Scheduler](integrations/react/overview.md)의 레이아웃이 깨지던 문제를 수정 +- 모든-day 반복 이벤트의 지속 시간이 정확히 24시간인 경우 팬텀 이벤트 블록이 나타나던 문제를 수정 +- 동일한 날에 드래그로 다중 이벤트를 생성할 때 [Month view](views/month.md)에서 연도 보기(year_view 플러그인 활성화)로 전환한 경우 [Lightbox](guides/configuring-the-lightbox.md)가 열리지 않던 문제를 수정 + + +## 7.2.10 +------------- +2025년 12월 10일. 버그 수정 릴리스 + +### 수정 사항 + +- 다중 일 단위 보기에서 마지막 열에서 드래그할 때 이벤트가 왼쪽으로 점프하던 문제를 수정 +- 특정 월에서 Month 뷰의 일부 날짜 셀이 누락되던 문제를 수정 +- [container_autoresize](guides/extensions-list.md#container-autoresize) 플러그인 사용 시 모바일 기기에서 드래그-생성 문제가 수정 +- 가로 스크롤 후 수평 스크롤에서 드래그-생성이 불가능해지던 [Units view](views/units.md) 문제를 수정 + + +## 7.2.9 +--------------- +2025년 9월 19일. 버그 수정 릴리스 + +### 수정 사항 + +- [Timeline view](views/timeline.md)에서 발생하던 메모리 누수를 수정 +- [container_autoresize](guides/extensions-list.md#container-autoresize) 플러그인과 [Week Agenda](views/weekagenda.md) 뷰 간의 호환성 문제 수정 +- [onScaleDblClick](api/event/onscaledblclick.md)가 기대대로 트리거되지 않던 문제 수정 +- [onEventSave](api/event/oneventsave.md) 및 [DataProcessor](api/method/createdataprocessor.md)의 동작이 [recurring events](guides/recurring-events.md)와 함께 사용할 때 불일치하던 문제 수정 +- [React Scheduler](integrations/react/overview.md)에서 컴포넌트의 여러 인스턴스가 중복된 템플릿을 야기하던 문제 수정 +- React Scheduler에서 events prop 변경 처리의 부정확성 수정 + + +## 7.2.8 + +2025년 7월 30일. 버그 수정 릴리스 + +### 신규 +- [React Scheduler](integrations/react/overview.md)의 샘플이 Commercial, Enterprise, Ultimate, 및 Evaluation 패키지에 추가되었습니다 + +### 수정 사항 + +- [recurring event](guides/recurring-events.md)을 삭제한 후 이를 드래그하여 이동할 때 동작이 잘못되던 문제를 수정 +- modified 시리즈 인스턴스에 대해 [lightbox](guides/lightbox-editors.md)의 “Repeat Event” 컨트롤이 비활성화되도록 수정 +- [recurring events](guides/recurring-events.md)의 레거시 라벨 표시가 잘못되던 문제 수정 +- [max_month_events](api/config/max_month_events.md) 설정과 [multi-day events](views/month.md) 간의 충돌로 Month 뷰에서 이벤트가 사라지거나 겹치던 문제 수정 +- HTTPS를 통한 Scheduler의 쿠키에 이제 Secure 속성이 포함되도록 보장 +- [event_duration](api/config/event_duration.md) 설정이 구문 분석된 이벤트 데이터를 손상시키던 문제 수정 +- [time_step](api/config/time_step.md) 설정이 구문 분석된 이벤트 데이터를 손상시키던 문제 수정 + + +## 7.2.6 + +2025년 6월 26일. 버그 수정 릴리스 + +### 수정 사항 + +- 이벤트 타이밍에서 초 단위 정밀도 관련 이슈 수정 +- 짧은 달 동안 Timeline 뷰의 드래그 동작이 잘못되던 문제 수정 +- Timeline 뷰에서 이벤트의 반올림이 잘못되던 문제 수정 +- DataProcessor가 custom router 인수에 !nativeeditor_status 속성을 추가하지 못하게 수정 ## 7.2.5 diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/api_overview.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/api_overview.md index 54a8c95a..88a9cfd1 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/api_overview.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/api_overview.md @@ -445,18 +445,18 @@ description: You can explore an API overview in the documentation of the DHTMLX | Name | Description | |--------------------------------------------|---------------------------------------------| -| [](api/other/ajax.md) | @getshort(api/method/ajax_other.md) | -| [](api/other/config.md) | @getshort(api/method/config_other.md) | -| [](api/other/date.md) | @getshort(api/method/date_other.md) | -| [](api/other/env.md) | @getshort(api/method/env_other.md) | -| [i18n](api/other/i18n.md) | @getshort(api/method/i18n_other.md) | -| [](api/other/ical.md) | @getshort(api/method/ical_other.md) | -| [](api/other/json.md) | @getshort(api/method/json_other.md) | -| [](api/other/keys.md) | @getshort(api/method/keys_other.md) | -| [](api/other/locale.md) | @getshort(api/method/locale_other.md) | -| [](api/other/matrix.md) | @getshort(api/method/matrix_other.md) | -| [](api/other/skin.md) | @getshort(api/method/skin_other.md) | -| [](api/other/templates.md) | @getshort(api/method/templates_other.md) | -| [](api/other/tooltip.md) | @getshort(api/method/tooltip_other.md) | -| [](api/other/version.md) | @getshort(api/method/version_other.md) | -| [](api/other/xy.md) | @getshort(api/method/xy_other.md) | +| [](api/other/ajax.md) | @getshort(api/other/ajax.md) | +| [](api/other/config.md) | @getshort(api/other/config.md) | +| [](api/other/date.md) | @getshort(api/other/date.md) | +| [](api/other/env.md) | @getshort(api/other/env.md) | +| [](api/other/i18n.md) | @getshort(api/other/i18n.md) | +| [](api/other/ical.md) | @getshort(api/other/ical.md) | +| [](api/other/json.md) | @getshort(api/other/json.md) | +| [](api/other/keys.md) | @getshort(api/other/keys.md) | +| [](api/other/locale.md) | @getshort(api/other/locale.md) | +| [](api/other/matrix.md) | @getshort(api/other/matrix.md) | +| [](api/other/skin.md) | @getshort(api/other/skin.md) | +| [](api/other/templates.md) | @getshort(api/other/templates.md) | +| [](api/other/tooltip.md) | @getshort(api/other/tooltip.md) | +| [](api/other/version.md) | @getshort(api/other/version.md) | +| [](api/other/xy.md) | @getshort(api/other/xy.md) | diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/active_link_view.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/active_link_view.md index 84a7fcc6..8605fac3 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/active_link_view.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/active_link_view.md @@ -1,14 +1,14 @@ --- -sidebar_label: "active_link_view" -title: "active_link_view config" -description: "Позволяет отображать номера дней в Month view в виде кликабельных ссылок, которые открывают соответствующий день в выбранном представлении." +sidebar_label: active_link_view +title: "конфигурация active_link_view" +description: "позволяет отображать числа дней в месячном виде как кликабельные ссылки, которые открывают соответствующий день в указанном представлении" --- # active_link_view ### Description -@short: Позволяет отображать номера дней в Month view в виде кликабельных ссылок, которые открывают соответствующий день в выбранном представлении. +@short: "позволяет отображать числа дней в месячном виде как кликабельные ссылки, которые открывают соответствующий день в указанном представлении" @signature: active_link_view: string @@ -20,21 +20,21 @@ scheduler.config.active_link_view = "week"; // указывает предста scheduler.init('scheduler_here',new Date(2012,7,6),"month"); ~~~ -**Default value:** day +**Значение по умолчанию:** day -**Applicable views:** [Month view](views/month.md) +**Доступные представления:** [Month view](views/month.md) ### Related samples -- [Month days as links](https://docs.dhtmlx.com/scheduler/samples/03_extensions/06_links_plugin.html) -- [Highlighted timespans in Month view](https://docs.dhtmlx.com/scheduler/samples/09_api/07_highlighted_timespans_month_view.html) +- [Дни месяца как ссылки](https://docs.dhtmlx.com/scheduler/samples/03_extensions/06_links_plugin.html) +- [Выделенные временные диапазоны во месячном виде](https://docs.dhtmlx.com/scheduler/samples/09_api/07_highlighted_timespans_month_view.html) ### Details :::note - Для работы данной настройки требуется включение плагина [active_links](guides/extensions-list.md#activelinks). + Свойство требует активации плагина [active_links](guides/extensions-list.md#active-links). ::: -Установите это свойство в имя представления, на которое должны ссылаться номера дней месяца. +Свойство должно быть установлено на имя представления, в котором вы хотите открыть дни месяца. ### Related Guides -- [Месячный вид](views/month.md#presentingdaysnumbersasclickablelinks) +- [Месячный просмотр](views/month.md#presenting-days-numbers-as-clickable-links) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/agenda_end.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/agenda_end.md index ebea212d..da5baa2f 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/agenda_end.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/agenda_end.md @@ -1,14 +1,14 @@ --- -sidebar_label: "agenda_end" -title: "agenda_end config" -description: "определяет дату, до которой отображаются события" +sidebar_label: agenda_end +title: "agenda_end конфигурация" +description: "устанавливает дату до которой будут отображаться события" --- # agenda_end ### Description -@short: Определяет дату, до которой отображаются события +@short: Устанавливает дату, до которой будут отображаться события @signature: agenda_end: Date @@ -21,9 +21,9 @@ scheduler.config.agenda_end = new Date(2014, 7, 1); scheduler.init('scheduler_here', new Date(2013, 0, 10), "agenda"); ~~~ -**Default value:** через один год после 'agenda_start' (значение) +**Значение по умолчанию:** 'agenda_start' (значение) + 1 год -**Applicable views:** [Agenda view](views/agenda.md) +**Доступные представления:** [Agenda view](views/agenda.md) ### Related samples - [Agenda view](https://docs.dhtmlx.com/scheduler/samples/03_extensions/03_agenda_view.html) @@ -31,8 +31,8 @@ scheduler.init('scheduler_here', new Date(2013, 0, 10), "agenda"); ### Details :::note - Эта настройка работает только если включен плагин [agenda_view](guides/extensions-list.md#agenda-view). + Свойство требует активации плагина [agenda_view](guides/extensions-list.md#agenda-view). ::: ### Related API -- [agenda_start](api/config/agenda_start.md) +- [agenda_start](api/config/agenda_start.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/agenda_start.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/agenda_start.md index afddbc07..039d0f20 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/agenda_start.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/agenda_start.md @@ -1,29 +1,29 @@ --- -sidebar_label: "agenda_start" -title: "agenda_start config" -description: "Задает дату, с которой начнется отображение событий" +sidebar_label: agenda_start +title: "agenda_start конфигурация" +description: "устанавливает дату начала отображения событий" --- # agenda_start ### Description -@short: Задает дату, с которой начнется отображение событий +@short: Устанавливает дату начала отображения событий @signature: agenda_start: Date ### Example ~~~jsx -scheduler.config.agenda_start = new Date(2012, 7, 1); -scheduler.config.agenda_end = new Date(2014, 7, 1); +scheduler.config.agenda_start = new Date(2027, 7, 1); +scheduler.config.agenda_end = new Date(2027, 7, 1); ... -scheduler.init('scheduler_here', new Date(2010, 0, 10), "agenda"); +scheduler.init('scheduler_here', new Date(2027, 0, 10), "agenda"); ~~~ -**Default value:** текущая дата пользователя +**Значение по умолчанию:** текущая дата пользователя -**Applicable views:** [Agenda view](views/agenda.md) +**Доступные представления:** [Agenda view](views/agenda.md) ### Related samples - [Agenda view](https://docs.dhtmlx.com/scheduler/samples/03_extensions/03_agenda_view.html) @@ -31,8 +31,8 @@ scheduler.init('scheduler_here', new Date(2010, 0, 10), "agenda"); ### Details :::note - Для этой настройки требуется включение плагина [agenda_view](guides/extensions-list.md#agenda-view). +Свойство требует активации плагина [agenda_view](guides/extensions-list.md#agenda-view). ::: ### Related API -- [agenda_end](api/config/agenda_end.md) +- [agenda_end](api/config/agenda_end.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/ajax_error.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/ajax_error.md index 242e8e54..4a9d91cf 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/ajax_error.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/ajax_error.md @@ -1,14 +1,14 @@ --- -sidebar_label: "ajax_error" -title: "ajax_error config" -description: "определяет, как отображается стандартное уведомление об ошибке при сбое загрузки XML данных" +sidebar_label: ajax_error +title: "конфигурация ajax_error" +description: "определяет, как отображать уведомление об ошибке по умолчанию в случае неудачной загрузки XML-данных" --- # ajax_error ### Description -@short: Определяет, как отображается стандартное уведомление об ошибке при сбое загрузки XML данных +@short: Определяет, как отображать уведомление об ошибке по умолчанию в случае неудачной загрузки XML-данных @signature: ajax_error: string | boolean @@ -25,10 +25,10 @@ scheduler.config.ajax_error = "console"; scheduler.init("scheduler_here"); ~~~ -**Default value:** "alert" +**Значение по умолчанию:** "alert" ### Details -По умолчанию уведомление об ошибке (когда scheduler.config.ajax_error = "alert") выглядит следующим образом: +Уведомление об ошибке по умолчанию (то есть когда scheduler.config.ajax_error = "alert") выглядит так: -![ajax_error_property](/img/ajax_error_property.png) +![ajax_error_property](/img/ajax_error_property.png) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/all_timed.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/all_timed.md index 041f4eef..a0092283 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/all_timed.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/all_timed.md @@ -1,43 +1,40 @@ ---- -sidebar_label: "all_timed" -title: "all_timed config" -description: "'говорит', как отображать многодневные события в привычном формате (аналогично тому, как отображаются однодневные события)" +--- +sidebar_label: all_timed +title: "all_timed конфигурация" +description: "для отображения многодневных событий обычным способом (как отображаются однодневные события)" --- # all_timed ### Description -@short: 'говорит', как отображать многодневные события в привычном формате (аналогично тому, как отображаются однодневные события) +@short: для отображения многодневных событий обычным способом (как отображаются однодневные события) @signature: all_timed: boolean | string -**Default value:** 'short' +**Значение по умолчанию:** 'short' -**Applicable views:** [Day view](views/day.md), [Week view](views/week.md), [Units view](views/units.md) +**Применимые виды:** [Day view](views/day.md), [Week view](views/week.md), [Units view](views/units.md) ### Related samples -- [Displaying multi-day events in the regular way](https://docs.dhtmlx.com/scheduler/samples/03_extensions/26_multi_day_visible.html) +- [Отображение многодневных событий обычным способом](https://docs.dhtmlx.com/scheduler/samples/03_extensions/26_multi_day_visible.html) ### Details :::note - Свойство требует включения плагина [all_timed](guides/extensions-list.md#all-timed). -::: - -В качестве строки параметр принимает только одно значение - *'short'*. + Свойство требует активации плагина [all_timed](guides/extensions-list.md#all-timed). +::: -
+Как строковый параметр, значение может принимать единственное - *'short'*. -Для этого параметра доступны три возможных значения: +Итак, параметр может принимать 3 возможных значения: -- **'short'** - отображает только многодневные события, длящихся менее 24 часов (начинающиеся в один день и заканчивающиеся в другой), в привычном формате -- **true** - отображает все многодневные события в привычном формате -- **false** - отображает все многодневные события в виде линий в верхней части scheduler (режим отображения по умолчанию для многодневных событий) +- **'short'** - показывать только многодневные события, длительность которых менее 24 часов (начинаются в один день и заканчиваются в другой) обычным способом +- **true** - показывать все многодневные события обычным способом +- **false** - показывать все многодневные события в виде линий в верхней части планировщика (стандартный режим отображения для многодневных событий) -Для более точного управления тем, какие события показываются в многодневном разделе, а какие - в колонках дней, -вы можете переопределить метод `isMainAreaEvent` модуля следующим образом: +Чтобы обеспечить больший контроль над тем, какие события отображаются в секции многодневных событий и какие — в дневных колонках, переопределите метод `isMainAreaEvent` модуля следующим образом: ~~~js const { isMainAreaEvent } = scheduler.ext.allTimed; @@ -51,4 +48,4 @@ scheduler.ext.allTimed.isMainAreaEvent = function(event) { ~~~ ### Change log -- Плагин включён по умолчанию начиная с версии 7.2 +- Плагин активируется по умолчанию, начиная с версии v7.2 \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/api_date.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/api_date.md index 10cb558c..64d0fd1a 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/api_date.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/api_date.md @@ -1,14 +1,13 @@ --- -sidebar_label: "api_date" -title: "api_date config" -description: "задаёт формат даты, используемый в шаблоне api_date" +sidebar_label: api_date +title: "конфигурация api_date" +description: "Определяет формат даты для шаблона api_date" --- # api_date ### Description - -@short: Задаёт формат даты, используемый в шаблоне api_date +@short: Определяет формат даты для шаблона api_date @signature: api_date: string @@ -17,16 +16,16 @@ description: "задаёт формат даты, используемый в ш ~~~jsx scheduler.config.api_date="%Y-%m-%d %H:%i"; -scheduler.init("scheduler_here",new Date(2009,10,1),"week"); +scheduler.init("scheduler_here",new Date(2027,10,1),"week"); ~~~ -**Default value:** "%d-%m-%Y %H:%i" +**Значение по умолчанию:** "%d-%m-%Y %H:%i" ### Related samples -- [Read-only events](https://docs.dhtmlx.com/scheduler/samples/03_extensions/14_readonly_event.html) +- [События только для чтения](https://docs.dhtmlx.com/scheduler/samples/03_extensions/14_readonly_event.html) ### Related API - [api_date](api/template/api_date.md) ### Related Guides -- [Спецификация формата даты](guides/settings-format.md) +- [Спецификация форматов дат](guides/settings-format.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/auto_end_date.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/auto_end_date.md index 5b63abbe..c43eafd7 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/auto_end_date.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/auto_end_date.md @@ -1,14 +1,14 @@ --- -sidebar_label: "auto_end_date" -title: "auto_end_date config" -description: "автоматически обновляет дату окончания события при изменении даты начала" +sidebar_label: auto_end_date +title: "Конфигурация auto_end_date" +description: "позволяет автоматически изменять дату окончания события после изменения даты начала" --- # auto_end_date ### Description -@short: Автоматически обновляет дату окончания события при изменении даты начала +@short: Позволяет автоматически изменять дату окончания события после изменения даты начала @signature: auto_end_date: boolean @@ -21,18 +21,17 @@ scheduler.config.auto_end_date = true; scheduler.init('scheduler_here',new Date(2013,05,11),"week"); ~~~ -**Default value:** false +**Значение по умолчанию:** false ### Related samples -- [Automatic end date](https://docs.dhtmlx.com/scheduler/samples/02_customization/11_auto_end_date.html) -- [Checkbox in the lightbox](https://docs.dhtmlx.com/scheduler/samples/02_customization/13_single_checkbox_section.html) +- [Автоматическая дата окончания](https://docs.dhtmlx.com/scheduler/samples/02_customization/11_auto_end_date.html) +- [Чекбокс во lightbox](https://docs.dhtmlx.com/scheduler/samples/02_customization/13_single_checkbox_section.html) ### Details -- Этот параметр доступен начиная с версии 2.3. -- Он предназначен для использования вместе с опцией [event_duration](api/config/event_duration.md). -- При значении *true* изменение времени или даты начала события в lightbox автоматически обновляет время и дату окончания, чтобы сохранить длительность события, заданную в -опции [event_duration](api/config/event_duration.md). +- Параметр доступен начиная с версии 2.3. +- Параметр используется только в паре с опцией [event_duration](api/config/event_duration.md). +- Если параметр установлен в *true*, то при изменении времени или даты начала события во всплывающем окне время и дата окончания будут изменяться автоматически, чтобы продолжительность события соответствовала значению опции [event_duration](api/config/event_duration.md). ### Related API -- [event_duration](api/config/event_duration.md) +- [event_duration](api/config/event_duration.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/buttons_left.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/buttons_left.md index 84b76392..c7a7ac6f 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/buttons_left.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/buttons_left.md @@ -1,14 +1,14 @@ --- -sidebar_label: "buttons_left" -title: "buttons_left config" -description: "содержит набор кнопок, расположенных в левом нижнем углу лайтбокса" +sidebar_label: buttons_left +title: "buttons_left конфигурация" +description: "сохраняет коллекцию кнопок, размещённых в левом нижнем углу лайтбокса" --- # buttons_left ### Description -@short: Содержит набор кнопок, расположенных в левом нижнем углу лайтбокса +@short: Хранит коллекцию кнопок, размещённых в левом нижнем углу лайтбокса @signature: buttons_left: any[] @@ -24,7 +24,7 @@ description: "содержит набор кнопок, расположенны ~~~ -**Default value:** ["dhx_save_btn", "dhx_cancel_btn"] +**Значение по умолчанию:** ["dhx_save_btn", "dhx_cancel_btn"] ### Details @@ -42,4 +42,4 @@ description: "содержит набор кнопок, расположенны ### Related API - [buttons_right](api/config/buttons_right.md) -- [onLightboxButton](api/event/onlightboxbutton.md) +- [onLightboxButton](api/event/onlightboxbutton.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/buttons_right.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/buttons_right.md index 7a31daab..25768032 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/buttons_right.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/buttons_right.md @@ -1,14 +1,14 @@ --- -sidebar_label: "buttons_right" -title: "buttons_right config" -description: "содержит набор кнопок, расположенных в правом нижнем углу лайтбокса" +sidebar_label: buttons_right +title: "конфигурация buttons_right" +description: "хранит коллекцию кнопок, размещённых в правом нижнем углу lightbox" --- # buttons_right ### Description -@short: Содержит набор кнопок, расположенных в правом нижнем углу лайтбокса +@short: Хранит коллекцию кнопок, размещённых в правом нижнем углу lightbox @signature: buttons_right: any[] @@ -24,7 +24,7 @@ description: "содержит набор кнопок, расположенны ~~~ -**Default value:** ["dhx_delete_btn"] +**Значение по умолчанию:** ["dhx_delete_btn"] ### Details @@ -42,4 +42,4 @@ description: "содержит набор кнопок, расположенны ### Related API - [buttons_left](api/config/buttons_left.md) -- [onLightboxButton](api/event/onlightboxbutton.md) +- [onLightboxButton](api/event/onlightboxbutton.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/cascade_event_count.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/cascade_event_count.md index 112a329f..d537a84e 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/cascade_event_count.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/cascade_event_count.md @@ -1,14 +1,14 @@ --- -sidebar_label: "cascade_event_count" +sidebar_label: cascade_event_count title: "cascade_event_count config" -description: "определяет максимальное количество событий, отображаемых в каскаде" +description: "устанавливает максимальное количество событий в каскаде" --- # cascade_event_count ### Description -@short: Определяет максимальное количество событий, отображаемых в каскаде +@short: Устанавливает максимальное количество событий в каскаде @signature: cascade_event_count: number @@ -19,17 +19,17 @@ description: "определяет максимальное количество scheduler.config.cascade_event_count = 4; ~~~ -**Default value:** 4 +**Значение по умолчанию:** 4 -**Applicable views:** [Day view](views/day.md), [Week view](views/week.md), [Units view](views/units.md) +**Подходящие представления:** [Day view](views/day.md), [Week view](views/week.md), [Units view](views/units.md) ### Related samples -- [Displaying events as a cascade](https://docs.dhtmlx.com/scheduler/samples/02_customization/24_cascade_event_display.html) +- [Отображение событий как каскада](https://docs.dhtmlx.com/scheduler/samples/02_customization/24_cascade_event_display.html) ### Details -Если количество событий превышает этот лимит, дополнительные события будут отображены поверх каскада. +События, превышающие установленное значение, будут отображаться поверх каскада. ### Related API - [cascade_event_display](api/config/cascade_event_display.md) -- [cascade_event_margin](api/config/cascade_event_margin.md) +- [cascade_event_margin](api/config/cascade_event_margin.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/cascade_event_display.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/cascade_event_display.md index 659e8f69..c8d78eb6 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/cascade_event_display.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/cascade_event_display.md @@ -1,41 +1,40 @@ --- -sidebar_label: "cascade_event_display" -title: "cascade_event_display config" -description: "включает режим отображения 'cascade'" +sidebar_label: cascade_event_display +title: "конфигурация cascade_event_display" +description: "устанавливает режим отображения 'cascade'" --- # cascade_event_display ### Description -@short: Включает режим отображения 'cascade' +@short: Устанавливает режим отображения 'cascade' @signature: cascade_event_display: boolean ### Example ~~~jsx -scheduler.config.cascade_event_display = true; -scheduler.config.cascade_event_count = 4; -scheduler.config.cascade_event_margin = 30; -... -scheduler.init('scheduler_here', new Date(2009,5,30), "week"); +scheduler.config.cascade_event_display = true; +scheduler.config.cascade_event_count = 4; +scheduler.config.cascade_event_margin = 30; +... +scheduler.init('scheduler_here',new Date(2027,5,30),"week"); ~~~ -**Default value:** false +**Значение по умолчанию:** false -**Applicable views:** [Day view](views/day.md), [Week view](views/week.md), [Units view](views/units.md) +**Подходящие представления:** [Day view](views/day.md), [Week view](views/week.md), [Units view](views/units.md) ### Related samples - [Displaying events as a cascade](https://docs.dhtmlx.com/scheduler/samples/02_customization/24_cascade_event_display.html) ### Details -По умолчанию события, которые накладываются по времени, отображаются одно за другим. Включение этой опции меняет отображение на каскадный стиль для таких событий. +По умолчанию события, запланированные на одно и то же время, отображаются по одному. Если вы хотите представить такие события как каскад, установите параметр в значение *true*. -
![cascade_event_display_property](/img/cascade_event_display_property.png) ### Related API - [cascade_event_count](api/config/cascade_event_count.md) -- [cascade_event_margin](api/config/cascade_event_margin.md) +- [cascade_event_margin](api/config/cascade_event_margin.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/cascade_event_margin.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/cascade_event_margin.md index 88855ba7..6e09a948 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/cascade_event_margin.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/cascade_event_margin.md @@ -1,14 +1,14 @@ --- -sidebar_label: "cascade_event_margin" -title: "cascade_event_margin config" -description: "определяет левый отступ для серии каскадных событий" +sidebar_label: cascade_event_margin +title: "конфигурация cascade_event_margin" +description: "устанавливает левый отступ для каскада событий" --- # cascade_event_margin ### Description -@short: Определяет левый отступ для серии каскадных событий +@short: Устанавливает левый отступ для каскада событий @signature: cascade_event_margin: number @@ -19,15 +19,15 @@ scheduler.config.cascade_event_display = true; scheduler.config.cascade_event_count = 4; scheduler.config.cascade_event_margin = 30; ... -scheduler.init('scheduler_here',new Date(2009,5,30),"week"); +scheduler.init('scheduler_here',new Date(2027,5,30),"week"); ~~~ -**Default value:** 30 +**Значение по умолчанию:** 30 -**Applicable views:** [Day view](views/day.md), [Week view](views/week.md), [Units view](views/units.md) +**Подходящие представления:** [Day view](views/day.md), [Week view](views/week.md), [Units view](views/units.md) ### Related samples -- [Displaying events as a cascade](https://docs.dhtmlx.com/scheduler/samples/02_customization/24_cascade_event_display.html) +- [Отображение событий как каскада](https://docs.dhtmlx.com/scheduler/samples/02_customization/24_cascade_event_display.html) ### Details @@ -35,4 +35,4 @@ scheduler.init('scheduler_here',new Date(2009,5,30),"week"); ### Related API - [cascade_event_display](api/config/cascade_event_display.md) -- [cascade_event_count](api/config/cascade_event_count.md) +- [cascade_event_count](api/config/cascade_event_count.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/check_limits.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/check_limits.md index fb37071a..f6c83da7 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/check_limits.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/check_limits.md @@ -1,14 +1,14 @@ --- -sidebar_label: "check_limits" -title: "check_limits config" -description: "включает или отключает проверку ограничений" +sidebar_label: check_limits +title: "конфигурация check_limits" +description: "активирует/деактивирует проверку лимитов" --- # check_limits ### Description -@short: Включает или отключает проверку ограничений +@short: Активирует/деактивирует проверку лимитов @signature: check_limits: boolean @@ -20,17 +20,17 @@ scheduler.config.check_limits = false; scheduler.init('scheduler_here',new Date(2013,7,6),"week"); ~~~ -**Default value:** true +**Значение по умолчанию:** true ### Details :::note - Свойство требует активации плагина [limit](guides/extensions-list.md#limit). + Свойство требует активации плагина [limit](guides/extensions-list.md#limit). ::: -Эта опция доступна с версии 3.5. +Параметр доступен начиная с версии 3.5. Отключение этой настройки может быть полезно, если ограничения не заданы и требуется только подсветка или отметка текущего времени, так как это может улучшить производительность. Однако если ограничения определены, отключение этой опции также выключит все функции «блокировки». ### Related Guides -- [Блокировка и выделение дат](guides/limits.md) +- [Блокирование и пометка дат](guides/limits.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/collision_limit.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/collision_limit.md index 9abb6fa3..8349e863 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/collision_limit.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/collision_limit.md @@ -1,14 +1,14 @@ --- -sidebar_label: "collision_limit" -title: "collision_limit config" -description: "определяет максимальное количество событий, разрешенных в одном временном слоте" +sidebar_label: collision_limit +title: "collision_limit конфигурация" +description: "устанавливает максимально допустимое количество событий в каждом временном интервале" --- # collision_limit ### Description -@short: Определяет максимальное количество событий, разрешенных в одном временном слоте +@short: Устанавливает максимальное допустимое число событий в каждом временном интервале @signature: collision_limit: number @@ -17,16 +17,16 @@ description: "определяет максимальное количество ~~~jsx scheduler.config.collision_limit = 2; ... -scheduler.init('scheduler_here',new Date(2010,05,11),"week"); +scheduler.init('scheduler_here',new Date(2027,05,11),"week"); ~~~ -**Default value:** 1 +**Значение по умолчанию:** 1 ### Details :::note - Это свойство работает только при включенном плагине [collision](guides/extensions-list.md#collision). + Свойство требует активации плагина [collision](guides/extensions-list.md#collision). ::: ### Related Guides -- [Предотвращение двойных событий в одном временном слоте](guides/collisions.md) +- [Предотвращение двойных событий в временном слоте](guides/collisions.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/container_autoresize.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/container_autoresize.md index 9803f800..a154c77a 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/container_autoresize.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/container_autoresize.md @@ -1,14 +1,14 @@ --- -sidebar_label: "container_autoresize" -title: "container_autoresize config" -description: "позволяет контейнеру scheduler автоматически подстраивать свой размер под весь контент без необходимости прокрутки" +sidebar_label: container_autoresize +title: "конфигурация container_autoresize" +description: "заставляет контейнер планировщика автоматически изменять размер, чтобы отобразить все содержимое без прокрутки" --- # container_autoresize ### Description -@short: Позволяет контейнеру scheduler автоматически подстраивать свой размер под весь контент без необходимости прокрутки +@short: Принуждает контейнер планировщика автоматически изменять размер, чтобы показать всё содержимое без прокрутки @signature: container_autoresize: boolean @@ -17,18 +17,18 @@ description: "позволяет контейнеру scheduler автомати ~~~jsx scheduler.config.container_autoresize = false; ... -scheduler.init('scheduler_here',new Date(2013,0,10),"week"); +scheduler.init('scheduler_here',new Date(2027,0,10),"week"); ~~~ -**Default value:** true +**Значение по умолчанию:** true ### Related samples -- [Autoresizing the scheduler container](https://docs.dhtmlx.com/scheduler/samples/03_extensions/28_container_autoresize.html) +- [Авторазмер контейнера планировщика](https://docs.dhtmlx.com/scheduler/samples/03_extensions/28_container_autoresize.html) ### Details :::note - Это свойство становится активным после включения плагина [container_autoresize](guides/extensions-list.md#containerautoresize). + Свойство будет включено после включения плагина [container_autoresize](guides/extensions-list.md#container-autoresize). ::: -![container_autoresize_property](/img/container_autoresize_property.png) +![container_autoresize_property](/img/container_autoresize_property.png) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/csp.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/csp.md index 4138d4e1..f9a4ed82 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/csp.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/csp.md @@ -1,14 +1,14 @@ --- -sidebar_label: "csp" -title: "csp config" -description: "определяет, как внутренне реализованы методы форматирования даты" +sidebar_label: csp +title: "конфигурация CSP" +description: "определяет внутреннюю реализацию кода методов форматирования дат" --- # csp ### Description -@short: Определяет, как внутренне реализованы методы форматирования даты +@short: Определяет внутреннюю реализацию кода методов форматирования дат @signature: csp: boolean | string @@ -24,37 +24,37 @@ scheduler.init("gantt_here"); ### Details -Некоторые среды выполнения, например Salesforce Lightning, могут блокировать корректную работу кода dhtmlxScheduler. Обычно это происходит из-за политики безопасности контента (Content Security Policy, CSP), установленной в приложении. +Среда выполнения некоторых приложений (например, Salesforce Lightning) часто может блокировать выполнение кода dhtmlxScheduler. +Основная причина этого — указание политики безопасности контента в приложении (Content Security Policy). +CSP может трактовать выполнение внутреннего высокопроизводительного кода форматирования дат в Scheduler как небезопасное. -CSP может рассматривать способ выполнения методов форматирования даты в Scheduler как небезопасный. +Конфигурация **csp** позволяет предотвратить блокировку кода scheduler через указание способа его реализации. -Конфигурация **csp** помогает избежать блокировки кода Scheduler, позволяя выбрать, как именно реализованы эти методы. +Существует три режима внутренней реализации методов форматирования дат **scheduler.date.date_to_str** и **scheduler.date.str_to_date**: -Существует три режима работы внутренних методов **scheduler.date.date_to_str** и **scheduler.date.str_to_date**: - -- По умолчанию установлено значение *auto*. +- По умолчанию конфигурация устанавливается в режим *auto*. ~~~js scheduler.config.csp = "auto"; ~~~ -В этом режиме Scheduler пытается использовать максимально быстрый код для форматирования даты. Если настройки приложения это запрещают, происходит переключение на совместимую версию. +В этом режиме Scheduler пытается использовать высокопроизводительный код для методов форматирования дат там, где это возможно. В случае, если выполнение действительно продуктивного кода будет заблокировано настройками приложения, будет использован совместимый код. -- Можно принудительно заставить Scheduler всегда использовать совместимый код, установив значение *true*. +- Вы можете сделать код Scheduler всегда совместимым, установив значение в *true*. ~~~js scheduler.config.csp = true; ~~~ -Это гарантирует работу кода везде, хотя может снизить производительность. +В этом режиме код Scheduler будет работать в любом случае, но это может привести к снижению производительности. -- Либо можно установить значение *false*, чтобы всегда использовать высокопроизводительный код. +- Вы также можете установить значение конфигурации на *false*, чтобы код Scheduler работал только в высокопроизводительном режиме. ~~~js scheduler.config.csp = false; ~~~ -Имейте в виду, что если приложение блокирует этот высокопроизводительный код, dhtmlxScheduler перестанет работать. +Обратите внимание, работа dhtmlxScheduler остановится, если реализация кода будет заблокирована настройками приложения. ### Change log -- добавлено в версии v6.0 +- добавлено в v6.0 \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/date_format.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/date_format.md index 57fb6979..4be9378d 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/date_format.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/date_format.md @@ -1,14 +1,14 @@ --- -sidebar_label: "date_format" -title: "date_format config" -description: "определяет формат даты, используемый для парсинга данных из набора данных и для отправки дат обратно на сервер" +sidebar_label: date_format +title: "date_format конфигурация" +description: "Устанавливает формат даты, который используется для разбора данных из набора данных и для отправки дат обратно на сервер" --- # date_format ### Description -@short: Определяет формат даты, используемый для парсинга данных из набора данных и для отправки дат обратно на сервер +@short: Устанавливает формат даты, который используется для разбора данных из набора данных и для отправки дат обратно на сервер @signature: date_format: string @@ -17,24 +17,24 @@ description: "определяет формат даты, используемы ~~~jsx scheduler.config.date_format = "%Y-%m-%d %H:%i"; ... -scheduler.init('scheduler_here',new Date(2019,0,10),"week"); +scheduler.init('scheduler_here',new Date(2027,0,10),"week"); scheduler.load("/data/events"); ~~~ -**Default value:** "%Y-%m-%d %H:%i" +**Значение по умолчанию:** "%Y-%m-%d %H:%i" ### Related samples -- [Basic initialization](https://docs.dhtmlx.com/scheduler/samples/01_initialization_loading/01_basic_init.html) -- [Setting the Y-Axis format](https://docs.dhtmlx.com/scheduler/samples/01_initialization_loading/02_hour_scale_format.html) +- [Базовая инициализация](https://docs.dhtmlx.com/scheduler/samples/01_initialization_loading/01_basic_init.html) +- [Настройка формата оси Y](https://docs.dhtmlx.com/scheduler/samples/01_initialization_loading/02_hour_scale_format.html) ### Details -Этот параметр конфигурации отвечает за генерацию шаблонных функций [parse_date](api/template/parse_date.md) и [format_date](api/template/format_date.md). -Чтобы использовать пользовательский формат, вы можете либо обновить эту настройку, либо напрямую переопределить шаблоны **parse_date** и **format_date**. +Это конфигурационное значение используется для генерации [parse_date](api/template/parse_date.md) и [format_date](api/template/format_date.md) шаблонных функций. +Если вы хотите использовать свой собственный формат, вы можете либо изменить эту конфигурацию, либо напрямую переопределить шаблоны **parse_date** и **format_date**. ### Related API - [parse_date](api/template/parse_date.md) - [format_date](api/template/format_date.md) ### Related Guides -- [Спецификация формата даты](guides/settings-format.md) +- [Спецификация формата даты](guides/settings-format.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/day_column_padding.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/day_column_padding.md index b3560538..96c9c7c5 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/day_column_padding.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/day_column_padding.md @@ -1,14 +1,14 @@ --- -sidebar_label: "day_column_padding" -title: "day_column_padding config" -description: "добавляет padding к колонке представления" +sidebar_label: day_column_padding +title: "day_column_padding конфигурация" +description: "добавляет отступ к столбцу вида" --- # day_column_padding ### Description -@short: Добавляет padding к колонке представления +@short: Добавляет отступ к колонке представления @signature: day_column_padding: number @@ -18,25 +18,25 @@ description: "добавляет padding к колонке представле scheduler.config.day_column_padding = 20; ~~~ -**Default value:** 8 +**Значение по умолчанию:** 8 ### Details -События могут растягиваться на всю ширину колонок представления. Настройка `day_column_padding` ограничивает максимальную ширину, которую события могут занимать внутри каждой ячейки. Таким образом, по бокам колонки всегда остаётся некоторое пустое пространство, что позволяет пользователям создавать новые события, двойным кликом по этим пустым зонам. +События могут занимать всю ширину столбцов вида. Настройка `day_column_padding` ограничивает максимальную ширину, которую события могут занимать внутри ячеек. Это обеспечивает наличие свободного пространства по бокам столбца, позволяя пользователям создавать новые события двойным щелчком по этим пустым областям. -**Отключённый padding** +**Отключённый отступ** ~~~ scheduler.config.day_column_padding = 0; ~~~ -![Scheduler - no padding in day columns](/img/day_column_padding_none.png) +![Scheduler - без отступа в дневных столбцах](/img/day_column_padding_none.png) -**Включённый padding** +**Включённый отступ** ~~~ scheduler.config.day_column_padding = 8; ~~~ -![Scheduler - padding inside day columns](/img/day_column_padding_set.png) +![Scheduler - отступ внутри дневных столбцов](/img/day_column_padding_set.png) ### Change log -- added in v7.0 +- добавлен в версии 7.0 \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/day_date.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/day_date.md index c9718b87..9c004e24 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/day_date.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/day_date.md @@ -1,14 +1,14 @@ --- -sidebar_label: "day_date" -title: "day_date config" -description: "задаёт формат даты, используемый на оси X в представлениях Week и Units" +sidebar_label: day_date +title: "day_date конфигурация" +description: "устанавливает формат даты для оси X в представлениях Week и Units" --- # day_date ### Description -@short: Задаёт формат даты, используемый на оси X в представлениях Week и Units +@short: Устанавливает формат даты для оси X в представлениях Week и Units @signature: day_date: string @@ -17,25 +17,25 @@ description: "задаёт формат даты, используемый на ~~~jsx scheduler.config.day_date = "%F %j"; ... -scheduler.init('scheduler_here', new Date(2013, 7, 5), "week"); +scheduler.init('scheduler_here', new Date(2027, 7, 5), "week"); ~~~ -**Default value:** "%D, %F %j" +**Значение по умолчанию:** "%D, %F %j" -**Applicable views:** [Week view](views/week.md), [Units view](views/units.md) +**Доступные представления:** [Week view](views/week.md), [Units view](views/units.md) ### Details ![weekView_properties](/img/weekView_properties.png) -Эта настройка вступает в силу только если она задана до первой инициализации scheduler: +Конфигурация вступит в силу только если она применяется до первой инициализации scheduller: ~~~js scheduler.config.day_date = "%F %j"; -scheduler.init('scheduler_here', new Date(2020, 7, 5), "day"); +scheduler.init('scheduler_here', new Date(2027, 7, 5), "day"); ~~~ -Чтобы обновить формат даты после инициализации, необходимо переопределить шаблон [day_date](api/template/day_date.md): +Если вы хотите изменить формат даты после инициализации, необходимо переопределить шаблон [day_date](api/template/day_date.md): ~~~js var formatDayDate = scheduler.date.date_to_str("%F %j"); @@ -46,4 +46,4 @@ scheduler.templates.day_date = function(date) { ### Related Guides - [Спецификация формата даты](guides/settings-format.md) -- [Форматирование меток, дат, стилей](guides/templates.md) +- [Форматирование меток, дат, стилей](guides/templates.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/dblclick_create.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/dblclick_create.md index 0990125d..c3cff3ef 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/dblclick_create.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/dblclick_create.md @@ -1,14 +1,14 @@ --- -sidebar_label: "dblclick_create" -title: "dblclick_create config" -description: "позволяет пользователям создавать события двойным щелчком мыши" +sidebar_label: dblclick_create +title: "конфигурация dblclick_create" +description: "позволяет создавать события двойным кликом" --- # dblclick_create ### Description -@short: Позволяет пользователям создавать события двойным щелчком мыши +@short: Позволяет создавать события двойным кликом @signature: dblclick_create: boolean @@ -17,10 +17,10 @@ description: "позволяет пользователям создавать ~~~jsx scheduler.config.dblclick_create = false; ... -scheduler.init('scheduler_here',new Date(2013,05,11),"week"); +scheduler.init('scheduler_here',new Date(2027,05,11),"week"); ~~~ -**Default value:** true +**Значение по умолчанию:** true ### Related samples -- [Read-only lightbox](https://docs.dhtmlx.com/scheduler/samples/03_extensions/12_readonly_form.html) +- [Read-only lightbox](https://docs.dhtmlx.com/scheduler/samples/03_extensions/12_readonly_form.html) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/default_date.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/default_date.md index 586acd45..a19f4ad3 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/default_date.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/default_date.md @@ -1,14 +1,14 @@ --- -sidebar_label: "default_date" +sidebar_label: default_date title: "default_date config" -description: "определяет формат даты, используемый в шаблонах 'day_date', 'week_date', 'day_scale_date' для отображения дат в заголовках представлений" +description: "устанавливает формат даты, используемый шаблонами 'day_date', 'week_date', 'day_scale_date' для отображения даты в заголовках представлений" --- # default_date ### Description -@short: Определяет формат даты, используемый в шаблонах 'day_date', 'week_date', 'day_scale_date' для отображения дат в заголовках представлений +@short: Устанавливает формат даты, используемый шаблонами 'day_date', 'week_date', 'day_scale_date' для установки даты в заголовках представлений @signature: default_date: string @@ -17,12 +17,12 @@ description: "определяет формат даты, используемы ~~~jsx scheduler.config.default_date = "%j %M %Y"; ... -scheduler.init('scheduler_here', new Date(2013,05,11), "week"); +scheduler.init('scheduler_here',new Date(2027,05,11),"week"); ~~~ -**Default value:** "%j %M %Y" +**Значение по умолчанию:** "%j %M %Y" -**Applicable views:** [Day view](views/day.md), [Timeline view](views/timeline.md), [Week view](views/week.md), [Week Agenda view](views/weekagenda.md), [Units view](views/units.md) +**Доступные представления:** [Day view](views/day.md), [Timeline view](views/timeline.md), [Week view](views/week.md), [Week Agenda view](views/weekagenda.md), [Units view](views/units.md) ### Related samples - [Configuring the time scale (X-Axis)](https://docs.dhtmlx.com/scheduler/samples/06_timeline/05_week_lines.html) @@ -37,4 +37,4 @@ scheduler.init('scheduler_here', new Date(2013,05,11), "week"); - [day_scale_date](api/template/day_scale_date.md) ### Related Guides -- [Спецификация формата даты](guides/settings-format.md) +- [Date Format Specification](guides/settings-format.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/delay_render.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/delay_render.md index 67bbfd43..faa39e65 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/delay_render.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/delay_render.md @@ -1,14 +1,14 @@ --- -sidebar_label: "delay_render" -title: "delay_render config" -description: "устанавливает таймаут (в миллисекундах), который оборачивает вызовы [updateView](api/method/updateview.md) и [setCurrentView](api/method/setcurrentview.md) (которые запускают перерисовку scheduler)" +sidebar_label: delay_render +title: "конфигурация delay_render" +description: "устанавливает таймаут (в миллисекундах), который оборачивает вызовы updateView и setCurrentView (которые приводят к повторной отрисовке планировщика)" --- # delay_render ### Description -@short: Устанавливает таймаут (в миллисекундах), который оборачивает вызовы [updateView](api/method/updateview.md) и [setCurrentView](api/method/setcurrentview.md) (которые запускают перерисовку scheduler) +@short: Устанавливает таймаут (в миллисекундах), который оборачивает вызовы [updateView](api/method/updateview.md) и [setCurrentView](api/method/setcurrentview.md) (которые приводят к повторной отрисовке планировщика) @signature: delay_render: number @@ -20,6 +20,7 @@ scheduler.config.delay_render = 30; scheduler.init("scheduler_here"); ~~~ + ### Details :::note @@ -30,19 +31,16 @@ scheduler.init("scheduler_here"); :::note -Чтобы гарантировать выполнение команды только после фактической перерисовки, помещайте её внутри callback-функции события [onViewChange](api/event/onviewchange.md). - -::: +Чтобы убедиться, что команда будет вызвана только после фактической повторной отрисовки, вызывайте её в функции обратного вызова события [onViewChange](api/event/onviewchange.md). -Значение по умолчанию - 0. +::: -Многие конфигурации scheduler требуют перерисовки. При работе со сложной настройкой у вас может быть несколько функций, каждая из которых обновляет определённые параметры и вызывает обновление scheduler для применения изменений. Частые перерисовки могут замедлить работу вашего приложения. +**Значение по умолчанию:** 0. -Опция **delay_render** помогает уменьшить количество перерисовок. +Многие конфигурации планировщика требуют повторной отрисовки. И, если у вас сложная конфигурация, вы можете получить набор отдельных функций, каждая из которых задаёт какую-то конфигурацию и обновляет планировщик для её применения. Большое количество повторных отрисовок повлияет на производительность вашего приложения. -
+Используйте опцию **delay_render**, чтобы минимизировать количество повторных отрисовок. -Например, если вы установите scheduler.config.delay_render = 30;, при каждом запросе на перерисовку scheduler поставит вызов в очередь и будет ждать 30 миллисекунд. -Если в это время поступит ещё один запрос на перерисовку, таймер сбросится и будет ждать ещё 30 мс. -В итоге, если [updateView](api/method/updateview.md) и/или [setCurrentView](api/method/setcurrentview.md) вызываются несколько раз подряд -(что часто происходит, когда перерисовки запускаются из разных частей кастомного кода), выполнится только последний вызов. +Например, если вы зададите scheduler.config.delay_render = 30;, каждый раз when код вызывает повторную отрисовку, планировщик поместит вызов в очередь и будет ждать 30 миллисекунд. +Если в этот период поступит ещё один вызов повторной отрисовки, планировщик сбросит таймаут и снова будет ждать ещё 30 мс. +В результате, если метод(ы) [updateView](api/method/updateview.md) или/и [setCurrentView](api/method/setcurrentview.md) вызываются несколько раз в короткий промежуток времени (что обычно случается, когда повторная отрисовка инициируется из разных мест пользовательского кода), будет выполнён только последний вызов. \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/details_on_create.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/details_on_create.md index 2e51bfb4..3526e5b9 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/details_on_create.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/details_on_create.md @@ -1,5 +1,5 @@ --- -sidebar_label: "details_on_create" +sidebar_label: details_on_create title: "details_on_create config" description: "Позволяет использовать расширенную форму при создании новых событий путем перетаскивания или двойного клика." --- @@ -8,25 +8,25 @@ description: "Позволяет использовать расширенную ### Description -@short: Позволяет использовать расширенную форму при создании новых событий путем перетаскивания или двойного клика. +@short: 'использовать расширенную форму при создании новых событий перетаскиванием или двойным щелчком' @signature: details_on_create: boolean ### Example ~~~jsx -scheduler.config.details_on_create=true; -... -scheduler.init('scheduler_here', new Date(2013,0,10), "week"); +scheduler.config.details_on_create=true; +... +scheduler.init('scheduler_here',new Date(2027,0,10),"week"); ~~~ -**Default value:** true +**Значение по умолчанию:** true -**Applicable views:** [Day view](views/day.md), [Week view](views/week.md), [Units view](views/units.md) +**Доступные представления:** [Day view](views/day.md), [Week view](views/week.md), [Units view](views/units.md) ### Related samples -- [Custom editor in the lightbox](https://docs.dhtmlx.com/scheduler/samples/02_customization/05_custom_editor.html) -- [Full day events](https://docs.dhtmlx.com/scheduler/samples/02_customization/12_full_day_event.html) +- [Пользовательский редактор в lightbox](https://docs.dhtmlx.com/scheduler/samples/02_customization/05_custom_editor.html) +- [События на весь день](https://docs.dhtmlx.com/scheduler/samples/02_customization/12_full_day_event.html) ### Change log -- Значение по умолчанию было изменено на `true`, начиная с версии 7.0 +- Значение по умолчанию изменено на `true` в версии v7.0 \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/details_on_dblclick.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/details_on_dblclick.md index c1ebc968..d614062e 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/details_on_dblclick.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/details_on_dblclick.md @@ -1,7 +1,7 @@ --- -sidebar_label: "details_on_dblclick" -title: "details_on_dblclick config" -description: "Позволяет открывать лайтбокс двойным кликом по событию" +sidebar_label: details_on_dblclick +title: "details_on_dblclick конфигурация" +description: "Позволяет открывать lightbox после двойного клика по событию" --- # details_on_dblclick @@ -17,15 +17,15 @@ description: "Позволяет открывать лайтбокс двойн ~~~jsx scheduler.config.details_on_dblclick = true; ... -scheduler.init('scheduler_here',new Date(2013,05,11),"week"); +scheduler.init('scheduler_here',new Date(2027,05,11),"week"); ~~~ -**Default value:** true +**Значение по умолчанию:** true -**Applicable views:** [Day view](views/day.md), [Week view](views/week.md), [Units view](views/units.md) +**Applicable views:** [Дневной просмотр](views/day.md), [Недельный просмотр](views/week.md), [Вид по юнитам](views/units.md) ### Related samples -- [Automatic end date](https://docs.dhtmlx.com/scheduler/samples/02_customization/11_auto_end_date.html) +- [Автоматическая конечная дата](https://docs.dhtmlx.com/scheduler/samples/02_customization/11_auto_end_date.html) ### Change log -- Значение по умолчанию было изменено на `true`, начиная с версии 7.0 +- Значение по умолчанию изменено на `true` в версии v7.0 \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/display_marked_timespans.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/display_marked_timespans.md index cf8fc2f0..2d48ba26 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/display_marked_timespans.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/display_marked_timespans.md @@ -1,14 +1,14 @@ --- -sidebar_label: "display_marked_timespans" -title: "display_marked_timespans config" -description: "управляет подсветкой отмеченных (заблокированных) временных интервалов в scheduler" +sidebar_label: display_marked_timespans +title: "конфигурация display_marked_timespans" +description: "определяет, следует ли выделять помеченные (заблокированные) диапазоны времени в планировщике" --- # display_marked_timespans ### Description -@short: Управляет подсветкой отмеченных (заблокированных) временных интервалов в scheduler +@short: Определяет, следует ли выделять помеченные (заблокированные) диапазоны времени в планировщике @signature: display_marked_timespans: boolean @@ -17,20 +17,20 @@ description: "управляет подсветкой отмеченных (за ~~~jsx scheduler.config.display_marked_timespans = false; ... -scheduler.init('scheduler_here',new Date(2013,05,11),"week"); +scheduler.init('scheduler_here',new Date(2027,05,11),"week"); ~~~ -**Default value:** true +**Значение по умолчанию:** true ### Details -Это свойство доступно начиная с версии 3.5. +Свойство доступно начиная с версии 3.5. :::note - Для работы свойства требуется активированный плагин [limit](guides/extensions-list.md#limit). +Свойство требует активации плагина [limit](guides/extensions-list.md#limit). ::: -Если значение установить в *false*, временные интервалы останутся заблокированными, но будут отображаться как обычные ячейки scheduler без какой-либо специальной подсветки. +Если установить опцию в значение *false*, временные диапазоны останутся заблокированными, но будут отображаться как обычные ячейки планировщика. ### Related Guides - [Блокировка и выделение дат](guides/limits.md) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/displayed_event_color.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/displayed_event_color.md index 305e8a0a..3c620121 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/displayed_event_color.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/displayed_event_color.md @@ -1,14 +1,14 @@ --- -sidebar_label: "displayed_event_color" -title: "displayed_event_color config" -description: "определяет цвет фона по умолчанию для событий, отображаемых методом showEvent()" +sidebar_label: displayed_event_color +title: "конфигурация displayed_event_color" +description: "устанавливает цвет фона по умолчанию для событий, получаемых методом showEvent()" --- # displayed_event_color ### Description -@short: Определяет цвет фона по умолчанию для событий, отображаемых методом showEvent() +@short: Устанавливает цвет фона по умолчанию для событий, получаемых методом showEvent() @signature: displayed_event_color: string @@ -17,15 +17,15 @@ description: "определяет цвет фона по умолчанию д ~~~jsx scheduler.config.displayed_event_color="#DFEDF7"; ... -scheduler.init('scheduler_here',new Date(2013,0,10),"week"); +scheduler.init('scheduler_here',new Date(2027,0,10),"week"); ~~~ -**Default value:** #ffc5ab +**Значение по умолчанию:** #ffc5ab ### Details -Этот параметр доступен с версии 3.5 и используется исключительно в контексте метода [showEvent](api/method/showevent.md). +Параметр доступен начиная с версии 3.5 и используется только в контексте метода [showEvent](api/method/showevent.md). ### Related API - [showEvent](api/method/showevent.md) -- [displayed_event_text_color](api/config/displayed_event_text_color.md) +- [displayed_event_text_color](api/config/displayed_event_text_color.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/displayed_event_text_color.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/displayed_event_text_color.md index 43374c0c..8224ced7 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/displayed_event_text_color.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/displayed_event_text_color.md @@ -1,14 +1,14 @@ --- -sidebar_label: "displayed_event_text_color" -title: "displayed_event_text_color config" -description: "определяет цвет шрифта по умолчанию для событий, отображаемых методом showEvent()" +sidebar_label: displayed_event_text_color +title: "конфигурация displayed_event_text_color" +description: "устанавливает цвет шрифта по умолчанию для событий, получаемых методом showEvent()" --- # displayed_event_text_color ### Description -@short: Определяет цвет шрифта по умолчанию для событий, отображаемых методом showEvent() +@short: Устанавливает цвет шрифта по умолчанию для событий, получаемых методом showEvent() @signature: displayed_event_text_color: string @@ -17,15 +17,15 @@ description: "определяет цвет шрифта по умолчанию ~~~jsx scheduler.config.displayed_event_text_color="#195D8A"; ... -scheduler.init('scheduler_here',new Date(2013,0,10),"week"); +scheduler.init('scheduler_here',new Date(2027,0,10),"week"); ~~~ -**Default value:** #7e2727 +**Значение по умолчанию:** #7e2727 ### Details -Этот параметр доступен с версии 3.5 и используется специально с методом [showEvent](api/method/showevent.md). +Параметр доступен начиная с версии 3.5 и используется только в контексте метода [showEvent](api/method/showevent.md). ### Related API - [showEvent](api/method/showevent.md) -- [displayed_event_color](api/config/displayed_event_color.md) +- [displayed_event_color](api/config/displayed_event_color.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/drag_create.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/drag_create.md index 5bce3079..10b52c39 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/drag_create.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/drag_create.md @@ -1,14 +1,14 @@ --- -sidebar_label: "drag_create" -title: "drag_create config" -description: "позволяет создавать новые события с помощью drag and drop" +sidebar_label: drag_create +title: "drag_create конфигурация" +description: "позволяет создавать новые события методом перетаскивания (drag-and-drop)" --- # drag_create ### Description -@short: Позволяет создавать новые события с помощью drag and drop +@short: Позволяет создавать новые события методом перетаскивания (drag-and-drop) @signature: drag_create: boolean @@ -17,17 +17,17 @@ description: "позволяет создавать новые события с ~~~jsx scheduler.config.drag_create = false; ... -scheduler.init('scheduler_here',new Date(2013,7,1),"week"); +scheduler.init('scheduler_here',new Date(2027,7,1),"week"); ~~~ -**Default value:** true +**Значение по умолчанию:** true -**Applicable views:** [Day view](views/day.md), [Month view](views/month.md), [Timeline view](views/timeline.md), [Week view](views/week.md), [Units view](views/units.md) +**Доступные представления:** [Day view](views/day.md), [Month view](views/month.md), [Timeline view](views/timeline.md), [Week view](views/week.md), [Units view](views/units.md) ### Related samples -- [Handling the pointer highlighting](https://docs.dhtmlx.com/scheduler/samples/09_api/06_hightlight_and_single_click_create.html) +- [Обработка подсветки указателя](https://docs.dhtmlx.com/scheduler/samples/09_api/06_hightlight_and_single_click_create.html) ### Related API - [drag_lightbox](api/config/drag_lightbox.md) - [drag_move](api/config/drag_move.md) -- [drag_resize](api/config/drag_resize.md) +- [drag_resize](api/config/drag_resize.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/drag_event_body.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/drag_event_body.md index bec7ba28..0146313f 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/drag_event_body.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/drag_event_body.md @@ -1,14 +1,14 @@ --- -sidebar_label: "drag_event_body" -title: "drag_event_body config" -description: "позволяет перетаскивать события планировщика, захватывая любую часть тела события" +sidebar_label: drag_event_body +title: "конфигурация drag_event_body" +description: "позволяет перетаскивать события расписания по любой части тела события" --- # drag_event_body ### Description -@short: Позволяет перетаскивать события планировщика, захватывая любую часть тела события +@short: Позволяет перетаскивать события расписания по любой части тела события @signature: drag_event_body: boolean @@ -18,11 +18,11 @@ description: "позволяет перетаскивать события пл scheduler.config.drag_event_body = false; ~~~ -**Default value:** true +**Значение по умолчанию:** true ### Related samples -- [Basic initialization](https://docs.dhtmlx.com/scheduler/samples/01_initialization_loading/01_basic_init.html) +- [Основная инициализация](https://docs.dhtmlx.com/scheduler/samples/01_initialization_loading/01_basic_init.html) ### Details -Когда эта опция отключена, перетаскивание событий возможно только за область заголовка события. +Если конфигурация отключена, перетаскивание возможно только по заголовку события. \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/drag_highlight.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/drag_highlight.md index 948dd52a..31c2d1a4 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/drag_highlight.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/drag_highlight.md @@ -1,14 +1,14 @@ --- -sidebar_label: "drag_highlight" -title: "drag_highlight config" -description: "Эта опция выделяет начальную точку события и его длительность на шкале времени при перетаскивании события в scheduler." +sidebar_label: drag_highlight +title: "drag_highlight конфигурация" +description: "выделяет начальную позицию и продолжительность события на временной шкале, когда вы перетаскиваете событие над планировщиком" --- # drag_highlight ### Description -@short: Эта опция выделяет начальную точку события и его длительность на шкале времени при перетаскивании события в scheduler. +@short: Выделяет начальную позицию и продолжительность события на временной шкале, когда вы перетаскиваете событие над планировщиком @signature: drag_highlight: boolean @@ -18,11 +18,11 @@ description: "Эта опция выделяет начальную точку //отключает выделение scheduler.config.drag_highlight = false; /*!*/ -scheduler.init('scheduler_here',new Date(2010,0,10),"week"); +scheduler.init('scheduler_here',new Date(2027,0,10),"week"); scheduler.load("./data/events.xml"); ~~~ -**Default value:** true +**Значение по умолчанию:** true ### Details @@ -33,4 +33,4 @@ scheduler.load("./data/events.xml"); - [drag_marker_class](api/template/drag_marker_class.md) ### Change log -- Выделение исходного положения события во время drag было добавлено в версии v7.1 +- Выделение начальной позиции события было добавлено в версии v7.1 \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/drag_in.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/drag_in.md index a50972b5..36ae2218 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/drag_in.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/drag_in.md @@ -1,26 +1,26 @@ --- -sidebar_label: "drag_in" -title: "drag_in config" -description: "Ограничивает перетаскивание событий так, чтобы их можно было перемещать только внутри того scheduler, который инициализировал drag, предотвращая переносы между разными schedulers." +sidebar_label: drag_in +title: "Конфигурация drag_in" +description: "ограничивает перетаскивание событий к вызывающему планировщику со стороны любых других планировщиков" --- # drag_in ### Description -@short: Ограничивает перетаскивание событий так, чтобы их можно было перемещать только внутри того scheduler, который инициализировал drag, предотвращая переносы между разными schedulers. +@short: Ограничивает перетаскивание событий к вызывающему планировщику со стороны любых других планировщиков @signature: drag_in: boolean ### Example ~~~jsx -scheduler.init('scheduler_here',new Date(2009,05,30),"week"); +scheduler.init('scheduler_here',new Date(2027,05,30),"week"); scheduler.load("./data/units.xml"); scheduler2.config.drag_in = false; // отключает перетаскивание событий в этот scheduler scheduler2 = Scheduler.getSchedulerInstance(); -scheduler2.init('scheduler_here_2',new Date(2009,05,30),"week"); +scheduler2.init('scheduler_here_2',new Date(2027,05,30),"week"); ~~~ **Default value:** true @@ -29,17 +29,17 @@ scheduler2.init('scheduler_here_2',new Date(2009,05,30),"week"); :::note -Эта функция доступна исключительно для лицензий Scheduler PRO (коммерческая с 6 октября 2021), Enterprise и Ultimate. - +Это свойство доступно только для Scheduler PRO (коммерческая версия (с 6 октября 2021 года), лицензии Enterprise и Ultimate) + ::: :::note - Плагин [outerdrag](guides/extensions-list.md#outerdrag) должен быть включён для работы этого свойства. + Свойство требует активации плагина [outerdrag](guides/extensions-list.md#outerdrag). ::: ### Related API - [drag_out](api/config/drag_out.md) ### Related Guides -- [Операции Drag-and-Drop](guides/drag-between.md) -- [Создание нескольких планировщиков на странице](guides/multiple-per-page.md) +- [Drag-and-Drop Operations](guides/drag-between.md) +- [Creating Multiple Schedulers on a Page](guides/multiple-per-page.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/drag_lightbox.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/drag_lightbox.md index 0728c81e..8d01b995 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/drag_lightbox.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/drag_lightbox.md @@ -1,14 +1,14 @@ ---- -sidebar_label: "drag_lightbox" -title: "drag_lightbox config" -description: "позволяет перетаскивать lightbox за его заголовок" +--- +sidebar_label: drag_lightbox +title: "Конфигурация drag_lightbox" +description: "позволяет перетаскивать lightbox за заголовок" --- # drag_lightbox ### Description -@short: Позволяет перетаскивать lightbox за его заголовок +@short: Позволяет перетаскивать lightbox за заголовок @signature: drag_lightbox: boolean @@ -17,12 +17,12 @@ description: "позволяет перетаскивать lightbox за его ~~~jsx scheduler.config.drag_lightbox = false; ... -scheduler.init('scheduler_here', new Date(2013,5,30), "week"); +scheduler.init('scheduler_here',new Date(2027,5,30),"week"); ~~~ -**Default value:** true +**Значение по умолчанию:** true ### Related API - [drag_create](api/config/drag_create.md) - [drag_move](api/config/drag_move.md) -- [drag_resize](api/config/drag_resize.md) +- [drag_resize](api/config/drag_resize.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/drag_move.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/drag_move.md index a630d36a..acb771cf 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/drag_move.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/drag_move.md @@ -1,14 +1,14 @@ --- -sidebar_label: "drag_move" -title: "drag_move config" -description: "позволяет изменять позицию событий с помощью drag-and-drop" +sidebar_label: drag_move +title: "drag_move конфигурация" +description: "позволяет перемещать события перетаскиванием" --- # drag_move ### Description -@short: Позволяет изменять позицию событий с помощью drag-and-drop +@short: Позволяет перемещать события с помощью drag-and-drop @signature: drag_move: boolean @@ -20,10 +20,12 @@ scheduler.config.drag_move = false; scheduler.init('scheduler_here',new Date(2013,5,30),"week"); ~~~ -**Default value:** true -@views;day, month, timeline, week, weekagenda,units +**Значение по умолчанию:** true + +**Доступные представления:** [Day view](views/day.md), [Month view](views/month.md), [Timeline view](views/timeline.md), [Week view](views/week.md), [Units view](views/units.md) [Week Agenda View](views/weekagenda.md) + ### Related API - [drag_lightbox](api/config/drag_lightbox.md) - [drag_resize](api/config/drag_resize.md) -- [drag_create](api/config/drag_create.md) +- [drag_create](api/config/drag_create.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/drag_out.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/drag_out.md index 2816dbd9..1e185e4f 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/drag_out.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/drag_out.md @@ -1,14 +1,14 @@ --- -sidebar_label: "drag_out" -title: "drag_out config" -description: "Запретить перетаскивание событий из этого scheduler в другие" +sidebar_label: drag_out +title: "drag_out конфигурация" +description: "ограничивает перетаскивание событий из вызывающего планировщика к любому другому планировщику(-ам)" --- # drag_out ### Description -@short: Запретить перетаскивание событий из этого scheduler в другие +@short: Ограничивает перетаскивание событий из вызывающего планировщика к любому другому планировщику(-ам) @signature: drag_out: boolean @@ -16,30 +16,30 @@ description: "Запретить перетаскивание событий и ~~~jsx scheduler.config.drag_out = false; // отключить перетаскивание событий из этого scheduler в другие -scheduler.init('scheduler_here', new Date(2009,05,30), "week"); +scheduler.init('scheduler_here', new Date(2027,05,30), "week"); scheduler.load("./data/units.xml"); - + scheduler2 = Scheduler.getSchedulerInstance(); -scheduler2.init('scheduler_here_2', new Date(2009,05,30), "week"); +scheduler2.init('scheduler_here_2',new Date(2027,05,30),"week"); ~~~ -**Default value:** true +**Значение по умолчанию:** true ### Details :::note -Эта функция доступна только в лицензиях Scheduler PRO (коммерческая с 6 октября 2021), Enterprise и Ultimate. - -::: +Это свойство доступно только для Scheduler PRO (коммерческая версия с 6 октября 2021 года), а также лицензии Enterprise и Ultimate. + +::: :::note - Для работы функции требуется включенный плагин [outerdrag](guides/extensions-list.md#outerdrag). -::: + Своество требует активации плагина [outerdrag](guides/extensions-list.md#outerdrag). +::: ### Related API - [drag_in](api/config/drag_in.md) ### Related Guides -- [Операции Drag-and-Drop](guides/drag-between.md) -- [Создание нескольких планировщиков на странице](guides/multiple-per-page.md) +- [Операции перетаскивания](guides/drag-between.md) +- [Создание нескольких планировщиков на одной странице](guides/multiple-per-page.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/drag_resize.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/drag_resize.md index 994e076c..97ba91b0 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/drag_resize.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/drag_resize.md @@ -1,14 +1,14 @@ --- -sidebar_label: "drag_resize" +sidebar_label: drag_resize title: "drag_resize config" -description: "позволяет изменять размер событий с помощью drag-and-drop" +description: "Позволяет изменять размер событий перетаскиванием" --- # drag_resize ### Description -@short: Позволяет изменять размер событий с помощью drag-and-drop +@short: Позволяет изменять размер событий перетаскиванием @signature: drag_resize: boolean @@ -19,11 +19,11 @@ scheduler.config.drag_resize = false; scheduler.init('scheduler_here', new Date(2020,5,30), "week"); ~~~ -**Default value:** true +**Значение по умолчанию:** true -**Applicable views:** [Day view](views/day.md), [Week view](views/week.md), [Units view](views/units.md) +**Доступные представления:** [Day view](views/day.md), [Week view](views/week.md), [Units view](views/units.md) ### Related API - [drag_lightbox](api/config/drag_lightbox.md) - [drag_move](api/config/drag_move.md) -- [drag_create](api/config/drag_create.md) +- [drag_create](api/config/drag_create.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/edit_on_create.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/edit_on_create.md index 9fdd3aee..4c368f20 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/edit_on_create.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/edit_on_create.md @@ -1,14 +1,14 @@ --- -sidebar_label: "edit_on_create" -title: "edit_on_create config" -description: "Включает открытие лайтбокса при создании новых событий" +sidebar_label: edit_on_create +title: "edit_on_create Конфигурация" +description: "для открытия lightbox во время создания новых событий" --- # edit_on_create ### Description -@short: Включает открытие лайтбокса при создании новых событий +@short: для открытия lightbox во время создания новых событий @signature: edit_on_create: boolean @@ -17,7 +17,7 @@ description: "Включает открытие лайтбокса при соз ~~~jsx scheduler.config.edit_on_create = false; ... -scheduler.init('scheduler_here', new Date(2013,05,11), "week"); +scheduler.init('scheduler_here',new Date(2027,05,11),"week"); ~~~ -**Default value:** true +**Значение по умолчанию:** true \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/event_attribute.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/event_attribute.md index a7f09911..cddd5fc4 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/event_attribute.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/event_attribute.md @@ -1,14 +1,14 @@ --- -sidebar_label: "event_attribute" -title: "event_attribute config" -description: "определяет имя атрибута, используемого для идентификации HTML-элемента события по его id" +sidebar_label: event_attribute +title: "event_attribute конфигурация" +description: "задает имя атрибута, которое будет задавать идентификатор элемента HTML события" --- # event_attribute ### Description -@short: Определяет имя атрибута, используемого для идентификации HTML-элемента события по его id +@short: Устанавливает имя атрибута, которое будет задавать идентификатор элемента HTML события @signature: event_attribute: string @@ -18,7 +18,7 @@ description: "определяет имя атрибута, используем scheduler.config.event_attribute = "data-event-id" ~~~ -**Default value:** "data-event-id" +**Значение по умолчанию:** "data-event-id" ### Change log -- добавлено в версии v6.0 +- добавлено в v6.0 \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/event_duration.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/event_duration.md index 25f200c7..2839ac34 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/event_duration.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/event_duration.md @@ -1,14 +1,14 @@ --- -sidebar_label: "event_duration" +sidebar_label: event_duration title: "event_duration config" -description: "задаёт начальную длительность событий в минутах" +description: "устанавливает начальную продолжительность событий в минутах" --- # event_duration ### Description -@short: Задаёт начальную длительность событий в минутах +@short: Устанавливает начальную продолжительность событий в минутах @signature: event_duration: number @@ -18,20 +18,20 @@ description: "задаёт начальную длительность собы scheduler.config.event_duration = 60; scheduler.config.auto_end_date = true; ... -scheduler.init('scheduler_here', new Date(2013, 05, 11), "week"); +scheduler.init('scheduler_here',new Date(2027,05,11),"week"); ~~~ -**Default value:** 5 +**Значение по умолчанию:** 5 ### Related samples -- [Automatic end date](https://docs.dhtmlx.com/scheduler/samples/02_customization/11_auto_end_date.html) -- [Checkbox in the lightbox](https://docs.dhtmlx.com/scheduler/samples/02_customization/13_single_checkbox_section.html) +- [Автоматическая конечная дата](https://docs.dhtmlx.com/scheduler/samples/02_customization/11_auto_end_date.html) +- [Чекбокс во lightbox](https://docs.dhtmlx.com/scheduler/samples/02_customization/13_single_checkbox_section.html) ### Details -- Этот параметр доступен начиная с версии 2.3. -- Работает только вместе с опцией [auto_end_date](api/config/auto_end_date.md). -- Когда опция [auto_end_date](api/config/auto_end_date.md) включена (установлена в *true*), изменение времени или даты начала события в lightbox автоматически обновляет время и дату окончания, чтобы сохранить длительность, заданную настройкой 'event_duration'. +- Параметр доступен начиная с версии 2.3. +- Параметр используется только в паре с опцией [auto_end_date](api/config/auto_end_date.md). +- Если опция [auto_end_date](api/config/auto_end_date.md) установлена в значение *true*, тогда, когда вы изменяете время начала события или дату в lightbox, время и дата окончания события будут автоматически изменяться, чтобы продолжительность события соответствовала значению параметра 'event_duration'. ### Related API -- [auto_end_date](api/config/auto_end_date.md) +- [auto_end_date](api/config/auto_end_date.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/first_hour.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/first_hour.md index 12b74c83..8943cc82 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/first_hour.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/first_hour.md @@ -1,29 +1,29 @@ --- -sidebar_label: "first_hour" -title: "first_hour config" -description: "определяет начальный час для часовой шкалы (ось Y)" +sidebar_label: first_hour +title: "конфигурация first_hour" +description: "устанавливает минимальное значение для шкалы часов (оси Y)" --- # first_hour ### Description -@short: Определяет начальный час для часовой шкалы (ось Y) +@short: Устанавливает минимальное значение для шкалы часов (оси Y) @signature: first_hour: number ### Example ~~~jsx -scheduler.config.first_hour = 9; -scheduler.config.last_hour = 18; -... -scheduler.init('scheduler_here', new Date(2013,05,11), "week"); +scheduler.config.first_hour = 9; +scheduler.config.last_hour = 18; +... +scheduler.init('scheduler_here',new Date(2027,05,11),"week"); ~~~ -**Default value:** 0 (ноль) +**Значение по умолчанию:** 0 (ноль) -**Applicable views:** [Day view](views/day.md), [Week view](views/week.md), [Units view](views/units.md) +**Подходящие представления:** [Day view](views/day.md), [Week view](views/week.md), [Units view](views/units.md) ### Related samples - [Loading data from a database](https://docs.dhtmlx.com/scheduler/samples/01_initialization_loading/05_loading_database.html) @@ -35,4 +35,4 @@ scheduler.init('scheduler_here', new Date(2013,05,11), "week"); ### Related API - [last_hour](api/config/last_hour.md) -- [limit_time_select](api/config/limit_time_select.md) +- [limit_time_select](api/config/limit_time_select.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/fix_tab_position.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/fix_tab_position.md index 6a9b4c7c..c6a60266 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/fix_tab_position.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/fix_tab_position.md @@ -1,14 +1,14 @@ --- -sidebar_label: "fix_tab_position" -title: "fix_tab_position config" -description: "сдвигает вкладки видов с левой стороны на правую сторону" +sidebar_label: fix_tab_position +title: "конфигурация fix_tab_position" +description: "перемещает вкладки видов с левой стороны на правую" --- # fix_tab_position ### Description -@short: Сдвигает вкладки видов с левой стороны на правую сторону +@short: Перемещает вкладки видов с левой стороны на правую. @signature: fix_tab_position: boolean @@ -20,18 +20,18 @@ scheduler.config.fix_tab_position = false; scheduler.init('scheduler_here',new Date(2013,05,11),"week"); ~~~ -**Default value:** true +**Значение по умолчанию:** true -**Applicable views:** [Day view](views/day.md), [Week view](views/week.md), [Units view](views/units.md) +**Подходящие представления:** [Day view](views/day.md), [Week view](views/week.md), [Units view](views/units.md) ### Related samples -- [Terrace skin](https://docs.dhtmlx.com/scheduler/samples/07_skins/01_default.html) +- [Скин Terrace](https://docs.dhtmlx.com/scheduler/samples/07_skins/01_default.html) ### Details -Эта опция доступна с версии 3.5. +The property is available from version 3.5. -По умолчанию, планировщик с скином ['dhx_terrace'](guides/skins.md) показывает вкладки видов слева. Чтобы переместить вкладки на правую сторону, просто установите эту опцию в *false*. +By default, the ['dhx_terrace'-skinned scheduler](guides/skins.md#terrace-skin) presents the views tabs on the left side. To place the tabs on the right side - set the option to *false*. ### Related Guides -- [Разметка Scheduler](guides/scheduler-markup.md#tabs-positioning) +- [Scheduler Markup](guides/scheduler-markup.md#tabs-positioning) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/full_day.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/full_day.md index 8503c97b..bcb84b21 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/full_day.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/full_day.md @@ -1,14 +1,14 @@ --- -sidebar_label: "full_day" +sidebar_label: full_day title: "full_day config" -description: "позволяет установить событие на весь день" +description: "позволяет устанавливать продолжительность события на весь день" --- # full_day ### Description -@short: Позволяет установить событие на весь день +@short: Позволяет устанавливать продолжительность события на весь день @signature: full_day: boolean @@ -20,14 +20,14 @@ scheduler.config.full_day = true; scheduler.init('scheduler_here', new Date(2013, 7, 5), "week"); ~~~ -**Default value:** false +**Значение по умолчанию:** false ### Related samples -- [Full day events](https://docs.dhtmlx.com/scheduler/samples/02_customization/12_full_day_event.html) +- [События на весь день](https://docs.dhtmlx.com/scheduler/samples/02_customization/12_full_day_event.html) ### Details -Когда эта опция включена (*true*), поля для выбора времени в лайтбоксе отключаются, и длительность события автоматически устанавливается на весь день - с **00:00** выбранной даты до **00:00** следующего дня. +Если опция установлена в *true*, поля ввода в разделе '**Период времени**' лайтбокса заблокированы, и временной диапазон устанавливается на весь день: с **00.00** текущей даты ячейки до **00.00** следующего дня. ### Change log -- added in version 2.3 +- добавлено в версии 2.3 \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/header.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/header.md index 35c252d2..4930770e 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/header.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/header.md @@ -1,5 +1,5 @@ --- -sidebar_label: "header" +sidebar_label: header title: "header config" description: "настраивает layout для header планировщика (панели навигации)" --- @@ -8,7 +8,7 @@ description: "настраивает layout для header планировщик ### Description -@short: Настраивает layout для header планировщика (панели навигации) +@short: Предоставляет конфигурацию в стиле макета для заголовка планировщика (панель навигации) @signature: header: any @@ -31,12 +31,11 @@ scheduler.init("scheduler_here"); ### Details -При инициализации планировщика с этой настройкой, любой существующий HTML внутри контейнера планировщика будет заменён сгенерированной разметкой. +При инициализации Scheduler с использованием этой конфигурации любой HTML, размещённый в контейнере планировщика до инициализации, будет удалён, а вместо него будет вставлена сгенерированная разметка. -Эта конфигурация может быть простым массивом элементов или вложенной структурой для определения более сложного layout. - -Учтите, что высота header/панели навигации по-прежнему контролируется опцией [scheduler.xy.nav_height](api/other/xy.md#day). +Значение этой конфигурации может быть либо простым массивом элементов, либо вложенной структурой, которая описывает сложный макет. +Обратите внимание, что высота заголовка/панели навигации по-прежнему контролируется параметром [`scheduler.xy.nav_height`](api/other/xy.md#illustration-images) опции. ~~~js scheduler.xy.nav_height = 80; @@ -65,28 +64,27 @@ scheduler.init("scheduler_here"); ~~~html -
+
~~~ -Поддерживаемые значения включают: +Поддерживаемые значения: - - **\{rows: Array, css:string\}** - контейнер для header с несколькими строками - - **\{cols: Array, css:string\}** - одна строка внутри многострочного header - - **"prev","next","today"** - кнопки для навигации по дате - - **"date"** - label, показывающий текущую дату - - **"day", "week", "month" и т.д.** - вкладки для переключения видов - - **"spacer"** - прозрачный элемент, заполняющий доступное пространство, полезен для смещения элементов вправо - - **\{html: string, click: function, css: string\}** - объект для добавления кастомных кнопок или иконок в header - - **"minicalendar"** - переключатель для [Mini Calendar](guides/minicalendar.md). +- `{rows: Array, css: string}` - контейнер для многострочного заголовка +- `{cols: Array, css: string}` - одна строка в многострочном заголовке +- `"prev"`, `"next"`, `"today"` - кнопки навигации по дате +- `"date"` - метка даты +- `"day"`, `"week"`, `"month"`, и т. д. - вкладки видов +- `"spacer"` - прозрачный элемент, занимающий всё свободное пространство и может использоваться для выравнивания элементов по правой стороне заголовка +- `{html: string, click: function, css: string}` - объект для внедрения пользовательских кнопок или значков в заголовок +- `"minicalendar"` - переключатель [Mini Calendar](guides/minicalendar.md) ~~~js scheduler.config.header = [ "day", "week", "month", - {html:"click me!", click:function(){alert("done!") -:::, + { html: "click me!", click: () => { alert("done!"); } }, "date", "prev", "today", @@ -99,8 +97,8 @@ scheduler.init("scheduler_here"); Опция "minicalendar" добавляет кнопку, которая переключает мини-календарь с таким click handler: -~~~ -function showCalendar () { +~~~js +function showCalendar() { if (scheduler.isCalendarVisible()) { scheduler.destroyCalendar(); } else { @@ -108,7 +106,7 @@ function showCalendar () { position: this, date: scheduler.getState().date, navigation: true, - handler: function (date, calendar) { + handler: (date, calendar) => { scheduler.setCurrentView(date); scheduler.destroyCalendar(); } @@ -117,14 +115,14 @@ function showCalendar () { }; ~~~ -Чтобы настроить поведение мини-календаря с другими параметрами, предоставьте свой click handler для кнопки minicalendar следующим образом: +Если вы хотите вызвать [`renderCalendar()`](api/method/rendercalendar.md) с другими параметрами, вам нужно предоставить свой обработчик `onclick` для кнопки мини-календаря: -~~~ +~~~js scheduler.config.header = [ "day", "week", "month", - {view: "minicalendar", click: function () { + { view: "minicalendar", click: function() { if (scheduler.isCalendarVisible()) { scheduler.destroyCalendar(); } else { @@ -132,14 +130,14 @@ scheduler.config.header = [ position: this, date: scheduler.getState().date, navigation: true, - handler: function (date, calendar) { + handler: (date, calendar) => { scheduler.setCurrentView(date); scheduler.destroyCalendar(); } }); } - -:::, + + } }, "date", "prev", "today", @@ -148,6 +146,6 @@ scheduler.config.header = [ ~~~ ### Related Guides -- [Мобильная адаптивность Scheduler](guides/touch-support.md) -- [dhtmlxScheduler на чистом JS/HTML](guides/initialization.md) -- [Мини-календарь (Date Picker)](guides/minicalendar.md) +- [Mobile Responsive Scheduler](guides/touch-support.md) +- [dhtmlxScheduler in Plain JS/HTML](guides/initialization.md) +- [Mini Calendar (Date Picker)](guides/minicalendar.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/highlight_displayed_event.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/highlight_displayed_event.md index 5bce1083..d4897bf0 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/highlight_displayed_event.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/highlight_displayed_event.md @@ -1,14 +1,14 @@ --- -sidebar_label: "highlight_displayed_event" -title: "highlight_displayed_event config" -description: "определяет, будут ли события, полученные с помощью метода showEvent, подсвечиваться при отображении" +sidebar_label: highlight_displayed_event +title: "highlight_displayed_event конфигурация" +description: "определяет, следует ли выделять события, полученные методом showEvent, во время отображения" --- # highlight_displayed_event ### Description -@short: Определяет, будут ли события, полученные с помощью метода showEvent, подсвечиваться при отображении +@short: Определяет, следует ли выделять события, полученные методом showEvent, во время отображения @signature: highlight_displayed_event: boolean @@ -17,14 +17,14 @@ description: "определяет, будут ли события, получе ~~~jsx scheduler.config.highlight_displayed_event=false; ... -scheduler.init('scheduler_here',new Date(2010,0,10),"week"); +scheduler.init('scheduler_here',new Date(2027,0,10),"week"); ~~~ -**Default value:** true +**Значение по умолчанию:** true ### Details -Этот параметр доступен с версии 3.5 и применяется исключительно к методу [showEvent](api/method/showevent.md). +Параметр доступен с версии 3.5 и используется только в контексте метода [showEvent](api/method/showevent.md). ### Related API -- [showEvent](api/method/showevent.md) +- [showEvent](api/method/showevent.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/hour_date.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/hour_date.md index 707f2f3c..30193afc 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/hour_date.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/hour_date.md @@ -1,14 +1,14 @@ --- -sidebar_label: "hour_date" -title: "hour_date config" -description: "Определяет формат времени, отображаемый на оси Y. Также применяется в стандартных шаблонах событий и lightbox для форматирования временной части." +sidebar_label: hour_date +title: "hour_date конфигурация" +description: "устанавливает формат времени оси Y. Также используется в шаблонах по умолчанию для событий и lightbox-шаблонов для задания временной части." --- # hour_date ### Description -@short: Определяет формат времени, отображаемый на оси Y. Также применяется в стандартных шаблонах событий и lightbox для форматирования временной части. +@short: Задает формат времени оси Y. Также используется в шаблонах по умолчанию для событий и lightbox-шаблонов для задания временной части. @signature: hour_date: string @@ -17,16 +17,16 @@ description: "Определяет формат времени, отобража ~~~jsx scheduler.config.hour_date = "%H:%i:%s"; ... -scheduler.init('scheduler_here', new Date(2013, 7, 5), "week"); +scheduler.init('scheduler_here', new Date(2027, 7, 5), "week"); ~~~ -**Default value:** "%H:%i" +**Ззначение по умолчанию:** "%H:%i" -**Applicable views:** [Day view](views/day.md), [Week view](views/week.md), [Units view](views/units.md) +**Поддерживаемые представления:** [Day view](views/day.md), [Week view](views/week.md), [Units view](views/units.md) ### Related samples -- [Setting the Y-Axis format](https://docs.dhtmlx.com/scheduler/samples/01_initialization_loading/02_hour_scale_format.html) -- [Removing needless hours from the time scale](https://docs.dhtmlx.com/scheduler/samples/06_timeline/09_drag_duration.html) +- [Формат Y-оси](https://docs.dhtmlx.com/scheduler/samples/01_initialization_loading/02_hour_scale_format.html) +- [Удаление лишних часов с временной шкалы](https://docs.dhtmlx.com/scheduler/samples/06_timeline/09_drag_duration.html) ### Details @@ -39,4 +39,4 @@ scheduler.init('scheduler_here', new Date(2013, 7, 5), "week"); - [event_bar_date](api/template/event_bar_date.md) ### Related Guides -- [Спецификация формата даты](guides/settings-format.md) +- [Спецификация формата даты](guides/settings-format.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/hour_size_px.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/hour_size_px.md index 24c3fff0..261cdc57 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/hour_size_px.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/hour_size_px.md @@ -1,14 +1,14 @@ --- -sidebar_label: "hour_size_px" -title: "hour_size_px config" -description: "определяет высоту блока часа в пикселях" +sidebar_label: hour_size_px +title: "hour_size_px конфигурация" +description: "устанавливает высоту единицы часа в пикселях" --- # hour_size_px ### Description -@short: Определяет высоту блока часа в пикселях +@short: Устанавливает высоту единицы часа в пикселях @signature: hour_size_px: number @@ -17,20 +17,20 @@ description: "определяет высоту блока часа в пикс ~~~jsx scheduler.config.hour_size_px = 40; ... -scheduler.init('scheduler_here', new Date(2010, 7, 5), "week"); +scheduler.init('scheduler_here', new Date(2027, 7, 5), "week"); ~~~ -**Default value:** 42 +**Значение по умолчанию:** 42 -**Applicable views:** [Day view](views/day.md), [Week view](views/week.md), [Units view](views/units.md) +**Доступные представления:** [Вид по дням](views/day.md), [Вид на неделю](views/week.md), [Вид по единицам](views/units.md) ### Related samples -- [Setting the Y-Axis format](https://docs.dhtmlx.com/scheduler/samples/01_initialization_loading/02_hour_scale_format.html) -- [Changing the Y-Axis step](https://docs.dhtmlx.com/scheduler/samples/02_customization/09_timestep.html) +- [Настройка формата оси Y](https://docs.dhtmlx.com/scheduler/samples/01_initialization_loading/02_hour_scale_format.html) +- [Изменение шага оси Y](https://docs.dhtmlx.com/scheduler/samples/02_customization/09_timestep.html) ### Details ![weekView_properties](/img/weekView_properties.png) ### Related API -- [hour_date](api/config/hour_date.md) +- [hour_date](api/config/hour_date.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/icons_edit.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/icons_edit.md index 2e60f6da..2d3d853b 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/icons_edit.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/icons_edit.md @@ -1,14 +1,14 @@ --- -sidebar_label: "icons_edit" -title: "icons_edit config" -description: "содержит набор иконок, которые отображаются в боковом меню редактирования внутри блока события" +sidebar_label: icons_edit +title: "конфигурация icons_edit" +description: "хранит коллекцию иконок, видимых в боковом меню редактирования блока события" --- # icons_edit ### Description -@short: Содержит набор иконок, которые отображаются в боковом меню редактирования внутри блока события +@short: Хранит коллекцию иконок, видимых в боковом меню редактирования блока события @signature: icons_edit: any[] @@ -20,9 +20,9 @@ scheduler.config.icons_edit = ['icon_custom', 'icon_save', 'icon_cancel']; scheduler.init('scheduler_here',new Date(2013,05,11),"week"); ~~~ -**Default value:** ['icon_save', 'icon_cancel'] +**Значение по умолчанию:** ['icon_save', 'icon_cancel'] -**Applicable views:** [Day view](views/day.md), [Week view](views/week.md), [Units view](views/units.md) +**Доступные представления:** [День](views/day.md), [Неделя](views/week.md), [Единицы](views/units.md) ### Details @@ -32,4 +32,4 @@ scheduler.init('scheduler_here',new Date(2013,05,11),"week"); - [icons_select](api/config/icons_select.md) ### Related Guides -- [Кастомизация панелей 'Select' и 'Edit'](guides/customizing-edit-select-bars.md) +- [Настройка панелей 'Select' и 'Edit'](guides/customizing-edit-select-bars.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/icons_select.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/icons_select.md index f9c39dbd..b18c2477 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/icons_select.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/icons_select.md @@ -1,14 +1,14 @@ --- -sidebar_label: "icons_select" -title: "icons_select config" -description: "содержит набор иконок, которые отображаются в боковом меню выбора в блоке события" +sidebar_label: icons_select +title: "icons_select конфигурация" +description: "хранит коллекцию иконок, отображаемых в боковом меню выбора в окне события" --- # icons_select ### Description -@short: Содержит набор иконок, которые отображаются в боковом меню выбора в блоке события +@short: Хранит коллекцию иконок, видимых в боковом меню выбора в окне события @signature: icons_select: any[] @@ -17,15 +17,15 @@ description: "содержит набор иконок, которые отоб ~~~jsx scheduler.config.icons_select = ['icon_details', 'icon_delete']; ... -scheduler.init('scheduler_here', new Date(2013, 0, 10), "week"); +scheduler.init('scheduler_here', new Date(2027, 0, 10), "week"); ~~~ -**Default value:** ['icon_details', 'icon_edit', 'icon_delete'] +**Значение по умолчанию:** ['icon_details', 'icon_edit', 'icon_delete'] -**Applicable views:** [Day view](views/day.md), [Week view](views/week.md), [Units view](views/units.md) +**Доступные представления:** [Day view](views/day.md), [Week view](views/week.md), [Units view](views/units.md) ### Related samples -- [Custom event box](https://docs.dhtmlx.com/scheduler/samples/02_customization/27_custom_event_box.html) +- [Пользовательская коробка события](https://docs.dhtmlx.com/scheduler/samples/02_customization/27_custom_event_box.html) ### Details @@ -35,4 +35,4 @@ scheduler.init('scheduler_here', new Date(2013, 0, 10), "week"); - [icons_edit](api/config/icons_edit.md) ### Related Guides -- [Кастомизация панелей 'Select' и 'Edit'](guides/customizing-edit-select-bars.md) +- [Настройка панелей 'Select' и 'Edit'](guides/customizing-edit-select-bars.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/include_end_by.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/include_end_by.md index 144f1866..bfaef087 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/include_end_by.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/include_end_by.md @@ -1,16 +1,16 @@ --- -sidebar_label: "include_end_by" -title: "include_end_by config" -description: "устанавливает, считается ли дата, введённая в поле 'End by', исключающей или включающей" +sidebar_label: include_end_by +title: "конфигурация include_end_by" +description: "определяет, должна ли дата, указанная в поле 'End by', быть исключительной или включительной" --- # include_end_by -:::warning -Это свойство работает только с устаревшим расширением для повторяющихся событий. -::: +:::warning +Свойство работает только в устаревшем расширении для повторяющихся событий. +::: ### Description -@short: Устанавливает, считается ли дата, введённая в поле 'End by', исключающей или включающей +@short: Определяет, должна ли дата, указанная в поле 'End by', быть исключительной или включительной @signature: include_end_by: boolean @@ -19,37 +19,37 @@ description: "устанавливает, считается ли дата, вв ~~~jsx scheduler.config.include_end_by = true; ... -scheduler.init('scheduler_here', new Date(2019, 7, 5), "week"); +scheduler.init('scheduler_here', new Date(2027, 7, 5), "week"); ~~~ -**Default value:** false +**Значение по умолчанию:** false ### Details :::note - Для использования этого свойства необходимо активировать расширение [recurring](guides/extensions-list.md#recurring). +Свойство требует включённого расширения [recurring](guides/extensions-list.md#recurring). ::: -По умолчанию дата в поле 'End by' считается исключающей. +По умолчанию дата, указанная в поле 'End by', исключается. -Например, если пользователь задаёт '01.15.2019' в поле 'End by': +Например, если пользователь укажет значение '01.15.2027' в поле 'End by', то: -- при include_end_by = false (по умолчанию) - серия повторений заканчивается 01.14.2019. -- при include_end_by = true - серия повторений заканчивается 01.15.2019. +- если include_end_by = false (значение по умолчанию) — серия повторяющихся событий завершится на 01.14.2027. +- Если include_end_by = true — серия повторяющихся событий завершится на 01.15.2027. -## Как база данных сохраняет даты? +## How does the database save the dates? -Все даты, выбранные в scheduler, включают часы и минуты, поэтому дата, например *15.11.2021*, выбранная в любом date picker, интерпретируется как *15.11.2021 00:00*. +Все даты, выбираемые в scheduler, имеют часовую и минутную часть, то есть дата *15.11.2027*, выбранная в любом date picker, будет интерпретирована как *15.11.2027 00:00*. -Это влияет на продолжительность серии при выборе 'End by' в форме повторения. +Это повлияет на продолжительность серии, когда вы выбираете поле 'End by' в форме повторения. -Например, если пользователь вводит *15.11.2021* в поле 'End by': +Например, если пользователь указывает значение *15.11.2027* в поле 'End by', тогда: -- при include_end_by = false (по умолчанию) - дата окончания серии сохраняется как *15.11.2021 00:00*, что означает, что последнее возможное событие может произойти до *14.11.2021 23:59*, то есть события в выбранный день не происходят; -- при include_end_by = true - дата окончания серии сохраняется как *16.11.2021 00:00* (полночь после выбранной даты), включая выбранный день в серию, что позволяет последнему событию произойти до *15.11.2021 23:59*. +- если include_end_by = false (значение по умолчанию) — конечная дата повторяющейся серии будет сохранена как *15.11.2027 00:00*, и последний возможный экземпляр серии может произойти до *14.11.2027 23:59*, поэтому в выбранный день в серия не будет иметь событий; +- если include_end_by = true — конечная дата повторяющейся серии будет сохранена как *16.11.2027 00:00* (полночь после выбранной даты), поэтому выбранный день будет включён в продолжительность серии и последний экземпляр серии может произойти до *15.11.2027 23:59*. ### Related API - [repeat_date](api/config/repeat_date.md) ### Related Guides -- [Повторяющиеся события](guides/recurring-events.md) +- [Recurring Events](guides/recurring-events.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/key_nav.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/key_nav.md index 894d3aad..83711a90 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/key_nav.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/key_nav.md @@ -1,14 +1,14 @@ --- -sidebar_label: "key_nav" +sidebar_label: key_nav title: "key_nav config" -description: "включает клавиатурную навигацию в scheduler" +description: "обеспечивает навигацию клавиатурой в планировщике" --- # key_nav ### Description -@short: Включает клавиатурную навигацию в scheduler +@short: Включает навигацию клавиатурой в планировщике @signature: key_nav: boolean @@ -18,7 +18,7 @@ description: "включает клавиатурную навигацию в sc scheduler.config.key_nav = true; ~~~ -**Default value:** true +**Значение по умолчанию:** true ### Related samples - [Keyboard Navigation and WAI-ARIA - Flat Skin](https://docs.dhtmlx.com/scheduler/samples/13_accessibility/01_regular_skin_all_views.html) @@ -26,7 +26,7 @@ scheduler.config.key_nav = true; ### Details :::note - Эта функция требует активного расширения [key_nav](guides/extensions-list.md#keyboard-navigation). +Свойство требует включения расширения [key_nav](guides/extensions-list.md#keyboard-navigation). ::: ### Related API @@ -37,5 +37,5 @@ scheduler.config.key_nav = true; - [removeShortcut](api/method/removeshortcut.md) ### Related Guides -- [Полный список расширений](guides/extensions-list.md#keyboard-navigation) -- [Навигация с помощью клавиатуры](guides/keyboard-navigation.md) +- [Full List of Extensions](guides/extensions-list.md) +- [Keyboard Navigation](guides/keyboard-navigation.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/key_nav_step.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/key_nav_step.md index a3f94b0d..729a43bc 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/key_nav_step.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/key_nav_step.md @@ -1,14 +1,14 @@ --- -sidebar_label: "key_nav_step" +sidebar_label: key_nav_step title: "key_nav_step config" -description: "устанавливает минимальный размер шага (в минутах), используемый при навигации по событиям" +description: "определяет минимальный шаг (в минутах) для навигации по событиям" --- # key_nav_step ### Description -@short: Устанавливает минимальный размер шага (в минутах), используемый при навигации по событиям +@short: Определяет минимальный шаг (в минутах) для навигации по событиям @signature: key_nav_step: number @@ -18,7 +18,7 @@ description: "устанавливает минимальный размер ш scheduler.config.key_nav_step = 40; ~~~ -**Default value:** 30 +**Значение по умолчанию:** 30 ### Related samples - [Keyboard Navigation and WAI-ARIA - Flat Skin](https://docs.dhtmlx.com/scheduler/samples/13_accessibility/01_regular_skin_all_views.html) @@ -26,7 +26,7 @@ scheduler.config.key_nav_step = 40; ### Details :::note - Эта настройка работает только если активировано расширение [key_nav](guides/extensions-list.md#keyboard-navigation). +Свойство требует включённого расширения [key_nav](guides/extensions-list.md#keyboard-navigation) для использования. ::: ### Related API @@ -38,4 +38,4 @@ scheduler.config.key_nav_step = 40; ### Related Guides - [Полный список расширений](guides/extensions-list.md#keyboard-navigation) -- [Навигация с помощью клавиатуры](guides/keyboard-navigation.md) +- [Keyboard Navigation](guides/keyboard-navigation.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/last_hour.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/last_hour.md index 059f1a65..532be5ed 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/last_hour.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/last_hour.md @@ -1,14 +1,14 @@ --- -sidebar_label: "last_hour" -title: "last_hour config" -description: "Определяет верхний предел для часовой шкалы на оси Y." +sidebar_label: last_hour +title: "конфигурация last_hour" +description: "устанавливает максимальное значение шкалы часов (ось Y)" --- # last_hour ### Description -@short: Определяет верхний предел для часовой шкалы на оси Y. +@short: Устанавливает максимальное значение шкалы часов (ось Y) @signature: last_hour: number @@ -18,16 +18,16 @@ description: "Определяет верхний предел для часов scheduler.config.first_hour = 9; scheduler.config.last_hour = 18; ... -scheduler.init('scheduler_here',new Date(2013,05,11),"week"); +scheduler.init('scheduler_here',new Date(2027,05,11),"week"); ~~~ -**Default value:** 24 +**Значение по умолчанию:** 24 -**Applicable views:** [Day view](views/day.md), [Week view](views/week.md), [Units view](views/units.md) +**Доступные представления:** [Дневной вид](views/day.md), [Недельный вид](views/week.md), [Вид по единицам](views/units.md) ### Related samples -- [Blocking dates](https://docs.dhtmlx.com/scheduler/samples/03_extensions/25_advanced_limitation.html) -- [Displaying multi-day events in the regular way](https://docs.dhtmlx.com/scheduler/samples/03_extensions/26_multi_day_visible.html) +- [Блокирование дат](https://docs.dhtmlx.com/scheduler/samples/03_extensions/25_advanced_limitation.html) +- [Отображение многодневных событий обычным способом](https://docs.dhtmlx.com/scheduler/samples/03_extensions/26_multi_day_visible.html) ### Details @@ -35,4 +35,4 @@ scheduler.init('scheduler_here',new Date(2013,05,11),"week"); ### Related API - [first_hour](api/config/first_hour.md) -- [limit_time_select](api/config/limit_time_select.md) +- [limit_time_select](api/config/limit_time_select.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/left_border.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/left_border.md index ce4ec9ef..c8757880 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/left_border.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/left_border.md @@ -1,14 +1,14 @@ --- -sidebar_label: "left_border" -title: "left_border config" -description: "включает пунктирную левую границу в scheduler" +sidebar_label: left_border +title: "Конфигурация left_border" +description: "добавляет пунктирную левую границу к планировщику" --- # left_border ### Description -@short: Включает пунктирную левую границу в scheduler +@short: Добавляет пунктирную левую границу к планировщику @signature: left_border: boolean @@ -17,13 +17,11 @@ description: "включает пунктирную левую границу в ~~~jsx scheduler.config.left_border = true; ... -scheduler.init('scheduler_here', new Date(2013, 7, 5), "month"); +scheduler.init('scheduler_here', new Date(2027, 7, 5), "month"); ~~~ -**Default value:** false +**Значение по умолчанию:** false ### Details -
- -![leftBorder_property](/img/leftBorder_property.png) +![leftBorder_property](/img/leftBorder_property.png) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/lightbox.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/lightbox.md index f511ae0d..05f56a81 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/lightbox.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/lightbox.md @@ -1,5 +1,5 @@ --- -sidebar_label: "lightbox" +sidebar_label: lightbox title: "lightbox config" description: "определяет объект lightbox" --- @@ -15,31 +15,31 @@ description: "определяет объект lightbox" ### Example ~~~jsx -scheduler.config.lightbox.sections=[ - { name:"description", height:50, type:"textarea", map_to:"text", focus:true}, - { name:"location", height:43, type:"textarea", map_to:"event_location"}, - { name:"time", height:72, type:"time", map_to:"auto"} +scheduler.config.lightbox.sections = [ + { name: "description", height: 50, type: "textarea", map_to: "text", focus: true }, + { name: "location", height: 43, type: "textarea", map_to: "event_location" }, + { name: "time", height: 72, type: "time", map_to: "auto" } ]; -... -scheduler.init('scheduler_here',new Date(2013,2,1),"week"); +... +scheduler.init('scheduler_here', new Date(2027, 2, 1), "week"); ~~~ ### Related samples -- [Checkbox in the lightbox](https://docs.dhtmlx.com/scheduler/samples/02_customization/13_single_checkbox_section.html) -- [Radio button in the lightbox](https://docs.dhtmlx.com/scheduler/samples/02_customization/14_radio_buttons_section.html) +- [Чекбокс в lightbox](https://docs.dhtmlx.com/scheduler/samples/02_customization/13_single_checkbox_section.html) +- [Радио-кнопка в lightbox](https://docs.dhtmlx.com/scheduler/samples/02_customization/14_radio_buttons_section.html) ### Details Объект lightbox включает одно основное свойство: -- **sections** - (*массив*) определяет секции, отображаемые в lightbox +- `sections` - (*array*) задаёт секции lightbox ~~~js -//определение по умолчанию -scheduler.config.lightbox.sections=[ - {name:"description", height:200, map_to:"text", type:"textarea" , focus:true}, - {name:"time", height:72, type:"time", map_to:"auto"} -] +// default definition +scheduler.config.lightbox.sections = [ + { name: "description", height: 200, map_to: "text", type: "textarea", focus: true }, + { name: "time", height: 72, type: "time", map_to: "auto" } +]; ~~~ Каждый элемент массива **sections** может иметь следующие свойства: @@ -72,27 +72,27 @@ scheduler.config.lightbox.sections=[ default_value - (any) значение по умолчанию для элемента управления в секции + (any) значение по умолчанию элемента управления секции onchange - (function) обработчик события 'onChange' для элемента управления (только для 'select') + (function) задаёт функцию-обработчик события 'onChange' для элемента управления секции (только для управления 'select') options - (массив объектов) определяет варианты выбора для элементов управления типа 'select', 'multiselect', 'radio', 'combo'.
Каждый объект в этом массиве представляет вариант и имеет следующие свойства:
  • key - (string) id варианта, используется для сопоставления с данными события
  • label - (string) отображаемая метка варианта
+ (array of objects) определяет варианты выбора элемента управления (для контролов 'select', 'multiselect', 'radio', 'combo').
Каждый объект в массиве задаёт одну опцию и имеет следующие свойства:
  • key - (string) идентификатор опции. Это свойство сравнивается со свойством данных события, чтобы назначить варианты выбора для событий
  • label - (string) ярлык опции
vertical - (boolean) определяет, располагаются ли радио-кнопки вертикально (true) или горизонтально (false) (только для 'select') + (boolean) задаёт, должны ли радио-кнопки располагаться вертикально(true) или горизонтально (false) (для управления 'select') checked_value - (boolean) значение, присваиваемое при отмеченном checkbox. Необязательно, по умолчанию true (только для 'checkbox') + (boolean) значение флажка в состоянии отмеченного. Необязательно. По умолчанию true (для управления 'checkbox') unchecked_value - (boolean) значение, присваиваемое при снятом checkbox. Необязательно, по умолчанию false (только для 'checkbox') + (boolean) значение флажка в состоянии снятого. Необязательно. По умолчанию false (для управления 'checkbox') @@ -101,8 +101,8 @@ scheduler.config.lightbox.sections=[ Когда свойство 'map_to' установлено в 'auto': -- Сам элемент управления не возвращает значение, а напрямую обновляет свойства события через метод 'set_value()' (см. [Пользовательский контрол Lightbox](guides/custom-lightbox-editor.md)). -- Обычно используется для сложных элементов управления, которые обрабатывают сразу несколько свойств события. +- Контрол не будет возвращать значение и будет напрямую изменять значения связанных свойств события в соответствии с методом `set_value()` ([Custom Lightbox Control](guides/custom-lightbox-editor.md)). +- В общем случае, значение `"auto"` используется для сложных контролов, которые работают с несколькими свойствами события ### Related Guides - [Полностью настраиваемый лайтбокс](guides/custom-details-form.md) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/lightbox_recurring.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/lightbox_recurring.md index 3e7b5e01..488a751e 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/lightbox_recurring.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/lightbox_recurring.md @@ -1,17 +1,22 @@ --- -sidebar_label: "lightbox_recurring" -title: "lightbox_recurring config" -description: "управляет поведением lightbox при редактировании повторяющегося события" +sidebar_label: lightbox_recurring +title: "конфигурация lightbox_recurring" +description: "определяет поведение lightbox, когда пользователь открывает lightbox для редактирования повторяющегося события" --- # lightbox_recurring ### Description -@short: Управляет поведением lightbox при редактировании повторяющегося события +@short: Определяет поведение lightbox, когда пользователь открывает lightbox для редактирования повторяющегося события @signature: lightbox_recurring: string +### Parameters + +- `ask | instance | series` - (required) *string*
ask: перед открытием lightbox появляется окно сообщения, которое уведомляет пользователя и спрашивает, будет ли он редактировать конкретный экземпляр или всё повторяющееся событие.
instance: lightbox открывается сразу для редактирования конкретного экземпляра события.
series: lightbox открывается сразу для редактирования всего повторяющегося события. + + ### Example ~~~jsx @@ -20,12 +25,12 @@ scheduler.config.lightbox_recurring = 'series'; scheduler.init('scheduler_here',new Date(2013,05,11),"week"); ~~~ -**Default value:** 'ask' +**Значение по умолчанию:** 'ask' ### Details :::note - Это свойство требует включения расширения [recurring](guides/extensions-list.md#recurring). + Свойство требует включённого расширения [recurring](guides/extensions-list.md#recurring). ::: Эта опция доступна с версии 3.5. diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/limit_drag_out.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/limit_drag_out.md index a49f95a6..25760a5a 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/limit_drag_out.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/limit_drag_out.md @@ -1,14 +1,14 @@ --- -sidebar_label: "limit_drag_out" -title: "limit_drag_out config" -description: "предотвращает перетаскивание событий за пределы видимой области планировщика" +sidebar_label: limit_drag_out +title: "limit_drag_out конфигурация" +description: "Запрещает перетаскивать события за пределы видимой области планировщика" --- # limit_drag_out ### Description -@short: Предотвращает перетаскивание событий за пределы видимой области планировщика +@short: Запрещает перетаскивать события за пределы видимой области планировщика @signature: limit_drag_out: boolean @@ -19,6 +19,6 @@ description: "предотвращает перетаскивание событ scheduler.config.limit_drag_out = true; ~~~ -**Default value:** false +**Значение по умолчанию:** false -**Applicable views:** [Timeline view](views/timeline.md) +**Доступные представления:** [Timeline view](views/timeline.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/limit_end.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/limit_end.md index 69ecfd2e..09611c56 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/limit_end.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/limit_end.md @@ -1,43 +1,43 @@ --- -sidebar_label: "limit_end" +sidebar_label: limit_end title: "limit_end config" -description: "определяет конечную границу допустимого диапазона дат" +description: "устанавливает предел конца допустимого диапазона дат" --- # limit_end ### Description -@short: Определяет конечную границу допустимого диапазона дат +@short: Устанавливает предел конца допустимого диапазона дат @signature: limit_end: Date ### Example ~~~jsx -scheduler.config.limit_start = new Date(2018,5,15); -scheduler.config.limit_end = new Date(2018,6,15); +scheduler.config.limit_start = new Date(2027,5,15); +scheduler.config.limit_end = new Date(2027,6,15); ... -scheduler.init('scheduler_here',new Date(2018,5,30),"week"); +scheduler.init('scheduler_here',new Date(2027,5,30),"week"); ~~~ -**Default value:** null +**Значение по умолчанию:** null ### Related samples -- [Limiting dates for creating events](https://docs.dhtmlx.com/scheduler/samples/03_extensions/16_limitation.html) +- [Ограничение дат для создания событий](https://docs.dhtmlx.com/scheduler/samples/03_extensions/16_limitation.html) ### Details :::note - Для использования этого свойства необходимо включить плагин [limit](guides/extensions-list.md#limit). + Свойство требует активации плагина [limit](guides/extensions-list.md#limit). ::: Настройки **limit_start/limit_end** ограничивают диапазон, в пределах которого можно создавать новые события. Кроме того, вы можете контролировать видимость событий за пределами этого диапазона с помощью свойства [limit_view](api/config/limit_view.md): ~~~js -scheduler.config.limit_start = new Date(2018,5,15); -scheduler.config.limit_end = new Date(2018,6,15); +scheduler.config.limit_start = new Date(2027,5,15); +scheduler.config.limit_end = new Date(2027,6,15); scheduler.config.limit_view = true; ~~~ @@ -46,4 +46,4 @@ scheduler.config.limit_view = true; - [limit_view](api/config/limit_view.md) ### Related Guides -- [Блокировка и выделение дат](guides/limits.md) +- [Blocking and Marking Dates](guides/limits.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/limit_start.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/limit_start.md index 1ca59111..59007d26 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/limit_start.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/limit_start.md @@ -1,42 +1,42 @@ --- -sidebar_label: "limit_start" +sidebar_label: limit_start title: "limit_start config" -description: "задаёт начальную границу допустимого диапазона дат" +description: "задает начальный предел допустимого диапазона дат" --- # limit_start ### Description -@short: Задаёт начальную границу допустимого диапазона дат +@short: Устанавливает начальный предел допустимого диапазона дат @signature: limit_start: Date ### Example ~~~jsx -scheduler.config.limit_start = new Date(2018,5,15); -scheduler.config.limit_end = new Date(2018,6,15); +scheduler.config.limit_start = new Date(2027,5,15); +scheduler.config.limit_end = new Date(2027,6,15); ... -scheduler.init('scheduler_here', new Date(2018,5,30), "week"); +scheduler.init('scheduler_here',new Date(2027,5,30),"week"); ~~~ -**Default value:** null +**Значение по умолчанию:** null ### Related samples -- [Limiting dates for creating events](https://docs.dhtmlx.com/scheduler/samples/03_extensions/16_limitation.html) +- [Ограничение дат для создания событий](https://docs.dhtmlx.com/scheduler/samples/03_extensions/16_limitation.html) ### Details :::note - Для использования этого свойства необходимо включить плагин [limit](guides/extensions-list.md#limit). + Свойство требует активации плагина [limit](guides/extensions-list.md#limit). ::: Настройки **limit_start** и **limit_end** ограничивают диапазон дат, в котором можно создавать новые события. Кроме того, можно запретить просмотр событий за пределами этого допустимого диапазона, включив свойство `limit_view`: ~~~js -scheduler.config.limit_start = new Date(2018,5,15); -scheduler.config.limit_end = new Date(2018,6,15); +scheduler.config.limit_start = new Date(2027,5,15); +scheduler.config.limit_end = new Date(2027,6,15); scheduler.config.limit_view = true; ~~~ @@ -45,4 +45,4 @@ scheduler.config.limit_view = true; - [limit_view](api/config/limit_view.md) ### Related Guides -- [Блокировка и выделение дат](guides/limits.md) +- [Блокировка и пометка дат](guides/limits.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/limit_time_select.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/limit_time_select.md index 26dff5c0..22abd173 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/limit_time_select.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/limit_time_select.md @@ -1,14 +1,14 @@ --- -sidebar_label: "limit_time_select" -title: "limit_time_select config" -description: "Ограничивает селектор времени в лайтбоксе, устанавливая максимальные и минимальные значения в соответствии с опциями 'last_hour' и 'first_hour'." +sidebar_label: limit_time_select +title: "limit_time_select конфигурация" +description: "устанавливает максимальные и минимальные значения тайм-селектора в lightbox на значения опций 'last_hour' и 'first_hour'" --- # limit_time_select ### Description -@short: Ограничивает селектор времени в лайтбоксе, устанавливая максимальные и минимальные значения в соответствии с опциями 'last_hour' и 'first_hour'. +@short: Устанавливает максимальные и минимальные значения тайм-селектора в lightbox на значения опций 'last_hour' и 'first_hour' @signature: limit_time_select: boolean @@ -17,11 +17,11 @@ description: "Ограничивает селектор времени в лай ~~~jsx scheduler.config.limit_time_select = true; ... -scheduler.init('scheduler_here',new Date(2013,0,10),"week"); +scheduler.init('scheduler_here',new Date(2027,0,10),"week"); ~~~ -**Default value:** false +**Значение по умолчанию:** false ### Related API - [last_hour](api/config/last_hour.md) -- [first_hour](api/config/first_hour.md) +- [first_hour](api/config/first_hour.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/limit_view.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/limit_view.md index 05d4a654..8a4a5451 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/limit_view.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/limit_view.md @@ -1,44 +1,44 @@ --- -sidebar_label: "limit_view" -title: "limit_view config" -description: "ограничивает диапазон дат, в пределах которого пользователи могут просматривать события" +sidebar_label: limit_view +title: "limit_view конфигурация" +description: "ограничивает диапазон дат, в течение которого пользователь может просматривать события" --- # limit_view ### Description -@short: Ограничивает диапазон дат, в пределах которого пользователи могут просматривать события +@short: Ограничивает диапазон дат, в рамках которого пользователь может просматривать события @signature: limit_view: boolean ### Example ~~~jsx -scheduler.init('scheduler_here',new Date(2022,5,17),"week"); +scheduler.init('scheduler_here',new Date(2027,5,17),"week"); ... scheduler.config.limit_view = true; ~~~ -**Default value:** false +**Значение по умолчанию:** false ### Details -Например, установка ограничения на 2023 год означает, что пользователи не смогут перейти к 2022 году - будут доступны только даты в пределах 2023 года. +Например, если мы установим ограничение на год 2027, перейти к году 2026 нельзя — доступен только 2027 год. -Если также заданы настройки **limit_start/limit_end** для ограничения периода создания новых событий, то **limit_view** предотвратит просмотр событий за пределами этого разрешённого диапазона дат. +Если вы также укажите конфигурации **limit_start/limit_end**, чтобы ограничить диапазон, доступный для создания новых событий, **limit_view** не позволит вам просматривать события за пределами допустимого диапазона дат. ~~~js -scheduler.config.limit_start = new Date(2022,5,15); -scheduler.config.limit_end = new Date(2022,6,15); +scheduler.config.limit_start = new Date(2027,5,15); +scheduler.config.limit_end = new Date(2027,6,15); scheduler.config.limit_view = true; ~~~ -С такой конфигурацией события можно создавать только с 15 июня по 15 июля, и навигация по календарю также ограничена этими датами. +С учетом этой конфигурации вы сможете создавать события только в диапазоне между 15 июня и 15 июля, и перемещаться по календарю только в пределах этого диапазона дат. ### Related API - [limit_start](api/config/limit_start.md) - [limit_end](api/config/limit_end.md) ### Related Guides -- [Блокировка и выделение дат](guides/limits.md) +- [Blocking and Marking Dates](guides/limits.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/load_date.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/load_date.md index 44bbb0d7..3c4837a5 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/load_date.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/load_date.md @@ -1,14 +1,14 @@ --- -sidebar_label: "load_date" -title: "load_date config" -description: "определяет формат параметров запроса 'from' и 'to' на сервер при использовании динамической загрузки" +sidebar_label: load_date +title: "load_date конфигурация" +description: "задает формат параметров запроса к серверу 'from', 'to' в случае динамической загрузки" --- # load_date ### Description -@short: Определяет формат параметров запроса 'from' и 'to' на сервер при использовании динамической загрузки +@short: Задает формат параметров запроса к серверу 'from', 'to' в случае динамической загрузки @signature: load_date: string @@ -22,11 +22,11 @@ scheduler.setLoadMode("month"); scheduler.load("data/events.php"); ~~~ -**Default value:** "%Y-%m-%d" +**Значение по умолчанию:** "%Y-%m-%d" ### Related API - [setLoadMode](api/method/setloadmode.md) - [load_format](api/template/load_format.md) ### Related Guides -- [Загрузка данных](guides/loading-data.md#dynamic-loading) +- [Loading Data](guides/loading-data.md#dynamic-loading) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/map_end.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/map_end.md index 2675c138..a84cd70b 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/map_end.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/map_end.md @@ -1,29 +1,29 @@ --- -sidebar_label: "map_end" -title: "map_end config" -description: "определяет дату, до которой отображаются события" +sidebar_label: map_end +title: "конфигурация map_end" +description: "задает дату до которой следует отображать события" --- # map_end ### Description -@short: Определяет дату, до которой отображаются события +@short: Задает дату до которой следует отображать события @signature: map_end: Date ### Example ~~~jsx -scheduler.config.map_start = new Date(2012, 7, 1); -scheduler.config.map_end = new Date(2014, 7, 1); +scheduler.config.map_start = new Date(2026, 7, 1); +scheduler.config.map_end = new Date(2027, 7, 1); ... -scheduler.init('scheduler_here', new Date(2013, 0, 10), "map"); +scheduler.init('scheduler_here', new Date(2027, 0, 10), "map"); ~~~ -**Default value:** 'map_start' (значение) + 1 год +**Значение по умолчанию:** 'map_start' (значение) + 1 год -**Applicable views:** [Map view](views/map.md) +**Применимые представления:** [Map view](views/map.md) ### Related samples - [Configuring the Map view](https://docs.dhtmlx.com/scheduler/samples/03_extensions/23_map_view_timeframes.html) @@ -31,8 +31,8 @@ scheduler.init('scheduler_here', new Date(2013, 0, 10), "map"); ### Details :::note - Для использования этого свойства необходимо включить плагин [map_view](guides/extensions-list.md#mapview). -::: + Свойство требует активации плагина [map_view](guides/extensions-list.md#map-view) для работы. + ::: ### Related API -- [map_start](api/config/map_start.md) +- [map_start](api/config/map_start.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/map_error_position.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/map_error_position.md index cf4e040e..14d63c4d 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/map_error_position.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/map_error_position.md @@ -1,16 +1,16 @@ --- -sidebar_label: "map_error_position" -title: "map_error_position config" -description: "Определяет позицию, отображаемую на карте, когда местоположение события не может быть определено" +sidebar_label: map_error_position +title: "map_error_position конфигурация" +description: "задает позицию, которая будет отображаться на карте в случае, если местоположение события не может быть определено" --- # map_error_position -:::warning -Эта функицональность устарела -::: +:::warning +Свойство устарело +::: ### Description -@short: Определяет позицию, отображаемую на карте, когда местоположение события не может быть определено +@short: Задает позицию, которая будет отображаться на карте в случае, если местоположение события не может быть идентифицировано @signature: map_error_position: any @@ -19,26 +19,26 @@ description: "Определяет позицию, отображаемую на ~~~jsx scheduler.config.map_error_position = new google.maps.LatLng(51.477840, -0.001492); ... -scheduler.init('scheduler_here',new Date(2013,05,11),"map"); +scheduler.init('scheduler_here',new Date(2027,05,11),"map"); ~~~ -**Default value:** google.maps.LatLng(15, 15) +**Значение по умолчанию:** google.maps.LatLng(15, 15) -**Applicable views:** [Map view](views/map.md) +**Применимые представления:** [Вид карты](views/map.md) ### Details :::note - Это свойство требует включения плагина [map_view](guides/extensions-list.md#mapview). + Свойство требует активации плагина [map_view](guides/extensions-list.md#map-view). ::: «Позиция ошибки» применяется в следующих случаях: -1. Когда у события отсутствует одна или обе координаты (например, значения координат равны '0', 'null' или 'undefined') и опция [map_resolve_event_location](api/config/map_resolve_event_location.md) отключена. -2. Когда у события отсутствует одна или обе координаты, опция [map_resolve_event_location](api/config/map_resolve_event_location.md) включена, но scheduler не смог определить местоположение. +1. У события отсутствует одна из координат (или обе координаты) указаны (то есть координата имеет значение '0', 'null', 'undefined') и опция [map_resolve_event_location](api/config/map_resolve_event_location.md) отключена. +2. У события отсутствует одна из координат (или обе координаты) указаны и опция [map_resolve_event_location](api/config/map_resolve_event_location.md) включена, но планировщик не может определить местоположение. ### Related API - [map_resolve_event_location](api/config/map_resolve_event_location.md) ### Change log -- устарело с версии 7.1 +- устарело с версии v7.1 \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/map_infowindow_max_width.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/map_infowindow_max_width.md index db968521..e9c96424 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/map_infowindow_max_width.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/map_infowindow_max_width.md @@ -1,14 +1,14 @@ --- -sidebar_label: "map_infowindow_max_width" +sidebar_label: map_infowindow_max_width title: "map_infowindow_max_width config" -description: "Устанавливает максимальную ширину всплывающего окна маркера на карте в Map view." +description: "максимальная ширина всплывающего маркера на карте в режиме отображения" --- # map_infowindow_max_width ### Description -@short: Устанавливает максимальную ширину всплывающего окна маркера на карте в Map view. +@short: Максимальная ширина всплывающего маркера на карте в режиме отображения @signature: map_infowindow_max_width: number @@ -17,17 +17,17 @@ description: "Устанавливает максимальную ширину ~~~jsx scheduler.config.map_infowindow_max_width = 350; ... -scheduler.init('scheduler_here',new Date(2013,05,11),"week"); +scheduler.init('scheduler_here',new Date(2027,05,11),"week"); ~~~ **Default value:** 300 -**Applicable views:** [Map view](views/map.md) +**Применимые представления:** [вид карты](views/map.md) ### Details :::note - Для использования этого свойства необходимо включить плагин [map_view](guides/extensions-list.md#mapview). -::: + Свойство требует активации плагина [map_view](guides/extensions-list.md#map-view). + ::: -Опция **infowindow_max_width** также может быть задана в объекте конфигурации [map_settings](api/config/map_settings.md). +Вы также можете указать настройку **infowindow_max_width** внутри конфигурационного объекта [map_settings](api/config/map_settings.md). \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/map_initial_position.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/map_initial_position.md index 35d44288..b5b8228b 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/map_initial_position.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/map_initial_position.md @@ -1,39 +1,39 @@ --- -sidebar_label: "map_initial_position" -title: "map_initial_position config" -description: "задаёт начальное положение карты" +sidebar_label: map_initial_position +title: "map_initial_position конфигурация" +description: "устанавливает начальное положение карты" --- # map_initial_position -:::warning -Эта функицональность устарела -::: +:::warning +Свойство устарело +::: ### Description -@short: Задаёт начальное положение карты +@short: Устанавливает начальное положение карты @signature: map_initial_position: any ### Example ~~~jsx -scheduler.config.map_initial_position = new google.maps.LatLng(51.477840, -0.001492); +scheduler.config.map_initial_position =new google.maps.LatLng(51.477840, -0.001492); ... -scheduler.init('scheduler_here', new Date(2013,05,11), "map"); +scheduler.init('scheduler_here',new Date(2027,05,11),"map"); ~~~ -**Default value:** google.maps.LatLng(48.724, 8.215) +**Значение по умолчанию:** google.maps.LatLng(48.724, 8.215) -**Applicable views:** [Map view](views/map.md) +**Применимые представления:** [Map view](views/map.md) ### Details :::note - Для работы этого свойства необходимо включить плагин [map_view](guides/extensions-list.md#mapview). + Свойство требует активированного плагина [map_view](guides/extensions-list.md#map-view) для активации. ::: ### Related API - [map_initial_zoom](api/config/map_initial_zoom.md) ### Change log -- устарело с версии v7.1 +- устарело с версии v7.1 \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/map_initial_zoom.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/map_initial_zoom.md index 4d8fcf8e..57f6a475 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/map_initial_zoom.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/map_initial_zoom.md @@ -1,14 +1,14 @@ --- -sidebar_label: "map_initial_zoom" -title: "map_initial_zoom config" -description: "задаёт начальный уровень зума для карты в Map view" +sidebar_label: map_initial_zoom +title: "конфигурация map_initial_zoom" +description: "устанавливает начальный масштаб карты в представлении Map" --- # map_initial_zoom ### Description -@short: Задаёт начальный уровень зума для карты в Map view +@short: Устанавливает начальный масштаб карты во View Map @signature: map_initial_zoom: number @@ -17,20 +17,20 @@ description: "задаёт начальный уровень зума для к ~~~jsx scheduler.config.map_initial_zoom = 7; ... -scheduler.init('scheduler_here', new Date(2013,05,11), "week"); +scheduler.init('scheduler_here',new Date(2027,05,11),"week"); ~~~ -**Default value:** 1 +**Значение по умолчанию:** 1 -**Applicable views:** [Map view](views/map.md) +**Применимые представления:** [Map view](views/map.md) ### Details :::note - Это свойство работает только при включённом плагине [map_view](guides/extensions-list.md#mapview). + Свойство требует активации плагина [map_view](guides/extensions-list.md#map-view). ::: -**initial_zoom** также можно задать в объекте конфигурации [map_settings](api/config/map_settings.md). +Вы также можете указать настройку **initial_zoom** внутри конфигурационного объекта [map_settings](api/config/map_settings.md). ### Related API -- [map_initial_position](api/config/map_initial_position.md) +- [map_initial_position](api/config/map_initial_position.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/map_resolve_event_location.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/map_resolve_event_location.md index 3eba9548..217822c3 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/map_resolve_event_location.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/map_resolve_event_location.md @@ -1,14 +1,14 @@ --- -sidebar_label: "map_resolve_event_location" -title: "map_resolve_event_location config" -description: "включает автоматические попытки определения местоположения события, если его координаты ещё не сохранены в базе данных" +sidebar_label: map_resolve_event_location +title: "map_resolve_event_location конфигурация" +description: "Активирует попытки определения местоположения события, если в базе данных отсутствуют сохранённые координаты события" --- # map_resolve_event_location ### Description -@short: Включает автоматические попытки определения местоположения события, если его координаты ещё не сохранены в базе данных +@short: Активирует попытки определения местоположения события, если в базе данных отсутствуют сохранённые координаты события @signature: map_resolve_event_location: boolean @@ -20,17 +20,17 @@ scheduler.config.map_resolve_event_location = false; scheduler.init('scheduler_here',new Date(2013,05,11),"week"); ~~~ -**Default value:** true +**Значение по умолчанию:** true -**Applicable views:** [Map view](views/map.md) +**Применимые представления:** [Map view](views/map.md) ### Details :::note - Для работы этой функции необходимо включить плагин [map_view](guides/extensions-list.md#mapview). + Свойство требует активации плагина [map_view](guides/extensions-list.md#map-view). ::: -Опция **resolve_event_location** также может быть установлена внутри объекта конфигурации [map_settings](api/config/map_settings.md). +Вы также можете указать настройку **resolve_event_location** внутри конфигурационного объекта [map_settings](api/config/map_settings.md). -- Если включено (*true*), и у события отсутствуют значения 'lat' и 'lng' в базе данных, scheduler при загрузке событий попытается определить координаты на основе поля 'event_location'. В случае успешного определения координаты будут сохранены обратно в базу данных. Если определить координаты не удалось, scheduler вызовет событие [onLocationError](api/event/onlocationerror.md). -- Эта настройка особенно полезна при миграции, но обычно не рекомендуется использовать её в рабочей среде. +- Если опция установлена в *true*, и у события в базе данных отсутствуют значения 'lat' и 'lng', планировщик попытается определить координаты на основе значения 'event_location' во время загрузки событий в планировщик. Если указанное местоположение будет идентифицировано, соответствующие координаты будут сохранены в БД. Если нет, планировщик вызовет событие [onLocationError](api/event/onlocationerror.md). +- Включение свойства полезно для миграции, но не для стадии продакшна. \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/map_resolve_user_location.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/map_resolve_user_location.md index e2597606..0e547311 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/map_resolve_user_location.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/map_resolve_user_location.md @@ -1,14 +1,14 @@ --- -sidebar_label: "map_resolve_user_location" +sidebar_label: map_resolve_user_location title: "map_resolve_user_location config" -description: "управляет тем, будет ли пользователю предложено поделиться своей локацией для отображения на карте" +description: "включает/выключает запросы к пользователю на предоставление его местоположения для отображения на карте" --- # map_resolve_user_location ### Description -@short: Управляет тем, будет ли пользователю предложено поделиться своей локацией для отображения на карте +@short: Включает/выключает запросы к пользователю на предоставление его местоположения для отображения на карте @signature: map_resolve_user_location: boolean @@ -17,18 +17,18 @@ description: "управляет тем, будет ли пользовател ~~~jsx scheduler.config.map_resolve_user_location = false; ... -scheduler.init('scheduler_here',new Date(2013,05,11),"week"); +scheduler.init('scheduler_here',new Date(2027,05,11),"week"); ~~~ -**Default value:** true +**Значение по умолчанию:** true -**Applicable views:** [Map view](views/map.md) +**Применимые представления:** [Map view](views/map.md) ### Details :::note - Свойство требует включения плагина [map_view](guides/extensions-list.md#mapview). -::: + Свойство требует, чтобы был активирован плагин [map_view](guides/extensions-list.md#map-view). + ::: Настройка **resolve_user_location** также может быть определена внутри объекта конфигурации [map_settings](api/config/map_settings.md). diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/map_settings.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/map_settings.md index b2bf61fe..028d401e 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/map_settings.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/map_settings.md @@ -1,5 +1,5 @@ --- -sidebar_label: "map_settings" +sidebar_label: map_settings title: "map_settings config" description: "содержит параметры конфигурации, связанные с картой" --- @@ -8,14 +8,14 @@ description: "содержит параметры конфигурации, св ### Description -@short: Содержит параметры конфигурации, связанные с картой +@short: Обеспечивает параметры конфигурации, связанные с картой @signature: map_settings: any ### Example ~~~jsx -// этот пример показывает настройки карты по умолчанию +// пример предоставляет значения по умолчанию настроек карты scheduler.config.map_settings = { initial_position: { lat: 48.724, @@ -33,33 +33,33 @@ scheduler.config.map_settings = { view_provider: "googleMap" } ... -scheduler.init('scheduler_here',new Date(2024,05,11),"map"); +scheduler.init('scheduler_here',new Date(2027,05,11),"map"); ~~~ -**Applicable views:** [Map view](views/map.md) +**Доступные представления:** [Map view](views/map.md) ### Details :::note - Для использования этого свойства необходимо включить плагин [map_view](guides/extensions-list.md#mapview). + Свойство требует активированного плагина [map_view](guides/extensions-list.md#map-view) для активации. ::: Объект конфигурации включает следующие свойства: -- **initial_position** - задаёт начальную позицию карты -- **error_position** - задаёт запасную позицию, отображаемую, если местоположение события определить не удалось -- **initial_zoom** - устанавливает уровень масштабирования при первой загрузке карты -- **zoom_after_resolve** - определяет уровень масштабирования для отображения местоположения пользователя, если разрешение получено -- **info_window_max_width** - задаёт максимальную ширину всплывающего окна маркера на карте -- **resolve_user_location** - включает или отключает запросы разрешения у пользователя на определение его местоположения для отображения на карте -- **resolve_event_location** - включает попытки определить местоположение события, если координаты не сохранены в базе данных -- **view_provider** - выбирает провайдера картографического сервиса +- **initial_position** - устанавливает начальное положение карты +- **error_position** - устанавливает положение, которое будет отображаться на карте в случае, если местоположение события не может быть идентифицировано +- **initial_zoom** - устанавливает начальное масштабирование карты во Map view +- **zoom_after_resolve** - устанавливает масштаб, который будет использоваться для отображения местоположения пользователя, если пользователь согласится на предложение браузера показать его +- **info_window_max_width** - максимальная ширина всплывающего окна маркера на карте во Map view +- **resolve_user_location** - включает/выключает запросы на предоставление пользователем своего местоположения для отображения на карте +- **resolve_event_location** - активирует попытки определить местоположение события, если в базе данных не сохранены координаты события +- **view_provider** - указывает поставщика карт -Дополнительные настройки карты, например, токены, можно добавить внутри объекта **map_settings**: +Вы можете задать собственные настройки карты внутри объекта **map_settings**, например некоторые токены: ~~~js scheduler.config.map_settings.accessToken = "pk.eyJ..."; ~~~ ### Change log -- Добавлено в версии v7.1 +- Добавлено в v7.1 \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/map_start.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/map_start.md index 41592d23..bd944fe4 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/map_start.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/map_start.md @@ -1,38 +1,38 @@ --- -sidebar_label: "map_start" +sidebar_label: map_start title: "map_start config" -description: "указывает дату, с которой начнется отображение событий" +description: "устанавливает дату начала отображения событий" --- # map_start ### Description -@short: Указывает дату, с которой начнется отображение событий +@short: Устанавливает дату начала отображения событий @signature: map_start: Date ### Example ~~~jsx -scheduler.config.map_start = new Date(2012, 7, 1); -scheduler.config.map_end = new Date(2014, 7, 1); +scheduler.config.map_start = new Date(2025, 7, 1); +scheduler.config.map_end = new Date(2027, 7, 1); ... -scheduler.init('scheduler_here', new Date(2013, 0, 10), "map"); +scheduler.init('scheduler_here', new Date(2026, 0, 10), "map"); ~~~ -**Default value:** дата текущего пользователя +**Значение по умолчанию:** текущая дата пользователя -**Applicable views:** [Map view](views/map.md) +**Доступные представления:** [Вид карты](views/map.md) ### Related samples -- [Configuring the Map view](https://docs.dhtmlx.com/scheduler/samples/03_extensions/23_map_view_timeframes.html) +- [Настройка вида карты](https://docs.dhtmlx.com/scheduler/samples/03_extensions/23_map_view_timeframes.html) ### Details :::note - Для использования этого свойства необходимо включить плагин [map_view](guides/extensions-list.md#mapview). + Свойство требует активации плагина [map_view](guides/extensions-list.md#map-view). ::: ### Related API -- [map_end](api/config/map_end.md) +- [map_end](api/config/map_end.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/map_type.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/map_type.md index ad272b3a..b30864ea 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/map_type.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/map_type.md @@ -1,16 +1,16 @@ --- -sidebar_label: "map_type" +sidebar_label: map_type title: "map_type config" -description: "определяет тип Google Maps" +description: "sets the type of Google Maps" --- # map_type -:::warning -Эта функицональность устарела -::: +:::warning +Свойство устарело +::: ### Description -@short: Определяет тип Google Maps +@short: Устанавливает тип Google Maps @signature: map_type: any @@ -19,18 +19,18 @@ description: "определяет тип Google Maps" ~~~jsx scheduler.config.map_type = google.maps.MapTypeId.HYBRID; ... -scheduler.init('scheduler_here',new Date(2013,05,11),"map"); +scheduler.init('scheduler_here',new Date(2027,05,11),"map"); ~~~ -**Default value:** ROADMAP +**Значение по умолчанию:** ROADMAP -**Applicable views:** [Map view](views/map.md) +**Поддерживаемые представления:** [Вид карты](views/map.md) ### Details :::note - Для использования этого свойства необходимо включить плагин [map_view](guides/extensions-list.md#mapview). + Своьство требует активированного плагина [map_view](guides/extensions-list.md#map-view) для активации. ::: ### Change log -- устарело с версии v7.1 +- устарело с версии v7.1 \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/map_view_provider.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/map_view_provider.md index 5d984b47..6d93cde8 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/map_view_provider.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/map_view_provider.md @@ -1,34 +1,40 @@ --- -sidebar_label: "map_view_provider" -title: "map_view_provider config" -description: "определяет, какой провайдер карты использовать" +sidebar_label: map_view_provider +title: "Конфигурация map_view_provider" +description: "указывает провайдера карт" --- # map_view_provider ### Description -@short: Определяет, какой провайдер карты использовать +@short: Указывает провайдера карт @signature: map_view_provider: string +### Values + +- "googleMap"|"openStreetMaps"|"mapbox" + ### Example ~~~jsx scheduler.config.map_view_provider = "googleMap"; ... -scheduler.init('scheduler_here', new Date(2024, 05, 11), "map"); +scheduler.init('scheduler_here',new Date(2027,05,11),"map"); ~~~ -**Applicable views:** [Map view](views/map.md) +**Значение по умолчанию:** googleMap + +**Доступные представления:** [Карта](views/map.md) ### Details :::note - Это свойство работает только если включён плагин [map_view](guides/extensions-list.md#mapview). + Свойство требует активации плагина [map_view](guides/extensions-list.md#map-view). ::: -Также возможно задать провайдера карты внутри объекта конфигурации [map_settings](api/config/map_settings.md). +Вы также можете указать провайдера карт внутри конфигурационного объекта [map_settings](api/config/map_settings.md). ### Change log -- добавлено в v7.1 +- добавлено в v7.1 \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/map_zoom_after_resolve.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/map_zoom_after_resolve.md index 40276b34..7e06365b 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/map_zoom_after_resolve.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/map_zoom_after_resolve.md @@ -1,14 +1,14 @@ --- -sidebar_label: "map_zoom_after_resolve" -title: "map_zoom_after_resolve config" -description: "устанавливает уровень масштабирования для отображения местоположения пользователя, когда браузер запрашивает разрешение и пользователь соглашается" +sidebar_label: map_zoom_after_resolve +title: "map_zoom_after_resolve конфигурация" +description: "устанавливает масштаб, который будет использоваться для отображения местоположения пользователя, если пользователь согласится с предложением браузера показать его" --- # map_zoom_after_resolve ### Description -@short: Устанавливает уровень масштабирования для отображения местоположения пользователя, когда браузер запрашивает разрешение и пользователь соглашается +@short: Устанавливает масштаб, который будет использоваться для отображения местоположения пользователя, если пользователь согласится с предложением браузера показать его @signature: map_zoom_after_resolve: number @@ -17,17 +17,17 @@ description: "устанавливает уровень масштабирова ~~~jsx scheduler.config.map_zoom_after_resolve = 10; ... -scheduler.init('scheduler_here', new Date(2013, 05, 11), "week"); +scheduler.init('scheduler_here',new Date(2027,05,11),"week"); ~~~ -**Default value:** 15 +**Значение по умолчанию:** 15 -**Applicable views:** [Map view](views/map.md) +**Доступные представления:** [Map view](views/map.md) ### Details :::note - Свойство требует включения плагина [map_view](guides/extensions-list.md#mapview). + Сво́йство требует активации плагина [map_view](guides/extensions-list.md#map-view). ::: -Настройка **zoom_after_resolve** также может быть определена внутри объекта конфигурации [map_settings](api/config/map_settings.md). +Вы также можете указать настройку **zoom_after_resolve** внутри конфигурационного объекта [map_settings](api/config/map_settings.md). \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/mark_now.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/mark_now.md index 158d1b8c..66755f91 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/mark_now.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/mark_now.md @@ -1,14 +1,14 @@ --- -sidebar_label: "mark_now" -title: "mark_now config" -description: "включает или отключает маркер текущего времени" +sidebar_label: mark_now +title: "Настройки mark_now" +description: "включает/выключает отображение маркера текущего времени" --- # mark_now ### Description -@short: Включает или отключает маркер текущего времени +@short: Включает/выключает маркер отображения текущего времени @signature: mark_now: boolean @@ -17,24 +17,24 @@ description: "включает или отключает маркер текущ ~~~jsx scheduler.config.mark_now = false; ... -scheduler.init('scheduler_here',new Date(2013,05,11),"week"); +scheduler.init('scheduler_here',new Date(2027,05,11),"week"); ~~~ -**Default value:** true +**Значение по умолчанию:** true -**Applicable views:** [Day view](views/day.md), [Week view](views/week.md), [Timeline view](views/timeline.md) +**Доступные представления:** [Day view](views/day.md), [Week view](views/week.md), [Timeline view](views/timeline.md) ### Related samples -- [Current time marking](https://docs.dhtmlx.com/scheduler/samples/02_customization/23_current_time.html) +- [Отмечание текущего времени](https://docs.dhtmlx.com/scheduler/samples/02_customization/23_current_time.html) ### Details :::note - Эта функция зависит от включенного плагина [limit](guides/extensions-list.md#limit). + Свойство требует активации плагина [limit](guides/extensions-list.md#limit). ::: :::note - Для Timeline view убедитесь, что расширение [limit](guides/extensions-list.md#limit) загружается перед расширением [Timeline](guides/extensions-list.md#timeline) на странице. + Замечание: для Timeline view расширение [limit] должно быть включено на странице перед расширением [Timeline]. ::: ![weekView_properties](/img/weekView_properties.png) @@ -43,4 +43,4 @@ scheduler.init('scheduler_here',new Date(2013,05,11),"week"); - [now_date](api/config/now_date.md) ### Related Guides -- [Блокировка и выделение дат](guides/limits.md) +- [Блокировка и пометка дат](guides/limits.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/max_month_events.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/max_month_events.md index a35f7faf..3c25f78b 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/max_month_events.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/max_month_events.md @@ -1,14 +1,14 @@ --- -sidebar_label: "max_month_events" -title: "max_month_events config" -description: "контролирует максимальное количество событий, отображаемых в одной ячейке" +sidebar_label: max_month_events +title: "Конфигурация max_month_events" +description: "задает максимальное количество событий, которые можно отобразить в ячейке" --- # max_month_events ### Description -@short: Контролирует максимальное количество событий, отображаемых в одной ячейке +@short: Устанавливает максимальное количество событий, которые можно отобразить в ячейке @signature: max_month_events: number @@ -17,17 +17,17 @@ description: "контролирует максимальное количест ~~~jsx scheduler.config.max_month_events = 5; .. -scheduler.init('scheduler_here', new Date(2013,5,30),"month"); +scheduler.init('scheduler_here', new Date(2027,5,30),"month"); ~~~ -**Applicable views:** [Month view](views/month.md) +**Доступные представления:** [Month view](views/month.md) ### Related samples -- ['View more' link in the Month view](https://docs.dhtmlx.com/scheduler/samples/02_customization/31_view_more.html) +- ['Показать ещё' ссылка на Вид месяца](https://docs.dhtmlx.com/scheduler/samples/02_customization/31_view_more.html) ### Details -Когда количество событий, назначенных ячейке, превышает этот предел, scheduler показывает ссылку «View more». Нажатие на эту ссылку переводит пользователя в Day view, где все события этого дня отображаются полностью. +Если количество назначенных событий превышает значение опции, планировщик отобразит ссылку 'Показать ещё'. Эта ссылка перенаправит пользователя на Вид дня, отображающий полный список назначенных событий. ![max_month_events_property](/img/max_month_events_property.png) @@ -36,4 +36,4 @@ scheduler.init('scheduler_here', new Date(2013,5,30),"month"); - [onViewMoreClick](api/event/onviewmoreclick.md) ### Related Guides -- [Месячный вид](views/month.md#limitingthenumberofeventsinacell) +- [Месячный вид](views/month.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/min_grid_size.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/min_grid_size.md index a4e3c9a4..33f14f74 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/min_grid_size.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/min_grid_size.md @@ -1,16 +1,16 @@ --- -sidebar_label: "min_grid_size" -title: "min_grid_size config" -description: "определяет минимальный размер, до которого может сжиматься Grid view при автоизменении размера" +sidebar_label: min_grid_size +title: "min_grid_size конфигурация" +description: "определяет минимально возможный размер Grid view во время авторезайза" --- # min_grid_size :::info - Эта функция доступна только в PRO-версии. + Эта функциональность доступна только в PRO версии. ::: ### Description -@short: Определяет минимальный размер, до которого может сжиматься Grid view при автоизменении размера +@short: Определяет минимально возможный размер Grid view во время авторезайза @signature: min_grid_size: number @@ -20,12 +20,12 @@ description: "определяет минимальный размер, до к scheduler.config.min_grid_size = 30; ~~~ -**Default value:** 25 +**Значение по умолчанию:** 25 ### Details :::note - Эта настройка работает только если активирован плагин [container_autoresize](guides/extensions-list.md#containerautoresize). + Свойство требует включённого плагина [container_autoresize](guides/extensions-list.md#container-autoresize) для включения. ::: ### Related API @@ -33,8 +33,8 @@ scheduler.config.min_grid_size = 30; - [min_map_size](api/config/min_map_size.md) ### Related Guides -- [Полный список расширений](guides/extensions-list.md#containerautoresize) -- [Грид View](views/grid.md) +- [Полный список расширений](guides/extensions-list.md#container-autoresize) +- [Grid View](views/grid.md) ### Change log -- добавлено в версии 4.4 +- добавлено в версии 4.4 \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/min_map_size.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/min_map_size.md index cd7c44be..9f463b3b 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/min_map_size.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/min_map_size.md @@ -1,14 +1,14 @@ --- -sidebar_label: "min_map_size" -title: "min_map_size config" -description: "определяет минимальный размер, до которого может сжиматься вид Map при автоподстройке размера" +sidebar_label: min_map_size +title: "конфигурация min_map_size" +description: "задаёт минимально возможный размер отображения карты во время autoresize" --- # min_map_size ### Description -@short: Определяет минимальный размер, до которого может сжиматься вид Map при автоподстройке размера +@short: Определяет минимально возможный размер вида карты во время autoresize @signature: min_map_size: number @@ -18,12 +18,12 @@ description: "определяет минимальный размер, до к scheduler.config.min_map_size = 450; ~~~ -**Default value:** 400 +**Значение по умолчанию:** 400 ### Details :::note - Это свойство работает только если активирован плагин [container_autoresize](guides/extensions-list.md#containerautoresize). + Свойство требует включённого плагина [container_autoresize](guides/extensions-list.md#container-autoresize) для корректной работы. ::: ### Related API @@ -31,8 +31,8 @@ scheduler.config.min_map_size = 450; - [min_grid_size](api/config/min_grid_size.md) ### Related Guides -- [Полный список расширений](guides/extensions-list.md#containerautoresize) +- [Full List of Extensions](guides/extensions-list.md#container-autoresize) - [Map View](views/map.md#map-related-configuration-options) ### Change log -- добавлено в версии 4.4 +- добавлено в версии 4.4 \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/minicalendar.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/minicalendar.md index f2e197a9..d619a052 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/minicalendar.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/minicalendar.md @@ -1,40 +1,38 @@ --- -sidebar_label: "minicalendar" -title: "minicalendar config" -description: "определяет объект миникалендаря" +sidebar_label: minicalendar +title: "конфигурация minicalendar" +description: "задает объект мини-календаря" --- # minicalendar -### Description +### Описание -@short: Определяет объект миникалендаря +@short: Задает объект мини-календаря @signature: minicalendar: any -### Example +### Пример ~~~jsx scheduler.config.minicalendar.mark_events = false; ... -scheduler.init('scheduler_here', new Date(2013, 7, 5), "week"); +scheduler.init('scheduler_here', new Date(2027, 7, 5), "week"); ~~~ -**Default value:** \{ mark_events: true \} +**Значение по умолчанию:** \{ mark_events: true \} -### Related samples +### Связанные образцы - [Terrace skin](https://docs.dhtmlx.com/scheduler/samples/07_skins/01_default.html) -### Details +### Подробности :::note - Это свойство требует включения плагина [minical](guides/extensions-list.md#minicalendardatepicker). + Свойство требует активированного плагина [minical](guides/extensions-list.md#mini-calendar-date-picker) для работы. ::: -Объект minicalendar содержит одно свойство: +Объект minicalendar имеет 1 свойство: -- **mark_events** - (*array*) определяет, будут ли события выделяться внутри миникалендаря +- **mark_events** - (*массив*) задаёт, будут ли события выделяться в мини-календаре -
- -![minicalendar_property](/img/minicalendar_property.png) +![minicalendar_property](/img/minicalendar_property.png) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/month_date.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/month_date.md index aa8e29f0..15568808 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/month_date.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/month_date.md @@ -1,14 +1,14 @@ --- -sidebar_label: "month_date" -title: "month_date config" -description: "Определяет формат заголовка вида Month" +sidebar_label: month_date +title: "month_date конфигурация" +description: "задает формат заголовка для представления «Месяц»" --- # month_date ### Description -@short: Определяет формат заголовка вида Month +@short: Задает формат заголовка для представления «Месяц» @signature: month_date: string @@ -17,16 +17,16 @@ description: "Определяет формат заголовка вида Mont ~~~jsx scheduler.config.month_date = "%F, %Y"; ... -scheduler.init('scheduler_here',new Date(2013,05,11),"week"); +scheduler.init('scheduler_here',new Date(2027,05,11),"week"); ~~~ -**Default value:** "%F %Y" +**Значение по умолчанию:** "%F %Y" -**Applicable views:** [Month view](views/month.md) +**Доступные представления:** [представление «Месяц»](views/month.md) ### Details ![monthView_properties](/img/monthView_properties.png) ### Related Guides -- [Спецификация формата даты](guides/settings-format.md) +- [Спецификация формата даты](guides/settings-format.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/month_day.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/month_day.md index db2dc225..e93a6f62 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/month_day.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/month_day.md @@ -1,14 +1,14 @@ --- -sidebar_label: "month_day" -title: "month_day config" -description: "определяет формат отображения дня в ячейках видов Month и Year" +sidebar_label: month_day +title: "month_day конфигурация" +description: "устанавливает формат дня в ячейках представлений Month и Year" --- # month_day ### Description -@short: Определяет формат отображения дня в ячейках видов Month и Year +@short: Устанавливает формат дня в ячейках представлений Month и Year @signature: month_day: string @@ -20,13 +20,13 @@ scheduler.config.month_day="%j"; scheduler.init('scheduler_here',new Date(2013,05,11),"week"); ~~~ -**Default value:** "%d" +**Значение по умолчанию:** "%d" -**Applicable views:** [Month view](views/month.md), [Year view](views/year.md) +**Доступные представления:** [Month view](views/month.md), [Year view](views/year.md) ### Details ![monthView_properties](/img/monthView_properties.png) ### Related Guides -- [Спецификация формата даты](guides/settings-format.md) +- [Спецификация формата даты](guides/settings-format.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/month_day_min_height.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/month_day_min_height.md index 399976c2..94967309 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/month_day_min_height.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/month_day_min_height.md @@ -1,14 +1,14 @@ --- -sidebar_label: "month_day_min_height" -title: "month_day_min_height config" -description: "задаёт минимальную высоту ячеек в Month view" +sidebar_label: month_day_min_height +title: "month_day_min_height конфигурация" +description: "устанавливает минимальную высоту ячеек в месячном виде" --- # month_day_min_height ### Description -@short: Задаёт минимальную высоту ячеек в Month view +@short: Устанавливает минимальную высоту ячеек в месячном виде @signature: month_day_min_height: number @@ -17,18 +17,18 @@ description: "задаёт минимальную высоту ячеек в Mon ~~~jsx scheduler.config.month_day_min_height = 150; ... -scheduler.init('scheduler_here', new Date(2013,5,30), "month"); +scheduler.init('scheduler_here',new Date(2027,5,30),"month"); ~~~ -**Default value:** 90 +**Значение по умолчанию:** 90 -**Applicable views:** [Month view](views/month.md) +**Доступные представления:** [месячный вид](views/month.md) ### Details :::note - Это свойство работает только если включён плагин [container_autoresize](guides/extensions-list.md#containerautoresize). + Свойство требует включённого плагина [container_autoresize](guides/extensions-list.md#container-autoresize) для корректной работы. ::: ### Related API -- [month_day](api/config/month_day.md) +- [month_day](api/config/month_day.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/multi_day.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/multi_day.md index e36a2121..f231f3d9 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/multi_day.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/multi_day.md @@ -1,14 +1,14 @@ --- -sidebar_label: "multi_day" -title: "multi_day config" -description: "позволяет отображать события, продолжающиеся несколько дней" +sidebar_label: multi_day +title: "Конфигурация multi_day" +description: "включает отображение много-дневных событий" --- # multi_day ### Description -@short: Позволяет отображать события, продолжающиеся несколько дней +@short: Включает отображение много-дневных событий @signature: multi_day: boolean @@ -17,16 +17,16 @@ description: "позволяет отображать события, продо ~~~jsx scheduler.config.multi_day = false; -scheduler.init('scheduler_here', new Date(2020,7,11), "week"); +scheduler.init('scheduler_here',new Date(2027,7,11),"week"); ~~~ -**Default value:** true +**Значение по умолчанию:** true -**Applicable views:** [Day view](views/day.md), [Week view](views/week.md), [Units view](views/units.md) +**Доступные представления:** [Day view](views/day.md), [Week view](views/week.md), [Units view](views/units.md) ### Related samples - [Basic initialization](https://docs.dhtmlx.com/scheduler/samples/01_initialization_loading/01_basic_init.html) - [Multi-day events](https://docs.dhtmlx.com/scheduler/samples/01_initialization_loading/06_multi_day_events.html) ### Related API -- [multi_day_height_limit](api/config/multi_day_height_limit.md) +- [multi_day_height_limit](api/config/multi_day_height_limit.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/multi_day_height_limit.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/multi_day_height_limit.md index a51f6e86..537aa06d 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/multi_day_height_limit.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/multi_day_height_limit.md @@ -1,14 +1,14 @@ --- -sidebar_label: "multi_day_height_limit" -title: "multi_day_height_limit config" -description: "управляет высотой секции, показывающей события, длящихся несколько дней" +sidebar_label: multi_day_height_limit +title: "Конфигурация multi_day_height_limit" +description: "устанавливает высоту области, отображающей события на несколько дней" --- # multi_day_height_limit ### Description -@short: Управляет высотой секции, показывающей события, длящихся несколько дней +@short: Устанавливает высоту области, отображающей события на несколько дней @signature: multi_day_height_limit: number | boolean @@ -20,16 +20,16 @@ scheduler.config.multi_day_height_limit = 30; scheduler.init('scheduler_here',new Date(2013,7,11),"week"); ~~~ -**Default value:** 200 +**Значение по умолчанию:** 200 -**Applicable views:** [Day view](views/day.md), [Week view](views/week.md), [Units view](views/units.md) +**Доступные представления:** [Day view](views/day.md), [Week view](views/week.md), [Units view](views/units.md) ### Details -Если используется как boolean, это свойство принимает только значение *false*. +Как значение типа boolean, свойство может принимать только значение *false*. ### Related API - [multi_day](api/config/multi_day.md) ### Change log -- изменено с `false` на `200` в версии v7.0.1 +- изменено с `false` на `200` в v7.0.1 \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/multisection.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/multisection.md index 045af2ef..d1f0d18f 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/multisection.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/multisection.md @@ -1,16 +1,16 @@ --- -sidebar_label: "multisection" -title: "multisection config" -description: "позволяет отображать одни и те же события в нескольких секциях в представлениях Timeline или Units" +sidebar_label: multisection +title: "конфигурация multisection" +description: "позволяет отображать те же события в нескольких секциях Timeline или Units view" --- # multisection :::info - Эта функция доступна только в PRO-версии. + Эта функциональность доступна только в PRO-версии. ::: ### Description -@short: Позволяет отображать одни и те же события в нескольких секциях в представлениях Timeline или Units +@short: Позволяет отображать одни и те же события в нескольких секциях Timeline или Units view @signature: multisection: boolean @@ -22,16 +22,16 @@ scheduler.config.multisection = true; scheduler.init('scheduler_here', new Date(2012, 5, 30), "timeline"); ~~~ -**Default value:** false +**Значение по умолчанию:** false -**Applicable views:** [Timeline view](views/timeline.md), [Units view](views/units.md) +**Доступные представления:** [Timeline view](views/timeline.md), [Units view](views/units.md) ### Related samples -- [Multisection events in Timeline and Units view](https://docs.dhtmlx.com/scheduler/samples/12_multisection_events/01_multisection_events.html) +- [События с несколькими секциями в Timeline и Units view](https://docs.dhtmlx.com/scheduler/samples/12_multisection_events/01_multisection_events.html) ### Related API - [multisection_shift_all](api/config/multisection_shift_all.md) ### Related Guides -- [Units View](views/units.md) -- [Вид 'Timeline'](views/timeline.md) +- [Units View](views/units.md#displaying-units-for-multiple-days) +- [Timeline View](views/timeline.md#assignment-of-events-to-several-sections) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/multisection_shift_all.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/multisection_shift_all.md index a9648417..637e5595 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/multisection_shift_all.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/multisection_shift_all.md @@ -1,16 +1,16 @@ --- -sidebar_label: "multisection_shift_all" -title: "multisection_shift_all config" -description: "управляет тем, перемещаются ли при перетаскивании событий, назначенных нескольким секциям в Timeline или Units view, все экземпляры одновременно ('true') или только выбранный ('false')" +sidebar_label: multisection_shift_all +title: "multisection_shift_all конфигурация" +description: "Указывает, следует ли при перетаскивании событий, назначенных нескольким секциям Timeline или Units view, все экземпляры должны перетаскиваться одновременно ('true') или только выбранный ('false')" --- # multisection_shift_all :::info - Эта функция доступна только в PRO-версии. + Эта функциональность доступна только в версии PRO. ::: ### Description -@short: Управляет тем, перемещаются ли при перетаскивании событий, назначенных нескольким секциям в Timeline или Units view, все экземпляры одновременно ('true') или только выбранный ('false') +@short: Определяет, должны ли при перетаскивании событий, назначенных нескольким секциям в Timeline или Units view, перетаскиваться все экземпляры сразу ('true') или только выбранный ('false') @signature: multisection_shift_all: boolean @@ -22,22 +22,22 @@ scheduler.config.multisection_shift_all = false; scheduler.init('scheduler_here', new Date(2012, 5, 30), "timeline"); ~~~ -**Default value:** true +**Значение по умолчанию:** true -**Applicable views:** [Timeline view](views/timeline.md), [Units view](views/units.md) +**Доступные представления:** [Timeline view](views/timeline.md), [Units view](views/units.md) ### Related samples -- [Multisection events in Timeline and Units view](https://docs.dhtmlx.com/scheduler/samples/12_multisection_events/01_multisection_events.html) +- [События в нескольких секциях в Timeline и Units view](https://docs.dhtmlx.com/scheduler/samples/12_multisection_events/01_multisection_events.html) ### Details :::note - Этот параметр применяется только при вертикальном перетаскивании событий (между секциями) + Свойство влияет только на перетаскивание событий вертикально (между секциями) ::: ### Related API - [multisection](api/config/multisection.md) ### Related Guides -- [Units View](views/units.md) -- [Вид 'Timeline'](views/timeline.md) +- [Units View](views/units.md#displaying-units-for-multiple-days) +- [Timeline View](views/timeline.md#assignment-of-events-to-several-sections) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/now_date.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/now_date.md index 4693eefe..4a9bc313 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/now_date.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/now_date.md @@ -1,35 +1,35 @@ --- -sidebar_label: "now_date" -title: "now_date config" -description: "устанавливает дату для маркера текущего времени в расширении Limit (активируется через конфигурацию - mark_now)" +sidebar_label: now_date +title: "конфигурация now_date" +description: "задает дату маркера текущего времени в расширении Limit (включено конфигурацией - mark_now)" --- # now_date ### Description -@short: Устанавливает дату для маркера текущего времени в расширении Limit (активируется через конфигурацию - mark_now) +@short: Задает дату для маркера текущего времени в расширении Limit (включено конфигурацией - mark_now) @signature: now_date: Date ### Example ~~~jsx -scheduler.config.now_date = new Date(2010, 7, 5); +scheduler.config.now_date = new Date(2027, 7, 5); ... -scheduler.init('scheduler_here', new Date(2010, 7, 5), "week"); +scheduler.init('scheduler_here', new Date(2027, 7, 5), "week"); ~~~ ### Details :::note - Это свойство работает только при включенном плагине [limit](guides/extensions-list.md#limit). + Сво́йство требует включенного плагина [limit](guides/extensions-list.md#limit) ::: -Этот параметр используется исключительно с расширением [Limit extension](guides/limits.md). - +Опция применяется только к [Limit extension](guides/limits.md). + ### Related API - [mark_now](api/config/mark_now.md) ### Related Guides -- [Блокировка и выделение дат](guides/limits.md) +- [Блокировка и пометка дат](guides/limits.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/occurrence_timestamp_in_utc.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/occurrence_timestamp_in_utc.md index 443b0ad5..bbb43a56 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/occurrence_timestamp_in_utc.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/occurrence_timestamp_in_utc.md @@ -1,14 +1,14 @@ --- -sidebar_label: "occurrence_timestamp_in_utc" +sidebar_label: occurrence_timestamp_in_utc title: "occurrence_timestamp_in_utc config" -description: "позволяет работать с повторяющимися событиями без необходимости учитывать часовые пояса" +description: "позволяет работать с повторяющимися событиями независимо от часовых поясов" --- # occurrence_timestamp_in_utc ### Description -@short: Позволяет работать с повторяющимися событиями без необходимости учитывать часовые пояса +@short: Позволяет работать с повторяющимися событиями независимо от часовых поясов @signature: occurrence_timestamp_in_utc: boolean @@ -20,22 +20,22 @@ scheduler.config.occurrence_timestamp_in_utc = true; scheduler.init('scheduler_here',new Date(2013,05,11),"week"); ~~~ -**Default value:** false +**Значение по умолчанию:** false ### Details :::note - Это свойство требует активации расширения [recurring](guides/extensions-list.md#recurring). + Свойство требует включения расширения [recurring](guides/extensions-list.md#recurring). ::: :::note -Внимание! Эта опция предназначена для schedulers, которые только начинают работать и в которых ещё нет повторяющихся событий. -Включение этой опции в schedulers с уже существующими повторяющимися событиями может вызвать проблемы. +Внимание! Параметр предназначен для только что созданных планировщиков без существующих повторяющихся событий. +Применение к планировщику, у которого уже есть повторяющиеся события, приведёт к их сбою. ::: -- При включении временные метки событий сохраняются в формате UNIX time. -- Эта опция доступна начиная с версии 3.5. +- Если параметр включён, временные метки событий сохраняются как UNIX-время. +- Опция доступна начиная с версии 3.5. ### Related Guides -- [Повторяющиеся события](guides/recurring-events.md) +- [Повторяющиеся события](guides/recurring-events.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/overwrite_marked_timespans.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/overwrite_marked_timespans.md index 98bb4ae5..7ebf0305 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/overwrite_marked_timespans.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/overwrite_marked_timespans.md @@ -1,14 +1,14 @@ --- -sidebar_label: "overwrite_marked_timespans" -title: "overwrite_marked_timespans config" -description: "управляет приоритетом блокировки для отмеченных временных интервалов" +sidebar_label: overwrite_marked_timespans +title: "overwrite_marked_timespans конфигурация" +description: "включает приоритет блокирования помеченных временных интервалов" --- # overwrite_marked_timespans ### Description -@short: Управляет приоритетом блокировки для отмеченных временных интервалов +@short: Включает приоритет блокирования помеченных временных интервалов @signature: overwrite_marked_timespans: boolean @@ -18,22 +18,22 @@ description: "управляет приоритетом блокировки д scheduler.config.overwrite_marked_timespans = false; ~~~ -**Default value:** true +**Значение по умолчанию:** true ### Details -Отмеченные временные интервалы имеют разные уровни приоритетов в зависимости от их настроек. -Когда несколько отмеченных временных интервалов с разными приоритетами перекрываются в одной области scheduler, -по умолчанию отображаются только маркеры с самым высоким приоритетом. +Помеченные временные диапазоны имеют разный приоритет в зависимости от их настроек. +Когда несколько помеченных временных диапазонов разного приоритета находятся внутри одного раздела планировщика, +по умолчанию будут отображаться только маркеры с наивысшим приоритетом. -Отключение этой опции позволит видеть все установленные маркеры: +Отключите эту настройку, чтобы изменить поведение и отображать все заданные маркеры: ~~~js scheduler.config.overwrite_marked_timespans = false; ~~~ ### Related Guides -- [Блокировка и выделение дат](guides/limits.md#blockingpriority) +- [Блокирование и пометка дат](guides/limits.md#blocking-priority) ### Change log -- добавлено в версии v6.0 +- добавлено в v6.0 \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/parse_exact_format.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/parse_exact_format.md index 91266301..7c7c1d3e 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/parse_exact_format.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/parse_exact_format.md @@ -1,14 +1,14 @@ --- -sidebar_label: "parse_exact_format" +sidebar_label: parse_exact_format title: "parse_exact_format config" -description: "управляет строгим соответствием формата даты при разборе в scheduler" +description: "определяет, будет ли планировщик автоматически распознавать формат данных" --- # parse_exact_format ### Description -@short: Управляет строгим соответствием формата даты при разборе в scheduler +@short: Определяет, будет ли планировщик автоматически распознавать формат данных @signature: parse_exact_format: boolean @@ -16,39 +16,39 @@ description: "управляет строгим соответствием фо ~~~jsx scheduler.config.parse_exact_format = true; -var parseDate = scheduler.date.str_to_date("%Y-%m-%d %H:%i"); +const parseDate = scheduler.date.str_to_date("%Y-%m-%d %H:%i"); // строка с датой должна точно соответствовать указанному формату -parseDate("2019-01-15 12:00"); -// -> Tue Jan 15 2019 12:00:00 +parseDate("2027-01-15 12:00"); +// -> Tue Jan 15 2027 12:00:00 -parseDate("15-01-2019 12:00"); -// -> Sun Jul 11 1920 12:00:00 +parseDate("15-01-2027 12:00"); +// -> Sun Jul 11 2720 12:00:00 -parseDate("2019-01-15T12:00"); +parseDate("2027-01-15T12:00"); // -> Invalid Date scheduler.config.parse_exact_format = false; -var parseDate = scheduler.date.str_to_date("%Y-%m-%d %H:%i"); +const parseDate = scheduler.date.str_to_date("%Y-%m-%d %H:%i"); // scheduler пытается распознать формат переданной строки с датой -parseDate("2019-01-15 12:00"); -// -> Tue Jan 15 2019 12:00:00 +parseDate("2027-01-15 12:00"); +// -> Tue Jan 15 2027 12:00:00 -parseDate("15-01-2019 12:00"); -// -> Tue Jan 15 2019 12:00:00 +parseDate("15-01-2027 12:00"); +// -> Tue Jan 15 2027 12:00:00 -parseDate("2019-01-15T12:00"); -// -> Tue Jan 15 2019 12:00:00 +parseDate("2027-01-15T12:00"); +// -> Tue Jan 15 2027 12:00:00 ~~~ -**Default value:** false +**Значение по умолчанию:** false ### Details -По умолчанию Scheduler пытается автоматически определить формат дат, передаваемых в метод [scheduler.date.str_to_date()](api/other/date.md). -Если вы хотите обеспечить строгий разбор даты согласно формату, предоставленному пользователем, включите опцию **parse_exact_format**, установив её в *true*. +По умолчанию Scheduler пытается автоматически определить формат дат, переданных пользователем для парсинга (во встроенном методе [scheduler.date.str_to_date()](api/other/date.md)). +Если вы хотите применить точный формат, указанный пользователем во время парсинга, включите конфигурацию **parse_exact_format**, установив её в *true*. ### Related Guides -- [Операции с датами](guides/date-formats.md) +- [Операции с датами](guides/date-formats.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/positive_closing.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/positive_closing.md index c238dd1a..bc3e6d41 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/positive_closing.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/positive_closing.md @@ -1,14 +1,14 @@ --- -sidebar_label: "positive_closing" +sidebar_label: positive_closing title: "positive_closing config" -description: "управляет поведением сохранения при прямом редактировании текста события внутри его блока" +description: "определяет поведение 'saving' в случае, когда пользователь редактирует текст события напрямую в окне события" --- # positive_closing ### Description -@short: Управляет поведением сохранения при прямом редактировании текста события внутри его блока +@short: Определяет поведение 'saving' в случае, когда пользователь редактирует текст события непосредственно в окне события @signature: positive_closing: boolean @@ -17,15 +17,16 @@ description: "управляет поведением сохранения пр ~~~jsx scheduler.config.positive_closing = true; ... -scheduler.init('scheduler_here', new Date(2013,05,11), "week"); +scheduler.init('scheduler_here',new Date(2027,05,11),"week"); ~~~ -**Default value:** false +**Значение по умолчанию:** false -**Applicable views:** [Day view](views/day.md), [Week view](views/week.md), [Units view](views/units.md) +**Доступные представления:** [Day view](views/day.md), [Week view](views/week.md), [Units view](views/units.md) ### Details -Нажатие кнопки редактирования в select bar открывает форму для редактирования текста события. Обычно, клик вне формы закрывает её и отменяет все изменения. Установка этой опции в *true* гарантирует, что изменения сохранятся вместо отмены при клике вне формы. +Щелчок по кнопке редактирования на панели выбора открывает форму редактирования текста события. +Любой клик за пределами формы закрывает её и отменяет изменения. Чтобы предотвратить это и сохранить изменения, внесённые в форму, установите опцию в *true*. -![positiveClosing_property](/img/positiveClosing_property.png) +![positiveClosing_property](/img/positiveClosing_property.png) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/preserve_length.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/preserve_length.md index 7ad30fd6..55de225f 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/preserve_length.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/preserve_length.md @@ -1,14 +1,14 @@ --- -sidebar_label: "preserve_length" -title: "preserve_length config" -description: "сохраняет видимую длину события неизменной при его перетаскивании по нелинейной временной шкале" +sidebar_label: preserve_length +title: "конфигурация preserve_length" +description: "сохраняет видимую длину события при перетаскивании вдоль нелинейной шкалы времени" --- # preserve_length ### Description -@short: Сохраняет видимую длину события неизменной при его перетаскивании по нелинейной временной шкале +@short: Сохраняет видимую длину события при перетаскивании вдоль нелинейной шкалы времени @signature: preserve_length: boolean @@ -18,13 +18,13 @@ description: "сохраняет видимую длину события неи scheduler.config.preserve_length = true; ~~~ -**Default value:** true +**Значение по умолчанию:** true -**Applicable views:** [Month view](views/month.md), [Timeline view](views/timeline.md) +**Доступные представления:** [Месячный просмотр](views/month.md), [таймлайн](views/timeline.md) ### Details Этот режим включен по умолчанию. -При активном режиме событие сохраняет свою видимую длину во время drag-and-drop, а не фактическую длину, определяемую датами начала и окончания. -
Например, если в Month view отображается событие длительностью два дня, а выходные скрыты, перетаскивание события так, чтобы оно охватывало пятницу и понедельник, приведет к реальной длительности в 4 дня между началом и концом. Однако scheduler сохранит видимую длину на уровне 2 дней. +Когда режим включен, событие сохраняет видимую длину, вместо фактической длины (определяемой датами начала и окончания) во время операции перетаскивания. +
Допустим, что у вас есть двухдневное событие в режиме просмотра месяца, а выходные скрыты. Если перетащить событие и разместить его так, чтобы оно занимало пятницу и понедельник, реальная разница между началом и концом дня будет 4 дня, но планировщик сохранит видимую длину — 2 дня. \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/preserve_scroll.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/preserve_scroll.md index be4c2a4d..25d7c00f 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/preserve_scroll.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/preserve_scroll.md @@ -1,14 +1,14 @@ --- -sidebar_label: "preserve_scroll" -title: "preserve_scroll config" -description: "отключает сохранение текущей позиции скролла при переключении между датами в одном и том же вью" +sidebar_label: preserve_scroll +title: "конфигурация preserve_scroll" +description: "отменяет сохранение текущей позиции прокрутки при переходе между датами одного и того же представления" --- # preserve_scroll ### Description -@short: Отключает сохранение текущей позиции скролла при переключении между датами в одном и том же вью +@short: Отменяет сохранение текущей позиции прокрутки при переходе между датами одного и того же представления @signature: preserve_scroll: boolean @@ -17,14 +17,14 @@ description: "отключает сохранение текущей позиц ~~~jsx scheduler.config.preserve_scroll = false; ... -scheduler.init('scheduler_here', new Date(2013,05,11), "week"); +scheduler.init('scheduler_here',new Date(2027,05,11),"week"); ~~~ -**Default value:** true +**Значение по умолчанию:** true -**Applicable views:** [Day view](views/day.md), [Week view](views/week.md), [Units view](views/units.md) +**Доступные представления:** [Day view](views/day.md), [Week view](views/week.md), [Units view](views/units.md) ### Details -- Эта опция доступна начиная с версии 3.0. -- Применяется, когда пользователь изменяет даты внутри вью
используя navigation panel -> ![navigation_panel](/img/navigation_panel.png). +- Свойство доступно начиная с версии 3.0. +- Свойство относится к случаям, когда пользователь переходит к датам отображения
через эту панель навигации -> ![navigation_panel](/img/navigation_panel.png). \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/prevent_cache.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/prevent_cache.md index 928afe29..267a1745 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/prevent_cache.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/prevent_cache.md @@ -1,14 +1,14 @@ --- -sidebar_label: "prevent_cache" -title: "prevent_cache config" -description: "Управляет включением или отключением кеширования GET-запросов в браузере" +sidebar_label: prevent_cache +title: "prevent_cache конфигурация" +description: "Включает/выключает кэширование GET-запросов в браузере" --- # prevent_cache ### Description -@short: Управляет включением или отключением кеширования GET-запросов в браузере +@short: Включает/выключает кэширование GET-запросов в браузере @signature: prevent_cache: boolean @@ -17,14 +17,14 @@ description: "Управляет включением или отключени ~~~jsx scheduler.config.prevent_cache = true; ... -scheduler.init('scheduler_here',new Date(2009,10,1),"month"); +scheduler.init('scheduler_here',new Date(2027,10,1),"month"); ~~~ -**Default value:** false +**Значение по умолчанию:** false ### Related samples -- [Loading data from a database](https://docs.dhtmlx.com/scheduler/samples/01_initialization_loading/05_loading_database.html) +- [Загрузка данных из базы данных](https://docs.dhtmlx.com/scheduler/samples/01_initialization_loading/05_loading_database.html) ### Details -В большинстве случаев рекомендуется включать это свойство. +Рекомендуется включать данное свойство. \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/quick_info_detached.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/quick_info_detached.md index 2a91609c..225175d6 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/quick_info_detached.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/quick_info_detached.md @@ -1,14 +1,14 @@ --- -sidebar_label: "quick_info_detached" -title: "quick_info_detached config" -description: "управляет тем, будет ли форма события появляться с левой/правой стороны экрана или непосредственно рядом с выбранным событием" +sidebar_label: quick_info_detached +title: "конфигурация quick_info_detached" +description: "задаёт, будет ли форма события появляться слева/справа от экрана или рядом с выбранным событием" --- # quick_info_detached ### Description -@short: Управляет тем, будет ли форма события появляться с левой/правой стороны экрана или непосредственно рядом с выбранным событием +@short: Определяет, будет ли форма события появляться слева или справа от экрана или около выбранного события @signature: quick_info_detached: boolean @@ -17,19 +17,19 @@ description: "управляет тем, будет ли форма событи ~~~jsx scheduler.config.quick_info_detached = false; ... -scheduler.init('scheduler_here',new Date(2013,5,30),"day"); +scheduler.init('scheduler_here',new Date(2027,5,30),"day"); ~~~ -**Default value:** true (форма события будет отображаться рядом с выбранным событием) +**Значение по умолчанию:** true (форма события будет появляться рядом с выбранным событием) ### Related samples -- [Touch-oriented scheduler](https://docs.dhtmlx.com/scheduler/samples/03_extensions/29_quick_info.html) -- [Touch-oriented scheduler. Managing the event form position](https://docs.dhtmlx.com/scheduler/samples/03_extensions/30_quick_info_detached.html) +- [Сенсорный планировщик](https://docs.dhtmlx.com/scheduler/samples/03_extensions/29_quick_info.html) +- [Сенсорный планировщик. Управление позицией формы события](https://docs.dhtmlx.com/scheduler/samples/03_extensions/30_quick_info_detached.html) ### Details :::note - Это свойство требует включения плагина [quick_info](guides/extensions-list.md#quickinfo). + Свойство требует активации плагина [quick_info](guides/extensions-list.md#quick-info). ::: ### Related API @@ -39,5 +39,5 @@ scheduler.init('scheduler_here',new Date(2013,5,30),"day"); - [onQuickInfo](api/event/onquickinfo.md) ### Related Guides -- [Мобильная адаптивность Scheduler](guides/touch-support.md) -- [Полный список расширений](guides/extensions-list.md#quickinfo) +- [Мобильный адаптивный планировщик](guides/touch-support.md) +- [Полный список расширений](guides/extensions-list.md#quick-info) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/readonly.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/readonly.md index 0ce28cfc..fc3bb775 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/readonly.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/readonly.md @@ -1,7 +1,7 @@ --- -sidebar_label: "readonly" +sidebar_label: readonly title: "readonly config" -description: "включает режим только для чтения в scheduler" +description: "активирует режим только для чтения в планировщике" --- # readonly @@ -17,13 +17,13 @@ description: "включает режим только для чтения в sc ~~~jsx scheduler.config.readonly = true; ... -scheduler.init('scheduler_here',new Date(2013,05,11),"week"); +scheduler.init('scheduler_here',new Date(2027,05,11),"week"); ~~~ -**Default value:** false +**Значение по умолчанию:** false ### Related API - [readonly_form](api/config/readonly_form.md) ### Related Guides -- [Режим только для чтения](guides/readonly.md) +- [Режим только для чтения](guides/readonly.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/readonly_form.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/readonly_form.md index 50fe1585..d2447267 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/readonly_form.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/readonly_form.md @@ -1,14 +1,14 @@ ---- -sidebar_label: "readonly_form" -title: "readonly_form config" -description: "включает режим только для чтения для лайтбокса" ---- +--- +sidebar_label: readonly_form +title: "readonly_form конфигурация" +description: "активирует режим только для чтения для lightbox" +--- # readonly_form ### Description -@short: Включает режим только для чтения для лайтбокса +@short: Активирует режим только для чтения для lightbox @signature: readonly_form: boolean @@ -17,22 +17,22 @@ description: "включает режим только для чтения дл ~~~jsx scheduler.config.readonly_form = true; ... -scheduler.init('scheduler_here',new Date(2013,05,11),"month"); -~~~ +scheduler.init('scheduler_here',new Date(2027,05,11),"month"); +~~~ -**Default value:** false +**Значение по умолчанию:** false ### Related samples -- [Read-only lightbox](https://docs.dhtmlx.com/scheduler/samples/03_extensions/12_readonly_form.html) +- [Lightbox только для чтения](https://docs.dhtmlx.com/scheduler/samples/03_extensions/12_readonly_form.html) ### Details :::note - Это свойство требует активного плагина [readonly](guides/extensions-list.md#readonly). + Свойство требует, чтобы был включён плагин [readonly](guides/extensions-list.md#readonly). ::: ### Related API - [readonly](api/config/readonly.md) ### Related Guides -- [Режим только для чтения](guides/readonly.md) +- [Режим только для чтения](guides/readonly.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/recurring_overflow_instances.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/recurring_overflow_instances.md index fd1fc733..ab807709 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/recurring_overflow_instances.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/recurring_overflow_instances.md @@ -1,16 +1,16 @@ --- -sidebar_label: "recurring_overflow_instances" -title: "recurring_overflow_instances config" -description: "управляет обработкой повторений, выходящих за пределы текущего месяца" +sidebar_label: recurring_overflow_instances +title: "конфигурация recurring_overflow_instances" +description: "определяет поведение повторов, которые переносятся на следующий месяц" --- # recurring_overflow_instances -:::warning -Это свойство работает только с устаревшим расширением для повторяющихся событий. -::: +:::warning +Свойство работает только в устаревшем extension для повторяющихся событий +::: ### Description -@short: Управляет обработкой повторений, выходящих за пределы текущего месяца +@short: Определяет поведение повторов, которые переходят к следующему месяцу @signature: recurring_overflow_instances: string @@ -20,21 +20,21 @@ description: "управляет обработкой повторений, вы scheduler.config.recurring_overflow_instances = "lastDay"; ~~~ -**Default value:** undefined +**Значение по умолчанию:** undefined ### Details :::note - Для использования этого свойства необходимо активировать расширение [recurring](guides/extensions-list.md#recurring). + Свойство требует включенного extension [recurring](guides/extensions-list.md#recurring). ::: -Рассмотрим событие, запланированное на 30-е число каждого месяца, и как оно ведет себя в феврале при различных настройках: +Возьмем событие, которое происходит каждый месяц 30-го числа, и рассмотрим его поведение в феврале для каждого варианта: -- **"skip"** - событие на несуществующую дату пропускается. *То есть, в феврале событие не произойдет.* -- **"lastDay"** - событие на несуществующую дату переносится на последний день месяца. *В этом случае оно произойдет 28 февраля.* -- **"none"** - событие на несуществующую дату переносится на первый день следующего месяца. *Здесь событие состоится 1 марта.* +- **"skip"** - пропускает событие, которое приходится на дату, которая не существует. *Событие будет пропущено в феврале.* +- **"lastDay"** - перемещает событие, происходящее в несуществующую дату, на последний день месяца. *Событие произойдет 28 февраля.* +- **"none"** - перемещает событие, происходящее в несуществующую дату, на первый день следующего месяца. *Событие произойдет 1 марта.* -Если опция не задана, по умолчанию используется поведение "skip". +Если опция не определена, будет применено поведение "skip". ### Change log -- добавлено в версии v5.3.11 +- добавлено в версии v5.3.11 \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/recurring_workdays.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/recurring_workdays.md index f23a2c4c..60cbb3c4 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/recurring_workdays.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/recurring_workdays.md @@ -1,14 +1,14 @@ ---- -sidebar_label: "recurring_workdays" -title: "recurring_workdays config" -description: "определяет, какие дни считаются рабочими для повторяющихся событий при выборе опции 'Every workday' в lightbox." +--- +sidebar_label: recurring_workdays +title: "Конфигурация recurring_workdays" +description: "указывается рабочие дни, которые будут влиять на повторяющееся событие, когда пользователь выбирает опцию ''Every workday' в окне lightbox" --- # recurring_workdays ### Description -@short: Определяет, какие дни считаются рабочими для повторяющихся событий при выборе опции "Every workday" в lightbox. +@short: Указывает рабочие дни, которые будут влиять на повторяющееся событие, когда пользователь выбирает опцию ""Every workday" в окне lightbox @signature: recurring_workdays: any[] @@ -19,12 +19,12 @@ description: "определяет, какие дни считаются раб scheduler.config.recurring_workdays = [2, 3, 4, 5]; ~~~ -**Default value:** [1, 2, 3, 4, 5] +**Значение по умолчанию:** [1, 2, 3, 4, 5] ### Details :::note - Для использования этой настройки необходимо включить расширение [recurring](guides/extensions-list.md#recurring). + Свойство требует включения расширения [recurring](guides/extensions-list.md#recurring). ::: -![recurringworkdays_config](/img/recurringworkdays_config.png) +![recurringworkdays_config](/img/recurringworkdays_config.png) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/repeat_date.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/repeat_date.md index 01b9ce6f..f7f7a973 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/repeat_date.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/repeat_date.md @@ -1,14 +1,14 @@ --- -sidebar_label: "repeat_date" -title: "repeat_date config" -description: "задаёт формат даты, используемый в поле 'End by' внутри лайтбокса 'recurring'" +sidebar_label: repeat_date +title: "Конфигурация repeat_date" +description: "устанавливает формат даты поля 'End by' во всплывающем окне 'recurring'" --- # repeat_date ### Description -@short: Задаёт формат даты, используемый в поле 'End by' внутри лайтбокса 'recurring' +@short: Устанавливает формат даты поля 'End by' во всплывающем окне 'recurring' @signature: repeat_date: string @@ -17,21 +17,21 @@ description: "задаёт формат даты, используемый в п ~~~jsx scheduler.config.repeat_date = "%m/%d/%Y"; ... -scheduler.init('scheduler_here',new Date(2019,05,11),"month"); +scheduler.init('scheduler_here',new Date(2027,05,11),"month"); ~~~ -**Default value:** "%m.%d.%Y" +**Значение по умолчанию:** "%m.%d.%Y" ### Details :::note - Это свойство требует активации расширения [recurring](guides/extensions-list.md#recurring). +Свойство требует включённого расширения [recurring](guides/extensions-list.md#recurring). ::: -По умолчанию дата, введённая в поле 'End by', считается исключающей. +По умолчанию дата в поле 'End by' является исключительной. ### Related API - [include_end_by](api/config/include_end_by.md) ### Related Guides -- [Повторяющиеся события](guides/recurring-events.md) +- [Recurring Events](guides/recurring-events.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/repeat_precise.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/repeat_precise.md index f2218c88..7c8b77bb 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/repeat_precise.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/repeat_precise.md @@ -1,14 +1,14 @@ --- -sidebar_label: "repeat_precise" -title: "repeat_precise config" -description: "прекращает включать прошедшие дни в события с повторением 'weekly'" +sidebar_label: repeat_precise +title: "repeat_precise конфигурация" +description: "предотвращает включение прошлых дней в события с повторением 'weekly'" --- # repeat_precise ### Description -@short: Прекращает включать прошедшие дни в события с повторением 'weekly' +@short: Предотвращает включение прошлых дней в события с повторением 'weekly' @signature: repeat_precise: boolean @@ -18,22 +18,21 @@ description: "прекращает включать прошедшие дни в scheduler.config.repeat_precise = true; ~~~ -**Default value:** false +**Значение по умолчанию:** false ### Details :::note - Свойство требует включения расширения [recurring](guides/extensions-list.md#recurring). + Свойство требует включения расширения [recurring](guides/extensions-list.md#recurring) для активации. ::: -По умолчанию, когда задано повторение 'weekly', scheduler добавляет текущую неделю к повторению, -независимо от того, создано ли событие после, между или до указанных дней.
+По умолчанию, когда пользователь задаёт повторение 'weekly', планировщик включает текущую неделю в это повторение, +независимо от того, создаёт ли пользователь событие после, между или до включённых дня(-ей).
-Например, если событие создано в четверг и настроено на повторение по понедельникам и средам, -то событие будет включать понедельник и среду текущей недели, даже если эти дни уже прошли. +Например, пользователь создаёт событие в четверг и устанавливает повторение 'weekly' на понедельник и среду. +Сохранённое событие будет содержать текущую неделю, то есть прошедшие понедельник и среда, даже если событие было создано в четверг. -Когда опция **repeat_precise** установлена в *true*, дата начала повторяющегося события -будет датой первого фактического повторения, то есть в нашем примере это будет понедельник следующей недели. +Если вы установите опцию **repeat_precise** в значение *true*, дата начала повторяющегося события будет датой первого фактического наступления, то есть в нашем примере это будет понедельник следующей недели. ### Related Guides -- [Повторяющиеся события](guides/recurring-events.md) +- [Повторяющиеся события](guides/recurring-events.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/resize_month_events.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/resize_month_events.md index 66d23bc9..ef5fdc9e 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/resize_month_events.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/resize_month_events.md @@ -1,14 +1,14 @@ --- -sidebar_label: "resize_month_events" -title: "resize_month_events config" -description: "позволяет изменять размер событий, продолжающихся несколько дней, в представлении Месяц с помощью drag-and-drop" +sidebar_label: resize_month_events +title: "Конфигурация resize_month_events" +description: "Позволяет изменять размер многодневных событий в месячном представлении с помощью перетаскивания" --- # resize_month_events ### Description -@short: Позволяет изменять размер событий, продолжающихся несколько дней, в представлении Месяц с помощью drag-and-drop +@short: Позволяет изменять размер многодневных событий в месячном представлении с помощью перетаскивания @signature: resize_month_events: boolean @@ -17,15 +17,15 @@ description: "позволяет изменять размер событий, ~~~jsx scheduler.config.resize_month_events = true; -scheduler.init('scheduler_here', new Date(2010,0,10), "month"); +scheduler.init('scheduler_here',new Date(2027,0,10),"month"); ~~~ -**Default value:** false +**Значение по умолчанию:** false -**Applicable views:** [Month view](views/month.md) +**Доступные представления:** [Месячное представление](views/month.md) ### Related samples -- [Resizable events in Month view](https://docs.dhtmlx.com/scheduler/samples/02_customization/32_resizable_month_events.html) +- [Изменяемые события в Месячном представлении](https://docs.dhtmlx.com/scheduler/samples/02_customization/32_resizable_month_events.html) ### Details @@ -35,4 +35,4 @@ scheduler.init('scheduler_here', new Date(2010,0,10), "month"); - [resize_month_timed](api/config/resize_month_timed.md) ### Related Guides -- [Месячный вид](views/month.md) +- [Месячное представление](views/month.md#resizing-events-by-drag-n-drop-ver-41) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/resize_month_timed.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/resize_month_timed.md index 3b7c15a9..b185715c 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/resize_month_timed.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/resize_month_timed.md @@ -1,14 +1,14 @@ --- -sidebar_label: "resize_month_timed" -title: "resize_month_timed config" -description: "позволяет изменять размер событий, продолжающихся один день, в Month view с помощью drag-and-drop" +sidebar_label: resize_month_timed +title: "Настройки resize_month_timed" +description: "позволяет изменять размер однодневных событий во Месячном просмотре перетаскиванием мыши" --- # resize_month_timed ### Description -@short: Позволяет изменять размер событий, продолжающихся один день, в Month view с помощью drag-and-drop +@short: Позволяет изменять размер однодневных событий во Месячном просмотре перетаскиванием мыши @signature: resize_month_timed: boolean @@ -18,19 +18,19 @@ description: "позволяет изменять размер событий, scheduler.config.resize_month_events = true; /*!*/ scheduler.config.resize_month_timed = true; /*!*/ -scheduler.init('scheduler_here',new Date(2010,0,10),"month"); +scheduler.init('scheduler_here',new Date(2027,0,10),"month"); ~~~ -**Default value:** false +**Значение по умолчанию:** false -**Applicable views:** [Month view](views/month.md) +**Доступные представления:** [Месячный просмотр](views/month.md) ### Details **Обратите внимание:** -- Это свойство работает только при включенной опции [resize_month_events](api/config/resize_month_events.md). -- После включения события, продолжающиеся один день, будут иметь обновленный внешний вид, как показано на изображении: +- Свойство имеет смысл только при включенном свойстве [resize_month_events](api/config/resize_month_events.md). +- При включении свойства однодневные события меняют внешний вид, как на рисунке: ![resizemonthtimed_config](/img/resizemonthtimed_config.png) @@ -38,4 +38,4 @@ scheduler.init('scheduler_here',new Date(2010,0,10),"month"); - [resize_month_events](api/config/resize_month_events.md) ### Related Guides -- [Месячный вид](views/month.md) +- [Месячный просмотр](views/month.md#resizing-events-by-drag-n-drop-ver-41) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/responsive_lightbox.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/responsive_lightbox.md index b5b0d8dc..36ae42aa 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/responsive_lightbox.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/responsive_lightbox.md @@ -1,14 +1,14 @@ --- -sidebar_label: "responsive_lightbox" -title: "responsive_lightbox config" -description: "позволяет lightbox плавно адаптироваться под меньшие экраны" +sidebar_label: responsive_lightbox +title: "конфигурация responsive_lightbox" +description: "делает lightbox адаптивным на маленьких экранах" --- # responsive_lightbox ### Description -@short: Позволяет lightbox плавно адаптироваться под меньшие экраны +@short: Делает lightbox адаптивным на маленьких экранах @signature: responsive_lightbox: boolean @@ -18,24 +18,24 @@ description: "позволяет lightbox плавно адаптировать scheduler.config.responsive_lightbox = true; ~~~ -**Default value:** false +**Значение по умолчанию:** false ### Details -Включение этой опции (по умолчанию выключена) добавляет CSS класс `.dhx_cal_light_responsive` к lightbox. +Когда эта конфигурация включена (по умолчанию она выключена), у lightbox появится дополнительный CSS-класс `.dhx_cal_light_responsive`. -Все встроенные скины scheduler содержат media queries, которые помогают lightbox корректно адаптироваться под меньшие экраны. Это означает: +Все встроенные скины планировщика имеют предопределенные медиа-запросы, которые делают lightbox адаптивным на меньших экранах, что означает, что: -- на мобильных устройствах lightbox растягивается на весь экран -- метки и элементы управления изменяют размер, чтобы правильно вписаться в экран +- lightbox займет весь экран на мобильном устройстве +- все подписи и элементы управления должны быть подобраны по размеру к размеру экрана ![lightbox_responsive](/img/lightbox_responsive.png) -Чтобы активировать эту функцию, просто установите конфигурацию так: +Если вы хотите включить такое поведение, можно включить конфигурацию следующим образом: ~~~js scheduler.config.responsive_lightbox = true; ~~~ ### Related Guides -- [Мобильная адаптивность Scheduler](guides/touch-support.md) +- [- [Мобильный адаптивный планировщик](guides/touch-support.md)](guides/touch-support.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/rtl.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/rtl.md index ee4fa976..5be5a7ef 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/rtl.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/rtl.md @@ -1,14 +1,14 @@ --- -sidebar_label: "rtl" -title: "rtl config" -description: "включает режим RTL (right-to-left) для scheduler" +sidebar_label: rtl +title: "Конфигурация RTL" +description: "включает режим RTL (справа налево) для планировщика" --- # rtl ### Description -@short: Включает режим RTL (right-to-left) для scheduler +@short: Включает режим RTL (справа налево) для планировщика @signature: rtl: boolean @@ -17,17 +17,17 @@ description: "включает режим RTL (right-to-left) для scheduler" ~~~jsx scheduler.config.rtl = true; ... -scheduler.init('scheduler_here',new Date(2018,0,1),"week"); +scheduler.init('scheduler_here',new Date(2027,0,1),"week"); ~~~ -**Default value:** false +**Значение по умолчанию:** false ### Related samples -- [Basic initialization](https://docs.dhtmlx.com/scheduler/samples/14_rtl/01_basic_init.html) +- [Базовая инициализация](https://docs.dhtmlx.com/scheduler/samples/14_rtl/01_basic_init.html) ### Details ![rtl](/img/rtl.png) ### Related Guides -- [RTL (Справа налево) режим](guides/rtl-mode.md) +- [RTL (Right-to-left) режим](guides/rtl-mode.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/scroll_hour.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/scroll_hour.md index 1a9325a9..e7266969 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/scroll_hour.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/scroll_hour.md @@ -1,18 +1,18 @@ --- -sidebar_label: "scroll_hour" +sidebar_label: scroll_hour title: "scroll_hour config" -description: "определяет начальную вертикальную позицию прокрутки в scheduler, основанную на часе в 24-часовом формате." +description: "устанавливает исходное положение вертикальной прокрутки в планировщике (один час в формате 24-часового времени)" --- # scroll_hour -### Description +### Описание -@short: Определяет начальную вертикальную позицию прокрутки в scheduler, основанную на часе в 24-часовом формате. +@short: Устанавливает исходное положение вертикальной прокрутки в планировщике (один час в формате 24-часового времени) @signature: scroll_hour: number -### Example +### Пример ~~~jsx // scheduler изначально покажет текущий день, прокрученный до текущего часа @@ -21,6 +21,6 @@ scheduler.config.scroll_hour = new Date().getHours(); scheduler.init('scheduler_here', new Date(), "week"); ~~~ -**Default value:** 0 (означает, что scheduler отображает шкалу часов, начиная с полуночи - 00:00) +**Значение по умолчанию:** 0 (то есть планировщик отображает шкалу часов с полуночи — 00:00) -**Applicable views:** [Day view](views/day.md), [Week view](views/week.md), [Units view](views/units.md) +**Доступные представления:** [Day view](views/day.md), [Week view](views/week.md), [Units view](views/units.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/section_delimiter.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/section_delimiter.md index 41afe65d..422507fa 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/section_delimiter.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/section_delimiter.md @@ -1,14 +1,14 @@ --- -sidebar_label: "section_delimiter" -title: "section_delimiter config" -description: "определяет разделитель, используемый для разделения нескольких секций или единиц внутри связанного свойства данных события" +sidebar_label: section_delimiter +title: "section_delimiter конфигурация" +description: "указывается разделитель, который будет использоваться для разделения нескольких секций/единиц во связанном свойстве данных события" --- # section_delimiter ### Description -@short: Определяет разделитель, используемый для разделения нескольких секций или единиц внутри связанного свойства данных события +@short: Указывает разделитель, который будет использоваться для разделения нескольких секций/единиц во связанном свойстве данных события @signature: section_delimiter: string @@ -18,11 +18,11 @@ description: "определяет разделитель, используем scheduler.config.section_delimiter = ";"; ~~~ -**Default value:** "," +**Значение по умолчанию:** "," ### Related API - [multisection](api/config/multisection.md) ### Related Guides -- [Units View](views/units.md#assigningeventstoseveralunits) -- [Вид 'Timeline'](views/timeline.md) +- [Units View](views/units.md#assigning-events-to-several-units) +- [Timeline View](views/timeline.md#assignment-of-events-to-several-sections) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/select.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/select.md index 77dc8685..1ab97e45 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/select.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/select.md @@ -1,14 +1,14 @@ --- -sidebar_label: "select" -title: "select config" -description: "переключает видимость select-бара внутри блока события" +sidebar_label: выбор +title: "конфигурация select" +description: "показывает/скрывает панель выбора в окне события" --- # select ### Description -@short: Переключает видимость select-бара внутри блока события +@short: Показывает/скрывает панель выбора в окне события @signature: select: boolean @@ -17,11 +17,11 @@ description: "переключает видимость select-бара внут ~~~jsx scheduler.config.select = false; ... -scheduler.init('scheduler_here',new Date(2013,0,10),"week"); +scheduler.init('scheduler_here',new Date(2027,0,10),"week"); ~~~ -**Default value:** true +**Значение по умолчанию:** true ### Details -![select_property](/img/select_property.png) +![select_property](/img/select_property.png) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/separate_short_events.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/separate_short_events.md index 1e906060..e0cc979e 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/separate_short_events.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/separate_short_events.md @@ -1,14 +1,14 @@ --- -sidebar_label: "separate_short_events" -title: "separate_short_events config" -description: "помогает избежать наложения коротких событий" +sidebar_label: separate_short_events +title: "конфигурация separate_short_events" +description: "позволяет предотвращать перекрытие коротких событий" --- # separate_short_events ### Description -@short: Помогает избежать наложения коротких событий +@short: Позволяет предотвращать перекрытие коротких событий @signature: separate_short_events: boolean @@ -17,13 +17,13 @@ description: "помогает избежать наложения коротк ~~~jsx scheduler.config.separate_short_events = true; ... -scheduler.init('scheduler_here', new Date(2013,05,11), "week"); +scheduler.init('scheduler_here',new Date(2027,05,11),"week"); ~~~ -**Default value:** false +**Значение по умолчанию:** false -**Applicable views:** [Day view](views/day.md), [Week view](views/week.md), [Units view](views/units.md) +**Доступные представления:** [Day view](views/day.md), [Week view](views/week.md), [Units view](views/units.md) ### Details -![separateShortEvents_property](/img/separateShortEvents_property.png) +![separateShortEvents_property](/img/separateShortEvents_property.png) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/server_utc.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/server_utc.md index 3a652fc9..5054aca1 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/server_utc.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/server_utc.md @@ -1,14 +1,14 @@ --- -sidebar_label: "server_utc" -title: "server_utc config" -description: "позволяет конвертировать серверные даты между UTC и локальными часовыми поясами при обмене данными с сервером" +sidebar_label: server_utc +title: "server_utc конфигурация" +description: "включает преобразование дат на стороне сервера из UTC в локальную временную зону (и обратно) при отправке данных на сервер" --- # server_utc ### Description -@short: Позволяет конвертировать серверные даты между UTC и локальными часовыми поясами при обмене данными с сервером +@short: Позволяет преобразовывать даты на стороне сервера из UTC в локальную временную зону (и обратно) при отправке данных на сервер @signature: server_utc: boolean @@ -17,7 +17,7 @@ description: "позволяет конвертировать серверные ~~~jsx scheduler.config.server_utc = true; -scheduler.init('scheduler_here', new Date(2013,05,11), "week"); +scheduler.init('scheduler_here',new Date(2027,05,11),"week"); ~~~ -**Default value:** false +**Значение по умолчанию:** false \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/show_errors.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/show_errors.md index 4b0f5442..a5ce9790 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/show_errors.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/show_errors.md @@ -1,7 +1,7 @@ --- -sidebar_label: "show_errors" -title: "show_errors config" -description: "включает всплывающие окна с предупреждениями об ошибках при возникновении проблем" +sidebar_label: show_errors +title: "конфигурация show_errors" +description: "включает отображение уведомлений об ошибках в случае непредвиденного поведения" --- # show_errors @@ -18,10 +18,10 @@ description: "включает всплывающие окна с предупр scheduler.config.show_errors = false; ~~~ -**Default value:** true +**Значение по умолчанию:** true ### Related Guides -- [FAQ](faq.md#anerroralertappearsintherighttopcorner) +- [ЧЗВ](faq.md#an-error-alert-appears-in-the-right-top-corner) ### Change log -- added in v6.0 +- добавлено в версии v6.0 \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/show_loading.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/show_loading.md index 4917630f..ce7ab49e 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/show_loading.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/show_loading.md @@ -1,14 +1,14 @@ --- -sidebar_label: "show_loading" -title: "show_loading config" -description: "Отображает индикатор прогресса или спиннер во время загрузки данных, что удобно для сценариев динамической загрузки." +sidebar_label: show_loading +title: "Конфигурация show_loading" +description: "позволяет отображать progress/spinner во время загрузки данных (полезно для динамической загрузки)" --- # show_loading ### Description -@short: Отображает индикатор прогресса или спиннер во время загрузки данных, что удобно для сценариев динамической загрузки. +@short: Позволяет отображать progress/spinner во время загрузки данных (полезно для динамической загрузки) @signature: show_loading: boolean @@ -17,10 +17,10 @@ description: "Отображает индикатор прогресса или ~~~jsx scheduler.config.show_loading = true; ... -scheduler.init('scheduler_here',new Date(2013,0,10),"week"); +scheduler.init('scheduler_here',new Date(2027,0,10),"week"); ~~~ -**Default value:** false +**Значение по умолчанию:** false ### Related Guides -- [Загрузка данных](guides/loading-data.md#dynamic-loading) +- [Загрузка данных](guides/loading-data.md#dynamic-loading) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/show_quick_info.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/show_quick_info.md index 0fac4fbd..e12f8698 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/show_quick_info.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/show_quick_info.md @@ -1,14 +1,14 @@ --- -sidebar_label: "show_quick_info" -title: "show_quick_info config" -description: "Включает или отключает расширение 'quick_info' (всплывающее окно, показывающее детали задачи)" +sidebar_label: show_quick_info +title: "конфигурация show_quick_info" +description: "активирует/деактивирует расширение 'quick_info' (форма деталей задачи во всплывающем окне)" --- # show_quick_info ### Description -@short: Включает или отключает расширение 'quick_info' (всплывающее окно, показывающее детали задачи) +@short: Активирует/деактивирует расширение 'quick_info' (форма деталей задачи во всплывающем окне) @signature: show_quick_info: boolean @@ -19,7 +19,7 @@ scheduler.config.show_quick_info = false; scheduler.init("scheduler_here"); ~~~ -**Default value:** true +**Значение по умолчанию:** true ### Related Guides -- [Мобильная адаптивность Scheduler](guides/touch-support.md#quickinfoextension) +- [Мобильный адаптивный планировщик](guides/touch-support.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/start_on_monday.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/start_on_monday.md index 66b36649..8e13f2c0 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/start_on_monday.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/start_on_monday.md @@ -1,14 +1,14 @@ --- -sidebar_label: "start_on_monday" -title: "start_on_monday config" -description: "устанавливает первый день недели" +sidebar_label: start_on_monday +title: "start_on_monday конфигурация" +description: "устанавливает день начала недели" --- # start_on_monday ### Description -@short: Устанавливает первый день недели +@short: Устанавливает день начала недели @signature: start_on_monday: boolean @@ -17,16 +17,16 @@ description: "устанавливает первый день недели" ~~~jsx scheduler.config.start_on_monday = false; ... -scheduler.init('scheduler_here',new Date(2013,05,11),"week"); +scheduler.init('scheduler_here',new Date(2027,05,11),"week"); ~~~ -**Default value:** true +**Значение по умолчанию:** true -**Applicable views:** [Month view](views/month.md), [Week view](views/week.md), [Week Agenda view](views/weekagenda.md), [Year view](views/year.md) +**Применимые представления:** [Month view](views/month.md), [Week view](views/week.md), [Week Agenda view](views/weekagenda.md), [Year view](views/year.md) ### Related samples - [Setting the Y-Axis format](https://docs.dhtmlx.com/scheduler/samples/01_initialization_loading/02_hour_scale_format.html) ### Details -Если этот параметр установлен в *true*, неделя начинается с понедельника; если установлен в *false* - с воскресенья. +Если параметр установлен в *true*, неделя будет начинаться с понедельника (иначе — с воскресенья). \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/time_step.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/time_step.md index 0a17218a..9dc4ba12 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/time_step.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/time_step.md @@ -1,14 +1,14 @@ --- -sidebar_label: "time_step" -title: "time_step config" -description: "задает минимальный шаг (в минутах) для значений времени событий" +sidebar_label: time_step +title: "Настройки time_step" +description: "устанавливает минимальный шаг (в минутах) для значений времени события" --- # time_step ### Description -@short: Задает минимальный шаг (в минутах) для значений времени событий +@short: Устанавливает минимальный шаг (в минутах) для значений времени события @signature: time_step: number @@ -17,12 +17,12 @@ description: "задает минимальный шаг (в минутах) д ~~~jsx scheduler.config.time_step = 15; ... -scheduler.init('scheduler_here',new Date(2013,05,11),"week"); +scheduler.init('scheduler_here',new Date(2027,05,11),"week"); ~~~ -**Default value:** 5 +**Значение по умолчанию:** 5 -**Applicable views:** [Day view](views/day.md), [Week view](views/week.md), [Month view](views/month.md), [Units view](views/units.md) +**Доступные представления:** [Day view](views/day.md), [Week view](views/week.md), [Month view](views/month.md), [Units view](views/units.md) ### Related samples - [Coloring events](https://docs.dhtmlx.com/scheduler/samples/02_customization/01_events_coloring.html) @@ -30,5 +30,5 @@ scheduler.init('scheduler_here',new Date(2013,05,11),"week"); ### Details -- Время начала и окончания событий будет выравниваться по кратным значениям time_step. Например, при *time_step = 20* события могут начинаться только в 0, 20, 40 минут и так далее. -- Таймселектор в lightbox будет следовать тому же шагу времени, что также применяется к Timeline view. +- Начальные и конечные времена события будут кратны величине шага времени, т.е. если *time_step = 20*, событие может начинаться только на: 0, 20, 40 минут и т.д. +- Селектор времени в лайтбоксе будет иметь такой же шаг времени (то же касается и Timeline view). \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/timeline_swap_resize.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/timeline_swap_resize.md index 92197919..05fff9a7 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/timeline_swap_resize.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/timeline_swap_resize.md @@ -1,16 +1,16 @@ --- -sidebar_label: "timeline_swap_resize" -title: "timeline_swap_resize config" -description: "позволяет при изменении размера события менять местами дату окончания и дату начала, если дата окончания перемещается до даты начала" +sidebar_label: timeline_swap_resize +title: "timeline_swap_resize конфигурация" +description: "определяет, что во время изменения размера события конечная дата может быть обменяна на начальную дату (после того, как конечная дата станет запланированной перед начальной)" --- # timeline_swap_resize :::info - Эта функция доступна только в PRO-версии. + Эта функциональность доступна только в PRO-версии. ::: ### Description -@short: Позволяет при изменении размера события менять местами дату окончания и дату начала, если дата окончания перемещается до даты начала +@short: Определяет, что во время изменения размера события конечная дата может быть обменяна на начальную дату (после того, как конечная дата станет запланированной перед начальной) @signature: timeline_swap_resize: boolean @@ -20,18 +20,18 @@ description: "позволяет при изменении размера соб scheduler.config.timeline_swap_resize = false; ~~~ -**Default value:** true +**Значение по умолчанию:** true ### Details :::note - Это свойство требует включения плагина [timeline](guides/extensions-list.md#timeline). + Свойство требует включения плагина [timeline](guides/extensions-list.md#timeline). ::: -Если установлено в *false*, изменение размера события не позволит перетаскивать дату окончания за дату начала (или дату начала за дату окончания) с помощью drag and drop. +Если свойство установлено в *false*, оно не позволит перемещать конечную дату левее начальной даты (и наоборот) во время изменения размера события перетаскиванием. ### Related Guides - [Полный список расширений](guides/extensions-list.md#timeline) ### Change log -- добавлено в версии 4.4 +- добавлено в версии 4.4 \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/tooltip_hide_timeout.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/tooltip_hide_timeout.md index 39361590..2952b740 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/tooltip_hide_timeout.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/tooltip_hide_timeout.md @@ -1,14 +1,14 @@ --- -sidebar_label: "tooltip_hide_timeout" -title: "tooltip_hide_timeout config" -description: "устанавливает, как долго tooltip остаётся видимым перед тем, как исчезнуть, измеряется в миллисекундах" +sidebar_label: tooltip_hide_timeout +title: "tooltip_hide_timeout конфигурация" +description: "задает длительность в миллисекундах до скрытия tooltip" --- # tooltip_hide_timeout ### Description -@short: Устанавливает, как долго tooltip остаётся видимым перед тем, как исчезнуть, измеряется в миллисекундах +@short: Устанавливает длительность времени в миллисекундах перед скрытием tooltip @signature: tooltip_hide_timeout: number @@ -20,17 +20,17 @@ scheduler.plugins({ }); scheduler.config.tooltip_hide_timeout = 5000; -scheduler.init('scheduler_here',new Date(2023,10,20),"week"); +scheduler.init('scheduler_here',new Date(2027,10,20),"week"); ~~~ ### Details :::note - Эта опция является частью расширения **tooltip**, поэтому убедитесь, что плагин [tooltip](guides/extensions-list.md#tooltip) включён. Подробнее можно узнать в статье [Тултипы](guides/tooltips.md). + Этот параметр определяется в расширении **tooltip**, поэтому вам нужно активировать плагин [tooltip](guides/extensions-list.md#tooltip). Подробную информацию см. в статье [Tooltips](guides/tooltips.md). ::: ### Related API - [tooltip_timeout](api/config/tooltip_timeout.md) ### Related Guides -- [Тултипы](guides/tooltips.md) +- [Tooltips](guides/tooltips.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/tooltip_offset_x.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/tooltip_offset_x.md index ffa05e50..163942f5 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/tooltip_offset_x.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/tooltip_offset_x.md @@ -1,14 +1,14 @@ --- -sidebar_label: "tooltip_offset_x" -title: "tooltip_offset_x config" -description: "регулирует горизонтальное смещение позиции tooltip вправо при установке положительного значения" +sidebar_label: tooltip_offset_x +title: "tooltip_offset_x конфигурация" +description: "устанавливает правый (если положительный) отступ позиции всплывающей подсказки" --- # tooltip_offset_x ### Description -@short: Регулирует горизонтальное смещение позиции tooltip вправо при установке положительного значения +@short: Устанавливает правый (если положительный) отступ позиции всплывающей подсказки @signature: tooltip_offset_x: number @@ -17,19 +17,19 @@ description: "регулирует горизонтальное смещение ~~~jsx scheduler.config.tooltip_offset_x = 30; -scheduler.init('scheduler_here', new Date(2023,10,20), "week"); +scheduler.init('scheduler_here',new Date(2027,10,20),"week"); ~~~ -**Default value:** 10 +**Значение по умолчанию:** 10 ### Details :::note - Эта опция является частью расширения **tooltip**, поэтому убедитесь, что плагин [tooltip](guides/extensions-list.md#tooltip) включен. Для получения дополнительной информации ознакомьтесь со статьёй [Тултипы](guides/tooltips.md). + Этот параметр определяется в расширении **tooltip**, поэтому вам нужно активировать плагин [tooltip](guides/extensions-list.md#tooltip). Подробнее читайте в статье [Tooltips](guides/tooltips.md). ::: ### Related API - [tooltip_offset_y](api/config/tooltip_offset_y.md) ### Related Guides -- [Тултипы](guides/tooltips.md) +- [Tooltips](guides/tooltips.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/tooltip_offset_y.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/tooltip_offset_y.md index 15cfd4ba..85a6a5d8 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/tooltip_offset_y.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/tooltip_offset_y.md @@ -1,14 +1,14 @@ --- -sidebar_label: "tooltip_offset_y" -title: "tooltip_offset_y config" -description: "регулирует вертикальное положение tooltip, задавая верхний отступ при положительном значении" +sidebar_label: tooltip_offset_y +title: "tooltip_offset_y конфигурация" +description: "задает верхнее (при положительном значении) смещение положения tooltip" --- # tooltip_offset_y ### Description -@short: Регулирует вертикальное положение tooltip, задавая верхний отступ при положительном значении +@short: Задает верхнее (если положительное) смещение положения tooltip @signature: tooltip_offset_y: number @@ -17,19 +17,19 @@ description: "регулирует вертикальное положение t ~~~jsx scheduler.config.tooltip_offset_y = 40; -scheduler.init('scheduler_here', new Date(2023,10,20), "week"); +scheduler.init('scheduler_here',new Date(2027,10,20),"week"); ~~~ -**Default value:** 20 +**Значение по умолчанию:** 20 ### Details :::note - Этот параметр является частью расширения **tooltip**, поэтому убедитесь, что плагин [tooltip](guides/extensions-list.md#tooltip) включён. Для подробностей ознакомьтесь со статьёй [Тултипы](guides/tooltips.md). + Этот параметр определяется в расширении **tooltip**, поэтому вам нужно активировать плагин [tooltip](guides/extensions-list.md#tooltip). Подробности читайте в статье [Tooltips](guides/tooltips.md). ::: ### Related API - [tooltip_offset_x](api/config/tooltip_offset_x.md) ### Related Guides -- [Тултипы](guides/tooltips.md) +- [Tooltips](guides/tooltips.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/tooltip_timeout.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/tooltip_timeout.md index ff433011..a7fefff3 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/tooltip_timeout.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/tooltip_timeout.md @@ -1,14 +1,14 @@ --- -sidebar_label: "tooltip_timeout" -title: "tooltip_timeout config" -description: "определяет, сколько времени в миллисекундах должно пройти, прежде чем появится tooltip для задачи" +sidebar_label: tooltip_timeout +title: "Конфигурация tooltip_timeout" +description: "Устанавливает задержку в миллисекундах до отображения tooltip для задачи" --- # tooltip_timeout ### Description -@short: Определяет, сколько времени в миллисекундах должно пройти, прежде чем появится tooltip для задачи +@short: Устанавливает задержку в миллисекундах перед отображением tooltip для задачи @signature: tooltip_timeout: number @@ -19,20 +19,20 @@ scheduler.plugins({ tooltip: true }); -scheduler.config.tooltip_hide_timeout = 5000; -scheduler.init('scheduler_here',new Date(2023,10,20),"week"); +scheduler.config.tooltip_timeout = 1000; +scheduler.init("scheduler_here", new Date(2027, 10, 20), "week"); ~~~ -**Default value:** 30 +**Значение по умолчанию:** 30 ### Details :::note - Эта настройка является частью расширения **tooltip**, поэтому убедитесь, что плагин [tooltip](guides/extensions-list.md#tooltip) включен. Для получения дополнительной информации смотрите статью [Тултипы](guides/tooltips.md). + Эта опция определяется в расширении **tooltip**, поэтому нужно активировать плагин [tooltip](guides/extensions-list.md#tooltip). Подробности см. в статье [Tooltips](guides/tooltips.md). ::: ### Related API - [tooltip_hide_timeout](api/config/tooltip_hide_timeout.md) ### Related Guides -- [Тултипы](guides/tooltips.md) +- [Tooltips](guides/tooltips.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/touch.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/touch.md index 1501182b..2e43001c 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/touch.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/touch.md @@ -1,14 +1,14 @@ --- -sidebar_label: "touch" -title: "touch config" -description: "включает или отключает поддержку touch в планировщике" +sidebar_label: касание +title: "конфигурация касания" +description: "включает/выключает поддержку касания в планировщике" --- # touch ### Description -@short: Включает или отключает поддержку touch в планировщике +@short: Включает/выключает поддержку касания в планировщике @signature: touch: boolean | string @@ -17,13 +17,13 @@ description: "включает или отключает поддержку touc ~~~jsx scheduler.config.touch = "force"; ... -scheduler.init('scheduler_here',new Date(2013,3,10),"week"); +scheduler.init('scheduler_here',new Date(2027,3,10),"week"); ~~~ -**Default value:** true +**Значение по умолчанию:** true ### Related samples -- [Responsive scheduler](https://docs.dhtmlx.com/scheduler/samples/01_initialization_loading/13_touch_ui.html) +- [Адаптивный планировщик](https://docs.dhtmlx.com/scheduler/samples/01_initialization_loading/13_touch_ui.html) ### Details @@ -31,11 +31,11 @@ scheduler.init('scheduler_here',new Date(2013,3,10),"week");
-Это означает, что параметр может принимать три разных значения: +Итак, существует три возможных значения параметра: -- *true* - планировщик пытается определить устройство с поддержкой touch, проверяя строку user-agent браузера, и активирует поддержку touch, если такое устройство обнаружено. -- *'force'* - поддержка touch включена всегда, независимо от используемого устройства. -- *false* - отключает поддержку touch. +- *true* - планировщик пытается определить сенсорное устройство по анализу строки user-agent браузера и, если сенсорное устройство обнаружено, включает поддержку касания. +- *'force'* - включает постоянную поддержку касания, независимо от типа используемого устройства. +- *false* - отключает поддержку касания. ### Related API - [touch_drag](api/config/touch_drag.md) @@ -43,4 +43,4 @@ scheduler.init('scheduler_here',new Date(2013,3,10),"week"); - [touch_tooltip](api/config/touch_tooltip.md) ### Related Guides -- [Мобильная адаптивность Scheduler](guides/touch-support.md) +- [Мобильный адаптивный планировщик](guides/touch-support.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/touch_drag.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/touch_drag.md index a5eb2384..ddb47278 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/touch_drag.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/touch_drag.md @@ -1,14 +1,14 @@ --- -sidebar_label: "touch_drag" -title: "touch_drag config" -description: "устанавливает длительность в миллисекундах, которая отличает жест долгого касания от жеста прокрутки" +sidebar_label: touch_drag +title: "touch_drag конфигурация" +description: "определяет временной интервал в миллисекундах, который используется для различения жеста долгого нажатия от жеста прокрутки" --- # touch_drag ### Description -@short: Устанавливает длительность в миллисекундах, которая отличает жест долгого касания от жеста прокрутки +@short: Определяет временной интервал в миллисекундах, который используется для различения жеста долгого нажатия от жеста прокрутки @signature: touch_drag: number | boolean @@ -17,14 +17,14 @@ description: "устанавливает длительность в милли ~~~jsx scheduler.config.touch_drag = 750; ... -scheduler.init('scheduler_here',new Date(2013,3,10),"week"); +scheduler.init('scheduler_here',new Date(2027,3,10),"week"); ~~~ -**Default value:** 500 +**Значение по умолчанию:** 500 ### Details -Имейте в виду, что установка этого параметра в *false* отключит возможность drag событий. +Примечание: если параметр установить в *false*, пользователь не сможет перетаскивать события. ### Related API - [touch](api/config/touch.md) @@ -32,4 +32,4 @@ scheduler.init('scheduler_here',new Date(2013,3,10),"week"); - [touch_tooltip](api/config/touch_tooltip.md) ### Related Guides -- [Мобильная адаптивность Scheduler](guides/touch-support.md) +- [Мобильный адаптивный Scheduler](guides/touch-support.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/touch_swipe_dates.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/touch_swipe_dates.md index aa6c5817..beb2c46f 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/touch_swipe_dates.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/touch_swipe_dates.md @@ -1,14 +1,14 @@ --- -sidebar_label: "touch_swipe_dates" -title: "touch_swipe_dates config" -description: "позволяет включить или отключить возможность переключения активных дат с помощью горизонтального жеста swipe на мобильных устройствах" +sidebar_label: touch_swipe_dates +title: "touch_swipe_dates конфигурация" +description: "включает/выключает переключение активных дат с помощью горизонтального жеста свайпа на мобильных устройствах" --- # touch_swipe_dates ### Description -@short: Позволяет включить или отключить возможность переключения активных дат с помощью горизонтального жеста swipe на мобильных устройствах +@short: Включает/выключает переключение активных дат с помощью горизонтального жеста свайпа на мобильных устройствах @signature: touch_swipe_dates: boolean @@ -18,7 +18,7 @@ description: "позволяет включить или отключить во scheduler.config.touch_swipe_dates = true; ~~~ -**Default value:** false +**Значение по умолчанию:** false ### Related Guides -- [Мобильная адаптивность Scheduler](guides/touch-support.md) +- [Мобильный адаптивный планировщик](guides/touch-support.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/touch_tip.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/touch_tip.md index a3735962..c7ae6df4 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/touch_tip.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/touch_tip.md @@ -1,14 +1,14 @@ --- -sidebar_label: "touch_tip" -title: "touch_tip config" -description: "управляет отображением всплывающих подсказок в правом верхнем углу экрана" +sidebar_label: touch_tip +title: "touch_tip конфигурация" +description: "Включает/выключает всплывающие сообщения в правом верхнем углу экрана" --- # touch_tip ### Description -@short: Управляет отображением всплывающих подсказок в правом верхнем углу экрана +@short: Включает/выключает всплывающие сообщения в правом верхнем углу экрана @signature: touch_tip: boolean @@ -17,10 +17,10 @@ description: "управляет отображением всплывающих ~~~jsx scheduler.config.touch_tip = false; ... -scheduler.init('scheduler_here',new Date(2013,0,10),"week"); +scheduler.init('scheduler_here',new Date(2027,0,10),"week"); ~~~ -**Default value:** true +**Значение по умолчанию:** true ### Related API - [touch](api/config/touch.md) @@ -28,4 +28,4 @@ scheduler.init('scheduler_here',new Date(2013,0,10),"week"); - [touch_tooltip](api/config/touch_tooltip.md) ### Related Guides -- [Мобильная адаптивность Scheduler](guides/touch-support.md) +- [Мобильный адаптивный Scheduler](guides/touch-support.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/touch_tooltip.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/touch_tooltip.md index 45a66d03..02185e64 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/touch_tooltip.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/touch_tooltip.md @@ -1,14 +1,14 @@ --- -sidebar_label: "touch_tooltip" -title: "touch_tooltip config" -description: "включает отображение тултипов dhtmlxScheduler на устройствах с сенсорным экраном" +sidebar_label: touch_tooltip +title: "Конфигурация touch_tooltip" +description: "позволяет отображать tooltips dhtmxlScheduler на сенсорных устройствах" --- # touch_tooltip ### Description -@short: Включает отображение тултипов dhtmlxScheduler на устройствах с сенсорным экраном +@short: Позволяет отображать tooltips dhtmxlScheduler на сенсорных устройствах @signature: touch_tooltip: boolean @@ -19,7 +19,7 @@ description: "включает отображение тултипов dhtmlxSch scheduler.config.touch_tooltip = true; ~~~ -**Default value:** false +**Значение по умолчанию:** false ### Related API - [touch](api/config/touch.md) @@ -27,4 +27,4 @@ scheduler.config.touch_tooltip = true; - [touch_drag](api/config/touch_drag.md) ### Related Guides -- [Мобильная адаптивность Scheduler](guides/touch-support.md) +- [Мобильный адаптивный планировщик](guides/touch-support.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/undo_deleted.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/undo_deleted.md index d7cd15f6..8a0ff092 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/undo_deleted.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/undo_deleted.md @@ -1,14 +1,14 @@ --- -sidebar_label: "undo_deleted" -title: "undo_deleted config" -description: "Включает появление всплывающего окна Undo после удаления события" +sidebar_label: undo_deleted +title: "undo_deleted конфигурация" +description: "обеспечивает всплывающее окно Undo при удалении события" --- # undo_deleted ### Description -@short: Включает появление всплывающего окна Undo после удаления события +@short: Предоставляет всплывающее окно Undo при удалении события @signature: undo_deleted: boolean @@ -18,15 +18,15 @@ description: "Включает появление всплывающего ок // отключает всплывающее окно Undo scheduler.config.undo_deleted = false; /*!*/ -scheduler.init('scheduler_here',new Date(2010,0,10),"week"); +scheduler.init('scheduler_here',new Date(2027,0,10),"week"); scheduler.load("./data/events.xml"); ~~~ -**Default value:** true +**Значение по умолчанию:** true ### Details ![undo_deleted_config](/img/undo_deleted_config.png) ### Change log -- Добавлено в версии v7.1 +- Добавлено в версии 7.1 \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/update_render.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/update_render.md index 6be4d71f..529b0a0c 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/update_render.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/update_render.md @@ -1,14 +1,14 @@ --- -sidebar_label: "update_render" -title: "update_render config" -description: "управляет тем, будет ли scheduler полностью перерисовываться после каждого действия" +sidebar_label: update_render +title: "конфигурация update_render" +description: "обновляет режим, когда планировщик полностью перерисовывается после любого действия" --- # update_render ### Description -@short: Управляет тем, будет ли scheduler полностью перерисовываться после каждого действия +@short: Обновляет режим, когда планировщик полностью перерисовывается после любого действия @signature: update_render: boolean @@ -17,17 +17,20 @@ description: "управляет тем, будет ли scheduler полнос ~~~jsx scheduler.config.update_render = true; ... -scheduler.init('scheduler_here',new Date(2013,7,11),"week"); +scheduler.init('scheduler_here',new Date(2027,7,11),"week"); ~~~ -**Default value:** false +**Значение по умолчанию:** false ### Details -По умолчанию, при перетаскивании или изменении размера события, scheduler перерисовывает только изменяемое событие для повышения производительности. Полная перерисовка всего scheduler происходит только после завершения операции drag-and-drop. +Когда событие перетаскивается или изменяется его размер, планировщик перерисовывает только затронутое событие ради повышения производительности. +Полная перерисовка происходит только после завершения DnD. -В некоторых случаях положение перетаскиваемого события может влиять на расположение соседних событий. Чтобы гарантировать корректное отображение во время действия, необходима полная перерисовка scheduler. +Однако в некоторых случаях положение перетаскиваемого события влияет на расположение соседних событий, и чтобы корректно отобразить все события, необходимо полностью перерисовать планировщик.
-Например, если несколько событий занимают одну ячейку, и вы перемещаете одно из нижних событий, во время перемещения перерисовывается только это событие. Это может привести к временному визуальному наложению на верхние события. После отпускания кнопки мыши все события корректно выравниваются на своих местах. Включение опции **update_render** заставляет scheduler полностью перерисовываться после каждого действия, предотвращая такие визуальные наложения. +Например, когда в одной ячейке несколько событий и перемещается одно из нижних, планировщик будет перерисовывать только перемещаемое событие, и в результате оно может перекрывать некоторые более верхние события. +Когда вы отпустите кнопку мыши - все события займут корректное положение, но во время перемещения они могут перекрываться друг с другом. +Включение свойства **update_render** обеспечивает полную перерисовку всех данных после каждого действия. \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/use_select_menu_space.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/use_select_menu_space.md index cc245e86..b421583b 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/use_select_menu_space.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/use_select_menu_space.md @@ -1,14 +1,14 @@ --- -sidebar_label: "use_select_menu_space" -title: "use_select_menu_space config" -description: "определяет, занимают ли события всю ширину ячейки" +sidebar_label: use_select_menu_space +title: "конфигурация use_select_menu_space" +description: "определяет, что события занимают всю ширину ячейки" --- # use_select_menu_space ### Description -@short: Определяет, занимают ли события всю ширину ячейки +@short: Определяет, что события занимают всю ширину ячейки @signature: use_select_menu_space: boolean @@ -17,16 +17,16 @@ description: "определяет, занимают ли события всю ~~~jsx scheduler.config.use_select_menu_space = false; ... -scheduler.init('scheduler_here',new Date(2013,05,11),"week"); +scheduler.init('scheduler_here',new Date(2027,05,11),"week"); ~~~ -**Default value:** true +**Значение по умолчанию:** true -**Applicable views:** [Day view](views/day.md), [Week view](views/week.md), [Units view](views/units.md) +**Доступные представления:** [Day view](views/day.md), [Week view](views/week.md), [Units view](views/units.md) ### Details -По умолчанию события растягиваются на всю ширину ячейки. Установка этого параметра в *false* заставляет событие занимать только часть ширины ячейки, оставляя место для меню слева. +По умолчанию события занимают всю ширину ячейки. Установите значение *false* опции, чтобы событие занимало лишь часть ширины ячейки и оставляло место для левого меню. ### Change log -- Это свойство доступно с версии 3.5. +- Свойство доступно начиная с версии 3.5. \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/wai_aria_application_role.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/wai_aria_application_role.md index c6392539..cea2a763 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/wai_aria_application_role.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/wai_aria_application_role.md @@ -1,14 +1,14 @@ --- -sidebar_label: "wai_aria_application_role" -title: "wai_aria_application_role config" -description: "устанавливает, должен ли атрибут role='application' быть назначен основному контейнеру scheduler и элементам minicalendar" +sidebar_label: wai_aria_application_role +title: "wai_aria_application_role конфигурация" +description: "определяет, будет ли role='application' использоваться для основного контейнера планировщика и элементов мини-календаря" --- # wai_aria_application_role ### Description -@short: Устанавливает, должен ли атрибут role="application" быть назначен основному контейнеру scheduler и элементам minicalendar +@short: Определяет, будет ли role="application" использоваться для основного контейнера планировщика и элементов мини-календаря @signature: wai_aria_application_role: boolean @@ -20,13 +20,13 @@ scheduler.config.wai_aria_application_role = true; scheduler.init("scheduler_here"); ~~~ -**Default value:** true +**Значение по умолчанию:** true ### Details -добавлено в версии 5.0 +Добавлено в версии 5.0 -Управляет тем, как скринридеры обрабатывают интерфейс scheduler. +Определяет, как скрин-ридеры взаимодействуют с планировщиком. ### Related Guides -- [Доступность](guides/accessibility.md) +- [Доступность](guides/accessibility.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/wai_aria_attributes.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/wai_aria_attributes.md index 929b72d8..235a1a2d 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/wai_aria_attributes.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/wai_aria_attributes.md @@ -1,14 +1,14 @@ --- -sidebar_label: "wai_aria_attributes" -title: "wai_aria_attributes config" -description: "включает поддержку WAI-ARIA, чтобы компонент мог распознаваться скринридерами" +sidebar_label: wai_aria_attributes +title: "конфигурация wai_aria_attributes" +description: "включает поддержку WAI-ARIA, чтобы компонент распознавался программами экранного чтения" --- # wai_aria_attributes ### Description -@short: Включает поддержку WAI-ARIA, чтобы компонент мог распознаваться скринридерами +@short: Включает поддержку WAI-ARIA, чтобы компонент распознавался программами экранного чтения @signature: wai_aria_attributes: boolean @@ -20,11 +20,11 @@ scheduler.config.wai_aria_attributes = true; scheduler.init("scheduler_here"); ~~~ -**Default value:** true +**Значение по умолчанию:** true ### Details -введено в версии 4.4 +added in version 4.4 ### Related Guides -- [Доступность](guides/accessibility.md#wai-aria-attributes) +- [Доступность](guides/accessibility.md#wai-aria-attributes) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/week_agenda_select.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/week_agenda_select.md index 19bdf109..b6c8f191 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/week_agenda_select.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/week_agenda_select.md @@ -1,16 +1,16 @@ --- -sidebar_label: "week_agenda_select" -title: "week_agenda_select config" +sidebar_label: week_agenda_select +title: "week_agenda_select конфигурация" description: "выделяет выбранное событие в представлении Week Agenda" --- # week_agenda_select :::info - Эта функция доступна только в PRO-версии. + Эта функциональность доступна только в PRO-версии. ::: ### Description -@short: Выделяет выбранное событие в представлении Week Agenda +@short: Выделение выбранного события во представлении Week Agenda @signature: week_agenda_select: boolean @@ -18,27 +18,27 @@ description: "выделяет выбранное событие в предст ~~~jsx scheduler.config.week_agenda_select= false; /*!*/ -scheduler.init('scheduler_here',new Date(2013,0,10),"agenda_week"); +scheduler.init('scheduler_here',new Date(2027,0,10),"agenda_week"); ~~~ -**Default value:** true +**Значение по умолчанию:** true -**Applicable views:** [Week Agenda view](views/weekagenda.md) +**Применимые представления:** [Week Agenda view](views/weekagenda.md) ### Details :::note - Свойство требует активации плагина [week_agenda](guides/extensions-list.md#weekagenda). -::: + Свойство требует активированного плагина [week_agenda](guides/extensions-list.md#week-agenda). + ::: ![week_agenda_select](/img/week_agenda_select.png) :::note - Учтите, что установка **week_agenda_select** в *false* отключает только выделение выбранного события, но не препятствует редактированию события. Чтобы сделать событие доступным только для чтения, используйте конфигурацию [readonly](api/config/readonly.md). -::: + Обратите внимание, что значение *false* конфигурации **week_agenda_select** запрещает только подсветку выбранного события, но не запрещает его редактирование. Чтобы сделать событие не редактируемым, используйте конфигурацию [readonly](api/config/readonly.md). + ::: ### Related API - [readonly](api/config/readonly.md) ### Related Guides -- [Неделя-Агенда (Week Agenda View)](views/weekagenda.md) +- [Week Agenda View](views/weekagenda.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/week_date.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/week_date.md index ff19d69d..c585298a 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/week_date.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/week_date.md @@ -1,14 +1,14 @@ --- -sidebar_label: "week_date" -title: "week_date config" -description: "Определяет формат даты, отображаемый в подзаголовке вида Month." +sidebar_label: week_date +title: "week_date конфигурация" +description: "устанавливает формат даты во подзаголовке представления месяца" --- # week_date ### Description -@short: Определяет формат даты, отображаемый в подзаголовке вида Month. +@short: Устанавливает формат даты во подзаголовке представления месяца @signature: week_date: string @@ -17,16 +17,16 @@ description: "Определяет формат даты, отображаемы ~~~jsx scheduler.config.week_date="%l, %W"; ... -scheduler.init('scheduler_here',new Date(2013,05,11),"week"); +scheduler.init('scheduler_here',new Date(2027,05,11),"week"); ~~~ -**Default value:** "%l" +**Значение по умолчанию:** "%l" -**Applicable views:** [Month view](views/month.md) +**Поддерживаемые представления:** [Month view](views/month.md) ### Details ![monthView_properties](/img/monthView_properties.png) ### Related Guides -- [Спецификация формата даты](guides/settings-format.md) +- [Спецификация формата даты](guides/settings-format.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/wide_form.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/wide_form.md index 962f484b..386840ab 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/wide_form.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/wide_form.md @@ -1,14 +1,14 @@ --- -sidebar_label: "wide_form" -title: "wide_form config" -description: "управляет отображением стандартного (широкого) lightbox вместо короткой версии" +sidebar_label: wide_form +title: "wide_form конфигурация" +description: "включает/отключает отображение стандартного (широкого) лайтбокса вместо короткого" --- # wide_form ### Description -@short: Управляет отображением стандартного (широкого) lightbox вместо короткой версии +@short: Включает/выключает отображение стандартного (широкого) лайтбокса вместо короткого @signature: wide_form: boolean @@ -17,10 +17,10 @@ description: "управляет отображением стандартног ~~~jsx scheduler.config.wide_form = true; ... -scheduler.init('scheduler_here', new Date(2013, 7, 5), "week"); +scheduler.init('scheduler_here', new Date(2027, 7, 5), "week"); ~~~ -**Default value:** true +**Значение по умолчанию:** true ### Related samples - [Terrace skin](https://docs.dhtmlx.com/scheduler/samples/07_skins/01_default.html) @@ -29,16 +29,16 @@ scheduler.init('scheduler_here', new Date(2013, 7, 5), "week"); :::note -Стандартный (широкий) lightbox включён по умолчанию в стандартной skin и не может быть заменён на короткую версию - +Стандартный (широкий) лайтбокс по умолчанию включен в стандартной теме и его нельзя переключить на короткий. + :::
-- Стандартный lightbox +- Стандартный лайтбокс ![wide_form_false](/img/wide_form_false.png) -- Широкий lightbox +- Широкий лайтбокс -![wide_form_true](/img/wide_form_true.png) +![wide_form_true](/img/wide_form_true.png) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/xml_date.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/xml_date.md index 8049c951..97e70e7d 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/xml_date.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/xml_date.md @@ -1,33 +1,35 @@ --- -sidebar_label: "xml_date" -title: "xml_date config" -description: "определяет формат даты, используемый для интерпретации данных из набора данных" +sidebar_label: xml_date +title: "xml_date конфигурация" +description: "определяет форматы даты, которые используются для разбора данных из набора данных и для отправки данных на сервер" --- # xml_date -:::warning -Эта функицональность устарела -::: +:::warning +Свойство устарело +::: ### Description -@short: Определяет формат даты, используемый для интерпретации данных из набора данных +@short: определяет форматы даты, которые используются для разбора данных из набора данных и для отправки данных на сервер @signature: xml_date: string ### Example ~~~jsx - +gantt.config.xml_date="%Y-%m-%d %H:%i"; +... +gantt.init("gantt_here"); +gantt.load("../data/tasks.json"); ~~~ -**Default value:** %m/%d/%Y %H:%i +**Значение по умолчанию:** %m/%d/%Y %H:%i -### Related samples -- [Basic initialization](https://docs.dhtmlx.com/scheduler/samples/01_initialization_loading/01_basic_init.html) -- [Setting the Y-Axis format](https://docs.dhtmlx.com/scheduler/samples/01_initialization_loading/02_hour_scale_format.html) +### Details +Свойство xml_date устарело. Используйте вместо этого `date_format`: ### Related Guides -- [Спецификация формата даты](guides/settings-format.md) +- [Date Format Specification](guides/settings-format.md) ### Change log -- устарело с версии v5.2 +- устарело с версии v6.2, удалено с версии v7.0 \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/year_x.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/year_x.md index c4c520dd..291abf40 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/year_x.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/year_x.md @@ -1,14 +1,14 @@ --- -sidebar_label: "year_x" +sidebar_label: year_x title: "year_x config" -description: "определяет, сколько строк отображается в Year view" +description: "устанавливает количество строк в Year view" --- # year_x ### Description -@short: Определяет, сколько строк отображается в Year view +@short: Задает количество строк в Year view @signature: year_x: number @@ -18,22 +18,22 @@ description: "определяет, сколько строк отображае scheduler.config.year_x = 5; scheduler.config.year_y = 5; ... -scheduler.init('scheduler_here',new Date(2013,0,10),"year"); +scheduler.init('scheduler_here',new Date(2027,0,10),"year"); ~~~ -**Default value:** 4 +**Значение по умолчанию:** 4 -**Applicable views:** [Year view](views/year.md) +**Применимые виды:** [Year view](views/year.md) ### Details :::note - Для использования этой настройки необходимо включить плагин [year_view](guides/extensions-list.md#year). + Свойство требует активированного плагина [year_view](guides/extensions-list.md#year) для активации. ::: :::note - Эта настройка не влияет на Material skin. В Material skin количество строк в Year view управляется через CSS. + Свойство игнорируется в скине Material. В скине Material количество строк в Year view управляется CSS. ::: ### Related API -- [year_y](api/config/year_y.md) +- [year_y](api/config/year_y.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/year_y.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/year_y.md index 492edf5a..6ebc6498 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/year_y.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/year_y.md @@ -1,14 +1,14 @@ --- -sidebar_label: "year_y" -title: "year_y config" -description: "задаёт количество колонок, отображаемых в Year view" +sidebar_label: year_y +title: "year_y конфигурация" +description: "задает количество столбцов в Year view" --- # year_y ### Description -@short: Задаёт количество колонок, отображаемых в Year view +@short: Задает число столбцов в Year view @signature: year_y: number @@ -18,22 +18,22 @@ description: "задаёт количество колонок, отобража scheduler.config.year_x = 5; scheduler.config.year_y = 5; ... -scheduler.init('scheduler_here', new Date(2013, 0, 10), "year"); +scheduler.init('scheduler_here',new Date(2027,0,10),"year"); ~~~ -**Default value:** 3 +**Значение по умолчанию:** 3 -**Applicable views:** [Year view](views/year.md) +**Применимые виды:** [Year view](views/year.md) ### Details :::note - Для работы этого свойства требуется включённый плагин [year_view](guides/extensions-list.md#year). + Свойство требует активации плагина [year_view](guides/extensions-list.md#year) для работы. ::: :::note - В Material skin это свойство не влияет на отображение. Количество колонок в Year view управляется через CSS. + Свойство игнорируется в Material skin. В Material skin количество столбцов в Year view контролируется CSS. ::: ### Related API -- [year_x](api/config/year_x.md) +- [year_x](api/config/year_x.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onafterbatchupdate.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onafterbatchupdate.md index 7923b1f4..26543873 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onafterbatchupdate.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onafterbatchupdate.md @@ -1,6 +1,6 @@ --- -sidebar_label: "onAfterBatchUpdate" -title: "onAfterBatchUpdate event" +sidebar_label: onAfterBatchUpdate +title: "событие onAfterBatchUpdate" description: "срабатывает сразу после завершения выполнения метода [batchUpdate](api/method/batchupdate.md)" --- @@ -8,7 +8,7 @@ description: "срабатывает сразу после завершения ### Description -@short: Срабатывает сразу после завершения выполнения метода [batchUpdate](api/method/batchupdate.md) +@short: Срабатывает после вызова метода [batchUpdate](api/method/batchupdate.md) @signature: onAfterBatchUpdate: () =\> void @@ -25,4 +25,4 @@ scheduler.attachEvent("onAfterBatchUpdate", function(){ - [onBeforeBatchUpdate](api/event/onbeforebatchupdate.md) ### Change log -- добавлено в версии 7.1 +- добавлено в версии 7.1 \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onaftereventdisplay.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onaftereventdisplay.md index c2f7597e..cc375927 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onaftereventdisplay.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onaftereventdisplay.md @@ -1,14 +1,14 @@ --- -sidebar_label: "onAfterEventDisplay" -title: "onAfterEventDisplay event" -description: "срабатывает, когда scheduler меняет вид, дни, время и т.д., чтобы отобразить событие, указанное методом 'showEvent', и происходит ПОСЛЕ отображения события." +sidebar_label: onAfterEventDisplay +title: "onAfterEventDisplay событие" +description: "срабатывает, когда планировщик переключает виды, дни, время и т. д., чтобы показать событие, указанное методом 'showEvent', и срабатывает после отображения события" --- # onAfterEventDisplay ### Description -@short: Срабатывает, когда scheduler меняет вид, дни, время и т.д., чтобы отобразить событие, указанное методом 'showEvent', и происходит ПОСЛЕ отображения события. +@short: Срабатывает, когда планировщик переключает виды, дни, время и т. д. для отображения события, указанного методом 'showEvent', и срабатывает после отображения события @signature: onAfterEventDisplay: (event: object, string: view) =\> void @@ -21,9 +21,9 @@ description: "срабатывает, когда scheduler меняет вид, ~~~jsx scheduler.attachEvent("onAfterEventDisplay", function(event,view){ - //любая ваша логика здесь + // любая ваша логика здесь }); ~~~ ### Related API -- [onBeforeEventDisplay](api/event/onbeforeeventdisplay.md) +- [onBeforeEventDisplay](api/event/onbeforeeventdisplay.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onafterfoldertoggle.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onafterfoldertoggle.md index 3c7729f9..389330e0 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onafterfoldertoggle.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onafterfoldertoggle.md @@ -1,13 +1,15 @@ --- -sidebar_label: "onAfterFolderToggle" -title: "onAfterFolderToggle event" +sidebar_label: onAfterFolderToggle +title: "onAfterFolderToggle событие" description: "срабатывает сразу после того, как ветка дерева была открыта или закрыта (применимо только в режиме Timeline, 'tree')" --- # onAfterFolderToggle + :::info - Эта функция доступна только в PRO-версии. + Эта функциональность доступна только в PRO-версии. ::: + ### Description @short: Срабатывает сразу после того, как ветка дерева была открыта или закрыта (применимо только в режиме Timeline, 'tree') @@ -16,19 +18,19 @@ description: "срабатывает сразу после того, как ве ### Parameters -- `section` - (required) *object | boolean* - конфигурационный объект для ветки, которая была переключена.
Будет true, если все ветки были одновременно открыты или закрыты с помощью методов closeAllSections()/openAllSections(). +- `section` - (required) *object | boolean* - конфигурационный объект открытой/закрытой ветви.
Принимает значение true, если все ветви были закрыты/открыты одновременно методами closeAllSections()/openAllSections() - `isOpen` - (required) *boolean* - указывает, была ли ветка открыта (true) или закрыта (false) -- `allSections` - (required) *boolean* - будет true, если все ветки дерева были переключены одновременно методами closeAllSections()/openAllSections(), +- `allSections` - (required) *boolean* - принимает значение true, если все ветви дерева были закрыты/открыты одновременно методами closeAllSections()/openAllSections(), ### Example ~~~jsx scheduler.attachEvent("onAfterFolderToggle", function(section, isOpen, allSections){ - //разместите здесь любую кастомную логику + // любая ваша логика здесь }); ~~~ ### Related API - [onBeforeFolderToggle](api/event/onbeforefoldertoggle.md) - [closeAllSections](api/method/closeallsections.md) -- [openAllSections](api/method/openallsections.md) +- [openAllSections](api/method/openallsections.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onafterlightbox.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onafterlightbox.md index 383a7959..471e3941 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onafterlightbox.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onafterlightbox.md @@ -1,7 +1,7 @@ --- -sidebar_label: "onAfterLightbox" +sidebar_label: onAfterLightbox title: "onAfterLightbox event" -description: "срабатывает сразу после того, как пользователь закрывает lightbox (форму редактирования)" +description: "срабатывает после того, как пользователь закрыл lightbox (форму редактирования)" --- # onAfterLightbox @@ -16,6 +16,6 @@ description: "срабатывает сразу после того, как по ~~~jsx scheduler.attachEvent("onAfterLightbox", function (){ - //любая ваша кастомная логика здесь + // любая ваша логика здесь }); -~~~ +~~~ \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onafterquickinfo.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onafterquickinfo.md index ab2d2e17..14096d51 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onafterquickinfo.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onafterquickinfo.md @@ -1,33 +1,33 @@ --- -sidebar_label: "onAfterQuickInfo" +sidebar_label: onAfterQuickInfo title: "onAfterQuickInfo event" -description: "Срабатывает сразу после закрытия формы всплывающего окна." +description: "срабатывает после закрытия всплывающей формы события" --- # onAfterQuickInfo ### Description -@short: Срабатывает сразу после закрытия формы всплывающего окна. +@short: Срабатывает после закрытия всплывающей формы события @signature: onAfterQuickInfo: (eventId: string) =\> void ### Parameters -- `eventId` - (required) *string* - идентификатор события +- `eventId` - (обязательный) *string* - идентификатор события ### Example ~~~jsx -scheduler.attachEvent("onAfterQuickInfo", function(eventId){ - // ваш код здесь +scheduler.attachEvent("onAfterQuickInfo", function(eventId){ + // любая ваша логика здесь }); ~~~ ### Details :::note - Для работы события требуется активировать плагин [quick_info](guides/extensions-list.md#quickinfo). + Это событие требует активации плагина [quick_info](guides/extensions-list.md#quick-info). ::: ### Related API @@ -37,8 +37,8 @@ scheduler.attachEvent("onAfterQuickInfo", function(eventId){ - [quick_info_detached](api/config/quick_info_detached.md) ### Related Guides -- [Полный список расширений](guides/extensions-list.md#quickinfo) -- [Мобильная адаптивность Scheduler](guides/touch-support.md) +- [Полный список расширений](guides/extensions-list.md#quick-info) +- [Мобильный адаптивный планировщик](guides/touch-support.md) ### Change log -- добавлено в версии 4.4 +- добавлено в версии 4.4 \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onafterschedulerresize.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onafterschedulerresize.md index 609c67d9..12b8ff15 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onafterschedulerresize.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onafterschedulerresize.md @@ -1,14 +1,14 @@ --- -sidebar_label: "onAfterSchedulerResize" -title: "onAfterSchedulerResize event" -description: "срабатывает после того, как размер scheduler был обновлен и область с данными перерисована" +sidebar_label: onAfterSchedulerResize +title: "событие onAfterSchedulerResize" +description: "срабатывает после того, как scheduler изменил размер и область данных была перерисована" --- # onAfterSchedulerResize ### Description -@short: Срабатывает после того, как размер scheduler был обновлен и область с данными перерисована +@short: Срабатывает после того, как scheduler изменил размер и область данных была перерисована @signature: onAfterSchedulerResize: () =\> void @@ -16,6 +16,6 @@ description: "срабатывает после того, как размер sc ~~~jsx scheduler.attachEvent("onAfterSchedulerResize", function(){ - //любая ваша логика здесь + // любая ваша логика здесь }); -~~~ +~~~ \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onbeforebatchupdate.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onbeforebatchupdate.md index c5416aed..13d85fb2 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onbeforebatchupdate.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onbeforebatchupdate.md @@ -1,14 +1,14 @@ --- -sidebar_label: "onBeforeBatchUpdate" -title: "onBeforeBatchUpdate event" -description: "вызывается непосредственно перед выполнением метода [batchUpdate](api/method/batchupdate.md)" +sidebar_label: onBeforeBatchUpdate +title: "событие onBeforeBatchUpdate" +description: "срабатывает перед вызовом метода batchUpdate" --- # onBeforeBatchUpdate ### Description -@short: Вызывается непосредственно перед выполнением метода [batchUpdate](api/method/batchupdate.md) +@short: Срабатывает до вызова метода [batchUpdate](api/method/batchupdate.md) @signature: onBeforeBatchUpdate: () =\> void @@ -16,7 +16,7 @@ description: "вызывается непосредственно перед в ~~~jsx scheduler.attachEvent("onBeforeBatchUpdate", function(){ - // ваш код здесь + // любая ваша логика здесь }); ~~~ @@ -25,4 +25,4 @@ scheduler.attachEvent("onBeforeBatchUpdate", function(){ - [onAfterBatchUpdate](api/event/onafterbatchupdate.md) ### Change log -- добавлено в версии 7.1 +- добавлено в версии 7.1 \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onbeforecollapse.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onbeforecollapse.md index 44dc93ca..c14f4a58 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onbeforecollapse.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onbeforecollapse.md @@ -1,25 +1,25 @@ --- -sidebar_label: "onBeforeCollapse" +sidebar_label: onBeforeCollapse title: "onBeforeCollapse event" -description: "Срабатывает, когда пользователь нажимает на иконку сворачивания, чтобы переключить размер scheduler с «полного экрана» обратно к исходному размеру." +description: "Срабатывает, когда пользователь нажимает на значок разворачивания, чтобы изменить размер планировщика с 'полноэкранного' на исходный." --- # onBeforeCollapse ### Description -@short: Срабатывает, когда пользователь нажимает на иконку сворачивания, чтобы переключить размер scheduler с «полного экрана» обратно к исходному размеру. +@short: Срабатывает, когда пользователь нажимает на значок разворачивания, чтобы изменить размер планировщика с 'полноэкранного' на исходный. @signature: onBeforeCollapse: () =\> void ### Returns -- ` result` - (boolean) - определяет, будет ли выполнено действие по умолчанию события (true) или оно будет отменено (false) +- ` result` - (boolean) - определяет, будет ли выполнено действие по умолчанию события (true) или отменено (false) ### Example ~~~jsx scheduler.attachEvent("onBeforeCollapse",function(){ - //место для вашей кастомной логики + // любая ваша логика здесь return true; }); ~~~ @@ -27,10 +27,10 @@ scheduler.attachEvent("onBeforeCollapse",function(){ ### Details :::note - Это событие требует активного расширения [expand](guides/extensions-list.md#expand). + Событие требует, чтобы расширение [expand](guides/extensions-list.md#expand) было включено. ::: ### Related API - [onCollapse](api/event/oncollapse.md) - [onBeforeExpand](api/event/onbeforeexpand.md) -- [onExpand](api/event/onexpand.md) +- [onExpand](api/event/onexpand.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onbeforedrag.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onbeforedrag.md index d8fd591d..886ca2c4 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onbeforedrag.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onbeforedrag.md @@ -1,30 +1,30 @@ --- -sidebar_label: "onBeforeDrag" +sidebar_label: onBeforeDrag title: "onBeforeDrag event" -description: "срабатывает, когда пользователь начинает действие перетаскивания или изменения размера (доступно с версии 2.1+)" +description: "срабатывает, когда пользователь начинает операцию перетаскивания/изменения размера (версия 2.1+)" --- # onBeforeDrag ### Description -@short: Срабатывает, когда пользователь начинает действие перетаскивания или изменения размера (доступно с версии 2.1+) +@short: Срабатывает, когда пользователь начинает операцию перетаскивания/изменения размера (версия 2.1+) -@signature: onBeforeDrag: (id: string, mode: string, e: Event) =\> boolean +@signature: onBeforeDrag: (id: string, mode: string, e: Event) => boolean ### Parameters - `id` - (required) *string* - идентификатор события -- `mode` - (required) *string* - тип действия перетаскивания: "move", "resize" или "create" -- `e` - (required) *Event* - объект нативного события +- `mode` - (required) *string* - режим перетаскивания: "move","resize" или "create" +- `e` - (required) *Event* - нативный объект события ### Returns -- ` result` - (boolean) - определяет, должно ли выполняться действие по умолчанию для события (true) или быть предотвращено (false) +- `result` - (boolean) - определяет, будет ли выполнено действие по умолчанию у события (`true`) или отменено (`false`) ### Example ~~~jsx -scheduler.attachEvent("onBeforeDrag", function (id, mode, e){ +scheduler.attachEvent("onBeforeDrag", (id, mode, e) => { // здесь можно добавить кастомную логику return true; }); @@ -36,6 +36,6 @@ scheduler.attachEvent("onBeforeDrag", function (id, mode, e){ ### Details -Это событие срабатывает, когда пользователь кликает внутри scheduler по элементу, поддерживающему перетаскивание. +Событие срабатывает, когда пользователь кликает внутри Scheduler по элементу, который можно перетащить. -В случае режима "create" параметр id ещё не установлен, так как новое событие ещё не создано. +Для режима "create" значение `id` не предоставляется, потому что новое событие ещё не создано. \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onbeforeeventchanged.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onbeforeeventchanged.md index 442b02c7..2cc37cd5 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onbeforeeventchanged.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onbeforeeventchanged.md @@ -1,40 +1,41 @@ --- -sidebar_label: "onBeforeEventChanged" +sidebar_label: onBeforeEventChanged title: "onBeforeEventChanged event" -description: "срабатывает при изменении события через drag-and-drop, но изменения ещё не сохранены." +description: "вызывается, когда событие изменено с помощью drag-n-drop, но изменения ещё не сохранены." --- # onBeforeEventChanged ### Description -@short: Срабатывает при изменении события через drag-and-drop, но изменения ещё не сохранены. +@short: Вызывается, когда событие изменено с помощью drag-n-drop, но изменения ещё не сохранены. @signature: onBeforeEventChanged: (ev: object, e: Event, is_new: boolean, original: object) =\> boolean ### Parameters -- `ev` - (required) *object* - объект данных события после изменений +- `ev` - (required) *object* - объект данных элемента после изменений - `e` - (required) *Event* - нативный объект события -- `is_new` - (required) *boolean* - возвращает 'true', если пользователь изменяет новое событие; 'false', если редактирует существующее событие +- `is_new` - (required) *boolean* - возвращает 'true' если пользователь изменяет новое событие; 'false' если редактируемое событие уже существует - `original` - (required) *object* - объект данных события до изменений ### Returns -- ` result` - (boolean) - решает, будет ли выполнено действие по умолчанию для события (true) или отменено (false) +- `result` - (boolean) - определяет, будет ли триггериться действие по умолчанию события (`true`) или будет отменено (`false`) ### Example ~~~jsx -scheduler.attachEvent("onBeforeEventChanged", function(ev, e, is_new, original){ - //любая пользовательская логика здесь +scheduler.attachEvent("onBeforeEventChanged", (ev, e, is_new, original) => { + // здесь можно добавить кастомную логику return true; }); ~~~ + ### Details -Это событие вызывается каждый раз, когда новое событие добавляется или существующее событие обновляется через drag-and-drop. +Событие возникает, когда добавляется новое событие или существующее изменяется перетаскиванием (drag-n-drop). -- Учтите, что первый параметр в функции-обработчике - это сам объект данных элемента, а не просто его ID (поскольку у новых элементов ID может ещё не быть). -- При создании новых элементов данных неизменённое событие будет представлено пустым объектом. -- Событие можно отменить: возврат *false* из обработчика остановит обновление данных. +- Учтите, что первый параметр обработчика принимает сам объект элемента данных, а не ID этого элемента, потому что вновь созданные элементы данных могут ещё не иметь ID. +- Неизменённое событие будет пустым объектом при создании новых элементов данных. +- Событие можно заблокировать: возвращение `false` из обработчика предотвратит обновление данных. \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onbeforeeventcreated.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onbeforeeventcreated.md index 7ebbadb4..3b517a20 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onbeforeeventcreated.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onbeforeeventcreated.md @@ -1,33 +1,33 @@ --- -sidebar_label: "onBeforeEventCreated" +sidebar_label: onBeforeEventCreated title: "onBeforeEventCreated event" -description: "срабатывает, когда пользователь создает новое событие, перетаскивая курсор по scheduler" +description: "срабатывает, когда пользователь создает новое событие путем перетаскивания курсора над scheduler" --- # onBeforeEventCreated ### Description -@short: Срабатывает, когда пользователь создает новое событие, перетаскивая курсор по scheduler +@short: Срабатывает, когда пользователь создает новое событие перетаскиванием курсора над scheduler -@signature: onBeforeEventCreated: (e: Event) =\> boolean +@signature: onBeforeEventCreated: (e: Event) => boolean ### Parameters -- `e` - (required) *Event* - нативный объект события +- `e` - (required) *Event* - нативный Object-событие ### Returns -- ` result` - (boolean) - указывает, будет ли выполнено действие по умолчанию для события (true) или оно будет отменено (false) +- ` result` - (boolean) - определяет, будет ли выполнено действие по умолчанию события (true) или отменено (false) ### Example ~~~jsx scheduler.attachEvent("onBeforeEventCreated", function (e){ - //здесь можно добавить пользовательскую логику + // любая ваша логика здесь return true; }); ~~~ ### Details -Учтите, что это событие срабатывает только если включена опция конфигурации [drag_create](api/config/drag_create.md). +Примечание: событие срабатывает только если включена конфигурационная опция [drag_create](api/config/drag_create.md). \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onbeforeeventdelete.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onbeforeeventdelete.md index c8fccda0..9aefec06 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onbeforeeventdelete.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onbeforeeventdelete.md @@ -1,34 +1,34 @@ --- -sidebar_label: "onBeforeEventDelete" +sidebar_label: onBeforeEventDelete title: "onBeforeEventDelete event" -description: "срабатывает сразу после того, как пользователь нажимает кнопку удаления (либо в event bar, либо в окне деталей)" +description: "срабатывает после того, как пользователь нажимает кнопку удаления (в панели событий или окне деталей)" --- # onBeforeEventDelete ### Description -@short: Срабатывает сразу после того, как пользователь нажимает кнопку удаления (либо в event bar, либо в окне деталей) +@short: Срабатывает после нажатия пользователем кнопки удаления (в панели событий или окне деталей) @signature: onBeforeEventDelete: (id: string, ev: object) =\> boolean ### Parameters -- `id` - (required) *string* - id события -- `ev` - (required) *object* - объект с данными события +- `id` - (required) *string* - идентификатор события +- `ev` - (required) *object* - объект данных события ### Returns -- ` result` - (boolean) - определяет, будет ли выполнено стандартное действие удаления (true) или оно будет отменено (false) +- ` result` - (boolean) - определяет, будет ли выполнено действие по умолчанию события (true) или будет отменено (false) ### Example ~~~jsx scheduler.attachEvent("onBeforeEventDelete", function(id,ev){ - //место для вашей кастомной логики + // любая ваша логика здесь return true; }); ~~~ ### Details -Это событие можно заблокировать. Возврат *false* остановит стандартный процесс удаления. +Событие можно заблокировать. Верните *false*, чтобы отменить обработку по умолчанию. \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onbeforeeventdisplay.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onbeforeeventdisplay.md index a97f46b4..1339f739 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onbeforeeventdisplay.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onbeforeeventdisplay.md @@ -1,33 +1,33 @@ --- -sidebar_label: "onBeforeEventDisplay" -title: "onBeforeEventDisplay event" -description: "срабатывает непосредственно перед тем, как метод 'showEvent' отображает конкретное событие, позволяя выполнить код до появления события." +sidebar_label: onBeforeEventDisplay +title: "onBeforeEventDisplay событие" +description: "срабатывает, когда вызывается метод 'showEvent' для показа конкретного события, и срабатывает ДО его отображения" --- # onBeforeEventDisplay ### Description -@short: Срабатывает непосредственно перед тем, как метод 'showEvent' отображает конкретное событие, позволяя выполнить код до появления события. +@short: Срабатывает, когда вызывается метод 'showEvent' для отображения конкретного события и выполняется ДО отображения события @signature: onBeforeEventDisplay: (event: object, view: string) =\> boolean ### Parameters - `event` - (required) *object* - объект события -- `view` - (required) *string* - название вида, используемого для отображения события +- `view` - (required) *string* - имя представления, которое используется для отображения события ### Returns -- ` result` - (boolean) - определяет, будет ли выполнено стандартное действие для события (true) или оно будет отменено (false) +- `result` - (boolean) - определяет, будет ли выполнено действие по умолчанию события (true) или отменено (false) ### Example ~~~jsx scheduler.attachEvent("onBeforeEventDisplay", function(event,view){ - //любая ваша логика здесь + // любая ваша логика здесь return true; }); ~~~ ### Related API -- [onAfterEventDisplay](api/event/onaftereventdisplay.md) +- [onAfterEventDisplay](api/event/onaftereventdisplay.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onbeforeeventdragin.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onbeforeeventdragin.md index ef346382..804e2c40 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onbeforeeventdragin.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onbeforeeventdragin.md @@ -1,30 +1,30 @@ --- -sidebar_label: "onBeforeEventDragIn" +sidebar_label: onBeforeEventDragIn title: "onBeforeEventDragIn event" -description: "срабатывает непосредственно перед тем, как перетаскиваемое событие входит в область scheduler" +description: "вызывает перед тем, как перетаскиваемое событие будет перемещено над планировщиком" --- # onBeforeEventDragIn ### Description -@short: Срабатывает непосредственно перед тем, как перетаскиваемое событие входит в область scheduler +@short: Срабатывает перед тем, как перетаскиваемое событие будет перемещено над планировщиком @signature: onBeforeEventDragIn: (id: string, e: Event) =\> boolean ### Parameters -- `id` - (required) *string* - идентификатор события -- `e` - (required) *Event* - нативный объект события +- `id` - (обязательно) *string* - идентификатор события +- `e` - (обязательно) *Event* - нативный объект события ### Returns -- ` result` - (boolean) - определяет, будет ли выполнено стандартное действие события (true) или оно будет отменено (false) +- ` result` - (boolean) - определяет, будет ли выполнено действие по умолчанию события (true) или отменено (false) ### Example ~~~jsx scheduler.attachEvent("onBeforeEventDragIn", function (id, e){ - // разместите здесь вашу пользовательскую логику + // любая ваша логика здесь return true; }); ~~~ @@ -32,8 +32,8 @@ scheduler.attachEvent("onBeforeEventDragIn", function (id, e){ ### Details :::note - Это событие происходит только во время операций drag-and-drop между разными schedulers. + Событие срабатывает только в случае перетаскивания между планировщиками. ::: ### Related Guides -- [Операции Drag-and-Drop](guides/drag-between.md) +- [Операции перетаскивания](guides/drag-between.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onbeforeeventdragout.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onbeforeeventdragout.md index d4fc7608..683a5769 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onbeforeeventdragout.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onbeforeeventdragout.md @@ -1,31 +1,31 @@ --- -sidebar_label: "onBeforeEventDragOut" -title: "onBeforeEventDragOut event" -description: "срабатывает непосредственно перед тем, как событие будет перетащено за пределы scheduler-а" +sidebar_label: onBeforeEventDragOut +title: "onBeforeEventDragOut событие" +description: "срабатывает до того, как перетащенное событие будет перемещено за пределы планировщика" --- # onBeforeEventDragOut ### Description -@short: Срабатывает непосредственно перед тем, как событие будет перетащено за пределы scheduler-а +@short: Срабатывает до того, как перетащенное событие будет перемещено за пределы планировщика @signature: onBeforeEventDragOut: (id: string, ev: object, e: Event) =\> boolean ### Parameters -- `id` - (required) *string* - id события -- `ev` - (required) *object* - объект с данными события +- `id` - (required) *string* - идентификатор события +- `ev` - (required) *object* - объект данных события - `e` - (required) *Event* - нативный объект события ### Returns -- ` result` - (boolean) - определяет, будет ли выполнено стандартное действие события (true) или остановлено (false) +- `result` - (boolean) - определяет, будет ли выполнение действия по умолчанию события выполнено (true) или отменено (false) ### Example ~~~jsx scheduler.attachEvent("onBeforeEventDragOut", function (id, ev, e){ - //любая пользовательская логика здесь + // любая ваша логика здесь return true; }); ~~~ @@ -33,8 +33,8 @@ scheduler.attachEvent("onBeforeEventDragOut", function (id, ev, e){ ### Details :::note - Это событие происходит только при drag and drop между разными scheduler-ами. -::: + Событие срабатывает только в случае drag-n-drop между планировщиками. + ::: ### Related Guides -- [Операции Drag-and-Drop](guides/drag-between.md) +- [Операции drag-and-drop](guides/drag-between.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onbeforeeventpasted.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onbeforeeventpasted.md index 26b298ea..b4ac60e0 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onbeforeeventpasted.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onbeforeeventpasted.md @@ -1,25 +1,25 @@ --- -sidebar_label: "onBeforeEventPasted" +sidebar_label: onBeforeEventPasted title: "onBeforeEventPasted event" -description: "срабатывает непосредственно перед тем, как пользователь нажимает сочетание клавиш 'CTRL+V'" +description: "срабатывает перед тем, как пользователь нажимает сочетание клавиш 'CTRL+V'." --- # onBeforeEventPasted ### Description -@short: Срабатывает непосредственно перед тем, как пользователь нажимает сочетание клавиш 'CTRL+V' +@short: Срабатывает перед тем, как пользователь нажимает сочетание клавиш 'CTRL+V' -@signature: onBeforeEventPasted: (isCopy: boolean, pasted_ev: object, original_ev: object) =\> boolean +@signature: onBeforeEventPasted: (isCopy: boolean, pasted_ev: object, original_ev: object) => boolean ### Parameters - `isCopy` - (required) *boolean* - указывает, было ли событие скопировано или вырезано перед вставкой. Значение true означает, что событие было скопировано -- `pasted_ev` - (required) *object* - новый объект события, созданный после вставки -- `original_ev` - (required) *object* - оригинальный объект события, который был скопирован или вырезан +- `pasted_ev` - (required) *object* - объект нового элемента данных (событие, создаваемое после вставки) +- `original_ev` - (required) *object* - объект исходного элемента данных (событие, которое было скопировано/вырезано) ### Returns -- ` result` - (boolean) - определяет, будет ли выполнено стандартное поведение события (true) или оно будет заблокировано (false) +- ` result` - (boolean) - определяет, будет ли выполнено действие по умолчанию события (true) или отменено (false) ### Example @@ -32,7 +32,7 @@ scheduler.attachEvent("onBeforeEventPasted", function(isCopy,pasted_ev,original_ ### Details -Убедитесь, что расширение 'keyboard navigation' включено. +Расширение навигации клавиатурой должно быть включено. ### Related API -- [onEventPasted](api/event/oneventpasted.md) +- [onEventPasted](api/event/oneventpasted.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onbeforeexpand.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onbeforeexpand.md index 2528ce74..80a2ae8a 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onbeforeexpand.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onbeforeexpand.md @@ -1,14 +1,14 @@ --- -sidebar_label: "onBeforeExpand" -title: "onBeforeExpand event" -description: "срабатывает, когда пользователь нажимает на иконку расширения, чтобы переключить scheduler из исходного размера в режим 'полного экрана'." +sidebar_label: onBeforeExpand +title: "Событие onBeforeExpand" +description: "срабатывает, когда пользователь нажимает на значок разворачивания, чтобы изменить размер расписания с исходного на 'полный экран'." --- # onBeforeExpand ### Description -@short: Срабатывает, когда пользователь нажимает на иконку расширения, чтобы переключить scheduler из исходного размера в режим "полного экрана". +@short: Срабатывает, когда пользователь нажимает на значок разворачивания, чтобы изменить размер расписания с исходного на 'полный экран'. @signature: onBeforeExpand: () =\> boolean @@ -19,7 +19,7 @@ description: "срабатывает, когда пользователь наж ~~~jsx scheduler.attachEvent("onBeforeExpand",function(){ - // здесь можно добавить кастомную логику + // любая ваша логика здесь return true; }); ~~~ @@ -27,10 +27,10 @@ scheduler.attachEvent("onBeforeExpand",function(){ ### Details :::note - Для работы события требуется включенный плагин [expand](guides/extensions-list.md#expand). + Событие требует включенного плагина [expand](guides/extensions-list.md#expand). ::: ### Related API - [onExpand](api/event/onexpand.md) - [onCollapse](api/event/oncollapse.md) -- [onBeforeCollapse](api/event/onbeforecollapse.md) +- [onBeforeCollapse](api/event/onbeforecollapse.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onbeforeexternaldragin.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onbeforeexternaldragin.md index 4ed3133e..4c47390b 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onbeforeexternaldragin.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onbeforeexternaldragin.md @@ -1,34 +1,34 @@ --- -sidebar_label: "onBeforeExternalDragIn" +sidebar_label: onBeforeExternalDragIn title: "onBeforeExternalDragIn event" -description: "срабатывает непосредственно перед тем, как элемент начнёт перетаскиваться в scheduler из внешнего компонента DHTMLX (требуется включённое расширение dnd)" +description: "срабатывает до того, как некоторый элемент начнет перетаскиваться в расписание из внешнего компонента DHTMLX (только при включенном расширении dnd)" --- # onBeforeExternalDragIn ### Description -@short: Срабатывает непосредственно перед тем, как элемент начнёт перетаскиваться в scheduler из внешнего компонента DHTMLX (требуется включённое расширение dnd) +@short: Срабатывает до того, как некоторый элемент начнет перетаскиваться в расписание из внешнего компонента DHTMLX (только при включенном расширении dnd) @signature: onBeforeExternalDragIn: (source: HTMLElement, dhtmlx: object, tArea: HTMLElement, tNode: HTMLElement, e: Event) =\> boolean ### Parameters -- `source` - (required) *HTMLElement* - HTML-элемент, который собираются перетащить в scheduler +- `source` - (required) *HTMLElement* - HTML-элемент, который будет перетаскиваться в расписание - `dhtmlx` - (required) *object* - глобальный объект DHTMLX -- `tArea` - (required) *HTMLElement* - HTML-элемент, представляющий область данных scheduler -- `tNode` - (required) *HTMLElement* - целевой HTML-элемент внутри scheduler (например, колонка в Day view или секция в Timeline view) -- `e` - (required) *Event* - родной объект события +- `tArea` - (required) *HTMLElement* - HTML-объект области данных расписания +- `tNode` - (required) *HTMLElement* - целевой HTML-объект расписания (столбец в дневном представлении, раздел в Timeline- представлении и т. п.) +- `e` - (required) *Event* - объект нативного события ### Returns -- ` result` - (boolean) - определяет, будет ли выполнено действие по умолчанию (true) или оно отменяется (false) +- `result` - (boolean) - определяет, будет ли выполнено действие по умолчанию события (true) или отменено (false) ### Example ~~~jsx scheduler.attachEvent("onBeforeExternalDragIn",function(source,dhtmlx,tArea,tNode,e) { - //здесь можно добавить кастомную логику + // любая ваша логика здесь return true; }); ~~~ @@ -36,10 +36,10 @@ scheduler.attachEvent("onBeforeExternalDragIn",function(source,dhtmlx,tArea,tNod ### Details :::note - Для работы этого события требуется включённый плагин [outerdrag](guides/extensions-list.md#outerdrag). -::: + Для этого события требуется активировать плагин [outerdrag](guides/extensions-list.md#outerdrag). + ::: -Событие можно заблокировать. Возврат *false* предотвратит перетаскивание внешнего элемента в scheduler. +The event is blockable. Return *false* and the external element won't be dragged to the scheduler. ### Related API -- [onExternalDragIn](api/event/onexternaldragin.md) +- [onExternalDragIn](api/event/onexternaldragin.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onbeforefoldertoggle.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onbeforefoldertoggle.md index 3ce81983..4fdb86d1 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onbeforefoldertoggle.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onbeforefoldertoggle.md @@ -1,33 +1,35 @@ --- -sidebar_label: "onBeforeFolderToggle" -title: "onBeforeFolderToggle event" -description: "срабатывает непосредственно перед открытием или закрытием ветки дерева (применимо только в режиме Timeline, 'tree')" +sidebar_label: onBeforeFolderToggle +title: "Событие onBeforeFolderToggle" +description: "срабатывает перед открытием или закрытием узла дерева (вид Timeline, режим 'tree' только)" --- # onBeforeFolderToggle + :::info - Эта функция доступна только в PRO-версии. -::: + Это функциональность доступна только в версии PRO. + ::: + ### Description -@short: Срабатывает непосредственно перед открытием или закрытием ветки дерева (применимо только в режиме Timeline, "tree") +@short: Срабатывает до открытия или закрытия ветки дерева (вид Timeline, режим 'tree' только) @signature: onBeforeFolderToggle: (section: object | boolean, isOpen: boolean, allSections: boolean) =\> boolean ### Parameters -- `section` - (required) *object | boolean* - объект конфигурации ветки, которая собирается открыться или закрыться.
Будет true, если все ветки закрываются или открываются одновременно с помощью методов closeAllSections()/openAllSections(). +- `section` - (required) *object | boolean* - конфигурационный объект ветки, которую следует открыть/закрыть.
Принимает значение true, если все ветви будут закрыты/открыты одновременно вызовами методов closeAllSections() / openAllSections(). - `isOpen` - (required) *boolean* - указывает, будет ли ветка открыта (true) или закрыта (false) -- `allSections` - (required) *boolean* - будет true, если все ветки дерева открываются или закрываются одновременно через closeAllSections()/openAllSections(), или false, если затрагивается только одна ветка. +- `allSections` - (required) *boolean* - принимает значение true, если все ветви дерева будут закрыты/открыты одновременно вызовами методов closeAllSections() / openAllSections(), false - если будет открыта/закрыта только одна ветка. ### Returns -- ` result` - (boolean) - определяет, должно ли стандартное действие события выполняться (true) или быть остановлено (false) +- ` result` - (boolean) - определяет, будет ли выполнено действие по умолчанию события (true) или отменено (false) ### Example ~~~jsx scheduler.attachEvent("onBeforeFolderToggle", function(section,isOpen,allSections){ - //любая пользовательская логика здесь + // любая ваша логика здесь return true; }); ~~~ @@ -35,4 +37,4 @@ scheduler.attachEvent("onBeforeFolderToggle", function(section,isOpen,allSection ### Related API - [onAfterFolderToggle](api/event/onafterfoldertoggle.md) - [closeAllSections](api/method/closeallsections.md) -- [openAllSections](api/method/openallsections.md) +- [openAllSections](api/method/openallsections.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onbeforelightbox.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onbeforelightbox.md index 67b63b2f..ac7c3045 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onbeforelightbox.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onbeforelightbox.md @@ -1,6 +1,6 @@ --- -sidebar_label: "onBeforeLightbox" -title: "onBeforeLightbox event" +sidebar_label: onBeforeLightbox +title: "onBeforeLightbox событие" description: "срабатывает непосредственно перед тем, как пользователь откроет lightbox (форму редактирования)" --- @@ -23,7 +23,7 @@ description: "срабатывает непосредственно перед ~~~jsx scheduler.attachEvent("onBeforeLightbox", function (id){ - // здесь можно добавить кастомную логику + // любая ваша логика здесь return true; }); ~~~ @@ -34,4 +34,4 @@ scheduler.attachEvent("onBeforeLightbox", function (id){ ### Details -Это событие можно заблокировать. Возврат *false* предотвратит выполнение действия по умолчанию (открытие lightbox). +Событие можно заблокировать. Вернуть *false*, чтобы отменить обработку по умолчанию (открытие lightbox). \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onbeforeparse.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onbeforeparse.md index 69a4d447..ed1a32ec 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onbeforeparse.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onbeforeparse.md @@ -1,14 +1,14 @@ --- -sidebar_label: "onBeforeParse" -title: "onBeforeParse event" -description: "срабатывает непосредственно перед началом парсинга данных" +sidebar_label: onBeforeParse +title: "onBeforeParse событие" +description: "Вызывается перед началом парсинга данных" --- # onBeforeParse ### Description -@short: Срабатывает непосредственно перед началом парсинга данных +@short: Срабатывает перед началом парсинга данных @signature: onBeforeParse: () =\> void @@ -17,7 +17,7 @@ description: "срабатывает непосредственно перед ~~~jsx scheduler.init("scheduler_here"); scheduler.attachEvent("onBeforeParse", function(){ - //любая пользовательская логика здесь + // любая ваша логика здесь }); scheduler.parse(events); ~~~ @@ -30,4 +30,4 @@ scheduler.parse(events); - [onLoadEnd](api/event/onloadend.md) ### Related Guides -- [Загрузка данных](guides/loading-data.md) +- [Загрузка данных](guides/loading-data.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onbeforequickinfo.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onbeforequickinfo.md index 312b5ad6..52c3beb8 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onbeforequickinfo.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onbeforequickinfo.md @@ -1,19 +1,19 @@ --- -sidebar_label: "onBeforeQuickInfo" +sidebar_label: onBeforeQuickInfo title: "onBeforeQuickInfo event" -description: "срабатывает непосредственно перед появлением всплывающей подсказки Quick Info для события" +description: "срабатывает непосредственно перед отображением всплывающего окна Quick Info для события" --- # onBeforeQuickInfo ### Description -@short: Срабатывает непосредственно перед появлением всплывающей подсказки Quick Info для события +@short: Срабатывает непосредственно перед отображением всплывающего окна Quick Info для события @signature: onBeforeParse: (id: string | number) =\> void ### Parameters -- `id` - (required) *string | number* - идентификатор события +- `id` - (обязательный) *number | string* - идентификатор события ### Example @@ -29,7 +29,7 @@ scheduler.attachEvent("onBeforeQuickInfo", function(id) { ### Details -Это событие можно заблокировать. Возврат false остановит выполнение стандартного поведения. +Это событие можно отменить. Возвращайте false, чтобы отменить обработку по умолчанию. ### Related Guides -- [Мобильная адаптивность Scheduler](guides/touch-support.md#quickinfoextension) +- [Mobile Responsive Scheduler](guides/touch-support.md#quick-info-extension) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onbeforesectionrender.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onbeforesectionrender.md index b22bb82c..61e36f0f 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onbeforesectionrender.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onbeforesectionrender.md @@ -1,37 +1,39 @@ --- -sidebar_label: "onBeforeSectionRender" -title: "onBeforeSectionRender event" -description: "срабатывает непосредственно перед установкой отдельного раздела Timeline, но до его рендеринга (применимо только к виду Timeline)" +sidebar_label: onBeforeSectionRender +title: "onBeforeSectionRender событие" +description: "срабатывает до того, как отдельный раздел Timeline будет настроен, но ещё не отрисован (только представление Timeline)" --- # onBeforeSectionRender + :::info - Эта функция доступна только в PRO-версии. + Эта функциональность доступна только в PRO-версии. ::: + ### Description -@short: Срабатывает непосредственно перед установкой отдельного раздела Timeline, но до его рендеринга (применимо только к виду Timeline) +@short: Срабатывает до того, как отдельный раздел Timeline будет настроен, но ещё не отрисован (только представление Timeline) @signature: onBeforeSectionRender: (mode: string, section: object, timeline: object) =\> object ### Parameters -- `mode` - (required) *string* - режим timeline: 'cell', 'bar' или 'tree' -- `section` - (required) *object* - объект раздела, содержащий свойства 'key' и 'label', как определено в массиве 'y_unit' конфигурации Timeline (например, \{key:1, label:"James Smith"\}) -- `timeline` - (required) *object* - объект конфигурации Timeline +- `mode` - (required) *string* - режим таймлайна: 'cell', 'bar' или 'tree' +- `section` - (required) *object* - объект раздела с указанными в массиве 'y_unit' свойствами 'key' и 'label' конфигурационного объекта Timeline (например \{key:1, label:"James Smith"\}) +- `timeline` - (required) *object* - конфигурационный объект Timeline ### Returns -- ` result` - (object) - объект раздела +- `result` - (object) - объект раздела ### Example ~~~jsx scheduler.attachEvent("onBeforeSectionRender", function(mode, section, timeline){ - // здесь можно добавить пользовательскую логику + // любая ваша логика здесь return section; }); ~~~ ### Details -Это событие позволяет вам кастомизировать разделы timeline перед их рендерингом. +Событие можно использовать для настройки разделов таймлайна. \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onbeforetodaydisplayed.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onbeforetodaydisplayed.md index 8f8990e9..ee31fae4 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onbeforetodaydisplayed.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onbeforetodaydisplayed.md @@ -1,25 +1,25 @@ --- -sidebar_label: "onBeforeTodayDisplayed" -title: "onBeforeTodayDisplayed event" -description: "срабатывает при нажатии кнопки «Today» в scheduler" +sidebar_label: onBeforeTodayDisplayed +title: "onBeforeTodayDisplayed событие" +description: "срабатывает, когда пользователь нажимает кнопку «Сегодня» в планировщике" --- # onBeforeTodayDisplayed ### Description -@short: Срабатывает при нажатии кнопки «Today» в scheduler +@short: Срабатывает, когда пользователь нажимает кнопку «Сегодня» в планировщике @signature: onBeforeTodayDisplayed: () =\> boolean ### Returns -- ` result` - (boolean) - указывает, должно ли выполняться стандартное действие события (true) или оно должно быть предотвращено (false) +- ` result` - (boolean) - определяет, будет ли выполнено действие по умолчанию события (true) или отменено (false) ### Example ~~~jsx scheduler.attachEvent("onBeforeTodayDisplayed", function (){ - //место для вашей кастомной логики + // любая ваша логика здесь return true; }); -~~~ +~~~ \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onbeforetooltip.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onbeforetooltip.md index c29a73e3..7ea32f61 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onbeforetooltip.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onbeforetooltip.md @@ -1,33 +1,33 @@ --- -sidebar_label: "onBeforeTooltip" -title: "onBeforeTooltip event" -description: "срабатывает непосредственно перед появлением tooltip для элемента данных (только когда активировано расширение 'tooltip')" +sidebar_label: onBeforeTooltip +title: "onBeforeTooltip событие" +description: "срабатывает до отображения tooltip для элемента данных (только при включенном расширении 'tooltip')" --- # onBeforeTooltip ### Description -@short: Срабатывает непосредственно перед появлением tooltip для элемента данных (только когда активировано расширение 'tooltip') +@short: Срабатывает до отображения tooltip для элемента данных (только при включенном расширении 'tooltip') -@signature: onBeforeTooltip: (id: string) =\> boolean +@signature: onBeforeTooltip: (id: string) => boolean ### Parameters -- `id` - (required) *string* - ID элемента данных, для которого собирается показать tooltip +- `id` - (required) *string* - идентификатор элемента данных, для которого будет отображаться tooltip ### Returns -- ` result` - (boolean) - определяет, будет ли выполнено действие по умолчанию (true) или отменено (false) +- ` result` - (boolean) - определяет, будет ли выполнено действие по умолчанию события (true) или отменено (false) ### Example ~~~jsx scheduler.attachEvent("onBeforeTooltip", function (id){ - //любая кастомная логика здесь + // любая ваша логика здесь return true; }); ~~~ ### Details -Это событие можно заблокировать. Возврат *false* предотвратит отображение tooltip. +Событие можно заблокировать. Верните *false* — и tooltip не будет отображаться. \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onbeforeviewchange.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onbeforeviewchange.md index 58b1d584..26c54167 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onbeforeviewchange.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onbeforeviewchange.md @@ -1,40 +1,40 @@ --- -sidebar_label: "onBeforeViewChange" -title: "onBeforeViewChange event" -description: "срабатывает непосредственно перед переключением пользователя с текущего вида на другой" +sidebar_label: onBeforeViewChange +title: "Событие onBeforeViewChange" +description: "срабатывает перед тем, как пользователь изменит текущий просмотр на другой" --- # onBeforeViewChange ### Description -@short: Срабатывает непосредственно перед переключением пользователя с текущего вида на другой +@short: Срабатывает перед тем, как пользователь изменит текущий просмотр на другой -@signature: onBeforeViewChange: (old_mode: string, old_date: object, mode: string, date: object) =\> boolean +@signature: onBeforeViewChange: (old_mode: string, old_date: Date, mode: string, date: Date) =\> boolean ### Parameters - `old_mode` - (required) *string* - текущий активный вид -- `old_date` - (required) *object* - дата, находящаяся в фокусе в данный момент -- `mode` - (required) *string* - вид, который собирается активироваться -- `date` - (required) *object* - новая выбранная дата +- `old_date` - (required) *Date* - текущая активная дата +- `mode` - (required) *string* - новый вид +- `date` - (required) *Date* - новая дата ### Returns -- ` result` - (boolean) - определяет, следует ли выполнять стандартное действие события (true) или остановить его (false) +- `result` - (boolean) - определяет, будет ли выполнено действие по умолчанию у события (true) или отменено (false) ### Example ~~~jsx -scheduler.attachEvent("onBeforeViewChange", function(old_mode,old_date,mode,date){ - //здесь можно разместить кастомную логику +scheduler.attachEvent("onBeforeViewChange", (old_mode, old_date, mode, date) => { + // здесь можно добавить кастомную логику return true; }); ~~~ ### Related samples -- [Configuring the Map view](https://docs.dhtmlx.com/scheduler/samples/03_extensions/23_map_view_timeframes.html) +- [Настройка вида Map](https://docs.dhtmlx.com/scheduler/samples/03_extensions/23_map_view_timeframes.html) ### Details -- Это событие можно заблокировать, вернув *false*, что не позволит переключиться с текущего вида. -- Оно также срабатывает при первой загрузке scheduler на странице; в этом случае **old_mode** и **old_date** будут неопределены. +- Событие можно блокировать. Верните `false`, и Scheduler оставит текущий вид открытым. +- Событие также срабатывает при первоначальном рендеринге Scheduler на странице. В этом случае параметры `old_mode` и `old_date` равны undefined. \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oncellclick.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oncellclick.md index d5bacf96..4a50846d 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oncellclick.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oncellclick.md @@ -1,30 +1,30 @@ --- -sidebar_label: "onCellClick" -title: "onCellClick event" -description: "срабатывает при однократном клике пользователя по ячейке (применимо только в Timeline view)" +sidebar_label: onCellClick +title: "onCellClick событие" +description: "срабатывает при одиночном клике по ячейке (только в представлении Timeline)" --- # onCellClick ### Description -@short: Срабатывает при однократном клике пользователя по ячейке (применимо только в Timeline view) +@short: Срабатывает при одиночном клике по ячейке (только в представлении Timeline) @signature: onCellClick: (x_ind: number, y_ind: number, x_val: object, y_val: array, e: Event) =\> void; ### Parameters -- `x_ind` - (required) *number* - индекс колонки кликнутой ячейки (начинается с нуля) -- `y_ind` - (required) *number* - индекс строки кликнутой ячейки (начинается с нуля) -- `x_val` - (required) *object* - объект Date, представляющий время начала кликнутой ячейки -- `y_val` - (required) *array* - массив с объектами данных, расположенных в кликнутой ячейке -- `e` - (required) *Event* - родной объект события +- `x_ind` - (required) *number* - индекс столбца нажатой ячейки (нумерация с нуля) +- `y_ind` - (required) *number* - индекс строки нажатой ячейки (нумерация с нуля) +- `x_val` - (required) *object* - Date объект времени начала нажатой ячейки +- `y_val` - (required) *array* - массив объектов данных, находящихся в нажатой ячейке +- `e` - (required) *Event* - нативный объект события ### Example ~~~jsx scheduler.attachEvent("onCellClick", function (x_ind, y_ind, x_val, y_val, e){ - // здесь можно добавить свою логику + // любая ваша логика здесь }); ~~~ @@ -32,6 +32,6 @@ scheduler.attachEvent("onCellClick", function (x_ind, y_ind, x_val, y_val, e){ :::note -Это событие срабатывает только в Timeline view +Событие срабатывает только в представлении Timeline -::: +::: \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oncelldblclick.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oncelldblclick.md index 0a4e005b..8b50b3d6 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oncelldblclick.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oncelldblclick.md @@ -1,39 +1,39 @@ --- -sidebar_label: "onCellDblClick" -title: "onCellDblClick event" -description: "срабатывает при двойном клике пользователя по ячейке (только в Timeline view)" +sidebar_label: onCellDblClick +title: "onCellDblClick событие" +description: "срабатывает, когда пользователь выполняет двойной щелчок по ячейке (только в представлении Timeline)" --- # onCellDblClick ### Description -@short: Срабатывает при двойном клике пользователя по ячейке (только в Timeline view) +@short: Срабатывает, когда пользователь выполняет двойной щелчок по ячейке (только в представлении Timeline) -@signature: onCellDblClick: (x_ind: number, y_ind: number, x_val: object, y_val: array, e: Event) =\> void; +@signature: onCellDblClick: (x_ind: number, y_ind: number, x_val: object, y_val: array, e: Event) => void; ### Parameters -- `x_ind` - (required) *number* - ноль-индексированный номер столбца, по которому был произведён клик -- `y_ind` - (required) *number* - ноль-индексированный номер строки, по которой был произведён клик -- `x_val` - (required) *object* - объект Date, представляющий стартовую временную метку ячейки, по которой кликнули -- `y_val` - (required) *array* - массив, содержащий объекты данных, расположенных в ячейке, по которой кликнули -- `e` - (required) *Event* - родной объект события +- `x_ind` - (required) *number* - индекс столбца нажатой ячейки (нумерация с нуля) +- `y_ind` - (required) *number* - индекс строки нажатой ячейки (нумерация с нуля) +- `x_val` - (required) *object* - Date-объект начала временной метки нажатой ячейки +- `y_val` - (required) *array* - массив объектов данных, находящихся в нажатой ячейке +- `e` - (required) *Event* - нативный объект события ### Example ~~~jsx scheduler.attachEvent("onCellDblClick", function (x_ind, y_ind, x_val, y_val, e){ - // здесь можно разместить кастомную логику + // любая ваша логика здесь }); ~~~ -**Applicable views:** [Timeline view](views/timeline.md) +**Применимые представления:** [Timeline view](views/timeline.md) ### Details :::note -Это событие срабатывает только в Timeline view - -::: +Событие срабатывает только в представлении Timeline + +::: \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onclearall.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onclearall.md index 7564283e..d288270f 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onclearall.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onclearall.md @@ -1,14 +1,14 @@ --- -sidebar_label: "onClearAll" -title: "onClearAll event" -description: "срабатывает один раз после очистки данных планировщика" +sidebar_label: onClearAll +title: "onClearAll событие" +description: "срабатывает после очистки данных в планировщике" --- # onClearAll ### Description -@short: Срабатывает один раз после очистки данных планировщика +@short: Срабатывает после очистки данных в планировщике @signature: onClearAll: () =\> void @@ -16,10 +16,10 @@ description: "срабатывает один раз после очистки ~~~jsx scheduler.attachEvent("onClearAll", function (){ - //любая ваша логика здесь + // любая ваша логика здесь }); ~~~ ### Details -Это событие вызывается из метода [clearAll](api/method/clearall.md). +Событие вызывается из метода [clearAll](api/method/clearall.md). \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onclick.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onclick.md index 86111aad..e596fc4c 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onclick.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onclick.md @@ -1,16 +1,16 @@ --- -sidebar_label: "onClick" +sidebar_label: onClick title: "onClick event" -description: "срабатывает, когда пользователь кликает левой кнопкой мыши по событию" +description: "срабатывает, когда пользователь нажимает левую кнопку мыши на событии" --- # onClick ### Description -@short: Срабатывает, когда пользователь кликает левой кнопкой мыши по событию +@short: Срабатывает, когда пользователь нажимает левую кнопку мыши на событии -@signature: onClick: (id: string, e: Event) =\> boolean; +@signature: onClick: (id: string, e: Event) => boolean; ### Parameters @@ -18,24 +18,24 @@ description: "срабатывает, когда пользователь кли - `e` - (required) *Event* - нативный объект события ### Returns -- ` result` - (boolean) - определяет, будет ли выполнено стандартное действие события (true) или заблокировано (false) +- ` result` - (boolean) - определяет, будет ли выполнено стандартное действие события (`true`) или заблокировано (`false`) ### Example ~~~jsx -scheduler.attachEvent("onClick", function (id, e){ - //любая кастомная логика здесь - return true; - }); +scheduler.attachEvent("onClick", (id, event) => { + // здесь можно добавить кастомную логику + return true; +}); ~~~ -### Related samples -- [Hiding the select bar of the event box](https://docs.dhtmlx.com/scheduler/samples/02_customization/10_without_toolbar.html) -- [Read-only lightbox](https://docs.dhtmlx.com/scheduler/samples/03_extensions/12_readonly_form.html) +### Связанные примеры +- [Скрытие панели выбора в окне события](https://docs.dhtmlx.com/scheduler/samples/02_customization/10_without_toolbar.html) +- [Lightbox только для чтения](https://docs.dhtmlx.com/scheduler/samples/03_extensions/12_readonly_form.html) -### Details +### Подробности -Это событие можно блокировать. Возврат любого значения, отличного от true, из обработчика предотвратит стандартное поведение (которое обычно показывает selection bar). +Событие можно заблокировать. Если обработчик вернет значение, отличное от `true`, реакция по умолчанию будет заблокирована. По умолчанию отображается панель выделения. -### Related Guides -- [Манипуляции с Lightbox](guides/lightbox-editors-manipulations.md#openingthelightboxonasingleclick) +### Связанные руководства +- [Манипуляции с Lightbox](guides/lightbox-editors-manipulations.md#opening-the-lightbox-on-a-single-click) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oncollapse.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oncollapse.md index 3673b682..85820a81 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oncollapse.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oncollapse.md @@ -1,32 +1,32 @@ --- -sidebar_label: "onCollapse" -title: "onCollapse event" -description: "срабатывает, когда пользователь нажимает на иконку разворачивания, чтобы переключить scheduler из режима 'полного экрана' обратно к исходному размеру." +sidebar_label: onCollapse +title: "onCollapse событие" +description: "срабатывает, когда пользователь нажимает на значок разворачивания, чтобы изменить размер планировщика с 'полного экрана' на исходный." --- # onCollapse ### Description -@short: Срабатывает, когда пользователь нажимает на иконку разворачивания, чтобы переключить scheduler из режима "полного экрана" обратно к исходному размеру. +@short: Срабатывает, когда пользователь нажимает на значок разворачивания, чтобы изменить размер планировщика с 'полного экрана' на исходный. -@signature: onCollapse: () =\> void +@signature: onCollapse: () => void ### Example ~~~jsx scheduler.attachEvent("onCollapse",function(){ - //любая ваша логика здесь + // любая ваша логика здесь }); ~~~ ### Details :::note - Событие требует включенного расширения [expand](guides/extensions-list.md#expand). + Это событие требует включённого расширения [expand](guides/extensions-list.md#expand). ::: ### Related API - [onBeforeCollapse](api/event/onbeforecollapse.md) - [onBeforeExpand](api/event/onbeforeexpand.md) -- [onExpand](api/event/onexpand.md) +- [onExpand](api/event/onexpand.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onconfirmedbeforeeventdelete.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onconfirmedbeforeeventdelete.md index 2357f350..05a4cca1 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onconfirmedbeforeeventdelete.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onconfirmedbeforeeventdelete.md @@ -1,14 +1,14 @@ --- -sidebar_label: "onConfirmedBeforeEventDelete" +sidebar_label: onConfirmedBeforeEventDelete title: "onConfirmedBeforeEventDelete event" -description: "срабатывает сразу после того, как пользователь нажимает кнопку удаления и подтверждает удаление (либо в панели события, либо в окне деталей)" +description: "срабатывает после того, как пользователь нажимает кнопку удаления и подтверждает удаление (на панели события или в окне деталей)" --- # onConfirmedBeforeEventDelete ### Description -@short: Срабатывает сразу после того, как пользователь нажимает кнопку удаления и подтверждает удаление (либо в панели события, либо в окне деталей) +@short: Срабатывает после того, как пользователь нажимает кнопку удаления и подтверждает удаление (на панели события или в окне деталей) @signature: onConfirmedBeforeEventDelete: (id: string, e: Event) =\> boolean; @@ -18,17 +18,17 @@ description: "срабатывает сразу после того, как по - `e` - (required) *Event* - нативный объект события ### Returns -- ` result` - (boolean) - определяет, будет ли выполнено действие по умолчанию для события (true) или оно будет остановлено (false) +- ` result` - (boolean) - определяет, будет ли выполнено действие по умолчанию у события (true) или отменено (false) ### Example ~~~jsx scheduler.attachEvent("onConfirmedBeforeEventDelete", function(id,e){ - // здесь можно разместить пользовательскую логику + // любая ваша логика здесь return true; }); ~~~ ### Details -Это событие можно заблокировать. Возврат *false* предотвратит выполнение действия по умолчанию. +Это событие можно заблокировать. Вернуть *false*, чтобы отменить обработку по умолчанию. \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oncontextmenu.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oncontextmenu.md index 6a95ef82..ec74ba8d 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oncontextmenu.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oncontextmenu.md @@ -1,33 +1,33 @@ --- -sidebar_label: "onContextMenu" -title: "onContextMenu event" -description: "срабатывает, когда пользователь открывает контекстное меню, кликая правой кнопкой мыши внутри scheduler" +sidebar_label: onContextMenu +title: "onContextMenu событие" +description: "Срабатывает, когда пользователь вызывает контекстное меню кликом правой кнопкой мыши внутри планировщика" --- # onContextMenu ### Description -@short: Срабатывает, когда пользователь открывает контекстное меню, кликая правой кнопкой мыши внутри scheduler +@short: Срабатывает, когда пользователь вызывает контекстное меню кликом правой кнопкой мыши внутри планировщика @signature: onContextMenu: (id: string, e: Event) =\> void; ### Parameters -- `id` - (required) *string* - id события -- `e` - (required) *Event* - нативный объект события +- `id` - (обязательный) *string* - идентификатор события +- `e` - (обязательный) *Event* - нативный объект события ### Example ~~~jsx scheduler.attachEvent("onContextMenu", function (id, e){ - //здесь можно добавить кастомную логику + // любая ваша логика здесь }); ~~~ ### Related samples -- 10_integration/01_dhtmlxMenu.html +- [Интеграция с dhtmlxMenu](https://docs.dhtmlx.com/scheduler/samples/10_integration/01_dhtmlxmenu.html) ### Details -когда пользователь кликает правой кнопкой мыши по событию, обработчик получает id этого события; если клик был не по событию, передается null. +Если пользователь кликнет по событию, обработчик получит id события, в противном случае — null. \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/ondatarender.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/ondatarender.md index 30e3a6e1..1a7a6330 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/ondatarender.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/ondatarender.md @@ -1,14 +1,14 @@ --- -sidebar_label: "onDataRender" -title: "onDataRender event" -description: "срабатывает после того, как данные полностью отрисованы на странице" +sidebar_label: onDataRender +title: "onDataRender событие" +description: "Срабатывает после отрисовки данных на странице" --- # onDataRender ### Description -@short: Срабатывает после того, как данные полностью отрисованы на странице +@short: Срабатывает после отрисовки данных на странице @signature: onDataRender: () =\> void @@ -25,4 +25,4 @@ scheduler.parse(demo_events); ### Related API - [onEventLoading](api/event/oneventloading.md) -- [onSchedulerReady](api/event/onschedulerready.md) +- [onSchedulerReady](api/event/onschedulerready.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/ondblclick.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/ondblclick.md index 737305e1..78f45bf5 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/ondblclick.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/ondblclick.md @@ -1,14 +1,14 @@ --- -sidebar_label: "onDblClick" -title: "onDblClick event" -description: "срабатывает, когда пользователь делает двойной клик по событию" +sidebar_label: onDblClick +title: "onDblClick событие" +description: "срабатывает, когда пользователь дважды кликает по событию" --- # onDblClick ### Description -@short: Срабатывает, когда пользователь делает двойной клик по событию +@short: Срабатывает, когда пользователь дважды кликает по событию @signature: onDblClick: (id: string, e: Event) =\> boolean; @@ -18,17 +18,17 @@ description: "срабатывает, когда пользователь дел - `e` - (required) *Event* - объект нативного события ### Returns -- ` result` - (boolean) - указывает, будет ли выполнено действие по умолчанию для события (true) или оно будет предотвращено (false) +- `result` - (boolean) - определяет, будет ли выполнено действие по умолчанию события (`true`) или отменено (`false`) ### Example ~~~jsx -scheduler.attachEvent("onDblClick", function (id, e){ +scheduler.attachEvent("onDblClick", (id, e) => { //любая пользовательская логика здесь return true; -}) +}); ~~~ ### Details -Это событие можно блокировать. Возврат *false* остановит выполнение действия по умолчанию. +Событие можно блокировать. Вернуть `false`, чтобы отменить поведение по умолчанию. \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/ondestroy.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/ondestroy.md index a43bf713..8f2967c9 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/ondestroy.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/ondestroy.md @@ -1,14 +1,14 @@ --- -sidebar_label: "onDestroy" -title: "onDestroy event" -description: "срабатывает один раз после очистки планировщика с помощью метода [destructor](api/method/destructor.md)" +sidebar_label: onDestroy +title: "Событие onDestroy" +description: "срабатывает после того, как планировщик очищен методом [destructor](api/method/destructor.md)" --- # onDestroy ### Description -@short: Срабатывает один раз после очистки планировщика с помощью метода [destructor](api/method/destructor.md) +@short: Срабатывает после того, как планировщик очищен методом [destructor](api/method/destructor.md) @signature: onDestroy: () =\> void @@ -26,4 +26,4 @@ scheduler.destructor(); - [destructor](api/method/destructor.md) ### Change log -- добавлено в версии 6.0 +- добавлено в v6.0 \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/ondragend.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/ondragend.md index b4cd0f80..5f37aff7 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/ondragend.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/ondragend.md @@ -1,27 +1,27 @@ --- -sidebar_label: "onDragEnd" -title: "onDragEnd event" -description: "срабатывает, когда действие перетаскивания или изменения размера завершено" +sidebar_label: onDragEnd +title: "Событие onDragEnd" +description: "Срабатывает, когда операция перетаскивания/изменения размера завершена" --- # onDragEnd ### Description -@short: Срабатывает, когда действие перетаскивания или изменения размера завершено +@short: Срабатывает, когда операция перетаскивания/изменения размера завершена @signature: onDragEnd: (id: string, mode: string, e: Event) =\> void; ### Parameters - `id` - (required) *string* - идентификатор события -- `mode` - (required) *string* - тип действия перетаскивания: "move", "resize" или "create" +- `mode` - (required) *string* - режим перетаскивания: "move","resize" или "create" - `e` - (required) *Event* - нативный объект события ### Example ~~~jsx -var dragged_event; +let dragged_event; scheduler.attachEvent("onBeforeDrag", function (id, mode, e){ // это помогает определить событие, которое перетаскивается dragged_event = scheduler.getEvent(id); @@ -29,10 +29,10 @@ scheduler.attachEvent("onBeforeDrag", function (id, mode, e){ }); scheduler.attachEvent("onDragEnd", function(id, mode, e){ - var event_obj = dragged_event; + let event_obj = dragged_event; // здесь разместите вашу кастомную логику }); ~~~ ### Related API -- [onBeforeDrag](api/event/onbeforedrag.md) +- [onBeforeDrag](api/event/onbeforedrag.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onemptyclick.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onemptyclick.md index 56eec663..03d372f5 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onemptyclick.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onemptyclick.md @@ -1,29 +1,29 @@ --- -sidebar_label: "onEmptyClick" +sidebar_label: onEmptyClick title: "onEmptyClick event" -description: "срабатывает, когда пользователь кликает по пустой области внутри scheduler (не по событиям)" +description: "Срабатывает, когда пользователь кликает по пустому месту в расписании (не по событиям)" --- # onEmptyClick ### Description -@short: Срабатывает, когда пользователь кликает по пустой области внутри scheduler (не по событиям) +@short: Срабатывает, когда пользователь кликает по пустому месту в расписании (не по событиям) @signature: onEmptyClick: (date: object, e: Event) =\> void; ### Parameters -- `date` - (required) *object* - дата, соответствующая месту, где пользователь кликнул -- `e` - (required) *Event* - объект нативного события +- `date` - (required) *object* - дата, которая соответствует точке, по которой пользователь кликает +- `e` - (required) *Event* - нативный объект события ### Example ~~~jsx scheduler.attachEvent("onEmptyClick", function (date, e){ - //любая ваша логика здесь + // любая ваша логика здесь }); ~~~ ### Related samples -- [Handling the pointer highlighting](https://docs.dhtmlx.com/scheduler/samples/09_api/06_hightlight_and_single_click_create.html) +- [Обработка подсветки указателя](https://docs.dhtmlx.com/scheduler/samples/09_api/06_hightlight_and_single_click_create.html) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onerror.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onerror.md index f805be9b..4c14bd05 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onerror.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onerror.md @@ -1,23 +1,23 @@ --- -sidebar_label: "onError" -title: "onError event" -description: "Срабатывает, когда [assert](api/method/assert.md) получает значение 'false', что означает, что утверждение (assertion) не выполнено." +sidebar_label: onError +title: "Событие onError" +description: "срабатывает, когда [assert](api/method/assert.md) получает значение 'false', то есть когда утверждение не выполняется" --- # onError ### Description -@short: Срабатывает, когда [assert](api/method/assert.md) получает значение 'false', что означает, что утверждение (assertion) не выполнено. +@short: срабатывает, когда [assert](api/method/assert.md) получает значение 'false', то есть когда утверждение не выполняется -@signature: onError: (errorMessage: string) =\> boolean; +@signature: onError: (errorMessage: string) => boolean; ### Parameters -- `errorMessage` - (required) *string* - строка, содержащая сообщение об ошибке из метода [assert](api/method/assert.md) +- `errorMessage` - (required) *string* - строка с текстом ошибки из метода [assert](api/method/assert.md) ### Returns -- ` result` - (boolean) - определяет, будет ли выполнено действие по умолчанию события (true) или оно будет остановлено (false) +- ` result` - (boolean) - определяет, будет ли выполнено действие по умолчанию события (true) или отменено (false) ### Example @@ -32,7 +32,7 @@ scheduler.attachEvent("onError", function(errorMessage){ ### Details -Это событие можно заблокировать. Возврат false остановит поведение по умолчанию, которым является показ сообщения об ошибке в красном боксе в правом верхнем углу. +Событие можно блокировать. Возврат false предотвратит выполнение поведения по умолчанию (показ сообщения об ошибке в красном окне в правом верхнем углу) ### Change log -- добавлено в версии 6.0 +- добавлено в версии 6.0 \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oneventadded.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oneventadded.md index 792781c1..1be46e28 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oneventadded.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oneventadded.md @@ -1,29 +1,29 @@ --- -sidebar_label: "onEventAdded" -title: "onEventAdded event" -description: "срабатывает при добавлении нового события в scheduler" +sidebar_label: onEventAdded +title: "onEventAdded событие" +description: "срабатывает, когда пользователь добавляет новое событие в планировщик" --- # onEventAdded ### Description -@short: Срабатывает при добавлении нового события в scheduler +@short: Срабатывает, когда пользователь добавляет новое событие в планировщик @signature: onEventAdded: (id: string, ev: object) =\> void; ### Parameters -- `id` - (required) *string* - уникальный идентификатор события -- `ev` - (required) *object* - сам объект события +- `id` - (required) *string* - идентификатор события +- `ev` - (required) *object* - объект события ### Example ~~~jsx scheduler.attachEvent("onEventAdded", function(id,ev){ - // здесь можно разместить кастомную логику + // любая ваша логика здесь }); ~~~ ### Related samples -- [Highlighted timespans in Month view](https://docs.dhtmlx.com/scheduler/samples/09_api/07_highlighted_timespans_month_view.html) +- [Выделенные временные диапазоны во месячном виде](https://docs.dhtmlx.com/scheduler/samples/09_api/07_highlighted_timespans_month_view.html) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oneventcancel.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oneventcancel.md index c05e96b1..123b9de3 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oneventcancel.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oneventcancel.md @@ -1,26 +1,26 @@ --- -sidebar_label: "onEventCancel" +sidebar_label: onEventCancel title: "onEventCancel event" -description: "срабатывает, когда пользователь нажимает кнопку 'Cancel' в лайтбоксе (форме редактирования)" +description: "срабатывает при нажатии пользователем кнопки 'Cancel' в lightbox (форме редактирования)" --- # onEventCancel ### Description -@short: Срабатывает, когда пользователь нажимает кнопку 'Cancel' в лайтбоксе (форме редактирования) +@short: Срабатывает, когда пользователь нажимает кнопку 'Cancel' в lightbox (форме редактирования) @signature: onEventCancel: (id: string, flag: boolean) =\> void; ### Parameters - `id` - (required) *string* - идентификатор события -- `flag` - (required) *boolean* - принимает значение 'true', если пользователь отменяет создание нового события,
'false', если редактируется уже существующее событие +- `flag` - (required) *boolean* - возвращает 'true', если пользователь отменяет новое событие,
'false' - если редактируемое событие уже существует ### Example ~~~jsx scheduler.attachEvent("onEventCancel", function(id, flag){ - //любая ваша логика здесь + // любая ваша логика здесь }); -~~~ +~~~ \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oneventchanged.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oneventchanged.md index 28a3b1af..6cea6fd9 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oneventchanged.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oneventchanged.md @@ -1,29 +1,29 @@ --- -sidebar_label: "onEventChanged" -title: "onEventChanged event" -description: "срабатывает один раз, когда пользователь заканчивает редактирование события и сохраняет изменения (после нажатия кнопок редактирования и сохранения в панели события или окне деталей)" +sidebar_label: onEventChanged +title: "onEventChanged событие" +description: "возникает после того, как пользователь отредактировал событие и сохранил изменения (после нажатия кнопок редактирования и сохранения на панели события или в окне деталей)" --- # onEventChanged ### Description -@short: Срабатывает один раз, когда пользователь заканчивает редактирование события и сохраняет изменения (после нажатия кнопок редактирования и сохранения в панели события или окне деталей) +@short: Возникает после того, как пользователь отредактировал событие и сохранил изменения (после нажатия кнопок редактирования и сохранения на панели события или в окне деталей) @signature: onEventChanged: (id: string, ev: object) =\> void; ### Parameters -- `id` - (required) *string* - id события -- `ev` - (required) *object* - объект события +- `id` - (обязательный) *string* - идентификатор события +- `ev` - (обязательный) *object* - объект события ### Example ~~~jsx scheduler.attachEvent("onEventChanged", function(id,ev){ - //любая пользовательская логика здесь + // любая ваша логика здесь }); ~~~ ### Related samples -- [Highlighted timespans in Month view](https://docs.dhtmlx.com/scheduler/samples/09_api/07_highlighted_timespans_month_view.html) +- [Выделенные временные интервалы в месячном представлении](https://docs.dhtmlx.com/scheduler/samples/09_api/07_highlighted_timespans_month_view.html) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oneventcollision.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oneventcollision.md index f778d21e..7e214ba1 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oneventcollision.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oneventcollision.md @@ -1,30 +1,30 @@ --- -sidebar_label: "onEventCollision" +sidebar_label: onEventCollision title: "onEventCollision event" -description: "срабатывает, когда пользователь пытается создать новое событие или изменить существующее в уже занятый временной интервал" +description: "срабатывает, когда пользователь пытается создать новое событие (или изменить существующее) внутри уже занятого временного слота" --- # onEventCollision ### Description -@short: Срабатывает, когда пользователь пытается создать новое событие или изменить существующее в уже занятый временной интервал +@short: Срабатывает, когда пользователь пытается создать новое событие (или изменить существующее) внутри уже занятого временного слота @signature: onEventCollision: (ev: object, evs: array) =\> boolean; ### Parameters - `ev` - (required) *object* - объект события -- `evs` - (required) *array* - коллекция объектов событий, которые уже запланированы на тот же временной интервал +- `evs` - (required) *array* - коллекция объектов событий, которые уже занимают один и тот же слот времени ### Returns -- ` result` - (boolean) - определяет, будет ли выполнено действие по умолчанию для события (true) или отменено (false) +- ` result` - (boolean) - определяет, будет ли выполнение действия по умолчанию события выполнено (true) или отменено (false) ### Example ~~~jsx scheduler.attachEvent("onEventCollision", function (ev, evs){ - // любая кастомная логика здесь + // любая ваша логика здесь return true; }); ~~~ @@ -32,7 +32,7 @@ scheduler.attachEvent("onEventCollision", function (ev, evs){ ### Details :::note - Для работы события требуется активировать плагин [collision](guides/extensions-list.md#collision). + Чтобы событие работало, необходимо активировать плагин [collision](guides/extensions-list.md#collision). ::: -Возврат true из обработчика предотвращает добавление или редактирование события. Возврат false разрешает коллизию, то есть событие будет добавлено или изменено несмотря на перекрытие. +Возвращение true из функции обработчика блокирует добавление/изменение события. Возвращение false — допускает столкновение, т.е. добавление/изменение событий. \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oneventcopied.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oneventcopied.md index abecbac6..d8204a96 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oneventcopied.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oneventcopied.md @@ -1,14 +1,14 @@ --- -sidebar_label: "onEventCopied" -title: "onEventCopied event" -description: "срабатывает, когда пользователь нажимает сочетание клавиш 'CTRL+C' (работает только если включено расширение 'keyboard navigation')" +sidebar_label: onEventCopied +title: "Событие onEventCopied" +description: "Срабатывает, когда пользователь нажимает сочетание клавиш 'CTRL+C' (только с включенным расширением 'keyboard navigation')" --- # onEventCopied ### Description -@short: Срабатывает, когда пользователь нажимает сочетание клавиш 'CTRL+C' (работает только если включено расширение 'keyboard navigation') +@short: Срабатывает, когда пользователь нажимает сочетание клавиш 'CTRL+C' (только с включенным расширением 'keyboard navigation') @signature: onEventCopied: (ev: object) =\> void; @@ -26,16 +26,16 @@ scheduler.attachEvent("onEventCopied", function(ev) { ~~~ ### Related samples -- [Keyboard navigation in the scheduler](https://docs.dhtmlx.com/scheduler/samples/03_extensions/07_navigation_plugin.html) -- [Recurring events](https://docs.dhtmlx.com/scheduler/samples/03_extensions/01_recurring_events.html) -- [Creating message boxes](https://docs.dhtmlx.com/scheduler/samples/09_api/02_dhtmlx_message.html) +- [Навигация клавиатурой в планировщике](https://docs.dhtmlx.com/scheduler/samples/03_extensions/07_navigation_plugin.html) +- [Повторяющиеся события](https://docs.dhtmlx.com/scheduler/samples/03_extensions/01_recurring_events.html) +- [Создание окон сообщений](https://docs.dhtmlx.com/scheduler/samples/09_api/02_dhtmlx_message.html) ### Details :::note - Это событие работает только при активированном расширении [key_nav](guides/extensions-list.md#keyboard-navigation). + Событие требует включенного расширения [key_nav](guides/extensions-list.md#keyboard-navigation) для включения. ::: ### Related Guides - [onEventCut](api/event/oneventcut.md) -- [onEventPasted](api/event/oneventpasted.md) +- [onEventPasted](api/event/oneventpasted.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oneventcreated.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oneventcreated.md index 3a9c4755..b892ccfd 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oneventcreated.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oneventcreated.md @@ -1,26 +1,26 @@ ---- -sidebar_label: "onEventCreated" -title: "onEventCreated event" -description: "срабатывает, когда пользователь начинает создание нового события (либо двойным кликом, либо перетаскиванием)" +--- +sidebar_label: onEventCreated +title: "onEventCreated событие" +description: "срабатывает, когда пользователь начинает создание нового события (двойной клик или перетаскивание)" --- # onEventCreated ### Description -@short: Срабатывает, когда пользователь начинает создание нового события (либо двойным кликом, либо перетаскиванием) +@short: Срабатывает, когда пользователь начинает создание нового события (двойной клик или перетаскивание) @signature: onEventCreated: (id: string, e: Event) =\> void; ### Parameters -- `id` - (required) *string* - уникальный идентификатор события +- `id` - (required) *string* - идентификатор события - `e` - (required) *Event* - нативный объект события ### Example ~~~jsx scheduler.attachEvent("onEventCreated", function(id,e){ - //здесь можно добавить пользовательскую логику + // любая ваша логика здесь }); -~~~ +~~~ \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oneventcut.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oneventcut.md index c1a0985b..c22e5018 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oneventcut.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oneventcut.md @@ -1,20 +1,20 @@ --- -sidebar_label: "onEventCut" -title: "onEventCut event" -description: "срабатывает, когда пользователь нажимает сочетание клавиш 'CTRL+X' (работает только если включено расширение 'keyboard navigation')" +sidebar_label: onEventCut +title: "onEventCut событие" +description: "срабатывает, когда пользователь нажимает сочетание клавиш CTRL+X (только при включенном расширении 'keyboard navigation')" --- # onEventCut ### Description -@short: Срабатывает, когда пользователь нажимает сочетание клавиш 'CTRL+X' (работает только если включено расширение 'keyboard navigation') +@short: Срабатывает, когда пользователь нажимает сочетание клавиш CTRL+X (только при включенном расширении 'keyboard navigation') -@signature: onEventCut: (ev: object) =\> void; +@signature: onEventCut: (ev: object) => void; ### Parameters -- `ev` - (required) *object* - объект события +- `ev` - (обязательно) *object* - объект события ### Example @@ -25,16 +25,17 @@ scheduler.attachEvent("onEventCut", function(ev) { }); ~~~ + ### Related samples -- [Keyboard navigation in the scheduler](https://docs.dhtmlx.com/scheduler/samples/03_extensions/07_navigation_plugin.html) -- [Recurring events](https://docs.dhtmlx.com/scheduler/samples/03_extensions/01_recurring_events.html) +- [Навигация по клавиатуре в планировщике](https://docs.dhtmlx.com/scheduler/samples/03_extensions/07_navigation_plugin.html) +- [Повторяющиеся события](https://docs.dhtmlx.com/scheduler/samples/03_extensions/01_recurring_events.html) ### Details :::note - Это событие работает только при активном расширении [key_nav](guides/extensions-list.md#keyboard-navigation). +Событие требует включенного расширения [key_nav](guides/extensions-list.md#keyboard-navigation). ::: ### Related Guides - [onEventCopied](api/event/oneventcopied.md) -- [onEventPasted](api/event/oneventpasted.md) +- [onEventPasted](api/event/oneventpasted.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oneventdeleted.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oneventdeleted.md index 7748140d..d431db39 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oneventdeleted.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oneventdeleted.md @@ -1,33 +1,33 @@ --- -sidebar_label: "onEventDeleted" -title: "onEventDeleted event" -description: "срабатывает сразу после удаления события (доступно с версии 3.0+)" +sidebar_label: onEventDeleted +title: "onEventDeleted событие" +description: "срабатывает после удаления указанного события (версия 3.0+)" --- # onEventDeleted ### Description -@short: Срабатывает сразу после удаления события (доступно с версии 3.0+) +@short: Срабатывает после удаления указанного события (версия 3.0+) @signature: onEventDeleted: (id: string, ev: object) =\> void; ### Parameters -- `id` - (required) *string* - id события +- `id` - (required) *string* - идентификатор события - `ev` - (required) *object* - объект события ### Example ~~~jsx scheduler.attachEvent("onEventDeleted", function(id,ev){ - // custom code + // любая ваша логика здесь }); ~~~ ### Related samples -- [Highlighted timespans in Month view](https://docs.dhtmlx.com/scheduler/samples/09_api/07_highlighted_timespans_month_view.html) +- [Выделенные временные интервалы в Month view](https://docs.dhtmlx.com/scheduler/samples/09_api/07_highlighted_timespans_month_view.html) ### Details -Это событие срабатывает независимо от того, используется ли библиотека DataProcessor. +Событие будет срабатывать независимо от того, используется ли библиотека DataProcessor или нет. \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oneventdrag.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oneventdrag.md index d82ae335..18e99779 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oneventdrag.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oneventdrag.md @@ -1,28 +1,28 @@ --- -sidebar_label: "onEventDrag" +sidebar_label: onEventDrag title: "onEventDrag event" -description: "срабатывает при перетаскивании или изменении размера события внутри scheduler" +description: "срабатывает при перетаскивании/изменении размеров событий в планировщике" --- # onEventDrag ### Description -@short: Срабатывает при перетаскивании или изменении размера события внутри scheduler +@short: Срабатывает при перетаскивании/изменении размеров событий в планировщике -@signature: onEventDrag: (id: string, mode: string, ev: Event) =\> void; +@signature: onEventDrag: (id: string, mode: string, e: Event) => void; ### Parameters -- `id` - (required) *string* - ID события -- `mode` - (required) *string* - режим перетаскивания: "move", "resize" или "new-size" (при создании новых событий) +- `id` - (required) *string* - идентификатор события +- `mode` - (required) *string* - режим перетаскивания: "move","resize" или "new-size" (создание новых событий) - `e` - (required) *Event* - нативный объект события ### Example ~~~jsx -scheduler.attachEvent("onEventDrag", function (id, mode, e){ - // здесь можно добавить пользовательскую логику +scheduler.attachEvent("onEventDrag", (id, mode, e) => { + // любая пользовательская логика здесь }); ~~~ @@ -34,6 +34,6 @@ scheduler.attachEvent("onEventDrag", function (id, mode, e){ Описание режимов: -- **move** - событие перетаскивается по scheduler. -- **resize** - событие изменяется в размере с помощью drag-and-drop. -- **new-size** - создаётся новое событие с помощью drag-and-drop. +- `move` - пользователь перетаскивает событие внутри Scheduler +- `resize` - пользователь изменяет размер события с помощью перетаскивания +- `new-size` - пользователь создает новое событие путем перетаскивания \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oneventdragin.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oneventdragin.md index 92756157..28901d34 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oneventdragin.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oneventdragin.md @@ -1,14 +1,14 @@ --- -sidebar_label: "onEventDragIn" +sidebar_label: onEventDragIn title: "onEventDragIn event" -description: "срабатывает, когда перетаскиваемое событие входит в scheduler" +description: "срабатывает, когда перетащенное событие перемещается во планировщик" --- # onEventDragIn ### Description -@short: Срабатывает, когда перетаскиваемое событие входит в scheduler +@short: Срабатывает, когда перетащенное событие перемещается во планировщик @signature: onEventDragIn: (id: string, e: Event) =\> void; @@ -21,15 +21,15 @@ description: "срабатывает, когда перетаскиваемое ~~~jsx scheduler.attachEvent("onEventDragIn", function (id, e){ - //любая ваша логика здесь + // здесь можно поместить произвольную логику }); ~~~ ### Details :::note - Это событие возникает только во время drag-and-drop действий между разными schedulers. + Событие срабатывает только в случае перетаскивания между планировщиками. ::: ### Related Guides -- [Операции Drag-and-Drop](guides/drag-between.md) +- [Перетаскивание и отпускание](guides/drag-between.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oneventdragout.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oneventdragout.md index 9f206ede..86659ec4 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oneventdragout.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oneventdragout.md @@ -1,35 +1,35 @@ --- -sidebar_label: "onEventDragOut" +sidebar_label: onEventDragOut title: "onEventDragOut event" -description: "срабатывает, когда перетаскиваемое событие покидает область планировщика" +description: "срабатывает, когда перетаскиваемое событие перемещается за пределы планировщика" --- # onEventDragOut ### Description -@short: Срабатывает, когда перетаскиваемое событие покидает область планировщика +@short: Срабатывает, когда перетаскиваемое событие перемещается за пределы планировщика @signature: onEventDragOut: (id: string, e: Event) =\> void; ### Parameters -- `id` - (required) *string* - id события -- `e` - (required) *Event* - объект нативного события +- `id` - (required) *string* - идентификатор события +- `e` - (required) *Event* - нативный объект события ### Example ~~~jsx scheduler.attachEvent("onEventDragOut", function (id, e){ - //любая ваша логика здесь + // любая ваша логика здесь }); ~~~ ### Details :::note - Это событие происходит только во время операций drag-and-drop между разными планировщиками. + Событие срабатывает только в случае перетаскивания между планировщиками. ::: ### Related Guides -- [Операции Drag-and-Drop](guides/drag-between.md) +- [Операции перетаскивания](guides/drag-between.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oneventdropout.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oneventdropout.md index 52dea2bb..82425416 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oneventdropout.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oneventdropout.md @@ -1,14 +1,14 @@ --- -sidebar_label: "onEventDropOut" -title: "onEventDropOut event" -description: "срабатывает, когда перетаскиваемое событие отпущено за пределами области scheduler" +sidebar_label: onEventDropOut +title: "onEventDropOut событие" +description: "срабатывает, когда перетаскиваемое событие сбрасывается на область за пределами расписателя" --- # onEventDropOut ### Description -@short: Срабатывает, когда перетаскиваемое событие отпущено за пределами области scheduler +@short: Срабатывает, когда перетаскиваемое событие сбрасывается на область за пределами расписателя @signature: onEventDragOut: (id: string, ev: object, to: object, e: Event) =\> boolean; @@ -16,17 +16,17 @@ description: "срабатывает, когда перетаскиваемое - `id` - (required) *string* - идентификатор события - `ev` - (required) *object* - объект события -- `to` - (required) *object* - целевой scheduler (null, если событие отпущено на пустом месте) -- `e` - (required) *Event* - родной объект события +- `to` - (required) *object* - целевой scheduler (null, если сброшено в пустую область) +- `e` - (required) *Event* - нативный объект события ### Returns -- ` result` - (boolean) - указывает, будет ли выполнено действие по умолчанию для события (true) или оно будет отменено (false) +- ` result` - (boolean) - определяет, будет ли выполнено действие по умолчанию у события (true) или отменено (false) ### Example ~~~jsx scheduler.attachEvent("onEventDropOut", function (id, ev, to, e){ - // здесь можно добавить кастомную логику + // любая ваша логика здесь return true; }); ~~~ @@ -34,8 +34,8 @@ scheduler.attachEvent("onEventDropOut", function (id, ev, to, e){ ### Details :::note - Это событие срабатывает только во время операций drag-and-drop между разными schedulers. + Событие срабатывает только в случае перетаскивания между расписателями. ::: ### Related Guides -- [Операции Drag-and-Drop](guides/drag-between.md) +- [Операции drag-and-drop](guides/drag-between.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oneventidchange.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oneventidchange.md index 5c2c5303..9b59527d 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oneventidchange.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oneventidchange.md @@ -1,30 +1,30 @@ --- -sidebar_label: "onEventIdChange" -title: "onEventIdChange event" -description: "срабатывает при обновлении id события" +sidebar_label: onEventIdChange +title: "onEventIdChange событие" +description: "срабатывает при изменении id события" --- # onEventIdChange ### Description -@short: Срабатывает при обновлении id события +@short: Срабатывает, когда изменяется id события @signature: onEventIdChange: (old_id: string, new_id: string) =\> void; ### Parameters -- `old_id` - (required) *string* - оригинальный id события -- `new_id` - (required) *string* - обновлённый id события +- `old_id` - (required) *string* - исходный идентификатор события +- `new_id` - (required) *string* - новый идентификатор события ### Example ~~~jsx scheduler.attachEvent("onEventIdChange", function(old_id,new_id){ - //любая пользовательская логика здесь + // любая ваша логика здесь }); ~~~ ### Details -Это событие обычно происходит после подтверждения операции вставки, когда клиентский ID заменяется на ID из базы данных. +Обычно событие срабатывает после получения подтверждения операции вставки (замена ID на стороне клиента на ID в базе данных) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oneventloading.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oneventloading.md index 5b17c9aa..836254ca 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oneventloading.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oneventloading.md @@ -1,34 +1,34 @@ --- -sidebar_label: "onEventLoading" -title: "onEventLoading event" -description: "срабатывает при загрузке события из источника данных" +sidebar_label: onEventLoading +title: "onEventLoading событие" +description: "вызывает событие, когда событие загружается из источника данных" --- # onEventLoading ### Description -@short: Срабатывает при загрузке события из источника данных +@short: Срабатывает, когда событие загружается из источника данных @signature: onEventLoading: (ev: object) =\> boolean; ### Parameters -- `ev` - (required) *object* - объект события (представляет элемент данных) +- `ev` - (required) *object* - объект события (объект элемента данных) ### Returns -- ` result` - (boolean) - определяет, будет ли выполнено действие по умолчанию для события (true) или отменено (false) +- ` result` - (boolean) - определяет, будет ли выполнено действие по умолчанию события (true) или отменено (false) ### Example ~~~jsx scheduler.attachEvent("onEventLoading", function(ev){ - // здесь можно добавить пользовательскую логику + // любая ваша логика здесь return true; }); ~~~ ### Details -- Это событие можно заблокировать. Возврат *false* предотвращает загрузку элемента данных в scheduler. -- Срабатывает для каждого элемента данных в источнике. +- Событие можно заблокировать. Вернуть *false* — и элемент данных не будет загружен в scheduler. +- Событие вызывается для каждого элемента данных в источнике данных. \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oneventpasted.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oneventpasted.md index 49d54a11..9b43720f 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oneventpasted.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oneventpasted.md @@ -1,40 +1,40 @@ ---- -sidebar_label: "onEventPasted" +--- +sidebar_label: onEventPasted title: "onEventPasted event" -description: "вызывается, когда пользователь нажимает сочетание клавиш 'CTRL+V'" +description: "срабатывает, когда пользователь нажимает сочетание клавиш CTRL+V" --- # onEventPasted ### Description -@short: Вызывается, когда пользователь нажимает сочетание клавиш 'CTRL+V' +@short: Срабатывает, когда пользователь нажимает сочетание клавиш 'CTRL+V' @signature: onEventPasted: (isCopy: boolean, pasted_ev: object, original_ev: object) =\> void; ### Parameters -- `isCopy` - (required) *boolean* - указывает, было ли событие скопировано или вырезано перед вставкой. Значение true означает, что событие было скопировано -- `pasted_ev` - (required) *object* - новый объект события, созданный в результате действия вставки -- `original_ev` - (required) *object* - оригинальный объект события, который был скопирован или вырезан +- `isCopy` - (required) *boolean* - указывает, было ли событие скопировано или вырезано перед вставкой. Значение true говорит, что событие было скопировано +- `pasted_ev` - (required) *object* - объект новой записи данных (событие, созданное после вставки) +- `original_ev` - (required) *object* - объект исходной записи данных (событие, которое было скопировано/вырезано) ### Example ~~~jsx scheduler.attachEvent("onEventPasted", function(isCopy, pasted_ev, original_ev) { - //любая пользовательская логика здесь + // любая ваша логика здесь }); ~~~ ### Related samples -- [Keyboard navigation in the scheduler](https://docs.dhtmlx.com/scheduler/samples/03_extensions/07_navigation_plugin.html) +- [Навигация по клавиатуре в планировщике](https://docs.dhtmlx.com/scheduler/samples/03_extensions/07_navigation_plugin.html) ### Details :::note - Для этого события необходимо включить расширение [key_nav](guides/extensions-list.md#keyboard-navigation). -::: + Событие требует включения расширения [key_nav](guides/extensions-list.md#keyboard-navigation). + ::: ### Related Guides - [onEventCopied](api/event/oneventcopied.md) -- [onEventCut](api/event/oneventcut.md) +- [onEventCut](api/event/oneventcut.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oneventsave.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oneventsave.md index 3cf1f229..f57492fd 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oneventsave.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oneventsave.md @@ -1,22 +1,22 @@ --- -sidebar_label: "onEventSave" +sidebar_label: onEventSave title: "onEventSave event" -description: "срабатывает, когда пользователь нажимает кнопку «сохранить» в лайтбоксе (форме редактирования)" +description: "срабатывает, когда пользователь нажимает кнопку «Сохранить» в lightbox (форме редактирования)" --- # onEventSave ### Description -@short: Срабатывает, когда пользователь нажимает кнопку «сохранить» в лайтбоксе (форме редактирования) +@short: Срабатывает, когда пользователь нажимает кнопку «Сохранить» в lightbox (форме редактирования) @signature: onEventSave: (id: string, ev: object, original_ev: object) =\> void; ### Parameters -- `id` - (required) *string* - id события -- `ev` - (required) *object* - промежуточный объект события, содержащий значения из лайтбокса -- `is_new` - (required) *Date* - возвращает дату создания события, если сохраняется новое событие; иначе null, если событие уже существует +- `id` - (required) *string* - идентификатор события +- `ev` - (required) *object* - промежуточный объект события, содержащий значения lightbox. +- `is_new` - (required) *Date* - возвращает дату создания события (то есть текущую дату), если пользователь сохраняет новое событие. null - если сохраняемое событие уже существует ### Returns - ` result` - (boolean) - определяет, должна ли выполняться стандартная операция сохранения события (true) или быть отменена (false) @@ -42,9 +42,9 @@ scheduler.attachEvent("onEventSave",function(id,ev,is_new){ ### Details -Это событие можно заблокировать, оно полезно для валидации. Возврат *false* предотвратит стандартный процесс сохранения. +Событие блокируемое и может использоваться для валидации. Возвратите *false* чтобы отменить обработку по умолчанию. -Учтите: +Обратите внимание: -- Когда это событие срабатывает, значения из лайтбокса ещё не применены к исходному событию, поэтому scheduler.getEvent(id) возвращает событие в его исходном состоянии. -- Объект 'ev' включает только те свойства, которые соответствуют полям ввода, присутствующим в лайтбоксе; например, если в лайтбоксе только одно поле, 'ev' будет содержать только это одно свойство. +- Когда событие срабатывает - значения, заданные в lightbox, ещё не применены к исходному событию, и scheduler.getEvent(id) вернет вам неизмененный экземпляр. +- Объект 'ev' будет содержать только те значения, которые устанавливаются lightbox, то есть если в lightbox есть всего один input - у объекта 'ev' будет определено только одно свойство \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oneventselected.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oneventselected.md index e3207f4b..f152dff7 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oneventselected.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oneventselected.md @@ -1,5 +1,5 @@ --- -sidebar_label: "onEventSelected" +sidebar_label: onEventSelected title: "onEventSelected event" description: "срабатывает, когда пользователь выбирает событие в планировщике" --- @@ -8,21 +8,21 @@ description: "срабатывает, когда пользователь выб ### Description -@short: Срабатывает, когда пользователь выбирает событие в планировщике +@short: Срабатывает, когда пользователь выбирает событие в расписании @signature: onEventSelected: (id: string) =\> void; ### Parameters -- `id` - (required) *string* - ID выбранного события +- `id` - (required) *string* - идентификатор события ### Example ~~~jsx scheduler.attachEvent("onEventSelected", function(id){ - //любая ваша логика здесь + // любая ваша логика здесь }); ~~~ ### Related API -- [onEventUnselected](api/event/oneventunselected.md) +- [onEventUnselected](api/event/oneventunselected.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oneventunselected.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oneventunselected.md index acb6ee87..aacf5c65 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oneventunselected.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/oneventunselected.md @@ -1,28 +1,28 @@ --- -sidebar_label: "onEventUnselected" +sidebar_label: onEventUnselected title: "onEventUnselected event" -description: "срабатывает, когда пользователь отменяет выбор события, выбрав другое" +description: "срабатывает, когда пользователь снимает выделение с события, выбирая другое событие" --- # onEventUnselected ### Description -@short: Срабатывает, когда пользователь отменяет выбор события, выбрав другое +@short: Срабатывает, когда пользователь снимает выделение с события, выбирая другое событие @signature: onEventUnselected: (id: string) =\> void; ### Parameters -- `id` - (required) *string* - id события, которое было отменено в выборе +- `id` - (required) *string* - идентификатор события, которое было снято с выделения ### Example ~~~jsx scheduler.attachEvent("onEventUnselected", function(id){ - //любая пользовательская логика здесь + // любая ваша логика здесь }); ~~~ -### Related API -- [onEventSelected](api/event/oneventselected.md) +### Связанные API +- [onEventSelected](api/event/oneventselected.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onexpand.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onexpand.md index 414eae49..cf8e2e31 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onexpand.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onexpand.md @@ -1,32 +1,33 @@ --- -sidebar_label: "onExpand" -title: "onExpand event" -description: "Срабатывает, когда пользователь нажимает на иконку разворачивания, чтобы изменить размер планировщика с исходного состояния на «полный экран»." +sidebar_label: onExpand +title: "onExpand событие" +description: "Срабатывает, когда пользователь нажимает на значок разворачивания, чтобы изменить размер планировщика с исходного на 'полный экран'." --- # onExpand ### Description -@short: Срабатывает, когда пользователь нажимает на иконку разворачивания, чтобы изменить размер планировщика с исходного состояния на «полный экран». +@short: Срабатывает, когда пользователь кликает по значку разворачивания, чтобы изменить размер планировщика с исходного на 'полный экран'. + +@signature: onExpand: () => void -@signature: onExpand: () =\> void ### Example ~~~jsx scheduler.attachEvent("onExpand",function(){ - //любая пользовательская логика здесь + // любая ваша логика здесь }); ~~~ ### Details :::note - Для срабатывания этого события необходимо включить расширение [expand](guides/extensions-list.md#expand). + Это событие требует включённого расширения [expand](guides/extensions-list.md#expand) для включения. ::: ### Related API - [onBeforeExpand](api/event/onbeforeexpand.md) - [onBeforeCollapse](api/event/onbeforecollapse.md) -- [onCollapse](api/event/oncollapse.md) +- [onCollapse](api/event/oncollapse.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onexternaldragin.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onexternaldragin.md index 43195d5d..2c49e912 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onexternaldragin.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onexternaldragin.md @@ -1,25 +1,25 @@ --- -sidebar_label: "onExternalDragIn" -title: "onExternalDragIn event" -description: "срабатывает, когда данные перетаскиваются в scheduler из внешнего компонента DHTMLX (требуется включение расширения dnd)" +sidebar_label: onExternalDragIn +title: "onExternalDragIn событие" +description: "выполняется, когда данные перетаскиваются в планировщик из внешнего компонента DHTMLX (только с включенным расширением dnd)" --- # onExternalDragIn ### Description -@short: Срабатывает, когда данные перетаскиваются в scheduler из внешнего компонента DHTMLX (требуется включение расширения dnd) +@short: Вызывает событие, когда данные перетаскиваются в планировщик из внешнего компонента DHTMLX (только с включенным расширением dnd) @signature: onExternalDragIn: (id: string, source: object, e: Event) =\> boolean; ### Parameters -- `id` - (required) *string* - ID перетаскиваемого элемента данных -- `source` - (required) *object* - исходный HTML-элемент, который был перетащен в scheduler -- `e` - (required) *Event* - родительский объект события +- `id` - (required) *string* - идентификатор элемента данных +- `source` - (required) *object* - исходный HTML-элемент, который был перетащён в планировщик +- `e` - (required) *Event* - объект нативного события ### Returns -- ` result` - (boolean) - указывает, будет ли выполнено действие по умолчанию для события (true) или оно будет отменено (false) +- `result` - (boolean) - определяет, будет ли выполнено действие по умолчанию события (true) или отменено (false) ### Example @@ -31,16 +31,16 @@ scheduler.attachEvent("onExternalDragIn", function (id, source, e){ ~~~ ### Related samples -- 10_integration/02_dhtmlxTree_outer_drag.html +- [Integration with dhtmlxTree](https://docs.dhtmlx.com/scheduler/samples/10_integration/02_dhtmlxtree_outer_drag.html) ### Details :::note - Это событие требует включения плагина [outerdrag](guides/extensions-list.md#outerdrag). + The event requires the [outerdrag](guides/extensions-list.md#outerdrag) plugin to be activated. ::: -- Это событие позволяет настраивать вновь создаваемые события, которые возникают в результате действия drag-in. -- Событие можно заблокировать, вернув *false*, что предотвратит создание нового события во время перетаскивания. +- Это событие можно использовать для настройки создаваемых заново событий (которые возникают в результате операций drag-in). +- Это событие можно заблокировать. Возвращение *false* приведёт к тому, что перетаскивание не создаст новое событие. ### Related API -- [onBeforeExternalDragIn](api/event/onbeforeexternaldragin.md) +- [onBeforeExternalDragIn](api/event/onbeforeexternaldragin.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onlightbox.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onlightbox.md index f4428a8e..30f941dc 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onlightbox.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onlightbox.md @@ -1,29 +1,29 @@ --- -sidebar_label: "onLightbox" +sidebar_label: onLightbox title: "onLightbox event" -description: "срабатывает сразу после того, как пользователь открывает lightbox (форму редактирования)" +description: "срабатывает после того, как пользователь открыл lightbox (форма редактирования)" --- # onLightbox ### Description -@short: Срабатывает сразу после того, как пользователь открывает lightbox (форму редактирования) +@short: Срабатывает после того, как пользователь открыл lightbox (форма редактирования) @signature: onLightbox: () =\> void ### Parameters -- `id` - (required) *string* - идентификатор события +- `id` - (обязательно) *string* - идентификатор события ### Example ~~~jsx scheduler.attachEvent("onLightbox", function (id){ - //любая ваша кастомная логика + // любая ваша логика здесь }); ~~~ ### Details -Это событие удобно использовать для настройки различных аспектов lightbox. +Использование этого события — хороший способ настроить что-то в lightbox. \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onlightboxbutton.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onlightboxbutton.md index d928849d..25adce47 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onlightboxbutton.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onlightboxbutton.md @@ -1,40 +1,40 @@ --- -sidebar_label: "onLightboxButton" +sidebar_label: onLightboxButton title: "onLightboxButton event" -description: "срабатывает, когда пользователь нажимает на кастомную кнопку внутри lightbox" +description: "срабатывает, когда пользователь нажимает на пользовательскую кнопку в lightbox" --- # onLightboxButton ### Description -@short: Срабатывает, когда пользователь нажимает на кастомную кнопку внутри lightbox +@short: срабатывает, когда пользователь нажимает на пользовательскую кнопку в lightbox @signature: onLightboxButton: (id: string, node: HTMLElement, e: Event) =\> void; ### Parameters -- `id` - (required) *string* - id кнопки +- `id` - (required) *string* - идентификатор кнопки - `node` - (required) *HTMLElement* - HTML-элемент нажатой кнопки -- `e` - (required) *event* - native объект события 'click' +- `e` - (required) *Event* - объект нативного события 'click' ### Example ~~~jsx scheduler.attachEvent("onLightboxButton", function (id, node, e){ - // здесь разместите любую кастомную логику + // любая ваша логика здесь }); ~~~ ### Related samples -- [Setting/getting values of lightbox's controls](https://docs.dhtmlx.com/scheduler/samples/02_customization/22_opertions_with_lightbox.html) +- [Настройка/получение значений контролов lightbox](https://docs.dhtmlx.com/scheduler/samples/02_customization/22_opertions_with_lightbox.html) ### Details -Это событие срабатывает только для кастомных кнопок, расположенных внизу lightbox. Оно не активируется для дефолтных или секционных кнопок. +Событие срабатывает только для пользовательских кнопок в нижней части lightbox и не срабатывает для кнопок по умолчанию или разделов. -Чтобы определить, открыт ли в данный момент lightbox или закрыт, можно проверить свойство **lightbox_id** из объекта состояния, возвращаемого методом [getState](api/method/getstate.md). -Если lightbox открыт, метод возвращает id активного события; если закрыт - возвращает 'null' или 'undefined': +Чтобы проверить, открыт ли lightbox в данный момент, используйте свойство **lightbox_id** объекта состояния, возвращаемого методом [getState](api/method/getstate.md). +Если lightbox открыт, метод вернет id открытого события, в противном случае вернутся 'null' или 'undefined': ~~~js if (scheduler.getState().lightbox_id){ @@ -45,4 +45,4 @@ if (scheduler.getState().lightbox_id){ ~~~ ### Related Guides -- [Манипуляции с Lightbox](guides/lightbox-editors-manipulations.md) +- [Манипуляции с Lightbox](guides/lightbox-editors-manipulations.md#checking-whether-the-lightbox-is-opened) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onlimitviolation.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onlimitviolation.md index bab8f7e4..8f451226 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onlimitviolation.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onlimitviolation.md @@ -1,39 +1,39 @@ --- -sidebar_label: "onLimitViolation" +sidebar_label: onLimitViolation title: "onLimitViolation event" -description: "срабатывает, когда пользователь пытается назначить время событию, которое в данный момент ограничено или заблокировано" +description: "срабатывает, когда пользователь пытается установить для события время, которое в данный момент ограничено/заблокировано" --- # onLimitViolation ### Description -@short: Срабатывает, когда пользователь пытается назначить время событию, которое в данный момент ограничено или заблокировано +@short: срабатывает, когда пользователь пытается установить для события время, которое в данный момент ограничено/заблокировано @signature: onLimitViolation: (id: string, obj: object) =\> void; ### Parameters -- `id` - (required) *string* - идентификатор события -- `obj` - (required) *object* - объект события +- `id` - (обязательно) *string* - идентификатор события +- `obj` - (обязательно) *object* - объект события ### Example ~~~jsx scheduler.attachEvent("onLimitViolation", function (id, obj){ - //любая ваша логика здесь + // любая ваша логика здесь }); ~~~ ### Details -Это событие срабатывает каждый раз, когда пользователь пытается установить время события на период, который ограничен или заблокирован. Эти ограничения могут быть настроены через: +Примечание: событие вызывается, когда пользователь пытается установить для события время, которое в данный момент ограничено/заблокировано через: -- опции [limit_start](api/config/limit_start.md) и [limit_end](api/config/limit_end.md) +- параметры конфигурации [limit_start](api/config/limit_start.md) и [limit_end](api/config/limit_end.md) - метод [addMarkedTimespan](api/method/addmarkedtimespan.md) :::note -Возврат 'true' из обработчика этого события позволяет событию обойти ограничение и быть назначенным на запрещённое время. +Если вернуть 'true' из обработчика, связанное событие не будет заблокировано и может иметь недопустимое время. -::: +::: \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onloadend.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onloadend.md index 46d7fa70..88edcea5 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onloadend.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onloadend.md @@ -1,21 +1,20 @@ --- -sidebar_label: "onLoadEnd" -title: "onLoadEnd event" -description: "срабатывает один раз после завершения загрузки данных из источника данных" +sidebar_label: onLoadEnd +title: "Событие onLoadEnd" +description: "срабатывает после того, как загрузка данных из источника данных завершена" --- # onLoadEnd ### Description -@short: Срабатывает один раз после завершения загрузки данных из источника данных +@short: Срабатывает после загрузки данных из источника данных. @signature: onLoadEnd: () =\> void ### Example ~~~jsx -```javascript scheduler.attachEvent("onLoadStart", function(){ scheduler.config.readonly = true; }); @@ -23,7 +22,6 @@ scheduler.attachEvent("onLoadStart", function(){ scheduler.attachEvent("onLoadEnd", function(){ scheduler.config.readonly = false; }); -``` ~~~ ### Related API @@ -34,4 +32,4 @@ scheduler.attachEvent("onLoadEnd", function(){ ### Related Guides - [Загрузка данных](guides/loading-data.md) -- [Интеграция с серверной стороной](guides/server-integration.md) +- [Интеграция на стороне сервера](guides/server-integration.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onloaderror.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onloaderror.md index cd6e2b43..9aa2dd9b 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onloaderror.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onloaderror.md @@ -1,14 +1,14 @@ --- -sidebar_label: "onLoadError" -title: "onLoadError event" -description: "вызывается, когда scheduler не может распарсить данные или когда сервер возвращает статус 4xx или 5xx" +sidebar_label: onLoadError +title: "Событие onLoadError" +description: "Вызывается, если планировщик не смог распарсить данные, или если сервер вернул статус ответа 4xx или 5xx" --- # onLoadError ### Description -@short: Вызывается, когда scheduler не может распарсить данные или когда сервер возвращает статус 4xx или 5xx +@short: Вызывается, если планировщик не смог распарсить данные, или если сервер вернул статус ответа 4xx или 5xx @signature: onLoadError: (response: XMLHttpRequest) =\> void @@ -20,18 +20,18 @@ description: "вызывается, когда scheduler не может рас ~~~jsx scheduler.attachEvent("onLoadError", function(response){ - dhtmlx.message("Не удалось загрузить данные"); + dhtmlx.message("Failed to load data"); }); ~~~ ### Details -Это событие вызывается методами [parse](api/method/parse.md) и [load](api/method/load.md). +Событие вызывается методами [parse](api/method/parse.md) и [load](api/method/load.md). -Когда событие срабатывает в результате вызова метода **parse**, функция-обработчик получает объект с свойством *responseText*, содержащим данные для парсинга: +В случае вызова события методом **parse** обработчик принимает в качестве параметра объект со свойством *responseText*, которое будет содержать данные, подлежащие разбору, в качестве значения: ~~~js { responseText: parseArgument } -~~~ +~~~ \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onloadstart.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onloadstart.md index a5901e78..7fa7f05f 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onloadstart.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onloadstart.md @@ -1,26 +1,26 @@ --- -sidebar_label: "onLoadStart" -title: "onLoadStart event" -description: "срабатывает непосредственно перед началом процесса загрузки данных из источника данных" +sidebar_label: onLoadStart +title: "onLoadStart событие" +description: "Срабатывает непосредственно перед началом загрузки данных из источника данных" --- # onLoadStart ### Description -@short: Срабатывает непосредственно перед началом процесса загрузки данных из источника данных +@short: Срабатывает непосредственно перед началом загрузки данных из источника данных -@signature: onLoadStart: () =\> void +@signature: onLoadStart: () => void ### Example ~~~jsx -scheduler.attachEvent("onLoadStart", function(){ - scheduler.config.readonly = true; -}); +scheduler.attachEvent("onLoadStart", function(){ + scheduler.config.readonly = true; +}); -scheduler.attachEvent("onLoadEnd", function(){ - scheduler.config.readonly = false; +scheduler.attachEvent("onLoadEnd", function(){ + scheduler.config.readonly = false; }); ~~~ @@ -31,5 +31,5 @@ scheduler.attachEvent("onLoadEnd", function(){ - [onParse](api/event/onparse.md) ### Related Guides -- [Загрузка данных](guides/loading-data.md) -- [Интеграция с серверной стороной](guides/server-integration.md) +- [Loading Data](guides/loading-data.md) +- [Server-Side Integration](guides/server-integration.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onlocationerror.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onlocationerror.md index d6cb87e2..3d794fda 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onlocationerror.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onlocationerror.md @@ -1,31 +1,31 @@ --- -sidebar_label: "onLocationError" -title: "onLocationError event" -description: "срабатывает, когда местоположение события не может быть найдено на карте (только для Map view)" +sidebar_label: onLocationError +title: "событие onLocationError" +description: "срабатывает, когда местоположение события не может быть найдено на карте (только в представлении Map)" --- # onLocationError ### Description -@short: Срабатывает, когда местоположение события не может быть найдено на карте (только для Map view) +@short: Срабатывает, когда местоположение события не может быть найдено на карте (только в представлении Map) @signature: onLocationError: (id: string) =\> void ### Parameters -- `id` - (required) *string* - id события +- `id` - (required) *string* - идентификатор события ### Example ~~~jsx -// Этот обработчик устанавливает координаты Королевской обсерватории Гринвича -// когда местоположение события не может быть определено +//With such a handler each time the location can be identified, scheduler will apply +//the coordinates of the Greenwich Royal Observatory to the event scheduler.attachEvent("onLocationError", function (id){ - alert("Невозможно определить местоположение"); + alert("Location can't be found"); return google.maps.LatLng(51.477840, -0.001492); - // координаты Королевской обсерватории Гринвича + //the coordinates of the Greenwich Royal Observatory }); ~~~ @@ -33,16 +33,17 @@ scheduler.attachEvent("onLocationError", function (id){ :::note -Это событие срабатывает только если включено свойство конфигурации [map_resolve_event_location](api/config/map_resolve_event_location.md). - +Событие будет срабатывать только при включённой конфигурации [map_resolve_event_location](api/config/map_resolve_event_location.md). + :::
-**Как работает событие?** +**Как работает данное событие?** + +- Если у события в базе данных отсутствуют значения 'lat' и 'lng', планировщик попытается разрешить их на основе значения 'event_location' во время загрузки событий в планировщик. Если указанное местоположение будет идентифицировано, соответствующие координаты будут сохранены в БД. Если нет — планировщик сгенерирует событие **onLocationError**. +- Включение конфигурационного свойства [map_resolve_event_location](api/config/map_resolve_event_location.md) полезно для миграции, но не для производственного этапа. +- Событие будет затрагивать только события, загружаемые из БД. -- Когда у события в базе данных отсутствуют значения 'lat' и 'lng', scheduler пытается определить их по значению 'event_location' при загрузке событий. Если местоположение найдено, координаты сохраняются в базе данных. Если нет, срабатывает событие **onLocationError**. -- Свойство конфигурации [map_resolve_event_location](api/config/map_resolve_event_location.md) в основном предназначено для миграции, а не для использования в продакшене. -- Это событие применяется только к событиям, загружаемым из базы данных. -Это событие позволяет обрабатывать случаи, когда scheduler сталкивается с событием с некорректным или отсутствующим местоположением. Например, оно может возвращать объект **google.maps.LatLng** с запасными координатами, чтобы присвоить их событию при возникновении ошибки. +Событие можно использовать для задания пользовательской реакции на ситуацию, когда планировщик пытается загрузить событие с недопустимым или пустым местоположением.
Например, можно вернуть объект **google.maps.LatLng** с географическими координатами, которые будут применены к событию в случае ошибки. \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onmousedown.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onmousedown.md index 4cc64f65..553bdc3b 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onmousedown.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onmousedown.md @@ -1,20 +1,20 @@ --- -sidebar_label: "onMouseDown" -title: "onMouseDown event" -description: "срабатывает, когда пользователь кликает по элементу планировщика, у которого нет предопределенного обработчика 'onclick'" +sidebar_label: onMouseDown +title: "onMouseDown событие" +description: "Срабатывает, когда пользователь кликает по элементу планировщика, у которого нет предопределённого обработчика 'onlick'" --- # onMouseDown ### Description -@short: Срабатывает, когда пользователь кликает по элементу планировщика, у которого нет предопределенного обработчика 'onclick' +@short: Срабатывает, когда пользователь кликает по элементу планировщика, у которого нет предопределённого обработчика 'onlick' @signature: onMouseDown: (className: string) =\> void ### Parameters -- `className` - (required) *string* - CSS-класс кликнутого элемента +- `className` - (required) *string* - название CSS-класса, определённого для кликнутого элемента ### Example @@ -26,7 +26,7 @@ scheduler.attachEvent("onMouseDown", function(className){ ### Details -Элементы планировщика с предопределёнными обработчиками 'onclick' перечислены в таблице ниже. +Scheduler's elements that have the predefined 'onclick' handlers are listed in the table below.
@@ -48,47 +48,47 @@ scheduler.attachEvent("onMouseDown", function(className){ dhx_cal_event_line - Много-дневные события, отображаемые в представлениях Day, Week, Month, Units, а также любые события в представлении Timeline + Многодневные события в представлениях Day, Week, Month, Units и любое событие в Timeline view dhx_cal_event_clear - Однодневные события в представлении Month + Однодневные события в Month view dhx_event_move - Заголовок блока события, используемый для перетаскивания событий в представлениях Day, Week, Units + Заголовок блока события, используемый для перетаскивания события в Day, Week, Units views dhx_wa_ev_body - Событие, отображаемое в представлении WeekAgenda + Событие в WeekAgenda view dhx_event_resize - Нижняя часть блока события, используемая для изменения размера событий в представлениях Day, Week, Units + Нижняя часть блока события, используемая для изменения размера события в Day, Week, Units views dhx_scale_holder - Колонка в представлениях Day, Week, Units + Столбец в Day, Week, Units views dhx_scale_holder_now - Выделенная колонка, обозначающая текущую дату в представлениях Day, Week, Units + Выделенный столбец с текущей датой в Day, Week, Units views dhx_month_body - Ячейка без заголовка в представлении Month + Ячейка без заголовка в Month view dhx_matrix_cell - Ячейка в представлении Timeline + Ячейка в Timeline view dhx_marked_timespan - Отмеченные (выделенные) ячейки + Помеченные (выделенные) ячейки dhx_time_block Заблокированные ячейки - + \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onmousemove.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onmousemove.md index 099edd4f..30d3bc1b 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onmousemove.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onmousemove.md @@ -1,34 +1,34 @@ --- -sidebar_label: "onMouseMove" -title: "onMouseMove event" -description: "срабатывает при перемещении курсора мыши над scheduler" +sidebar_label: onMouseMove +title: "Событие onMouseMove" +description: "срабатывает, когда указатель мыши перемещается над планировщиком" --- # onMouseMove ### Description -@short: Срабатывает при перемещении курсора мыши над scheduler +@short: Срабатывает при перемещении указателя мыши над планировщиком @signature: onMouseMove: (id: string, e: Event) =\> void ### Parameters - `id` - (required) *string* - идентификатор события -- `e` - (required) *Event* - объект нативного события +- `e` - (required) *Event* - нативный объект события ### Example ~~~jsx scheduler.attachEvent("onMouseMove", function (id, e){ - //любая ваша логика здесь + //any custom logic here }); ~~~ ### Related samples - [Handling the pointer highlighting](https://docs.dhtmlx.com/scheduler/samples/09_api/06_hightlight_and_single_click_create.html) -- 10_integration/02_dhtmlxTree_outer_drag.html +- [Integration with dhtmlxTree](https://docs.dhtmlx.com/scheduler/samples/10_integration/02_dhtmlxtree_outer_drag.html) ### Details -Когда курсор перемещается над событием, обработчик получает id этого события; если курсор не над событием, передается null. +Если пользователь перемещает курсор над событием, функция обработчика принимает идентификатор этого события, иначе - null. \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onoptionsload.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onoptionsload.md index 5a554b3a..f486c3e3 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onoptionsload.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onoptionsload.md @@ -1,14 +1,14 @@ --- -sidebar_label: "onOptionsLoad" -title: "onOptionsLoad event" -description: "срабатывает после обновления частей представления Timeline/Units" +sidebar_label: onOptionsLoad +title: "событие onOptionsLoad" +description: "срабатывает после обновления секций вида Timeline/Units" --- # onOptionsLoad ### Description -@short: Срабатывает после обновления частей представления Timeline/Units +@short: Срабатывает после обновления секций вида Timeline/Units @signature: onOptionsLoad: () =\> void @@ -16,20 +16,20 @@ description: "срабатывает после обновления часте ~~~jsx scheduler.attachEvent("onOptionsLoad", function (){ - //любая пользовательская логика здесь + //any custom logic here }); ~~~ ### Details -Это событие вызывается в следующих случаях: +Когда это событие срабатывает, происходят следующие действия: -- Представление Timeline/Unit пересчитывает, какие секции видимы, основываясь на текущих настройках свойства [y_unit](views/timeline.md#initialization) или [list](views/units.md#initialization); -- Выполняется вызов [scheduler.resetLightbox](api/method/resetlightbox.md); -- Выполняется вызов [scheduler.setCurrentView](api/method/setcurrentview.md). +- Timeline/Unit view пересчитывает видимые секции на основе текущего значения свойства [y_unit](views/timeline.md#initialization) или [list](views/units.md#initialization) соответственно; +- [scheduler.resetLightbox](api/method/resetlightbox.md) вызывается; +- [scheduler.setCurrentView](api/method/setcurrentview.md) вызывается. -Вы увидите срабатывание этого события в нескольких сценариях: +Событие срабатывает в нескольких случаях: -- При инициализации представления Timeline/Units и первом разборе секций; -- При загрузке секций с использованием [data](guides/data-formats.md#json-with-collections); -- Каждый раз при вызове [scheduler.updateCollection](api/method/updatecollection.md). +- При инициализации вида Timeline/Units, когда секции разбираются впервые; +- Когда секции загружаются с данными через [data](guides/data-formats.md); +- При каждом вызове [scheduler.updateCollection](api/method/updatecollection.md). \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onoptionsloadfinal.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onoptionsloadfinal.md index 4aea07ac..fb017780 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onoptionsloadfinal.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onoptionsloadfinal.md @@ -1,7 +1,7 @@ --- -sidebar_label: "onOptionsLoadFinal" -title: "onOptionsLoadFinal event" -description: "срабатывает один раз после завершения загрузки коллекции опций (секций) (применимо только к Timeline view)" +sidebar_label: onOptionsLoadFinal +title: "onOptionsLoadFinal событие" +description: "срабатывает после завершения загрузки коллекции options(sections) (только для вида Timeline)" --- # onOptionsLoadFinal @@ -22,4 +22,4 @@ scheduler.attachEvent("onOptionsLoadFinal", function (){ ### Details -Это событие возникает исключительно при загрузке коллекции через dhtxmlConnector или при использовании метода [updateCollection](api/method/updatecollection.md). +Событие срабатывает только тогда, когда коллекция загружается с помощью dhtxmlConnector или через метод [updateCollection](api/method/updatecollection.md). \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onoptionsloadstart.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onoptionsloadstart.md index 4a3a5fd3..c7241fb9 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onoptionsloadstart.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onoptionsloadstart.md @@ -1,25 +1,25 @@ --- -sidebar_label: "onOptionsLoadStart" -title: "onOptionsLoadStart event" -description: "срабатывает непосредственно перед началом загрузки набора опций или секций с сервера (применимо только к Timeline view)" +sidebar_label: onOptionsLoadStart +title: "onOptionsLoadStart событие" +description: "срабатывает перед загрузкой коллекции опций или разделов с сервера (вид таймлайн только)" --- # onOptionsLoadStart ### Description -@short: Срабатывает непосредственно перед началом загрузки набора опций или секций с сервера (применимо только к Timeline view) +@short: Срабатывает перед тем, как коллекция опций или разделов начнет загружаться с сервера (вид таймлайн только) -@signature: onOptionsLoadStart: () =\> void +@signature: onOptionsLoadStart: () => void ### Example ~~~jsx scheduler.attachEvent("onOptionsLoadStart", function (){ - //любая ваша логика здесь + //any custom logic here }); ~~~ ### Details -Это событие происходит исключительно при загрузке коллекции, либо через dhtxmlConnector, либо с использованием метода [updateCollection](api/method/updatecollection.md). +Событие срабатывает только когда коллекция загружается с помощью dhtxmlConnector или через метод [updateCollection](api/method/updatecollection.md). \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onparse.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onparse.md index 3514cb15..22cdcd8e 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onparse.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onparse.md @@ -1,14 +1,14 @@ --- -sidebar_label: "onParse" -title: "onParse event" -description: "срабатывает сразу после того, как данные были распарсены и готовы для API, но до того, как они отображаются в Scheduler" +sidebar_label: onParse +title: "Событие onParse" +description: "Срабатывает после того, как данные распарсены (становятся доступными для API), но до того, как данные будут отрисованы в Scheduler" --- # onParse ### Description -@short: Срабатывает сразу после того, как данные были распарсены и готовы для API, но до того, как они отображаются в Scheduler +@short: Вызывается после того, как данные распарсены (становятся доступными для API), но до того, как данные будут отрисованы в Scheduler @signature: onParse: () =\> void @@ -28,4 +28,4 @@ scheduler.parse(events); - [onLoadEnd](api/event/onloadend.md) ### Related Guides -- [Загрузка данных](guides/loading-data.md) +- [Загрузка данных](guides/loading-data.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onquickinfo.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onquickinfo.md index 9e82d761..7c681277 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onquickinfo.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onquickinfo.md @@ -1,33 +1,33 @@ --- -sidebar_label: "onQuickInfo" -title: "onQuickInfo event" -description: "Срабатывает при появлении всплывающей формы редактирования" +sidebar_label: onQuickInfo +title: "onQuickInfo событие" +description: "срабатывает, когда появляется всплывающая форма редактирования" --- # onQuickInfo ### Description -@short: Срабатывает при появлении всплывающей формы редактирования +@short: Вызывает событие, когда появляется всплывающая форма редактирования @signature: onQuickInfo: (eventId: string) =\> void ### Parameters -- `eventId` - (required) *string* - id события +- `eventId` - (required) *string* - идентификатор события ### Example ~~~jsx scheduler.attachEvent("onQuickInfo",function(eventId){ - // ваш код здесь + // любая ваша логика здесь }); ~~~ ### Details :::note - Для работы события требуется включенный плагин [quick_info](guides/extensions-list.md#quickinfo). + Событие требует активации плагина [quick_info](guides/extensions-list.md#quick-info). ::: ### Related API @@ -37,8 +37,8 @@ scheduler.attachEvent("onQuickInfo",function(eventId){ - [onAfterQuickInfo](api/event/onafterquickinfo.md) ### Related Guides -- [Полный список расширений](guides/extensions-list.md#quickinfo) -- [Мобильная адаптивность Scheduler](guides/touch-support.md) +- [Полный список расширений](guides/extensions-list.md) +- [Мобильный адаптивный планировщик](guides/touch-support.md) ### Change log -- добавлено в версии 4.4 +- добавлено в версии 4.4 \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onsaveerror.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onsaveerror.md index 01bc44a8..addd2833 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onsaveerror.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onsaveerror.md @@ -1,20 +1,20 @@ --- -sidebar_label: "onSaveError" -title: "onSaveError event" -description: "срабатывает при возникновении ошибки во время обновления данных" +sidebar_label: onSaveError +title: "Событие onSaveError" +description: "Срабатывает при возникновении ошибки во время обновления данных" --- # onSaveError ### Description -@short: Срабатывает при возникновении ошибки во время обновления данных +@short: Срабатывает в случае возникновения ошибки во время обновления данных @signature: onSaveError: (ids: array, response: XMLHttpRequest) =\> void ### Parameters -- `ids` - (required) *array* - массив, содержащий ID событий, которые не удалось обновить +- `ids` - (required) *array* - массив идентификаторов событий, обновление которых не удалось - `response` - (required) *XMLHttpRequest* - объект Ajax-запроса ### Example @@ -29,6 +29,6 @@ scheduler.attachEvent("onSaveError", function(ids, resp){ :::note -Это событие срабатывает только при использовании библиотеки dataProcessor для клиент-серверного взаимодействия. - -::: +Событие будет вызвано только в том случае, если вы используете библиотеку dataProcessor для обмена данными между клиентом и сервером. + +::: \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onscaleadd.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onscaleadd.md index 86bf5acc..32004dac 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onscaleadd.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onscaleadd.md @@ -1,37 +1,37 @@ --- -sidebar_label: "onScaleAdd" +sidebar_label: onScaleAdd title: "onScaleAdd event" -description: "срабатывает сразу после того, как единица представления (например, колонка, секция или ячейка дня) отрисовывается в scheduler-е" +description: "Срабатывает после отрисовки одного блока вида (колонки, секции, дневной ячейки и т.д.) в планировщике" --- # onScaleAdd ### Description -@short: Срабатывает сразу после того, как единица представления (например, колонка, секция или ячейка дня) отрисовывается в scheduler-е +@short: Срабатывает после отрисовки одного блока вида (колонки, секции, дневной ячейки и т.д.) в планировщике @signature: onScaleAdd: (unit: HTMLElement, date: object) =\> void ### Parameters -- `unit` - (required) *HTMLElement* - HTML-элемент, представляющий конкретную единицу представления -- `date` - (required) *object* - дата, связанная с этой единицей +- `unit` - (обязателен) *HTMLElement* - HTML-объект связанного блока вида +- `date` - (обязателен) *object* - дата блока/единицы ### Example ~~~jsx scheduler.attachEvent("onScaleAdd", function (unit, date){ - //место для вашей пользовательской логики + // любая ваша логика здесь }); ~~~ ### Details -Разные виды отображения содержат различные единицы: +Доступные виды имеют разные единицы отображения: -- **Day view** - колонка, представляющая целый день; -- **Week view** - колонка для каждого дня; -- **Month view** - ячейка для каждого дня; +- **Day view** - колонка с днем (весь вид); +- **Week view** - колонка с днем; +- **Month view** - ячейка с днем; - **Units** - секция; - **Timeline** - секция; -- **Year** - ячейка, представляющая день. +- **Year** - ячейка с днем. \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onscaledblclick.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onscaledblclick.md index f9285e06..a0db9260 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onscaledblclick.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onscaledblclick.md @@ -1,14 +1,14 @@ --- -sidebar_label: "onScaleDblClick" -title: "onScaleDblClick event" -description: "срабатывает при двойном клике пользователя по временной шкале" +sidebar_label: onScaleDblClick +title: "onScaleDblClick событие" +description: "Срабатывает при двойном клике по временной шкале" --- # onScaleDblClick ### Description -@short: Срабатывает при двойном клике пользователя по временной шкале +@short: Срабатывает при двойном клике по временной шкале @signature: onScaleDblClick: () =\> void @@ -16,6 +16,6 @@ description: "срабатывает при двойном клике польз ~~~jsx scheduler.attachEvent("onScaleDblClick", function(){ - // здесь может быть любая пользовательская логика + // любая ваша логика здесь }); -~~~ +~~~ \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onschedulerready.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onschedulerready.md index 3befdd50..91f23206 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onschedulerready.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onschedulerready.md @@ -1,14 +1,14 @@ --- -sidebar_label: "onSchedulerReady" -title: "onSchedulerReady event" -description: "срабатывает после завершения инициализации scheduler, хотя он ещё не отображён на странице." +sidebar_label: onSchedulerReady +title: "Событие onSchedulerReady" +description: "срабатывает после завершения инициализации планировщика, но планировщик еще не отрисован на странице." --- # onSchedulerReady ### Description -@short: Срабатывает после завершения инициализации scheduler, хотя он ещё не отображён на странице. +@short: Срабатывает после завершения инициализации планировщика, но планировщик еще не отрисован на странице. @signature: onSchedulerReady: () =\> void @@ -16,6 +16,6 @@ description: "срабатывает после завершения иници ~~~jsx scheduler.attachEvent("onSchedulerReady", function(){ - //любой кастомный код здесь + // любая ваша логика здесь }); -~~~ +~~~ \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onschedulerresize.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onschedulerresize.md index dfe1043e..cfac5dbb 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onschedulerresize.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onschedulerresize.md @@ -1,14 +1,14 @@ --- -sidebar_label: "onSchedulerResize" -title: "onSchedulerResize event" -description: "Срабатывает непосредственно перед изменением размера scheduler-а" +sidebar_label: onSchedulerResize +title: "onSchedulerResize событие" +description: "срабатывает до изменения размера планировщика" --- # onSchedulerResize ### Description -@short: Срабатывает непосредственно перед изменением размера scheduler-а +@short: Срабатывает до изменения размера планировщика @signature: onSchedulerResize: () =\> void @@ -16,10 +16,10 @@ description: "Срабатывает непосредственно перед ~~~jsx scheduler.attachEvent("onSchedulerResize", function(){ - //любая ваша логика здесь + // любая ваша логика здесь }); ~~~ ### Details -Это событие уведомляет, что размер scheduler-а был изменён, и область с данными требует перерисовки. Обычно нет необходимости обрабатывать это событие, если вы не работаете с кастомным видом. +Событие информирует о том, что размер планировщика был изменён, и область данных нуждается в перерисовке. Обычно вам не нужно обращать внимание на это событие: оно может быть полезно только если вы создаёте пользовательский вид. \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/ontemplatesready.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/ontemplatesready.md index d9054742..6ca4d215 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/ontemplatesready.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/ontemplatesready.md @@ -1,14 +1,14 @@ --- -sidebar_label: "onTemplatesReady" -title: "onTemplatesReady event" -description: "срабатывает, когда шаблоны scheduler'а инициализированы" +sidebar_label: onTemplatesReady +title: "onTemplatesReady событие" +description: "срабатывает при инициализации шаблонов планировщика" --- # onTemplatesReady ### Description -@short: Срабатывает, когда шаблоны scheduler'а инициализированы +@short: Срабатывает, когда шаблоны планировщика инициализируются @signature: onTemplatesReady: () =\> void @@ -16,7 +16,7 @@ description: "срабатывает, когда шаблоны scheduler'а и ~~~jsx scheduler.attachEvent("onTemplatesReady", function(){ - //место для вашей логики + // любая ваша логика здесь }); ~~~ @@ -26,6 +26,6 @@ scheduler.attachEvent("onTemplatesReady", function(){ ### Details -Это событие сигнализирует, что шаблоны scheduler'а полностью готовы. +Событие информирует, что шаблоны планировщика готовы. -Рекомендуется помещать любой код создания кастомного вида внутри обработчика события **onTemplatesReady**. Это гарантирует, что шаблоны для кастомного вида будут готовы до инициализации scheduler'а, что позволяет корректно отобразить кастомный вид на странице. +Это хорошая практика — писать код создания пользовательского вида в обработчике события **onTemplatesReady**. Это гарантирует, что шаблоны пользовательского вида будут готовы до инициализации планировщика, а сам пользовательский вид будет корректно отрисован на странице. \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/ontimelinecreated.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/ontimelinecreated.md index af3958bd..9faac3e5 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/ontimelinecreated.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/ontimelinecreated.md @@ -1,26 +1,26 @@ --- -sidebar_label: "onTimelineCreated" +sidebar_label: onTimelineCreated title: "onTimelineCreated event" -description: "срабатывает один раз после настройки вида Timeline, но до его отображения на странице (применимо только к виду Timeline)" +description: "срабатывает после инициализации Timeline view, но ещё не отрисован на странице (только Timeline view)" --- # onTimelineCreated ### Description -@short: Срабатывает один раз после настройки вида Timeline, но до его отображения на странице (применимо только к виду Timeline) +@short: Срабатывает после инициализации Timeline view, но ещё не отрисован на странице (только Timeline view) -@signature: onTemplatesReady: (config: object) =\> void +@signature: onTemplatesReady: (config: object) => void ### Parameters -- `config` - (required) *object* - объект конфигурации для вида Timeline +- `config` - (required) *object* - объект конфигурации Timeline view ### Example ~~~jsx scheduler.attachEvent("onTimelineCreated", function (config){ - //любая ваша логика здесь + // любая ваша логика здесь }); ~~~ diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onviewchange.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onviewchange.md index 75ab4d86..e4a1240d 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onviewchange.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onviewchange.md @@ -1,30 +1,30 @@ --- -sidebar_label: "onViewChange" -title: "onViewChange event" -description: "срабатывает после переключения текущего вида на другой" +sidebar_label: onViewChange +title: "onViewChange событие" +description: "Срабатывает после переключения текущего вида на другой" --- # onViewChange ### Description -@short: Срабатывает после переключения текущего вида на другой +@short: Срабатывает после того, как текущий вид изменится на другой -@signature: onViewChange: (new_mode: string, new_date: object) =\> void +@signature: onViewChange: (new_mode: string, new_date: Date) =\> void ### Parameters -- `new_mode` - (required) *string* - обновленный вид -- `new_date` - (required) *object* - обновленная дата +- `new_mode` - (required) *string* - новый вид +- `new_date` - (required) *Date* - новая дата ### Example ~~~jsx -scheduler.attachEvent("onViewChange", function (new_mode , new_date){ - //любая пользовательская логика здесь +scheduler.attachEvent("onViewChange", (new_mode, new_date) => { + // любая пользовательская логика здесь }); ~~~ ### Details -Это событие вызывается всякий раз, когда текущий вид обновляется. +Событие вызывается каждый раз, когда текущий вид изменяется. \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onviewmoreclick.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onviewmoreclick.md index 7c669dc7..09cf76a8 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onviewmoreclick.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onviewmoreclick.md @@ -1,29 +1,29 @@ --- -sidebar_label: "onViewMoreClick" -title: "onViewMoreClick event" -description: "вызывается, когда пользователь кликает по ссылке 'View more' в Month view (применимо только для Month view)" +sidebar_label: onViewMoreClick +title: "onViewMoreClick событие" +description: "срабатывает, когда пользователь нажимает на ссылку 'Показать ещё' в месячном представлении (только в месячном представлении)" --- # onViewMoreClick ### Description -@short: Вызывается, когда пользователь кликает по ссылке 'View more' в Month view (применимо только для Month view) +@short: Вы вызывается, когда пользователь нажимает на ссылку 'Показать ещё' в месячном представлении (только в месячном представлении) @signature: onViewChange: (date: object) =\> boolean ### Parameters -- `date` - (required) *object* - дата ячейки, в которой пользователь кликнул по ссылке 'View more' +- `date` - (обязательный) *object* - дата ячейки, в которой пользователь кликает по ссылке 'Показать ещё' ### Returns -- ` result` - (boolean) - определяет, будет ли выполнено действие по умолчанию (true) или оно будет отменено (false) +- `result` - (boolean) - определяет, будет ли выполнено действие по умолчанию события (true) или отменено (false) ### Example ~~~jsx scheduler.attachEvent("onViewMoreClick", function(date){ - //здесь можно разместить любую кастомную логику + // любая ваша логика здесь }); ~~~ @@ -32,11 +32,11 @@ scheduler.attachEvent("onViewMoreClick", function(date){ ### Details -Это событие можно заблокировать. Возврат *false* предотвращает переключение Month view на Day view после клика по ссылке 'View more'. +Событие можно блокировать. Верните *false*, и месячное представление не переключится на дневное представление после нажатия на ссылку 'Показать ещё'. ### Related API - [max_month_events](api/config/max_month_events.md) - [month_events_link](api/template/month_events_link.md) ### Related Guides -- [Месячный вид](views/month.md#limitingthenumberofeventsinacell) +- [Месячное представление](views/month.md#limiting-the-number-of-events-in-a-cell) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onxle.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onxle.md index f12b6ad9..16879d30 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onxle.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onxle.md @@ -1,16 +1,16 @@ --- -sidebar_label: "onXLE" -title: "onXLE event" -description: "срабатывает один раз после завершения загрузки данных из источника данных" +sidebar_label: onXLE +title: "onXLE событие" +description: "срабатывает после завершения загрузки данных из источника данных" --- # onXLE -:::warning -Эта функицональность устарела -::: +:::warning +Это устаревшее событие +::: ### Description -@short: Срабатывает один раз после завершения загрузки данных из источника данных +@short: Срабатывает после завершения загрузки данных из источника данных @signature: onXLE: () =\> void @@ -18,7 +18,7 @@ description: "срабатывает один раз после завершен ~~~jsx scheduler.attachEvent("onXLE", function (){ - // здесь можно разместить вашу пользовательскую логику + // любая ваша логика здесь }); ~~~ @@ -27,7 +27,7 @@ scheduler.attachEvent("onXLE", function (){ - [load](api/method/load.md) ### Related Guides -- [Загрузка данных](guides/loading-data.md) +- [Loading Data](guides/loading-data.md) ### Change log -- deprecated с версии v5.2 +- устарело с версии v5.2 \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onxls.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onxls.md index aa8d3b42..91ac22ee 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onxls.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onxls.md @@ -1,16 +1,16 @@ ---- -sidebar_label: "onXLS" -title: "onXLS event" -description: "срабатывает непосредственно перед началом загрузки источника данных" +--- +sidebar_label: onXLS +title: "onXLS событие" +description: "срабатывает непосредственно перед началом загрузки данных из источника данных" --- # onXLS -:::warning -Эта функицональность устарела -::: +:::warning +Это событие устарело +::: ### Description -@short: Срабатывает непосредственно перед началом загрузки источника данных +@short: Срабатывает непосредственно перед началом загрузки данных из источника данных @signature: onXLS: () =\> void @@ -18,7 +18,7 @@ description: "срабатывает непосредственно перед ~~~jsx scheduler.attachEvent("onXLS", function (){ - //место для вашей пользовательской логики + // любая ваша логика здесь }); ~~~ @@ -30,4 +30,4 @@ scheduler.attachEvent("onXLS", function (){ - [Загрузка данных](guides/loading-data.md) ### Change log -- устарело с версии v5.2 +- устарело с версии v5.2 \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onxscaleclick.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onxscaleclick.md index cb0924c1..19ca90bb 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onxscaleclick.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onxscaleclick.md @@ -1,27 +1,27 @@ --- -sidebar_label: "onXScaleClick" -title: "onXScaleClick event" -description: "срабатывает при одиночном клике пользователя по ячейке на оси x (применимо только в режиме Timeline)" +sidebar_label: onXScaleClick +title: "onXScaleClick событие" +description: "срабатывает, когда пользователь делает одиночный клик по ячейке на оси X (только в режиме таймлайн)" --- # onXScaleClick ### Description -@short: Срабатывает при одиночном клике пользователя по ячейке на оси x (применимо только в режиме Timeline) +@short: Срабатывает, когда пользователь делает одиночный клик по ячейке на оси X (только в режиме таймлайн) -@signature: onXScaleClick: (index: number, value: object, e: Event) =\> void +@signature: onXScaleClick: (index: number, value, e) =\> void ### Parameters -- `index` - (required) *number* - нулевой индекс кликнутого столбца -- `value` - (required) *object* - объект Date, представляющий начальную временную метку кликнутой ячейки +- `index` - (required) *number* - индекс столбца нажатой ячейки (нумерация с нуля) +- `value` - (required) *object* - объект Date, задающий метку времени начала нажатой ячейки - `e` - (required) *Event* - нативный объект события ### Example ~~~jsx scheduler.attachEvent("onXScaleClick", function (index, value,e){ - //любая пользовательская логика здесь + // любая ваша логика здесь }); -~~~ +~~~ \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onxscaledblclick.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onxscaledblclick.md index 1756119e..ef4d37b2 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onxscaledblclick.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onxscaledblclick.md @@ -1,27 +1,27 @@ --- -sidebar_label: "onXScaleDblClick" -title: "onXScaleDblClick event" -description: "срабатывает, когда пользователь двойным кликом нажимает на ячейку по оси X (применимо только в режиме Timeline)" +sidebar_label: onXScaleDblClick +title: "onXScaleDblClick событие" +description: "срабатывает, когда пользователь выполняет двойной клик по ячейке на оси X (только в представлении Timeline)" --- # onXScaleDblClick ### Description -@short: Срабатывает, когда пользователь двойным кликом нажимает на ячейку по оси X (применимо только в режиме Timeline) +@short: Срабатывает, когда пользователь выполняет двойной клик по ячейке на оси X (только в представлении Timeline) @signature: onXScaleDblClick: (index: number, value: object, e: Event) =\> void ### Parameters -- `index` - (required) *number* - индекс нажатой колонки, начиная с нуля -- `value` - (required) *object* - объект Date, представляющий начальную временную метку нажатой ячейки +- `index` - (required) *number* - индекс столбца нажатой ячейки (нумерация с нуля) +- `value` - (required) *object* - Date-объект начала временной метки нажатой ячейки - `e` - (required) *Event* - нативный объект события ### Example ~~~jsx scheduler.attachEvent("onXScaleDblClick", function (index, value, e){ - //любая ваша логика здесь + // любая ваша логика здесь }); -~~~ +~~~ \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onyscaleclick.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onyscaleclick.md index 729761fe..e803e71b 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onyscaleclick.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onyscaleclick.md @@ -1,27 +1,27 @@ --- -sidebar_label: "onYScaleClick" -title: "onYScaleClick event" -description: "срабатывает при одиночном клике пользователя на ячейку по оси Y (применимо только в режиме Timeline)" +sidebar_label: onYScaleClick +title: "onYScaleClick событие" +description: "срабатывает, когда пользователь делает одиночный клик по ячейке на оси Y (только в представлении Timeline)" --- # onYScaleClick ### Description -@short: Срабатывает при одиночном клике пользователя на ячейку по оси Y (применимо только в режиме Timeline) +@short: Срабатывает, когда пользователь делает одиночный клик по ячейке на оси Y (только в представлении Timeline) @signature: onYScaleClick: (index: number, section: object, e: Event) =\> void ### Parameters -- `index` - (required) *number* - нулевой индекс выбранной строки -- `section` - (required) *object* - объект данных, соответствующий кликнутой ячейке -- `e` - (required) *Event* - нативный объект события +- `index` - (обязателен) *number* - индекс строки нажатой ячейки (нумерация с нуля) +- `section` - (обязателен) *object* - объект данных нажатой ячейки +- `e` - (обязателен) *Event* - нативный объект события ### Example ~~~jsx scheduler.attachEvent("onYScaleClick", function (index, section, e){ - //любая ваша логика здесь + // любая ваша логика здесь }); -~~~ +~~~ \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onyscaledblclick.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onyscaledblclick.md index c91f3ba3..7d8d8f8d 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onyscaledblclick.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/event/onyscaledblclick.md @@ -1,27 +1,27 @@ --- -sidebar_label: "onYScaleDblClick" +sidebar_label: onYScaleDblClick title: "onYScaleDblClick event" -description: "вызывается, когда пользователь двойным щелчком кликает по ячейке на оси Y (применимо только в представлении Timeline)" +description: "срабатывает при двойном клике по ячейке на оси Y (только в представлении таймлайн)" --- # onYScaleDblClick ### Description -@short: Вызывается, когда пользователь двойным щелчком кликает по ячейке на оси Y (применимо только в представлении Timeline) +@short: Срабатывает при двойном клике по ячейке на оси Y (только в представлении таймлайн) @signature: onYScaleDblClick: (index: number, section: object, e: Event) =\> void ### Parameters -- `index` - (required) *number* - нулевой индекс строки, по которой был выполнен клик -- `section` - (required) *object* - объект данных, связанный с кликнутой ячейкой -- `e` - (required) *Event* - нативный объект события +- `index` - (required) *number* - индекс строки нажатой ячейки (нумерация с нуля) +- `section` - (required) *object* - объект данных нажатой ячейки +- `e` - (required) *Event* - объект нативного события ### Example ~~~jsx scheduler.attachEvent("onYScaleDblClick", function (index, section, e){ - // здесь можно добавить пользовательскую логику + // любая ваша логика здесь }); -~~~ +~~~ \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/addevent.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/addevent.md index 1a1e94be..2c34bd83 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/addevent.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/addevent.md @@ -1,5 +1,5 @@ --- -sidebar_label: "addEvent" +sidebar_label: addEvent title: "addEvent method" description: "добавляет новое событие" --- @@ -10,46 +10,46 @@ description: "добавляет новое событие" @short: Добавляет новое событие -@signature: addEvent: (event: any) =\> string +@signature: addEvent: (event: any) => string ### Parameters - `event` - (required) *object* - объект события ### Returns -- ` id` - (string) - идентификатор события +- `id` - (string) - идентификатор события ### Example ~~~jsx scheduler.addEvent({ - start_date: "16-06-2013 09:00", - end_date: "16-06-2013 12:00", - text: "Meeting", - holder: "John", // userdata - room: "5" // userdata + start_date: "2027-06-16 09:00", + end_date: "2027-06-16 12:00", + text: "Meeting", + holder: "John", // userdata + room: "5" // userdata }); ~~~ ### Related samples -- [Validating lightbox fields](https://docs.dhtmlx.com/scheduler/samples/02_customization/08_validation.html) -- [Custom event box](https://docs.dhtmlx.com/scheduler/samples/02_customization/27_custom_event_box.html) +- [Валидация полей lightbox](https://docs.dhtmlx.com/scheduler/samples/02_customization/08_validation.html) +- [Пользовательское окно события](https://docs.dhtmlx.com/scheduler/samples/02_customization/27_custom_event_box.html) ### Details :::note -Метод вызывает событие [onEventAdded](api/event/oneventadded.md) или [onEventChanged](api/event/oneventchanged.md) - -::: +Метод вызывает событие [`onEventAdded`](api/event/oneventadded.md) или [`onEventChanged`](api/event/oneventchanged.md). -Объект события может включать следующие свойства: +::: -- **start_date** - (*Date,string*) дата начала события. Если указана строкой, она должна соответствовать формату "%d-%m-%Y %H:%i" (для настройки формата по умолчанию смотрите опцию [api_date](api/config/api_date.md)). Для [повторяющихся событий](guides/recurring-events.md) **start_date** должен быть типа Date. -- **end_date** - (*Date,string*) дата окончания события. Если указана строкой, должна использовать формат "%d-%m-%Y %H:%i" (для изменения формата по умолчанию смотрите опцию [api_date](api/config/api_date.md)). Для [повторяющихся событий](guides/recurring-events.md) **end_date** должен быть типа Date. -- **text** - (*string*) описание события. -- **id** - (*string*) идентификатор события. Если не указан, будет сгенерирован автоматически. -- **userdata** - (*hash*) набор пользовательских свойств в формате 'ключ-значение'. +Объект события может иметь следующие свойства: + +- `start_date` - (*Date,string*) дата начала запланированного события. Если свойство задано как строка, следует использовать формат "%d-%m-%Y %H:%i" (чтобы изменить формат по умолчанию, используйте опцию [`api_date`](api/config/api_date.md)). Для [повторяющихся событий](guides/recurring-events.md) значение свойства `start_date` должно иметь тип Date. +- `end_date` - (*Date,string*) дата завершения запланированного события. Если свойство задано как строка, следует использовать формат "%d-%m-%Y %H:%i" (чтобы изменить формат по умолчанию, используйте опцию [`api_date`](api/config/api_date.md)). Для [повторяющихся событий](guides/recurring-events.md) значение свойства `end_date` должно иметь тип Date. +- `text` - (*string*) текст события. +- `id` - (*string*) идентификатор события. Если не указан, идентификатор события будет сгенерирован автоматически. +- `userdata` - (*hash*) набор пользовательских свойств, представленных в виде пар 'ключ-значение'. ### Related API - [api_date](api/config/api_date.md) @@ -57,4 +57,4 @@ scheduler.addEvent({ - [deleteEvent](api/method/deleteevent.md) ### Related Guides -- [Добавление/Удаление событий](guides/adding-events.md) +- [Adding/Deleting Events](guides/adding-events.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/addeventnow.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/addeventnow.md index 9ba98ffd..bb93d039 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/addeventnow.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/addeventnow.md @@ -1,5 +1,5 @@ --- -sidebar_label: "addEventNow" +sidebar_label: addEventNow title: "addEventNow method" description: "создаёт новое событие и открывает лайтбокс для подтверждения" --- @@ -8,16 +8,16 @@ description: "создаёт новое событие и открывает л ### Description -@short: Создаёт новое событие и открывает лайтбокс для подтверждения +@short: Добавляет новое событие и открывает lightbox для подтверждения @signature: addEventNow: (event: any) =\> string ### Parameters -- `event` - (required) *object* - объект с деталями события +- `event` - (required) *объект* - объект события ### Returns -- ` id` - (string) - уникальный идентификатор события +- ` id` - (string) - идентификатор события ### Example @@ -25,8 +25,8 @@ description: "создаёт новое событие и открывает л scheduler.addEventNow(); //или scheduler.addEventNow({ - start_date: new Date(2013,0,10,8,30), - end_date: new Date(2013,0,10,10,30), + start_date: new Date(2027,0,10,8,30), + end_date: new Date(2027,0,10,10,30), text: "Meeting", holder: "John", //userdata room: "5" //userdata @@ -34,36 +34,35 @@ scheduler.addEventNow({ ~~~ ### Related samples -- [Default values for lightbox controls](https://docs.dhtmlx.com/scheduler/samples/02_customization/28_lightbox_default_value.html) -- [Handling the pointer highlighting](https://docs.dhtmlx.com/scheduler/samples/09_api/06_hightlight_and_single_click_create.html) -- [Material skin](https://docs.dhtmlx.com/scheduler/samples/07_skins/02_material.html) +- [Значения по умолчанию для lightbox controls](https://docs.dhtmlx.com/scheduler/samples/02_customization/28_lightbox_default_value.html) +- [Обработка подсветки указателя](https://docs.dhtmlx.com/scheduler/samples/09_api/06_hightlight_and_single_click_create.html) +- [Скин Material](https://docs.dhtmlx.com/scheduler/samples/07_skins/02_material.html) ### Details -Объект события поддерживает следующие свойства: +Объект события может иметь следующие свойства: - + - + - + - + - +
start_date(Date, string) дата и время начала события. По умолчанию текущие дата и время.

Если передано в виде строки, должно соответствовать формату '%d-%m-%Y %H:%i' - (этот формат можно изменить через опцию [api_date](api/config/api_date.md))		(Date, string) дата, когда событие запланировано начать. По умолчанию используется текущая дата.

Если свойство указано как строка, следует использовать формат '%d-%m-%Y %H:%i' (чтобы изменить формат по умолчанию, используйте опцию [api_date](api/config/api_date.md))
end_date(Date, string) дата и время окончания события. По умолчанию текущая дата плюс значение из [time_step](api/config/time_step.md).

Если передано в виде строки, должно соответствовать формату '%d-%m-%Y %H:%i' (можно изменить через опцию [api_date](api/config/api_date.md))		(Date, string) дата, когда событие запланировано завершиться. По умолчанию текущая дата + значение [time_step](api/config/time_step.md).

Если свойство указано как строка, следует использовать формат '%d-%m-%Y %H:%i' (чтобы изменить формат по умолчанию, используйте опцию [api_date](api/config/api_date.md))
text(string) заголовок или описание события(string) текст события
id(string) уникальный идентификатор события. Если не указан, id будет сгенерирован автоматически(string) идентификатор события. Если не указан, идентификатор для события будет сгенерирован автоматически
userdata(hash) набор пользовательских свойств в формате ключ-значение (hash) набор пользовательских свойств, представленных как пары 'ключ-значение'
@@ -76,4 +75,4 @@ scheduler.addEventNow({ - [addEvent](api/method/addevent.md) ### Related Guides -- [Добавление/Удаление событий](guides/adding-events.md) +- [Добавление/Удаление событий](guides/adding-events.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/addmarkedtimespan.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/addmarkedtimespan.md index f4f93848..e7f46666 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/addmarkedtimespan.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/addmarkedtimespan.md @@ -1,23 +1,23 @@ --- -sidebar_label: "addMarkedTimespan" -title: "addMarkedTimespan method" -description: "отмечает даты, а с определёнными настройками может блокировать их (позволяет применять кастомные стили к границам)" +sidebar_label: addMarkedTimespan +title: "addMarkedTimespan метод" +description: "помечает даты, но при некоторых настройках может происходить блокировка (позволяет задавать собственный стиль для ограничения)" --- # addMarkedTimespan ### Description -@short: Отмечает даты, а с определёнными настройками может блокировать их (позволяет применять кастомные стили к границам) +@short: Помечает даты, но при определённых настройках может выполняться блокировка (позволяет задавать индивидуальный стиль для ограничения) -@signature: addMarkedTimespan: (config: any) =\> number +@signature: addMarkedTimespan: (config: any) => number ### Parameters -- `config` - (required) *object* - объект конфигурации, задающий временной интервал для отметки или блокировки +- `config` - (required) *object* - объект конфигурации временного интервала, который нужно пометить/заблокировать ### Returns -- ` id` - (number) - ID добавленного временного интервала +- `id` - (number) - идентификатор добавленного временного интервала ### Example @@ -41,8 +41,8 @@ scheduler.updateView(); ~~~ ### Related samples -- [Highlighting timespans](https://docs.dhtmlx.com/scheduler/samples/09_api/03_highlighted_timespans.html) -- [Highlighting sections in Timeline and Units views](https://docs.dhtmlx.com/scheduler/samples/09_api/04_highlighted_sections_units.html) +- [Выделение временных диапазонов](https://docs.dhtmlx.com/scheduler/samples/09_api/03_highlighted_timespans.html) +- [Выделение секций в Timeline и Units views](https://docs.dhtmlx.com/scheduler/samples/09_api/04_highlighted_sections_units.html) ### Details @@ -58,8 +58,6 @@ scheduler.updateView(); ::: -
- ## Свойства объекта конфигурации Объект конфигурации может содержать следующие свойства: @@ -83,8 +81,8 @@ scheduler.updateView(); ~~~js -//запрещает создание событий с 3 мая 2012 по 'end_date' -start_date:new Date(2012,4,3) +// запрещает создание событий с 2027-05-03 по 'end_date' +start_date: new Date(2027, 4, 3) ~~~ @@ -93,11 +91,11 @@ start_date:new Date(2012,4,3) объект Date, определяющий конец ограничения - + ~~~js -//запрещает создание событий с 'start_date' -// до 3 сентября 2012 -end_date:new Date(2012,8,3) +// запрещает создание событий с 'start_date' +// по 2027-09-03 +end_date: new Date(2027, 8, 3) ~~~ @@ -106,11 +104,11 @@ end_date:new Date(2012,8,3) дни, которые будут ограничены - + ~~~js -days:[0, 2, 6] //ограничивает воскресенье, вторник и субботу -days:"fullweek" //ограничивает всю неделю -days:new Date(2012,6,1) //блокирует 1 июля 2012 +days: [0, 2, 6] // ограничивает воскресенье, вторник и субботу +days: "fullweek" // ограничивает всю неделю +days: new Date(2027, 6, 1) // блокирует 2027-07-01 ~~~ @@ -119,11 +117,11 @@ days:new Date(2012,6,1) //блокирует 1 июля 2012 временные интервалы (в минутах), которые будут ограничены - + ~~~js -//два блока ограничения: 04:00-08:00 и 12:00-15:00 -zones:[4*60,8*60,12*60,15*60] -zones:"fullday" //ограничивает весь день +// два блока ограничения: 04:00-08:00 и 12:00-15:00 +zones: [4 * 60, 8 * 60, 12 * 60, 15 * 60] +zones: "fullday" // ограничивает весь день ~~~ @@ -132,7 +130,7 @@ zones:"fullday" //ограничивает весь день имя CSS класса для применения - + ~~~js css:"gray" //рисует DIV с применённым классом 'gray' ~~~ @@ -143,7 +141,7 @@ css:"gray" //рисует DIV с применённым классом 'gray' HTML содержимое для отображения в отмеченном диапазоне - + ~~~js //рисует DIV с этим текстом поверх отмеченного диапазона html:"Blocked" @@ -155,9 +153,9 @@ html:"Blocked" определяет тип временного интервала. Значение 'dhx_time_block' применяет блокировку. Любое другое значение просто отмечает интервал без блокировки. - + ~~~js -type: "dhx_time_block" //интервал будет отмечен и заблокирован +type: "dhx_time_block" // интервал будет отмечен и заблокирован ~~~ @@ -166,7 +164,7 @@ type: "dhx_time_block" //интервал будет отмечен и забл указывает, нужно ли инвертировать временные зоны (указанные в 'zones'), по умолчанию false - + ~~~js //результат: два блока ограничения: 00:00-08:00 и 17:00-24:00 zones: [8*60, 17*60], invert_zones: true @@ -180,7 +178,7 @@ zones: [0, 8*60, 17*60, 24*60], invert_zones: false ограничивает блокировку только для определённых элементов в конкретных представлениях.
Даты будут заблокированы только в указанных view. - + ~~~js //блокирует даты только для элемента с id=5 в Unit view //и для элементов с id 2 и 3 в Timeline view @@ -215,8 +213,7 @@ sections: { unit: 5, timeline: [2,3]} - -
    +
    • `days`
    • `zones`
    • `invert_zones`
      • @@ -224,19 +221,17 @@ sections: { unit: 5, timeline: [2,3]}
    • `html`
    • `type`
    • `sections`
      • -
    - +
~~~js -var config ={ - days: 1, - zones: [9*60, 15*60], - css: "cssClassName", +const config = { + days: 1, + zones: [9 * 60, 15 * 60], + css: "cssClassName", sections: { - unit: 5 + unit: 5 } -} - +}; ~~~ @@ -253,41 +248,41 @@ var config ={ ~~~js -var config ={ - start_date: new Date(2013,7,13), - end_date: new Date(2013,7,14), +const config = { + start_date: new Date(2027, 7, 13), + end_date: new Date(2027, 7, 14), css: "cssClassName", sections: { - unit: 5 + unit: 5 } -} +}; ~~~ - + ## Сравнение markTimespan() и addMarkedTimespan() - - - -
+
addMarkedTimespan - + markTimespan
+
требуется вызвать [updateView](api/method/updateview.md) для отрисовки DIV для временного интервала - + автоматически рисует DIV для временного интервала
+
временной интервал(ы) сохраняются навсегда - + временной интервал(ы) скрываются сразу после любого внутреннего обновления в приложении
+
возвращает ID настроенного временного интервала(ов) - + возвращает DIV элемент или массив DIV элементов
@@ -298,4 +293,4 @@ markTimespan - [checkInMarkedTimespan](api/method/checkinmarkedtimespan.md) ### Related Guides -- [Блокировка и выделение дат](guides/limits.md) +- [Блокировка и пометка дат](guides/limits.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/addsection.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/addsection.md index 1f96ec4e..baff4682 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/addsection.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/addsection.md @@ -1,26 +1,28 @@ --- -sidebar_label: "addSection" -title: "addSection method" -description: "добавляет новый section в текущий активный view" +sidebar_label: addSection +title: "метод addSection" +description: "добавляет секцию в текущее активное представление" --- # addSection + :::info - Эта функция доступна только в PRO-версии. -::: + Эта функциональность доступна только в PRO-версии. + ::: + ### Description -@short: Добавляет новый section в текущий активный view +@short: Добавляет секцию в текущее активное представление @signature: addSection: (section: any, parent_id: string) =\> boolean ### Parameters -- `section` - (required) *object* - объект section, который нужно добавить -- `parent_id` - (required) *string* - id родительского section; используйте 'null' чтобы добавить section на корневом уровне +- `section` - (required) *object* - объект секции, которую нужно добавить +- `parent_id` - (required) *string* - id родительской секции. Укажите 'null', если добавляете секцию в корень ### Returns -- ` isSuccess` - (boolean) - возвращает 'true', если section успешно добавлен, иначе 'false' (например, если указан неверный parent_id) +- `isSuccess` - (boolean) - возвращает 'true', если секция была успешно добавлена, и 'false' в других случаях (например, указан неверный parent_id). ### Example @@ -47,20 +49,20 @@ scheduler.addSection( {key:1, label:"James Smith"}, "p1"); scheduler.addSection( {key:2, label:"Alex White"}, "sales"); ~~~ -**Applicable views:** [Timeline view](views/timeline.md) +**Доступные представления:** [Timeline view](views/timeline.md) ### Details :::note - Метод требует включения плагина [treetimeline](guides/extensions-list.md#treetimeline). -::: + Методу требуется активированный плагин [treetimeline](guides/extensions-list.md#treetimeline). + ::: :::note -Если текущий view не является Timeline в режиме 'Tree', метод не окажет никакого эффекта. +Если открытое представление не является Timeline в режиме 'Tree', метод будет проигнорирован. ::: ### Related API - [deleteSection](api/method/deletesection.md) -- [deleteAllSections](api/method/deleteallsections.md) +- [deleteAllSections](api/method/deleteallsections.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/addshortcut.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/addshortcut.md index e377dbc5..7eb338f6 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/addshortcut.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/addshortcut.md @@ -1,21 +1,22 @@ --- -sidebar_label: "addShortcut" -title: "addShortcut method" -description: "создаёт новую клавиатурную комбинацию (shortcut)" +sidebar_label: addShortcut +title: "метод addShortcut" +description: "добавляет новую комбинацию клавиш" --- # addShortcut ### Description -@short: Создаёт новую клавиатурную комбинацию (shortcut) +@short: Добавляет новую комбинацию клавиш @signature: addShortcut: (shortcut: string, handler: SchedulerCallback, scope?: string) =\> void + ### Parameters -- `shortcut ` - (required) *string* - клавиша или комбинация клавиш, определяющая shortcut (синтаксис shortcut) -- `handler` - (required) *function* - функция, которая будет вызвана при срабатывании shortcut -- `scope` - (optional) *string* - (опционально) указывает контекстный элемент, к которому прикреплен handler (список scope) +- `shortcut` - (required) *string* - имя клавиши или имя комбинации клавиш для ярлыка (синтаксис ярлыка) +- `handler` - (required) *function* - обработчик вызова ярлыка +- `scope` - (optional) *string* - имя контекстного элемента, к которому привязывается функция-обработчик (список областей) ### Example @@ -32,9 +33,9 @@ scheduler.addShortcut("shift+w", function(e){ ### Details -добавлено в версии 4.4 +Добавлено в версии 4.4 -Если третий параметр опущен, handler по умолчанию прикрепляется к scope scheduler. +Если третий параметр не задан, обработчик будет привязан к области планировщика. ### Related API - [getShortcutHandler](api/method/getshortcuthandler.md) @@ -44,4 +45,4 @@ scheduler.addShortcut("shift+w", function(e){ - [key_nav_step](api/config/key_nav_step.md) ### Related Guides -- [Навигация с помощью клавиатуры](guides/keyboard-navigation.md) +- [Навигация по клавиатуре](guides/keyboard-navigation.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/alert.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/alert.md index c8524935..470efa0f 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/alert.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/alert.md @@ -1,28 +1,28 @@ --- -sidebar_label: "alert" -title: "alert method" -description: "отображает alert message box" +sidebar_label: alert +title: "метод alert" +description: "вызывает диалоговое окно alert" --- # alert ### Description -@short: Отображает alert message box +@short: Вызывает диалоговое окно alert @signature: alert: (config: any) =\> HTMLElement ### Parameters -- `config` - (required) *object* - настройки конфигурации для alert box +- `config` - (required) *object* - конфигурация диалогового окна alert ### Returns -- ` div` - (HTMLElement) - div элемент, содержащий alert box +- ` div` - (HTMLElement) - div-контейнер диалогового окна alert ### Example ~~~jsx -var box = scheduler.alert({ +const box = scheduler.alert({ title:"Alert", type:"alert-error", text:"You can't do this" @@ -31,7 +31,7 @@ var box = scheduler.alert({ ### Details -Для получения дополнительной информации о доступных параметрах конфигурации alert message box, обратитесь к статье [Всплывающие сообщения и модальные окна](guides/popups-and-modals.md). +Для получения сведений о поддерживаемых опциях конфигурации диалогового окна оповещения смотрите статью [Popup Messages and Modal Boxes](guides/popups-and-modals.md). ### Related API - [confirm](api/method/confirm.md) @@ -39,7 +39,7 @@ var box = scheduler.alert({ - [modalbox](api/method/modalbox.md) ### Related Guides -- [Всплывающие сообщения и модальные окна](guides/popups-and-modals.md) +- [Popup Messages and Modal Boxes](guides/popups-and-modals.md) ### Change log -- добавлено в версии 6.0 +- добавлено в версии 6.0 \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/assert.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/assert.md index 8e922d0b..7d95e93b 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/assert.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/assert.md @@ -1,21 +1,21 @@ --- -sidebar_label: "assert" -title: "assert method" -description: "если заданное выражение ложно, в красном всплывающем окне в правом верхнем углу экрана появится сообщение об ошибке" +sidebar_label: assert +title: "assert метод" +description: "если указанное выражение ложно, errorMessage отображается в красном всплывающем окне в правом верхнем углу экрана" --- # assert ### Description -@short: Если заданное выражение ложно, в красном всплывающем окне в правом верхнем углу экрана появится сообщение об ошибке +@short: Если указанное выражение ложно, errorMessage отображается в красном всплывающем окне в правом верхнем углу экрана @signature: assert: (expression: boolean, errorMessage: string) =\> void ### Parameters -- `expression` - (required) *boolean* - true для подтверждения выражения, false - если assert не прошёл -- `errorMessage` - (required) *string* - сообщение об ошибке, которое будет показано в красном popup +- `expression` - (required) *boolean* - true для проверки выражения, false - если утверждение не выполняется +- `errorMessage` - (required) *string* - сообщение об ошибке, которое будет отображаться в красном всплывающем окне ### Example @@ -34,4 +34,4 @@ scheduler.attachEvent("onLoadEnd", function(){ Ошибки также можно отслеживать программно через событие [onError](api/event/onerror.md). ### Change log -- добавлено в версии v6.0 +- добавлено в v6.0 \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/attachevent.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/attachevent.md index 816f7138..53b5416a 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/attachevent.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/attachevent.md @@ -1,75 +1,76 @@ --- -sidebar_label: "attachEvent" -title: "attachEvent method" -description: "привязывает обработчик к внутреннему событию dhtmlxScheduler" +sidebar_label: attachEvent +title: "метод attachEvent" +description: "прикрепляет обработчик к внутреннему событию dhtmlxScheduler" --- # attachEvent ### Description -@short: Привязывает обработчик к внутреннему событию dhtmlxScheduler +@short: Прикрепляет обработчик к внутреннему событию dhtmlxScheduler -@signature: attachEvent: (name: SchedulerEventName, handler: SchedulerCallback, settings?: any) =\> string +@signature: attachEvent: (name: SchedulerEventName, handler: SchedulerCallback, settings?: any) => string ### Parameters -- `name` - (required) *SchedulerEventName* - имя события, регистронезависимое -- `handler` - (required) *function* - функция, которая будет обрабатывать событие -- `settings` - (optional) *object* - необязательно, [объект с настройками](#propertiesofsettingsobject) для обработчика события +- `name` - (required) *SchedulerEventName* - имя события, регистр не учитывается +- `handler` - (required) *function* - функция-обработчик +- `settings` - (optional) *object* - необязательный объект с настройками для обработчика события ### Returns -- `event` - (string) - id идентификатор привязанного обработчика события +- `event` - (string) - идентификатор подключенного обработчика события ### Example ~~~jsx -scheduler.attachEvent("onEventSave",function(id,ev){ +scheduler.attachEvent("onEventSave", (id, ev) => { if (!ev.text) { alert("Текст не должен быть пустым"); return false; } return true; -}) +}); ~~~ ### Related samples -- [Validating lightbox fields](https://docs.dhtmlx.com/scheduler/samples/02_customization/08_validation.html) -- [Recurring events](https://docs.dhtmlx.com/scheduler/samples/03_extensions/01_recurring_events.html) +- [Проверка полей lightbox](https://docs.dhtmlx.com/scheduler/samples/02_customization/08_validation.html) +- [Периодические события](https://docs.dhtmlx.com/scheduler/samples/03_extensions/01_recurring_events.html) ### Details -К одному событию можно привязать несколько обработчиков, и все они будут выполнены.
Если любой из обработчиков возвращает *false*, связанное действие будет отменено.
-Обработчики вызываются в порядке их привязки. +Вы можете привязать несколько обработчиков к одному и тому же событию, и все они будут выполняться. +Если некоторые обработчики возвращают `false`, соответствующая операция будет заблокирована. +Обработчики событий обрабатываются в той же последовательности, в которой они были привязаны. -Все слушатели событий, добавленные через [event](api/method/event.md), будут автоматически удалены при вызове [destructor](api/method/destructor.md). +Все слушатели событий, привязанные с использованием [`event()`](api/method/event.md), будут автоматически отключены при вызове [`destructor()`](api/method/destructor.md). -## Свойства объекта settings {#propertiesofsettingsobject} +## Свойства объекта настроек -Объект settings может содержать два свойства: +Объект настроек может содержать два свойства: -1\. **id** - (*string*) уникальный идентификатор обработчика события +1\. `id` - (*string*) идентификатор обработчика события -Это позволяет легко удалить конкретный обработчик из события: +Например, вы можете легко отключить обработчик от указанного события: -~~~js -scheduler.attachEvent("onClick", function(){ +~~~js {3} +scheduler.attachEvent("onClick", () => { console.log("event click"); -}, {id: "my-click"}); /*!*/ -... //позже: -gantt.detachEvent("my-click"); +}, { id: "my-click" }); +// after a while: +scheduler.detachEvent("my-click"); ~~~ -2\. **once** - (*boolean*) указывает, должен ли обработчик выполниться только один раз +2\. `once` - (*boolean*) определяет, будет ли обработчик выполнен только один раз -Установите это значение в *true*, чтобы обработать только первое возникновение события, например так: +Установите свойство в *true*, если вы хотите зафиксировать первое срабатывание события, например: -~~~js -scheduler.attachEvent("onClick", function(){ +~~~js {4} +scheduler.attachEvent("onClick", () => { console.log("capture next event click"); return true; -}, {once: true}); /*!*/ +}, { once: true }); ~~~ ### Related API -- [detachEvent](api/method/detachevent.md) +- [detachEvent](api/method/detachevent.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/backbone.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/backbone.md index 84080e40..84aa91f5 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/backbone.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/backbone.md @@ -1,26 +1,26 @@ --- -sidebar_label: "backbone" -title: "backbone method" -description: "поддерживает синхронизацию планировщика с обновлениями в Backbone модели и наоборот" +sidebar_label: backbone +title: "Метод Backbone" +description: "позволяет планировщику отражать все изменения данных в модели Backbone и наоборот" --- # backbone ### Description -@short: Поддерживает синхронизацию планировщика с обновлениями в Backbone модели и наоборот +@short: Позволяет планировщику отражать все изменения данных в модели Backbone и наоборот @signature: backbone: (events: any) =\> void ### Parameters -- `events` - (required) *Backbone* - collection коллекция данных Backbone +- `events` - (обязательный) *Backbone* - коллекция данных Backbone ### Example ~~~jsx $(".myscheduler").dhx_scheduler({ - date:new Date(2009,5,25), + date:new Date(2027,5,25), mode:"month" }); @@ -28,7 +28,7 @@ scheduler.backbone(events); ~~~ ### Related samples -- [Backbone integration](https://docs.dhtmlx.com/scheduler/samples/10_integration/07_backbone.html) +- [Интеграция Backbone](https://docs.dhtmlx.com/scheduler/samples/10_integration/07_backbone.html) ### Related Guides -- [Интеграция с Backbone](integrations/legacy/backbone-integration.md) +- [Интеграция Backbone](integrations/legacy/backbone-integration.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/batchupdate.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/batchupdate.md index 6831ccfa..1063b568 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/batchupdate.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/batchupdate.md @@ -1,28 +1,28 @@ --- -sidebar_label: "batchUpdate" -title: "batchUpdate method" -description: "обновляет несколько событий одновременно" +sidebar_label: batchUpdate +title: "batchUpdate метод" +description: "обновляет сразу несколько событий" --- # batchUpdate ### Description -@short: Обновляет несколько событий одновременно +@short: Обновляет сразу несколько событий @signature: batchUpdate: (callback: SchedulerCallback, noRedraw?: boolean) =\> void ### Parameters -- `callback` - (required) *function* - функция обратного вызова -- `noRedraw` - (optional) *boolean* - необязательный параметр, определяет, должен ли Scheduler перерисовывать график после выполнения функции обратного вызова; true означает без перерисовки, а false (по умолчанию) - с перерисовкой +- `callback` - (обязательный) *функция* - колбэк-функция +- `noRedraw` - (необязательный) *boolean* - указывает, следует ли Scheduler перерисовать график после вызова callback-функции; true - не перерисовывать и false (по умолчанию) - перерисовывать ### Example ~~~jsx scheduler.batchUpdate(function(){ const events = scheduler.getEvents(); - for(var i = 0; i < events.length; i++){ + for(let i = 0; i < events.length; i++){ const event = events[i]; event.start_date = scheduler.date.add(event.start_date, 1, "day"); event.end_date = scheduler.date.add(event.end_date, 1, "day"); @@ -33,8 +33,8 @@ scheduler.batchUpdate(function(){ ### Details -Этот метод позволяет обновлять несколько событий одновременно с одной лишь перерисовкой, что эффективнее, чем выполнение множества обновлений, каждое из которых вызывает свою собственную перерисовку. +Вы можете использовать этот метод для обновления сразу нескольких событий за одну перерисовку, вместо выполнения нескольких обновлений с несколькими повторными перерисовками. ### Related API - [onBeforeBatchUpdate](api/event/onbeforebatchupdate.md) -- [onAfterBatchUpdate](api/event/onafterbatchupdate.md) +- [onAfterBatchUpdate](api/event/onafterbatchupdate.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/bind.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/bind.md index 9554e131..2cf6bd1d 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/bind.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/bind.md @@ -1,24 +1,24 @@ --- -sidebar_label: "bind" -title: "bind method" -description: "создаёт новую функцию, которая при вызове имеет ключевое слово this, установленное в указанное значение" +sidebar_label: bind +title: "Метод bind" +description: "создает новую функцию, которая при вызове имеет своё ключевое слово this, установленное в переданное значение" --- # bind ### Description -@short: Создаёт новую функцию, которая при вызове имеет ключевое слово this, установленное в указанное значение +@short: Создает новую функцию, которая при вызове имеет своё ключевое слово this, установленное в переданное значение @signature: bind: (method: SchedulerCallback, thisArg: any) =\> SchedulerCallback ### Parameters -- `method` - (required) *function* - функция, которую нужно привязать -- `thisArg` - (required) *object* - значение, которое будет использоваться как контекст this при вызове привязанной функции +- `method` - (required) *function* - целевая функция +- `thisArg` - (required) *object* - значение, которое будет передано в качестве параметра this целевой функции при вызове привязанной функции ### Returns -- ` bound_function` - (function) - новая функция, которая при вызове использует указанный контекст this для исходной функции +- ` bound_function` - (function) - новая функция, которая при вызове имеет значение this, передаваемое целевой функции ### Example @@ -28,7 +28,7 @@ scheduler.bind(method, thisArg); ### Details -Этот метод служит совместимой с IE8 альтернативой функции [Function.prototype.bind()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind). +Метод используется как IE8 совместимая замена функции Function.prototype.bind(). ### Change log -- добавлено в версии 6.0 +- добавлено в версии 6.0 \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/blocktime.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/blocktime.md index d7139b82..33178c4b 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/blocktime.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/blocktime.md @@ -1,13 +1,13 @@ --- -sidebar_label: "blockTime" +sidebar_label: blockTime title: "blockTime method" description: "блокирует указанную дату и применяет к ней стиль по умолчанию 'dimmed'." --- # blockTime -:::warning -Эта функицональность устарела -::: +:::warning +Метод устарел. +::: ### Description @short: Блокирует указанную дату и применяет к ней стиль по умолчанию 'dimmed'. @@ -16,15 +16,15 @@ description: "блокирует указанную дату и применяе ### Parameters -- `date` - (required) *Date | number* - дата для блокировки (если передано число, оно интерпретируется как день недели:
'0' - воскресенье, '6' - суббота) -- `time_points` - (required) *array* - массив [start_minute,end_minute,..,start_minute_N,end_minute_N],
где каждая пара задает временной интервал. Массив может содержать любое количество таких пар -- `items` - (optional) *object* - уточняет конкретные элементы представления(ий), для которых нужно применить блокировку +- `date` - (required) *Date | number* - дата, которую следует заблокировать (если указан номер, параметр будет рассматриваться как номер дня недели
day: '0' — воскресенье, '6' — суббота ) +- `time_points` - (required) *array* - массив [start_minute,end_minute,..,start_minute_N,end_minute_N],
где каждая пара устанавливает определённый лимит диапазона. Массив может содержать любое число таких пар +- `items` - (optional) *object* - определяет конкретные элементы представления(й) для блокировки ### Example ~~~jsx -//блокирует события с полуночи до 8 утра каждую среду -//НО только для элементов с id=1, id=4 в представлении Units +//блокирует события с 0 до 8 часов для каждой среды +//но только для элементов с id=1, id=4 во представлении Units scheduler.blockTime(3, [0,8*60], { unit: [1,4] }); ~~~ @@ -37,27 +37,27 @@ scheduler.blockTime(3, [0,8*60], { unit: [1,4] }); Метод требует включенного плагина [limit](guides/extensions-list.md#limit). ::: -Метод можно использовать несколькими способами, например: +Метод можно вызывать различными способами, как показано ниже: ~~~js //блокирует весь день 3 мая 2009 года scheduler.blockTime(new Date(2009,5,3), "fullday"); -//блокирует события с полуночи до 10 утра 3 июня 2009 года +//блокирует события с 0 до 10 часов на 3 июня 2009 года scheduler.blockTime(new Date(2009,6,3), [0,10*60]); -//блокирует события с полуночи до 8 утра и с 18 до полуночи каждую субботу +//блокирует события с 0 до 8 часов и с 18 до 24 часов для каждой субботы scheduler.blockTime(6, [0,8*60,18*60,24*60]); -//блокирует все события каждое воскресенье +//блокирует все события для каждого воскресенья scheduler.blockTime(0, "fullday"); -//блокирует события с полуночи до 8 утра каждую среду -//НО только для элементов с id=1, id=4 в представлении Units +//блокирует события с 0 до 8 часов для каждой среды +//НО только для элементов с id=1, id=4 во представлении Units scheduler.blockTime(3, [0,8*60], { unit: [1,4] }); -//то же, что и выше, но с использованием объекта конфигурации для параметров +//делает то же, что и выше, но принимает параметры как конфигурационный объект scheduler.blockTime({ days: 3, zones: [0,8*60], @@ -68,107 +68,6 @@ scheduler.blockTime({ ~~~ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Свойство - - Описание -
start_date объект Date, определяющий начало ограничения
-~~~js -//запрещает создание событий с 3 мая 2012 года до 'end_date' -start_date:new Date(2012,4,3) -~~~ -
end_date объект Date, определяющий конец ограничения
-~~~js -//запрещает создание событий с 'start_date' до 3 сентября 2012 года -end_date:new Date(2012,8,3) -~~~ -
days дни недели или конкретные даты, которые нужно заблокировать
-~~~js -days:[0, 2, 6] //блокирует воскресенье, вторник и субботу -days:"fullweek" //блокирует всю неделю -days:new Date(2012,6,1) //блокирует 1 июля 2012 года -~~~ -
zonesвременные интервалы в минутах, которые нужно заблокировать
-~~~js -zones:[4*60,8*60,12*60,15*60] //два заблокированных интервала: 04:00-08:00, 12:00-15:00 -zones:"fullday" //блокирует весь день -~~~ -
cssимя CSS-класса для применения
-~~~js -css:"gray" //добавляет DIV с примененным CSS-классом 'gray' -~~~ -
invert_zonesопределяет, нужно ли инвертировать временные зоны, заданные в 'zones' (по умолчанию false)
-~~~js -//результат: два заблокированных интервала: 00:00-08:00 и 17:00-24:00 -zones: [8*60, 17*60], invert_zones: true -//результат: два заблокированных интервала: 00:00-08:00 и 17:00-24:00 -zones: [0, 8*60, 17*60, 24*60], invert_zones: false -~~~ -
sectionsпозволяет блокировать даты только для конкретных элементов в определённых представлениях.
Обратите внимание, что указанные даты будут заблокированы только в этих представлениях
-~~~js -//блокирует даты только для элемента с id=5 в представлении Units -//и для элементов с id=2 и id=3 в представлении Timeline -sections: { unit: 5, timeline: [2,3]} -~~~ -
### Related API - [addMarkedTimespan](api/method/addmarkedtimespan.md) @@ -176,4 +75,4 @@ sections: { unit: 5, timeline: [2,3]} - [unblockTime](api/method/unblocktime.md) ### Change log -- устарел с версии v5.1 +- устарел с v5.1 \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/callevent.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/callevent.md index 230ff0bf..8e978ba4 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/callevent.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/callevent.md @@ -1,24 +1,24 @@ --- -sidebar_label: "callEvent" +sidebar_label: callEvent title: "callEvent method" -description: "триггерит внутреннее событие" +description: "вызывает внутреннее событие" --- # callEvent ### Description -@short: Триггерит внутреннее событие +@short: Вызывает внутреннее событие @signature: callEvent: (name: string, params: any[]) =\> boolean ### Parameters -- `name` - (required) *string* - имя события, без учёта регистра -- `params` - (required) *array* - массив, содержащий данные, связанные с событием +- `name` - (required) *string* - имя события, без учета регистра +- `params` - (required) *array* - массив данных, связанных с событием ### Returns -- ` result` - (boolean) - false, если любой из обработчиков события возвращает false. В противном случае - true +- ` result` - (boolean) - false, если некоторые обработчики событий возвращают false. В противном случае, true ### Example @@ -27,12 +27,12 @@ scheduler.attachEvent("CustomEvent", function(param1, param2){ return true; }); -var res = scheduler.callEvent("CustomEvent", [param1, param2]); +const res = scheduler.callEvent("CustomEvent", [param1, param2]); ~~~ ### Details -События обычно срабатывают автоматически, поэтому использование этого метода требуется редко. +Обычно события вызываются автоматически, и вам не нужно использовать этот метод. ### Related API -- [attachEvent](api/method/attachevent.md) +- [attachEvent](api/method/attachevent.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/changeeventid.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/changeeventid.md index f9bccd88..832401b1 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/changeeventid.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/changeeventid.md @@ -1,36 +1,36 @@ --- -sidebar_label: "changeEventId" -title: "changeEventId method" -description: "обновляет id события" +sidebar_label: changeEventId +title: "Метод changeEventId" +description: "изменяет id события" --- # changeEventId ### Description -@short: Обновляет id события +@short: Изменяет id события @signature: changeEventId: (id: string, new_id: string) =\> void ### Parameters -- `id` - (required) *string* - текущий id события -- `new_id` - (required) *string* - новый id события +- `id` - (required) *string* - текущее id события +- `new_id` - (required) *string* - новое id события ### Example ~~~jsx -scheduler.changeEventId("ev15", "ev25"); // обновляет id события с "ev15" на "ev25" +scheduler.changeEventId("ev15", "ev25"); // changes the event's id "ev15" -> "ev25" ~~~ ### Details -Каждое событие, отображаемое в scheduler, имеет уникальный id. +Каждое событие, отображаемое в планировщике, имеет уникальное значение id. -Когда новое событие создаётся через UI, библиотека Scheduler присваивает ему временный id. +Когда новое событие создаётся через UI, ему присваивается временный id, генерируемый библиотекой Scheduler. -После того, как событие сохраняется в базе данных, оно получает постоянный id, сгенерированный базой данных. -Обычно ваш backend возвращает этот id из базы на клиентскую сторону, где scheduler его принимает и использует для любых последующих обновлений события. +После добавления события в базу данных оно получает постоянный id, генерируемый базой данных. +Обычный сценарий таков: ваш обработчик на стороне сервера возвращает id базы данных на клиентскую сторону, где scheduler подхватывает его и использует для дальнейших обновлений события. Если вы используете [dataProcessor модуль и следуете руководствам по серверной интеграции](guides/server-integration.md#technique), этот процесс происходит автоматически. Но если вы отправляете обновления на backend вручную, вам нужно обновлять id события вручную с помощью этого метода. @@ -43,16 +43,16 @@ jQuery.ajax({ url:"/myApi/event", data:{ data : event }, complete:function(result){ - // ответ backend после вставки нового события в базу + // ответ бэкэнда после вставки нового события в базу данных scheduler.changeEventId(event.id, result.databaseId); } }); ~~~ -Учтите, что этот метод вызывает событие [onEventIdChange](api/event/oneventidchange.md). +Примечание: метод вызывает событие [onEventIdChange](api/event/oneventidchange.md). ### Related API - [onEventIdChange](api/event/oneventidchange.md) ### Related Guides -- [Интеграция с серверной стороной](guides/server-integration.md#technique) +- [Серверная интеграция](guides/server-integration.md#technique) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/checkcollision.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/checkcollision.md index b80640ca..8cbd2d53 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/checkcollision.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/checkcollision.md @@ -1,7 +1,7 @@ --- -sidebar_label: "checkCollision" -title: "checkCollision method" -description: "проверяет, пересекается ли заданное событие с каким-либо существующим событием(ями) в тот же временной промежуток" +sidebar_label: checkCollision +title: "checkCollision метод" +description: "проверяет, происходит ли указанное событие во время, которое уже занято другим(и) событием(ями)" --- # checkCollision @@ -17,18 +17,18 @@ description: "проверяет, пересекается ли заданное - `event` - (required) *object* - объект события ### Returns -- ` result` - (boolean) - возвращает false, если временной слот события уже занят, иначе возвращает true. +- `result` - (boolean) - возвращает false, если время события уже занято, иначе - true. ### Example ~~~jsx -var event = { +const event = { text : "New Event", - start_date : new Date(2013, 02, 20, 10, 00), - end_date : new Date(2013, 02, 20, 14, 00) + start_date : new Date(2027, 02, 20, 10, 00), + end_date : new Date(2027, 02, 20, 14, 00) }; -var isOccupied = scheduler.checkCollision(event); // возвращает 'true' или 'false' +const isOccupied = scheduler.checkCollision(event); // returns 'true' or 'false' ~~~ ### Details @@ -37,10 +37,10 @@ var isOccupied = scheduler.checkCollision(event); // возвращает 'true' Этот метод требует включения плагина [collision](guides/extensions-list.md#collision). ::: -Имейте в виду, что этот метод вызывает событие [](api/event/oneventcollision.md). +Note, the method invokes the [onEventCollision](api/event/oneventcollision.md) event. ### Related API - [](api/event/oneventcollision.md) ### Related Guides -- [Предотвращение двойных событий в одном временном слоте](guides/collisions.md) +- [Предотвращение двойных событий в временном интервале](guides/collisions.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/checkevent.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/checkevent.md index 67c9e0d2..f34e2ed3 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/checkevent.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/checkevent.md @@ -1,14 +1,14 @@ --- -sidebar_label: "checkEvent" -title: "checkEvent method" -description: "проверяет, назначены ли обработчики для конкретного события" +sidebar_label: checkEvent +title: "Метод checkEvent" +description: "проверяет, задан ли обработчик(-и) для события" --- # checkEvent ### Description -@short: Проверяет, назначены ли обработчики для конкретного события +@short: Проверяет, задан ли обработчик(-и) для события @signature: checkEvent: (name: SchedulerEventName) =\> boolean @@ -17,7 +17,7 @@ description: "проверяет, назначены ли обработчики - `name` - (required) *SchedulerEventName* - имя события ### Returns -- `isExist` - (boolean) - возвращает true, если хотя бы один обработчик назначен на событие +- `isExist` - (boolean) - возвращает true, если для события указан какой-либо обработчик ### Example @@ -34,4 +34,4 @@ scheduler.checkEvent("onEventSave"); //возвращает 'true' ~~~ ### Related API -- [attachEvent](api/method/attachevent.md) +- [attachEvent](api/method/attachevent.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/checkinmarkedtimespan.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/checkinmarkedtimespan.md index 0bf59a08..8cca3361 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/checkinmarkedtimespan.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/checkinmarkedtimespan.md @@ -1,50 +1,50 @@ --- -sidebar_label: "checkInMarkedTimespan" -title: "checkInMarkedTimespan method" -description: "определяет, попадает ли событие в интервал времени заданного типа" +sidebar_label: checkInMarkedTimespan +title: "checkInMarkedTimespan метод" +description: "проверяет, принадлежит ли событие временному интервалу определенного типа" --- # checkInMarkedTimespan ### Description -@short: Определяет, попадает ли событие в интервал времени заданного типа +@short: Проверяет, принадлежит ли событие временному интервалу определенного типа @signature: checkInMarkedTimespan: (event: any, timespan: string) =\> boolean ### Parameters - `event` - (required) *object* - объект события -- `timespan` - (required) *string* - тип интервала времени +- `timespan` - (required) *string* - тип временнóго интервала ### Returns -- `isIn` - (boolean) - true, если событие происходит внутри указанного типа интервала времени +- `isIn` - (boolean) - true, если событие находится в временном интервале указанного типа ### Example ~~~jsx scheduler.addMarkedTimespan({ - start_date: new Date(2013,4,1), - end_date: new Date(2013,7,1), + start_date: new Date(2027,4,1), + end_date: new Date(2027,7,1), css: "red_section", type:"discount" }); -var eventId = scheduler.addEvent({ - start_date: "16-05-2013 09:00", - end_date: "16-05-2013 12:00", +const eventId = scheduler.addEvent({ + start_date: "16-05-2027 09:00", + end_date: "16-05-2027 12:00", text: "Meeting", holder: "John", room: "5" }) ... scheduler.checkInMarkedTimespan(scheduler.getEvent(eventId), "discount"); //->true -~~~ +~~~ -**Applicable views:** [Timeline view](views/timeline.md) +**Доступные представления:** [Timeline view](views/timeline.md) ### Details :::note - Метод требует активации плагина [limit](guides/extensions-list.md#limit). -::: + Метод требует активированного плагина [limit](guides/extensions-list.md#limit). +::: \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/checklimitviolation.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/checklimitviolation.md index c6c15d95..afa5047f 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/checklimitviolation.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/checklimitviolation.md @@ -1,14 +1,14 @@ --- -sidebar_label: "checkLimitViolation" -title: "checkLimitViolation method" -description: "определяет, пересекается ли заданное событие с заблокированным периодом времени" +sidebar_label: checkLimitViolation +title: "метод checkLimitViolation" +description: "проверяет, происходит ли указанное событие в заблокированном временном периоде" --- # checkLimitViolation ### Description -@short: Определяет, пересекается ли заданное событие с заблокированным периодом времени +@short: Проверяет, происходит ли указанное событие в заблокированном временном периоде @signature: checkLimitViolation: (event: any) =\> boolean @@ -17,27 +17,27 @@ description: "определяет, пересекается ли заданно - `event` - (required) *object* - объект события ### Returns -- `isBlocked` - (boolean) - возвращает true, если событие попадает в заблокированное время, иначе false. +- `isBlocked` - (boolean) - возвращает true, если событие происходит в заблокированное время, иначе - false. ### Example ~~~jsx -var event = { +const event = { text : "New Event", start_date : new Date(2013, 02, 20, 10, 00), end_date : new Date(2013, 02, 20, 14, 00) }; -var isBlocked = scheduler.checkLimitViolation(event); //возвращает 'true' или 'false' +const isBlocked = scheduler.checkLimitViolation(event); //возвращает 'true' или 'false' ~~~ ### Details :::note - Метод требует активации плагина [limit](guides/extensions-list.md#limit). -::: + Метод требует активации плагина [limit](guides/extensions-list.md#limit) для работы. +::: -Учтите, что этот метод вызывает событие [onLimitViolation](api/event/onlimitviolation.md). +Примечание: метод вызывает событие [onLimitViolation](api/event/onlimitviolation.md). ### Related API - [onLimitViolation](api/event/onlimitviolation.md) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/clearall.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/clearall.md index 62b57433..516feaa8 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/clearall.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/clearall.md @@ -1,5 +1,5 @@ --- -sidebar_label: "clearAll" +sidebar_label: clearAll title: "clearAll method" description: "удаляет все события из планировщика" --- @@ -23,4 +23,4 @@ scheduler.clearAll(); Имейте в виду, что этот метод вызывает событие [onClearAll](api/event/onclearall.md). ### Related API -- [onClearAll](api/event/onclearall.md) +- [onClearAll](api/event/onclearall.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/closeallsections.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/closeallsections.md index 7d1e24c9..88880f84 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/closeallsections.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/closeallsections.md @@ -1,16 +1,16 @@ --- -sidebar_label: "closeAllSections" +sidebar_label: closeAllSections title: "closeAllSections method" -description: "закрывает все секции в текущем активном вью" +description: "закрывает все разделы в текущем активном виде" --- # closeAllSections :::info - Эта функция доступна только в PRO-версии. + Эта функциональность доступна только в PRO-версии. ::: ### Description -@short: Закрывает все секции в текущем активном вью +@short: Закрывает все разделы в текущем активном виде @signature: closeAllSections: () =\> void @@ -20,21 +20,21 @@ description: "закрывает все секции в текущем акти scheduler.closeAllSections(); ~~~ -**Applicable views:** [Timeline view](views/timeline.md) +**Доступные представления:** [Timeline view](views/timeline.md) ### Details :::note - Метод работает только если включён плагин [treetimeline](guides/extensions-list.md#treetimeline). + Метод требует активированного плагина [treetimeline](guides/extensions-list.md#treetimeline). ::: :::note -Если активный вью не является Timeline в режиме 'Tree', этот метод не будет иметь эффекта. +Если открытый вид не является Timeline в режиме 'Tree', метод будет проигнорирован. ::: ### Related API - [closeSection](api/method/closesection.md) - [openAllSections](api/method/openallsections.md) -- [openSection](api/method/opensection.md) +- [openSection](api/method/opensection.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/closesection.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/closesection.md index aa85f3a8..ee362e3c 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/closesection.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/closesection.md @@ -1,5 +1,5 @@ --- -sidebar_label: "closeSection" +sidebar_label: closeSection title: "closeSection method" description: "Закрывает конкретный section внутри текущего активного view." --- @@ -10,13 +10,13 @@ description: "Закрывает конкретный section внутри те ::: ### Description -@short: Закрывает конкретный section внутри текущего активного view. +@short: Закрывает указанный раздел в текущем активном представлении @signature: closeSection: (section_id: string) =\> void ### Parameters -- `section_id` - (required) *string* - Идентификатор section, который нужно закрыть. +- `section_id` - (обязательный) *string* - идентификатор раздела ### Example @@ -42,21 +42,21 @@ scheduler.createTimelineView({ scheduler.closeSection("managers"); ~~~ -**Applicable views:** [Timeline view](views/timeline.md) +**Доступные представления:** [Timeline view](views/timeline.md) ### Details :::note - Метод требует включенного плагина [treetimeline](guides/extensions-list.md#treetimeline). + Для использования метода требуется активировать плагин [treetimeline](guides/extensions-list.md#treetimeline). ::: :::note -Если активный view не является Timeline в режиме 'Tree', этот метод не окажет никакого эффекта. +Если открытое представление не является Timeline в режиме 'Tree', метод будет проигнорирован. ::: ### Related API - [openSection](api/method/opensection.md) - [closeAllSections](api/method/closeallsections.md) -- [openAllSections](api/method/openallsections.md) +- [openAllSections](api/method/openallsections.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/collapse.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/collapse.md index c9d5cc46..a411f378 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/collapse.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/collapse.md @@ -1,14 +1,14 @@ ---- -sidebar_label: "collapse" +--- +sidebar_label: collapse title: "collapse method" -description: "возвращает scheduler из расширенного состояния обратно к обычному размеру" +description: "сворачивает развернутый планировщик обратно до обычного размера" --- # collapse ### Description -@short: Возвращает scheduler из расширенного состояния обратно к обычному размеру +@short: Сворачивает развернутый планировщик обратно до обычного размера @signature: collapse: () =\> void @@ -21,10 +21,10 @@ scheduler.collapse(); ### Details :::note - Для работы метода необходимо, чтобы была активна [expand](guides/extensions-list.md#expand) расширение. + Метод требует, чтобы расширение [expand](guides/extensions-list.md#expand) было включено. ::: ![collapse_method](/img/collapse_method.png) ### Related API -- [expand](api/method/expand.md) +- [expand](api/method/expand.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/confirm.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/confirm.md index cdba598a..4287e753 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/confirm.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/confirm.md @@ -1,28 +1,28 @@ --- -sidebar_label: "confirm" +sidebar_label: confirm title: "confirm method" -description: "открывает confirm message box" +description: "вызывает окно подтверждения" --- # confirm ### Description -@short: Открывает confirm message box +@short: Вызывает окно подтверждения @signature: confirm: (config: any) =\> HTMLElement ### Parameters -- `config` - (required) *object* - настройки для confirm box +- `config` - (обязательный) *объект* - конфигурация окна подтверждения ### Returns -- ` div` - (HTMLElement) - div элемент, содержащий confirm box +- `div` - (HTMLElement) - div-контейнер окна подтверждения ### Example ~~~jsx -var box = scheduler.confirm({ +const box = scheduler.confirm({ text: "Continue?", ok:"Yes", cancel:"No", @@ -38,7 +38,7 @@ var box = scheduler.confirm({ ### Details -Для получения дополнительной информации о доступных параметрах конфигурации confirm message box, ознакомьтесь со статьей [Всплывающие сообщения и модальные окна](guides/popups-and-modals.md). +Подробнее об поддерживаемых параметрах конфигурации окна подтверждения см. статью [Всплывающие сообщения и модальные окна](guides/popups-and-modals.md). ### Related API - [alert](api/method/alert.md) @@ -49,4 +49,4 @@ var box = scheduler.confirm({ - [Всплывающие сообщения и модальные окна](guides/popups-and-modals.md) ### Change log -- добавлено в версии 6.0 +- добавлено в версии 6.0 \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/copy.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/copy.md index e3cd82bf..cb485286 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/copy.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/copy.md @@ -1,29 +1,29 @@ --- -sidebar_label: "copy" -title: "copy method" -description: "создаёт глубокую копию заданного объекта" +sidebar_label: копирование +title: "Метод копирования" +description: "создает глубокую копию переданного объекта" --- -# copy +# Копирование ### Description -@short: Создаёт глубокую копию заданного объекта +@short: Создает глубокую копию переданного объекта @signature: copy: (event: any) =\> any ### Parameters -- `event` - (required) *object* - объект, который нужно продублировать +- `event` - (обязательный) *object* - объект, который нужно скопировать ### Returns -- ` backupEvent` - (object) - глубокая копия заданного объекта +- `backupEvent` - (object) - глубокая копия переданного объекта ### Example ~~~jsx -var backupEvent = scheduler.copy(scheduler.getEvent(id)); +const backupEvent = scheduler.copy(scheduler.getEvent(id)); ~~~ ### Change log -- added in version 6.0 +- добавлено в версии 6.0 \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/createdataprocessor.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/createdataprocessor.md index 3126e84b..ef5853e3 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/createdataprocessor.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/createdataprocessor.md @@ -1,28 +1,28 @@ --- -sidebar_label: "createDataProcessor" +sidebar_label: createDataProcessor title: "createDataProcessor method" -description: "создает новый экземпляр dataProcessor и связывает его с scheduler" +description: "создает новый экземпляр dataProcessor и прикрепляет его к scheduler" --- # createDataProcessor ### Description -@short: Создает новый экземпляр dataProcessor и связывает его с scheduler +@short: Создает новый экземпляр dataProcessor и прикрепляет его к scheduler @signature: createDataProcessor: (config: any) =\> any ### Parameters -- `config` - (required) *string | object* - объект конфигурации для dataProcessor +- `config` - (required) *string | object* - конфигурационный объект dataProcessor ### Returns -- ` dataProcessor` - (object) - созданный экземпляр dataProcessor +- `dataProcessor` - (object) - объект dataProcessor ### Example ~~~jsx -var dp = scheduler.createDataProcessor({ +const dp = scheduler.createDataProcessor({ url: "/api", mode: "REST" }); @@ -30,12 +30,12 @@ var dp = scheduler.createDataProcessor({ ### Details -Этот метод принимает один из следующих типов параметров: +Метод может принимать один из следующих типов параметров: -1\. Объект с `{url:string, mode:string}`, указывающий предопределенный способ отправки данных +1\. `{url:string, mode:string}` объект, задающий один из предопределённых режимов отправки данных ~~~js -var dp = scheduler.createDataProcessor({ +const dp = scheduler.createDataProcessor({ url: "/api", mode: "REST" }); @@ -43,23 +43,23 @@ var dp = scheduler.createDataProcessor({ где: -- url - конечная точка сервера -- mode - метод отправки данных: "JSON" | "REST-JSON" | "JSON" | "POST" | "GET" +- url - URL к серверу +- mode - режим отправки данных на сервер: "JSON" | "REST-JSON" | "JSON" | "POST" | "GET" -2\. В качестве альтернативы можно передать кастомный router объект: +2\. Или объект router: ~~~js -var dp = scheduler.createDataProcessor(router); +const dp = scheduler.createDataProcessor(router); ~~~ -Здесь router может быть функцией: +где router — либо функция: ~~~js // entity - "event" // action - "create"|"update"|"delete" // data - объект с деталями события // id – id обрабатываемого объекта (события) -var dp = scheduler.createDataProcessor(function(entity, action, data, id) { +const dp = scheduler.createDataProcessor(function(entity, action, data, id) { switch(action) { case "create": return scheduler.ajax.post( @@ -82,10 +82,10 @@ var dp = scheduler.createDataProcessor(function(entity, action, data, id) { }); ~~~ -или объектом со структурой: +или объектом следующей структуры: ~~~js -var dp = scheduler.createDataProcessor({ +const dp = scheduler.createDataProcessor({ event: { create: function(data) {}, update: function(data, id) {}, @@ -94,7 +94,7 @@ var dp = scheduler.createDataProcessor({ }); ~~~ -Каждая функция в router объекте должна возвращать либо Promise, либо объект с ответом данных. Это позволяет dataProcessor обновлять id в базе данных и подключать событие **onAfterUpdate**. +Все функции объекта router должны возвращать либо Promise, либо объект ответа данных. Это необходимо для того, чтобы dataProcessor мог применять идентификатор базы данных и подключать обработчик события **onAfterUpdate** к data processor. ~~~js router = function(entity, action, data, id) { @@ -105,7 +105,7 @@ router = function(entity, action, data, id) { } ~~~ -Такая гибкость позволяет DataProcessor обрабатывать сохранение данных в localStorage или других типах хранилищ, не привязанных к конкретному URL, или когда разные серверы (URL) управляют операциями создания и удаления. +Таким образом, вы можете использовать DataProcessor для сохранения данных в localStorage или в любом другом хранилище, не связанном с конкретным URL, или в случае, если существуют два разных сервера (URLs), ответственные за создание и удаление объектов. ### Related Guides - [Интеграция с серверной стороной](guides/server-integration.md) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/creategridview.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/creategridview.md index 7ff0289f..b043f08e 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/creategridview.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/creategridview.md @@ -1,22 +1,23 @@ ---- -sidebar_label: "createGridView" -title: "createGridView method" -description: "настраивает Grid view внутри планировщика" +--- +sidebar_label: createGridView +title: "createGridView метод" +description: "создает Grid view в планировщике" --- # createGridView :::info - Эта функция доступна только в PRO-версии. + Эта функциональность доступна только в версии PRO. ::: + ### Description @short: Настраивает Grid view внутри планировщика -@signature: createGridView: (config: any) =\> void +@signature: createGridView: (config: any) => void ### Parameters -- `config` - (required) *object* - объект конфигурации для Grid view +- `config` - (required) *object* - объект конфигурации Grid view ### Example @@ -28,12 +29,12 @@ scheduler.createGridView({ {id:"date", label:'Author', width:100}, {id:"text", label:'Votes', width:200, align:'left', sort:'int'} ], - from:new Date(2000, 00, 01), - to:new Date(2013, 00, 01) + from:new Date(2025, 00, 01), + to:new Date(2027, 00, 01) }); ~~~ -**Applicable views:** [Grid view](views/grid.md) +**Доступные представления:** [Grid view](views/grid.md) ### Related samples - [Grid view](https://docs.dhtmlx.com/scheduler/samples/03_extensions/27_grid_view.html) @@ -44,47 +45,47 @@ scheduler.createGridView({ Для использования этого метода необходимо активировать плагин [grid_view](guides/extensions-list.md#gridview). ::: -Объект конфигурации Grid view поддерживает следующие свойства: +Объект конфигурации Grid view может иметь следующие свойства: - + - - + + - + - + - + - + - + - + - +
name(string) идентификатор представления(string) идентификатор вида
fields(массив объектов) определяет колонки грида.
Каждый объект в этом массиве представляет колонку и может содержать следующие свойства:
  • id - (string) id колонки, который должен совпадать с именем соответствующего свойства данных
  • label - (string) текст заголовка колонки
  • width - (string) ширина колонки. Использование '*' заставляет колонку расширяться, чтобы заполнить оставшееся пространство. Если несколько колонок используют '*', они делят оставшуюся ширину поровну.
  • align - (right, center или left) горизонтальное выравнивание текста
  • valign - (top, middle или bottom) вертикальное выравнивание текста
  • template - (function) пользовательская функция шаблона для данных ячейки
  • sort - ('int','date','str' или пользовательская функция) включает сортировку по колонке (активируется кликом по заголовку) с предопределёнными типами или пользовательской функцией сортировки
  • css - (string) CSS класс, применяемый к колонке
fields(массив объектов) конфигурирует столбцы сетки grid. Каждый объект в массиве задаёт один столбец и может иметь следующие свойства:
  • id - (string) идентификатор столбца. Должен соответствовать имени связанного свойства данных, из которого вы будете загружать данные
  • label - (string) заголовок столбца
  • width - (string) ширина столбца. Можно использовать '*' (звездочка) в качестве значения ширины, чтобы принудительно заполнить оставшуюся ширину для конкретного столбца. Если использовать '*' для нескольких столбцов, они будут делить оставшуюся ширину поровну.
  • align - (right, center или left) горизонтальное выравнивание текста
  • valign - (top, middle или bottom) вертикальное выравнивание текста
  • template - (function) шаблон данных
  • sort - ('int','date','str' или пользовательская функция) включает сортировку по столбцу (инициируется одним кликом по заголовку) и присваивает один из предопределённых типов сортировки или имя функции сортировки
  • css - (string) имя CSS класса, который будет применён к столбцу
select(boolean) включает или отключает выделение в гриде (по умолчанию включено)(boolean) включает/выключает выделение в сетке (по умолчанию выделение включено)
rowHeight(number) задаёт высоту каждой строки в гриде(number) высота строк в сетке
paging(boolean) переключает отображение кнопок навигации ![navigation_buttons](/img/navigation_buttons.png) внутри грида [(подробнее)](views/grid.md)(boolean) включает/выключает навигацию кнопками ![navigation_buttons](/img/navigation_buttons.png) в сетке [(details)](views/grid.md)
unit(minute, hour, day, week, month, year) задаёт единицу времени для прокрутки. По умолчанию 'month'(minute, hour, day, week, month, year) единица прокрутки времени. По умолчанию - 'month'
step(number) количество единиц прокрутки за один шаг. По умолчанию 1.(number) количество единиц прокручивания за один шаг. По умолчанию 1.
from(Date) задаёт начальную дату диапазона планировщика(Date) устанавливает левую границу допустимого диапазона дат. Используется для ограничения диапазона дат в планировщике
to(Date) задаёт конечную дату диапазона планировщика(Date) устанавливает правую границу допустимого диапазона дат. Используется для ограничения диапазона дат в планировщике
### Related Guides -- [Грид View](views/grid.md) +- [Grid View](views/grid.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/createtimelineview.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/createtimelineview.md index 184bf2de..3ecd79e8 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/createtimelineview.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/createtimelineview.md @@ -1,5 +1,5 @@ --- -sidebar_label: "createTimelineView" +sidebar_label: createTimelineView title: "createTimelineView method" description: "настраивает Timeline view в планировщике" --- @@ -16,114 +16,112 @@ description: "настраивает Timeline view в планировщике" ### Parameters -- `config` - (required) *object* - объект конфигурации для Timeline view +- `config` - (required) *object* - объект конфигурации Timeline-вида ### Example ~~~jsx -// шкала времени с 8 утра до 8 вечера с интервалом в 30 минут +// шкала времени с 8:00 до 20:00 с шагом 30 минут scheduler.createTimelineView({ name: "timeline", - x_unit: "minute", - x_date: "%H:%i", - x_step: 30, - x_size: 24, + x_unit: "minute", + x_date: "%H:%i", + x_step: 30, + x_size: 24, x_start: 16, x_length: 48, fit_events_offset: 15, - y_unit:[ - {key:1, label:"Section A"}, - {key:2, label:"Section B"}, - {key:3, label:"Section C"}, - {key:4, label:"Section D"} + y_unit: [ + { key: 1, label: "Section A" }, + { key: 2, label: "Section B" }, + { key: 3, label: "Section C" }, + { key: 4, label: "Section D" } ], y_property: "section_id", - render: "bar" + render: "bar" }); ~~~ **Applicable views:** [Timeline view](views/timeline.md) ### Related samples -- [Cell mode](https://docs.dhtmlx.com/scheduler/samples/06_timeline/01_slots.html) -- [Bar mode](https://docs.dhtmlx.com/scheduler/samples/06_timeline/02_lines.html) -- [Tree mode](https://docs.dhtmlx.com/scheduler/samples/06_timeline/03_tree.html) -- [Days as Timeline rows](https://docs.dhtmlx.com/scheduler/samples/06_timeline/14_days_as_sections.html) +- [Режим ячеек](https://docs.dhtmlx.com/scheduler/samples/06_timeline/01_slots.html) +- [Бар-режим](https://docs.dhtmlx.com/scheduler/samples/06_timeline/02_lines.html) +- [Режим дерева](https://docs.dhtmlx.com/scheduler/samples/06_timeline/03_tree.html) +- [Дни как строки Timeline](https://docs.dhtmlx.com/scheduler/samples/06_timeline/14_days_as_sections.html) ### Details :::note - Для работы метода необходимо включить плагин [timeline](guides/extensions-list.md#timeline). + Метод требует активации плагина [timeline](guides/extensions-list.md#timeline). ::: - Объект конфигурации Timeline view поддерживает следующие свойства: -- name - (string) идентификатор view. Если указать имя, совпадающее с существующим Timeline view, оно будет перезаписано -- render - ('cell', 'bar', 'tree', 'days') режим отображения. По умолчанию 'cell' -- y_property - (string) свойство данных, используемое для связывания событий с конкретными секциями -- y_unit - (массив объектов) описывает секции в представлении.
Каждый объект представляет секцию со следующими свойствами: - - children - (массив) вложенные элементы, только для режима 'Tree' - - key - (string) id секции, сопоставляется со свойством события для назначения событий - - label - (string) отображаемая метка секции - - open - (boolean) раскрыта ли секция изначально (для режима 'Tree') -- days - (number) количество элементов (дней) по оси Y, актуально только для режима 'Days' -- x_unit - (minute, hour, day, week, month, year) единица измерения по оси X. По умолчанию 'minute' -- x_date - (string) формат даты по оси X (см. [Спецификация формата даты](guides/settings-format.md)). Если не задан, используется формат из [hour_date](api/config/hour_date.md) -- x_step - (number) шаг по оси X в единицах 'x_unit'. По умолчанию 1 -- x_start - (number) смещение по оси X в единицах 'x_unit'. По умолчанию 0 -- x_size - (number) общая длина оси X в количестве 'x_step'. По умолчанию 24 -- x_length - (number) количество 'x_step', на которое прокручивается таймлайн при нажатии кнопки 'next' в шапке планировщика. Опционально, по умолчанию 1. -Этот параметр требует внимания: - - Применяется только если x_unit='minute' или x_unit='hour'. Для других единиц можно опустить. - - Без x_length для этих единиц таймлайн показывает часть дневного интервала, основанного на других параметрах шкалы (x_start, x_step, x_size), позволяя прокручивать сегменты дня. - - Если x_length задан, он должен покрывать целый день (число x_step, составляющих день), чтобы кнопка 'next' работала корректно. -- first_hour - (number) начальный час временного интервала в ячейке, используется только если x_unit="day" -- last_hour - (number) конечный час временного интервала в ячейке, используется только если x_unit="day" -- show_unassigned (boolean) если false, события без назначения на секцию не отображаются; если true, такие события показываются в первой секции. По умолчанию false. Опционально -- section_autoheight - (boolean) включает автоматическую подгонку высоты ячеек. По умолчанию true -- dy - (number) минимальная высота ячейки (если section_autoheight false, ячейки имеют фиксированную высоту; иначе высота расширяется под содержимое). По умолчанию 50 -- dx - (number) ширина колонки с названиями секций. По умолчанию 200 -- event_dy - (number/string) высота событий; может быть 'full' для заполнения всей ячейки. По умолчанию scheduler.xy.bar_height-5 -- event_min_dy - (number) минимальная высота события. По умолчанию scheduler.xy.bar_height-5 -- resize_events - (boolean) разрешает уменьшать высоту отдельных событий, чтобы уместить их в одну высоту события (не ниже event_min_dy). По умолчанию true -- fit_events - (boolean) расширять ли высоту секции под все события или держать фиксированной (dy). Доступно с версии 3.0. По умолчанию true -- fit_events_offset - (number) дополнительное пространство (в пикселях) под последним событием, применяется при fit_events true -- round_position - (boolean) растягивает события на всю ширину ячейки вне зависимости от длительности. По умолчанию false. Применяется только в режимах 'Bar' и 'Tree' -- folder_events_available - (boolean) разрешает назначать события целым папкам (на любом уровне), а не только отдельным холдерам. Только для режима 'Tree'. По умолчанию false -- folder_dy - (number) высота в пикселях для папок (секций, содержащих дочерние секции). Только для режима 'Tree' -- second_scale - (object) добавляет вторую ось X над основной для группировки временных интервалов. Опционально. Доступно с версии 3.0.
Объект содержит: - - x_unit - (minute, hour, day, week, month, year) единица измерения. По умолчанию 'minute' - - x_date - (string) формат даты (см. [Спецификация формата даты](guides/settings-format.md)). Если не задан, используется формат из [hour_date](api/config/hour_date.md) -- scrollable - (boolean) включает горизонтальный скроллинг в Timeline view; по умолчанию false. Если false или не задано, колонки дат сжимаются по ширине под размер окна. Если true, колонки не сжимаются меньше column_width, и появляется горизонтальный скроллбар при необходимости. -- column_width - (number) минимальная ширина колонок с датами таймлайна; по умолчанию 100 -- scroll_position - (Date) прокручивает таймлайн к определённой дате после рендера; принимает те же аргументы, что и timeline.scrollTo() -- autoscroll - (object) настраивает чувствительность и скорость автоскроллинга, со свойствами: - - range_x - (number) горизонтальное расстояние автоскролла от краёв области данных - - range_y - (number) вертикальное расстояние автоскролла от краёв области данных - - speed_x - (number) скорость горизонтального автоскролла - - speed_y - (number) скорость вертикального автоскролла -- cell_template - (boolean) включает рендеринг кастомного шаблона для ячеек таймлайна -- **smart_rendering** - (*boolean*) включает умный рендеринг, при котором рендерятся только видимые строки, колонки и события, остальные загружаются при скроллинге. По умолчанию включено для scrollable таймлайнов. -- columns - (массив) задаёт колонки для левой панели. Если не указан, используется шаблон [timeline_scale_label](api/template/timelinename_scale_label.md). - +- `name` - (*string*) идентификатор вида. Если вы укажете имя уже существующего Timeline-вида, он будет перезаписан +- `render` - (*'cell', 'bar', 'tree', 'days'*) режим отображения вида. По умолчанию - 'cell' +- `y_property` - (*string*) имя свойства данных, которое будет использоваться для распределения событий по разделам +- `y_unit` - (*array of objects*) определяет разделы вида. Каждый объект в массиве задает один раздел и имеет следующие свойства: + - `children` - (*array*) массив вложенных объектов (только для режима 'Tree') + - `key` - (*string*) идентификатор раздела. Это свойство сравнивается со свойством данных события для присвоения события разделу + - `label` - (*string*) подпись раздела + - `open` - (*boolean*) задает, будет ли раздел открыт по умолчанию (только для режима 'Tree') +- `days` - (*number*) количество элементов (дней) на оси Y. Применимо только к режиму 'Days' +- `x_unit` - (*minute, hour, day, week, month, year*) единица измерения оси X. По умолчанию - 'minute' +- `x_date` - (*string*) формат даты оси [X-Axis](guides/settings-format.md). Если не указано, используется формат [`hour_date`](api/config/hour_date.md) +- `x_step` - (*number*) шаг оси X в единицах `x_unit`. По умолчанию - 1 +- `x_start` - (*number*) смещение оси X в единицах `x_unit`. По умолчанию - 0 +- `x_size` - (*number*) длина оси X, заданная как общее число `x_step`. По умолчанию - 24 +- `x_length` - (*number*) число `x_step`, которое будет прокручиваться за раз, когда пользователь нажимает на кнопку 'next' в шапке планировщика. Опционально. По умолчанию - 1. +Это довольно запутанный параметр, и чтобы не допустить ошибки, запомните следующее: + - Этот параметр можно использовать только если `x_unit='minute'` или `x_unit='hour'`. В остальных случаях параметр не требуется указывать. + - Если `x_unit='minute'` или `x_unit='hour'` и вы не указываете `x_length`, ось X будет отображать интервал времени (а не весь день, как обычно), указанной оставшимися параметрами масштаба (`x_start`, `x_step`, `x_size`). Это позволяет разделить день на равные временные интервалы и прокручивать их кнопкой "далее". + - Если `x_unit='minute'` или `x_unit='hour'` и вы решите задать этот параметр, установите его на весь день (то есть `x_length` должно быть равно количеству `x_steps`, необходимых для заполнения всего дня), чтобы обеспечить корректную работу кнопки 'next'. +- `first_hour` - (*number*) устанавливает начальный час временного интервала ячейки. Атрибут применим только если `x_unit="day"` +- `last_hour` - (*number*) устанавливает конечный час временного интервала ячейки. Атрибут применим только если `x_unit="day"` +- `show_unassigned` - (*boolean*) если *false*, события, не принадлежащие ни к одному разделу, не будут отображаться. Если *true* — такие события будут размещены в первом разделе. По умолчанию - *false*. Опционально +- `section_autoheight` - (*boolean*) включает автоматическую настройку высоты для ячеек. По умолчанию, *true* +- `dy` - (*number*) минимальная высота ячеек (если свойство `section_autoheight` имеет значение *false*, высота ячеек будет равна `dy`, иначе высота ячеек будет увеличиваться, чтобы заполнить все свободное пространство). По умолчанию 50 +- `dx` - (*number*) ширина колонки со названиями разделов. По умолчанию 200 +- `event_dy` - (*number/string*) высота событий. Может принимать значение `full` и занимать всю ячейку. По умолчанию равна `scheduler.xy.bar_height-5` +- `event_min_dy` - (*number*) минимальная высота события. По умолчанию равна `scheduler.xy.bar_height-5` +- `resize_events` - (*boolean*) задает, следует ли уменьшать высоту отдельных событий, чтобы суммарная высота была равна высоте одного события (но не менее значения `event_min_dy`). По умолчанию *true* +- `fit_events` - (*boolean*) задает, следует ли увеличивать высоту секции, чтобы уместить все события в этой секции, или она должна быть фиксированной (параметр `dy`). Доступно с версии 3.0. По умолчанию *true* +- `fit_events_offset` - (*number*) добавляет дополнительное пространство (в пикселях) под последним событием. Применяется, когда `fit_events` установлен в *true* +- `round_position` - (*boolean*) "растягивает" события по всей ширине ячейки, независимо от длительности события. По умолчанию *false*. Только для режимов 'Bar' и 'Tree' +- `folder_events_available` - (*boolean*) следует установить в *true*, если нужно иметь возможность задавать события не только для отдельного держателя, но и для всей папки (любого уровня). Применимо к режиму 'Tree' только. По умолчанию *false* +- `folder_dy` - (*number*) высота папок в пикселях (папки — разделы, имеющие дочерние разделы). Применимо к режиму 'Tree' только +- `second_scale` - (*object*) добавляет второй X-Axis поверх базового и служит для группировки временных интервалов на исходной шкале. Опционально. Доступно с версии 3.0. Объект масштаба имеет следующие свойства: + - `x_unit` - (*minute, hour, day, week, month, year*) единица измерения оси. По умолчанию 'minute' + - `x_date` - (*string*) формат даты оси. Если не указано, используется формат [`hour_date`](api/config/hour_date.md) +- `scrollable` - (*boolean*) включает горизонтальную прокрутку в Timeline view, по умолчанию false. Если *false* или не указано, столбцы дат будут сжиматься, чтобы поместиться на ширине области просмотра. +Если *true*, столбцы дат не будут сжиматься менее чем до значения `column_width`, при необходимости будет отображаться горизонтальная полоса прокрутки. +- `column_width` - (*number*) минимальная ширина столбцов даты Timeline, по умолчанию 100 +- `scroll_position` - (*Date*) отображает Timeline прокрученным к конкретной позиции, принимает те же аргументы, что и `timeline.scrollTo()`, то есть дату, к которой нужно прокрутить Timeline после рендеринга +- `autoscroll` - (*object*) позволяет настроить чувствительность и скорость автопрокрутки. Объект autoscroll имеет следующие свойства: + - `range_x` - (*number*) горизонтальная дальность автопрокрутки от края области данных + - `range_y` - (*number*) вертикальная дальность автопрокрутки от края области данных + - `speed_x` - (*number*) скорость горизонтальной автопроскрутки + - `speed_y` - (*number*) скорость вертикальной автопроскрутки +- `cell_template` - (*boolean*) включает рендеринг шаблона, заданного для Timeline +- `smart_rendering` - (*boolean*) включает умное рендеринг-функциональность в Timeline (позволяет рендерить только строки, столбцы и события, видимые на экране, остальные элементы рендерятся во время прокрутки Timeline). Обратите внимание, что в [scrollable timeline](views/timeline.md#horizontal-scroll) этот параметр включён по умолчанию. +- `columns` - (*array*) список столбцов для левой панели. Если не указаны, для содержания панели будет использоваться шаблон [`timeline_scale_label`](api/template/timelinename_scale_label.md). ## Динамическое изменение свойств -Все Timeline view хранятся в **scheduler.matrix**. -Вы можете получить и изменить конфигурацию любого Timeline view по его имени. Изменения вступают в силу после перерисовки планировщика: +Все определённые Timeline-объекты сохраняются в объекте `scheduler.matrix`. +Вы можете получить конфигурацию любого Timeline-view по его имени и изменить любое свойство. Изменения будут применяться сразу после обновления планировщика с помощью `setCurrentView()`: ~~~js scheduler.getView('timeline').x_size = 12; scheduler.setCurrentView(); // перерисовывает планировщик ~~~ - Здесь "timeline" - это имя, заданное Timeline view в методе [createTimelineView](api/method/createtimelineview.md): ~~~js scheduler.createTimelineView({ - name:"timeline", + name: "timeline", ... }); -~~~ +~~~ \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/createunitsview.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/createunitsview.md index 0477a621..75b98f03 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/createunitsview.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/createunitsview.md @@ -1,5 +1,5 @@ --- -sidebar_label: "createUnitsView" +sidebar_label: createUnitsView title: "createUnitsView method" description: "настраивает Units view внутри scheduler" --- @@ -16,7 +16,7 @@ description: "настраивает Units view внутри scheduler" ### Parameters -- `config` - (required) *object* - объект конфигурации для Units view +- `config` - (required) *object* - объект конфигурации Units view ### Example @@ -31,16 +31,16 @@ scheduler.createUnitsView({ ] }); -scheduler.init('scheduler_here',new Date(2009,5,30),"unit"); +scheduler.init('scheduler_here',new Date(2027,5,30),"unit"); scheduler.parse([ - {start_date:"06/30/2009 09:00",end_date:"06/30/2009 12:00",text:"Task1",unit_id:1}, - {start_date:"06/30/2009 12:00",end_date:"06/30/2009 20:00",text:"Task2",unit_id:3}, - {start_date:"06/30/2009 08:00",end_date:"06/30/2009 12:00",text:"Task3",unit_id:2} + {start_date:"06/30/2027 09:00",end_date:"06/30/2027 12:00",text:"Task1",unit_id:1}, + {start_date:"06/30/2027 12:00",end_date:"06/30/2027 20:00",text:"Task2",unit_id:3}, + {start_date:"06/30/2027 08:00",end_date:"06/30/2027 12:00",text:"Task3",unit_id:2} ],"json"); ~~~ -**Applicable views:** [Units view](views/units.md) +**Доступные представления:** [Units view](views/units.md) ### Related samples - [Units view](https://docs.dhtmlx.com/scheduler/samples/03_extensions/02_units_view.html) @@ -49,7 +49,7 @@ scheduler.parse([ ### Details :::note - Для использования этого метода должен быть включен плагин [units](guides/extensions-list.md#units). + Метод требует активации плагина [units](guides/extensions-list.md#units). ::: Объект конфигурации для Units view поддерживает следующие свойства: @@ -57,31 +57,31 @@ scheduler.parse([ name - (string) идентификатор для view. Если Units view с таким именем уже существует, он будет заменён + (string) идентификатор представления. Если вы укажете имя уже существующего Units view - оно будет перезаписано property - (string) указывает свойство данных, используемое для связывания событий с конкретными units + (string) имя свойства данных, которое будет использоваться для назначения событий конкретным единицам - list - (массив объектов) определяет units, отображаемые во view.
Каждый объект в массиве представляет отдельный unit и включает:
  • key - (string) уникальный id unit. Это значение сопоставляется со свойством данных события для связи событий с units
  • label - (string) отображаемая метка unit
+ list + (array of objects) задаёт единицы представления.
Каждый объект в массиве задаёт одну единицу и имеет следующие свойства:
  • key - (string) идентификатор единицы. Этот атрибут сравнивается со свойством данных события, чтобы присвоить событие этой единице
  • label - (string) подпись единицы
days - (number) количество элементов (дней), отображаемых по оси Y + (number) число элементов (дней) на оси Y skip_incorrect - (boolean) если установлено в true, события, не соответствующие ни одному unit, не будут отображаться. Если false, такие события назначаются первому unit. По умолчанию false. Необязательно + (boolean) если true, события, принадлежащие не к одной из единиц, не будут отображаться. Если false — такие события будут назначены первой единице. По умолчанию — false. Опционально size - (number) количество units, отображаемых одновременно. Если фактическое количество превышает это значение, появляется scrollbar. Необязательно + (number) количество единиц, которые должны отображаться в представлении (если фактическое количество превысит это значение, будет отображаться полосa прокрутки). Опционально step - (number) количество units, прокручиваемых за один шаг. Необязательно + (number) количество единиц, которое будет прокручиваться за один раз. Опционально - + \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/dataprocessor.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/dataprocessor.md index f841c327..0759eea9 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/dataprocessor.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/dataprocessor.md @@ -1,7 +1,7 @@ --- -sidebar_label: "DataProcessor" -title: "DataProcessor method" -description: "Конструктор DataProcessor" +sidebar_label: DataProcessor +title: "DataProcessor метод" +description: "DataProcessor конструктор" --- # DataProcessor @@ -14,17 +14,17 @@ description: "Конструктор DataProcessor" ### Parameters -- `url` - (required) *string* - URL источника данных +- `url` - (обязательный) *string* - URL потока данных ### Example ~~~jsx -var dp = new scheduler.DataProcessor("php/update.php"); +const dataProcessor = new scheduler.DataProcessor("php/update.php"); ~~~ ### Details -Более подробную информацию о DataProcessor и его API можно найти [здесь](https://docs.dhtmlx.com/dataprocessor__index.html). +Подробнее о DataProcessor можно найти в статье [Интеграция на стороне сервера](guides/server-integration.md). ### Change log -- добавлено в версии 6.0 +- Добавлено в версии 6.0 \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/defined.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/defined.md index fccb9753..4c69ebb2 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/defined.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/defined.md @@ -1,23 +1,23 @@ --- -sidebar_label: "defined" +sidebar_label: defined title: "defined method" -description: "возвращает false, если аргумент равен undefined; возвращает true в остальных случаях" +description: "возвращает false, если переданный аргумент является undefined, иначе true" --- # defined ### Description -@short: Возвращает false, если аргумент равен undefined; возвращает true в остальных случаях +@short: Возвращает false, если переданный аргумент является undefined, иначе true @signature: defined: (event: any) =\> boolean ### Parameters -- `event` - (required) *object* - объект, который необходимо проверить +- `event` - (required) *object* - объект, который должен быть проверен ### Returns -- ` state` - (boolean) - false, если аргумент равен undefined, true в противном случае +- ` state` - (boolean) - false, если переданный аргумент равен undefined, иначе true ### Example @@ -29,4 +29,4 @@ if(scheduler.defined(event.custom_property)){ ~~~ ### Change log -- added in version 6.0 +- добавлено в версии 6.0 \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/deleteallsections.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/deleteallsections.md index a1e5f313..e82ceb61 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/deleteallsections.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/deleteallsections.md @@ -1,16 +1,16 @@ --- -sidebar_label: "deleteAllSections" -title: "deleteAllSections method" -description: "удаляет все секции из активного вида" +sidebar_label: deleteAllSections +title: "deleteAllSections метод" +description: "удаляет все секции из текущего активного представления" --- # deleteAllSections :::info - Эта функция доступна только в PRO-версии. + Эта функциональность доступна только в версии PRO. ::: ### Description -@short: Удаляет все секции из активного вида +@short: Удаляет все секции из текущего активного представления @signature: deleteAllSections: () =\> void @@ -32,20 +32,20 @@ scheduler.createTimelineView({ scheduler.deleteAllSections(); ~~~ -**Applicable views:** [Timeline view](views/timeline.md) +**Доступные представления:** [Timeline view](views/timeline.md) ### Details :::note - Метод требует активации плагина [treetimeline](guides/extensions-list.md#treetimeline). -::: + Методы требуется активировать плагин [treetimeline](guides/extensions-list.md#treetimeline). + ::: :::note -Если текущий вид не является Timeline с рендерингом 'Tree', этот метод не будет иметь эффекта. +Если открытое представление не является Timeline в режиме 'Tree', метод будет проигнорирован. ::: ### Related API - [deleteSection](api/method/deletesection.md) -- [addSection](api/method/addsection.md) +- [addSection](api/method/addsection.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/deleteevent.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/deleteevent.md index 8f0825c8..27c260b8 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/deleteevent.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/deleteevent.md @@ -1,5 +1,5 @@ --- -sidebar_label: "deleteEvent" +sidebar_label: deleteEvent title: "deleteEvent method" description: "удаляет указанное событие" --- @@ -14,30 +14,30 @@ description: "удаляет указанное событие" ### Parameters -- `id` - (required) *string | number* - идентификатор события +- `id` - (обязательный) *string | number* - идентификатор события ### Example ~~~jsx -scheduler.init('scheduler_here',new Date(2009,5,30),"day"); +scheduler.init('scheduler_here',new Date(2027,5,30),"day"); scheduler.parse([ - {id:1, start_date:"06/30/2009 09:00", end_date:"06/30/2009 12:00", text:"Task1"}, - {id:2, start_date:"06/30/2009 12:00", end_date:"06/30/2009 20:00", text:"Task2"}, - {id:3, start_date:"06/30/2009 08:00", end_date:"06/30/2009 12:00", text:"Task3"} + {id:1, start_date:"06/30/2027 09:00", end_date:"06/30/2027 12:00", text:"Task1"}, + {id:2, start_date:"06/30/2027 12:00", end_date:"06/30/2027 20:00", text:"Task2"}, + {id:3, start_date:"06/30/2027 08:00", end_date:"06/30/2027 12:00", text:"Task3"} ],"json"); ... scheduler.deleteEvent(3); ~~~ ### Related samples -- [Fully custom lightbox](https://docs.dhtmlx.com/scheduler/samples/02_customization/16_custom_form.html) -- [Recurring events](https://docs.dhtmlx.com/scheduler/samples/03_extensions/01_recurring_events.html) +- [Полностью настраиваемый lightbox](https://docs.dhtmlx.com/scheduler/samples/02_customization/16_custom_form.html) +- [Повторяющиеся события](https://docs.dhtmlx.com/scheduler/samples/03_extensions/01_recurring_events.html) ### Details Этот метод может принимать второй параметр: -- **silent** - (*boolean*) если установить в *true*, метод **deleteEvent** будет работать только на клиентской стороне, избегая любых запросов к серверу: +- **silent** - (*boolean*) если установлен в *true*, **deleteEvent** будет работать только на стороне клиента и не будет вызывать обращения к серверу: ~~~js // удаляет указанное событие только на клиентской стороне @@ -51,4 +51,4 @@ scheduler.deleteEvent(id, true); - [addEventNow](api/method/addeventnow.md) ### Related Guides -- [Добавление/Удаление событий](guides/adding-events.md) +- [Добавление/удаление событий](guides/adding-events.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/deletemarkedtimespan.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/deletemarkedtimespan.md index c40b5ecd..c4eac0e6 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/deletemarkedtimespan.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/deletemarkedtimespan.md @@ -1,7 +1,7 @@ --- -sidebar_label: "deleteMarkedTimespan" -title: "deleteMarkedTimespan method" -description: "удаляет маркировку или блокировку, созданную с помощью метода addMarkedTimespan()" +sidebar_label: deleteMarkedTimespan +title: "deleteMarkedTimespan метод" +description: "удаляет пометку/блокировку, установленную методом addMarkedTimespan()" --- # deleteMarkedTimespan @@ -14,12 +14,12 @@ description: "удаляет маркировку или блокировку, ### Parameters -- `config` - (optional) *string | object* - id timespan или объект с его конфигурационными свойствами +- `config` - (optional) *string | object* - идентификатор временного диапазона или свойства конфигурации временного диапазона ### Example ~~~jsx -var spanID = scheduler.addMarkedTimespan({ +const spanID = scheduler.addMarkedTimespan({ days: [0,1], zones: "fullday" }); @@ -27,7 +27,7 @@ scheduler.deleteMarkedTimespan(spanID); ~~~ ### Related samples -- [Highlighted timespans in Month view](https://docs.dhtmlx.com/scheduler/samples/09_api/07_highlighted_timespans_month_view.html) +- [Выделенные временные диапазоны в месячном представлении](https://docs.dhtmlx.com/scheduler/samples/09_api/07_highlighted_timespans_month_view.html) ### Details @@ -38,29 +38,28 @@ scheduler.deleteMarkedTimespan(spanID); ::: :::note - Метод требует включенного плагина [limit](guides/extensions-list.md#limit). + Методу требуется активированный плагин [limit](guides/extensions-list.md#limit). ::: Этот метод поддерживает три варианта вызова: -1. **deleteMarkedTimespan()** - без параметров, удаляет все маркировки/блокировки. -2. **deleteMarkedTimespan(id)** - удаляет timespan с указанным id. -3. **deleteMarkedTimespan(config)** - удаляет timespans, соответствующие заданным конфигурационным свойствам. - +1. **deleteMarkedTimespan()** - не принимает параметров и удаляет все блокировки/пометки. +2. **deleteMarkedTimespan(id)** - принимает идентификатор временного диапазона. +3. **deleteMarkedTimespan(config)** - принимает некоторые свойства конфигурации. ~~~js -var spanID = scheduler.addMarkedTimespan({ +const spanID = scheduler.addMarkedTimespan({ days: [3,4,5], zones: [100,400] }); -// удаляет маркировку для каждого воскресенья +// удаляет пометку для каждого воскресенья scheduler.deleteMarkedTimespan({ days: 0, }); -// удаляет маркировку для временного интервала между 250 и 350 минутами в каждую пятницу -// таким образом, в пятницу останутся две маркировки: 100-250 и 350-400 +//удаляет пометку для периода времени с 250 по 350 минуту каждого пятница +//каждая пятница теперь будет иметь 2 блока пометки: 100-250, 350-400 scheduler.deleteMarkedTimespan({ days: 5, zones: [250,350] @@ -76,4 +75,4 @@ scheduler.deleteMarkedTimespan({ ~~~ ### Related API -- [addMarkedTimespan](api/method/addmarkedtimespan.md) +- [addMarkedTimespan](api/method/addmarkedtimespan.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/deletesection.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/deletesection.md index 44ad6f6a..36749089 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/deletesection.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/deletesection.md @@ -1,7 +1,7 @@ --- -sidebar_label: "deleteSection" +sidebar_label: deleteSection title: "deleteSection method" -description: "удаляет секцию из текущего активного вида" +description: "удаляет раздел из текущего активного вида" --- # deleteSection @@ -10,16 +10,16 @@ description: "удаляет секцию из текущего активног ::: ### Description -@short: Удаляет секцию из текущего активного вида +@short: Удаляет раздел из текущего активного вида @signature: deleteSection: (section_id: string) =\> boolean ### Parameters -- `section_id` - (required) *string* - идентификатор секции +- `section_id` - (обязательно) *string* - идентификатор раздела ### Returns -- ` isSuccess` - (boolean) - возвращает true, если секция была успешно удалена, false в противном случае (например, если ID секции некорректен). +- ` isSuccess` - (boolean) - возвращает true, если раздел был удалён успешно и false в других случаях (например, если указан неверный раздел). ### Example @@ -43,22 +43,22 @@ scheduler.createTimelineView({ }); ... scheduler.deleteSection("sales"); -~~~ +~~~ -**Applicable views:** [Timeline view](views/timeline.md) +**Доступные представления:** [Timeline view](views/timeline.md) ### Details :::note - Для работы метода необходимо включить плагин [treetimeline](guides/extensions-list.md#treetimeline). + Метод требует активированного плагина [treetimeline](guides/extensions-list.md#treetimeline). ::: :::note -Если текущий вид не является Timeline в режиме 'Tree', метод не окажет никакого эффекта. +Если открытое представление не Timeline в режиме 'Tree', метод будет проигнорирован. ::: ### Related API - [deleteAllSections](api/method/deleteallsections.md) -- [addSection](api/method/addsection.md) +- [addSection](api/method/addsection.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/destroycalendar.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/destroycalendar.md index 009726cc..a65b1a29 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/destroycalendar.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/destroycalendar.md @@ -1,41 +1,41 @@ --- -sidebar_label: "destroyCalendar" -title: "destroyCalendar method" -description: "удаляет ранее созданный мини-календарь" +sidebar_label: destroyCalendar +title: "destroyCalendar метод" +description: "уничтожает ранее созданный мини-календарь" --- # destroyCalendar ### Description -@short: Удаляет ранее созданный мини-календарь +@short: Уничтожает ранее созданный мини-календарь @signature: destroyCalendar: (name?: any) =\> void ### Parameters -- `name` - (required) *object* - объект мини-календаря, который нужно удалить (если не указан, scheduler попытается удалить самый недавно созданный мини-календарь) +- `name` - (optional) *object* - объект мини-календаря (если не указано, планировщик попытается
удалить последний созданный мини календарь) ### Example ~~~jsx -var calendar = scheduler.renderCalendar(...); +const calendar = scheduler.renderCalendar(...); ... scheduler.destroyCalendar(calendar); ~~~ ### Related samples -- [Mini calendar in the scheduler header](https://docs.dhtmlx.com/scheduler/samples/05_calendar/01_select.html) -- [Mini calendar with the recurring events](https://docs.dhtmlx.com/scheduler/samples/05_calendar/06_recurring_form.html) +- [Мини-календарь в заголовке планировщика](https://docs.dhtmlx.com/scheduler/samples/05_calendar/01_select.html) +- [Мини-календарь с повторяющимися событиями](https://docs.dhtmlx.com/scheduler/samples/05_calendar/06_recurring_form.html) ### Details :::note - Для работы метода требуется активированный плагин [minical](guides/extensions-list.md#minicalendardatepicker). + Метод требует, чтобы плагин [minical](guides/extensions-list.md#mini-calendar-date-picker) был активирован. ::: ### Related API - [renderCalendar](api/method/rendercalendar.md) ### Related Guides -- [Мини-календарь (Date Picker)](guides/minicalendar.md) +- [Мини-календарь (Date Picker)](guides/minicalendar.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/destructor.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/destructor.md index 87183c1b..c5c2fac2 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/destructor.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/destructor.md @@ -8,14 +8,14 @@ description: "удаляет экземпляр планировщика" ### Description -@short: Удаляет экземпляр планировщика +@short: Уничтожает экземпляр планировщика @signature: destructor: () =\> void ### Example ~~~jsx -var myScheduler = Scheduler.getSchedulerInstance(); +const myScheduler = Scheduler.getSchedulerInstance(); //удаление экземпляра планировщика myScheduler.destructor(); @@ -42,7 +42,7 @@ myScheduler.destructor(); - [onDestroy](api/event/ondestroy.md) ### Related Guides -- [Создание нескольких планировщиков на странице](guides/multiple-per-page.md#destructorofscheduleranddataprocessorinstances) +- [Создание нескольких планировщиков на странице](guides/multiple-per-page.md#destructor-of-scheduler-and-dataprocessor-instances) ### Change log - добавлено в версии 6.0 diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/detachevent.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/detachevent.md index aa32d7ea..4c279a05 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/detachevent.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/detachevent.md @@ -1,25 +1,25 @@ --- -sidebar_label: "detachEvent" -title: "detachEvent method" -description: "удаляет ранее добавленный обработчик события (тот, который был добавлен с помощью метода attachEvent)" +sidebar_label: detachEvent +title: "Метод detachEvent" +description: "отсоединяет обработчик от события (которое ранее было привязано методом attachEvent)" --- # detachEvent ### Description -@short: Удаляет ранее добавленный обработчик события (тот, который был добавлен с помощью метода attachEvent) +@short: Отсоединяет обработчик от события (которое ранее было привязано методом attachEvent) @signature: detachEvent: (id: string) =\> void ### Parameters -- `id` - (required) *string* - идентификатор обработчика события +- `id` - (обязательный) *string* - идентификатор события ### Example ~~~jsx -var myEvent = scheduler.attachEvent("onClick", function (id){ +const myEvent = scheduler.attachEvent("onClick", function (id){ ...//код обработчика события }); ... @@ -28,7 +28,7 @@ scheduler.detachEvent(myEvent); ### Details -Любые слушатели событий, добавленные через [event](api/method/event.md), будут автоматически удалены при вызове [destructor](api/method/destructor.md). +Все обработчики событий, привязанные с использованием [event](api/method/event.md) будут автоматически отсоединены при вызове [destructor](api/method/destructor.md). ### Related API -- [attachEvent](api/method/attachevent.md) +- [attachEvent](api/method/attachevent.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/edit.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/edit.md index e8637ba4..f54680a1 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/edit.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/edit.md @@ -1,27 +1,27 @@ --- -sidebar_label: "edit" -title: "edit method" -description: "открывает inline редактор для изменения текста события непосредственно в его блоке" +sidebar_label: edit +title: "Редактирование метода" +description: "Открывает встроенный inline editor для изменения текста события (редактор в окне события)" --- # edit ### Description -@short: Открывает inline редактор для изменения текста события непосредственно в его блоке +@short: Открывает inline editor для изменения текста события (редактор в окне события) @signature: edit: (id: string) =\> void ### Parameters -- `id` - (required) *string* - уникальный идентификатор события +- `id` - (обязательный) *string* - идентификатор события ### Example ~~~jsx -var eventId = scheduler.addEvent({ - start_date: "16-05-2013 09:00", - end_date: "16-05-2013 12:00", +const eventId = scheduler.addEvent({ + start_date: "16-05-2027 09:00", + end_date: "16-05-2027 12:00", text: "Meeting" }); ... @@ -33,4 +33,4 @@ scheduler.edit(eventId); ![edit_method](/img/edit_method.png) ### Related API -- [editStop](api/method/editstop.md) +- [editStop](api/method/editstop.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/editstop.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/editstop.md index 9440a028..80562aab 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/editstop.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/editstop.md @@ -1,27 +1,27 @@ --- -sidebar_label: "editStop" -title: "editStop method" -description: "завершает работу встроенного редактора событий, когда он открыт" +sidebar_label: editStop +title: "Метод editStop" +description: "Закрывает встроенный редактор события, если он в данный момент открыт" --- # editStop ### Description -@short: Завершает работу встроенного редактора событий, когда он открыт +@short: Закрывает встроенный редактор события, если он в данный момент открыт @signature: editStop: (id: string) =\> void ### Parameters -- `id` - (required) *string* - идентификатор события +- `id` - (обязательный) *string* - идентификатор события ### Example ~~~jsx -var eventId = scheduler.addEvent({ - start_date: "16-05-2013 09:00", - end_date: "16-05-2013 12:00", +const eventId = scheduler.addEvent({ + start_date: "16-05-2027 09:00", + end_date: "16-05-2027 12:00", text: "Meeting" }); ... @@ -33,4 +33,4 @@ scheduler.editStop(eventId); ![edit_stop_method](/img/edit_stop_method.png) ### Related API -- [edit](api/method/edit.md) +- [edit](api/method/edit.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/endlightbox.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/endlightbox.md index fe6b11e3..49d76b16 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/endlightbox.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/endlightbox.md @@ -1,21 +1,21 @@ --- -sidebar_label: "endLightbox" -title: "endLightbox method" -description: "используется для закрытия lightbox" +sidebar_label: endLightbox +title: "endLightbox метод" +description: "закрывает lightbox" --- # endLightbox ### Description -@short: Используется для закрытия lightbox +@short: Закрывает lightbox @signature: endLightbox: (mode: boolean, box?: HTMLElement) =\> void ### Parameters -- `mode` - (required) *boolean* - если установлено в true, все изменения, внесённые внутри lightbox, будут сохранены перед его закрытием.
Если установлено в false, изменения будут отменены. -- `box` - (optional) *HTMLElement* - HTML-элемент, который содержит lightbox +- `mode` - (required) *boolean* - если установлен в true, изменения, сделанные в lightbox, будут сохранены перед закрытием.
Если - false, изменения будут отменены. +- `box` - (optional) *HTMLElement* - HTML-контейнер для lightbox ### Example @@ -26,12 +26,12 @@ scheduler.endLightbox(true, document.getElementById("my_form")); ~~~ ### Related samples -- [Fully custom lightbox](https://docs.dhtmlx.com/scheduler/samples/02_customization/16_custom_form.html) +- [Полностью настраиваемый lightbox](https://docs.dhtmlx.com/scheduler/samples/02_customization/16_custom_form.html) ### Details :::note -Этот метод обычно вызывается при работе с кастомным lightbox +Метод используется при создании настраиваемого lightbox -::: +::: \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/event.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/event.md index a8e4be70..55a0b7b0 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/event.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/event.md @@ -1,26 +1,26 @@ --- -sidebar_label: "event" +sidebar_label: event title: "event method" -description: "устанавливает обработчик event на HTML элемент" +description: "прикрепляет обработчик события к элементу HTML" --- # event ### Description -@short: Устанавливает обработчик event на HTML элемент +@short: Прикрепляет обработчик события к элементу HTML @signature: event: (node: HTMLElement|string, event: string, handler: SchedulerCallback, master?: any) =\> string ### Parameters -- `node` - (required) *HTMLElement | string* - HTML элемент или его id -- `event` - (required) *string* - название HTML event (без префикса 'on') -- `handler` - (required) *function* - функция, которая обрабатывает event -- `master` - (optional) *object* - объект, на который ссылается this внутри handler +- `node` - (required) *HTMLElement|string* - узел HTML или его идентификатор +- `event` - (required) *string* - имя HTML-события (без префикса 'on') +- `handler` - (required) *function* - обработчик события +- `master` - (optional) *object* - объект, к которому относится ключевое слово this ### Returns -- ` id` - (string) - id обработчика event (можно использовать с методом eventRemove()) +- `id` - (string) - идентификатор обработчика события (можно использовать в методе eventRemove()) ### Example @@ -40,4 +40,4 @@ scheduler.event("divId", "click", function(e){ - [eventRemove](api/method/eventremove.md) ### Change log -- добавлено в версии 4.4 +- добавлено в версии 4.4 \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/eventremove.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/eventremove.md index c14786be..fd2fbf2f 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/eventremove.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/eventremove.md @@ -1,25 +1,25 @@ --- -sidebar_label: "eventRemove" +sidebar_label: eventRemove title: "eventRemove method" -description: "удаляет обработчик события с HTML-элемента" +description: "удаляет обработчик события из HTML-элемента" --- # eventRemove ### Description -@short: Удаляет обработчик события с HTML-элемента +@short: Удаляет обработчик события из HTML-элемента @signature: eventRemove: (id: string) =\> void ### Parameters -- `id` - (required) *string* - идентификатор обработчика события +- `id` - (обязательно) *string* - идентификатор обработчика события ### Example ~~~jsx -var eventId = scheduler.event("divId", "click", function(e){ +const eventId = scheduler.event("divId", "click", function(e){ do_something(); }); @@ -28,10 +28,10 @@ scheduler.eventRemove(eventId); ### Details -Все слушатели событий, добавленные с помощью [event](api/method/event.md), автоматически удаляются при вызове [destructor](api/method/destructor.md). +Все обработчики событий, прикрепленные с использованием [event](api/method/event.md), будут автоматически отсоединены, когда будет вызван [destructor](api/method/destructor.md). ### Related API - [event](api/method/event.md) ### Change log -- added in version 4.4 +- добавлено в версии 4.4 \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/expand.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/expand.md index baa10734..d4aad750 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/expand.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/expand.md @@ -1,14 +1,14 @@ --- -sidebar_label: "expand" -title: "expand method" -description: "открывает scheduler на весь экран для лучшей видимости" +sidebar_label: expand +title: "метод expand" +description: "разворачивает планировщик во весь экран" --- # expand ### Description -@short: Открывает scheduler на весь экран для лучшей видимости +@short: Разворачивает планировщик во весь экран @signature: expand: () =\> void @@ -21,10 +21,10 @@ scheduler.expand(); ### Details :::note - Метод требует включения плагина [expand](guides/extensions-list.md#expand). -::: + Метод требует включённого плагина [expand](guides/extensions-list.md#expand). +::: ![collapse_method](/img/collapse_method.png) ### Related API -- [collapse](api/method/collapse.md) +- [collapse](api/method/collapse.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/exporttopdf.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/exporttopdf.md index bfcdb0c3..c83e103b 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/exporttopdf.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/exporttopdf.md @@ -1,20 +1,20 @@ ---- -sidebar_label: "exportToPDF" -title: "exportToPDF method" -description: "экспортирует Scheduler в формат PDF" +--- +sidebar_label: exportToPDF +title: "exportToPDF метод" +description: "Экспортирует Scheduler в формате PDF" --- # exportToPDF ### Description -@short: Экспортирует Scheduler в формат PDF +@short: Экспортирует Scheduler в формате PDF @signature: exportToPDF: (_export_?: any) =\> void ### Parameters -- `export` - (optional) *object* - объект с настройками экспорта (см. детали) +- `export` - (optional) *object* - объект настроек экспорта (см. детали) ### Example @@ -31,8 +31,8 @@ scheduler.exportToPDF({ format:"A4", orientation:"portrait", zoom:1, - header:"

Моя компания

", - footer:"

Нижняя часть

", + header:"

My company

", + footer:"

Bottom line

", server:"https://myapp.com/myexport/scheduler" }); ~~~ @@ -44,49 +44,48 @@ scheduler.exportToPDF({ ~~~html ~~~ -Для дополнительной информации смотрите статью [Экспорт в PDF](export/pdf.md). - -::: +Подробнее в статье [Экспорт в PDF](export/pdf.md). -Метод **exportToPDF()** принимает объект с различными необязательными свойствами для настройки экспорта: +::: +Метод **exportToPDF()** принимает в качестве параметра объект с набором свойств (все свойства являются необязательными): - + - + - + - + - + - + - + - +
name(string) задает имя экспортируемого PDF-файла(string) имя выходного файла
format('A0', 'A1', 'A2', 'A3', 'A4', 'A5') определяет размер формата экспортируемого PDF('A0', 'A1', 'A2', 'A3', 'A4', 'A5') формат выходного PDF
orientation('portrait', 'landscape') устанавливает ориентацию страницы PDF('portrait', 'landscape') задает ориентацию выходного PDF
zoom(number) контролирует уровень масштабирования содержимого экспортируемого PDF(number) задает коэффициент масштабирования выходного PDF
header(string) HTML-содержимое, добавляемое в шапку PDF(string) задает заголовок, который будет добавлен к выходному PDF. Обратите внимание, здесь можно использовать любой HTML
footer(string) HTML-содержимое, добавляемое в нижний колонтитул PDF(string) задает нижний колонтитул, который будет добавлен к выходному PDF. Обратите внимание, здесь можно использовать любой HTML
server(string) URL API-эндпоинта, обрабатывающего запрос экспорта. Может указывать на локальный сервис экспорта. По умолчанию https://export.dhtmlx.com/scheduler(string) задает API endpoint для запроса. Может использоваться с локальной установкой сервиса экспорта. Значение по умолчанию https://export.dhtmlx.com/scheduler
additional_settings(object) объект с дополнительными параметрами конфигурации, включая:
  • format - (string) задает формат выходного файла, например 'A3', 'A4', 'A5', 'Legal', 'Letter', 'Tabloid'
  • landscape - (boolean) управляет ориентацией вывода: портрет или ландшафт; действует только если задан параметр "format".
  • width - (string|number|"content") задает ширину выходной страницы, полезно для многостраничного экспорта.
  • height - (string|number|"content") задает высоту выходной страницы, также используется для многостраничного экспорта.
(object) объект с дополнительными настройками. Объект может содержать следующие атрибуты:
  • format - (string) формат выходного файла: 'A3', 'A4', 'A5', 'Legal', 'Letter', 'Tabloid'
  • landscape - (boolean) ориентация файла: портретная или альбомная. Этот атрибут применяется только когда указан атрибут "format".
  • width - (string|number|"content") ширина выходной страницы. Атрибут используется при экспорте нескольких страниц.
  • height - (string|number|"content") высота выходной страницы. Атрибут используется при экспорте нескольких страниц.
### Related Guides -- [Экспорт в PDF](export/pdf.md) +- [Экспорт в PDF](export/pdf.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/exporttopng.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/exporttopng.md index 3e7c4c67..45d73bf7 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/exporttopng.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/exporttopng.md @@ -1,20 +1,20 @@ --- -sidebar_label: "exportToPNG" -title: "exportToPNG method" -description: "позволяет экспортировать Scheduler в виде PNG-изображения" +sidebar_label: exportToPNG +title: "метод exportToPNG" +description: "экспортирует Scheduler в PNG-формат" --- # exportToPNG ### Description -@short: Позволяет экспортировать Scheduler в виде PNG-изображения +@short: Экспортирует Scheduler в PNG-формат @signature: exportToPNG: (_export_?: any) =\> void ### Parameters -- `export` - (optional) *object* - объект, содержащий параметры экспорта (подробности ниже) +- `export` - (optional) *объект* - объект с настройками экспорта (см. детали) ### Example @@ -47,40 +47,40 @@ scheduler.exportToPNG({ ::: -Метод **exportToPNG()** принимает объект с различными необязательными свойствами: +The **exportToPNG()** method takes as a parameter an object with a number of properties (all the properties are optional): - + - + - + - + - + - + - +
name(string) имя файла для экспортируемого PNG(string) имя выходного файла
format('A0', 'A1', 'A2', 'A3', 'A4', 'A5') размер страницы для PNG-выхода('A0', 'A1', 'A2', 'A3', 'A4', 'A5') формат выходного PNG-изображения
orientation('portrait', 'landscape') ориентация макета PNG-изображения('portrait', 'landscape') задаёт ориентацию выходного PNG-изображения
zoom(number) уровень масштабирования для экспортируемого PNG(number) задаёт коэффициент масштабирования выходного PNG-изображения
header(string) HTML-содержимое, которое будет добавлено в верхнюю часть PNG-изображения(string) задаёт заголовок, который будет добавлен к выходному PNG-изображению. Обратите внимание: здесь можно использовать любой HTML
footer(string) HTML-содержимое, которое будет добавлено в нижнюю часть PNG-изображения(string) задаёт подвал, который будет добавлен к выходному PNG-изображению. Обратите внимание: здесь можно использовать любой HTML
server(string) API endpoint, используемый для запроса экспорта. Может указывать на локально установленный сервис экспорта. По умолчанию https://export.dhtmlx.com/scheduler(string) задаёт API endpoint для запроса. Может использоваться с локальной установкой сервиса экспорта. Значение по умолчанию: https://export.dhtmlx.com/scheduler
### Related Guides -- [Экспорт в PNG](export/png.md) +- [Экспорт в PNG](export/png.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/focus.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/focus.md index a48650fa..9dc254bb 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/focus.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/focus.md @@ -1,14 +1,14 @@ --- -sidebar_label: "focus" -title: "focus method" -description: "активирует focus на scheduler" +sidebar_label: focus +title: "Метод focus" +description: "Устанавливает фокус на scheduler" --- # focus ### Description -@short: Активирует focus на scheduler +@short: Устанавливает фокус на scheduler @signature: focus: () =\> void @@ -19,7 +19,7 @@ scheduler.focus(); ~~~ ### Related samples -- [Keyboard Navigation and WAI-ARIA - Flat Skin](https://docs.dhtmlx.com/scheduler/samples/13_accessibility/01_regular_skin_all_views.html) +- [Клавиатурная навигация и WAI-ARIA - Flat Skin](https://docs.dhtmlx.com/scheduler/samples/13_accessibility/01_regular_skin_all_views.html) ### Details @@ -35,7 +35,7 @@ scheduler.focus(); - [key_nav_step](api/config/key_nav_step.md) ### Related Guides -- [Навигация с помощью клавиатуры](guides/keyboard-navigation.md) +- [Навигация клавиатурой](guides/keyboard-navigation.md) ### Change log -- добавлено в версии 4.4 +- добавлено в версии 4.4 \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/formsection.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/formsection.md index bb5bcaee..0db75921 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/formsection.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/formsection.md @@ -1,20 +1,20 @@ --- -sidebar_label: "formSection" +sidebar_label: formSection title: "formSection method" -description: "предоставляет доступ к объектам секций лайтбокса" +description: "предоставляет доступ к объектам разделов lightbox" --- # formSection ### Description -@short: Предоставляет доступ к объектам секций лайтбокса +@short: Предоставляет доступ к объектам секций lightbox @signature: formSection: (name: string) =\> any ### Parameters -- `name` - (required) *string* - имя секции лайтбокса +- `name` - (required) *string* - имя секции lightbox ### Returns - ` config` - (object) - объект секции (см. члены объекта ниже) @@ -22,36 +22,36 @@ description: "предоставляет доступ к объектам сек ### Example ~~~jsx -var time = scheduler.formSection('time'); -var descr = scheduler.formSection('description'); +const time = scheduler.formSection('time'); +const descr = scheduler.formSection('description'); -//получение значения -var value = time.getValue(); -var value1 = descr.getValue(); +// получение значения +const value = time.getValue(); +const value1 = descr.getValue(); -//установка значения +// установка значения descr.setValue('abc'); //для секций с одним контролом -time.setValue(null,{start_date:new Date(2009,03,10),end_date:new Date(2012,03,10)}); -//для секций с несколькими контролами: первый параметр — 'null', второй — объект с данными +time.setValue(null,{start_date:new Date(2026,03,10),end_date:new Date(2027,03,10)}); +//for multi-control sections:the 1st parameter is 'null', 2nd - a data object ~~~ ### Related samples -- [Linking select controls in the lightbox](https://docs.dhtmlx.com/scheduler/samples/02_customization/26_linked_selects_in_lightbox.html) +- [Связывание элементов управления с выпадающими списками в lightbox](https://docs.dhtmlx.com/scheduler/samples/02_customization/26_linked_selects_in_lightbox.html) ### Details Объект секции включает следующие члены: -## Свойства +## Properties -- **section** - (*object*) объект конфигурации секции - - **id** - (*string*) id секции - - **name** - (*string*) имя секции. Scheduler использует это имя для получения label из коллекции **locale.labels**. Например, для секции 'time' - label берётся из **scheduler.locale.labels.section_time** - - **height** - (*number*) высота секции - - **map_to** - (*string*) имя свойства, связанного с редактором -- **control** - (*HTML collection*) коллекция контролов, используемых внутри секции -## Методы +- **section** - (*object*) конфигурационный объект раздела + - **id** - (*string*) идентификатор раздела + - **name** - (*string*) имя раздела. В соответствии с именем планировщик берет метку для раздела из коллекции **locale.labels**. Например, для раздела 'time' метка будет взята как **scheduler.locale.labels.section_time** + - **height** - (*number*) высота раздела + - **map_to** - (*string*) имя свойства, сопоставленного с редактором +- **control** - (*HTML collection*) HTML-collection — коллекция элементов управления, используемых в разделе -- **getValue()** - возвращает объект с данными секции -- **setValue()** - присваивает значение(я) секции. Метод принимает значение (или объект с несколькими значениями, если в секции несколько контролов) для установки +## Methods + +- **getValue()** - возвращает объект с данными раздела +- **setValue()** - устанавливает значения для раздела. В качестве параметра метод принимает значение (или объект значений, если у раздела несколько элементов управления), которое должно быть установлено \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/getactiondata.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/getactiondata.md index fd9fae9b..779f74e1 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/getactiondata.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/getactiondata.md @@ -1,5 +1,5 @@ --- -sidebar_label: "getActionData" +sidebar_label: getActionData title: "getActionData method" description: "возвращает дату и секцию, находящиеся в данный момент под курсором, если таковые имеются" --- @@ -8,35 +8,35 @@ description: "возвращает дату и секцию, находящие ### Description -@short: Возвращает дату и секцию, находящиеся в данный момент под курсором, если таковые имеются +@short: Возвращает дату, на которую указывает курсор, и секцию (если она определена) @signature: getActionData: (e: Event) =\> any ### Parameters -- `e` - (required) *Event* - объект нативного события +- `e` - (required) *Event* - нативный объект события ### Returns -- ` point` - (object) - объект, содержащий два свойства:
  • date - (Date) дата в позиции курсора
  • section - (string, number) идентификатор секции под курсором (актуально для Timeline и Units view)
+- ` point` - (object) - объект с двумя свойствами:
  • date - (Date) объект даты, на которую указывает курсор
  • section - (string, number) идентификатор секции, на которую указывает курсор (для Timeline и Units view)
### Example ~~~jsx scheduler.attachEvent("onMouseMove", function(id, e){ var action_data = scheduler.getActionData(e); - // -> {date:Tue Jun 30 2009 09:10:00, section:2} + // -> {date:Tue Jun 30 2027 09:10:00, section:2} ... }) ~~~ ### Related samples -- [Tracking the cursor position](https://docs.dhtmlx.com/scheduler/samples/09_api/01_action_data.html) -- [Tooltips](https://docs.dhtmlx.com/scheduler/samples/06_timeline/12_section_tooltip.html) +- [Отслеживание позиции курсора](https://docs.dhtmlx.com/scheduler/samples/09_api/01_action_data.html) +- [Подсказки](https://docs.dhtmlx.com/scheduler/samples/06_timeline/12_section_tooltip.html) ### Details :::note -Доступно начиная с версии 3.5 - -::: +Доступно с версии 3.5 + +::: \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/getevent.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/getevent.md index 6060e830..f2d62c28 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/getevent.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/getevent.md @@ -1,20 +1,20 @@ --- -sidebar_label: "getEvent" +sidebar_label: getEvent title: "getEvent method" -description: "предоставляет объект события, соответствующий заданному id" +description: "возвращает объект события по его ID" --- # getEvent ### Description -@short: Предоставляет объект события, соответствующий заданному id +@short: Возвращает объект события по его ID @signature: getEvent: (event_id: string | number) =\> any ### Parameters -- `event_id` - (required) *string | number* - id события +- `event_id` - (обязателен) *string | number* - идентификатор события ### Returns - ` obj` - (object) - объект события @@ -22,14 +22,14 @@ description: "предоставляет объект события, соотв ### Example ~~~jsx -var eventId = scheduler.addEvent({ - start_date: "16-05-2013 09:00", - end_date: "16-05-2013 12:00", +const eventId = scheduler.addEvent({ + start_date: "16-05-2027 09:00", + end_date: "16-05-2027 12:00", text: "Meeting" }); ... -var eventObj = scheduler.getEvent(eventId); +const eventObj = scheduler.getEvent(eventId); ~~~ ### Related samples -- [Fully custom lightbox](https://docs.dhtmlx.com/scheduler/samples/02_customization/16_custom_form.html) +- [Полностью настраиваемый lightbox](https://docs.dhtmlx.com/scheduler/samples/02_customization/16_custom_form.html) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/geteventenddate.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/geteventenddate.md index e5666219..4724b34b 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/geteventenddate.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/geteventenddate.md @@ -1,13 +1,13 @@ --- -sidebar_label: "getEventEndDate" -title: "getEventEndDate method" +sidebar_label: getEventEndDate +title: "getEventEndDate метод" description: "получает дату окончания события" --- # getEventEndDate -:::warning -Эта функицональность устарела -::: +:::warning +Метод устарел. +::: ### Description @short: Получает дату окончания события @@ -16,7 +16,7 @@ description: "получает дату окончания события" ### Parameters -- `id` - (required) *string* - ID события +- `id` - (required) *string* - идентификатор события ### Returns - ` end_date` - (Date) - дата окончания события @@ -25,14 +25,14 @@ description: "получает дату окончания события" ~~~jsx var eventId = scheduler.addEvent({ - start_date: "16-05-2013 09:00", - end_date: "16-05-2013 12:00", + start_date: "16-05-2027 09:00", + end_date: "16-05-2027 12:00", text: "Meeting" }); ... -scheduler.getEvent(eventId).end_date; // -> Thu May 16 2013 12:00:00 +scheduler.getEvent(eventId).end_date; // -> Thu May 16 2027 12:00:00 ~~~ ### Related API - [getEventStartDate](api/method/geteventstartdate.md) -- [getEventText](api/method/geteventtext.md) +- [getEventText](api/method/geteventtext.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/getevents.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/getevents.md index cfa70091..d532cb2c 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/getevents.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/getevents.md @@ -1,14 +1,14 @@ --- -sidebar_label: "getEvents" -title: "getEvents method" -description: "возвращает коллекцию событий, которые происходят в указанном временном интервале" +sidebar_label: getEvents +title: "Метод getEvents" +description: "возвращает коллекцию событий, происходящих в указанном периоде" --- # getEvents ### Description -@short: Возвращает коллекцию событий, которые происходят в указанном временном интервале +@short: Возвращает коллекцию событий, происходящих в указанном периоде @signature: getEvents: (from?: Date, to?: Date) =\> any[] @@ -18,41 +18,41 @@ description: "возвращает коллекцию событий, котор - `to` - (optional) *Date* - конечная дата периода ### Returns -- ` array` - (array) - массив объектов событий +- ` array` - (массив) - массив объектов событий ### Example ~~~jsx -const evs = scheduler.getEvents(new Date(2024,1,10),new Date(2024,2,10)); +const evs = scheduler.getEvents(new Date(2027,1,10),new Date(2027,2,10)); evs.forEach((e) => console.log(e.text)); // или const evs = scheduler.getEvents();// возвращает все события ~~~ ### Related samples -- [Recurring events](https://docs.dhtmlx.com/scheduler/samples/03_extensions/01_recurring_events.html) -- [Highlighted timespans in Month view](https://docs.dhtmlx.com/scheduler/samples/09_api/07_highlighted_timespans_month_view.html) +- [Повторяющиеся события](https://docs.dhtmlx.com/scheduler/samples/03_extensions/01_recurring_events.html) +- [Выделенные диапазоны времени в месячном виде](https://docs.dhtmlx.com/scheduler/samples/09_api/07_highlighted_timespans_month_view.html) ### Details -Когда включена поддержка [recurring events](guides/recurring-events.md), поведение метода **getEvents** зависит от того, указаны ли параметры "from-to". +Если включена поддержка [повторяющихся событий](guides/recurring-events.md), поведение метода **getEvents** зависит от того, заданы ли параметры "from-to". -#### Использование getEvents с recurring events +#### Using getEvents with Recurring Events -- Если указаны параметры **from-to**, метод возвращает все одиночные события, вхождения из повторяющихся серий и любые изменённые экземпляры в этом диапазоне: +- Если заданы параметры **from-to**, метод вернёт все одиночные события, вхождения повторяющихся серий и их изменённые экземпляры в заданном диапазоне: ~~~js const today = scheduler.date.day_start(new Date()); const nextWeek = scheduler.date.add(today, 1, "week"); const events = scheduler.getEvents(today, nextWeek); ~~~ -- Если параметры **from-to** опущены, метод возвращает все одиночные события, повторяющиеся серии как записи (а не отдельные вхождения), а также любые изменённые или удалённые экземпляры. Однако конкретные даты повторяющихся вхождений не включаются. +- Если параметры **from-to** не заданы, метод вернёт все одиночные события, повторяющиеся серии (в виде записей, а не отдельных вхождений) и их изменённые/удалённые экземпляры. Однако отдельные даты вхождений для повторяющихся событий не будут включены. :::note - В версиях до v7.1.2 метод **getEvents** требовал параметры "from-to" при активных повторяющихся событиях. Без них он возвращал пустой массив, так как расширение для recurring events могло генерировать бесконечные последовательности событий, что делало невозможным возврат всех вхождений. + В версиях ранее чем v7.1.2 метод **getEvents** требовал параметров "from-to" при включённых повторяющихся событиях. Без этих параметров метод возвращал пустой массив, поскольку расширение для повторяющихся событий позволяло бесконечные последовательности событий, что делало невозможным возвращать бесконечный массив. ::: -Если повторяющиеся события отключены, метод ведёт себя одинаково независимо от наличия параметров. Если параметры не заданы, он просто возвращает все события. +Если повторяющиеся события отключены, метод будет работать корректно как с параметрами, так и без них. Но если вы не укажете ни одного параметра, метод вернёт все события. ### Change log -- обновлено в v7.1.2 +- обновлено в v7.1.2 \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/geteventstartdate.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/geteventstartdate.md index 3d37e686..eec2d880 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/geteventstartdate.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/geteventstartdate.md @@ -1,13 +1,13 @@ --- -sidebar_label: "getEventStartDate" -title: "getEventStartDate method" +sidebar_label: getEventStartDate +title: "getEventStartDate метод" description: "получает дату начала события" --- # getEventStartDate -:::warning -Эта функицональность устарела -::: +:::warning +Метод устарел. +::: ### Description @short: Получает дату начала события @@ -16,23 +16,23 @@ description: "получает дату начала события" ### Parameters -- `id` - (required) *string* - уникальный идентификатор события +- `id` - (required) *string* - идентификатор события ### Returns -- ` start_date` - (Date) - дата и время начала события +- `start_date` - (Date) - дата начала события ### Example ~~~jsx var eventId = scheduler.addEvent({ - start_date: "16-05-2013 09:00", - end_date: "16-05-2013 12:00", + start_date: "16-05-2027 09:00", + end_date: "16-05-2027 12:00", text: "Meeting" }); ... -scheduler.getEvent(eventId).start_date; // -> Thu May 16 2013 09:00:00 +scheduler.getEvent(eventId).start_date; // -> Thu May 16 2027 09:00:00 ~~~ ### Related API - [getEventEndDate](api/method/geteventenddate.md) -- [getEventText](api/method/geteventtext.md) +- [getEventText](api/method/geteventtext.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/geteventtext.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/geteventtext.md index 53000120..ebfbbb95 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/geteventtext.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/geteventtext.md @@ -1,22 +1,22 @@ --- -sidebar_label: "getEventText" -title: "getEventText method" -description: "получает текст, связанный с событием" +sidebar_label: getEventText +title: "метод getEventText" +description: "получает текст события" --- # getEventText -:::warning -Эта функицональность устарела -::: +:::warning +Метод устарел. +::: ### Description -@short: Получает текст, связанный с событием +@short: Получает текст события @signature: getEventText: (id: string) =\> string ### Parameters -- `id` - (required) *string* - идентификатор события +- `id` - (обязательный) *string* - идентификатор события ### Returns - ` start_date` - (string) - текст события @@ -24,9 +24,9 @@ description: "получает текст, связанный с событие ### Example ~~~jsx -var eventId = scheduler.addEvent({ - start_date: "16-05-2013 09:00", - end_date: "16-05-2013 12:00", +const eventId = scheduler.addEvent({ + start_date: "16-05-2027 09:00", + end_date: "16-05-2027 12:00", text: "Meeting" }); ... @@ -35,4 +35,4 @@ scheduler.getEvent(eventId).text; // -> "Meeting" ### Related API - [getEventEndDate](api/method/geteventenddate.md) -- [getEventStartDate](api/method/geteventstartdate.md) +- [getEventStartDate](api/method/geteventstartdate.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/getlabel.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/getlabel.md index f9263abe..23be16b7 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/getlabel.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/getlabel.md @@ -1,24 +1,24 @@ --- -sidebar_label: "getLabel" +sidebar_label: getLabel title: "getLabel method" -description: "получает label (метку) элемента управления select в lightbox" +description: "возвращает метку элемента управления select в лайтбоксе" --- # getLabel ### Description -@short: Получает label (метку) элемента управления select в lightbox +@short: Получает метку элемента select в лайтбоксе @signature: getLabel: (property: string, key: string|number) =\> string ### Parameters -- `property` - (required) *string* - имя свойства данных, связанного с элементом управления -- `key` - (required) *string | number* - id опции. Это значение сопоставляется со свойством данных события
для идентификации опции select, связанной с событием +- `property` - (required) *string* - имя свойства данных, к которому привязан контрол +- `key` - (required) *string | number* - идентификатор опции. Этот параметр сопоставляется со свойством данных события
для привязки опции селекта к событию ### Returns -- ` label` - (string) - метка, соответствующая опции элемента управления select в lightbox +- ` label` - (string) - метка элемента управления select в лайтбоксе ### Example @@ -30,7 +30,7 @@ scheduler.config.lightbox.sections=[ // другие опции ]; -var holder2 = scheduler.getLabel("unit_id", 2);// ->"John Williams" +const holder2 = scheduler.getLabel("unit_id", 2);// ->"John Williams" ~~~ ### Related samples @@ -40,26 +40,26 @@ var holder2 = scheduler.getLabel("unit_id", 2);// ->"John Williams" :::note -Этот метод работает исключительно с элементами управления select в lightbox для получения метки определённой опции. +Метод применяется только к элементам select в лайтбоксе, чтобы получить метку конкретной опции. :::
-Например, этот метод можно использовать для кастомизации отображения текста события: +Например, вы можете использовать метод, чтобы изменить шаблон отображения текста события: ~~~js scheduler.templates.event_text = function(start, end, event){ return event.text + " ("+scheduler.getLabel("unit_id",event.unit_id) +")"; }; -scheduler.init('scheduler_here',new Date(2013,5,30),"unit"); +scheduler.init('scheduler_here',new Date(2027,5,30),"unit"); scheduler.parse([ - {start_date:"06/30/2013 09:00",end_date:"06/30/2013 12:00",text:"TaskA",unit_id:1}, - {start_date:"06/30/2013 12:00",end_date:"06/30/2013 20:00",text:"TaskB",unit_id:2}, - {start_date:"06/30/2013 08:00",end_date:"06/30/2013 12:00",text:"TaskC",unit_id:2} + {start_date:"06/30/2027 09:00",end_date:"06/30/2027 12:00",text:"TaskA",unit_id:1}, + {start_date:"06/30/2027 12:00",end_date:"06/30/2027 20:00",text:"TaskB",unit_id:2}, + {start_date:"06/30/2027 08:00",end_date:"06/30/2027 12:00",text:"TaskC",unit_id:2} ],"json"); ~~~ -![getlabel_method_copy](/img/getlabel_method_copy.png) +![getlabel_method_copy](/img/getlabel_method_copy.png) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/getlightbox.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/getlightbox.md index e68d192b..e273f626 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/getlightbox.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/getlightbox.md @@ -1,19 +1,19 @@ --- -sidebar_label: "getLightbox" -title: "getLightbox method" -description: "получает HTML-элемент лайтбокса" +sidebar_label: getLightbox +title: "Метод getLightbox" +description: "получает HTML-элемент объекта lightbox" --- # getLightbox ### Description -@short: Получает HTML-элемент лайтбокса +@short: Получает HTML-элемент объекта lightbox @signature: getLightbox: () =\> HTMLElement ### Returns -- `box` - (HTMLElement) - HTML-элемент, представляющий лайтбокс +- `box` - (HTMLElement) - HTML-элемент lightbox ### Example @@ -22,4 +22,4 @@ scheduler.getLightbox(); //->
​...
~~~ ### Related samples -- [Mini calendar with the recurring events](https://docs.dhtmlx.com/scheduler/samples/05_calendar/06_recurring_form.html) +- [Мини-календарь с повторяющимися событиями](https://docs.dhtmlx.com/scheduler/samples/05_calendar/06_recurring_form.html) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/getrecdates.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/getrecdates.md index 58169aa3..b256d6a5 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/getrecdates.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/getrecdates.md @@ -1,29 +1,29 @@ --- -sidebar_label: "getRecDates" -title: "getRecDates method" -description: "получает все повторяющиеся вхождения события" +sidebar_label: getRecDates +title: "getRecDates метод" +description: "возвращает все появления повторяющегося события" --- # getRecDates ### Description -@short: Получает все повторяющиеся вхождения события +@short: Возвращает все появления повторяющегося события @signature: getRecDates: (id: string, number: number) =\> any ### Parameters - `id` - (required) *string* - идентификатор повторяющегося события -- `number` - (required) *number* - максимальное количество вхождений для получения (по умолчанию 100) +- `number` - (required) *number* - максимальное количество возвращаемых вхождений (по умолчанию, 100) ### Returns -- ` event` - (object) - объект, содержащий 2 свойства:
  • start_date - (Date) дата и время начала каждого вхождения
  • end_date - (Date) дата и время окончания каждого вхождения
+- ` event` - (object) - объект с двумя свойствами:
  • start_date - (Date) дата начала одного появления
  • end_date - (Date) дата окончания одного появления
### Example ~~~jsx -var dates = scheduler.getRecDates(22); +const dates = scheduler.getRecDates(22); ~~~ ### Details @@ -32,23 +32,23 @@ var dates = scheduler.getRecDates(22); Это свойство требует включения расширения [recurring](guides/extensions-list.md#recurring). ::: -В качестве примера рассмотрим повторяющееся событие (id: 22), которое происходит каждые 2 дня с 14:00 до 15:00, начиная с 12 ноября 2010 года, всего 3 раза. Метод [getRecDates](api/method/getrecdates.md) для этого события вернёт следующий массив: + +Например, существует повторяющееся событие (id: 22), которое происходит каждые 2 дня с 14:00 до 15:00, начиная с 12 ноября 2027 года; всего 3 вхождения. Метод [getRecDates](api/method/getrecdates.md) для этого события вернет следующий массив: ~~~js [ { - start_date: Tue Oct 12 2010 14:00:00 GMT+0300 (E. Europe Daylight Time), - end_date: Tue Oct 12 2010 15:00:00 GMT+0300 (E. Europe Daylight Time) + start_date: Tue Oct 12 2027 14:00:00 GMT+0300 (E. Europe Daylight Time), + end_date: Tue Oct 12 2027 15:00:00 GMT+0300 (E. Europe Daylight Time) }, { - start_date: Tue Oct 14 2010 14:00:00 GMT+0300 (E. Europe Daylight Time), - end_date: Tue Oct 14 2010 15:00:00 GMT+0300 (E. Europe Daylight Time) + start_date: Thu Oct 14 2027 14:00:00 GMT+0300 (E. Europe Daylight Time), + end_date: Thu Oct 14 2027 15:00:00 GMT+0300 (E. Europe Daylight Time) }, { - start_date: Tue Oct 16 2010 14:00:00 GMT+0300 (E. Europe Daylight Time), - end_date: Tue Oct 16 2010 15:00:00 GMT+0300 (E. Europe Daylight Time) + start_date: Sat Oct 16 2027 14:00:00 GMT+0300 (E. Europe Daylight Time), + end_date: Sat Oct 16 2027 15:00:00 GMT+0300 (E. Europe Daylight Time) } ] - -~~~ +~~~ \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/getrenderedevent.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/getrenderedevent.md index 47548bd6..ac053ad2 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/getrenderedevent.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/getrenderedevent.md @@ -1,33 +1,33 @@ --- -sidebar_label: "getRenderedEvent" +sidebar_label: getRenderedEvent title: "getRenderedEvent method" -description: "возвращает HTML-элемент события, который в данный момент отображается" +description: "возвращает объект текущего отображаемого события" --- # getRenderedEvent ### Description -@short: Возвращает HTML-элемент события, который в данный момент отображается +@short: Возвращает объект текущего отображаемого события -@signature: getRenderedEvent: (id: string) =\> HTMLElement +@signature: getRenderedEvent: (id: string) => HTMLElement ### Parameters -- `id` - (required) *string* - id события +- `id` - (required) *string* - идентификатор события ### Returns -- `event` - (HTMLElement) - **HTML-элемент события** - если событие видно в scheduler.
**'null'** - если событие не отображается в scheduler в момент вызова метода. +- `event` - (HTMLElement) - **HTML-объект события** - если событие в данный момент отображается в планировщике.
**'null'** - если событие не отображается в планировщике на момент вызова метода. ### Example ~~~jsx -var eventId = scheduler.addEvent({ - start_date: "16-05-2013 09:00", - end_date: "16-05-2013 12:00", +const eventId = scheduler.addEvent({ + start_date: "16-05-2027 09:00", + end_date: "16-05-2027 12:00", text: "Meeting" }); -var eventObj = scheduler.getRenderedEvent(eventId); +const eventObj = scheduler.getRenderedEvent(eventId); //->
09:00 Meeting
~~~ @@ -37,4 +37,4 @@ var eventObj = scheduler.getRenderedEvent(eventId); Доступно начиная с версии 3.5 -::: +::: \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/getsection.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/getsection.md index a30f62d8..86dc9ff7 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/getsection.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/getsection.md @@ -1,25 +1,25 @@ --- -sidebar_label: "getSection" +sidebar_label: getSection title: "getSection method" -description: "получает объект для конкретного section внутри текущего активного view" +description: "возвращает объект указанного раздела в текущем активном представлении" --- # getSection :::info - Эта функция доступна только в PRO-версии. + Эта функциональность доступна только в версии PRO. ::: ### Description -@short: Получает объект для конкретного section внутри текущего активного view +@short: Возвращает объект указанного раздела в текущем активном представлении @signature: getSection: (section_id: string) =\> any ### Parameters -- `section_id` - (required) *string* - идентификатор section +- `section_id` - (required) *string* - идентификатор раздела ### Returns -- ` section` - (object) - объект section +- ` section` - (object) - объект секции ### Example @@ -39,21 +39,21 @@ scheduler.createTimelineView({ scheduler.getSection("sales");//->{key:"sales",label:"Sales and Marketing"} ~~~ -**Applicable views:** [Timeline view](views/timeline.md) +**Применимые представления:** [Timeline view](views/timeline.md) ### Details :::note - Метод работает только если включён плагин [treetimeline](guides/extensions-list.md#treetimeline). + Этот метод требует активированного плагина [treetimeline](guides/extensions-list.md#treetimeline). ::: :::note -Если текущий view не является Timeline в режиме 'Tree', этот метод не будет иметь эффекта. +Если открытое представление не является Timeline в режиме 'Tree', метод будет проигнорирован. ::: ### Related API - [openSection](api/method/opensection.md) - [closeAllSections](api/method/closeallsections.md) -- [openAllSections](api/method/openallsections.md) +- [openAllSections](api/method/openallsections.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/getshortcuthandler.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/getshortcuthandler.md index f234a971..25402208 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/getshortcuthandler.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/getshortcuthandler.md @@ -1,29 +1,29 @@ --- -sidebar_label: "getShortcutHandler" -title: "getShortcutHandler method" -description: "получает обработчик для сочетания клавиш навигации" +sidebar_label: getShortcutHandler +title: "getShortcutHandler метод" +description: "получает обработчик ярлыка навигации по клавиатуре" --- # getShortcutHandler ### Description -@short: Получает обработчик для сочетания клавиш навигации +@short: Получает обработчик сочетания клавиш для навигации по клавиатуре @signature: getShortcutHandler: (shortcut: string, scope?: string) =\> SchedulerCallback ### Parameters -- `shortcut` - (required) *string* - клавиша или комбинация клавиш, определяющая shortcut ([синтаксис shortcut](guides/keyboard-navigation.md#shortcutsyntax)) -- `scope` - (optional) *string* - (необязательно) имя контекстного элемента, к которому будет прикреплен обработчик ([список scope](guides/keyboard-navigation.md#scopes)) +- `shortcut` - (required) *string* - имя клавиши или название сочетания клавиш для ярлыка ([shortcut syntax](guides/keyboard-navigation.md#shortcut-syntax)) +- `scope` - (optional) *string* - имя элемента контекста, к которому будет привязана функция-обработчик ([список контекстов](guides/keyboard-navigation.md#scopes)) ### Returns -- ` shortcut_handler` - (function) - функция, которая обрабатывает действие shortcut +- ` shortcut_handler` - (function) - обработчик вызова ярлыка ### Example ~~~jsx -var shortcut_handler = scheduler.getShortcutHandler("ctrl+a", "event"); +const shortcut_handler = scheduler.getShortcutHandler("ctrl+a", "event"); ~~~ ### Related samples @@ -31,9 +31,9 @@ var shortcut_handler = scheduler.getShortcutHandler("ctrl+a", "event"); ### Details -Введено в версии 5.0 +Добавлено в версии 5.0 -Если параметр `scope` опущен, обработчик прикрепляется к scope по умолчанию - "scheduler". +Если параметр `scope` не указан, будет использоваться область «scheduler» по умолчанию. ### Related API - [addShortcut](api/method/addshortcut.md) @@ -43,4 +43,4 @@ var shortcut_handler = scheduler.getShortcutHandler("ctrl+a", "event"); - [focus](api/method/focus.md) ### Related Guides -- [Навигация с помощью клавиатуры](guides/keyboard-navigation.md) +- [Keyboard Navigation](guides/keyboard-navigation.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/getstate.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/getstate.md index 3e55907f..4e469954 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/getstate.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/getstate.md @@ -1,14 +1,14 @@ --- -sidebar_label: "getState" -title: "getState method" -description: "получает текущее состояние scheduler'а" +sidebar_label: getState +title: "getState метод" +description: "получает текущее состояние планировщика" --- # getState ### Description -@short: Получает текущее состояние scheduler'а +@short: Получает текущее состояние планировщика @signature: getState: () =\> any @@ -18,7 +18,7 @@ description: "получает текущее состояние scheduler'а" ### Example ~~~jsx -var mode = scheduler.getState().mode; +const mode = scheduler.getState().mode; if(mode == "day"){ // кастомная логика здесь } @@ -28,64 +28,64 @@ else { ~~~ ### Related samples -- [Fully custom lightbox](https://docs.dhtmlx.com/scheduler/samples/02_customization/16_custom_form.html) -- [Removing needless hours from the time scale](https://docs.dhtmlx.com/scheduler/samples/06_timeline/09_drag_duration.html) +- [Полностью настраиваемый lightbox](https://docs.dhtmlx.com/scheduler/samples/02_customization/16_custom_form.html) +- [Удаление лишних часов из временной шкалы](https://docs.dhtmlx.com/scheduler/samples/06_timeline/09_drag_duration.html) ### Details -Объект состояния представляет внутреннюю конфигурацию UI scheduler'а и включает следующие свойства: +Объект состояния отражает внутреннюю конфигурацию пользовательского интерфейса планировщика и имеет следующие свойства: - + - + - + - + - + - + - + - + - + - + - +
mode(string) текущий активный вид(string) текущее открытое представление
date(Date) выбранная дата(Date) активная дата
min_date(Date) дата начала, с которой показываются события в текущем виде(Date) дата начала отображения событий в текущем открытом представлении
max_date(Date) дата окончания, до которой показываются события в текущем виде(Date) дата окончания отображения событий в текущем открытом представлении
editor_id(string) ID события, которое в данный момент редактируется inline. Будет 'undefined' или 'null', если никакое событие не редактируется inline.(string) идентификатор события, которое в данный момент редактируется во встроенном редакторе. 'Undefined' или 'null', если никакие события не редактируются во встроенном редакторе.
lightbox_id(string) ID события, которое открыто в lightbox. Будет 'undefined' или 'null', если никакое событие не открыто в lightbox.(string) идентификатор события, которое в данный момент открыто в lightbox. 'Undefined' или 'null', если ни одно событие не открыто в lightbox.
new_event(Date) указывает, создаётся ли в данный момент новое событие. Содержит текущую дату, если создаётся новое событие, иначе 'undefined' или 'null'.(Date) флаг, указывающий на то, что в данный момент создаётся новое событие. Текущая дата, если новое событие создаётся в планировщике. 'Undefined' или 'null', если новые события не создаются в планировщике.
select_id(string) ID текущего выбранного события. Будет 'undefined' или 'null', если событие не выбрано.(string) идентификатор текущего выбранного события. 'Undefined' или 'null', если в планировщике не выбрано ни одно событие.
expanded(boolean) true, если scheduler развернут. Будет 'undefined' или 'null', если scheduler находится в обычном размере или если расширение [expand](guides/extensions-list.md#expand) не включено.(boolean) возвращает true, когда планировщик развернут. 'Undefined' или 'null', если планировщик имеет обычный размер или расширение [expand](guides/extensions-list.md#expand) не включено в приложении.
drag_id(string) ID события, которое в данный момент перетаскивается. Будет 'undefined' или 'null', если событие не перетаскивается.(string) идентификатор события, которое в данный момент перетаскивается пользователем в планировщике. 'Undefined' или 'null', если никакие задачи не перетаскиваются.
drag_mode('move','resize','create', 'new-size') текущий режим drag. Будет 'undefined' или 'null', если событие не перетаскивается.('move','resize','create', 'new-size') режим перетаскивания. 'Underfined' или 'null', если в планировщике не перетаскиваются события.
:::note -Обратите внимание, изменение этого объекта не повлияет на поведение scheduler'а. - -::: +Примечание: поведение планировщика нельзя изменить путём модификации этого объекта. + +::: \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/getuserdata.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/getuserdata.md index f6e07ea9..4baaca23 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/getuserdata.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/getuserdata.md @@ -1,31 +1,31 @@ --- -sidebar_label: "getUserData" -title: "getUserData method" -description: "получает пользовательские данные, связанные с конкретным событием" +sidebar_label: getUserData +title: "getUserData метод" +description: "Получает данные пользователя, связанные с указанным событием" --- # getUserData ### Description -@short: Получает пользовательские данные, связанные с конкретным событием +@short: Получает данные пользователя, связанные с указанным событием @signature: getUserData: (id: string, name: string) =\> any ### Parameters -- `id` - (required) *string* - id события -- `name` - (required) *string* - название пользовательских данных +- `id` - (required) *string* - идентификатор события +- `name` - (required) *string* - имя данных пользователя ### Returns -- `value` - (any) - значение пользовательских данных +- `value` - (any) - значение данных пользователя ### Example ~~~jsx -var eventId = scheduler.addEvent({ - start_date: "16-06-2013 09:00", - end_date: "16-06-2013 12:00", +const eventId = scheduler.addEvent({ + start_date: "16-06-2027 09:00", + end_date: "16-06-2027 12:00", text: "Meeting" }); @@ -35,4 +35,4 @@ scheduler.getUserData(eventId, "holder");// ->"John" ~~~ ### Related API -- [setUserData](api/method/setuserdata.md) +- [setUserData](api/method/setuserdata.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/getview.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/getview.md index 2dfff931..f829f604 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/getview.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/getview.md @@ -1,20 +1,20 @@ --- -sidebar_label: "getView" -title: "getView method" -description: "возвращает объект view по его имени. Если имя не указано, возвращается текущий view" +sidebar_label: getView +title: "Метод getView" +description: "возвращает объект view по имени. Если имя не указано, возвращает текущее представление" --- # getView ### Description -@short: Возвращает объект view по его имени. Если имя не указано, возвращается текущий view +@short: Возвращает объект view по его имени. Если имя не указано, возвращает текущее представление @signature: getView: (name?: string) =\> any ### Parameters -- `name` - (optional) *string* - необязательный, имя view +- `name` - (optional) *string* - необязательно, имя представления ### Returns - ` view` - (object) - объект view @@ -22,18 +22,18 @@ description: "возвращает объект view по его имени. Е ### Example ~~~jsx -var timeline = scheduler.getView(); +const timeline = scheduler.getView(); timeline.x_size = 8; scheduler.setCurrentView(); -~~~ +~~~ ### Related samples - [Display labels in timeline cells](https://docs.dhtmlx.com/scheduler/samples/06_timeline/17_timeline_cell_content.html) ### Details -Этот метод возвращает только те views, которые имеют собственное объектное представление. В настоящий момент это [timeline](views/timeline.md#timelineobjectapi) и [units](views/units.md) views, поэтому для любого другого view метод вернёт *null*. +Возвращает только те виды, которые имеют собственное объектное представление. В настоящее время это виды [timeline](views/timeline.md#timeline-object-api) и [units](views/units.md), поэтому метод вернет *null* для любого другого вида. ### Related Guides -- [Вид 'Timeline'](views/timeline.md) -- [Units View](views/units.md) +- [Timeline View](views/timeline.md) +- [Units View](views/units.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/hidecover.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/hidecover.md index 7f10cb57..f7a13a41 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/hidecover.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/hidecover.md @@ -14,7 +14,7 @@ description: "удаляет модальное оверлейное окно li ### Parameters -- `box` - (optional) *HTMLElement* - элемент, который необходимо скрыть +- `box` - (optional) *HTMLElement* - элемент, который нужно скрыть ### Example @@ -24,7 +24,7 @@ scheduler.hideCover(scheduler.getLightbox()); ### Details -При передаче входного параметра этот метод скрывает указанный HTML-элемент, устанавливая для его свойства display значение "none". +Если вы укажете входной параметр, метод скроет указанный HTML-объект (установив свойство display в значение "none"). ### Related API -- [showCover](api/method/showcover.md) +- [showCover](api/method/showcover.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/hidelightbox.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/hidelightbox.md index 88bf28ab..ae22e21a 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/hidelightbox.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/hidelightbox.md @@ -1,14 +1,14 @@ --- -sidebar_label: "hideLightbox" -title: "hideLightbox method" -description: "закрывает лайтбокс без сохранения изменений" +sidebar_label: hideLightbox +title: "hideLightbox метод" +description: "Скрывает lightbox без сохранения" --- # hideLightbox ### Description -@short: Закрывает лайтбокс без сохранения изменений +@short: Скрывает lightbox без сохранения @signature: hideLightbox: () =\> void @@ -20,4 +20,4 @@ scheduler.hideLightbox(); ### Related API - [showLightbox](api/method/showlightbox.md) -- [hideCover](api/method/hidecover.md) +- [hideCover](api/method/hidecover.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/hidequickinfo.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/hidequickinfo.md index 0af4f10f..be3b623e 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/hidequickinfo.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/hidequickinfo.md @@ -1,14 +1,14 @@ --- -sidebar_label: "hideQuickInfo" -title: "hideQuickInfo method" -description: "Скрывает всплывающую форму события, если она в данный момент открыта." +sidebar_label: hideQuickInfo +title: "Метод hideQuickInfo" +description: "скрывает всплывающее окно формы события (если оно в данный момент активно)" --- # hideQuickInfo ### Description -@short: Скрывает всплывающую форму события, если она в данный момент открыта. +@short: Скрывает всплывающее окно формы события (если оно в данный момент активно) @signature: hideQuickInfo: () =\> void @@ -23,7 +23,7 @@ scheduler.hideQuickInfo(); ### Details :::note - Для работы этого метода необходимо включить плагин [quick_info](guides/extensions-list.md#quickinfo). + Метод требует активации плагина [quick_info](guides/extensions-list.md#quick-info). ::: ### Related API @@ -33,5 +33,5 @@ scheduler.hideQuickInfo(); - [onQuickInfo](api/event/onquickinfo.md) ### Related Guides -- [Мобильная адаптивность Scheduler](guides/touch-support.md) -- [Полный список расширений](guides/extensions-list.md#quickinfo) +- [Mobile Responsive Scheduler](guides/touch-support.md) +- [Full List of Extensions](guides/extensions-list.md#quick-info) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/highlighteventposition.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/highlighteventposition.md index 736dc592..a781d365 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/highlighteventposition.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/highlighteventposition.md @@ -1,20 +1,20 @@ --- -sidebar_label: "highlightEventPosition" +sidebar_label: highlightEventPosition title: "highlightEventPosition method" -description: "отмечает длительность события на timeline" +description: "Подсвечивает продолжительность события на шкале времени" --- # highlightEventPosition ### Description -@short: Отмечает длительность события на timeline +@short: Подсвечивает продолжительность события на шкале времени @signature: highlightEventPosition: (event: any) =\> void ### Parameters -- `event` - (required) *object* - объект события +- `event` - (required) *object* - сам объект события ### Example @@ -24,4 +24,4 @@ scheduler.highlightEventPosition(scheduler.getEvent(1)); ### Related API - [drag_highlight](api/config/drag_highlight.md) -- [drag_marker_class](api/template/drag_marker_class.md) +- [drag_marker_class](api/template/drag_marker_class.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/init.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/init.md index 6bba8425..ef83a8e8 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/init.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/init.md @@ -1,29 +1,29 @@ --- -sidebar_label: "init" -title: "init method" -description: "Это конструктор для создания экземпляра dhtmlxScheduler." +sidebar_label: init +title: "метод init" +description: "конструктор объекта dhtmlxScheduler" --- # init ### Description -@short: Это конструктор для создания экземпляра dhtmlxScheduler. +@short: Конструктор объекта dhtmlxScheduler -@signature: init: (container: string|HTMLElement, date?: Date, view?: string) =\> void +@signature: init: (container: string|HTMLElement, date?: Date, view?: string) => void ### Parameters -- `container` - (required) *string | HTMLElement* - HTML контейнер (или его ID), в котором будет инициализирован dhtmlxScheduler. -- `date` - (optional) *Date* - Начальная дата для scheduler (по умолчанию текущая дата). -- `view` - (optional) *string* - Начальный режим отображения (по умолчанию "week"). +- `container` - (required) *string | HTMLElement* - HTML-контейнер (или его id), в котором будет инициализирован объект dhtmlxScheduler +- `date` - (optional) *Date* - начальная дата планировщика (по умолчанию текущая дата) +- `view` - (optional) *string* - имя начального вида (по умолчанию, "week") ### Example ~~~jsx -scheduler.init("scheduler_here",new Date(2010,0,6),"month"); +scheduler.init("scheduler_here", new Date(2027, 0, 6), "month"); ~~~ ### Related samples -- [Basic initialization](https://docs.dhtmlx.com/scheduler/samples/01_initialization_loading/01_basic_init.html) -- [Agenda view](https://docs.dhtmlx.com/scheduler/samples/03_extensions/03_agenda_view.html) +- [Базовая инициализация](https://docs.dhtmlx.com/scheduler/samples/01_initialization_loading/01_basic_init.html) +- [Вид Agenda](https://docs.dhtmlx.com/scheduler/samples/03_extensions/03_agenda_view.html) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/invertzones.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/invertzones.md index d6980611..913651e2 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/invertzones.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/invertzones.md @@ -1,35 +1,35 @@ --- -sidebar_label: "invertZones" -title: "invertZones method" -description: "инвертирует заданные часовые пояса" +sidebar_label: invertZones +title: "invertZones метод" +description: "инвертирует указанные часовые пояса" --- # invertZones ### Description -@short: Инвертирует заданные часовые пояса +@short: Инвертирует указанные часовые пояса @signature: invertZones: (zones: any[]) =\> void ### Parameters -- `zones` - (required) *array* - массив **[start_minute,end_minute,..,start_minute_N,end_minute_N]**
каждая пара в котором определяет конкретный временной диапазон (в минутах). Массив может содержать любое
количество таких пар +- `zones` - (required) *массив* - массив **[start_minute,end_minute,..,start_minute_N,end_minute_N]**
где каждая пара задаёт определённый диапазон ограничений (в минутах). Массив может содержать любое
количество таких пар ### Example ~~~jsx -var zones = scheduler.invertZones([500, 1000]); // => [0, 500, 1000, 1440] +const zones = scheduler.invertZones([500, 1000]); // => [0, 500, 1000, 1440] ~~~ ### Details :::note -Доступно начиная с версии 3.5 +Доступно с версии 3.5 -::: +::: :::note - Этот метод требует включенного плагина [limit](guides/extensions-list.md#limit). -::: + Метод требует активации плагина [limit](guides/extensions-list.md#limit). +::: \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/iscalendarvisible.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/iscalendarvisible.md index 171ab2e7..370aa4d5 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/iscalendarvisible.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/iscalendarvisible.md @@ -1,36 +1,36 @@ --- -sidebar_label: "isCalendarVisible" +sidebar_label: isCalendarVisible title: "isCalendarVisible method" -description: "определяет, отображается ли в данный момент календарь в scheduler" +description: "проверяет, открыт ли в данный момент календарь в расписании" --- # isCalendarVisible ### Description -@short: Определяет, отображается ли в данный момент календарь в scheduler +@short: Проверяет, открыт ли в данный момент календарь в расписании -@signature: isCalendarVisible: () =\> boolean | HTMLElement +@signature: isCalendarVisible: () => boolean|HTMLElement ### Returns -- ` cal` - (boolean | HTMLElement) -
  • HTML-элемент мини-календаря - когда мини-календарь виден
  • false - когда мини-календарь не виден
+- ` cal` - (boolean | HTMLElement) -
  • HTML-элемент мини-календаря - если мини-календарь в данный момент открыт
  • false - если мини-календарь в данный момент закрыт
### Example ~~~jsx //проверка, виден ли мини-календарь -var check = scheduler.isCalendarVisible(); // ->
…
+const check = scheduler.isCalendarVisible(); // ->
…
~~~ ### Related samples -- [Mini calendar in the scheduler header](https://docs.dhtmlx.com/scheduler/samples/05_calendar/01_select.html) -- [Mini calendar with the recurring events](https://docs.dhtmlx.com/scheduler/samples/05_calendar/06_recurring_form.html) +- [Мини-календарь в заголовке расписания](https://docs.dhtmlx.com/scheduler/samples/05_calendar/01_select.html) +- [Мини-календарь с повторяющимися событиями](https://docs.dhtmlx.com/scheduler/samples/05_calendar/06_recurring_form.html) ### Details :::note - Этот метод работает только если включен плагин [minical](guides/extensions-list.md#minicalendardatepicker). +Метод требует активации плагина [minical](guides/extensions-list.md#mini-calendar-date-picker). ::: ### Related Guides -- [Мини-календарь (Date Picker)](guides/minicalendar.md) +- [Mini Calendar (Date Picker)](guides/minicalendar.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/isonedayevent.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/isonedayevent.md index 63fe07c1..845e2328 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/isonedayevent.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/isonedayevent.md @@ -1,14 +1,14 @@ --- -sidebar_label: "isOneDayEvent" -title: "isOneDayEvent method" -description: "определяет, длится ли заданное событие всего один день или охватывает несколько дней" +sidebar_label: isOneDayEvent +title: "Метод isOneDayEvent" +description: "проверяет, является ли указанное событие однодневным или многодневным" --- # isOneDayEvent ### Description -@short: Определяет, длится ли заданное событие всего один день или охватывает несколько дней +@short: Проверяет, является ли указанное событие однодневным или многодневным @signature: isOneDayEvent: (event: any) =\> boolean @@ -17,15 +17,15 @@ description: "определяет, длится ли заданное собы - `event` - (required) *object* - объект события ### Returns -- ` isOneDay` - (boolean) - возвращает true, если событие происходит в пределах одного дня, иначе возвращает false +- ` isOneDay` - (boolean) - возвращает true, если указанное событие однодневное. В противном случае false ### Example ~~~jsx -var eventId = scheduler.addEvent({ - start_date: "16-06-2013 09:00", - end_date: "16-06-2013 12:00", +const eventId = scheduler.addEvent({ + start_date: "16-06-2027 09:00", + end_date: "16-06-2027 12:00", text: "Meeting" }); scheduler.isOneDayEvent(scheduler.getEvent(eventId));//->true -~~~ +~~~ \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/isviewexists.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/isviewexists.md index 09eb146f..a661b62a 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/isviewexists.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/isviewexists.md @@ -1,20 +1,20 @@ --- -sidebar_label: "isViewExists" -title: "isViewExists method" -description: "проверяет, существует ли view с заданным именем" +sidebar_label: isViewExists +title: "Метод isViewExists" +description: "проверяет, существует ли вид с указанным именем" --- # isViewExists ### Description -@short: Проверяет, существует ли view с заданным именем +@short: Проверяет, существует ли вид с указанным именем -@signature: isViewExists: (name: string) =\> boolean +@signature: isViewExists: (name: string) => boolean ### Parameters -- `name` - (required) *string* - имя view +- `name` - (обязательно) *string* - имя вида ### Returns - ` isExist` - (boolean) - true, если view найден; иначе false @@ -26,4 +26,4 @@ scheduler.init('scheduler_here'); scheduler.load("data/events.xml"); scheduler.isViewExists("month"); //->true /*!*/ -~~~ +~~~ \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/linkcalendar.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/linkcalendar.md index e13535d7..d3c1a832 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/linkcalendar.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/linkcalendar.md @@ -1,26 +1,26 @@ --- -sidebar_label: "linkCalendar" -title: "linkCalendar method" -description: "Этот метод обновляет активную дату в мини-календаре каждый раз, когда активная дата в планировщике изменяется." +sidebar_label: linkCalendar +title: "linkCalendar метод" +description: "для изменения активной даты в мини-календаре каждый раз, когда изменяется активная дата в расписании" --- # linkCalendar ### Description -@short: Этот метод обновляет активную дату в мини-календаре каждый раз, когда активная дата в планировщике изменяется. +@short: для изменения активной даты в мини-календаре каждый раз, когда изменяется активная дата в расписании @signature: linkCalendar: (calendar: any, shift: SchedulerCallback) =\> void ### Parameters -- `calendar` - (required) *object* - Экземпляр мини-календаря. -- `shift` - (required) *function* - Функция, которая определяет разницу между активными датами в мини-календаре и планировщике. Принимает дату планировщика в качестве входного параметра и возвращает дату, которая будет отображаться в мини-календаре. +- `calendar` - (required) *object* - объект мини-календаря +- `shift` - (required) *function* - функция, задающая разницу между активными датами в мини-календаре
и планировщиком. Функция принимает дату планировщика в качестве параметра и
возвращает дату, которая должна отображаться в мини-календаре ### Example ~~~jsx -var calendar = scheduler.renderCalendar({ +const calendar = scheduler.renderCalendar({ container:"cal_here", navigation:true, handler:function(date){ @@ -35,13 +35,13 @@ scheduler.linkCalendar(calendar, function(date){ ~~~ ### Related samples -- [Mini calendar outside the scheduler](https://docs.dhtmlx.com/scheduler/samples/05_calendar/05_plain_structure.html) +- [Мини-календарь вне планировщика](https://docs.dhtmlx.com/scheduler/samples/05_calendar/05_plain_structure.html) ### Details :::note - Для работы этого метода требуется включенный плагин [minical](guides/extensions-list.md#minicalendardatepicker). + Метод требует активации плагина [minical](guides/extensions-list.md#mini-calendar-date-picker). ::: ### Related Guides -- [Мини-календарь (Date Picker)](guides/minicalendar.md) +- [Мини-календарь (Date Picker)](guides/minicalendar.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/load.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/load.md index 9e7d8324..6e01e398 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/load.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/load.md @@ -1,52 +1,52 @@ --- -sidebar_label: "load" -title: "load method" -description: "загружает данные в scheduler из внешнего источника" +sidebar_label: load +title: "load метод" +description: "загружает данные в планировщик из внешнего источника данных" --- # load ### Description -@short: Загружает данные в scheduler из внешнего источника +@short: Загружает данные в планировщик из внешнего источника данных @signature: load: (url: string, callback?: SchedulerCallback) =\> void ### Parameters -- `url` - (required) *string* - URL на сервере (это может быть статический файл или серверный скрипт, который выводит данные в одном из поддерживаемых форматов) -- `callback` - (optional) *function* - функция, которая вызывается после завершения загрузки +- `url` - (required) *string* - URL на стороне сервера (может быть статическим файлом или серверным скриптом, который выводит данные в одном из поддерживаемых форматов) +- `callback` - (optional) *function* - функция обратного вызова ### Example ~~~jsx scheduler.load("data"); // формат данных определяется автоматически // или -scheduler.load("data",function(){ - alert("Данные успешно загружены"); +scheduler.load("data", () => { + alert("Data has been successfully loaded"); }); ~~~ ### Related samples -- [Basic initialization](https://docs.dhtmlx.com/scheduler/samples/01_initialization_loading/01_basic_init.html) -- [Loading data from a database](https://docs.dhtmlx.com/scheduler/samples/01_initialization_loading/05_loading_database.html) +- [Базовая инициализация](https://docs.dhtmlx.com/scheduler/samples/01_initialization_loading/01_basic_init.html) +- [Загрузка данных из базы данных](https://docs.dhtmlx.com/scheduler/samples/01_initialization_loading/05_loading_database.html) ### Details -Обратите внимание, что при динамической загрузке данных функция callback, переданная вторым аргументом, вызывается только при первоначальной загрузке данных. -Последующие загрузки данных происходят позже, но callback вызываться повторно не будет. +Обратите внимание, что в случае динамической загрузки функция обратного вызова, переданная в качестве второго параметра, будет вызываться только при начальной загрузке данных. +В то время как последующие порции данных будут загружаться позже, функция обратного вызова больше не будет вызываться. -Если необходимо, чтобы callback выполнялся каждый раз при загрузке данных в Scheduler, рассмотрите возможность использования события [onLoadEnd](api/event/onloadend.md). +Если вам нужно вызывать функцию обратного вызова каждый раз, когда данные загружаются в Scheduler, вы можете использовать событие [`onLoadEnd`](api/event/onloadend.md). -## Миграция +## Migration -Начиная с версии 5.2, scheduler автоматически определяет формат данных. +В версиях 5.2 и позже планировщик автоматически определяет формат данных. -В версиях до 5.2 метод принимал три параметра: +Но до версии 5.2 метод включал три параметра: -- **url** - (*string*) URL на сервере (может быть статическим файлом или серверным скриптом, который выводит XML данные) -- **type** - (*string*) ('json', 'xml', 'ical') указывающий тип данных. По умолчанию 'xml' -- **callback** - (*function*) функция для вызова после загрузки +- `url` - (*string*) URL на стороне сервера (может быть статическим файлом или серверным скриптом, который выводит данные в виде XML) +- `type` - (*string*) (*'json', 'xml', 'ical'*) тип данных. Значение по умолчанию *'xml'* +- `callback` - (*function*) - функция обратного вызова ### Related API - [onLoadEnd](api/event/onloadend.md) @@ -55,8 +55,8 @@ scheduler.load("data",function(){ - [onParse](api/event/onparse.md) ### Related Guides -- [Примеры форматов данных](guides/data-formats.md) -- [Загрузка данных](guides/loading-data.md) +- [Examples of Data Formats](guides/data-formats.md) +- [Loading Data](guides/loading-data.md) ### Change log -- Второй параметр **type** был удалён, начиная с версии 5.2. +- Второй параметр `type` метода был удалён в версии v5.2. \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/markcalendar.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/markcalendar.md index 5091fd1a..a41841f6 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/markcalendar.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/markcalendar.md @@ -1,30 +1,30 @@ --- -sidebar_label: "markCalendar" -title: "markCalendar method" -description: "добавляет CSS класс к конкретной дате" +sidebar_label: markCalendar +title: "метод markCalendar" +description: "применяет CSS-класс к указанной дате" --- # markCalendar ### Description -@short: Добавляет CSS класс к конкретной дате +@short: Применяет CSS-класс к указанной дате @signature: markCalendar: (calendar: any, date: Date, css: string) =\> void ### Parameters -- `calendar` - (required) *object* - экземпляр календаря -- `date` - (required) *Date* - дата для выделения -- `css` - (required) *string* - имя CSS класса для применения +- `calendar` - (required) *object* - объект календаря +- `date` - (required) *Date* - дату, которую нужно отметить +- `css` - (required) *string* - имя CSS-класса -### Example +### Пример ~~~jsx ~~~ @@ -126,7 +126,7 @@ scheduler.templates.xml_format = scheduler.date.date_to_str("%Y-%m-%d %H:%i"); -~~~js title="Вызов метода экспорта с дополнительными параметрами" +~~~js title="Вызов метода экспорта с server параметром" scheduler.exportToICal({ server:"https://myapp.com/myexport/scheduler" }); diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/export/pdf-multi.md b/i18n/ru/docusaurus-plugin-content-docs/current/export/pdf-multi.md index 20674862..8756ed0b 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/export/pdf-multi.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/export/pdf-multi.md @@ -23,12 +23,12 @@ scheduler.toPDFRange(from, to, view, path, scheme); 4. '_custom_' - позволяет использовать пользовательскую цветовую карту (требуется доработка PHP, см. раздел ['Export to PDF. Configuring service'](export/pdf.md) для подробностей) 5. '_fullcolor_' - экспорт с точным сохранением цветов фона и текста, как показано в представлении -Например, чтобы экспортировать страницы представления 'week' с 1 января 2012 года по 1 февраля 2012 года, метод можно вызвать следующим образом: +Например, чтобы экспортировать страницы представления 'week' с 1 января 2027 года по 1 февраля 2027 года, метод можно вызвать следующим образом: ~~~js scheduler.toPDFRange( - new Date(2012,0,1), - new Date(2012, 1,1), + new Date(2027,0,1), + new Date(2027, 1,1), 'week', 'generate.php', 'fullcolor' diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/export/pdf.md b/i18n/ru/docusaurus-plugin-content-docs/current/export/pdf.md index fc464312..36832ecc 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/export/pdf.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/export/pdf.md @@ -5,178 +5,187 @@ sidebar_label: "Экспорт в PDF" # Экспорт в PDF -*В этой статье рассматривается экспорт с помощью dhtmlxScheduler версии 4.1 и выше. Для версий 4.0 и ранее, пожалуйста, обратитесь к [этому руководству](export/pdf-legacy.md).* +*Статья относится к экспорту dhtmlxScheduler 4.1+. Если вы используете dhtmlxScheduler 4.0 или более ранние версии, см. детали [здесь](export/pdf-legacy.md).* -Начиная с версии 4.1, dhtmlxScheduler предоставляет новый способ экспорта планировщика в PDF-файл с помощью [онлайн-сервиса экспорта](export/pdf.md#defaultexporttopdf). +Начиная с версии 4.1, dhtmlxScheduler предлагает новый подход к экспорту планировщика в формат PDF: [онлайн-сервис экспорта](export/pdf.md#default-export-to-pdf). -:::note -Сервис является бесплатным, однако PDF-файлы, созданные под лицензией GPL, будут содержать водяной знак библиотеки. Покупка лицензии удаляет водяной знак в течение активного периода поддержки (12 месяцев для всех PRO-лицензий). +:::info +Сервис бесплатный, но результирующий PDF-файл будет содержать водяной знак библиотеки под лицензией GPL. В случае покупки лицензии результат экспорта будет доступен без водяного знака +во время действительного срока поддержки (12 месяцев для всех PRO лицензий). ::: -## Использование сервисов экспорта {#usingexportservices} +## Использование сервисов экспорта -Доступно несколько сервисов экспорта, которые можно установить локально для экспорта Scheduler в PDF. +Доступно несколько сервисов экспорта. Вы можете установить их на ваш компьютер и локально экспортировать Scheduler в PDF. -Имейте в виду, что сервисы экспорта являются отдельными от пакета Scheduler. Для получения информации об условиях использования ознакомьтесь с [соответствующей статьей](https://dhtmlx.com/docs/products/dhtmlxScheduler/export.shtml). +Обратите внимание, что сервисы экспорта не входят в пакет Scheduler, +прочитайте [соответствующую статью](https://dhtmlx.com/docs/products/dhtmlxScheduler/export.shtml), чтобы узнать условия использования каждого из них. -## Ограничения на размер запроса {#limitsonrequestsize} +## Ограничения на размер запроса -API-эндпоинт *https://export.dhtmlx.com/scheduler* обрабатывает запросы на экспорт (*exportToPDF*, *exportToPNG* и др.). Максимально допустимый размер запроса - **10 МБ**. +Существует общий API-эндпойнт `https://export.dhtmlx.com/scheduler`, который предоставляет методы экспорта, такие как `exportToPDF()` и `exportToPNG()`. Максимальный размер запроса — 10 МБ. -## Экспорт по умолчанию в PDF {#defaultexporttopdf} +## По умолчанию экспорт в PDF -Чтобы экспортировать планировщик в PDF, выполните следующие шаги: +Чтобы экспортировать планировщик в PDF-документ, выполните следующие шаги: -- Включите плагин export_api с помощью метода [plugins](api/method/plugins.md): +- Чтобы использовать онлайн-сервис экспорта, включите плагин `export_api` через метод [`plugins()`](api/method/plugins.md): ~~~js scheduler.plugins({ - export_api: true + export_api: true }); ~~~ :::note -Для версий Scheduler ниже 7.0, подключите скрипт **https://export.dhtmlx.com/scheduler/api.js** на вашей странице для активации онлайн-сервиса экспорта, например: +Если версия Scheduler старше 7.0, вам нужно подключить файл `https://export.dhtmlx.com/scheduler/api.js` на вашей странице, чтобы включить онлайн-сервис экспорта, например: -~~~js +~~~html ~~~ ::: -- Используйте метод exportToPDF для выполнения экспорта: +- Вызовите метод [`exportToPDF()`](#parameters-of-the-export-method) для экспорта Scheduler: -~~~html -/*!*/ +~~~html {1} + ~~~ -[Export to PDF/PNG](https://docs.dhtmlx.com/scheduler/samples/04_export/06_online_export.html) +### Связанные примеры +- [Export to PDF/PNG](https://docs.dhtmlx.com/scheduler/samples/04_export/06_online_export.html) -## Параметры метода экспорта {#parametersoftheexportmethod} +## Параметры метода экспорта + +Метод [`exportToPDF()`](api/method/exporttopdf.md) принимает в качестве параметра объект с рядом свойств. Все свойства являются необязательными: + -Метод [exportToPDF()](api/method/exporttopdf.md) принимает необязательный объект с различными свойствами: - + - + - + - + - + - + - + - +
name(string) имя файла для экспортируемого PDF(string) имя выходного файла
format('A0', 'A1', 'A2', 'A3', 'A4', 'A5') размер бумаги для PDF('A0', 'A1', 'A2', 'A3', 'A4', 'A5') формат выходного PDF-изображения
orientation('portrait', 'landscape') ориентация страниц PDF('portrait', 'landscape') задаёт ориентацию выходного PDF-изображения
zoom(number) уровень масштабирования PDF(number) задаёт коэффициент масштабирования выходного PDF-изображения
header(string) HTML-контент для включения в заголовок PDF(string) задаёт заголовок, который будет добавлен к выходному PDF‑изображению. Обратите внимание, здесь можно использовать любой HTML
footer(string) HTML-контент для включения в подвал PDF(string) задаёт нижний колонтитул, который будет добавлен к выходному PDF‑изображению. Обратите внимание, здесь можно использовать любой HTML
server(string) URL API-эндпоинта для запросов на экспорт. Полезно при использовании локального сервиса экспорта. По умолчанию https://export.dhtmlx.com/scheduler(string) устанавливает API-эндпойнт для запроса. Может использоваться с локальной установкой сервиса экспорта. Значение по умолчанию: https://export.dhtmlx.com/scheduler
additional_settings(object) дополнительные параметры экспорта, включая:
  • format - (string) формат выходного файла: 'A3', 'A4', 'A5', 'Legal', 'Letter', 'Tabloid'
  • landscape - (boolean) ориентация страницы, применяется только если задан "format"
  • width - (string|number|"content") ширина выходной страницы, актуально для экспорта на несколько страниц
  • height - (string|number|"content") высота выходной страницы, актуально для экспорта на несколько страниц
(object) объект с дополнительными настройками. Объект может содержать следующие атрибуты:
  • format - (string) формат выходного файла: 'A3', 'A4', 'A5', 'Legal', 'Letter', 'Tabloid'
  • landscape - (boolean) портретная или альбомная ориентация выходного файла. Атрибут действует только когда задан атрибут "format".
  • width - (string|number|"content") ширина выходной страницы. Атрибут используется при экспорте нескольких страниц.
  • height - (string|number|"content") высота выходной страницы. Атрибут используется при экспорте нескольких страниц.
- -~~~js title="Пример вызова exportToPDF с опциями" +### Вызов метода экспорта с опциональными свойствами +~~~js scheduler.exportToPDF({ - name:"myscheduler.pdf", - format:"A4", - orientation:"portrait", - zoom:1, - header:"

My company

", - footer:"

Bottom line

", - server:"https://myapp.com/myexport/scheduler" + name: "myscheduler.pdf", + format: "A4", + orientation: "portrait", + zoom: 1, + header: "

My company

", + footer: "

Bottom line

", + server: "https://myapp.com/myexport/scheduler" }); ~~~ -## Имя выходного файла {#nameoftheoutputfile} -Чтобы указать индивидуальное имя для экспортируемого PDF-файла, используйте свойство **name** в опциях [exportToPDF](export/pdf.md#parametersoftheexportmethod): +## Имя выходного файла -~~~js +Чтобы задать произвольное имя выходного файла, используйте свойство `name` в параметре метода [`exportToPDF()`](export/pdf.md#parameters-of-the-export-method): + +~~~js {2} scheduler.exportToPDF({ - name:"my_beautiful_scheduler.pdf"/*!*/ + name: "my_beautiful_scheduler.pdf" }); ~~~ -## Заголовок/подвал выходного файла {#headerfooteroftheoutputfile} -Заголовки и подвал можно добавить в экспортируемый PDF с помощью свойств **header** и **footer** в опциях [exportToPDF](export/pdf.md#parametersoftheexportmethod): +## Заголовок/нижний колонтитул выходного файла + +Чтобы добавить заголовок/нижний колонтитул к выходному PDF-файлу, используйте свойства `header`/`footer` в параметре метода [`exportToPDF()`](export/pdf.md#parameters-of-the-export-method): :::note -В этих свойствах можно использовать любой HTML. При добавлении изображений указывайте абсолютные URL в атрибуте "src". +Обратите внимание: при указании параметров можно использовать любой HTML. При указании изображений помните, что нужно задавать глобальные пути в значениях атрибута "src". ::: -~~~js +~~~js {3-4} scheduler.exportToPDF({ - name:"myscheduler.pdf", - header:"

My company

",/*!*/ - footer:"

Bottom line

"/*!*/ + name: "myscheduler.pdf", + header: "

My company

", + footer: "

Bottom line

" }); ~~~ -## Пользовательские стили для выходного файла {#customstylefortheoutputfile} -Пользовательские стили можно применить, подключив таблицу стилей с вашими CSS-классами: +## Пользовательский стиль для выходного файла -- Через ссылку на внешний файл стилей: +Чтобы применить пользовательский стиль к планировщику, предоставьте таблицу стилей со своими пользовательскими CSS-классами: -~~~js +- через ссылку: + +~~~js {3} scheduler.exportToPDF({ - name:"calendar.pdf", - header:'' /*!*/ + name: "calendar.pdf", + header: '' }); ~~~ -- Или встроив стили в тег `' /*!*/ + name: "calendar.pdf", + header: '' }); ~~~ -Обратите внимание, что этот подход работает с общедоступными HTTP-URL. Для локальных или корпоративных сред вы можете встроить все стили напрямую, например: +Примечание: вышеупомянутое решение работает для глобальной HTTP-ссылки. Если у вас CSS‑классы указаны во внутреннем/локальном окружении, вы можете встроить все стили следующим образом: ~~~js scheduler.exportToPDF({ - header:"" + header: "" }); ~~~ -## Экспорт HTML-элементов {#exportinghtmlelements} -При экспорте Scheduler в PDF существуют некоторые ограничения по поддержке HTML-элементов из соображений безопасности. +## Экспорт HTML‑элементов + +При экспорте Scheduler в PDF‑формат учтите, что экспорт HTML‑элементов ограничен из‑за возможной небезопасности. -Некоторые элементы, такие как ``, ``, `` с атрибутом *src*, указывающим на URL SVG-изображения (работает для экспорта в PNG и JPG, но не с Base64), например: +- можно использовать элемент `` с атрибутом *src*, который содержит URL изображения в формате SVG (подходит для форматов PNG и JPG, не работает для Base64), например: ~~~html ~~~ -- Используйте CSS-стили, такие как *background* или *background-image* с `url()`, указывающим на URL изображения или строку Base64 (работает для PNG, JPG и SVG): +- можно использовать элементы style, такие как *background* или *background-image* и указать атрибут `url` со ссылкой на изображение или изображение в формате Base64 в качестве значения (подходит для форматов PNG/JPG/SVG) ~~~css .red { @@ -187,4 +196,4 @@ scheduler.exportToPDF({ } ~~~ -Если у вас есть собственный модуль экспорта и требуется экспортировать неподдерживаемые HTML-элементы, вы можете обратиться в службу поддержки за рекомендациями по модификации модуля для обхода ограничений. Помните, что это может привести к уязвимости вашего сервера для XSS-атак. +Если у вас есть экспортный модуль и вам нужно экспортировать HTML‑элементы, которые не поддерживаются нашим онлайн‑сервером экспорта, вы можете отправить запрос в службу поддержки, чтобы получить инструкции по изменениям в вашем модуле, необходимых для снятия ограничений. Однако следует учитывать, что ваш сервер будет подвержен XSS‑атакам. \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/export/serialization.md b/i18n/ru/docusaurus-plugin-content-docs/current/export/serialization.md index c80dc51f..288c193f 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/export/serialization.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/export/serialization.md @@ -20,7 +20,7 @@ scheduler.plugins({ Чтобы преобразовать данные планировщика в XML-строку, используйте метод [toXML](api/method/toxml.md): ~~~js -var xml = scheduler.toXML(); //xml string +const xml = scheduler.toXML(); // xml string ~~~ @@ -32,7 +32,7 @@ var xml = scheduler.toXML(); //xml string Чтобы преобразовать данные планировщика в JSON-строку, используйте метод [toJSON](api/method/tojson.md): ~~~js -var json_string = scheduler.toJSON(); //json string +const json_string = scheduler.toJSON(); // json string ~~~ :::note @@ -48,7 +48,7 @@ var json_string = scheduler.toJSON(); //json string Чтобы преобразовать данные планировщика в iCal-строку, используйте метод [toICal](api/method/toical.md): ~~~js -var ical_string = scheduler.toICal(); //ical string +const ical_string = scheduler.toICal(); // ical string ~~~ Также существует [внешний скрипт для операций импорта-экспорта iCal](guides/ical-export-import.md) @@ -107,7 +107,7 @@ scheduler.data_attributes = function(){ ~~~js scheduler.data_attributes = function(){ - var empty = function(a){ return a||""; } + const empty = function(a){ return a || ""; } return [["id"], ["text"], ["start_date",scheduler.templates.xml_format], @@ -146,7 +146,7 @@ scheduler.plugins({ ~~~js function save(){ - var form = document.getElementById("xml_form"); + const form = document.getElementById("xml_form"); form.elements.data.value = scheduler.toXML(); form.submit(); } diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/backbone-integration.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/backbone-integration.md deleted file mode 100644 index ab3f71ca..00000000 --- a/i18n/ru/docusaurus-plugin-content-docs/current/guides/backbone-integration.md +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: "Интеграция с Backbone" -sidebar_label: "Интеграция с Backbone" ---- - -# Интеграция с Backbone - -Начиная с версии 4.0, библиотека предоставляет специальное расширение [**mvc**](guides/extensions-list.md#mvc), которое обеспечивает плавную интеграцию планировщика с библиотекой Backbone. - -Для приложений, построенных на Backbone и желающих использовать планировщик при сохранении управления данными через Backbone, можно использовать следующий подход: - -1. Добавьте файлы dhtmlxScheduler в ваше приложение: -~~~js - - -~~~ -2. Включите расширение mvc на странице: -~~~js -scheduler.plugins({ - mvc: true -}); -~~~ -3. Настройте и инициализируйте планировщик как обычно: -~~~js -scheduler.full_day = true; - -scheduler.init("scheduler_here", new Date(2019,0,6), "month"); -~~~ -4. Далее создайте коллекцию данных Backbone и подключите к ней планировщик: -~~~js -//здесь можно использовать любую модель -MyEvent = Backbone.Model.extend({}); -EventList = Backbone.Collection.extend({ - model:MyEvent, - url:"./data/backbone.json" -}); -events = new EventList(); - - -scheduler.backbone(events); //связываем планировщик с коллекцией -~~~ - -После этого планировщик будет загружать данные из коллекции и поддерживать синхронизацию при любых изменениях. Аналогично, любые изменения, внесённые через интерфейс планировщика, вызовут соответствующие события в коллекции Backbone. - -Этот процесс довольно прост. Ключевой момент - использовать метод [backbone](api/method/backbone.md) вместо стандартных методов [load](api/method/load.md) или [parse](api/method/parse.md). - - -Метод [backbone](api/method/backbone.md) гарантирует, что планировщик остаётся синхронизированным со всеми изменениями данных в модели Backbone и наоборот. -В качестве параметра он принимает коллекцию Backbone. - - -[Backbone integration](https://docs.dhtmlx.com/scheduler/samples/10_integration/07_backbone.html) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/collisions.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/collisions.md index 3a443c89..5b6c7ad7 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/guides/collisions.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/collisions.md @@ -1,64 +1,62 @@ --- -title: "Предотвращение двойных событий в одном временном слоте" -sidebar_label: "Предотвращение двойных событий в одном временном слоте" +title: "Предотвращение двойных событий в временном интервале" +sidebar_label: "Предотвращение двойных событий в временном интервале" --- -# Предотвращение двойных событий в одном временном слоте +# Предотвращение двойных событий в временном интервале -Во многих сценариях важно ограничить количество событий, которые могут быть запланированы в одном временном слоте. Например, может потребоваться запретить добавление второго события, если на это время уже запланировано другое. +Во многих сценариях вам может понадобиться ограничить количество событий в пределах одного временного интервала. Например, может потребоваться запретить создание второго события, если другое событие уже определено в указанное время. -## Активация контроля коллизий +## Активация мониторинга конфликтов -Для управления количеством событий, разрешённых в одном временном слоте, можно использовать расширение [**collision**](guides/extensions-list.md#collision). +Чтобы контролировать число событий в временном интервале, используйте расширение [**collision**](guides/extensions-list.md#collision). -~~~js title="Активация расширения 'collision'" +Активация расширения 'collision': +~~~js scheduler.plugins({ collision: true }); ~~~ -*После активации этого расширения на странице включается функциональность, предотвращающая размещение двух событий в одном временном слоте - как при создании новых событий, так и при перемещении существующих.* - -## Управление допустимым количеством событий в одном слоте - -По умолчанию в одном временном слоте разрешено только одно событие. Чтобы изменить этот лимит, используйте свойство [collision_limit](api/config/collision_limit.md): - -~~~js title="Запрет создания более 2 событий в одном временном слоте" -scheduler.config.collision_limit = 2; //разрешает создание 2 событий в одном временном слоте -~~~ +*Как только расширение будет включено на странице, оно активируется. С этого момента планировщик не позволит пользователям размещать 2 события в одном и том же временном интервале (создавать или перемещать).* -[Controlling the number of events in a time slot](https://docs.dhtmlx.com/scheduler/samples/03_extensions/15_collision.html) +## Управление допустимым числом событий в временном интервале +По умолчанию допустимое число событий в временном интервале равно 1. Чтобы регулировать это число, используйте свойство [collision_limit](api/config/collision_limit.md): -*При активном расширении ['collision'](guides/extensions-list.md#collision), когда пользователь пытается добавить или переместить событие во временной слот, в котором уже есть события, планировщик вызывает событие [onEventCollision](api/event/oneventcollision.md). Это событие проверяет лимит, заданный в свойстве [collision_limit](api/config/collision_limit.md).* +[Контроль количества событий в временном интервале](https://docs.dhtmlx.com/scheduler/samples/03_extensions/15_collision.html) +*С включённым расширением ['collision'](guides/extensions-list.md#collision) каждый раз, когда пользователь пытается создать новое событие или изменить существующее внутри уже занятого временного интервала, планировщик вызывает событие [onEventCollision](api/event/oneventcollision.md), которое проверяет значение, установленное свойством [collision_limit](api/config/collision_limit.md).* -Обратите внимание, что событие [onEventCollision](api/event/oneventcollision.md) не срабатывает при загрузке данных. Чтобы обеспечить соблюдение лимита событий при загрузке данных, код необходимо немного доработать: +Но помните, событие [onEventCollision](api/event/oneventcollision.md) не вызывается во время загрузки данных. Поэтому, чтобы контролировать число элементов в временном интервале во время загрузки данных в планировщик, нужно слегка расширить предыдущий код: -~~~js title="Запрет создания/загрузки более 2 событий в одном временном слоте" -scheduler.config.collision_limit = 2; //разрешает создание 2 событий в одном временном слоте +[Denying creating/loading more than 2 events per time slot](Denying creating more than 2 events per time slot) +~~~js +scheduler.config.collision_limit = 2; //allows creating 2 events per time slot scheduler.attachEvent("onEventLoading", function(ev){ /*!*/ return scheduler.checkCollision(ev); /*!*/ }); /*!*/ ~~~ -Метод [checkCollision](api/method/checkcollision.md) проверяет, пересекается ли событие с уже существующими, и при необходимости вызывает событие [onEventCollision](api/event/oneventcollision.md). -## Получение количества событий в временном слоте +Метод [checkCollision](api/method/checkcollision.md) проверяет, происходит ли событие в момент, который уже занят другим(и) событием(ями), и вызывает событие [onEventCollision](api/event/oneventcollision.md). + +## Получение количества событий, размещённых в временном интервале -Чтобы узнать, сколько событий запланировано в определённом временном слоте, можно использовать метод [getEvents](api/method/getevents.md): +Чтобы получить число событий, размещённых в временном интервале, используйте метод [getEvents](api/method/getevents.md): -~~~js title="Получение количества событий в временном слоте" -var count = scheduler.getEvents(ev.start_date, ev.end_date).length; +[Получение количества событий в временном интервале](Getting the number of events in a time slot) +~~~js +const count = scheduler.getEvents(ev.start_date, ev.end_date).length; ~~~ -Обратите внимание, что метод [getEvents](api/method/getevents.md) перебирает все события и сравнивает их даты, поэтому при очень большом количестве событий эта операция может занять некоторое время. +Примечание: метод [getEvents](api/method/getevents.md) перебирает все события и сравнивает их даты, поэтому может занять некоторое время, если у вас тысячи событий. ## Полный чек-лист по предотвращению двойных бронирований/событий -Вот краткое описание шагов, которые нужно выполнить, чтобы предотвратить коллизии событий в одном временном слоте: +Ниже приведён список шагов, которые нужно выполнить, чтобы избежать коллизий событий в одном временном интервале: -1) Подключите расширение *collision* на страницу: +1) Подключите на страницу расширение *collision*: ~~~js scheduler.plugins({ @@ -66,13 +64,15 @@ scheduler.plugins({ }); ~~~ -2) Запретите пользователям создавать новые события во время загрузки данных с сервера. +2) Блокируйте создание новых событий во время загрузки данных с сервера. -Это гарантирует, что события не будут добавлены до полной загрузки календаря. Используйте обработчики событий [onLoadEnd](api/event/onloadend.md) и [onLoadStart](api/event/onloadstart.md) вместе со свойством [readonly](api/config/readonly.md), например: +Таким образом пользователь не сможет создать событие, пока данные не загружены и календарь пуст. + +Для этого следует использовать обработчики событий [onLoadStart](api/event/onloadstart.md) и [onLoadEnd](api/event/onloadend.md) и свойство [readonly](api/config/readonly.md), как показано ниже: ~~~js -// сделать планировщик только для чтения -// до начала загрузки данных из источника +// сделать планировщик доступным для редактирования +// до начала загрузки данных из источника данных scheduler.attachEvent("onLoadStart", function(){ scheduler.config.readonly = true; }); @@ -84,26 +84,25 @@ scheduler.attachEvent("onLoadEnd", function(){ }); ~~~ -3) Включите динамическую загрузку для повышения производительности при работе с большим количеством записей, которые иначе загружались бы одновременно. +3) Включите динамическую загрузку, чтобы ускорить загрузку данных в случае большого объёма записей, если они загружаются сразу. -Чтобы активировать динамическую загрузку, вызовите метод [setLoadMode](api/method/setloadmode.md) до загрузки данных: +Чтобы включить динамическую загрузку, вызовите метод [setLoadMode](api/method/setloadmode.md) и затем загрузите скрипт: -~~~js title="Включение динамической загрузки" +[Включение динамической загрузки](Enabling the dynamic loading) +~~~js scheduler.setLoadMode("month"); scheduler.load("/some"); ~~~ -4) Валидируйте конфликтующие события на сервере с помощью проверки через PHP connector. Подробнее смотрите в статье о -[data validation](https://docs.dhtmlx.com/connector__php__validation.html#processingincaseofvalidationerror). +4) Валидируйте конфликтующие события на стороне сервера в вашем API. Если конфликт обнаружен, верните статус ошибки в ответе и обработайте его на клиенте. -Если валидация не пройдена, можно перезагрузить данные на клиенте. +Также можно перезагрузить данные на стороне клиента, если проверка не удалась. -Для обработки ошибок валидации используйте события DataProcessor [onValidationError](https://docs.dhtmlx.com/api__dataprocessor_onvalidationerror_event.html) и -[onAfterUpdate](https://docs.dhtmlx.com/api__dataprocessor_onafterupdate_event.html), а также методы планировщика [clearAll](api/method/clearall.md) и [load](api/method/load.md): +Чтобы обработать неудачу проверки, используйте события DataProcessor [onValidationError] и [onAfterUpdate] и для повторной загрузки данных применяйте методы Scheduler [clearAll] и [load]: a. [onValidationError](https://docs.dhtmlx.com/api__dataprocessor_onvalidationerror_event.html) -Вызывается после возникновения ошибки валидации, до отправки данных: +возникает после срабатывания ошибки валидации, перед отправкой данных ~~~js dp.attachEvent("onValidationError", function(id, details){ @@ -115,12 +114,12 @@ dp.attachEvent("onValidationError", function(id, details){ Параметры: -- id - (string) id элемента с ошибкой +- id - (string) идентификатор элемента, для которого возникает ошибка - details - (object) детали ошибки b. [onAfterUpdate](https://docs.dhtmlx.com/api__dataprocessor_onafterupdate_event.html) -Вызывается после обработки ответа сервера: +срабатывает после получения и обработки ответа со стороны сервера ~~~js dp.attachEvent("onAfterUpdate", function(id, action, tid, response){ @@ -134,15 +133,15 @@ dp.attachEvent("onAfterUpdate", function(id, action, tid, response){ Параметры: -- id - (string) id обновлённого элемента -- action - (string) статус ответа (тип операции), см. детали ниже -- tid - (string) новый id (актуально только для операций вставки) -- response - (mixed) xml node/json объект с разобранным ответом +- id - (string) идентификатор обновлённого элемента +- action - (string) статус ответа (тип операции), смотрите детали ниже +- tid - (string) новый идентификатор (применимо только к операциям вставки) +- response - (mixed) xml-узел/json-объект, содержит распарсированный xml/json-ответ -Возможные статусы ответа: +Возможные статусы ответа следующие: -- updated; +- updated; - inserted; - deleted; - invalid; -- error. +- error. \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/combo.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/combo.md index 5408fc68..e22e7d93 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/guides/combo.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/combo.md @@ -1,16 +1,16 @@ --- -title: "Combo" -sidebar_label: "Combo" +title: "Комбо" +sidebar_label: "Комбо" --- -# Combo +# Комбо -В этом разделе рассматривается комбобокс, предоставляемый компонентом DHTMLX Combo. +Выпадающий список, представленный компонентом DHTMLX Combo component. ![combo_editor](/img/combo_editor.png) ~~~js -var holders = [ +const holders = [ { key: 1, label: 'James' }, { key: 2, label: 'Alex' }, { key: 3, label: 'Antony' }, @@ -25,17 +25,15 @@ scheduler.config.lightbox.sections = [ image_path:"../common/dhtmlxCombo/imgs/", height:30, filtering:true}, { name:"time", height:72, type:"time", map_to:"auto"} ]; -~~~ - +~~~ [Combo box in the lightbox](https://docs.dhtmlx.com/scheduler/samples/02_customization/15_combo_select.html) - ## Инициализация Чтобы добавить элемент управления Combo в lightbox, выполните следующие шаги: -1. Подключите файлы dhtmlxCombo: +1. Включите файлы dhtmlxCombo: ~~~js @@ -43,13 +41,13 @@ scheduler.config.lightbox.sections = [ ~~~ -2. Включите расширение editors на странице: +2. Активируйте расширение [editors](guides/extensions-list.md#editors) на странице: ~~~js scheduler.plugins({ editors: true }); ~~~ -3. Добавьте секцию в конфигурацию lightbox: +3. Добавьте секцию в конфигурацию lightbox: ~~~js scheduler.config.lightbox.sections = [ { name:"description", ... }, @@ -58,66 +56,61 @@ scheduler.config.lightbox.sections = [ { name:"time", ...} ]; ~~~ -4. Задайте метку для секции: +4. Установите метку для раздела: ~~~js scheduler.locale.labels.section_holders = "Holder"; ~~~ - - - [Combo box in the lightbox](https://docs.dhtmlx.com/scheduler/samples/02_customization/15_combo_select.html) - ## Свойства -Ниже приведены основные и часто используемые свойства для контрола 'combo' (полный список смотрите [здесь](api/config/lightbox.md)): +Следующие свойства наиболее важны и обычно настраиваются для элемента управления 'combo' (полный список смотрите [здесь](api/config/lightbox.md)): - + - + - + - + - - + + - - + + - + - +
name(string) имя секции(string) имя раздела
height(number) высота секции(number) высота раздела
map_to(string) имя свойства данных, которое будет связано с данной секцией(string) имя свойства данных, которое будет сопоставлено разделу
type(textarea,time,select,template,multiselect,radio,checkbox,combo) тип элемента управления секции(textarea,time,select,template,multiselect,radio,checkbox,combo) тип элемента управления раздела
options(array of objects) определяет опции выбора для контрола (для контролов 'select', 'multiselect', 'radio', 'combo'). Каждый объект в массиве описывает одну опцию и содержит следующие свойства:
  • key - (string) id опции. Это значение сравнивается со свойством данных события для назначения опций событиям
  • label - (string) текст метки опции
options(array of objects) определяет варианты выбора управления (для 'select', 'multiselect', 'radio', 'combo' controls). Каждый объект в массиве задаёт один вариант и имеет следующие свойства:
  • key - (string) идентификатор варианта. Это свойство сравнивается со свойством данных события для присвоения вариантов событиям
  • label - (string) подпись варианта
image_path (string) путь к изображениям dhtmlxCombo
filtering(boolean, string) включает поддержку автофильтрации (опции фильтруются по мере ввода текста). Необязательный параметр. Параметр может принимать следующие значения:
  • false - отключает фильтрацию
  • true или "start" - включает фильтрацию, поиск с начала элемента
  • "between" - включает фильтрацию, ищет любое вхождение введённого текста в элементах
filtering(boolean, string) включает режим автофильтрации (опции будут отфильтрованы по мере набора текста). Необязательно Значение может принимать одно из следующих значений:
  • false - отключает фильтрацию
  • true or "start" - включает фильтрацию, поиск начинается с начала элемента
  • "between" - включает фильтрацию, поиск по любому вхождению набранного текста в элементах
script_path(string) путь к серверному скрипту, который будет предоставлять опции combo с сервера. Необязательный параметр(string) путь к серверному скрипту, который будет обеспечивать загрузку вариантов Combo с сервера. Необязательно
cache(boolean) включает или отключает кеширование ответов скрипта (рекомендуется включить). Необязательный параметр(boolean) включает/выключает кеширование ответов скриптов (рекомендуется включать данное свойство). Необязательно
+## Заполнение элемента управления данными -## Заполнение контрола данными - -Чтобы задать значения для контрола Combo, используйте параметр [options](api/config/lightbox.md): +В целом, чтобы задать значения для элемента управления Combo, следует использовать параметр [options](api/config/lightbox.md): ~~~js scheduler.config.lightbox.sections = @@ -134,14 +127,14 @@ scheduler.config.lightbox.sections = ]; ~~~ -Каждый элемент в параметре [options](api/config/lightbox.md) должен содержать два обязательных свойства: +Элементы в параметре [options](api/config/lightbox.md) должны иметь 2 обязательных свойства: -- **key** - id опции -- **label** - текст метки опции +- **key** - идентификатор варианта +- **label** - подпись варианта -## Заполнение контрола данными с сервера +## Заполнение элемента управления данными с сервера -Чтобы загрузить опции Combo с сервера, используйте свойство **script_path** для указания URL серверного скрипта, обрабатывающего запросы. +Чтобы заполнить элемент управления Combo данными с сервера, используйте свойство **script_path**, указывая путь к серверному скрипту, который будет обрабатывать запросы к серверу. ~~~js scheduler.config.lightbox.sections = [ @@ -150,22 +143,22 @@ scheduler.config.lightbox.sections = [ ]; ~~~ -Свойство **script_path** определяет URL, с которого combo загружает свои опции через AJAX. +Свойство **script_path** задаёт URL, с которого Combo будет загружать свои варианты, то есть если script_path указан - Combo попытается загрузить данные по этому URL через AJAX. -Так как селектор combo основан на [dhtmlxCombo](https://docs.dhtmlx.com/combo__index.html), сервер должен возвращать данные в совместимом формате. -Подробнее о добавлении данных в combo можно узнать в статье [Loading Options](https://docs.dhtmlx.com/combo__adding_options.html). +Селектор Combo основан на [dhtmlxCombo](https://docs.dhtmlx.com/combo__index.html), поэтому сервер должен возвращать данные, совместимые с ним. +Подробнее о способах добавления данных в Combo читайте в статье [Loading Options](https://docs.dhtmlx.com/combo__adding_options.html). -Запросы выполняются в двух случаях: +URL запрашивается в двух случаях: -1) Когда открывается lightbox и в combo выбрано значение, контрол отправляет запрос для загрузки метки для этой опции. +1) когда lightbox открывается и у Combo есть выбранное значение - управление отправляет запрос на сервер и загружает метку для выбранного варианта. -В запросе передаётся параметр **id**: +Запрос будет иметь параметр запроса **id**: ~~~ GET /url?id="1" ~~~ -Ответ должен быть массивом, содержащим только элемент с указанным id, в следующем формате: +Ответ должен вернуть массив, содержащий только элемент с указанным id в следующем формате: ~~~ [ @@ -173,17 +166,15 @@ GET /url?id="1" ] ~~~ +2) когда пользователь начинает вводить текст в поле ввода списка - управление загружает отфильтрованные значения. -2) Когда пользователь начинает вводить текст в поле combo, контрол загружает отфильтрованные опции. - -В запросе передаётся введённый текст в параметре **mask**: +Клиент отправит запрос с введённым текстом в параметре запроса **mask**: ~~~ GET /url?mask="al" ~~~ -Сервер должен вернуть все элементы, соответствующие маске: - +Ответ сервера должен вернуть все элементы, которые соответствуют значению mask: ~~~ [ { "value": 1, "text": "Albania"}, @@ -191,34 +182,22 @@ GET /url?mask="al" ] ~~~ -Если вы используете библиотеку [PHP Connector](https://github.com/DHTMLX/connector-php), серверная часть может выглядеть так: +Пример обработчика на стороне сервера (Node.js/Express): ~~~js -event->attach("beforeFilter", "by_id"); - function by_id($filter) { - if (isset($_GET['id'])) - $filter->add("item_id", $_GET['id'], '='); - } - - $combo->dynamic_loading(3); - $combo->render_table("Countries","item_id","item_nm"); - -?> +app.get("/api/countries", async (req, res) => { + const { id, mask } = req.query; + // Query your data source by id or mask + const items = await countriesService.find({ id, mask }); + res.json(items); // [{ value: 1, text: "Albania" }, ...] +}); ~~~ - -[Populating a combo box from the server](https://docs.dhtmlx.com/scheduler/samples/02_customization/18_combo_select_from_db.html) - +[Заполнение выпадающего списка данными с сервера](https://docs.dhtmlx.com/scheduler/samples/02_customization/18_combo_select_from_db.html) ## Режим автофильтрации -Режим автофильтрации означает, что опции фильтруются автоматически по мере ввода текста пользователем. Чтобы включить этот режим, установите свойство **filtering** в *true*: +Режим авто-фильтрации — режим, когда опции автоматически фильтруются по мере ввода пользователя. Чтобы включить режим, установите свойство **filtering** в значение true: ~~~js scheduler.config.lightbox.sections = [ @@ -227,8 +206,7 @@ scheduler.config.lightbox.sections = [ ]; ~~~ :::note -Обратите внимание, что автофильтрация может использоваться независимо от того, загружаются ли данные на клиенте или с сервера. +Примечание: можно использовать режим автофильтрации независимо от источника данных (клиентский или серверный). ::: - -Для получения дополнительной информации смотрите документацию dhtmlxCombo по фильтрации. +Подробнее по теме в документации dhtmlxCombo dhtmlxCombo. Filtering. \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/custom-details-form.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/custom-details-form.md index cf2d2ad7..dc3bc95f 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/guides/custom-details-form.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/custom-details-form.md @@ -1,47 +1,50 @@ --- -title: "Полностью настраиваемый лайтбокс" -sidebar_label: "Полностью настраиваемый лайтбокс" +title: "Полностью настраиваемый Lightbox" +sidebar_label: "Полностью настраиваемый Lightbox" --- -# Полностью настраиваемый лайтбокс +# Полностью настраиваемый Lightbox -Чтобы создать полностью настраиваемый лайтбокс для планировщика, необходимо переопределить метод @scheduler_showlightbox: +Чтобы задать полностью настраиваемый Lightbox для планировщика, переопределите метод [`showLightbox()`](api/method/showlightbox.md): ~~~js -scheduler.showLightbox = function(id){ +scheduler.showLightbox = (id) => { // id - id события ... код для отображения любой пользовательской формы ... -} +}; ~~~ -Существует два вспомогательных метода, которые могут упростить эту задачу: +Существует 2 вспомогательных метода, которые можно использовать для упрощения реализации: -- [startLightbox](api/method/startlightbox.md) - отображает пользовательский лайтбокс внутри указанного HTML-контейнера, центрируя его на экране. -- [endLightbox](api/method/endlightbox.md) - закрывает лайтбокс +- [`startLightbox()`](api/method/startlightbox.md) - отображает настраиваемый lightbox в указанном HTML-контейнере, по центру экрана +- [`endLightbox()`](api/method/endlightbox.md) - закрывает lightbox -Предположим, что у вас есть HTML-контейнер с идентификатором **#custom_form** где-то на странице. Чтобы реализовать пользовательский лайтбокс, вы можете сделать следующее: +Предположим, что на странице где-то имеется HTML-контейнер `#custom_form`. Тогда можно реализовать настраиваемый Lightbox следующим образом: ~~~js -var custom_form = document.getElementById("custom_form"); +const customForm = document.getElementById("custom_form"); -scheduler.showLightbox = function(id){ - var ev = scheduler.getEvent(id); - scheduler.startLightbox(id, custom_form ); +scheduler.showLightbox = (id) => { + const event = scheduler.getEvent(id); + scheduler.startLightbox(id, customForm); ...'здесь необходимо установить значения в форме'... - //document.getElementById("some_input").value = ev.text; -} + // document.getElementById("some_input").value = event.text; +}; + // должна быть связана с кнопкой 'save' -function save_form() { - var ev = scheduler.getEvent(scheduler.getState().lightbox_id); +const saveForm = () => { + const event = scheduler.getEvent(scheduler.getState().lightbox_id); ...'здесь необходимо получить значения из формы'... - //ev.text = document.getElementById("some_input").value; - scheduler.endLightbox(true, custom_form); -} + // event.text = document.getElementById("some_input").value; + scheduler.endLightbox(true, customForm); +}; + // должна быть связана с кнопкой 'cancel' -function close_form(argument) { - scheduler.endLightbox(false, custom_form); -} +const closeForm = () => { + scheduler.endLightbox(false, customForm); +}; ~~~ +### Related samples -[Fully custom lightbox](https://docs.dhtmlx.com/scheduler/samples/02_customization/16_custom_form.html) +- [Полностью настраиваемый Lightbox](https://docs.dhtmlx.com/scheduler/samples/02_customization/16_custom_form.html) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/custom-events-color.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/custom-events-color.md index 2e14bcbf..e385e4f7 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/guides/custom-events-color.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/custom-events-color.md @@ -1,40 +1,41 @@ ---- -title: "Пользовательский цвет события" -sidebar_label: "Пользовательский цвет события" +--- +title: "Цвет пользовательского события" +sidebar_label: "Цвет пользовательского события" --- -# Пользовательский цвет события +# Цвет пользовательского события -Существует три способа настроить цвет события: +Существует три способа задать произвольный цвет для события: -1. [Указание цветовых значений непосредственно в свойствах объекта события](guides/custom-events-color.md#specifyingcolorsinpropertiesoftheeventobject); -2. [Добавление дополнительных CSS-классов к событию](guides/custom-events-color.md#attachingadditionalcssclassestoanevent); -3. [Динамическая генерация стилей из данных](guides/custom-events-color.md#loadingcolorswithdata). +1. [Установить значения цвета в свойствах объекта события](guides/custom-events-color.md#specifying-colors-in-properties-of-the-event-object); +2. [Применить дополнительные CSS‑классы к событию](guides/custom-events-color.md#attaching-additional-css-classes-to-an-event). +2. [Генерировать стили из данных](guides/custom-events-color.md#loading-colors-with-data). ![custom_event_color](/img/custom_event_color.png) -## Указание цветов в свойствах объекта события {#specifyingcolorsinpropertiesoftheeventobject} +## Указание цвета в свойствах объекта события -Чтобы назначить пользовательский цвет событию, просто добавьте одно или оба из следующих свойств в объект данных события: +Чтобы задать произвольный цвет для события, достаточно добавить в объект данных два дополнительных свойства (или только одно из них): -- **textColor** - задаёт цвет шрифта события; +- **textColor** - задаёт цвет текста события; - **color** - задаёт цвет фона события. ![custom_color_model](/img/custom_color_model.png) -~~~js title="Установка цвета события в объекте данных" +Установка цвета события в объекте данных: +~~~js scheduler.parse([ - {id:1, start_date:"2019-05-21",end_date:"2019-05-25",text:"Task1", color:"red"}, - {id:2, start_date:"2019-06-02",end_date:"2019-06-05",text:"Task2", color:"blue"} + {id:1, start_date:"2027-05-21",end_date:"2027-05-25",text:"Task1", color:"red"}, + {id:2, start_date:"2027-06-02",end_date:"2027-06-05",text:"Task2", color:"blue"} ],"json"); ... scheduler.getEvent(1).color = "yellow"; scheduler.updateEvent(1); ~~~ -Имейте в виду, что это специальные свойства. Планировщик автоматически проверяет их и применяет указанные цвета к контейнеру и тексту события. Если они отсутствуют, используются цвета по умолчанию. +Примечание: это особые свойства. По умолчанию планировщик всегда проверяет наличие таких свойств у события и, если они есть, применяет соответствующие значения к контейнеру события и тексту. В противном случае планировщик использует предопределённые цвета для события. -Эти свойства поддерживают любые допустимые CSS-форматы цвета, например: +Свойства могут принимать любое допустимое значение цвета CSS, например, все перечисленные ниже обозначения валидны: ~~~js ev.color = "#FF0000"; @@ -42,175 +43,169 @@ ev.color = "red"; ev.color = "rgb(255,0,0)"; ~~~ -## Добавление дополнительных CSS-классов к событию {#attachingadditionalcssclassestoanevent} +## Применение дополнительных CSS‑классов к событию +Второй способ окрасить событие — применить к нему дополнительные CSS‑классы. -Другой способ задать цвет события - добавить к нему пользовательский CSS-класс или классы. +### Метод -### Методика +Чтобы применить CSS‑класс к событию, используйте шаблон [event_class](api/template/event_class.md). -Вы можете применить CSS-класс к событию, используя шаблон [event_class](api/template/event_class.md). - -По умолчанию шаблон выглядит так: +Стандартная реализация шаблона: ~~~js scheduler.templates.event_class = function(start, end, ev){ return ""; } ~~~ -*Эта функция возвращает строку, которая будет добавлена к атрибуту class события, поэтому вы можете возвращать разные классы в зависимости от состояния события.* +*Функция возвращает строку, которая будет добавлена к классу события. Таким образом, можно возвращать разные классы в зависимости от состояния события.* [Coloring events](https://docs.dhtmlx.com/scheduler/samples/02_customization/01_events_coloring.html) ### Пример +Предположим, что вы хотите, чтобы события, назначенные менеджерам и сотрудникам, имели разные цвета: для менеджеров — зелёный цвет, для сотрудников — оранжевый. В таком случае нужно выполнить 2 шага: -Предположим, вы хотите окрашивать события по-разному в зависимости от того, относятся ли они к менеджерам или сотрудникам: зелёный для менеджеров и оранжевый для сотрудников. Вот как это сделать: - -1. Добавьте дополнительное свойство в вашу модель данных, например 'type', которое будет содержать тип пользователя: 'manager' или 'employee'. +1. Добавьте в модель дополнительное свойство данных и назовите его, например, 'type'. Это свойство будет хранить тип пользователя: 'manager' или 'employee'. ![extended_data_model](/img/extended_data_model.png) -2. Создайте CSS-классы, соответствующие этим типам, например 'manager_event' и 'employee_event'. CSS может выглядеть так: - - +2. Укажите связанные CSS‑классы для этих типов, например, назвав их 'manager_event' и 'employee_event'. Для таких названий определение CSS будет выглядеть так: +[Redefining the default CSS classes](Redefining the default CSS classes) -~~~js title="Переопределение стандартных CSS-классов" ~~~html - + } + ~~~ -Для версий Scheduler 6.0 и ниже, которые не поддерживают CSS-переменные, используйте такие стили: +Для более старых версий Scheduler (v6.0 и ранее) CSS‑переменные недоступны, и события можно окрасить следующими стилями: ~~~html - -~~~ -3. Наконец, переопределите шаблон [event_class](api/template/event_class.md) для назначения классов: + /*событие в дневном или недельном представлении*/ + .dhx_cal_event.manager_event div{ + background-color: #009966 !important; + color: black !important; + } + .dhx_cal_event.employee_event div{ + background-color: #FF9933 !important; + color: black !important; + } + /*многодневное событие в представлении месяца*/ + .dhx_cal_event_line.manager_event{ + background-color: #009966 !important; + color: black !important; + } + .dhx_cal_event_line.employee_event{ + background-color: #FF9933 !important; + color: black !important; + } + + /*событие с фиксированным временем, в представлении месяца*/ + .dhx_cal_event_clear.manager_event{ + color: black !important; + } + .dhx_cal_event_clear.employee_event{ + color: black !important; + } +~~~ +3. И, наконец, переопределите шаблон [event_class](api/template/event_class.md) -~~~js title="Применение дополнительных CSS-классов к событиям:" +[Applying additional CSS classes to events:](Applying additional CSS classes to events:) +~~~js scheduler.templates.event_class = function (start, end, event) { - if (event.type == 'manager') return "manager_event"; - return "employee_event"; + if (event.type == 'manager') return "manager_event"; + return "employee_event"; }; ~~~ - [Coloring events](https://docs.dhtmlx.com/scheduler/samples/02_customization/01_events_coloring.html) [Styling events with templates](https://docs.dhtmlx.com/scheduler/samples/02_customization/06_templates.html) -## Загрузка цветов из данных {#loadingcolorswithdata} +## Загрузка цветов из данных -Когда цвета приходят из данных backend — например, когда цвета задач зависят от этапов или назначенных ресурсов и не могут быть жёстко заданы — вы можете генерировать стили динамически из данных. +Если цвета являются частью данных, поступающих из бэкенда, например когда цвет задачи связан с этапом или ресурсом, назначенным задаче и которые не могут быть зашиты непосредственно на странице, возможно распространить решение — генерировать стили из ваших данных вручную. -Допустим, у вас есть список пользователей, назначенных на задачи, и стили задач зависят от свойств пользователя: +Предположим, у вас есть следующая коллекция пользователей, которых можно назначать на задачи. Стиль задач должен задаваться свойствами записей пользователей: ~~~js [ - {"key":1, "label":"John", "backgroundColor":"#03A9F4", "textColor":"#FFF"}, - {"key":2, "label":"Mike", "backgroundColor":"#f57730", "textColor":"#FFF"}, - {"key":3, "label":"Anna", "backgroundColor":"#e157de", "textColor":"#FFF"}, - {"key":4, "label":"Bill", "backgroundColor":"#78909C", "textColor":"#FFF"}, - {"key":7, "label":"Floe", "backgroundColor":"#8D6E63", "textColor":"#FFF"} + {"key":1, "label":"John", "backgroundColor":"#03A9F4", "textColor":"#FFF"}, + {"key":2, "label":"Mike", "backgroundColor":"#f57730", "textColor":"#FFF"}, + {"key":3, "label":"Anna", "backgroundColor":"#e157de", "textColor":"#FFF"}, + {"key":4, "label":"Bill", "backgroundColor":"#78909C", "textColor":"#FFF"}, + {"key":7, "label":"Floe", "backgroundColor":"#8D6E63", "textColor":"#FFF"} ] ~~~ -В этом случае пользователи и их цвета управляются отдельно от планировщика, который заранее не знает ни идентификаторов пользователей, ни их цветов. +В этом случае пользователи и их цвета создаются и управляются разными частями приложения, и scheduler обычно не знает идентификаторы пользователей и их цвета заранее. -Практический подход: +Вот что можно сделать в этом случае: -- Определите именованный serverList для этой коллекции: +- Определите именованный serverList для этой коллекции ~~~js scheduler.serverList("people"); ~~~ -- Загрузите эти опции на страницу, используя один из поддерживаемых [форматов данных](guides/data-formats.md#json-with-collections) или через собственный XHR-запрос. +- Загрузите варианты на страницу, используя один из поддерживаемых [data formats](guides/data-formats.md#json-with-collections) или вручную через собственный xhr -- После загрузки динамически сгенерируйте CSS-стили из данных: +- Как только варианты загружены, можно генерировать CSS‑стили из данных: ~~~js scheduler.attachEvent("onLoadEnd", function(){ - // используйте уникальный ID для style-элемента - var styleId = "dynamicSchedulerStyles"; + // используйте произвольный идентификатор для элемента стилей + const styleId = "dynamicSchedulerStyles"; - // повторно используйте style-элемент, если он уже существует + // если вы будете повторно загружать варианты с цветами - повторно используйте ранее + // созданный элемент стилей - var element = document.getElementById(styleId); - if(!element){ - element = document.createElement("style"); - element.id = styleId; - document.querySelector("head").appendChild(element); - } - var html = []; - var resources = scheduler.serverList("people"); + let element = document.getElementById(styleId); + if(!element){ + element = document.createElement("style"); + element.id = styleId; + document.querySelector("head").appendChild(element); + } + let html = []; + const resources = scheduler.serverList("people"); - // создайте CSS-правила для каждого пользователя и вставьте их в style-элемент + // сгенерируйте стили CSS для каждой опции и запишите CSS в элемент стилей, - resources.forEach(function(r){ + resources.forEach(function(r){ html.push(`.event_resource_${r.key} { --dhx-scheduler-event-background:${r.backgroundColor}; --dhx-scheduler-event-color:${r.textColor}; }`); - }); - element.innerHTML = html.join(""); + }); + element.innerHTML = html.join(""); }); ~~~ -- Затем назначьте сгенерированные классы в шаблоне event_class: +- После этого вы сможете присвоить связанные классы, которые вы сгенерировали из шаблона класса: ~~~js scheduler.templates.event_class = function (start, end, event) { - var css = []; + let css = []; - if(event.owner_id){ - css.push("event_resource_" + event.owner_id); - } + if(task.owner_id){ + css.push("event_resource_" + event.owner_id); + } - return css.join(" "); + return css.join(" "); }; -~~~ +~~~ \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/custom-events-display.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/custom-events-display.md index d3e2664d..3711472c 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/guides/custom-events-display.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/custom-events-display.md @@ -1,67 +1,66 @@ --- -title: "Пользовательское Окно События" -sidebar_label: "Пользовательское Окно События" +title: "Коробка настраиваемого события" +sidebar_label: "Коробка настраиваемого события" --- -# Пользовательское Окно События +# Коробка настраиваемого события -dhtmlxScheduler позволяет настраивать отображение событий. +dhtmlxScheduler предоставляет возможность определить пользовательский внешний вид для событий. :::note -Эта функция работает только с [Дневной вид](views/day.md), [Week View](views/week.md) и [Units View](views/units.md). +Подходит только для [Вид дня](views/day.md), [Вид недели](views/week.md) и [Вид единиц](views/units.md) ::: -## Техника +## Методика -Вы можете настраивать события с помощью метода [renderEvent](api/method/renderevent.md): +Настройка отображения событий достигается с помощью метода [renderEvent](api/method/renderevent.md): ~~~js scheduler.renderEvent = function(container, ev) { - // ваш код кастомизации + // ваш код настройки } ~~~ -- **_container_** - элемент-контейнер для события -- **_ev_** - сам объект события - - -[Custom event box](https://docs.dhtmlx.com/scheduler/samples/02_customization/27_custom_event_box.html) +- **_container_** - контейнер события +- **_ev_** - объект события +[Коробка настраиваемого события](https://docs.dhtmlx.com/scheduler/samples/02_customization/27_custom_event_box.html) ## Важные советы -- Возврат _true_ применяет вашу пользовательскую отрисовку, возврат _false_ возвращает стандартную отрисовку. -- Некоторые CSS-классы имеют особое назначение и должны быть первыми в className элемента: - - **_dhx_event_move_** - делает элемент перетаскиваемым (обычно заголовок события). - - **_dhx_event_resize_** - позволяет изменять длительность события перетаскиванием элемента. +- Возвращение _true_ применяет пользовательскую логику, возвращение _false_ применяет логику по умолчанию. +- Некоторые CSS-классы имеют особое назначение (они должны идти первыми в className элемента): + - **_dhx_event_move_** - элемент с этим стилем можно перетаскивать (обычно это заголовок события). + - **_dhx_event_resize_** - перетаскивание элемента с этим стилем изменит продолжительность события. ~~~js -var html = "
"; - // контейнер для содержимого события - html += "
"; + // контейнер для контента события + html+= "
"; html += ""; - // два варианта: показывать только дату начала для коротких событий или начало+конец для длинных - if ((ev.end_date - ev.start_date)/60000 > 40) { // если событие длится больше 40 минут + // здесь два варианта: показать только начальную дату для коротких событий или начальную+конечную для длинных + if ((ev.end_date - ev.start_date)/60000>40){//если событие длится более 40 минут html += scheduler.templates.event_header(ev.start_date, ev.end_date, ev); html += " @@ -70,23 +69,23 @@ scheduler.renderEvent = function(container, ev) { html += scheduler.templates.event_date(ev.start_date) + ""; } // отображение текста события - html += "" + scheduler.templates.event_text(ev.start_date, ev.end_date, ev) + - "
"; + html += "" + scheduler.templates.event_text(ev.start_date,ev.end_date,ev)+ + "" + "
"; // секция изменения размера html += "
"; container.innerHTML = html; - return true; // обязательно: true – использовать кастомную отрисовку, false – стандартную + return true; //требуется, true - чтобы отобразить пользовательскую форму, false - стандартную форму }; ~~~ -Связанный CSS выглядит так: +и следующий связанный CSS: ~~~html ~~~ -В качестве альтернативы можно использовать CSS-переменные вместо фиксированных цветов, например: +Можно также использовать CSS-переменные вместо фиксированных значений цветов, как показано ниже: ~~~html ~~~ - -[Custom event box](https://docs.dhtmlx.com/scheduler/samples/02_customization/27_custom_event_box.html) +[Коробка настраиваемого события](https://docs.dhtmlx.com/scheduler/samples/02_customization/27_custom_event_box.html) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/custom-lightbox-editor.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/custom-lightbox-editor.md index 2844c982..4dd5105d 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/guides/custom-lightbox-editor.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/custom-lightbox-editor.md @@ -1,40 +1,40 @@ --- -title: "Пользовательский контрол Lightbox" -sidebar_label: "Пользовательский контрол Lightbox" +title: "Пользовательский элемент управления лайтбокс" +sidebar_label: "Пользовательский элемент управления лайтбокс" --- -# Пользовательский контрол Lightbox +# Пользовательский элемент управления лайтбокс Чтобы создать пользовательский контрол (редактор), определите новый объект следующим образом: ~~~js scheduler.form_blocks["my_editor"]={ - render:function(config){ // config - объект конфигурации секции - var height="(config.height||50)+""px"; + render:function(config){ // config- section configuration object + const height="(config.height||50)+""px"; return "
" + "
"; }, set_value:function(node,value,ev,config){ - // node - HTML-элемент, связанный с определённой выше разметкой - // value - значение, указанное в свойстве map_to - // ev - объект события - // config - объект конфигурации секции + // node - HTML object related to HTML defined above + // value - value defined by map_to property + // ev - event object + // config - section configuration object node.querySelector("textarea").value = value || ""; }, get_value:function(node,ev,config){ - // node - HTML-элемент, связанный с определённой выше разметкой + // node - HTML object related to HTML defined above // event object - // config - объект конфигурации секции + // config - section configuration object return node.querySelector("textarea").value; }, focus:function(node){ - // node - HTML-элемент, связанный с определённой выше разметкой + // node - HTML object related to HTML defined above node.querySelector("textarea").focus(); } }; ~~~ -Использование: +Usage: ~~~js scheduler.locale.labels.section_details = "Details"; @@ -44,27 +44,27 @@ scheduler.config.lightbox.sections="[" ]; ~~~ -Важно **избегать** использования самозакрывающихся тегов внутри HTML, возвращаемого функцией "render", так как это может вызвать проблемы с парсингом в браузере: +Убедитесь, что вы не используете укороченный синтаксис закрывающих тегов внутри HTML-кода, возвращаемого функцией render, поскольку это может вызвать проблемы с разбором в браузере: ~~~js -// плохо: +// bad: render:function(){ return "
"; } -// хорошо: +// good: render:function(){ return "
"; } ~~~ -[Custom editor in the lightbox](https://docs.dhtmlx.com/scheduler/samples/02_customization/05_custom_editor.html) +[Пользовательский редактор в лайтбоксе](https://docs.dhtmlx.com/scheduler/samples/02_customization/05_custom_editor.html) ## Пример -Вот пример того, как создать подобный пользовательский редактор: +Рассмотрим, как создать следующий пользовательский редактор: ![custom_editor](/img/custom_editor.png) @@ -72,7 +72,7 @@ render:function(){ ~~~js scheduler.form_blocks["my_editor"]={ render:function(sns){ - return "
" + + return "
" + "Text  " + @@ -87,7 +87,7 @@ scheduler.form_blocks["my_editor"]={ return node.querySelector("[name='text']").value; }, focus:function(node){ - var input = node.querySelector("[name='text']"); + const input = node.querySelector("[name='text']"); input.select(); input.focus(); } @@ -101,4 +101,4 @@ scheduler.config.lightbox.sections="[" ~~~ -[Custom editor in the lightbox](https://docs.dhtmlx.com/scheduler/samples/02_customization/05_custom_editor.html) +[Пользовательский редактор в лайтбоксе](https://docs.dhtmlx.com/scheduler/samples/02_customization/05_custom_editor.html) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/custom-skins.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/custom-skins.md index 3292d711..298c96e4 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/guides/custom-skins.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/custom-skins.md @@ -5,13 +5,13 @@ sidebar_label: "Настройка скинов" # Настройка скинов -Начиная с версии 7.0, скины Scheduler построены с использованием CSS-переменных, что позволяет легко настраивать и стилизовать внешний вид. +Начиная с версии v7.0 скины Scheduler используют CSS-переменные, которые можно использовать для настройки и стилизации. +### Связанные примеры +- [Настроить и переключаться между темами](https://docs.dhtmlx.com/scheduler/samples/07_skins/07_themes.html) -[Customize and switch between themes](https://docs.dhtmlx.com/scheduler/samples/07_skins/07_themes.html) - -Ключевые CSS-переменные: +Основные CSS-переменные: ~~~css :root { @@ -76,153 +76,155 @@ sidebar_label: "Настройка скинов" --dhx-scheduler-popup-border-radius: var(--dhx-scheduler-border-radius); } - ~~~ -Все эти переменные находятся в файле **codebase/sources/less/src/themes/variables.less** внутри пакета. +Все переменные можно найти в файле **codebase/sources/less/src/themes/variables.less** внутри пакета. ## Как настраивать скины -Самый простой способ изменить внешний вид Scheduler - переопределить CSS-переменные в собственном стилевом файле. Например: +Самый простой способ изменить внешний вид Scheduler — переопределить соответствующие CSS-переменные в вашем файле стилей. Ниже приведён пример: ~~~html ~~~ - -[Customize and switch between themes](https://docs.dhtmlx.com/scheduler/samples/07_skins/07_themes.html) +### Связанные примеры +- [Настроить и переключаться между темами](https://docs.dhtmlx.com/scheduler/samples/07_skins/07_themes.html) -Задавая переменные таким образом, вы заменяете стандартные стили своими, и изменения применяются ко всему Scheduler. +Определяя переменные таким образом, вы можете переопределить стили по умолчанию, чтобы ваши пользовательские стили применялись к Scheduler. :::note -Для корректного наследования значений по всей теме рекомендуется определять переменные на элементе :root. +Чтобы обеспечить правильное наследование значений по всей теме, определяйте переменные в элементе `:root`. ::: -Определяя стили на уровне **:root**, вы обеспечиваете правильное наследование переменных во всём компоненте. Таким образом, если одна переменная зависит от другой, изменения будут распространяться корректно. +Важно определить эти стили именно в элементе `:root`, чтобы обеспечить надлежащее наследование и применение по всему компоненту. Такой подход гарантирует, что когда переменная, используемая другими переменными, переопределяется, она корректно влияет на связанные стили по всему компоненту. -Например, переменная `--dhx-scheduler-scale-color` наследует значение из `--dhx-scheduler-container-color`. +Например, переменная `--dhx-scheduler-scale-color` наследуется от основной переменной цвета текста `--dhx-scheduler-container-color`. -- Если переопределить `--dhx-scheduler-container-color` на уровне **:root**, то `--dhx-scheduler-scale-color` также изменится. +- Если вы переопределите `--dhx-scheduler-container-color` на уровне `:root`, вы гарантируете, что `--dhx-scheduler-scale-color` будет отражать это изменение. ~~~html ~~~ -- Однако, если переопределить `--dhx-scheduler-container-color` глубже в DOM, например внутри **.dhx_cal_container**, это не изменит `--dhx-scheduler-scale-color`. +- Если вы переопределите `--dhx-scheduler-container-color` на более низком уровне в дереве DOM, например внутри **.dhx_cal_container**, это не повлияет на переменную `--dhx-scheduler-scale-color`. ~~~html ~~~ -## Использование исходных файлов +## Как использовать исходники -dhtmlxScheduler предоставляет стили в следующих форматах: +dhtmlxScheduler поставляется со стилями в следующих формах: -- **codebase/dhtmlxscheduler.css** - сжатый CSS-файл, готовый к использованию в продакшене; -- **codebase/sources/dhtmlxscheduler.css** - читаемые предсобранные CSS-файлы; -- **codebase/sources/less/** - исходные LESS-файлы для скинов Scheduler. +- **codebase/dhtmlxscheduler.css** - сжатый CSS-файл для скинов, готовый к продакшену; +- **codebase/sources/dhtmlxscheduler.css** - предварительно подготовленные читаемые CSS-файлы; +- **codebase/sources/less/** - исходные файлы Less скинов Scheduler. -Исходные LESS-файлы пригодятся, если вы хотите глубоко кастомизировать существующие скины или создать собственный. +Последний вариант можно использовать для глубокой настройки существующих скинов или для создания нового скина. -## С чего начать +## Как начать -Вы можете подключить **codebase/sources/less** как NPM-пакет. Эта папка содержит два типа файлов: +Вы можете инициализировать `codebase/sources/less` как пакет NPM. +Исходники будут содержать два типа файлов: -- стили; -- файлы с микропеременными для детальной настройки или создания новых скинов. +- стилевые таблицы; +- файлы с декларациями микропеременных, которые можно использовать для точной настройки вида планировщика или для создания нового скина. -## Сборка скинов +## Как собрать скины -Внутри **codebase/sources/less/** выполните: +В `codebase/sources/less/` выполните: -~~~ +~~~sh > npm install ~~~ -После завершения установки вы можете пересобрать CSS-файлы следующей командой: +После завершения установки вы можете пересобрать CSS-файлы с помощью следующих команд: -~~~ +~~~sh > npm run build ~~~ -Или запустить отслеживание изменений и автоматическую пересборку: +Или -~~~ +~~~sh > npm run watch ~~~ -Эти скрипты компилируют CSS из исходников и размещают результат в папке *codebase* пакета Scheduler, заменяя существующие CSS-файлы. +Скрипт перекомпилирует CSS-файлы из исходников и поместит их в папку *codebase* пакета планировщика, заменив существующие файлы. ## Структура -Структура папки **less** для версии 7.0 (может измениться в будущих релизах): +Структура папки `less` для версии 7.0 (возможны изменения в будущих версиях) приведена ниже: ### Изображения -- **./src/imgs** - SVG-иконки, используемые всеми скинами -- **./src/iconfont** - иконки, включённые в веб-шрифт +- **./src/imgs** - SVG-иконы, используемые всеми скинами +- **./src/iconfont** - иконки, встроенные в веб-шрифт ### Определения скинов -Стандартные переменные определены в скине `terrace`, остальные скины переопределяют эти переменные и добавляют свои стили. +Набор переменных по умолчанию определяется в скине `terrace`; другие скины переопределяют соответствующие переменные и добавляют стили. - **./src/themes** - - *./src/themes/variables.less* - общие переменные для всех скинов, включая `terrace` - - *./src/themes/contrast_black* - переменные для контрастного чёрного скина - - *./src/themes/contrast_white* - переменные для контрастного белого скина - - *./src/themes/material* - переменные для material-скина - - *./src/themes/dark* - переменные для тёмного скина - - *./src/themes/flat* - переменные для flat-скина + - *./src/themes/variables.less* - общие переменные, используемые всеми скинами, скин `terrace` + - *./src/themes/contrast_black* - переменные скина контрастного черного + - *./src/themes/contrast_white* - переменные скина контрастного белого + - *./src/themes/material* - переменные скина Material + - *./src/themes/dark* - переменные темного скина + - *./src/themes/flat* - переменные плоского скина ### Точки входа для сборки скинов - theme.less - package.json -## Создание собственного скина -Чтобы создать новый скин, начните с копирования и переименования существующего скина из **sources/less/src/themes**. Выполните следующие шаги: +## Создание пользовательского скина -1) Скопируйте и переименуйте один из существующих файлов скина. Например: +Чтобы создать новый скин, можно скопировать и переименовать один из существующих скинов из папки `sources/less/src/themes`. Следуйте приведенным ниже шагам: -~~~ --> копировать: +1. Скопируйте и переименуйте один из существующих файлов из папки `sources/less/src/themes`, например: + +~~~text +-> copy: codebase/sources/less/src/themes/material.less --> переименовать в: +-> rename to: codebase/sources/less/src/themes/custom.less ~~~ -2) Импортируйте ваш новый файл в **sources/less/src/themes/index.less** следующим образом: +2. Импортируйте новый файл в `sources/less/src/themes/index.less`, вот так: -~~~ +~~~less @import "./custom"; ~~~ -Затем определите свои переменные следующим образом: +И добавьте содержимое, как в: ~~~css :root[data-scheduler-theme='custom'] { @@ -234,25 +236,27 @@ codebase/sources/less/src/themes/custom.less } ~~~ -Не забудьте определять переменные скина под селектором `:root` с использованием атрибута `data-scheduler-theme`. -Каждая новая тема должна содержать переменную **--dhx-scheduler-theme**, установленную в название темы. +Обратите внимание, переменные скина должны быть определены внутри элемента `:root`, используя селектор `data-scheduler-there`. -3) Пересоберите скины командой: +Новый темп must включать переменную `--dhx-scheduler-theme` с именем темы. -~~~ +3. Пересоберите скины, выполнив: + +~~~sh npm run build ~~~ :::note -Имейте в виду, что Scheduler может применять некоторые предустановленные настройки в зависимости от используемого скина. При создании нового скина на основе существующего, возможно, потребуется вручную скорректировать соответствующие настройки Scheduler. +Обратите внимание, планировщик может применить некоторые предопределенные настройки к календарю в зависимости от применённого скина. +Когда вы создаёте новый скин, копируя существующий, возможно потребуется вручную применить соответствующие настройки к планировщику. ::: -## Настройки стилей через JS +## Настройки стилизации через JS -Некоторые параметры стилей Scheduler не управляются только через CSS и задаются через JavaScript-конфигурацию. К ним относятся: +Обратите внимание, что не все аспекты стилизации Scheduler управляются через CSS; некоторые параметры задаются через конфигурацию JavaScript. Они следующие: - [hour_size_px](api/config/hour_size_px.md) -- и все настройки объекта [scheduler.xy](api/other/xy.md) +- и все настройки объекта [scheduler.xy](api/other/xy.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/customizing-edit-select-bars.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/customizing-edit-select-bars.md index fb8938e1..6344e6c8 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/guides/customizing-edit-select-bars.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/customizing-edit-select-bars.md @@ -1,15 +1,15 @@ --- -title: "Кастомизация панелей 'Select' и 'Edit'" -sidebar_label: "Кастомизация панелей 'Select' и 'Edit'" +title: "Настройка панелей 'Select' и 'Edit'" +sidebar_label: "Настройка панелей 'Select' и 'Edit'" --- -# Кастомизация панелей "Select" и "Edit" +# Настройка панелей "Select" и "Edit" -dhtmlxScheduler позволяет настраивать собственный набор кнопок как для панели выбора (select bar), так и для панели редактирования (edit bar). +dhtmlxScheduler предоставляет возможность определить свой набор кнопок для панелей редактирования и выбора. -## Грид выбора (select bar) +## Панель выбора -По умолчанию грид выбора содержит 3 кнопки ('Details', 'Edit', 'Delete'), которые задаются через опцию конфигурации [icons_select](api/config/icons_select.md). +По умолчанию панель выбора содержит 3 кнопки ('Details', 'Edit', 'Delete'), которые задаются конфигурационной опцией [icons_select](api/config/icons_select.md). ~~~js scheduler.config.icons_select = [ @@ -19,17 +19,18 @@ scheduler.config.icons_select = [ ]; ~~~ + ### Пример использования -Вот пример грида выбора, показанный на изображении ниже: +Рассмотрим панель выбора, изображенную на рисунке ниже: ![select_bar.png](/img/select_bar.png) -К существующим кнопкам добавлена новая кнопка **Location**. +К существующим кнопкам мы добавили новую — **Location**. -Шаги для реализации такого результата: +Наши шаги: -- Обновите [icons_select](api/config/icons_select.md) следующим образом: +- Переопределите [icons_select](api/config/icons_select.md) как показано ниже: ~~~js scheduler.config.icons_select = [ @@ -38,28 +39,29 @@ scheduler.config.icons_select = [ "icon_edit", "icon_delete" ]; + ~~~ :::note -Обратите внимание, каждая кнопка должна начинаться с "icon_" -::: +Примечание: любая кнопка должна начинаться с "icon_" +::: -- Задайте подпись для новой кнопки: +- Установите текст метки для новой кнопки: ~~~js scheduler.locale.labels.icon_location = "Location"; ~~~ -- Присвойте CSS-класс для кнопки: +- Установите CSS‑класс для кнопки: -~~~js +~~~css .dhx_menu_icon.icon_location{ background-image: url('location_icon.png'); } ~~~ -- Определите обработчик клика для кнопки: +- Укажите обработчик кликов по кнопке: ~~~js scheduler._click.buttons.location = function(id){ @@ -67,11 +69,11 @@ scheduler._click.buttons.location = function(id){ }; ~~~ -Здесь **scheduler._click.buttons** содержит обработчики onClick для кнопок панели. Ключ 'location' соответствует названию кнопки из [icons_select](api/config/icons_select.md) без префикса 'icon_'. +где **scheduler._click.buttons** содержит коллекцию обработчиков onClick для кнопок панели. 'location' — имя кнопки, заданное в [icons_edit](api/config/icons_edit.md) после части 'icon_'. -## Грид редактирования (edit bar) +## Панель редактирования -Обычно грид редактирования содержит 2 кнопки ('Save' и 'Cancel'), которые настраиваются с помощью опции [icons_edit](api/config/icons_edit.md). +Как правило, панель редактирования содержит 2 кнопки ('Save' и 'Cancel'), которые задаются конфигурационной опцией [icons_edit](api/config/icons_edit.md). ~~~js scheduler.config.icons_edit = [ @@ -80,16 +82,17 @@ scheduler.config.icons_edit = [ ]; ~~~ + ### Пример использования -Рассмотрим грид редактирования, показанный на изображении ниже: +Рассмотрим панель редактирования, изображенную на рисунке ниже: ![customizing_edit_bar.png](/img/customizing_edit_bar.png) -Помимо кнопок **Save** и **Cancel**, добавлена новая кнопка **Info**. -Порядок действий: +К кнопкам **Save** и **Cancel** мы добавили новую кнопку - **Info**. +Вот наши шаги: -- Обновите [icons_edit](api/config/icons_edit.md) следующим образом: +- Переопределите [icons_edit](api/config/icons_edit.md) как в примере: ~~~js scheduler.config.icons_edit = [ @@ -99,21 +102,21 @@ scheduler.config.icons_edit = [ ]; ~~~ -- Задайте подпись для новой кнопки: +- Установите текст метки для новой кнопки: ~~~js scheduler.locale.labels.icon_custom = "Info"; ~~~ -- Определите CSS-класс для кнопки: +- Установите CSS‑класс для кнопки: -~~~js +~~~css .dhx_menu_icon.icon_custom{ background-image: url('info_icon.png'); } ~~~ -- Назначьте обработчик клика для кнопки: +- Укажите обработчик кликов по кнопке: ~~~js scheduler._click.buttons.custom = function(id){ @@ -121,18 +124,19 @@ scheduler._click.buttons.custom = function(id){ }; ~~~ -Снова, **scheduler._click.buttons** содержит обработчики кликов для кнопок, а 'custom' соответствует названию кнопки из [icons_edit](api/config/icons_edit.md) без префикса 'icon_'. +где **scheduler._click.buttons** содержит коллекцию обработчиков onClick для кнопок панели. 'custom' — имя кнопки, заданное в [icons_edit](api/config/icons_edit.md) после части 'icon_'. -## Динамическое изменение элементов панели +## Динамическая смена элементов панелей -Можно динамически изменять кнопки на панелях редактирования и выбора в зависимости от определённых условий. +Кнопки панелей редактирования и выбора могут динамически изменяться в зависимости от условий. -Например, если у ваших событий есть булево свойство **important**, указывающее, что событие критично и не должно быть удалено, вы можете показывать или скрывать кнопку 'delete' на панели выбора соответствующим образом. Вот как это реализовать: +Например, у ваших событий есть пользовательское булево свойство **important**, которое указывает на то, что событие важно и не может быть удалено пользователем. +В зависимости от значения этого свойства вы можете скрыть/показать кнопку 'delete' в панели выбора. Чтобы реализовать такое поведение, используйте следующую технику: ~~~js scheduler.attachEvent("onClick", function(id){ - var event = scheduler.getEvent(id); + const event = scheduler.getEvent(id); if (event.important) scheduler.config.icons_select = ["icon_details"]; else @@ -140,4 +144,4 @@ scheduler.attachEvent("onClick", function(id){ return true; }); -~~~ +~~~ \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/data-export.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/data-export.md deleted file mode 100644 index d69959ff..00000000 --- a/i18n/ru/docusaurus-plugin-content-docs/current/guides/data-export.md +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: "Экспорт и импорт данных" -sidebar_label: "Экспорт и импорт данных" ---- - -# Экспорт и импорт данных - -- [Интеграция с Google Calendar](integrations/google-calendar/google-calendar-sync.md) -- [Экспорт в PDF](export/pdf.md) -- [Экспорт в PNG](export/png.md) -- [Экспорт в Excel и iCal](export/excel.md) -- [Сериализация данных в XML, JSON, iCal](export/serialization.md) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/data-formats.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/data-formats.md index e2412ad1..5a20529a 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/guides/data-formats.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/data-formats.md @@ -3,7 +3,7 @@ title: "Примеры форматов данных" sidebar_label: "Примеры форматов данных" --- -# Примеры форматов данных +# Примеры форматов данных В этой статье приведены примеры всех поддерживаемых форматов данных. @@ -29,18 +29,18 @@ sidebar_label: "Примеры форматов данных" Встреча - 11 апреля 2019 14:00 - 11 апреля 2019 17:00 + 11 апреля 2027 14:00 + 11 апреля 2027 17:00 Конференция - 15 апреля 2019 12:00 - 18 апреля 2019 19:00 + 15 апреля 2027 12:00 + 18 апреля 2027 19:00 Собеседование - 24 апреля 2019 09:00 - 24 апреля 2019 10:00 + 24 апреля 2027 09:00 + 24 апреля 2027 10:00 @@ -53,57 +53,57 @@ sidebar_label: "Примеры форматов данных" { "id":"1", "text":"Meeting", - "start_date":"2019-04-11 14:00", - "end_date":"2019-04-11 17:00" + "start_date":"2027-04-11 14:00", + "end_date":"2027-04-11 17:00" }, { "id":"2", "text":"Conference", - "start_date":"2019-04-15 12:00", - "end_date":"2019-04-18 19:00" + "start_date":"2027-04-15 12:00", + "end_date":"2027-04-18 19:00" }, { "id":"3", "text":"Interview", - "start_date":"2019-04-24 09:00", - "end_date":"2019-04-24 10:00" + "start_date":"2027-04-24 09:00", + "end_date":"2027-04-24 10:00" } ] ~~~ ## JSON с коллекциями {#json-with-collections} -Этот формат удобен, когда необходимо включить дополнительные коллекции данных. -Например, он полезен при загрузке секций Timeline и Units с сервера, как описано в [loading Timeline and Units sections from the server](guides/loading-data.md#loadingdatawithtimelineandunitssectionsfromtheserver): +Этот формат будет полезен, если вам нужно передать дополнительные наборы данных. +Например, он удобен, когда вам нужно [загрузить разделы Timeline и Units с сервера](guides/loading-data.md#collections): ~~~js { "data":[ { "id":"1", - "start_date":"2019-03-02 00:00:00", - "end_date":"2019-03-04 00:00:00", + "start_date":"2027-03-02 00:00:00", + "end_date":"2027-03-04 00:00:00", "text":"dblclick me!", "type":"1" }, { "id":"2", - "start_date":"2019-03-09 00:00:00", - "end_date":"2019-03-11 00:00:00", + "start_date":"2027-03-09 00:00:00", + "end_date":"2027-03-11 00:00:00", "text":"and me!", "type":"2" }, { "id":"3", - "start_date":"2019-03-16 00:00:00", - "end_date":"2019-03-18 00:00:00", + "start_date":"2027-03-16 00:00:00", + "end_date":"2027-03-18 00:00:00", "text":"and me too!", "type":"3" }, { "id":"4", - "start_date":"2019-03-02 08:00:00", - "end_date":"2019-03-02 14:10:00", + "start_date":"2027-03-02 08:00:00", + "end_date":"2027-03-02 14:10:00", "text":"Type 2 event", "type":"2" } @@ -124,18 +124,18 @@ sidebar_label: "Примеры форматов данных" - 04/11/2013 14:00 - 04/11/2013 17:00 + 04/11/2027 14:00 + 04/11/2027 17:00 - 04/15/2013 12:00 - 04/18/2013 19:00 + 04/15/2027 12:00 + 04/18/2027 19:00 - 04/24/2013 09:00 - 04/24/2013 10:00 + 04/24/2027 09:00 + 04/24/2027 10:00 ~~~ @@ -148,18 +148,18 @@ VERSION:2.0 PRODID:-//dhtmlXScheduler//NONSGML v2.2//EN DESCRIPTION: BEGIN:VEVENT -DTSTART:20130411T140000 -DTEND:20130411T170000 +DTSTART:20270411T140000 +DTEND:20270411T170000 SUMMARY:Meeting END:VEVENT BEGIN:VEVENT -DTSTART:20130415 -DTEND:20130418 +DTSTART:20270415 +DTEND:20270418 SUMMARY:Conference END:VEVENT BEGIN:VEVENT -DTSTART:20130424T090000 -DTEND:20130424T100000 +DTSTART:20270424T090000 +DTEND:20270424T100000 SUMMARY:Interview END:VEVENT END:VCALENDAR @@ -169,18 +169,19 @@ END:VCALENDAR Ниже приведён пример, где к базовому набору (показанному [выше](guides/data-formats.md)) добавлены два пользовательских свойства: -- **room** - номер комнаты, в которой будет проходить событие. -- **holder** - имя ответственного за событие. +- **room** - номер комнаты, в которой пройдет мероприятие. +- **holder** - имя лица, ответственного за мероприятие. -####JSON +#### JSON + ~~~js [ { "id":"1", "text":"Meeting", - "start_date":"2019-04-11 14:00", - "end_date":"2019-04-11 17:00" + "start_date":"2027-04-11 14:00", + "end_date":"2027-04-11 17:00" "room":327, "holder":"James" } @@ -198,21 +199,21 @@ scheduler.templates.event_text = function(start, end, event){ ~~~ -####XML +#### XML ~~~xml - 04/11/2013 14:00 - 04/11/2013 17:00 + 04/11/2027 14:00 + 04/11/2027 17:00 327 ~~~ -####iCal +#### iCal Обратите внимание, что на стороне клиента имена свойств (кроме DTSTART, DTEND и SUMMARY) будут преобразованы из верхнего регистра в нижний: ROOM станет room, HOLDER - holder. ~~~html @@ -221,11 +222,11 @@ VERSION:2.0 PRODID:-//dhtmlXScheduler//NONSGML v2.2//EN DESCRIPTION: BEGIN:VEVENT -DTSTART:20130411T140000 -DTEND:20130411T170000 +DTSTART:20270411T140000 +DTEND:20270411T170000 SUMMARY:Meeting ROOM:327 HOLDER:James END:VEVENT END:VCALENDAR -~~~ +~~~ \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/datastore-integration.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/datastore-integration.md deleted file mode 100644 index 44dfed16..00000000 --- a/i18n/ru/docusaurus-plugin-content-docs/current/guides/datastore-integration.md +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: "Интеграция с dhtmlxDataStore" -sidebar_label: "Интеграция с dhtmlxDataStore" ---- - -# Интеграция с dhtmlxDataStore - -В этой статье описывается, как синхронизировать [несколько планировщиков](guides/multiple-per-page.md) с помощью объекта [dhtmlXDataStore](https://docs.dhtmlx.com/datastore__index.html). Планировщики получают данные из этого общего хранилища, поэтому любое изменение события в одном планировщике автоматически обновляется в других. - -:::note -Обратите внимание: dhtmlxDataStore входит в пакет [dhtmlxSuite5](https://dhtmlx.com/docs/products/dhtmlxSuite5/) и не включён в dhtmlxScheduler по умолчанию. Однако, даже если у вас нет лицензии на dhtmlxSuite, вы всё равно можете бесплатно использовать dhtmlxDataStore с dhtmlxScheduler. Следуйте инструкциям ниже для настройки в вашем приложении. -::: - -- [Скачайте пакет dhtmlxDataStore](https://files.dhtmlx.com/30d/33230caa09f4b5030ea5bfe374ef6d57/dhtmlxDataStore.zip) -- Добавьте *dhtmlxcommon.js* и *datastore.js* после загрузки dhtmlxscheduler.js на вашей странице. Важно соблюдать именно такой порядок подключения: - -~~~js - - - -~~~ - -Типичный способ синхронизации планировщиков через DataStore выглядит так: - -~~~js -function init() { - var data = new dhtmlXDataStore({ - url:"data/data.json", - scheme:{ - $init:function(obj){ - if (typeof obj.start_date == "string"){ - obj.start_date = scheduler.templates.parse_date(obj.start_date); - obj.end_date = scheduler.templates.parse_date(obj.end_date); - } - } - } - }); - - scheduler1 = Scheduler.getSchedulerInstance(); - scheduler1.init('scheduler_here',new Date(2019,05,12),"week"); - scheduler1.sync(data, { copy:true }); - - - scheduler2 = Scheduler.getSchedulerInstance(); - scheduler2.init('scheduler_here_too',new Date(2019,05,12),"month"); - scheduler2.sync(data, { copy:true }); -} -~~~ - -Кратко о том, что происходит в приведённом выше коде: - -1. Сначала мы инициализируем dhtmlXDataStore обычным способом (подробнее см. разделы [Инициализация](https://docs.dhtmlx.com/datastore__initialization.html) и [Схема данных](https://docs.dhtmlx.com/datastore__data_scheme.html) в [документации dhtmlXDataStore](https://docs.dhtmlx.com/datastore__index.html)). -2. Затем создаём два планировщика. Это делается стандартно, за исключением того, что мы используем метод [sync](https://docs.dhtmlx.com/api__datastore_sync.html) для их подключения к DataStore. - -Метод [sync](https://docs.dhtmlx.com/api__datastore_sync.html) связывает планировщик с DataStore и принимает два параметра: - -+ **data** - (обязательный) экземпляр dhtmlXDataStore, который предоставляет данные для планировщика. -+ **(copy:true)** - (обязательный) указывает планировщику создать собственную копию данных DataStore. - -Второй параметр заслуживает особого внимания, так как он специфичен для dhtmlxScheduler и не описан в основной документации dhtmlXDataStore. - -Эта опция инструктирует DataStore создавать отдельную копию данных для каждого планировщика. Таким образом, в приведённом примере _DataStore_, _scheduler1_ и _scheduler2_ имеют свои собственные наборы данных. Но вам не нужно заботиться о ручной синхронизации этих наборов - всё происходит автоматически. Когда вы что-то изменяете в одном планировщике, обновление отправляется в DataStore, который затем обновляет набор данных другого планировщика. - -Может возникнуть вопрос, зачем нужен этот дополнительный шаг, если результат кажется одинаковым. - -Вот почему: помимо основных свойств события, каждое событие содержит множество внутренних свойств, назначаемых Scheduler во время выполнения. Эти внутренние свойства могут изменяться в зависимости от выбранного представления. Например, если одно и то же событие открыто в обоих планировщиках, но отображается в разных представлениях, значения внутренних свойств могут рассинхронизироваться. Это несоответствие может привести к некорректному отображению события. - -В таком случае использование параметра (**(copy:true)**) помогает избежать подобных проблем, обеспечивая корректную обработку данных. Кроме того, дублирование данных может быть полезно и в других ситуациях. - -Например, если у вас на странице два планировщика, отображающих одни и те же события, но в разных часовых поясах (например, Москва и Лондон), совместное использование одного набора данных будет неудобно. Наличие отдельных наборов данных для каждого планировщика позволяет корректно отображать события в обоих поясах. - - -[Integration with dhtmlXDataStore](https://docs.dhtmlx.com/scheduler/samples/10_integration/04_datastore.html) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/date-formats.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/date-formats.md index a7971c5c..58288137 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/guides/date-formats.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/date-formats.md @@ -5,46 +5,46 @@ sidebar_label: "Операции с датами" # Операции с датами -Библиотека содержит объект [date](api/other/date.md), который предоставляет различные методы форматирования дат. +Библиотека включает объект [date](api/other/date.md), который предоставляет набор методов форматирования дат. -В этой статье рассмотрены некоторые из самых важных и часто используемых методов. Полный список методов можно найти на [странице объекта date](api/other/date.md). +В этой статье мы рассмотрим особенно важные и часто используемые методы. Полный список методов можно найти на [странице объекта date](api/other/date.md). ## Преобразование объекта Date в строку Для преобразования объекта Date в строку используется метод [date_to_str](api/other/date.md): -*Этот метод возвращает функцию, которая форматирует объект Date в строку согласно заданному шаблону:* +*Метод возвращает функцию, которая преобразует объект Date в строку заданного формата:* ~~~js -var formatFunc = scheduler.date.date_to_str("%d/%m/%Y"); -var date = formatFunc(new Date(2013, 05, 29)); // -> "29/06/2013" +const formatFunc = scheduler.date.date_to_str("%d/%m/%Y"); +const date = formatFunc(new Date(2027, 05, 29)); // -> "29/06/2027" ~~~ - -[Displaying several weeks in Week view](https://docs.dhtmlx.com/scheduler/samples/11_scales/03_two_work_weeks.html) - +[Отображение нескольких недель в Week view](https://docs.dhtmlx.com/scheduler/samples/11_scales/03_two_work_weeks.html) ## Преобразование строки в объект Date Для преобразования строки в объект Date используется метод [str_to_date](api/other/date.md): + +*Метод возвращает функцию, которая преобразует строку заданного формата в Date объект:* -*Этот метод предоставляет функцию, которая разбирает строку, отформатированную определённым образом, и возвращает объект Date:* -Вы можете создать функцию для разбора даты следующим образом: +Вы можете сгенерировать функцию преобразования даты следующим образом: ~~~js -var formatFunc = scheduler.date.str_to_date("%d/%m/%Y"); -var date = formatFunc("29/06/2019"); // -> 29 June, 2019 00:00:00 +const formatFunc = scheduler.date.str_to_date("%d/%m/%Y"); +const date = formatFunc("29/06/2027"); // -> 29 June, 2027 00:00:00 ~~~ -## Преобразование во время UTC -Для преобразования локальной даты и времени в UTC используйте метод [convert_to_utc](api/other/date.md): +## Преобразование в UTC + +Чтобы преобразовать локальное время в UTC, используйте метод [convert_to_utc](api/other/date.md): ~~~js -//29 June, 2019 14:00 (local time) -> 29 June, 2019 12:00 (utc) -var time = scheduler.date.convert_to_utc(new Date(2019, 05, 29, 14, 00)); +//29 June, 2027 14:00 (local time) -> 29 June, 2027 12:00 (utc) +const time = scheduler.date.convert_to_utc(new Date(2027, 05, 29, 14, 00)); ~~~ ## Добавление (вычитание) временного интервала к (из) даты @@ -52,14 +52,13 @@ var time = scheduler.date.convert_to_utc(new Date(2019, 05, 29, 14, 00)); Для добавления или вычитания временного интервала из заданной даты можно воспользоваться методом [add](api/other/date.md): ~~~js -//добавляет 1 год к указанной дате: 29 June, 2019 -> 29 June, 2020 -var newDate = scheduler.date.add(new Date(2019, 05, 29), 1, 'year'); +//adds 1 year to the specified date: 29 June, 2027 -> 29 June, 2020 +const newDate = scheduler.date.add(new Date(2027, 05, 29), 1, 'year'); ~~~ -[Changing the Y-Axis step](https://docs.dhtmlx.com/scheduler/samples/02_customization/09_timestep.html) - +[Изменение шага оси Y](https://docs.dhtmlx.com/scheduler/samples/02_customization/09_timestep.html) -:::note -Полный список методов форматирования дат смотрите [здесь](api/other/date.md). -::: +:::note +Полный список методов форматирования даты см. [здесь](api/other/date.md). +::: \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/dhtmlx-components-integration.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/dhtmlx-components-integration.md deleted file mode 100644 index c1ca65a0..00000000 --- a/i18n/ru/docusaurus-plugin-content-docs/current/guides/dhtmlx-components-integration.md +++ /dev/null @@ -1,129 +0,0 @@ ---- -title: "Операции Drag-and-Drop" -sidebar_label: "Операции Drag-and-Drop" ---- - -# Операции Drag-and-Drop - -Библиотека включает расширение **outerdrag**, которое позволяет создавать новые события путем перетаскивания элементов из внешних компонентов DHTMLX или других планировщиков. - -## Перетаскивание из внешних компонентов {#draggingfromexternalcomponents} - -Когда элемент перетаскивается из внешнего источника в планировщик, планировщик автоматически открывает lightbox для создания нового события. - - -![external_dnd](/img/external_dnd.png) - - -[Integration with dhtmlxTree](https://docs.dhtmlx.com/scheduler/samples/10_integration/02_dhtmlxtree_outer_drag.html) - - -Вот как работает внешнее drag-and-drop с компонентом dhtmlxTree. - -Чтобы интегрировать планировщик с dhtmlxTree, выполните следующие шаги: - -1. Скачайте пакет dhtmlxTree и распакуйте его содержимое в корневую папку вашего приложения. -2. Добавьте необходимые файлы js и css на страницу: -~~~html - - -... -~~~ -3. Активируйте расширение outerdrag: -~~~js -scheduler.plugins({ - outerdrag: true -}); -~~~ -4. Инициализируйте компонент dhtmlxTree (инструкции здесь): -~~~js -var tree = new dhtmlXTreeObject("treebox", "100%", "100%", 0); -tree.setImagePath("../common/dhtmlxTree/imgs/csh_yellowbooks/"); -tree.loadXML("./data/tree.xml"); -~~~ -5. Включите drag-and-drop в компоненте dhtmlxTree (инструкции здесь): -~~~js -tree.enableDragAndDrop(true); -~~~ -6. Инициализируйте и настройте планировщик: -~~~js -... -scheduler.init('scheduler_here', new Date(2019, 5, 30), "timeline"); -~~~ -7. Добавьте обработчик события [onExternalDragIn](api/event/onexternaldragin.md), чтобы определить, как текст перетаскиваемого элемента будет присвоен событию: -~~~js -scheduler.attachEvent("onExternalDragIn", function(id, source, event){ - var label = tree.getItemText(tree._dragged[0].id); - scheduler.getEvent(id).text = label; - return true; -}); -~~~ - - -[Integration with dhtmlxTree](https://docs.dhtmlx.com/scheduler/samples/10_integration/02_dhtmlxtree_outer_drag.html) - - -После этой настройки создание новых событий с данными из дерева становится простым - просто перетащите нужный узел. - -## Перетаскивание между планировщиками {#draganddropbetweenschedulers} - -:::note -Эта функция доступна только для лицензий Commercial (с 6 октября 2021), Enterprise и Ultimate. -::: - -При отображении [нескольких планировщиков на странице](guides/multiple-per-page.md) можно включить drag-and-drop между ними, что позволяет перемещать события из одного планировщика в другой без лишних действий. - -Чтобы включить поддержку drag-and-drop между планировщиками, подключите расширение "**drag_between**": - -~~~js title="Включение поддержки drag-and-drop для нескольких планировщиков" - - - - -~~~ - -Пример можно найти в файле **"samples/20_multiple/06_drag_between_layout.html"**, входящем в [пакет Scheduler PRO](https://dhtmlx.com/docs/products/dhtmlxScheduler/). - -### Ограничение перетаскивания событий из/в планировщик -Чтобы запретить перетаскивание событий из планировщика, установите свойство [drag_out](api/config/drag_out.md) в *false*: - -~~~js -scheduler.config.drag_out = false; // запретить перетаскивание событий из этого планировщика /*!*/ -scheduler.init('scheduler_here',new Date(2019, 5,30),"week"); -scheduler.load("./data/units.xml"); - -scheduler2 = Scheduler.getSchedulerInstance(); -scheduler2.init('scheduler_here_2',new Date(2019, 5, 30),"week"); -~~~ - - -Чтобы запретить перетаскивание событий в планировщик, установите свойство [drag_in](api/config/drag_in.md) в *false*: - -~~~js -scheduler.init('scheduler_here',new Date(2019, 5, 30),"week"); -scheduler.load("./data/units.xml"); - -scheduler2.config.drag_in = false; // запретить перетаскивание событий в этот планировщик /*!*/ -scheduler2 = Scheduler.getSchedulerInstance(); -scheduler2.init('scheduler_here_2',new Date(2019, 5, 30),"week"); -~~~ - -Пример **"samples/20_multiple/06_drag_between_layout.html"** доступен в [пакете Scheduler PRO](https://dhtmlx.com/docs/products/dhtmlxScheduler/). - -### События перетаскивания - -- [onBeforeEventDragOut](api/event/onbeforeeventdragout.md) - вызывается перед тем, как событие будет перетащено из планировщика -- [onEventDragOut](api/event/oneventdragout.md) - вызывается, когда событие перетаскивается из планировщика -- [onBeforeEventDragIn](api/event/onbeforeeventdragin.md) - вызывается перед тем, как перетаскиваемое событие попадет в планировщик -- [onEventDragIn](api/event/oneventdragin.md) - вызывается, когда перетаскиваемое событие перемещается по планировщику -- [onEventDropOut](api/event/oneventdropout.md) - вызывается, когда перетаскиваемое событие сбрасывается за пределами области планировщика diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/dhxlayout-integration.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/dhxlayout-integration.md deleted file mode 100644 index e59f4939..00000000 --- a/i18n/ru/docusaurus-plugin-content-docs/current/guides/dhxlayout-integration.md +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: "Интеграция с dhtmlxLayout" -sidebar_label: "Интеграция с dhtmlxLayout" ---- - -# Интеграция с dhtmlxLayout - -Использование dhtmlxLayout - удобный способ организовать [несколько планировщиков](guides/multiple-per-page.md) на странице. Он предоставляет привлекательную рамку и помогает управлять взаимодействием с другими элементами страницы, плавно адаптируясь к изменениям размера страницы. - -:::note -Обратите внимание, что dhtmlxLayout не входит в библиотеку dhtmlxScheduler. Существуют две версии Layout в зависимости от используемой версии библиотеки dhtmlxSuite. -::: - -## dhtmlxSuite v5+ - -В этой версии dhtmlxLayout может использоваться как самостоятельный продукт или как часть библиотеки dhtmlxSuite. Для включения dhtmlxLayout v5.X в ваш проект требуется [покупка лицензии](https://dhtmlx.com/docs/products/dhtmlxSuite5/). - -**Чтобы добавить экземпляр dhtmlxScheduler в ячейку layout**, используйте метод [attachScheduler()](https://docs.dhtmlx.com/api__dhtmlxcell_attachscheduler.html). - -**Обратите внимание**, что при добавлении планировщика в ячейку он автоматически инициализируется. Поэтому настройте планировщик перед вставкой его в layout. - -~~~js -function init() { - var dhxLayout = new dhtmlXLayoutObject(document.body, "2U"); - - sched1 = Scheduler.getSchedulerInstance(); - sched1.config.multi_day = true; - dhxLayout.cells("a").attachScheduler(new Date(2019,05,30),"week",null,sched1); - sched1.load("/data/units") - - sched2 = Scheduler.getSchedulerInstance(); - dhxLayout.cells("b").attachScheduler(new Date(2019,05,30),"month",null,sched2); - sched2.load("/data/units") -} -~~~ - - -[Integration with dhtmlxLayout (dhx_terrace skin, Suite v5.1)](https://docs.dhtmlx.com/scheduler/samples/10_integration/05_dhtmlxlayout_terrace.html) - - -## dhtmlxSuite v6+ - -Начиная с dhtmlxSuite 6.0, dhtmlxLayout доступен только как часть полной библиотеки Suite. Для его использования необходимо приобрести лицензию на [библиотеку Suite 6.X](https://dhtmlx.com/docs/products/dhtmlxSuite/#licensing). - -Начиная с [версии 5.3](guides/what-s-new.md#53), dhtmlxScheduler реализует общий интерфейс View, совместимый с dhtmlxSuite v6+, и может быть [подключён напрямую к любой ячейке](https://docs.dhtmlx.com/suite/layout/api/cell/layout_cell_attach_method/): - -~~~js -// создаём и настраиваем экземпляр планировщика -scheduler.config.header = [ - "day", - "week", - "month", - "date", - "prev", - "today", - "next" -]; -scheduler.config.multi_day = true; - -// после подключения планировщика будет вызван onSchedulerReady -scheduler.attachEvent("onSchedulerReady", function () { - requestAnimationFrame(function(){ - // здесь можно установить начальный вид, дату и загрузить данные - scheduler.setCurrentView(new Date(2017,5,3), "week"); - scheduler.load("../common/events.json"); - }); - -}); - -const layout = new dhx.Layout("layout", { - rows: [{ - id: "scheduler-cell", - header: "Appointment Scheduler", - html:"
" - }] -}); -layout.cell("scheduler-cell").attach(scheduler); -~~~ - -### Обратите внимание - -- Учтите, что `dhtmlxSuite Layout` работает асинхронно, поэтому планировщик не будет готов сразу после вызова `.attach`. -- Необходимо отслеживать событие "onSchedulerReady" для выполнения любых задач после инициализации. -- В настоящее время **нет возможности указать разметку планировщика при использовании с dhtmlxSuite v6+**. Это означает, что элементы управления навигационной панели должны настраиваться через параметры [header](api/config/header.md). diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/drag-between.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/drag-between.md new file mode 100644 index 00000000..8b87a8dd --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/drag-between.md @@ -0,0 +1,67 @@ +--- +title: "Перетаскивание между расписаниями" +sidebar_label: "Перетаскивание между расписаниями" +--- + +# Перетаскивание между расписаниями + +:::info +Эта функциональность доступна только для лицензий Commercial (с 6 октября 2021 года), Enterprise и Ultimate. +::: + +Если на странице отображаются [несколько расписаний](guides/multiple-per-page.md), можно включить операции перетаскивания между ними, чтобы пользователи могли перетаскивать события из одного расписания в другое и обратно. + +Чтобы включить поддержку перетаскивания между расписаниями, достаточно на странице подключить расширение "**drag_between**": + +[Enabling drag-and-drop support for several schedulers](Enabling drag-and-drop support for several schedulers) +~~~html + + + + +~~~ + +Sample **"samples/20_multiple/06_drag_between_layout.html"** provided in the [Scheduler PRO package](https://dhtmlx.com/docs/products/dhtmlxScheduler/). + +### Запрет перетаскивания событий к/из одного из расписаний +Чтобы запретить перетаскивание событий из расписания, установите свойство [drag_out](api/config/drag_out.md) в *false*: + +~~~js +scheduler.config.drag_out = false;//restrict dragging events from this scheduler /*!*/ +scheduler.init('scheduler_here',new Date(2027, 5,30),"week"); +scheduler.load("./data/units.xml"); + +scheduler2 = Scheduler.getSchedulerInstance(); +scheduler2.init('scheduler_here_2',new Date(2027, 5, 30),"week"); +~~~ + +Чтобы запретить перетаскивание событий в расписание, установите свойство [drag_in](api/config/drag_in.md) в *false*: + +~~~js +scheduler.init('scheduler_here',new Date(2027, 5, 30),"week"); +scheduler.load("./data/units.xml"); + + +scheduler2.config.drag_in = false;//restrict dragging events to this scheduler /*!*/ +scheduler2 = Scheduler.getSchedulerInstance(); +scheduler2.init('scheduler_here_2',new Date(2027, 5, 30),"week"); +~~~ + +Sample **"samples/20_multiple/06_drag_between_layout.html"** provided in the [Scheduler PRO package](https://dhtmlx.com/docs/products/dhtmlxScheduler/). + +### Перетаскивание событий +- [onBeforeEventDragOut] - срабатывает до того, как перетащённое событие будет перемещено из расписания +- [onEventDragOut] - срабатывает, когда перетащённое событие перемещается из расписания +- [onBeforeEventDragIn] - срабатывает до того, как перетащённое событие будет перемещено над расписанием +- [onEventDragIn] - срабатывает, когда перетащённое событие перемещается над расписанием +- [onEventDropOut] - срабатывает, когда перетащённое событие сбрасывается за пределы области расписания \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/event-object-operations.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/event-object-operations.md index 7d0b9d81..10651760 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/guides/event-object-operations.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/event-object-operations.md @@ -11,88 +11,91 @@ sidebar_label: "Операции с объектом события" ~~~js scheduler.parse([ - {id:1, start_date:"2019-05-13 6:00", end_date:"2019-05-13 8:00", text:"Event 1"}, - {id:2, start_date:"2019-06-09 6:00", end_date:"2019-06-09 8:00", text:"Event 2"} + {id:1, start_date:"2027-05-13 6:00", end_date:"2027-05-13 8:00", text:"Event 1"}, + {id:2, start_date:"2027-06-09 6:00", end_date:"2027-06-09 8:00", text:"Event 2"} ]); ... -var eventObj = scheduler.getEvent(1); -//->{id:1, start_date:"2019-05-13 6:00", end_date:"2019-05-13 8:00", text:"Event 1"} -~~~ +const eventObj = scheduler.getEvent(1); +//->{id:1, start_date:"2027-05-13 6:00", end_date:"2027-05-13 8:00", text:"Event 1"} +~~~ ## Получение событий за указанный период времени -Чтобы получить список событий, происходящих в определённый промежуток времени, используйте метод [getEvents](api/method/getevents.md): +Чтобы получить коллекцию событий, происходящих в заданный период, используйте метод [getEvents](api/method/getevents.md): ~~~js -var evs = scheduler.getEvents(new Date(2019,1,10),new Date(2019,2,10)); -//где evs — массив объектов событий -~~~ +const evs = scheduler.getEvents(new Date(2027,1,10),new Date(2027,2,10)); +//где evs - массив объектов-событий +~~~ ## Получение всех событий в Scheduler -Чтобы получить все события, загруженные в Scheduler, вызовите метод [getEvents](api/method/getevents.md) без параметров следующим образом: +Чтобы получить все загруженные в планировщик события, вызовите метод [getEvents](api/method/getevents.md) без параметров, как показано: ~~~js -var evs = scheduler.getEvents(); +const evs = scheduler.getEvents(); // возвращает все события в виде массива объектов -~~~ +~~~ ## Получение ближайшего события, начиная с текущей даты ~~~js -var evs = scheduler.getEvents(new Date(), new Date(9999,1,1)); -//evs — список всех предстоящих событий +const evs = scheduler.getEvents(new Date(), new Date(9999,1,1)); +//evs - список всех предстоящих событий evs.sort(function(a,b){ return (a.start_date > b.start_date ? 1 : -1); }); -//evs[0] — ближайшее предстоящее событие -~~~ +//evs[0] - ближайшее предстоящее событие +~~~ -## Получение id события +## Получение идентификатора события -Чтобы найти id события по значению одного из его свойств, можно воспользоваться следующим подходом: +Чтобы получить идентификатор события по значению одного из свойств события, используйте следующую технику: -~~~js title="Получение id события по тексту события" +Пример: получение идентификатора события по тексту события. +~~~js scheduler.parse([ - {id:1, start_date:"2019-05-13 6:00", end_date:"2019-05-13 8:00", text:"Event 1"}, - {id:2, start_date:"2019-06-09 6:00", end_date:"2019-06-09 8:00", text:"Event 2"} + {id:1, start_date:"2027-05-13 6:00", end_date:"2027-05-13 8:00", text:"Event 1"}, + {id:2, start_date:"2027-06-09 6:00", end_date:"2027-06-09 8:00", text:"Event 2"} ]); ... -var evs = scheduler.getEvents(); //получаем все события из Scheduler -for(var i="0;i 2 + const eventId = evs[i].id;// -> 2 }; ~~~ -Если приблизительное время события известно, рекомендуется ограничить диапазон при получении событий для повышения производительности: +Если вы знаете примерное время появления нужного события, лучше ограничить возвращаемую коллекцию событий, чтобы увеличить скорость работы приложения: ~~~js -var evs = scheduler.getEvents(new Date(2019,05,01),new Date(2019,05,10)); -for(var i="0;i 2 + const eventId = evs[i].id;// -> 2 }; ~~~ -## Изменение id события -Чтобы изменить id события, используйте метод [changeEventId](api/method/changeeventid.md) следующим образом: +## Изменение идентификатора события + +Чтобы изменить текущий идентификатор события, можно использовать метод [changeEventId](api/method/changeeventid.md) как показано: ~~~js -scheduler.changeEventId("ev15", "ev25"); //меняет id события "ev15" -> "ev25" +scheduler.changeEventId("ev15", "ev25"); //изменит идентификатор события "ev15" на "ev25" ~~~ -## Использование подписи опции lightbox в качестве текста события -По умолчанию текст события Scheduler задаётся из соответствующего поля text в lightbox. +## Установка метки опции lightbox как текста события + +По умолчанию текст события Scheduler устанавливается через сопоставляемое текстовое поле из lightbox. ![default_event_text](/img/default_event_text.png) -Также можно переопределить это поведение и использовать подпись выбранной опции в комбобоксе как текст события. +Также возможно переопределить поведение по умолчанию и использовать метку выбранной в комбобоксе опции как текст события. ![option_event_text](/img/option_event_text.png) -Текст события определяется одним из следующих шаблонов: [event_text](api/template/event_text.md) или [event_bar_text](api/template/event_bar_text.md), в зависимости от типа отображения. Чтобы изменить способ добавления текста к событию, переопределите соответствующий шаблон. +Текст события задается одной из следующих шаблонов: [event_text](api/template/event_text.md) или [event_bar_text](api/template/event_bar_text.md), в зависимости от типа представления. Таким образом, чтобы изменить схему добавления текста в событие, следует переопределить соответствующий шаблон. ~~~js scheduler.config.lightbox.sections = [ @@ -107,9 +110,9 @@ scheduler.config.lightbox.sections = [ ]; scheduler.templates.event_text = scheduler.templates.event_bar_text = function(start, end, event){ - var options = scheduler.serverList("options"); + const options = scheduler.serverList("options"); - for(var i = 0; i < options.length; i++){ + for(let i = 0; i < options.length; i++){ if(options[i].key == event.type){ return options[i].label; } @@ -119,10 +122,11 @@ scheduler.templates.event_text = scheduler.templates.event_bar_text = function(s }; ~~~ -Несколько моментов, на которые стоит обратить внимание в приведённом выше коде: -- Метод [serverList](api/method/serverlist.md) предоставляет опции для комбобокса и позволяет получить их внутри шаблона. Также его можно использовать для загрузки опций вместе с другими данными через коннектор и для их динамического обновления. +Существует несколько заметок по приведенному выше коду: + +- Метод [serverList](api/method/serverlist.md) используется для предоставления опций для выпадающего списка и их извлечения внутри шаблона. Вы можете загружать опции вместе с данными событий через JSON-коллекции (см. [Data formats](guides/data-formats.md#json-with-collections)) и обновлять их позже с помощью [updateCollection](api/method/updatecollection.md). -- Шаблон выполняет линейный поиск выбранного элемента. При большом количестве событий или опций это может повлиять на производительность, так как шаблоны могут вызываться часто. Для повышения эффективности рекомендуется создавать хеш для быстрого поиска вместо перебора массива каждый раз. +- Внутри шаблона выполняется линейный поиск по выбранному элементу. В некоторых случаях, когда у вас много событий/опций, это может заметно повлиять на производительность, так как эти шаблоны могут вызываться довольно часто. Чтобы решить эту проблему, можно создать хеш для быстрого поиска вместо постоянной перебиракости массива. -- На клиентской стороне должен быть доступен полный список опций для корректного отображения. В противном случае опции нужно загружать вручную, например, при использовании поиска с автозаполнением, который динамически подгружает опции. +- На клиентской стороне должен быть полный список опций для их отображения. В противном случае вам придется загружать опции вручную, например если вы используете функциональность автодополнения, которая подгружает необходимые опции динамически. \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/extensions-list.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/extensions-list.md index b94f7f0b..f81d29b6 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/guides/extensions-list.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/extensions-list.md @@ -5,19 +5,19 @@ sidebar_label: "Полный список расширений" # Полный список расширений -dhtmlxScheduler предлагает различные расширения, которые расширяют стандартную функциональность. +dhtmlxScheduler включает ряд расширений, которые добавляют дополнительную функциональность к стандартному поведению. -Чтобы включить расширение, активируйте его с помощью метода [scheduler.plugins](api/method/plugins.md). +Чтобы использовать расширение, активируйте его с помощью метода [`plugins()`](api/method/plugins.md). :::info -Начиная с версии 6.0, файлы кода расширений были удалены из папки **ext** и объединены в файл *dhtmlxscheduler.js*. +В версии v6.0 файлы кода расширений были удалены из папки **ext** исходного кода планировщика и включены в файл *dhtmlxscheduler.js*. -Если вы используете dhtmlxScheduler 5.3 или более ранней версии, пожалуйста, обратитесь к [статье по миграции](migration.md#53---60). +Если вы используете dhtmlxScheduler 5.3 и более ранние версии, ознакомьтесь со статьей миграции migration.md#53---60. ::: -## Active Links {#activelinks} +## Активные ссылки -Отображает номера дней в представлениях "Месяц" и "Неделя" в виде кликабельных ссылок, которые открывают соответствующий день в выбранном представлении. +Представляет числа дней в режимах просмотра Месяц и Неделя как кликабельные ссылки, которые открывают соответствующий день в указанном виде просмотра. ~~~js scheduler.plugins({ @@ -25,18 +25,15 @@ scheduler.plugins({ }); ~~~ -#### Связанные материалы +#### Связанные ресурсы -Статья: [Месячный вид](views/month.md#presentingdaysnumbersasclickablelinks) +Статья: [Вид месяца](views/month.md) +API: [active_link_view](api/config/active_link_view.md) -API: [active_link_view](api/config/active_link_view.md) +Пример: [Дни месяца в виде ссылок](https://docs.dhtmlx.com/scheduler/samples/03_extensions/06_links_plugin.html) - -[Month days as links](https://docs.dhtmlx.com/scheduler/samples/03_extensions/06_links_plugin.html) - - -## Agenda View {#agenda-view} +## Agenda View Это кодовый файл для представления Agenda. @@ -46,17 +43,15 @@ scheduler.plugins({ }); ~~~ -#### Связанные материалы - -Статья: [Представление Agenda](views/agenda.md) - +#### Связанные ресурсы -[Agenda view](https://docs.dhtmlx.com/scheduler/samples/03_extensions/03_agenda_view.html) +Статья: [Вид Agenda](views/agenda.md) +Пример: [Вид Agenda](https://docs.dhtmlx.com/scheduler/samples/03_extensions/03_agenda_view.html) -## All Timed {#all-timed} +## All Timed -Отображает многодневные события в том же стиле, что и однодневные события. +Показывает многодневные события обычным способом (однодневные события отображаются аналогично). ~~~js scheduler.plugins({ @@ -64,17 +59,15 @@ scheduler.plugins({ }); ~~~ -#### Связанные материалы +#### Связанные ресурсы API: [all_timed](api/config/all_timed.md) +Пример: [Отображение многодневных событий обычным образом](https://docs.dhtmlx.com/scheduler/samples/03_extensions/26_multi_day_visible.html) -[Displaying multi-day events in the regular way](https://docs.dhtmlx.com/scheduler/samples/03_extensions/26_multi_day_visible.html) +## Collision - -## Collision {#collision} - -Обрабатывает количество событий, происходящих в один и тот же временной интервал. +Управляет количеством событий в временном слоте. ~~~js scheduler.plugins({ @@ -82,18 +75,15 @@ scheduler.plugins({ }); ~~~ +#### Связанные ресурсы -#### Связанные материалы - -Статья: [Предотвращение двойных событий в одном временном слоте](guides/collisions.md) - +Статья: [Предотвращение двойных событий в временном слоте](guides/collisions.md) -[Controlling the number of events in a time slot](https://docs.dhtmlx.com/scheduler/samples/03_extensions/15_collision.html) +Пример: [Контроль количества событий в временном слоте](https://docs.dhtmlx.com/scheduler/samples/03_extensions/15_collision.html) +## Авторазмер контейнера -## Container Autoresize {#containerautoresize} - -Автоматически изменяет размер контейнера планировщика в соответствии с его содержимым. +Включает автоматическое изменение размера контейнера планировщика (размер подстраивается под содержимое). ~~~js scheduler.plugins({ @@ -101,20 +91,17 @@ scheduler.plugins({ }); ~~~ -#### Связанные материалы - -Статья: [dhtmlxScheduler на чистом JS/HTML](guides/initialization.md#containerautoresizing) +#### Связанные ресурсы +Статья: [dhtmlxScheduler в Plain JS/HTML](guides/initialization.md#scheduler-autoresizing) API: [container_autoresize](api/config/container_autoresize.md) +Пример: [Автоизменение размера контейнера планировщика](https://docs.dhtmlx.com/scheduler/samples/03_extensions/28_container_autoresize.html) -[Autoresizing the scheduler container](https://docs.dhtmlx.com/scheduler/samples/03_extensions/28_container_autoresize.html) - - -## Cookie {#cookie} +## Куки -Сохраняет текущее состояние планировщика (режим и дату) с помощью cookies. +Сохраняет текущее состояние планировщика (режим и дата) в куки. ~~~js scheduler.plugins({ @@ -122,18 +109,17 @@ scheduler.plugins({ }); ~~~ -#### Связанные материалы +#### Связанные ресурсы -[Work with cookies](https://docs.dhtmlx.com/scheduler/samples/03_extensions/08_cookies_plugin.html) +Пример: [Работа с куками](https://docs.dhtmlx.com/scheduler/samples/03_extensions/08_cookies_plugin.html) +## Daytimeline -## Daytimeline {#daytimeline} - -:::info -Это расширение доступно только в PRO-версии +:::note +Это расширение доступно только в версии PRO ::: -Обеспечивает режим "Days" для представления Timeline. +Файл кода для режима "Days" в виде Timeline. ~~~js scheduler.plugins({ @@ -141,22 +127,20 @@ scheduler.plugins({ }); ~~~ +#### Связанные ресурсы -#### Связанные материалы - -Статья: [Вид 'Timeline'](views/timeline.md) - +Статья: [Timeline View](views/timeline.md) -[Days as Timeline rows](https://docs.dhtmlx.com/scheduler/samples/06_timeline/14_days_as_sections.html) +Пример: [Дни как строки Timeline](https://docs.dhtmlx.com/scheduler/samples/06_timeline/14_days_as_sections.html) -## Drag-n-Drop между планировщиками {#drag-n-drop-between-schedulers} +## Перемещение между планировщиками (Drag-n-Drop между Schedulers) :::info -Это расширение доступно только в Scheduler PRO (Commercial (с 6 октября 2021), Enterprise и Ultimate лицензиях). +Это расширение доступно только в версии Scheduler PRO (Коммерческая версия с 6 октября 2021 года), лицензии Enterprise и Ultimate. ::: -Позволяет перетаскивать события между несколькими планировщиками, обеспечивая перенос событий из одного планировщика в другой. +Позволяет выполнять операции перетаскивания между несколькими планировщиками, что делает возможным перетаскивать события из одного планировщика в другой и обратно. ~~~js scheduler.plugins({ @@ -164,15 +148,13 @@ scheduler.plugins({ }); ~~~ -#### Связанные материалы +#### Связанные ресурсы -Статья: [Drag-and-drop between Schedulers](guides/drag-between.md) +Статья: [Drag-and-drop между планировщиками](guides/drag-between.md) +## Редакторы -## Editors {#editors} - -Включает код для элементов управления [Контролы Lightbox](guides/lightbox-editors.md), [combo](guides/lightbox-editors.md), -[checkbox](guides/lightbox-editors.md), используемых в lightbox. +Файл кода для контролов [radio](guides/radio.md), [combo](guides/combo.md), [checkbox](guides/checkbox.md) лайтбокса. ~~~js scheduler.plugins({ @@ -180,18 +162,15 @@ scheduler.plugins({ }); ~~~ +#### Связанные ресурсы -#### Связанные материалы - -Статья: [Контролы Lightbox](guides/lightbox-editors.md) - +Статья: [Редакторы лайтбокса](guides/lightbox-editors.md) -[Radio button in the lightbox](https://docs.dhtmlx.com/scheduler/samples/02_customization/14_radio_buttons_section.html) +Пример: [Переключатель-radio в лайтбоксе](https://docs.dhtmlx.com/scheduler/samples/02_customization/14_radio_buttons_section.html) +## Expand -## Expand {#expand} - -Добавляет иконку "развернуть" в правом верхнем углу планировщика. При нажатии переключает планировщик между исходным размером и полноэкранным режимом. +Добавляет значок "expand" в правый угол планировщика. По клику на этот значок размер планировщика изменяется с исходного на «полный экран» и обратно. ~~~js scheduler.plugins({ @@ -199,21 +178,17 @@ scheduler.plugins({ }); ~~~ +#### Связанные ресурсы -#### Связанные материалы - -API: [expand](api/method/expand.md), [collapse](api/method/collapse.md) - +API: [`expand()`](api/method/expand.md), [`collapse()`](api/method/collapse.md) События: [onBeforeExpand](api/event/onbeforeexpand.md), [onBeforeCollapse](api/event/onbeforecollapse.md), [onExpand](api/event/onexpand.md), [onCollapse](api/event/oncollapse.md) - - -[Full-screen view](https://docs.dhtmlx.com/scheduler/samples/03_extensions/05_expand_plugin.html) +Пример: [Полноэкранный режим](https://docs.dhtmlx.com/scheduler/samples/03_extensions/05_expand_plugin.html) -## Export service {#export-service} +## Сервис экспорта -Включает онлайн-сервис экспорта. +Предоставляет возможность включить онлайн-сервис экспорта. ~~~js scheduler.plugins({ @@ -221,21 +196,19 @@ scheduler.plugins({ }); ~~~ -#### Связанные материалы - -Статья: [Экспорт в PDF](export/pdf.md) , [Экспорт в PNG](export/png.md) - +#### Связанные ресурсы -[Export to PDF/PNG](https://docs.dhtmlx.com/scheduler/samples/04_export/06_online_export.html) +Статья: [Export to PDF](export/pdf.md), [Export to PNG](export/png.md) +Пример: [Экспорт в PDF/PNG](https://docs.dhtmlx.com/scheduler/samples/04_export/06_online_export.html) -## Grid View {#gridview} +## Грид-вид :::info -Это расширение доступно только в PRO-версии +Это расширение доступно только в PRO версии ::: -Кодовый файл для представления Грид. +Файл кода для грида вида. ~~~js scheduler.plugins({ @@ -243,18 +216,15 @@ scheduler.plugins({ }); ~~~ +#### Связанные ресурсы -#### Связанные материалы +Статья: [Грид-вид](views/grid.md) -Статья: [Грид View](views/grid.md) +Пример: [Грид-вид](https://docs.dhtmlx.com/scheduler/samples/03_extensions/27_grid_view.html) +## HTML-шаблоны -[Grid view](https://docs.dhtmlx.com/scheduler/samples/03_extensions/27_grid_view.html) - - -## HTML Templates {#html-templates} - -Позволяет определять шаблоны с использованием HTML-кода. +Позволяет определять шаблоны как HTML-код. ~~~js scheduler.plugins({ @@ -262,17 +232,16 @@ scheduler.plugins({ }); ~~~ -#### Связанные материалы - -Статья: [Шаблоны](guides/templates.md) +#### Связанные ресурсы +Статья: [Templates](guides/templates.md#specifying-templates-with-code) -[Specifying templates with HTML](https://docs.dhtmlx.com/scheduler/samples/03_extensions/09_html_templates_plugin.html) +Пример: [Указание шаблонов с HTML](https://docs.dhtmlx.com/scheduler/samples/03_extensions/09_html_templates_plugin.html) -## Keyboard Navigation {#keyboard-navigation} +## Клавиатурная навигация -Включает навигацию с помощью клавиатуры. +Включает клавиатурную навигацию. ~~~js scheduler.plugins({ @@ -280,20 +249,17 @@ scheduler.plugins({ }); ~~~ -#### Связанные материалы +#### Связанные ресурсы -Статья: [Навигация с помощью клавиатуры](guides/keyboard-navigation.md) +Статья: [Клавиатурная навигация](guides/keyboard-navigation.md) +Пример: [Клавиатурная навигация и WAI-ARIA - Flat Skin](https://docs.dhtmlx.com/scheduler/samples/13_accessibility/01_regular_skin_all_views.html) -[Keyboard Navigation and WAI-ARIA - Flat Skin](https://docs.dhtmlx.com/scheduler/samples/13_accessibility/01_regular_skin_all_views.html) +Пример: [Клавиатурная навигация в планировщике](https://docs.dhtmlx.com/scheduler/samples/03_extensions/07_navigation_plugin.html) +## Устаревшее -[Keyboard navigation in the scheduler](https://docs.dhtmlx.com/scheduler/samples/03_extensions/07_navigation_plugin.html) - - -## Legacy {#legacy} - -Активирует поддержку устаревшего API. +Включает устаревший API. ~~~js scheduler.plugins({ @@ -301,14 +267,13 @@ scheduler.plugins({ }); ~~~ -#### Связанные материалы +#### Связанные ресурсы Статья: [Migration From Older Versions](migration.md) +## Ограничение -## Limit {#limit} - -Предоставляет возможность блокировать и выделять определённые даты. +Обеспечивает функциональность блокирования и выделения дат. ~~~js scheduler.plugins({ @@ -316,17 +281,16 @@ scheduler.plugins({ }); ~~~ -#### Связанные материалы +#### Связанные ресурсы -Статья: [Блокировка и выделение дат](guides/limits.md) +Статья: [Blocking and Marking Dates](guides/limits.md) +Пример: [Ограничение дат для создания событий](https://docs.dhtmlx.com/scheduler/samples/03_extensions/16_limitation.html) -[Limiting dates for creating events](https://docs.dhtmlx.com/scheduler/samples/03_extensions/16_limitation.html) +## Вид карты -## Map View {#mapview} - -Кодовый файл для представления Map. +Файл кода вида карты. ~~~js scheduler.plugins({ @@ -334,17 +298,16 @@ scheduler.plugins({ }); ~~~ -#### Связанные материалы +#### Связанные ресурсы Статья: [Map View](views/map.md) - -[Map view](https://docs.dhtmlx.com/scheduler/samples/03_extensions/19_map_view.html) +Пример: [Вид карты](https://docs.dhtmlx.com/scheduler/samples/03_extensions/19_map_view.html) -## Мини-календарь (Date Picker) {#minicalendardatepicker} +## Мини-календарь (Date Picker) -Плагин, добавляющий мини-календарь. +Плагин для мини-календаря. ~~~js scheduler.plugins({ @@ -352,21 +315,20 @@ scheduler.plugins({ }); ~~~ -#### Связанные материалы - -Статья: [Мини-календарь (Date Picker)](guides/minicalendar.md), [Время и дата](guides/time.md#mini-calendar-in-the-lightbox) +#### Связанные ресурсы +Статья: [Мини-календарь (Date Picker)](guides/minicalendar.md), [Time and Date](guides/time.md#mini-calendar-in-the-lightbox) -[Mini calendar in the scheduler header](https://docs.dhtmlx.com/scheduler/samples/05_calendar/01_select.html) +Пример: [Мини-календарь в заголовке планировщика](https://docs.dhtmlx.com/scheduler/samples/05_calendar/01_select.html) -## Multisection {#multisection} +## Мультирезделение :::info -Это расширение доступно только в PRO-версии +Это расширение доступно только в PRO версии ::: -Позволяет назначать события нескольким секциям в Timeline или нескольким юнитам в Units. +Позволяет назначать события нескольким секциям в Timeline-виде или нескольким единицам в виде Units. ~~~js scheduler.plugins({ @@ -374,20 +336,18 @@ scheduler.plugins({ }); ~~~ -#### Связанные материалы - -Статья: [Вид 'Timeline'](views/timeline.md), [Units View](views/units.md#assigningeventstoseveralunits) +#### Связанные ресурсы +Статья: [Timeline View](views/timeline.md), [Units View](views/units.md) API: [multisection](api/config/multisection.md) - -[Multisection events in Timeline and Units view](https://docs.dhtmlx.com/scheduler/samples/12_multisection_events/01_multisection_events.html) +Пример: [Мультирезделение событий в Timeline и Units view](https://docs.dhtmlx.com/scheduler/samples/12_multisection_events/01_multisection_events.html) -## Multiselect {#multiselect} +## Множественный выбор -Добавляет поддержку элемента [multiselect](guides/lightbox-editors.md) в lightbox. +Плагин для управления [множественным выбором](guides/multiselect.md) элементов в лайтбоксе. ~~~js scheduler.plugins({ @@ -395,17 +355,16 @@ scheduler.plugins({ }); ~~~ -#### Связанные материалы +#### Связанные ресурсы -Статья: [Контролы Lightbox](guides/lightbox-editors.md) +Статья: [Редакторы лайтбокса](guides/lightbox-editors.md) +Пример: [Управление множественным выбором в лайтбоксе](https://docs.dhtmlx.com/scheduler/samples/03_extensions/21_multiselect_options.html) -[Multiselect control in the lightbox](https://docs.dhtmlx.com/scheduler/samples/03_extensions/21_multiselect_options.html) +## Несколько источников -## Multisource {#multisource} - -Позволяет загружать данные из нескольких источников. +Предоставляет функциональность загрузки данных из нескольких источников. ~~~js scheduler.plugins({ @@ -413,17 +372,16 @@ scheduler.plugins({ }); ~~~ -#### Связанные материалы - -Статья: [Загрузка данных](guides/loading-data.md#loadingdatafrommultiplesources) +#### Связанные ресурсы +Статья: [Loading Data](guides/loading-data.md#loading-data-from-multiple-sources) -[Loading data from multiple sources](https://docs.dhtmlx.com/scheduler/samples/03_extensions/13_multisource.html) +Пример: [Загрузка данных из нескольких источников](https://docs.dhtmlx.com/scheduler/samples/03_extensions/13_multisource.html) -## Outerdrag {#outerdrag} +## Внешнее перетаскивание -Позволяет перетаскивать события из внешних компонентов DHTMLX, например, dhtmlxTree. +Разрешает перетаскивание событий из внешних компонентов DHTMLX, например dhtmlxTree. ~~~js scheduler.plugins({ @@ -431,27 +389,25 @@ scheduler.plugins({ }); ~~~ +#### Связанные ресурсы -#### Связанные материалы - -Статья: [Операции Drag-and-Drop](guides/drag-between.md) - +Статья: [Drag-and-Drop Operations](guides/drag-between.md) -[Integration with dhtmlxTree](https://docs.dhtmlx.com/scheduler/samples/10_integration/02_dhtmlxtree_outer_drag.html) +Пример: [Интеграция с dhtmlxTree](https://docs.dhtmlx.com/scheduler/samples/10_integration/02_dhtmlxtree_outer_drag.html) -## PDF {#pdf} +## PDF -Поддерживает экспорт в документы PDF. +Обеспечивает экспорт в PDF-документ. -- [Экспорт в PDF (версия 4.0)](export/pdf-legacy.md) +- [Export to PDF (version 4.0)](export/pdf-legacy.md) -- [Экспорт в PDF (версия 4.1+)](export/pdf.md) +- [Export to PDF (version 4.1+)](export/pdf.md) -## Quick Info {#quickinfo} +## Быстрая информация -Отображает всплывающее окно с деталями события. +Предоставляет всплывающее окно с деталями события. ~~~js scheduler.plugins({ @@ -459,18 +415,16 @@ scheduler.plugins({ }); ~~~ +#### Связанные ресурсы -#### Связанные материалы +Статья: [Mobile Responsive Scheduler](guides/touch-support.md) -Статья: [Мобильная адаптивность Scheduler](guides/touch-support.md) +Пример: [Touch-oriented scheduler](https://docs.dhtmlx.com/scheduler/samples/03_extensions/29_quick_info.html) -[Touch-oriented scheduler](https://docs.dhtmlx.com/scheduler/samples/03_extensions/29_quick_info.html) +## Только для чтения - -## Readonly {#readonly} - -Включает режим только для чтения для lightbox и некоторых событий. +Обеспечивает режим только для чтения для лайтбокса и отдельных событий. ~~~js scheduler.plugins({ @@ -478,18 +432,16 @@ scheduler.plugins({ }); ~~~ +#### Связанные ресурсы -#### Связанные материалы - -Статья: [Режим только для чтения](guides/readonly.md) - +Статья: [Read-only Mode](guides/readonly.md) -[Read-only lightbox](https://docs.dhtmlx.com/scheduler/samples/03_extensions/12_readonly_form.html) +Пример: [Read-only lightbox](https://docs.dhtmlx.com/scheduler/samples/03_extensions/12_readonly_form.html) -## Recurring {#recurring} +## Повторяющиеся -Добавляет поддержку повторяющихся событий. +Обеспечивает поддержку повторяющихся событий. ~~~js scheduler.plugins({ @@ -497,18 +449,16 @@ scheduler.plugins({ }); ~~~ +#### Связанные ресурсы -#### Связанные материалы +Статья: [Recurring Events](guides/recurring-events.md) -Статья: [Повторяющиеся события](guides/recurring-events.md) +Пример: [Повторяющиеся события](https://docs.dhtmlx.com/scheduler/samples/03_extensions/01_recurring_events.html) -[Recurring events](https://docs.dhtmlx.com/scheduler/samples/03_extensions/01_recurring_events.html) - +## Наследие повторяющихся -## Recurring Legacy {#recurring-legacy} - -Устаревшая поддержка повторяющихся событий. +Устаревший движок для повторяющихся событий. ~~~js scheduler.plugins({ @@ -516,14 +466,13 @@ scheduler.plugins({ }); ~~~ -#### Связанные материалы - -Статья: [Повторяющиеся события (до v7.1)](guides/recurring-events-legacy.md) +#### Связанные ресурсы +Статья: [Recurring Events (up to v7.1)](guides/recurring-events-legacy.md) -## Serialize {#serialize} +## Сериализация -Поддерживает сериализацию данных в форматы ICal, XML и JSON. +Обеспечивает поддержку сериализации в форматы iCal, XML, JSON. ~~~js scheduler.plugins({ @@ -531,24 +480,20 @@ scheduler.plugins({ }); ~~~ +#### Связанные ресурсы -#### Связанные материалы - -Статья: [Сериализация данных в XML, JSON, iCal](export/serialization.md) - +Статья: [Data Serialization to XML, JSON, iCal](export/serialization.md) - +Пример: [Serialize scheduler events](https://docs.dhtmlx.com/scheduler/samples/04_export/01_serialize_data.html) -[Serialize scheduler events](https://docs.dhtmlx.com/scheduler/samples/04_export/01_serialize_data.html) - -## Timeline {#timeline} +## Таймлайн :::info -Это расширение доступно только в PRO-версии +Это расширение доступно только в PRO версии ::: -Плагин представления Timeline. +Плагин вида Таймлайн. ~~~js scheduler.plugins({ @@ -556,16 +501,14 @@ scheduler.plugins({ }); ~~~ +#### Связанные ресурсы -#### Связанные материалы - -Статья: [Вид 'Timeline'](views/timeline.md) +Статья: [Timeline View](views/timeline.md) +Пример: [Bar mode](https://docs.dhtmlx.com/scheduler/samples/06_timeline/02_lines.html) -[Bar mode](https://docs.dhtmlx.com/scheduler/samples/06_timeline/02_lines.html) - -## Tooltip {#tooltip} +## Тултип Включает тултипы для событий. @@ -575,22 +518,20 @@ scheduler.plugins({ }); ~~~ +#### Связанные ресурсы -#### Связанные материалы - -Статья: [Тултипы](guides/tooltips.md) +Статья: [Tooltips](guides/tooltips.md) +Пример: [Тултипы](https://docs.dhtmlx.com/scheduler/samples/03_extensions/20_tooltip.html) -[Tooltips](https://docs.dhtmlx.com/scheduler/samples/03_extensions/20_tooltip.html) - -## Treetimeline {#treetimeline} +## Древо-таймлайн :::info -Это расширение доступно только в PRO-версии +Это расширение доступно только в PRO версии ::: -Обеспечивает режим "Tree" для представления Timeline. +Расширение для режима "Tree" вида Таймлайн. ~~~js scheduler.plugins({ @@ -598,22 +539,20 @@ scheduler.plugins({ }); ~~~ +#### Связанные ресурсы -#### Связанные материалы - -Статья: [Вид 'Timeline'](views/timeline.md) +Статья: [Timeline View](views/timeline.md) +Пример: [Режим дерева](https://docs.dhtmlx.com/scheduler/samples/06_timeline/03_tree.html) -[Tree mode](https://docs.dhtmlx.com/scheduler/samples/06_timeline/03_tree.html) - -## Units {#units} +## Вид единиц :::info -Это расширение доступно только в PRO-версии +Это расширение доступно только в PRO версии ::: -Расширение представления Units. +Расширение вида Units. ~~~js scheduler.plugins({ @@ -621,44 +560,41 @@ scheduler.plugins({ }); ~~~ - -#### Связанные материалы +#### Связанные ресурсы Статья: [Units View](views/units.md) +Пример: [Вид единиц](https://docs.dhtmlx.com/scheduler/samples/03_extensions/02_units_view.html) -[Units view](https://docs.dhtmlx.com/scheduler/samples/03_extensions/02_units_view.html) +## URL -## URL {#url} +Сохраняет состояние планировщика (дата, идентификатор события, вид) в URL. -Сохраняет состояние планировщика (дата, ID события, вид) в URL. +Например: + +```text +10_url_date_plugin.html#date=2027-08-01,mode=month +10_url_date_plugin.html#event=15 +``` -Примеры: -~~~js -10_url_date_plugin.html#date=2014-08-01,mode=month -или -10_url_date_plugin.html#event="15 -~~~ ~~~js scheduler.plugins({ url: true }); ~~~ +#### Связанные ресурсы -#### Связанные материалы - -[Saving the scheduler state in URL](https://docs.dhtmlx.com/scheduler/samples/03_extensions/10_url_date_plugin.html) +Пример: [Сохранение состояния планировщика в URL](https://docs.dhtmlx.com/scheduler/samples/03_extensions/10_url_date_plugin.html) - -## Week Agenda {#weekagenda} +## Неделя Agenda :::info -Это расширение доступно только в PRO-версии +Это расширение доступно только в PRO версии ::: -Кодовый файл для представления Week Agenda. +Файл кода вида Week Agenda. ~~~js scheduler.plugins({ @@ -666,18 +602,16 @@ scheduler.plugins({ }); ~~~ +#### Связанные ресурсы -#### Связанные материалы - -Статья: [Неделя-Агенда (Week Agenda View)](views/weekagenda.md) +Статья: [Неделя Agenda View](views/weekagenda.md) +Пример: [WeekAgenda view](https://docs.dhtmlx.com/scheduler/samples/03_extensions/24_week_agenda.html) -[WeekAgenda view](https://docs.dhtmlx.com/scheduler/samples/03_extensions/24_week_agenda.html) +## Год -## Year {#year} - -Кодовый файл для представления Year. +Файл кода вида года. ~~~js scheduler.plugins({ @@ -685,9 +619,8 @@ scheduler.plugins({ }); ~~~ -#### Связанные материалы - -Статья: [Годовой вид](views/year.md) +#### Связанные ресурсы +Статья: [Year View](views/year.md) -[Year view](https://docs.dhtmlx.com/scheduler/samples/03_extensions/04_year_view.html) +Пример: [Годовой вид](https://docs.dhtmlx.com/scheduler/samples/03_extensions/04_year_view.html) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/filtering.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/filtering.md index 71d52d2e..756e8416 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/guides/filtering.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/filtering.md @@ -5,36 +5,36 @@ sidebar_label: "Фильтрация событий" # Фильтрация событий -Для каждой вьюхи можно определить функцию фильтрации, которая определяет, какие события будут отображаться в планировщике, а какие будут скрыты. +Для любого указанного представления вы можете задать функцию фильтрации, которая будет определять, какие события должны отображаться в Scheduler и каких — нет. ~~~js -scheduler.filter_week = function(id, event){ - if(event.name == 'New event') +scheduler.filter_week = (id, event) => { + if (event.name === 'New event') { return false; // событие будет отфильтровано (не отображено) - //или - return true; // событие будет отображено -} + } + + return true; // событие будет отображено +}; ~~~ -Здесь 'week' относится к имени вьюхи (используется в *'scheduler.filter_week'*). +Here, `"week"` is the name of a view in `scheduler.filter_week`. -Функция **filter_(viewName)** принимает два аргумента: +Метод `filter_(viewName)` принимает 2 параметра: -- **id** - идентификатор события -- **event** - сам объект события +- `id` - идентификатор события +- `event` - объект события -Также возможно назначить разные функции фильтрации для различных вьюх: +Помните, что вы можете задать разные функции фильтрации для разных представлений: ~~~js -scheduler.filter_day = scheduler.filter_week = function(id, event){ - //some_code -} +scheduler.filter_day = scheduler.filter_week = (id, event) => { + // some code +}; ... -scheduler.filter_timeline = function(id, event){ - //some_other code -} - +scheduler.filter_timeline = (id, event) => { + // some other code +}; ~~~ - -[Filtering events](https://docs.dhtmlx.com/scheduler/samples/09_api/09_filtering_events.html) +### Связанные примеры +- [Фильтрация событий](https://docs.dhtmlx.com/scheduler/samples/09_api/09_filtering_events.html) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/guides.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/guides.md deleted file mode 100644 index 5926021a..00000000 --- a/i18n/ru/docusaurus-plugin-content-docs/current/guides/guides.md +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: "Руководства" -sidebar_label: "Руководства" ---- - -# Руководства - -В этом разделе собраны основные материалы, которые помогут вам эффективно использовать dhtmlxScheduler. -Он структурирован в виде руководств, ориентированных на выполнение конкретных задач - как простых, так и сложных, часто встречающихся или редких. -Статьи охватывают важнейшие процедуры и практические решения. - -Ознакомьтесь с [возможностями, доступными в версиях Standard и PRO](guides/editions-comparison.md) библиотеки dhtmlxScheduler. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Создание Scheduler на странице

  • [Инициализация Scheduler](guides/initialization.md)
  • [Способы установки Scheduler](guides/installation.md)
  • [Полный список расширений](guides/extensions-list.md)
Объясняет, как установить и инициализировать Scheduler, а также предоставляет список доступных расширений.

С чего начать с Scheduler и Front-End

  • [dhtmlxScheduler на чистом JS/HTML](guides/initialization.md)
  • [dhtmlxScheduler с Angular](integrations/angular/howtostart-angular.md)
  • [dhtmlxScheduler с React](integrations/react/js-scheduler-react.md)
  • [dhtmlxScheduler с Vue.js](integrations/vue/howtostart-vue.md)
  • [dhtmlxScheduler с Svelte](integrations/svelte/howtostart-svelte.md)
Описывает, как создать и настроить стандартный Scheduler на стороне клиента.

С чего начать с Scheduler на сервере

  • [dhtmlxScheduler с ASP.NET Core](integrations/dotnet/howtostart-dotnet-core.md)
  • [dhtmlxScheduler с Node.js](integrations/node/howtostart-nodejs.md)
  • [dhtmlxScheduler с ASP.NET MVC](integrations/dotnet/howtostart-dotnet.md)
  • [dhtmlxScheduler с PHP](integrations/php/howtostart-plain-php.md)
  • [dhtmlxScheduler с PHP:Laravel](integrations/php/howtostart-php-laravel.md)
  • [dhtmlxScheduler с PHP: Slim](integrations/php/howtostart-php-slim4.md)
  • [dhtmlxScheduler с SalesForce LWC](integrations/salesforce/howtostart-salesforce.md)
  • [dhtmlxScheduler с Ruby on Rails](integrations/other/howtostart-ruby.md)
  • [dhtmlxScheduler с dhtmlxConnector](integrations/other/howtostart-connector.md)
Описывает, как создать стандартный Scheduler на различных серверных платформах, настроить параметры, кастомизировать шаблоны, подключать события и многое другое.

Настройка Scheduler

  • [Мобильная адаптивность Scheduler](guides/touch-support.md)
  • [Общие инструкции по настройке](guides/configuration.md)
  • [Разметка Scheduler](guides/scheduler-markup.md)
  • [RTL (Справа налево) режим](guides/rtl-mode.md)
  • [Локализация](guides/localization.md)
  • [Создание нескольких планировщиков на странице](guides/multiple-per-page.md)
  • [Доступность](guides/accessibility.md)
Демонстрирует, как настраивать Scheduler, создавать несколько экземпляров на одной странице, локализовать интерфейс, включать функции доступности и многое другое.

Загрузка и хранение данных

  • [Загрузка данных](guides/loading-data.md)
  • [Интеграция с серверной стороной](guides/server-integration.md)
Рассматривает различные способы загрузки данных в Scheduler: источники, форматы, техники, а также детали серверной интеграции.

Настройка видов

  • [Обзор видов](/views/)
  • [Скрытие единиц времени на оси X в представлении](guides/custom-scales.md)
  • [Пользовательский вид](guides/custom-views.md)
  • [Блокировка и выделение дат](guides/limits.md)
Объясняет, как настраивать виды, изменять единицы шкалы, создавать собственные виды и ограничивать определённые даты.
Посвящено работе с lightbox: добавление и удаление элементов управления, получение и установка значений, настройка внешнего вида и многое другое.

Управление событиями в Scheduler

  • [Операции с объектом события](guides/event-object-operations.md)
  • [Добавление/Удаление событий](guides/adding-events.md)
  • [Фильтрация событий](guides/filtering.md)
  • [Операции Drag-and-Drop](guides/drag-between.md)
  • [Повторяющиеся события](guides/recurring-events.md)
  • [Режим только для чтения](guides/readonly.md)
  • [Валидация](guides/validation.md)
  • [Предотвращение двойных событий в одном временном слоте](guides/collisions.md)
Описывает основные операции с объектами событий: добавление, удаление, фильтрация. Также объясняет работу с повторяющимися событиями, режимом только для чтения и другие аспекты.

Кастомизация событий

  • [Бокс](guides/custom-events-display.md)
  • [Цвет](guides/custom-events-color.md)
  • [Содержимое (шаблон)](guides/custom-events-content.md)
  • [Тултип](guides/tooltips.md)
  • [Панели редактирования и выбора события](guides/customizing-edit-select-bars.md)
  • [Изменение размера шкалы и блоков событий](guides/sizing.md)
Рассказывает, как персонализировать различные аспекты событий - от текстового шаблона до внешнего вида бокса события.

Экспорт/импорт данных

  • [Интеграция с Google Calendar](integrations/google-calendar/google-calendar-sync.md)
  • [Экспорт в PDF](export/pdf.md)
  • [Экспорт в PNG](export/png.md)
  • [Экспорт в Excel и iCal](export/excel.md)
  • [XML, JSON, iCal и другие форматы](export/serialization.md)
Описывает форматы и методы, доступные для импорта и экспорта данных Scheduler.

Внешний вид и стилизация

  • [Скины](guides/skins.md)
  • [Форматирование меток, дат, стилей](guides/templates.md)
  • [Настройка скинов](guides/custom-skins.md)
Ознакомит с графическими элементами Scheduler и объяснит, как их стилизовать.

Работа с датами

  • [Спецификация формата даты](guides/settings-format.md)
  • [Операции с датами](guides/date-formats.md)
Рассматривает важные вопросы работы с датами в Scheduler, включая преобразование дат в строки и обратно, а также допустимые символы в форматах дат.

Интеграции

  • [Всплывающие сообщения и модальные окна](guides/popups-and-modals.md)
  • [Использование Scheduler с TypeScript](guides/scheduler-typescript.md)
  • [Интеграция с jQuery](integrations/other/jquery-integration.md)
  • [Интеграция с dhtmlxLayout](integrations/other/dhxlayout-integration.md)
Описывает доступные варианты интеграции Scheduler с сторонними фреймворками.

Специальные расширения и редакции

  • [Мини-календарь (Date Picker)](guides/minicalendar.md)
  • [Live Updates Mode (Устаревший)](guides/live-update.md)
  • [Несколько пользователей](guides/multiple-users.md)
Дает рекомендации по использованию различных расширений, входящих в библиотеку, для расширения её функциональности.

Руководство по пользовательскому интерфейсу

  • [Графический интерфейс планировщика](guides/user-interface.md)
Описывает элементы интерфейса Scheduler с точки зрения конечного пользователя.
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/how-to-start.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/how-to-start.md deleted file mode 100644 index e4ceb0d0..00000000 --- a/i18n/ru/docusaurus-plugin-content-docs/current/guides/how-to-start.md +++ /dev/null @@ -1,240 +0,0 @@ ---- -title: "Как начать" -sidebar_label: "Как начать" ---- - -# Как начать - -В этом руководстве показано, как создать базовый планировщик, который загружает данные из базы данных и сохраняет их обратно. -Итоговый пример может служить прочной основой для создания приложений с dhtmlxScheduler. - -![init_scheduler_front.png](/img/init_scheduler_front.png) - - -[Loading data from a database](https://docs.dhtmlx.com/scheduler/samples/01_initialization_loading/05_loading_database.html) - - -## Шаг 1. Создайте новый HTML-файл и подключите необходимые файлы - -Начните с создания нового HTML-файла и подключения необходимых скриптов и стилей планировщика. - -Вам понадобятся следующие файлы: - -- *dhtmlxscheduler.js* -- *dhtmlxscheduler_material.css* (для темы Material; вы также можете [ознакомиться с другими доступными темами](guides/skins.md)) - -~~~html - - - - How to start - - - - - //your code will be here - - -~~~ - -Давайте кратко рассмотрим структуру пакета dhtmlxScheduler, чтобы знать, где искать эти файлы: - -- sources - исходные файлы, не минифицированные и удобные для чтения, в основном используются для отладки. -- samples - примеры кода. -- docs - полная документация по компоненту. -- codebase - минифицированные файлы, оптимизированные для использования в продакшене. Используйте файлы из этой папки в своих проектах. - -## Шаг 2. Определите необходимые DIV-элементы - -Перед инициализацией планировщика создайте необходимые контейнеры DIV для его элементов интерфейса. - -Обычно для планировщика требуется следующий набор 'div': - -~~~js -
-
-
 
-
 
-
-
-
-
-
-
-
-
-
-~~~ - -## Шаг 3. Стилизация - -Чтобы обеспечить корректную работу во весь экран во всех браузерах, добавьте следующий CSS-стиль для планировщика: - -~~~css - -~~~ - -Если вы не используете полноэкранный режим, этот стиль не обязателен. Вместо этого задайте нужные CSS-свойства непосредственно для основного **div**: - -~~~html -
-... -~~~ - -## Шаг 4. Инициализация - -Когда всё готово, можно инициализировать планировщик. Обратите внимание, что планировщик - это статический объект, и его нужно создавать только один раз на странице. -Обращаться к экземпляру планировщика можно через **dhtmlxScheduler** или просто **scheduler**. - -~~~js -scheduler.init('scheduler_here', new Date(),"month"); -~~~ - -## Шаг 5. Загрузка данных - -На этом этапе при запуске приложения появится планировщик, но без событий. - -Чтобы заполнить его данными, начните с простого встроенного объекта в качестве источника данных. -Используйте метод [parse](api/method/parse.md) для загрузки данных из встроенного объекта. - -Каждый объект события включает: - -- **id** - (*string, number*) идентификатор события. -- **start_date** - (*string*) дата начала события, формат по умолчанию "%m/%d/%Y %H:%i". -- **end_date** - (*string*) дата окончания события, формат по умолчанию "%m/%d/%Y %H:%i". -- **text** - (*string*) описание события. - -~~~js -var events = [ - {id:1, text:"Meeting", start_date:"04/11/2018 14:00",end_date:"04/11/2018 17:00"}, - {id:2, text:"Conference",start_date:"04/15/2018 12:00",end_date:"04/18/2018 19:00"}, - {id:3, text:"Interview", start_date:"04/24/2018 09:00",end_date:"04/24/2018 10:00"} -]; - -scheduler.parse(events); // указываем источник и формат данных -~~~ - -Вы также можете [загружать данные с сервера](#step7loadingdatafromtheserver). - -:::note -Подробнее об интеграции с серверной частью читайте в статье [Интеграция с серверной стороной](guides/server-integration.md). -::: - -## Шаг 6. Структура базы данных - -:::note -Следуйте этим шагам, если хотите загружать данные из базы данных, а не из встроенного объекта. -::: - -Если вы решили загружать данные с сервера, потребуется таблица базы данных со следующей структурой: - -![db_table](/img/db_table.png) - -Создать её можно с помощью следующего SQL-кода: - -~~~js -CREATE TABLE `events` ( - `id` int(11) NOT NULL AUTO_INCREMENT, - `start_date` datetime NOT NULL, - `end_date` datetime NOT NULL, - `text` varchar(255) NOT NULL, - PRIMARY KEY (`id`) -) -~~~ - -Кроме этих полей, вы можете добавить дополнительные столбцы, которые затем можно отправлять на клиент и [сопоставлять с lightbox](guides/custom-details-form.md#mapping_db_fields_to_the_form). - -Обратите внимание, что формат даты и времени в базе ('%Y-%m-%d %H:%i') отличается от формата по умолчанию в планировщике ('%m/%d/%Y %H:%i'). -Чтобы корректно обрабатывать это, обновите формат даты планировщика через опцию [xml_date](api/config/xml_date.md). - -Обязательно задайте параметры конфигурации до инициализации планировщика, например: - -~~~js -scheduler.config.xml_date="%Y-%m-%d %H:%i"; -... -scheduler.init('scheduler_here',new Date(),"month"); -~~~ - -## Шаг 7. Загрузка данных с сервера - -Чтобы загрузить данные из базы, используйте метод [load](api/method/load.md), передав URL серверного скрипта, который обрабатывает операции с данными. - -:::note -Библиотека [dhtmlxConnector](https://docs.dhtmlx.com/connector__php__index.html) поможет быстро начать, как показано здесь. Для новых проектов рекомендуется создавать backend API вручную для большей гибкости. Подробнее смотрите в [Интеграция с серверной стороной](guides/server-integration.md). -::: - -Вот как вызвать этот метод: - -~~~js -// укажите URL серверного скрипта, который обрабатывает CRUD-операции -scheduler.load("data/connector.php"); -~~~ - -## Шаг 8. Серверный скрипт - -Пример серверного скрипта для dhtmlxScheduler: - -~~~php -render_table("events","id","start_date,end_date,text"); -~~~ - -### Сопоставление столбцов базы данных - -Обратите внимание, что порядок столбцов в **$connector->render_table** имеет значение. Первые три столбца соответствуют свойствам *start_date*, *end_date* и *text* объекта события на клиенте, независимо от их реальных названий в БД: - -~~~js -$conn->render_table("events","EventId","Start,End,Name,details",""); -// JS: event.id, event.start_date, event.end_date, event.text, event.text, event.details -~~~ - -#### Сопоставление дополнительных столбцов - -Любые дополнительные столбцы будут сопоставлены по их именам напрямую: - -~~~js -$conn->render_table("events","id","start_date,end_date,text,custom,details",""); -// JS: event.start_date, event.end_date, event.text, event.custom, event.details -~~~ - -Можно также использовать алиасы, например: - -~~~js -$conn->render_table("events","id", - "start_date,end_date,text,custom_column(customProperty),details",""); -// JS: event.start_date, event.end_date, event.text, event.customProperty, event.details -~~~ - -## Шаг 9. Сохранение данных - -Теперь планировщик может загружать данные из базы, но изменения не будут сохраняться автоматически. -Чтобы включить сохранение, используйте dataProcessor. - -Использовать dataProcessor очень просто - инициализируйте его и свяжите с планировщиком: - -~~~js -var dp = scheduler.createDataProcessor("data/connector.php"); -dp.init(scheduler); -~~~ - -Готово! Теперь у вас есть базовый планировщик, который загружает и сохраняет данные в базу данных. - -Далее вы можете настраивать и расширять его под свои задачи. - - -[Loading data from a database](https://docs.dhtmlx.com/scheduler/samples/01_initialization_loading/05_loading_database.html) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/howtostart_dotnet.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/howtostart_dotnet.md deleted file mode 100644 index c3cad2fa..00000000 --- a/i18n/ru/docusaurus-plugin-content-docs/current/guides/howtostart_dotnet.md +++ /dev/null @@ -1,810 +0,0 @@ ---- -title: "dhtmlxScheduler с ASP.NET MVC" -sidebar_label: "dhtmlxScheduler с ASP.NET MVC" ---- - -# dhtmlxScheduler с ASP.NET MVC - -Это руководство описывает процесс создания планировщика с помощью [ASP.NET](https://dotnet.microsoft.com/apps/aspnet) и REST API на серверной стороне. - -Если вас интересуют другие серверные интеграции с Scheduler, ознакомьтесь с этими руководствами: - -- [dhtmlxScheduler с ASP.NET Core](integrations/dotnet/howtostart-dotnet-core.md) -- [dhtmlxScheduler с Node.js](integrations/node/howtostart-nodejs.md) -- [dhtmlxScheduler с PHP](integrations/php/howtostart-plain-php.md) -- [dhtmlxScheduler с PHP: Slim](integrations/php/howtostart-php-slim4.md) -- [dhtmlxScheduler с PHP:Laravel](integrations/php/howtostart-php-laravel.md) -- [dhtmlxScheduler с SalesForce LWC](integrations/salesforce/howtostart-salesforce.md) -- [dhtmlxScheduler с Ruby on Rails](integrations/other/howtostart-ruby.md) -- [dhtmlxScheduler с dhtmlxConnector](integrations/other/howtostart-connector.md) - -В этом примере мы используем ASP.NET MVC 5 вместе с контроллером Web API для реализации REST API и создания приложения с планировщиком. Для работы с базой данных будет использоваться [Entity Framework](https://learn.microsoft.com/en-us/aspnet/entity-framework). Разработка ведётся в среде Visual Studio. - -:::note -Полный исходный код доступен [на GitHub](https://github.com/DHTMLX/scheduler-howto-dotnet). -::: - -## Шаг 1. Создание проекта - -Запустите Visual Studio 2022 и выберите *Create a new project*. - -![New project](/img/how_to_start_net_create_project.png) - -Затем выберите "ASP.NET Web Application" и задайте имя *DHX.Scheduler.Web*. Если шаблон отсутствует, обратитесь к разделу [Troubleshooting](#troubleshooting). - -![New project](/img/how_to_start_net_project_template.png) - -![Project config](/img/how_to_start_net_project_config.png) - -Выберите шаблон "Empty project" и отметьте опции MVC и Web API справа: - -![Empty project](/img/how_to_start_net_empty_project.png) - -## Шаг 2. Добавление планировщика на страницу - -### Создание контроллера - -После создания пустого проекта следующим шагом будет добавление MVC-контроллера, который отобразит страницу с планировщиком. - -Кликните правой кнопкой мыши по папке Controllers, выберите Add -> Controller. В открывшемся окне выберите MVC 5 Controller -> Empty и нажмите Add. Назовите контроллер "HomeController". - -![Home controller](/img/how_to_start_net_controller.png) - -В HomeController уже присутствует метод *Index()* класса *ActionResult*, поэтому дополнительная логика не требуется. Нужно лишь добавить представление для этого метода. - -~~~js title="Controllers/HomeController.cs" -using System.Web.Mvc; - -namespace DHX.Scheduler.Web.Controllers -{ - public class HomeController : Controller - { - // GET: Home - public ActionResult Index() - { - return View(); - } - } -} -~~~ - -### Создание представления - -Далее создайте страницу index. Перейдите в Views/Home и добавьте пустое представление с именем Index: - -![Index view](/img/how_to_start_net_index_view.png) - -Откройте новое представление и вставьте следующий код: - -~~~js title="Views/Home/Index.cshtml" -@{ - Layout = null; -} - - - - - - - Index - - - - - -
-
-
 
-
 
-
-
-
-
-
-
-
-
-
- - -~~~ - -Что здесь происходит: - -- создаётся базовый макет страницы для приложения с планировщиком -- подключаются JS и CSS dhtmlx scheduler через [CDN-ссылки](guides/install_with_bower.md#cdn) -- создаётся сам планировщик на странице - -Также планировщик настраивается для работы с RESTful API по адресу ["/api/scheduler/"](guides/server_integration.md#technique) для загрузки данных и как основной маршрут: - -~~~js title="Views/Home/Index.cshtml" -scheduler.load("/api/scheduler"); -// initializing dataProcessor -var dp = scheduler.createDataProcessor("/api/scheduler"); -// and attaching it to scheduler -dp.init(scheduler); -// setting the REST mode for dataProcessor -dp.setTransactionMode("REST"); -~~~ - -Реализация серверной части будет рассмотрена далее. Пока что вы можете запустить приложение и увидеть отображение планировщика. - -![Scheduler initialization](/img/how_to_start_net_scheduler_init.png) - -## Шаг 3. Создание моделей и базы данных - -### Создание моделей - -Далее определим классы моделей для планировщика. Вам понадобится класс, описывающий события планировщика. Обратите внимание, что dhtmlxScheduler использует определённые имена свойств в своей модели данных, отличающиеся от стандартного C#-стиля. Некоторые клиентские свойства могут не храниться в базе, но использоваться в логике клиента или сервера. - -Чтобы это учесть, мы применим паттерн [Data Transfer Object](https://learn.microsoft.com/en-us/aspnet/web-api/overview/data/using-web-api-with-entity-framework/part-5): определим отдельные классы доменной модели для EF и внутреннего использования, а также отдельные DTO-классы для обмена с Web API. Позднее будет настроено сопоставление между этими моделями. - -#### Модель события планировщика - -Начнем с создания класса для события. Пример базовой реализации: - -~~~js title="Models/SchedulerEvent.cs" -using System; - -namespace DHX.Scheduler.Web.Models -{ - public class SchedulerEvent - { - public int Id { get; set; } - public string Text { get; set; } - public DateTime StartDate { get; set; } - public DateTime EndDate { get; set; } - - } -} -~~~ - -Имейте в виду, что события планировщика могут содержать и другие свойства, расширяющие функциональность календаря. В этом примере приведён минимальный набор. - -### Настройка подключения к базе данных - -#### Установка Entity Framework - -Добавить фреймворк можно через NuGet package manager: - -![Entity Framework via NuGet](/img/how_to_start_net_entity_nuget.png) - -Или выполните команду в Package Manager Console: - -~~~ -PM> Install-Package EntityFramework -~~~ - -#### Создание контекста базы данных - -Создайте класс Context. Он представляет сессию с базой данных и отвечает за получение и сохранение данных. - -Кликните правой кнопкой мыши по папке *Models*, выберите Add -> Class, задайте имя "SchedulerContext" и добавьте следующий код: - -~~~js title="Models/SchedulerContext.cs" -using System.Data.Entity; - -namespace DHX.Scheduler.Web.Models -{ - public class SchedulerContext : DbContext - { - public DbSet SchedulerEvents { get; set; } - } -} -~~~ - -#### Добавление начальных записей в базу данных - -Теперь добавим несколько тестовых записей. - -Entity Framework может автоматически создать базу данных при запуске приложения. Мы хотим, чтобы база удалялась и пересоздавалась при каждом изменении модели. - -Для этого создайте инициализатор базы данных - новый класс в *App_Start*, наследующий *DropCreateDatabaseIfModelChanges*. Назовём его "SchedulerInitializer". - -В этом классе переопределите метод *Seed()* для наполнения базы тестовыми данными. - -Полный класс *SchedulerInitializer*: - -~~~js title="App_Start/SchedulerInitializer.cs" -using System; -using System.Collections.Generic; -using System.Data.Entity; - -using DHX.Scheduler.Web.Models; - -namespace DHX.Scheduler.Web.App_Start -{ - public class SchedulerInitializer:DropCreateDatabaseIfModelChanges - { - protected override void Seed(SchedulerContext context) - { - List events = new List() - { - new SchedulerEvent() - { - Id = 1, - Text = "Event 1", - StartDate = new DateTime(2022, 1, 11, 2, 0, 0), - EndDate = new DateTime(2022, 1, 11, 4, 0, 0) - }, - new SchedulerEvent() - { - Id = 2, - Text = "Event 2", - StartDate = new DateTime(2022, 1, 14, 3, 0, 0), - EndDate = new DateTime(2022, 1, 14, 6, 0, 0) - }, - new SchedulerEvent() - { - Id = 3, - Text = "Multiday event", - StartDate = new DateTime(2022, 1, 11, 0, 0, 0), - EndDate = new DateTime(2022, 1, 16, 0, 0, 0) - } - }; - - events.ForEach(s => context.SchedulerEvents.Add(s)); - context.SaveChanges(); - - } - - } -} -~~~ - -Откройте *Global.asax*. В этом файле размещается код, выполняющийся при старте приложения. Добавьте необходимое пространство имён и установите инициализатор контекста внутри *Application_Start()*: - -~~~js title="Global.asax.cs" -using System; -using System.Web; -using System.Web.Mvc; -using System.Web.Routing; -using System.Web.Http; - -using System.Data.Entity; -using DHX.Scheduler.Web.App_Start; - -namespace DHX.Scheduler.Web -{ - public class Global : HttpApplication - { - void Application_Start(object sender, EventArgs e) - { - // Code that runs on application startup - AreaRegistration.RegisterAllAreas(); - GlobalConfiguration.Configure(WebApiConfig.Register); - RouteConfig.RegisterRoutes(RouteTable.Routes); - - Database.SetInitializer(new SchedulerInitializer()); /*!*/ - } - } -} -~~~ - -### Описание DTO и сопоставление - -Теперь определим DTO-классы, которые будет использовать Web API. Для сопоставления между Model и DTO реализуем явные операторы преобразования. - -Вот структура класса WebAPIEvent: - -~~~js title="Models/WebAPIEvent.cs" -using System; - -namespace DHX.Scheduler.Web.Models -{ - public class WebAPIEvent - { - public int id { get; set; } - public string text { get; set; } - public string start_date { get; set; } - public string end_date { get; set; } - - public static explicit operator WebAPIEvent(SchedulerEvent schedulerEvent) - { - return new WebAPIEvent - { - id = schedulerEvent.Id, - text = schedulerEvent.Text, - start_date = schedulerEvent.StartDate.ToString("yyyy-MM-dd HH:mm"), - end_date = schedulerEvent.EndDate.ToString("yyyy-MM-dd HH:mm") - }; - } - - public static explicit operator SchedulerEvent(WebAPIEvent schedulerEvent) - { - return new SchedulerEvent - { - Id = schedulerEvent.id, - Text = schedulerEvent.text, - StartDate = DateTime.Parse( - schedulerEvent.start_date, - System.Globalization.CultureInfo.InvariantCulture), - EndDate = DateTime.Parse( - schedulerEvent.end_date, - System.Globalization.CultureInfo.InvariantCulture) - }; - } - - } -} -~~~ - -## Шаг 4. Реализация Web API - -### Контроллер Scheduler - -Чтобы добавить новый контроллер: - -- Кликните правой кнопкой мыши на папке Controllers и выберите Add -> Controller. -- Выберите Web API 2 Controller -> Empty, затем введите "SchedulerController" в качестве имени контроллера. - -Теперь настроим базовые действия CRUD для управления событиями планировщика: - -~~~js title="Controllers/SchedulerController.cs" -using System; -using System.Collections.Generic; -using System.Data.Entity; -using System.Linq; -using System.Web.Http; - -using DHX.Scheduler.Web.App_Start; -using DHX.Scheduler.Web.Models; - -namespace DHX.Scheduler.Web.Controllers -{ - public class SchedulerController : ApiController - { - private SchedulerContext db = new SchedulerContext(); - - // GET: api/scheduler - public IEnumerable Get() - { - return db.SchedulerEvents - .ToList() - .Select(e => (WebAPIEvent)e); - } - - // GET: api/scheduler/5 - public WebAPIEvent Get(int id) - { - return (WebAPIEvent)db.SchedulerEvents.Find(id); - } - - // PUT: api/scheduler/5 - [HttpPut] - public IHttpActionResult EditSchedulerEvent(int id, WebAPIEvent webAPIEvent) - { - var updatedSchedulerEvent = (SchedulerEvent)webAPIEvent; - updatedSchedulerEvent.Id = id; - db.Entry(updatedSchedulerEvent).State = EntityState.Modified; - db.SaveChanges(); - - return Ok(new - { - action = "updated" - }); - } - - // POST: api/scheduler/5 - [HttpPost] - public IHttpActionResult CreateSchedulerEvent(WebAPIEvent webAPIEvent) - { - var newSchedulerEvent = (SchedulerEvent)webAPIEvent; - db.SchedulerEvents.Add(newSchedulerEvent); - db.SaveChanges(); - - return Ok(new - { - tid = newSchedulerEvent.Id, - action = "inserted" - }); - } - - // DELETE: api/scheduler/5 - [HttpDelete] - public IHttpActionResult DeleteSchedulerEvent(int id) - { - var schedulerEvent = db.SchedulerEvents.Find(id); - if (schedulerEvent != null) - { - db.SchedulerEvents.Remove(schedulerEvent); - db.SaveChanges(); - } - - return Ok(new - { - action = "deleted" - }); - } - - protected override void Dispose(bool disposing) - { - if (disposing) - { - db.Dispose(); - } - base.Dispose(disposing); - } - } -} -~~~ - -В этом коде: - -- События планировщика загружаются из базы данных, а их DTO возвращаются в действиях GET. -- Для действий PUT и POST DTO принимаются на вход, преобразуются обратно в модели SchedulerEvent и изменения сохраняются в контексте базы данных. - -С этим набором действий приложение готово к запуску и предоставляет полностью работоспособный планировщик. - -![Ready Scheduler](/img/how_to_start_net_ready_scheduler.png) - -[Готовый пример доступен на github](https://github.com/DHTMLX/scheduler-howto-dotnet). - -:::note -Если Scheduler не отображает события на странице, ознакомьтесь со статьёй [Устранение проблем с интеграцией Backend](guides/troubleshooting.md). -::: - -## Динамическая загрузка - -В текущей реализации при каждом вызове GET действия планировщика загружается вся таблица событий. Это может быть приемлемо на начальном этапе, но по мере роста объёма данных количество передаваемой информации значительно увеличится. Внедрение динамической загрузки позволит загружать только те события, которые необходимы для определённого диапазона времени. - -На клиентской стороне это включается с помощью метода [scheduler.setLoadMode](api/method/setloadmode.md): - -~~~js title="Views/Home/Index.cshtml" -scheduler.setLoadMode("day"); -// загрузка данных с сервера -scheduler.load("/api/scheduler"); -~~~ - -С этим методом планировщик будет включать параметры *from* и *to* в GET-запросы, чтобы сервер возвращал только события в указанном диапазоне. - -Чтобы обработать это на сервере, GET-действие может принимать эти параметры и фильтровать события соответствующим образом: - -~~~js title="Controllers/SchedulerController.cs" -// GET: api/scheduler -public IEnumerable Get(DateTime from, DateTime to) -{ - return db.SchedulerEvents - .Where(e => e.StartDate < to && e.EndDate >= from) - .ToList() - .Select(e => (WebAPIEvent)e); -} -~~~ - -:::note -Если Scheduler не отображает события на странице, ознакомьтесь со статьёй [Устранение проблем с интеграцией Backend](guides/troubleshooting.md). -::: - -## Повторяющиеся события - -Чтобы поддерживать повторяющиеся события (например, ежедневные повторы), необходимо включить соответствующее расширение на странице планировщика: - -~~~js -scheduler.plugins({ - recurring: true -}); -~~~ - -### Обновление моделей - -Модель также нужно обновить для хранения информации о повторяемости: - -~~~js title="Models/SchedulerEvent.cs" -using System; - -namespace DHX.Scheduler.Web.Models -{ - public class SchedulerEvent - { - public int Id { get; set; } - public string Text { get; set; } - public DateTime StartDate { get; set; } - public DateTime EndDate { get; set; } - - public int EventPID { get; set; } - public string RecType { get; set; } - public long EventLength { get; set; } - - } -} -~~~ - -И DTO должен быть обновлён соответствующим образом: - -~~~js title="Models/WebAPIEvent.cs" -using System; - -namespace DHX.Scheduler.Web.Models -{ - public class WebAPIEvent - { - public int id { get; set; } - public string text { get; set; } - public string start_date { get; set; } - public string end_date { get; set; } - - public int? event_pid { get; set; } - public string rec_type { get; set; } - public long? event_length { get; set; } - - public static explicit operator WebAPIEvent(SchedulerEvent schedulerEvent) - { - return new WebAPIEvent - { - id = schedulerEvent.Id, - text = schedulerEvent.Text, - start_date = schedulerEvent.StartDate.ToString("yyyy-MM-dd HH:mm"), - end_date = schedulerEvent.EndDate.ToString("yyyy-MM-dd HH:mm"), - - event_pid = schedulerEvent.EventPID, - rec_type = schedulerEvent.RecType, - event_length = schedulerEvent.EventLength - }; - } - - public static explicit operator SchedulerEvent(WebAPIEvent schedulerEvent) - { - return new SchedulerEvent - { - Id = schedulerEvent.id, - Text = schedulerEvent.text, - StartDate = DateTime.Parse( - schedulerEvent.start_date, - System.Globalization.CultureInfo.InvariantCulture), - EndDate = DateTime.Parse( - schedulerEvent.end_date, - System.Globalization.CultureInfo.InvariantCulture), - EventPID = schedulerEvent.event_pid != null ? - schedulerEvent.event_pid.Value : 0, - EventLength = schedulerEvent.event_length != null ? - schedulerEvent.event_length.Value : 0, - RecType = schedulerEvent.rec_type - }; - } - - } -} -~~~ - -### Обновление API-контроллера - -В завершение, действия PUT/POST/DELETE необходимо скорректировать для корректной поддержки [особых правил для повторяющихся событий](guides/recurring_events.md#editingdeletingacertainoccurrenceintheseries). - -Начнём с действия POST, которое обрабатывает особый случай для повторяющихся событий: при удалении одного вхождения из серии повторяющихся событий необходимо создать новую запись в базе данных, и клиент инициирует действие вставки: - -~~~js title="Controllers/SchedulerController.cs" -// POST: api/scheduler/5 -[HttpPost] -public IHttpActionResult CreateSchedulerEvent(WebAPIEvent webAPIEvent) -{ - var newSchedulerEvent = (SchedulerEvent)webAPIEvent; - db.SchedulerEvents.Add(newSchedulerEvent); - db.SaveChanges(); - - // удаление одного вхождения из серии повторяющихся событий - var resultAction = "inserted"; - if(newSchedulerEvent.RecType == "none") - { - resultAction = "deleted"; - } - - return Ok(new - { - tid = newSchedulerEvent.Id, - action = resultAction - }); -} -~~~ - -В действии PUT важно обновлять все свойства модели. Кроме того, при изменении серии повторяющихся событий все изменённые вхождения этой серии должны быть удалены: - -~~~js title="Controllers/SchedulerController.cs" -// PUT: api/scheduler/5 -[HttpPut] -public IHttpActionResult EditSchedulerEvent(int id, WebAPIEvent webAPIEvent) -{ - var updatedSchedulerEvent = (SchedulerEvent)webAPIEvent; - updatedSchedulerEvent.Id = id; - db.Entry(updatedSchedulerEvent).State = EntityState.Modified; - - if (!string.IsNullOrEmpty(updatedSchedulerEvent.RecType) && - updatedSchedulerEvent.RecType != "none") - { - //при обновлении серии повторяющихся событий все изменённые вхождения должны быть удалены - //https://docs.dhtmlx.com/scheduler/server_integration.html#recurringevents - - db.SchedulerEvents.RemoveRange( - db.SchedulerEvents.Where(e => e.EventPID == id) - ); - } - - db.SaveChanges(); - - return Ok(new - { - action = "updated" - }); -} -~~~ - -Наконец, действие DELETE должно учитывать две особые ситуации: - -- Если у удаляемого события заполнено поле `event_pid`, это значит, что удаляется изменённое вхождение серии повторяющихся событий. Вместо удаления записи её поле `rec_type` должно быть установлено в `'none'`, чтобы планировщик игнорировал это вхождение. -- При удалении всей серии повторяющихся событий все изменённые вхождения этой серии также должны быть удалены. - -~~~js title="Controllers/SchedulerController.cs" -// DELETE: api/scheduler/5 -[HttpDelete] -public IHttpActionResult DeleteSchedulerEvent(int id) -{ - var schedulerEvent = db.SchedulerEvents.Find(id); - if (schedulerEvent != null) - { - //логика, специфичная для поддержки повторяющихся событий - //https://docs.dhtmlx.com/scheduler/server_integration.html#recurringevents - - if(schedulerEvent.EventPID != default(int)) - { - // удаление изменённого вхождения из серии повторяющихся событий - // Если событие с event_pid было удалено, его нужно обновить, - // установив rec_type==none вместо удаления. - - schedulerEvent.RecType = "none"; - } - else - { - // при удалении серии повторяющихся событий удалить все изменённые вхождения серии - - if (!string.IsNullOrEmpty(schedulerEvent.RecType) && - schedulerEvent.RecType != "none") - { - //при обновлении серии повторяющихся событий все изменённые вхождения должны быть удалены - //https://docs.dhtmlx.com/scheduler/server_integration.html#recurringevents - - db.SchedulerEvents.RemoveRange( - db.SchedulerEvents.Where(ev => ev.EventPID == id) - ); - } - - db.SchedulerEvents.Remove(schedulerEvent); - } - db.SaveChanges(); - } - - return Ok(new - { - action = "deleted" - }); -} -~~~ - - -### Разбор повторяющихся событий - -Повторяющееся событие хранится в базе данных как одна запись, которую Scheduler разбивает на отдельные вхождения на стороне клиента. Если вам необходимо получить даты отдельных событий на стороне сервера, доступна вспомогательная библиотека для разбора повторяющихся событий dhtmlxScheduler в ASP.NET. - - -Готовую библиотеку можно найти на [GitHub](https://github.com/DHTMLX/scheduler-recurring-events-dotnet). - -## Обработка ошибок - -[Фильтры исключений](https://learn.microsoft.com/en-us/previous-versions/aspnet/gg416513(v="vs.98))" предоставляют способ перехвата исключений в обработчиках CRUD и возврата ответов, которые клиентская часть Scheduler сможет распознать, как описано в разделе [обработка ошибок](guides/server_integration.md#errorhandling). - -Чтобы настроить обработку ошибок для Scheduler, выполните следующие шаги: - -Создайте новый класс с именем *SchedulerAPIExceptionFilterAttribute* внутри *App_Start*: - -~~~js title="App_Start/SchedulerAPIExceptionFilterAttribute.cs" -using System.Net; -using System.Net.Http; -using System.Web.Http.Filters; - -namespace DHX.Scheduler.Web.App_Start -{ - public class SchedulerAPIExceptionFilterAttribute : ExceptionFilterAttribute - { - public override void OnException(HttpActionExecutedContext context) - { - context.Response = context.Request.CreateResponse( - HttpStatusCode.InternalServerError, new - { - action = "error", - message = context.Exception.Message - }); - } - } -} -~~~ - -Затем добавьте этот атрибут в ваш WebAPI контроллер (SchedulerController) следующим образом: - -~~~js title="Controllers/SchedulerController.cs" -namespace DHX.Scheduler.Web.Controllers -{ - [SchedulerAPIExceptionFilter] - public class SchedulerController : ApiController - { -~~~ - -Теперь, если при обработке запроса в Web API контроллере произойдёт исключение, клиент получит статус ошибки и сообщение, которые можно обработать или отобразить по необходимости. - -Имейте в виду, что в рабочей среде не рекомендуется напрямую отправлять клиенту сообщения исключений. - -## Безопасность приложения - -Scheduler сам по себе не включает защиту от распространённых угроз, таких как SQL-инъекции, XSS или CSRF-атаки. Защита приложения лежит на ответственности разработчиков, управляющих серверной частью. Подробнее об этом читайте в [соответствующей статье](guides/app_security.md). - - -### Защита от XSS - -Простой способ - кодировать текстовые поля при отправке данных клиенту. - -Если вы ещё не установили пакет encoder, его можно добавить через Package Manager Console: - -~~~ -PM> Install-Package System.Text.Encodings.Web -Version 6.0.0 -~~~ - -Например, следующий код использует встроенный HtmlEncoder для экранирования HTML-символов в тексте события. Это позволяет оставить данные в базе без изменений, но гарантирует, что клиент получит безопасное значение `event.text`. - -~~~js title="Model.WebAPIEvent.cs" -using System.Text.Encodings.Web; - -public static explicit operator WebAPIEvent(SchedulerEvent schedulerEvent) -{ - return new WebAPIEvent - { - id = schedulerEvent.Id, - text = HtmlEncoder.Default.Encode(schedulerEvent.Text), - start_date = schedulerEvent.StartDate.ToString("yyyy-MM-dd HH:mm"), - end_date = schedulerEvent.EndDate.ToString("yyyy-MM-dd HH:mm") - }; -} -~~~ - -В качестве альтернативы можно использовать специализированные библиотеки, такие как [HtmlAgilityPack](https://html-agility-pack.net/), чтобы полностью удалять HTML-контент при сохранении или загрузке данных. - -## Поиск и устранение неисправностей - -### Шаблон ASP.NET Web Application отсутствует - -Если шаблон проекта "ASP.NET Web Application" отсутствует в Visual Studio 2022, попробуйте следующее: - -1. Закройте Visual Studio 2022 - -2. Откройте меню Пуск и запустите Visual Studio Installer - -3. Найдите *Visual Studio Community 2022* и нажмите *Modify* - -![vsinstaller](/img/vsinstaller.png) - -4. В открывшемся окне выберите *Individual components*, отметьте пункт *".NET Framework Project and item templates"* в списке и нажмите *Modify* - -![components](/img/components.png) - -После выполнения этих шагов перезапустите Visual Studio 2022 - шаблон должен появиться. - -### Проблемы с отображением задач и связей - -Если после интеграции с ASP.NET MVC Scheduler не отображает события на странице, обратитесь к статье [Устранение проблем с интеграцией Backend](guides/troubleshooting.md). В ней содержатся рекомендации по диагностике причин подобных проблем. - -## Что дальше - -На этом этапе Scheduler полностью работоспособен. Вы можете изучить полный исходный код на [GitHub](https://github.com/DHTMLX/scheduler-howto-dotnet), клонировать его или скачать для своих проектов. - -Также ознакомьтесь с [руководствами по различным функциям Scheduler](/guides/) или [уроками по интеграции Scheduler с другими backend-фреймворками](integrations/howtostart-guides.md). diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/ical-export-import.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/ical-export-import.md index 1cafb542..b3f63a8b 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/guides/ical-export-import.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/ical-export-import.md @@ -9,28 +9,33 @@ sidebar_label: "iCal экспорт/импорт" Этот инструмент устарел и больше не поддерживается. Пожалуйста, не используйте его в своих приложениях! ::: -Можно импортировать или экспортировать данные в формате iCal с помощью готовой утилиты или API-методов. +Устаревший экспортер/импортер реализован на PHP, поэтому приведённые ниже фрагменты кода являются примерами на PHP. Если вы используете другой бэкэнд, воспользуйтесь библиотекой iCalendar вашей платформы и сопоставьте поля со свойствами событий Scheduler. -## iCal экспортер (Фронтенд) -![ical_exporter1.png](/img/ical_exporter1.png) +У вас есть возможность импортировать/экспортировать данные формата iCal, используя либо готовую к использованию утилиту, либо методы API. -Фронтенд утилиты состоит из двух разделов: +## iCal экспортёр (клиентская часть) -- **Конфигурация ресурса** -- **Конфигурация базы данных**. +![ical_exporter1.png](/img/ical_exporter1.png) -В первом разделе указывается путь к данным. Это можно сделать, выбрав путь через открывающееся диалоговое окно (**Ical file**, кнопка "Overview") или введя его вручную (**Ical URL**). +Клиентская часть утилиты состоит из двух частей: -Второй раздел включает стандартные параметры базы данных (хост, имена базы данных и таблицы, имя пользователя и пароль), в которую будут сохраняться данные iCal. Здесь также можно выбрать, удалять ли старые данные (**Delete all data**). +- **Конфигурация ресурса** +- **Конфигурация базы данных**. -## API-методы +В первой части вы устанавливаете путь к данным. Это можно сделать либо выбрав путь из открытого диалогового окна (**файл iCal**, кнопка «Обзор») либо указав его вручную (**URL iCal**). + + +Вторая часть содержит стандартные настройки базы данных (хост, имя базы данных и имя таблицы, имя пользователя и пароль), в которые вы хотите сохранить данные iCal. Здесь также можно задать, следует ли удалять старые данные (**Удалить все данные**). -Ниже приведены API-методы, доступные для реализации экспорта/импорта iCal в приложении. +## Методы API +Здесь вы можете найти все API-методы, которые можно использовать для реализации экспорта/импорта iCal в приложении. + ### Инициализация -Чтобы настроить iCal экспортер/импортер, используйте следующий код: +Чтобы инициализировать экспортер/импортер iCal, используйте следующий код: + ~~~php require_once("codebase/class.php"); @@ -40,25 +45,27 @@ $export = new ICalExporter(); ### Импорт iCalendar -Для импорта данных iCal используются следующие методы: +Вы можете импортировать данные iCal, используя следующие методы: -- **setTitle($title)** - задаёт заголовок для файла iCal в методе toICal() +- **setTitle($title)** - устанавливает заголовок файла iCal в методе toICal() - **getTitle()** - возвращает заголовок файла iCal -- **toICal($events)** - преобразует данные из массива или XML-строки в формат iCalendar +- **toICal($events)** - преобразует информацию из массива или XML-строки в формат iCalendar ### Экспорт iCalendar -Для экспорта данных iCal используются следующие методы: +Вы можете экспортировать данные iCal, используя следующие методы: - **toHash($ical)** - преобразует строку iCal в массив событий -- **toXML($ical)** - преобразует строку iCal в формат XML +- **toXML($ical)** - преобразует строку iCal в XML-формат + #### Примеры -Ниже приведены примеры кода, демонстрирующие экспорт/импорт iCal. +Ниже приведено несколько фрагментов кода, демонстрирующих выполнение экспорта/импорта iCal. + + Установка заголовка iCalendar -В этом примере показано, как задать заголовок для импортируемых или экспортируемых данных iCalendar. +Следующий код позволяет установить заголовок импортируемых/экспортируемых данных iCalendar. ~~~php $xml = file_get_contents("events_rec.xml"); @@ -72,14 +79,14 @@ file_put_contents("ical.ics", $ical); + Массив событий -В этом примере представлен массив событий, используемый для импорта/экспорта данных из/в массив. +Это пример массива событий, который используется в импорте/экспорте данных из/в массив. ~~~php $events = array( array( "id" => 1, - "start_date" => "2010-04-05 08:00:00", - "end_date" => "2012-04-09 09:00:00", + "start_date" => "2027-04-05 08:00:00", + "end_date" => "2027-04-09 09:00:00", "text" => "text1", "rec_type" => "week_2___3,5", "event_pid" => null, @@ -88,8 +95,8 @@ $events = array( array( "id" => 2, - "start_date" => "2010-04-06 12:00:00", - "end_date" => "2010-04-06 18:00:00", + "start_date" => "2027-04-06 12:00:00", + "end_date" => "2027-04-06 18:00:00", "text" => "text2", "rec_type" => "", "event_pid" => null, @@ -98,8 +105,8 @@ $events = array( array( "id" => 3, - "start_date" => "2010-04-07 12:00:00", - "end_date" => "2010-04-07 18:00:00", + "start_date" => "2027-04-07 12:00:00", + "end_date" => "2027-04-07 18:00:00", "text" => "text3", "rec_type" => "", "event_pid" => null, @@ -108,8 +115,8 @@ $events = array( array( "id" => 4, - "start_date" => "2010-04-08 12:00:00", - "end_date" => "2010-04-08 18:00:00", + "start_date" => "2027-04-08 12:00:00", + "end_date" => "2027-04-08 18:00:00", "text" => "text4", "rec_type" => "", "event_pid" => null, @@ -119,9 +126,10 @@ $events = array( ~~~ + + Из массива в iCal -Этот пример экспортирует данные из массива в строку iCal: +Используйте этот код, чтобы экспортировать данные из массива в строку iCal: ~~~php require_once("codebase/class.php"); @@ -131,9 +139,10 @@ file_put_contents("ical.ics"); ~~~ + + Из XML в iCal -Этот пример экспортирует данные из XML в формат iCal: +Используйте этот код, чтобы экспортировать данные из XML в iCal: ~~~php $xml = file_get_contents("events_rec.xml"); @@ -144,9 +153,10 @@ file_put_contents("ical.ics"); ~~~ + + Из iCal в массив -Этот пример экспортирует данные из файла iCal в массив: +Используйте этот код, чтобы экспортировать данные из iCal в массив: ~~~php $ical = file_get_contents("ical.ics"); @@ -156,9 +166,10 @@ $events = $export->toHash($ical); ~~~ + + Из iCal в XML -Этот пример экспортирует данные из файла iCal в формат XML: +Используйте этот код, чтобы экспортировать данные из iCal в XML: ~~~php $ical = file_get_contents("ical.ics"); @@ -167,4 +178,4 @@ $export = new ICalExporter(); $xml = $export->toXML($ical); file_put_contents("events_rec.xml", $xml); -~~~ +~~~ \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/index.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/index.md new file mode 100644 index 00000000..0b64caa2 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/index.md @@ -0,0 +1,156 @@ +--- +title: "Руководства" +sidebar_label: "Руководства" +--- + +# Руководства + +Информация руководств составляет основную часть документации и помогает вам в реальном использовании dhtmlxScheduler. +Глава разделена на практические руководства по задачам, которые помогают выполнять как простые, так и сложные задачи. +Статьи сосредоточены на ключевых процедурах и задачах по решению проблем. + +Узнайте [функции, доступные в версиях Standard и PRO](guides/editions-comparison.md) библиотеки dhtmlxScheduler. + +
+ +## Создание Scheduler на странице + +Показывает, как установить и инициализировать Scheduler, а также приводит список доступных расширений. + +- ### [Инициализация Scheduler](guides/initialization.md) +- ### [Способы установки Scheduler](guides/installation.md) +- ### [Полный список расширений](guides/extensions-list.md) + +## Начало работы с фреймворками (Front-End) + +Рассказывает, как построить и настроить стандартный Scheduler на фронтенде. + +- ### [Scheduler на чистом JS/HTML](guides/initialization.md) +- ### [Scheduler с Angular](integrations/angular/howtostart-angular.md) +- ### [Scheduler с React](integrations/react/js-scheduler-react.md) +- ### [Scheduler с Vue.js](integrations/vue/howtostart-vue.md) +- ### [Scheduler с Svelte](integrations/svelte/howtostart-svelte.md) + +## Начало работы на стороне сервера + +Показывает, как построить стандартный Scheduler на различных платформах серверной стороны и запустить его в работу. + +- ### [Scheduler с ASP.NET Core](integrations/dotnet/howtostart-dotnet-core.md) +- ### [Scheduler с Node.js](integrations/node/howtostart-nodejs.md) +- ### [Scheduler с ASP.NET MVC](integrations/dotnet/howtostart-dotnet.md) +- ### [Scheduler с PHP](integrations/php/howtostart-plain-php.md) +- ### [Scheduler с Laravel](integrations/php/howtostart-php-laravel.md) +- ### [Scheduler со Slim](integrations/php/howtostart-php-slim4.md) +- ### [Scheduler с SalesForce LWC](integrations/salesforce/howtostart-salesforce.md) +- ### [Scheduler с Ruby on Rails](integrations/other/howtostart-ruby.md) + +## Версии фреймворков + +Узнайте, как интегрировать Scheduler в современные фронтенд-фреймворки. + +- ### [Обзор React Scheduler](integrations/react/overview.md) + +## Настройка Scheduler + +Показывает, как настроить Scheduler, создать несколько schedulers, локализовать UI и обеспечить доступность. + +- ### [Мобильная адаптивная версия Scheduler](guides/touch-support.md) +- ### [Общие настройки](guides/configuration.md) +- ### [Разметка Scheduler](guides/scheduler-markup.md) +- ### [RTL режим](guides/rtl-mode.md) +- ### [Локализация](guides/localization.md) +- ### [Несколько Scheduler на странице](guides/multiple-per-page.md) +- ### [Доступность](guides/accessibility.md) + +## Загрузка и хранение данных + +Обсуждает способы загрузки данных в Scheduler и интеграцию с backend. + +- ### [Загрузка данных](guides/loading-data.md) +- ### [Серверная интеграция](guides/server-integration.md) + +## Настройка видов + +Показывает, как настраивать виды Scheduler и временные рамки. + +- ### [Обзор представлений](/views/) +- ### [Пользовательские шкалы](guides/custom-scales.md) +- ### [Пользовательские представления](guides/custom-views.md) +- ### [Блокирование и пометка дат](guides/limits.md) + +## Настройка Lightbox (форма редактирования) + +Фокусируется на работе с лайтбоксом и редакторами. + +- ### [Редакторы лайтбокса](guides/lightbox-editors.md) +- ### [Пользовательские редакторы](guides/custom-lightbox-editor.md) +- ### [Манипуляции лайтбоксом](guides/lightbox-editors-manipulations.md) +- ### [Полностью настраиваемый лайтбокс](guides/custom-details-form.md) +- ### [Изменение кнопок](guides/changing-lightbox-buttons.md) + +## Управление событиями + +Охватывает операции над объектами событий. + +- ### [Операции над объектами события](guides/event-object-operations.md) +- ### [Добавление и удаление событий](guides/adding-events.md) +- ### [Фильтрация событий](guides/filtering.md) +- ### [Операции перетаскивания](guides/drag-between.md) +- ### [Периодические события](guides/recurring-events.md) +- ### [Режим только чтения](guides/readonly.md) +- ### [Валидация](guides/validation.md) +- ### [Предотвращение столкновений](guides/collisions.md) + +## Настройка событий + +Опisывает, как настраивать внешний вид и поведение событий. + +- ### [Окно события](guides/custom-events-display.md) +- ### [Цвет события](guides/custom-events-color.md) +- ### [Содержимое события](guides/custom-events-content.md) +- ### [Тултипы](guides/tooltips.md) +- ### [Панели редактирования и выбора](guides/customizing-edit-select-bars.md) +- ### [Размеры](guides/sizing.md) + +## Экспорт и импорт данных + +Охватывает форматы и техники импорта/экспорта данных. + +- ### [Интеграция с Google Calendar](integrations/google-calendar/google-calendar-sync.md) +- ### [Экспорт в PDF](export/pdf.md) +- ### [Экспорт в PNG](export/png.md) +- ### [Экспорт в Excel и iCal](export/excel.md) +- ### [Форматы сериализации](export/serialization.md) + +## Оформление и стили + +Представляет варианты стилизации GUI Scheduler. + +- ### [Скины](guides/skins.md) +- ### [Шаблоны](guides/templates.md) +- ### [Пользовательские скины](guides/custom-skins.md) + +## Работа с датами + +Обсуждает форматы дат и операции с ними. + +- ### [Спецификация форматов дат](guides/settings-format.md) +- ### [Операции с датами](guides/date-formats.md) + + +## Особые расширения и редакции + +Руководство по опциональным расширениям. + +- ### [Мини-календарь](guides/minicalendar.md) +- ### [Сообщения во всплывающих окнах и модальные окна](guides/popups-and-modals.md) +- ### [Обновления в реальном времени для нескольких пользователей](guides/multiuser-live-updates.md) +- ### [Несколько пользователей](guides/multiple-users.md) + +## Руководство по интерфейсу пользователя + +Описывает интерфейс Scheduler с точки зрения конечного пользователя. + +- ### [Графический интерфейс Scheduler](guides/user-interface.md) + +
\ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/initialization.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/initialization.md index 0ba1401d..1798ab4e 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/guides/initialization.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/initialization.md @@ -1,15 +1,15 @@ --- title: "dhtmlxScheduler на чистом JS/HTML" -sidebar_label: "dhtmlxScheduler на чистом JS/HTML" +sidebar_label: "Быстрый старт" --- import { FrameworkIcon } from '@site/src/components/FrameworkIcon'; # dhtmlxScheduler на чистом JS/HTML -При создании приложения с dhtmlxScheduler первым шагом является настройка и отображение планировщика на странице. +Когда вы разрабатываете приложение с dhtmlxScheduler, первым делом нужно инициализировать его, или, проще говоря, отобразить Scheduler на странице. -В этом руководстве описано, как инициализировать dhtmlxScheduler с использованием только JS и HTML. Для интеграции с фронтенд-фреймворками вы можете обратиться к следующим руководствам: +Этот гид рассказывает об инициализации dhtmlxScheduler в простом JS и HTML. Вы также можете ознакомиться с руководствами по интеграции с фронтенд-фреймворками:
@@ -17,7 +17,7 @@ import { FrameworkIcon } from '@site/src/components/FrameworkIcon';
React
- Use the ready-made ReactScheduler component with props and events. + Используйте готовый компонент ReactScheduler с пропсами и событиями.
@@ -25,7 +25,7 @@ import { FrameworkIcon } from '@site/src/components/FrameworkIcon';
Angular
- Integrate Scheduler into Angular projects using a thin wrapper. + Интегрируйте Scheduler в проекты на Angular с помощью тонкого обертчика.
@@ -33,7 +33,7 @@ import { FrameworkIcon } from '@site/src/components/FrameworkIcon';
Vue
- Use Scheduler inside Vue apps with a small wrapper and reactive configuration. + Используйте Scheduler во Vue-приложениях с небольшой обёрткой и реактивной конфигурацией.
@@ -41,7 +41,7 @@ import { FrameworkIcon } from '@site/src/components/FrameworkIcon';
Svelte
- Embed Scheduler in Svelte with a simple component that binds config and events. + Встраивайте Scheduler в Svelte с помощью простого компонента, который привязывает конфигурацию и события.
@@ -49,25 +49,25 @@ import { FrameworkIcon } from '@site/src/components/FrameworkIcon';
Salesforce
- Use Scheduler in Salesforce Lightning Web Components and connect it to org data. + Используйте Scheduler в Salesforce Lightning Web Components и подключайте его к данным организации.
-Существует два подхода к инициализации планировщика на странице: +Существует два способа инициализации scheduler на странице: -- [использование разметки планировщика](#initializingschedulerviamarkup) -- [использование свойства конфигурации header](#initializingschedulerviaheaderconfig) +- [через разметку Scheduler](#initializing-scheduler-via-markup) +- [через свойство конфигурации заголовка](#initializing-scheduler-via-header-config) -## Инициализация планировщика через разметку {#initializingschedulerviamarkup} +## Инициализация Scheduler через разметку -Чтобы разместить базовый планировщик на странице с помощью разметки, выполните 3 шага: +Чтобы отобразить базовый Scheduler на странице через разметку, выполните 3 шага: -1. Подключите [файлы dhtmlxScheduler](#requiredcodefiles) на вашей странице. -2. Добавьте контейнер DIV на страницу вместе с необходимыми дочерними DIV для его элементов. -3. Инициализируйте dhtmlxScheduler в созданном контейнере с помощью метода [init](api/method/init.md). Этот метод принимает HTML-контейнер (или его id), в котором будет отображаться планировщик. +1. Подключите файлы кода dhtmlxScheduler на страницу. +2. Создайте DIV‑контейнер на странице и определите соответствующие DIV‑контейнеры для его элементов. +3. Инициализируйте dhtmlxScheduler в созданном контейнере с помощью метода [init](api/method/init.md). В качестве параметра метод принимает HTML‑контейнер (или его ID), в который будет отображаться Scheduler. ~~~html @@ -101,20 +101,18 @@ import { FrameworkIcon } from '@site/src/components/FrameworkIcon'; ![Scheduler initialization](/img/init_scheduler_front.png) +[Базовая инициализация](https://docs.dhtmlx.com/scheduler/samples/01_initialization_loading/01_basic_init.html) -[Basic initialization](https://docs.dhtmlx.com/scheduler/samples/01_initialization_loading/01_basic_init.html) +## Инициализация Scheduler через конфигурацию заголовка +Вы должны инициализировать Scheduler таким способом, чтобы сделать его [адаптивным](guides/initialization.md#making-scheduler-responsive). -## Инициализация планировщика через header config {#initializingschedulerviaheaderconfig} +Чтобы отобразить базовый Scheduler на странице, выполните следующие шаги: -Этот способ рекомендуется использовать, если вы хотите сделать планировщик [адаптивным](guides/initialization.md#makingschedulerresponsive). - -Чтобы разместить базовый планировщик на странице, выполните следующие шаги: - -1. Подключите [файлы dhtmlxScheduler](#requiredcodefiles) на вашей странице. -2. Добавьте контейнер DIV на страницу. -3. Определите структуру планировщика в объекте конфигурации [header](api/config/header.md). -4. Инициализируйте dhtmlxScheduler в контейнере с помощью метода [init](api/method/init.md), передав контейнер (или его id) в качестве параметра. +1. Подключите файлы кода dhtmlxScheduler на страницу. +2. Создайте DIV‑контейнер на странице. +3. Укажите структуру Scheduler в конфигурационном объекте [header](api/config/header.md). +4. Инициализируйте dhtmlxScheduler в созданном ранее контейнере с помощью метода [init](api/method/init.md). В качестве параметра метод принимает HTML‑контейнер (или его ID), в который будет отображаться Scheduler. ~~~html @@ -140,42 +138,41 @@ import { FrameworkIcon } from '@site/src/components/FrameworkIcon'; "today", "next" ]; - scheduler.init('scheduler_here',new Date(2020,0,1),"week"); /*!*/ + scheduler.init('scheduler_here',new Date(2027,0,1),"week"); /*!*/ ~~~ -[Responsive scheduler](https://docs.dhtmlx.com/scheduler/samples/01_initialization_loading/13_touch_ui.html) +[Адаптивный Scheduler](https://docs.dhtmlx.com/scheduler/samples/01_initialization_loading/13_touch_ui.html) - -## Необходимые файлы {#requiredcodefiles} +## Необходимые файлы кода -Вам необходимо подключить следующие файлы: +Необходимые файлы кода: -- *dhtmlxscheduler.js* -- *dhtmlxscheduler.css* (также вы можете ознакомиться с доступными скинами в [Скины](guides/skins.md)) +- dhtmlxscheduler.js +- dhtmlxscheduler.css (также можно [изучить доступные скины](guides/skins.md)) ~~~html ~~~ -Ниже приведена краткая структура пакета dhtmlxScheduler, чтобы вы могли быстро найти эти файлы: +Давайте быстро исследуем структуру пакета dhtmlxScheduler, чтобы узнать, где искать файлы. -- sources - содержит исходные файлы библиотеки. Они не минифицированы и удобны для чтения, в основном используются для отладки. +- sources - исходные файлы библиотеки. Файлы не минифицированы и читаются легко. Пакет в основном предназначен для отладки компонентов. :::note -Обратите внимание, что в **Trial** версии библиотеки планировщика папка **sources** отсутствует. +Обратите внимание, что в версии **Trial** библиотеки Scheduler папка **sources** отсутствует. ::: -- samples - содержит примеры кода. -- codebase - содержит сжатые файлы библиотеки. Они имеют меньший размер и предназначены для использования в продуктивных проектах. В ваших проектах рекомендуется использовать файлы из этой папки. +- samples - примеры кода. +- codebase - упакованные файлы кода библиотеки. Эти файлы имеют значительно меньший размер и предназначены для использования в продакшне. В ваших приложениях вам нужно использовать файлы из этой папки. ## Размеры планировщика {#schedulersizing} -Планировщик занимает весь размер своего контейнера (*scheduler_here* div в приведённых выше примерах), не увеличивая размер самого контейнера. -Это означает, что если вы не зададите высоту контейнера или она будет равна нулю, планировщик также будет иметь нулевую высоту и не будет виден. +Scheduler занимает весь размер своего контейнера (*scheduler_here* див в приведённом выше примере) без его расширения. +Это означает, что если вы не укажете высоту контейнера или установите её в 0, scheduler также будет иметь нулевую высоту и не будет отображаться. -В наших примерах планировщик обычно занимает весь экран, устанавливая 100% ширины и высоты как для body документа, так и для контейнера планировщика: +В наших примерах мы обычно делаем Scheduler полноэкранным, устанавливая ширину и высоту 100% для и тела документа, и для контейнера Scheduler: ~~~html ~~~ -Кроме того, потребуется JavaScript, чтобы корректно задать верхнюю позицию для фиксированной временной шкалы, разместив её сразу под панелью навигации. +Кроме того, вам понадобится некоторый JavaScript, чтобы обеспечить правильную верхнюю позицию зафиксированной шкалы времени, размещённой чуть ниже панели навигации. -Поскольку высота панели навигации может меняться в зависимости от стилей и содержимого, её высоту нужно вычислять динамически и применять как top для заголовка, например так: +Поскольку панель навигации гибкая и может изменять свою высоту в зависимости от других стилей и содержимого, нужно динамически вычислять её высоту и применять её в качестве верхней координаты для заголовка, как показано ниже: ~~~js scheduler.attachEvent("onViewChange", function(){ @@ -295,15 +291,16 @@ scheduler.attachEvent("onViewChange", function(){ }); ~~~ -Полный пример можно посмотреть в сниппете ниже: +Проверьте полный демонстрационный пример в сниппете ниже: -**Related sample** [Container autoresize and sticky header](https://snippet.dhtmlx.com/syo8wm9s) +**Связанный пример** [Container autoresize and sticky header] ## Адаптивность Scheduler {#makingschedulerresponsive} -Когда Scheduler инициализируется с помощью [свойства header конфигурации](#initializingschedulerviaheaderconfig), можно выбрать макет заголовка, подходящий для размера экрана клиента. Также применяются определённые стили, которые позволяют элементам и шрифтам хорошо адаптироваться к небольшим экранам. +Когда вы инициализируете Scheduler через [свойство конфигурации header](#initializing-scheduler-via-header-config), вы сможете выбрать структуру заголовка, которая соответствует размеру экрана клиента. +Это также применит определённые стили, делающие элементы и размеры шрифтов адаптивными на маленьких экранах. -Больше информации доступно в отдельной статье: [Мобильная адаптивность Scheduler](guides/touch-support.md). +Вы можете найти больше деталей в отдельной статье: [Мобильный адаптивный Scheduler](guides/touch-support.md). ## Импорт файлов в приложения на ES6/7 и TypeScript {#importfilesintoes67andtypescriptapps} @@ -313,7 +310,7 @@ scheduler.attachEvent("onViewChange", function(){ import { scheduler } from 'dhtmlx-scheduler'; ~~~ -Для Commercial, Enterprise или Ultimate версий импорт выглядит так: +Для коммерческой, корпоративной или Ultimate версии команда выглядит так: ~~~js import { scheduler, Scheduler } from 'dhtmlx-scheduler'; @@ -321,7 +318,7 @@ import { scheduler, Scheduler } from 'dhtmlx-scheduler'; ## Использование Scheduler с Vite {#usingschedulerwithvite} -Если ваш проект использует Vite, добавьте следующую настройку в файл **vite.config.js**, чтобы Scheduler корректно подключался к вашему приложению: +Если вы используете Vite в проекте, для файла **vite.config.js** требуется следующая настройка, чтобы Scheduler корректно включался в приложение: ~~~js title="vite.config.js" optimizeDeps: { @@ -332,36 +329,35 @@ optimizeDeps: { ~~~ ## Добавление файлов в приложение на RequireJS {#includefilesintoarequirejsbasedapp} -------------------------------------------- -Чтобы добавить файлы dhtmlxScheduler в приложение на RequireJS, используйте следующий пример: +Чтобы подключить файлы dhtmlxScheduler в приложение на RequireJS, следуйте логике, показанной в примере ниже: ~~~js requirejs(["codebase/dhtmlxscheduler"], function(dhx){ - var scheduler = dhx.scheduler; - var Scheduler = dhx.Scheduler;// для сборок Enterprise + const scheduler = dhx.scheduler; + const Scheduler = dhx.Scheduler;// for Enterprise builds scheduler.init('scheduler_here',new Date(),"week"); scheduler.parse([ { - id: 1, text: "Event 1", start_date: "2022-07-15 09:00", - end_date: "2022-07-15 10:00" + id: 1, text: "Event 1", start_date: "2027-07-15 09:00", + end_date: "2027-07-15 10:00" }, { - id: 2, text: "Event 2", start_date: "2022-07-15 10:00", - end_date: "2022-07-15 11:00" + id: 2, text: "Event 2", start_date: "2027-07-15 10:00", + end_date: "2027-07-15 11:00" } ]); }); ~~~ -Библиотека dhtmlxScheduler возвращает объект, содержащий `scheduler` и `Scheduler` (в Commercial, Enterprise или Ultimate версиях) - это соответствуют объектам *scheduler* и *Scheduler*, описанным [здесь](guides/multiple-per-page.md). +Библиотека dhtmlxScheduler вернёт объект со свойствами `scheduler` и `Scheduler` (в коммерческих, Enterprise или Ultimate версиях) - объекты *scheduler* и *Scheduler*, описанные [здесь](guides/multiple-per-page.md). :::note -При использовании Scheduler с пользовательскими расширениями в RequireJS обязательно указывайте конфигурацию `shim` для RequireJS и объявляйте зависимости расширений от Scheduler. +При использовании Scheduler с пользовательскими расширениями в RequireJS следует указать конфигурацию `shim` для RequireJS и напрямую задать зависимость расширений от Scheduler в ней. ::: -Ниже приведён пример правильного подключения пользовательского расширения *custom_tooltip_plugin.js*: +Ниже приведён пример, демонстрирующий, как файл пользовательского расширения *custom_tooltip_plugin.js* можно корректно подключить: ~~~js requirejs.config({ @@ -376,24 +372,24 @@ requirejs.config({ requirejs(["dhtmlxscheduler"], function (dhx) { - var scheduler = dhx.scheduler; + const scheduler = dhx.scheduler; scheduler.init('scheduler_here',new Date(),"week"); scheduler.parse([ { - id: 1, text: "Event 1", start_date: "2022-07-15 09:00", - end_date: "2022-07-15 10:00" + id: 1, text: "Event 1", start_date: "2027-07-15 09:00", + end_date: "2027-07-15 10:00" }, { - id: 2, text: "Event 2", start_date: "2022-07-15 10:00", - end_date: "2022-07-15 11:00" + id: 2, text: "Event 2", start_date: "2027-07-15 10:00", + end_date: "2027-07-15 11:00" } ]); }); ~~~ -Убедитесь, что имя модуля для любого файла внутри пакета указывается как *относительный путь внутри папки 'codebase' пакета* плюс *имя файла*, например: +Проверьте, что имя модуля для любого файла внутри пакета указано как *относительный путь внутри папки 'codebase' пакета* плюс *имя файла*, например: -**основная библиотека:** +**ядро библиотеки:** -- "dhtmlxscheduler": "./vendor/dhtmlxscheduler/dhtmlxscheduler" +- "dhtmlxscheduler": "./vendor/dhtmlxscheduler/dhtmlxscheduler" \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/integration-with-bootstrap.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/integration-with-bootstrap.md deleted file mode 100644 index 69127644..00000000 --- a/i18n/ru/docusaurus-plugin-content-docs/current/guides/integration-with-bootstrap.md +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: "Интеграция с Bootstrap" -sidebar_label: "Интеграция с Bootstrap" ---- - -# Интеграция с Bootstrap - -Библиотека Scheduler легко интегрируется с фреймворком Bootstrap. Чтобы включить Scheduler в приложение на основе Bootstrap, выполните следующие шаги: - -1. Добавьте скрипт dhtmlxScheduler в ваше приложение: - -~~~html - -~~~ - -2. Настройте HTML-структуру с использованием компонентов Bootstrap, включая контейнер для Scheduler и элементы заголовка, например: - -~~~html -
-
-
- dhtmlxScheduler -
-
- - -
- -
-
- -~~~ - -3. Инициализируйте и настройте Scheduler как обычно: - -~~~js -scheduler.plugins({ - year_view: true, -}); -scheduler.config.first_hour = 8; -scheduler.config.limit_time_select = true; - -scheduler.init('scheduler_here',new Date(2017,5,30),"week"); -~~~ - - -[Bootstrap layout](https://docs.dhtmlx.com/scheduler/samples/10_integration/08_bootstrap.html) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/integration-with-dhtmlxmessage.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/integration-with-dhtmlxmessage.md deleted file mode 100644 index 7383c4e3..00000000 --- a/i18n/ru/docusaurus-plugin-content-docs/current/guides/integration-with-dhtmlxmessage.md +++ /dev/null @@ -1,369 +0,0 @@ ---- -title: "Всплывающие сообщения и модальные окна" -sidebar_label: "Всплывающие сообщения и модальные окна" ---- - -# Всплывающие сообщения и модальные окна - -Сообщения в Scheduler используются для информирования пользователей об ошибках, подтверждения или отклонения действий, выбора опций и т.д. Сообщения Scheduler основаны на [форке репозитория dhtmlxMessage](https://github.com/DHTMLX/message), поэтому все возможности dhtmlxMessage доступны и для сообщений dhtmlxScheduler. - -Существует две основные категории сообщений: [простое всплывающее сообщение](#basicpopupmessage) и [модальное сообщение](#modalmessageboxes) с кнопками, блокирующее взаимодействие с приложением. - -Модальное окно может быть одного из трёх типов: - -- [Окно с сообщением (Alert)](#alert) -- [Окно подтверждения (Confirm)](#confirm) -- [Модальное окно (Modalbox)](#modal) - - -## Простое всплывающее сообщение - -Для отображения простого модального окна используйте метод [scheduler.message](api/method/message.md). Единственный обязательный параметр - текст сообщения: - -~~~js -scheduler.message("The event is updated"); -~~~ - -Существует три вида всплывающих окон: - -- окно по умолчанию (**type:"info"**) - -![default_message](/img/default_message.png) - -- окно с ошибкой (**type:"error"**) - -![error_message](/img/error_message.png) - -- окно с предупреждением (**type:"warning"**) - -![warning_message](/img/warning_message.png) - -Чтобы создать определённый тип окна, задайте свойство *type* с соответствующим значением: - -~~~js -// создание окна с ошибкой -scheduler.message({ - text: "Click on the buttons to explore Scheduler message types", - expire: -1, - type: "error" -}); -~~~ - - -[Different types of popups and modal boxes](https://docs.dhtmlx.com/scheduler/samples/09_api/11_popups_and_messages.html) - - -Для кастомизации внешнего вида окна укажите CSS-класс через параметр type, как описано [здесь](#styling). - -### Позиционирование окон сообщений - -По умолчанию всплывающие окна появляются в правом верхнем углу окна. В отличие от [модальных окон](#modalmessageboxes), они не блокируют взаимодействие с приложением. Позицию можно изменить с помощью свойства **scheduler.message.position**: - -~~~js -scheduler.message.position = 'bottom'; -~~~ - -Возможные значения позиции сообщения: - -- **top** - окно отображается в правом верхнем углу (по умолчанию) -- **bottom** - окно отображается в правом нижнем углу -- **left** - окно отображается слева под Gantt -- **right** - окно отображается справа под Gantt - -### Интервал показа (Expire Interval) - -Вы можете управлять временем отображения окна, задав параметр *expire*, который определяет длительность (в миллисекундах) до исчезновения сообщения. По умолчанию - 4000 мс. - -Чтобы изменить длительность или сделать так, чтобы сообщение не исчезало автоматически, установите *expire* в "-1". В этом случае сообщение закроется только при клике. - -~~~js -scheduler.message({ - type:"error", - text:"Invalid data format", - expire:10000 -}); -~~~ - -### Скрытие окна сообщения через API - -Чтобы вручную скрыть определённое всплывающее окно до истечения времени, используйте метод **scheduler.message.hide(boxId)**. Он принимает один аргумент: - -- **boxId** - идентификатор, присвоенный сообщению при создании - -~~~js -scheduler.message({ - id:"myBox", - text:"Page is loaded" -}); - -scheduler.message.hide("myBox"); -~~~ - -## Модальные окна сообщений - -Модальные окна блокируют взаимодействие с приложением до выполнения необходимого действия, обычно по клику на кнопку. После этого окно закрывается и вызывается callback-функция, если она была передана. - -Существует три типа модальных окон: - -- [Alert Message Box](#alert) - окно с одной кнопкой -- [Confirm Message Box](#confirm) - окно с двумя кнопками (подтвердить или отменить) -- [Modalbox](#modal) - окно с произвольным количеством кнопок - -Общие параметры: - -- **id** - идентификатор окна -- **title** - текст заголовка -- **type** - тип сообщения (например, warning или error) -- **text** - основной текст сообщения -- **ok** - текст кнопки "OK" -- **cancel** - текст кнопки "Cancel" (только для confirm) -- **callback** - функция, вызываемая при клике на кнопку, получает *true* или *false* в зависимости от нажатой кнопки -- **position** - поддерживается только "top"; другие значения выравнивают окно по центру -- **width** - ширина модального окна (CSS [length](https://developer.mozilla.org/en-US/docs/Web/CSS/length) или [percentage](https://developer.mozilla.org/en-US/docs/Web/CSS/percentage), например, "100px", "50%") -- **height** - высота модального окна (CSS [length](https://developer.mozilla.org/en-US/docs/Web/CSS/length) или [percentage](https://developer.mozilla.org/en-US/docs/Web/CSS/percentage), например, "100px", "50%") - -## Окно с сообщением (Alert) (#alert) - -![alert](/img/alert.png) - -Alert-окно содержит одну кнопку "OK". Чтобы задать текст кнопки, используйте параметр *ok*: - -- короткая форма (только текст сообщения, *text* задаётся автоматически, остальные параметры - по умолчанию): - -~~~js -scheduler.alert("Text"); -~~~ - -- полная форма (можно задать несколько параметров, неуказанные - по умолчанию): - -~~~js -scheduler.alert({ - text: "some text", - title: "Alert", - ok: "Ok", - callback: function(){...} -}); -~~~ - - -## Окно подтверждения (Confirm) (#confirm) - -![confirm](/img/confirm.png) - -Окно подтверждения содержит две кнопки: "OK" и "Cancel". Их текст задаётся соответствующими параметрами. - -- короткая форма - -~~~js -scheduler.confirm("ConfirmText"); -~~~ - -- полная форма - -~~~js -scheduler.confirm({ - title:"Confirm", - text:"This is a simple confirm", - ok:"Ok", - cancel:"Cancel", - callback: function(result){ - if(result){ - scheduler.message("You clicked Ok"); - }else{ - scheduler.message("You clicked Cancel"); - } - } -}); -~~~ - - -## Модальное окно (Modalbox) (#modal) - -![modalbox](/img/modalbox.png) - -Модальное окно (modalbox) обладает рядом особенностей: - -- *text* может содержать любой *HTML* контент -- поддерживает несколько кнопок, указанных в массиве *buttons*, каждая с собственным текстом -- функция *callback* получает индекс нажатой кнопки в качестве параметра - -~~~js -scheduler.modalbox({ - title:"Settings", - text: " ... html code here... ", - buttons:["Save", "Defaults", "Cancel"], - callback: function(result){ - scheduler.alert(result); - } -}); -~~~ - - -### Настройка кнопок modalbox - -Есть два основных способа настройки кнопок modalbox: - -- короткая форма: - -~~~js -scheduler.modalbox({ - // другие параметры - buttons:["Save", "Delete", "Cancel"], - callback: function(result){ - switch(result){ - case "0": - //Save - break; - case "1": - //Delete - break; - case "2": - //Cancel - break; - } - } -}); -~~~ - -В этом случае callback получает строковый индекс нажатой кнопки ("0", "1", "2", ...). Каждая кнопка получает CSS-класс на основе текста (в нижнем регистре), например: *scheduler_**save**_button*, *scheduler_**delete**_button*, *scheduler_**cancel**_button*. - -Эти классы можно использовать для стилизации кнопок: - -~~~js -.scheduler_delete_button div{ - background:red; -} -~~~ - -Если несколько всплывающих окон используют одинаковые имена кнопок, но требуют разного оформления, можно использовать свойство **type**: - -~~~js -scheduler.modalbox({ - // другие параметры - type:"special_popup", - buttons:["Save", "Delete", "Cancel"] -}); -~~~ - -Значение **type** добавляется с префиксом "scheduler_" как класс к элементу popup: - -~~~js -.scheduler_special_popup .scheduler_delete_button div{ - background:red; -} -~~~ - -- полная форма: - -Можно явно задать подписи кнопок, CSS-классы и значения для callback с помощью более детальной конфигурации: - -~~~js -scheduler.modalbox({ - // другие параметры - buttons: [ - { label:"Save", css:"link_save_btn", value:"save" }, - { label:"Cancel", css:"link_cancel_btn", value:"cancel" }, - { label:"Delete", css:"link_delete_btn", value:"delete" } - ], - callback: function(result){ - switch(result){ - case "save": - //Save - break; - case "cancel": - //Cancel - break; - case "delete": - //Delete - break; - } - } -}); -~~~ - -Только параметр **label** обязателен; **css** и **value** - опциональны. Если они не указаны, CSS-класс формируется из текста кнопки в нижнем регистре, а значением выступает индекс кнопки. - -CSS-класс **css** добавляется с префиксом "scheduler_" к элементу кнопки: - -~~~js -.scheduler_link_delete_btn div{ - background:red; -} -~~~ - -## Скрытие модальных окон - -Чтобы вручную закрыть модальное окно, используйте метод **scheduler.modalbox.hide()**, передав контейнер модального окна: - -~~~js -var box = scheduler.modalbox({ - title: "Settings", - text: " ... html code here... ", - buttons: ["Save", "Defaults", "Cancel"], - callback: function(result){ - scheduler.alert(result); - } -}); - -scheduler.modalbox.hide(box); -~~~ - -Для окон **alert** и **confirm** используется тот же метод **scheduler.modalbox.hide()**: - -~~~js -var box = scheduler.confirm({ - text: "Continue?", - ok:"Yes", - cancel:"No", - callback: function(result){ - scheduler.message("Result: "+result); - } -}); - -scheduler.modalbox.hide(box); -~~~ - - -## Стилизация - -Вы можете изменить внешний вид любого окна сообщения, определив CSS-стили. Обычно CSS-класс указывается через параметр *type*: создайте CSS-класс и присвойте его имя параметру *type*. - -Обратите внимание на следующие рекомендации по параметру 'type': - -- Для стилизации окон alert и confirm инициализируйте их через 'window-related' метод. -- Для стилизации всплывающих сообщений используйте 'common' метод. -- Имена CSS-классов должны начинаться с префикса 'scheduler-'. -- Для корректного применения стилей используйте селекторы типа **.scheduler-some div** внутри сообщений scheduler. - -Пример: - -~~~js - - - -scheduler.message({ type:"myCss", text:"some text" }); -~~~ - -## Модальные окна и взаимодействие с клавиатурой - -Поведение клавиатуры для модальных окон регулируется свойством **scheduler.message.keyboard**, по умолчанию оно *true*. - -Если включено, модальные окна блокируют большинство клавиатурных событий на странице. Активны только следующие клавиши: - -- "space" и "enter" - возвращают *true* в модальном окне -- "escape" - возвращает *false* - -Если установить **scheduler.message.keyboard** в *false*, блокировка отключается и становится возможным полноценный ввод с клавиатуры, что удобно для ввода данных в модальных окнах: - -~~~js -scheduler.message.keyboard = false; -scheduler.modalbox({...}); -~~~ - -Это позволяет использовать клавиатуру внутри модальных окон в обычном режиме. diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/keyboard-navigation.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/keyboard-navigation.md index d8212d08..8f08974f 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/guides/keyboard-navigation.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/keyboard-navigation.md @@ -1,15 +1,15 @@ --- -title: "Навигация с помощью клавиатуры" -sidebar_label: "Навигация с помощью клавиатуры" +title: "Клавиатурная навигация" +sidebar_label: "Навигация с клавиатуры" --- -# Навигация с помощью клавиатуры +# Клавиатурная навигация -Scheduler и его элементы могут быть доступны с помощью отдельных клавиш или их комбинаций. В этой статье описано всё, что нужно знать о навигации с клавиатуры в Scheduler: как работает фокус, встроенные сочетания клавиш и как создавать собственные. +Вы можете получить доступ к Scheduler и его элементам с помощью клавиш или их комбинаций. Эта статья даст вам всю необходимую информацию об особенностях клавиатурной навигации в Scheduler, включая поведение фокуса, использование готовых сочетаний клавиш и создание пользовательских. -## Включение функциональности {#enablingthefunctionality} +## Включение функциональности -Чтобы включить навигацию с клавиатуры в Scheduler, просто активируйте расширение **key_nav** на вашей странице. +Чтобы использовать клавиатурную навигацию в Scheduler, нужно включить на странице расширение **key_nav**. ~~~js scheduler.plugins({ @@ -17,36 +17,36 @@ scheduler.plugins({ }); ~~~ -## Поведение фокуса при навигации с клавиатуры {#focusbehaviorduringkeyboardnavigation} +## Поведение фокуса во время клавиатурной навигации ### Фокус на Scheduler -Нажатие клавиши Tab устанавливает фокус на Scheduler, как и на любой другой элемент. После получения фокуса можно перемещаться внутри Scheduler с помощью стрелок и других сочетаний клавиш. +Когда нажата клавиша Tab, фокус переходит на Scheduler так же, как и на любой обычный элемент. После этого для навигации по Scheduler можно использовать клавиши со стрелками и другие. -Повторное нажатие Tab переводит фокус с Scheduler на другой элемент страницы. +Когда клавиша Tab нажата второй раз, фокус покидает Scheduler и перемещается в другое место на странице. ### Фокус на модальном окне -Когда открывается модальное окно (например, lightbox или окно подтверждения), фокус переключается с Scheduler на это окно, что позволяет перемещаться внутри него так же, как в обычной форме. После закрытия окна фокус возвращается к Scheduler. +Когда открывается модальное окно (lightbox, окно подтверждения), фокус перемещается с Scheduler на это окно, и навигация происходит внутри него как в простой форме. Когда окно закрывается, фокус возвращается к Scheduler. -Чтобы программно вернуть фокус к Scheduler, используйте метод [focus](api/method/focus.md): +Чтобы вернуть фокус обратно к Scheduler, нужно использовать метод [focus](api/method/focus.md). ~~~js scheduler.focus(); ~~~ -Когда Scheduler снова получает фокус, он устанавливает его на активный элемент внутри себя, первую строку или последний выбранный элемент. +Когда Scheduler снова получает фокус, он устанавливает фокус на активном элементе внутри него, или на первую строку, или на последний выбранный элемент. -Стандартные действия навигации внутри модального окна: +Стандартные действия навигации в модальном окне следующие: -- *Enter* - подтвердить и закрыть -- *Escape* - закрыть без сохранения изменений +- *Enter* — подтвердить и закрыть +- *Escape* — закрыть без изменений -Если фокус находится на кнопке формы, нажатие *Space* или *Enter* активирует действие этой кнопки вместо стандартного поведения. +Если фокус установлен на какой-либо кнопке формы, нажатие *Space* или *Enter* вызовет нажатие кнопки, на которую установлен фокус, а не действие. -## Стилизация ячеек в фокусе {#stylingcellsinfocus} +## Стилизация ячеек в фокусе -Ячейки, находящиеся в фокусе, по умолчанию подсвечиваются серым/жёлтым фоном. Чтобы изменить этот стиль, модифицируйте CSS-класс **.dhx_focus_slot**: +Когда устанавливается фокус на ячейку, она подсвечивается серым/желтым цветом. Если нужно изменить этот стиль, используйте CSS-класс **.dhx_focus_slot**: ~~~js ~~~ -## Области действия {#scopes} +## Контексты -Действия с клавиатурой зависят от контекста, то есть разные сочетания клавиш могут быть назначены различным элементам (областям) внутри Scheduler. Доступные области: +Действие, вызываемое по клику клавишей, зависит от контекста. Это означает, что разные действия могут быть привязаны к разным элементам (контекстам). В Scheduler существуют следующие элементы контекста (scopes): -- **"scheduler"** - Весь Scheduler -- **"timeSlot"** - Временной слот -- **"event"** - Событие -- **"minicalDate"** - Дата в мини-календаре -- **"minicalButton"** - Кнопка-стрелка в мини-календаре +- **"scheduler"** - весь Scheduler +- **"timeSlot"** - таймслот +- **"event"** - событие +- **"minicalDate"** - дата в мини-календаре +- **"minicalButton"** - кнопка-стрелка в мини-календаре -Если одно и то же сочетание клавиш назначено нескольким областям, приоритет будет у того, что привязано к более специфичному элементу. Например, сочетание на событии перекроет такое же сочетание для всего Scheduler. +Если одно и то же сочетание клавиш привязано к нескольким контекстам, сработает более специфическое сочетание. Это значит, что если одно и то же сочетание клавиш привязано к Scheduler и к его элементу, будет вызываться сочетание, привязанное к элементу, а не ко всему Scheduler. ### Добавление сочетания клавиш -Чтобы добавить новое сочетание клавиш, используйте метод [addShortcut](api/method/addshortcut.md) с тремя параметрами: +Чтобы создать новое сочетание клавиш, нужно использовать метод [addShortcut](api/method/addshortcut.md) и передать ему три параметра: -- **shortcut** - (*string*) клавиша или комбинация клавиш -- **handler** - (*function*) функция, вызываемая при срабатывании сочетания -- **scope** - (*string*) элемент-контекст, к которому привязывается обработчик +- **shortcut** — (*string*) новое сочетание клавиш или название сочетания клавиш +- **handler** — (*function*) функция-обработчик, которая будет вызвана при вызове сочетания клавиш +- **scope** — (*string*) название элемента контекста, к которому привязана функция-обработчик ~~~js scheduler.addShortcut("shift+w", function(e){ - var target = e.target; + const target = e.target; if(target.closest("[event_id]")) - var eventId = target.getAttribute("event_id"); + const eventId = target.getAttribute("event_id"); if(eventId) scheduler.showQuickInfo(eventId); @@ -89,10 +89,10 @@ scheduler.addShortcut("shift+w", function(e){ ### Удаление сочетания клавиш -Чтобы удалить сочетание из области, используйте метод [removeShortcut](api/method/removeshortcut.md) с двумя параметрами: +Чтобы удалить сочетание клавиш из контекста, нужно использовать метод [removeShortcut](api/method/removeshortcut.md). Метод принимает два параметра: -- **shortcut** - (*string*) клавиша или комбинация клавиш -- **scope** - (*string*) элемент-контекст, из которого нужно удалить сочетание +- **shortcut** — (*string*) имя клавиши или комбинации клавиш для сочетания +- **scope** — (*string*) название элемента контекста, к которому привязано сочетание ~~~js scheduler.removeShortcut("shift+w","event"); @@ -100,64 +100,65 @@ scheduler.removeShortcut("shift+w","event"); ### Получение обработчика сочетания клавиш -Можно получить функцию-обработчик сочетания с помощью [getShortcutHandler](api/method/getshortcuthandler.md), который принимает: +Получить обработчик клавиатурного сочетания можно с помощью метода [getShortcutHandler](api/method/getshortcuthandler.md). Он принимает два параметра: -- **shortcut** - (*string*) клавиша или комбинация клавиш -- **scope** - (*string*) элемент-контекст, к которому привязано сочетание +- **shortcut** — (*string*) имя клавиши или комбинации клавиш для сочетания +- **scope** — (*string*) название элемента контекста, к которому привязано сочетание ~~~js -var shortcut_handler = scheduler.getShortcutHandler("shift+w","event"); +const shortcut_handler = scheduler.getShortcutHandler("shift+w","event"); ~~~ -Этот метод возвращает функцию, обрабатывающую сочетание клавиш. +Метод возвращает функцию, которая представляет обработчик вызова сочетания клавиш. -## Синтаксис сочетаний клавиш {#shortcutsyntax} +## Синтаксис сочетания клавиш -Сочетания клавиш могут состоять из: +Клавиатурное сочетание может состоять из следующих клавиш или комбинаций клавиш: -- модификатора и символьной клавиши (например, "ctrl+a"); -- модификатора и несимвольной клавиши (например, "ctrl+space"); -- одной символьной клавиши (например, "a"); -- одной несимвольной клавиши (например, "space"). +- модификаторная клавиша + символическая клавиша ("ctrl+a"); +- модификаторная клавиша + несимволическая клавиша ("ctrl+space"); +- символическая клавиша ("a"); +- несимволическая клавиша ("space") -Несколько комбинаций клавиш могут вызывать одно действие, если перечислить их через запятую, например: "ctrl+a, ctrl+space". +Для одного действия может быть несколько сочетаний клавиш. В этом случае все комбинации перечислены через запятую: "ctrl+a, ctrl+space". -### Список поддерживаемых клавиш для сочетаний +### Список поддерживаемых клавиш для использования в сочетаниях -- Клавиши-модификаторы: **shift**, **alt**, **ctrl**, **meta** -- Несимвольные клавиши: **backspace**, **tab**, **enter**, **esc**, **space**, **up**, **down**, **left**, **right**, **home**, **end**, **pageup**, **pagedown**, **delete**, **insert**, **plus**, **f1-f12** +- модификаторы: **shift**, **alt**, **ctrl**, **meta**; +- несимволические клавиши: **backspace**, **tab**, **enter**, **esc**, **space**, **up**, **down**, **left**, **right**, **home**, **end**, **pageup**, **pagedown**, **delete**, +**insert**, **plus**, **f1-f12**. -## Существующие сочетания клавиш {#existingshortcuts} +## Существующие сочетания клавиш -Scheduler содержит набор предустановленных сочетаний для навигации: +Существует набор готовых сочетаний клавиш, которые можно использовать для навигации по Scheduler: ### Общие сочетания клавиш -- **Tab** - фокус на Scheduler -- **Alt+1, Alt+2, Alt+3, ...** - переключение между представлениями -- **Ctrl+Left/Right** - переход к предыдущей/следующей дате -- **Ctrl+Up/Down** - прокрутка области данных -- **Ctrl+Enter** - создание нового события -- **E, Shift+E** - выбор следующего/предыдущего события -- **Home** - переход к текущей дате -- **Ctrl+C, Ctrl+X, Ctrl+V** - копировать, вырезать и вставить событие +- **Tab** — устанавливает фокус на Scheduler +- **Alt+1,Alt+2,Alt+3,...** — переключение между представлениями +- **Ctrl+Left/Right** — переход к следующей/предыдущей дате +- **Ctrl+Up/Down** — прокрутка области данных +- **Ctrl+Enter** — создание нового события +- **E, Shift+E** — выбор следующего/предыдущего события +- **Home** — переключение на текущую дату +- **Ctrl+C, Ctrl+X, Ctrl+V** — копирование/вырезание/вставка события -### Сочетания для временных слотов +### Сочетания клавиш для таймслотов -- **Стрелки Up/Down/Left/Right** - перемещение между временными слотами -- **Shift+стрелки Up/Down/Left/Right** - расширение выбранного временного слота -- **Enter** - создать событие в выбранном слоте +- **Up/Down/Left/Right Arrow Keys** — навигация по таймслотам +- **Shift+Up/Down/Left/Right Arrow Keys** — расширение таймслота +- **Enter** — создание события в выбранном таймслоте -### Сочетания для событий +### Сочетания клавиш для событий -- **Стрелки Up/Down/Left/Right** - переход к временному слоту -- **Enter** - открыть lightbox +- **Up/Down/Left/Right Arrow Keys** — переход к таймслоту +- **Enter** — открыть lightbox -### Сочетания для мини-календаря +### Сочетания клавиш для мини-календаря -- **Tab** - фокус на мини-календаре -- **Стрелки Up/Down/Left/Right** - навигация по кнопкам и датам -- **Enter** - активировать выбранную кнопку или дату +- **Tab** — устанавливает фокус на мини-календарь +- **Up/Down/Left/Right Arrow Keys** — навигация по кнопкам/клеткам +- **Enter** — клик по кнопке/клетке [Keyboard Navigation and WAI-ARIA - Flat Skin](https://docs.dhtmlx.com/scheduler/samples/13_accessibility/01_regular_skin_all_views.html) @@ -168,4 +169,4 @@ Scheduler содержит набор предустановленных соч - [onEventCopied](api/event/oneventcopied.md) - [onEventCut](api/event/oneventcut.md) -- [onEventPasted](api/event/oneventpasted.md) +- [onEventPasted](api/event/oneventpasted.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/lightbox-editors-manipulations.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/lightbox-editors-manipulations.md index 5bf7124c..864aefc9 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/guides/lightbox-editors-manipulations.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/lightbox-editors-manipulations.md @@ -1,29 +1,27 @@ --- -title: "Манипуляции с Lightbox" -sidebar_label: "Манипуляции с Lightbox" +title: "Манипуляции с Lightbox" +sidebar_label: "Манипуляции с Lightbox" --- # Манипуляции с Lightbox -## Получение/установка значения элемента управления {#gettingsettingthecontrolvalue} +## Получение/установка значения элемента управления секцией -Чтобы получить или изменить значение контрола секции, используйте объект [formSection](api/method/formsection.md) следующим образом: +Чтобы получить/установить значение элемента управления секции, используйте объект [formSection](api/method/formsection.md) как в примере: ~~~js -// получить значение -var value = scheduler.formSection('description').getValue(); +//чтобы получить значение +const value = scheduler.formSection('description').getValue(); -// установить значение +//чтобы установить значение scheduler.formSection('description').setValue('abc'); ~~~ +[Установка/получение значений элементов управления Lightbox](https://docs.dhtmlx.com/scheduler/samples/02_customization/22_opertions_with_lightbox.html) -[Setting/getting values of lightbox's controls](https://docs.dhtmlx.com/scheduler/samples/02_customization/22_opertions_with_lightbox.html) +## Открытие Lightbox одним кликом - -## Открытие lightbox по одному клику {#openingthelightboxonasingleclick} - -Вы можете настроить открытие lightbox по одному клику. Для этого используйте событие [onClick](api/event/onclick.md) вместе с методом [showLightbox](api/method/showlightbox.md): +Можно открыть существующий Lightbox одним кликом. Для этого используйте событие [onClick](api/event/onclick.md) и метод [showLightbox](api/method/showlightbox.md): ~~~js scheduler.attachEvent("onClick", function (id, e){ @@ -32,36 +30,36 @@ scheduler.attachEvent("onClick", function (id, e){ }); ~~~ -**Related sample** [Opening the lightbox on one click](https://snippet.dhtmlx.com/5/50e639d2a) +**Связанный пример** [Opening the lightbox on one click](https://snippet.dhtmlx.com/5/50e639d2a) -С такой настройкой при клике левой кнопкой мыши по блоку события откроется lightbox. +Lightbox откроется, когда пользователь нажмет левую кнопку мыши по области события. -## Проверка, открыт ли lightbox {#checkingwhetherthelightboxisopened} +## Проверка того, открыт ли Lightbox -Чтобы узнать, открыт ли сейчас lightbox, проверьте свойство **lightbox_id** из объекта состояния, возвращаемого методом [getState](api/method/getstate.md). -Если lightbox открыт, будет возвращён id события в lightbox; если нет - 'null' или 'undefined': +Чтобы проверить, открыт ли Lightbox в данный момент, используйте свойство **lightbox_id** объекта состояния, возвращаемого методом [getState](api/method/getstate.md). +Если Lightbox открыт, метод вернет id открытого события, в противном случае вернется null или undefined: ~~~js if (scheduler.getState().lightbox_id){ - // обработка случая, когда lightbox открыт + //код для открытого Lightbox } else { - // обработка случая, когда lightbox закрыт + //код для закрытого Lightbox } ~~~ -## Связывание свойств объекта события с секциями lightbox {#mapping-properties-of-an-event-object-to-the-lightbox-sections} +## Связывание свойств объекта события с секциями Lightbox -Чтобы связать свойство объекта события с секцией lightbox, выполните следующие шаги: +Чтобы связать свойство объекта события с секцией Lightbox, сделайте следующее: -- Убедитесь, что ваш источник данных предоставляет события в [поддерживаемом формате](guides/data-formats.md) +- Убедитесь, что ваш источник данных возвращает события в [поддерживаемом формате](guides/data-formats.md) ~~~js { "data":[ { "id":"1", - "start_date":"2019-03-02 00:00:00", - "end_date":"2019-03-04 00:00:00", + "start_date":"2027-03-02 00:00:00", + "end_date":"2027-03-04 00:00:00", "text":"Graduation ceremony", "type":"1", "location":"London" @@ -71,12 +69,12 @@ if (scheduler.getState().lightbox_id){ } ~~~ -Обратите внимание, что все свойства, возвращаемые вашим источником данных, добавляются к объектам событий и доступны через [клиентский API](guides/event-object-operations.md). +Примечание: все свойства, возвращаемые вашим источником данных, будут добавлены к объектам событий и будут доступны через [client-side API](guides/event-object-operations.md). -- Чтобы связать контрол lightbox с определённым свойством, укажите свойство **map_to** секции с именем свойства события: +- Чтобы связать элемент управления Lightbox с конкретным свойством, укажите имя свойства события в свойство **map_to** раздела: ~~~js -scheduler.config.lightbox.sections="[" +scheduler.config.lightbox.sections=[ {name:"description", height:70, map_to:"text", type:"textarea" , focus:true}, {name:"locationInput", height:35, map_to:"location", type:"textarea" }, {name:"typeSelect", map_to:"type", type:"select", options:scheduler.serverList("types")}, @@ -84,29 +82,27 @@ scheduler.config.lightbox.sections="[" ]; ~~~ -[time](guides/time.md) и [recurring](guides/recurring-events.md#recurringlightbox) контролы являются исключениями, так как всегда связаны с фиксированными свойствами (**event.start_date/event.end_date** и **event.rec_type/event.event_length/event.event_pid** соответственно). +Исключения составляют управляющие элементы [time] и [recurring], которые всегда сопоставляются фиксированным свойствам (**event.start_date/event.end_date** и **event.rec_type/event.event_length/event.event_pid** соответственно). -## Автоматическая дата окончания в контроле Time {#automatic-end-date-in-the-time-control} +## Автоматическая конечная дата в контроле Time -Чтобы задать стандартную длительность события и автоматически обновлять дату окончания для сохранения этой длительности, настройте следующие параметры: +Чтобы задать начальную продолжительность событий и чтобы конечная дата автоматически изменялась, чтобы сохранить это значение, используйте свойства [event_duration](api/config/event_duration.md) и [auto_end_date](api/config/auto_end_date.md): ~~~js -// укажите длительность события в минутах для параметра auto_end_time +//укажите длительность события в минутах для параметра auto_end_time scheduler.config.event_duration = 60; scheduler.config.auto_end_date = true; ~~~ +[Автоматическая конечная дата](https://docs.dhtmlx.com/scheduler/samples/02_customization/11_auto_end_date.html) -[Automatic end date](https://docs.dhtmlx.com/scheduler/samples/02_customization/11_auto_end_date.html) - - -Теперь, когда пользователь изменяет время или дату начала события в lightbox, время и дата окончания будут автоматически подстраиваться так, чтобы длительность события оставалась 60 минут (как указано в опции [event_duration](api/config/event_duration.md)). +При такой конфигурации каждый раз, когда пользователь изменяет время начала события или дату начала в Lightbox, время/дата окончания события будут изменяться автоматически, чтобы продолжительность события была равна 60 минут (значение опции [event_duration]). -## Установка значения по умолчанию для контрола lightbox {#setting-the-default-value-for-a-lightboxs-control} +## Установка значения по умолчанию для элемента управления Lightbox -Чтобы задать значение по умолчанию для секции lightbox, используйте свойство **default_value** этой секции. +Чтобы задать значение по умолчанию для секции Lightbox, используйте свойство **default_value** объекта секции. -Например, если добавлена пользовательская секция для местоположения события с именем 'Location', по умолчанию она будет пустой при создании нового события. Чтобы по умолчанию отображался определённый адрес (например, Гринвичская обсерватория), настройте lightbox так: +Например, вы добавили на Lightbox пользовательскую секцию, которая отображает место расположения события, и назвали её «Location». При создании нового события поле будет пустым. Чтобы корректировать такое поведение и, скажем, по умолчанию отображать адрес Greenwich Observatory, задайте Lightbox так: ~~~js scheduler.config.lightbox.sections = [ @@ -117,167 +113,162 @@ scheduler.config.lightbox.sections = [ ]; ~~~ -Обратите внимание, что **default_value** задаёт стандартное содержимое только для секции lightbox, а не для нового события. Это означает, что новое событие получит это значение только после открытия lightbox и сохранения события. +Примечание: свойство **default_value** задает значение по умолчанию для секции Lightbox, а не для нового события, то есть новое событие получит указанное значение только после того, как пользователь откроет Lightbox и сохранит событие. -Чтобы присвоить значение по умолчанию непосредственно при создании новых событий, используйте событие [onEventCreated](api/event/oneventcreated.md): +Чтобы установить значение по умолчанию непосредственно для новых событий, используйте событие [onEventCreated](api/event/oneventcreated.md): ~~~js scheduler.attachEvent("onEventCreated", function(id,e){ scheduler.getEvent(id).location = 'Blackheath Avenue London, Greenwich...'; - scheduler.updateEvent(id); // отрисовка обновлённого события + scheduler.updateEvent(id); // отрисовывает обновленное событие return true; }); ~~~ -## Изменение порядка и удаление селекторов даты и времени {#changingtheorderofdatetimecontrolsandremovingtimeselectors} +## Изменение порядка элементов управления датой и временем и удаление селекторов времени -Вы можете изменить порядок или убрать элементы управления датой и временем в секции 'Период времени', установив свойство **time_format**: +Есть возможность изменить порядок элементов управления датой и временем в разделе 'Time period' или удалить некоторые из них. Это делается через свойство **time_format**: ~~~js -scheduler.config.lightbox.sections="[" +scheduler.config.lightbox.sections= [ {name:"description", height:130, map_to:"text", type:"textarea" , focus:true}, {name:"time", ..., time_format:["%H:%i","%m","%d","%Y"]} ]; ~~~ :::note -Обратите внимание, что это изменяет только порядок элементов в массиве, но не формат отображения данных. +Примечание: вы не можете изменить формат представления данных, только порядок элементов в массиве. ::: -Например, вы можете настроить формат так: +Например, можно изменить порядок формата следующим образом: ~~~js -// по умолчанию +//по умолчанию time_format:["%H:%i", "%m", "%d", "%Y"] -// сначала месяц +//месяц стоит в начале time_format:["%m","%d", "%Y", "%H:%i"] -// без выбора года +// селектор года удален time_format:["%H:%i", "%m", "%d"] -// некорректное использование -time_format:["%H:%i", "%M", "%d", "%Y"] // "%m" ошибочно заменено на "%M" +// неверно +time_format:["%H:%i", "%M", "%d", "%Y"] //"%m" изменено на "%M" ~~~ -## Режим только для чтения {#readonlymode} +## Режим только для чтения -Подробнее о режиме только для чтения читайте в разделе [Режим только для чтения](guides/readonly.md). +Подробную информацию о режиме только для чтения смотрите в разделе [Read-only Mode](guides/readonly.md). -## Скрытие секции для некоторых событий {#makingasectionhiddenforsomeevents} - -Чтобы скрыть секцию для определённых событий, переопределите её метод **set_value** следующим образом: +## Сделать раздел скрытым для некоторых событий +Чтобы сделать раздел скрытым для конкретных событий, переопределите его метод **set_value**, как в примере: ~~~js -scheduler.form_blocks.textarea.set_value="function(node,value,ev){" - node.firstChild.value="value||"""; - var style = ev.some_property?"":"none"; - node.style.display="style;" // область редактора - node.previousSibling.style.display="style;" // заголовок секции - scheduler.setLightboxSize(); // скорректировать размер lightbox +scheduler.form_blocks.textarea.set_value = function(node,value,ev){ + node.firstChild.value= value || ""; + let style = ev.some_property ? "" : "none"; + node.style.display = "style;" // область редактора + node.previousSibling.style.display = "style;" // заголовок секции + scheduler.setLightboxSize(); // корректный размер lightbox } ~~~ ### Опция "Событие на весь день" -Чтобы включить опцию "событие на весь день" в lightbox, установите опцию [full_day](api/config/full_day.md) в *true*: +Чтобы добавить опцию «полный день» в Lightbox, задайте опцию [full_day](api/config/full_day.md) в значение true. +Для этого просто добавьте следующую строку кода: ~~~js scheduler.config.full_day = true; ~~~ -После этого флажок **Full Day** появится слева в секции **Time period**. При его выборе все поля ввода в этой секции станут неактивными, а длительность события будет установлена на весь день - с **0:00 AM** выбранной даты до **0:00 AM** следующего дня. - +После включения опции [full_day](api/config/full_day.md) флажок **Full Day** будет отображаться в левой части раздела **Time period**. После выбора все поля раздела будут заблокированы, и длительность события будет считаться как полный день с 0:00 текущей даты клетки до 0:00 следующего дня. -[Full day events](https://docs.dhtmlx.com/scheduler/samples/02_customization/12_full_day_event.html) +[Полные события на день](https://docs.dhtmlx.com/scheduler/samples/02_customization/12_full_day_event.html) +## Типы Lightbox -## Типы lightbox {#linkingselectcontrols} +Lightbox может быть представлен в одном из двух типов: -Lightbox доступен в двух стилях: +- Standard (wide); +- Short. -- Стандартный (широкий); -- Короткий. +В стандартной теме Lightbox может быть представлен только в типе стандартного (широкого), тогда как в темах 'glossy' или 'classic' можно выбрать между типами. -В скине по умолчанию доступен только стандартный (широкий) lightbox, а скины 'glossy' или 'classic' позволяют выбрать между двумя вариантами. - -Для выбора нужного типа используйте свойство [wide_form](api/config/wide_form.md): +Чтобы установить нужный тип, используйте свойство [wide_form](api/config/wide_form.md): ~~~js scheduler.config.wide_form = true; ~~~ - -**Стандартный (широкий) lightbox**: +**Standard (wide) Lightbox**: ![scheduler_wide_form.png](/img/scheduler_wide_form.png) -**Короткая форма**: +**Short form**: ![scheduler_standard_form.png](/img/scheduler_standard_form.png) - ### Кнопка в заголовке секции -Вы можете добавить пользовательскую кнопку в заголовок секции следующим образом: +Можно добавить на заголовок секции пользовательскую кнопку. Чтобы добавить кнопку в заголовок секции, выполните следующие шаги: -- Добавьте свойство 'button' в объект секции: +- Укажите свойство 'button' в объекте секции: ~~~js {name:"description", height:130, map_to:"text", type:"textarea", button:"help"} ~~~ -- Определите надпись для кнопки: +- Укажите подпись к кнопке: ~~~js -// 'help' соответствует значению свойства 'button' +// 'help' — значение свойства 'button' scheduler.locale.labels.button_help = "Help label"; ~~~ -- Укажите обработчик нажатия на кнопку: +- Укажите обработчик кликов по кнопке: -~~~ -scheduler.form_blocks.textarea.button_click="function(index,button,shead,sbody){" - // ваш код +~~~js +scheduler.form_blocks.textarea.button_click = function(index,button,shead,sbody){ + // любой пользовательский код } ~~~ -Здесь: - -- **index** - (*number*) индекс секции, начиная с нуля -- **button** - (*HTMLElement*) элемент кнопки -- **shead** - (*HTMLElement*) элемент заголовка секции -- **sbody** - (*HTMLElement*) элемент тела секции +где: +- **index** - (*число*) индекс секции. Нумерация начинается с нуля +- **button** - (*HTMLElement*) HTML-элемент кнопки +- **shead** - (*HTMLElement*) HTML-элемент заголовка секции +- **sbody** - (*HTMLElement*) HTML-элемент тела секции -Вы можете изменить изображение кнопки с помощью этого CSS-класса: +Вы можете определить изображение, которое используется для кнопки, через следующий CSS-класс: -~~~js +~~~css .dhx_custom_button_help{ background-image:url(imgs/but_help.gif); } ~~~ -## Связывание select-контролов {#linkingselectcontrols} +## Связывание управляющих элементов select -Select-контролы в lightbox можно сделать зависимыми друг от друга. Для этого используйте [onchange property](guides/select.md#properties) select-контрола, как показано ниже: +Можно сделать так, чтобы управляющие элементы select в Lightbox зависели друг от друга. Для этого используйте свойство onchange элемента select, как в примере: ~~~js -var update_select_options = function(select, options) { // вспомогательная функция +const update_select_options = function(select, options) { // вспомогательная функция select.options.length = 0; - for (var i="0;" ionchange вызывается, когда пользователь изменяет выбранный вариант в родительском разделе. Варианты в дочернем разделе будут изменяться соответствующим образом. -Событие onchange срабатывает при выборе пользователем другого значения в родительской секции и обновляет опции дочерней секции. +## Динамическое изменение конфигураций Lightbox -## Динамическое изменение секций lightbox {#dynamic-changing-of-the-lightbox-sections} +Существует возможность динамически менять секции Lightbox. Это означает, что секции Lightbox могут быть скрыты, заблокированы или отображены в зависимости от заданной конфигурации. -Возможно изменять секции lightbox "на лету". Это значит, что вы можете скрывать, блокировать или показывать различные секции lightbox в зависимости от заданной конфигурации. +Вы можете динамически изменять секции Lightbox через метод [resetLightbox()](api/method/resetlightbox.md). Например: -Для этого используйте метод [resetLightbox()](api/method/resetlightbox.md). Пример: - -1. Сначала создайте два массива, определяющие разные наборы контролов для lightbox. +1. Создайте два массива конфигурации Lightbox, которые будут содержать два разных набора контролов. ~~~js -var full_lightbox = [ +const full_lightbox = [ { name: "description", height: 200, map_to: "text", type: "textarea", focus: true}, { name: "hidden", height: 23, map_to: "hidden", type: "textarea"}, { name: "time", height: 72, type: "time", map_to: "auto"} ]; -var restricted_lightbox = [ +const restricted_lightbox = [ { name: "description", height: 200, map_to: "text", type: "textarea", focus: true}, { name: "time", height: 72, type: "time", map_to: "auto"} ]; ~~~ -2. Далее реализуйте следующее: +2. На следующем шаге выполните следующие действия: -- Перед открытием нового lightbox вызовите метод resetLightbox() для очистки текущих контролов и создания нового lightbox с нужным набором секций. +- Перед отображением нового Lightbox вызовите метод resetLightbox() для удаления текущего набора контролов формы редактирования и генерации нового объекта Lightbox с другим набором контролов. -- Получите объект события по его id и определите условие, по которому будет выбрана нужная конфигурация lightbox. В примере ниже используется атрибут "restricted". +- Получите объект события по его id и укажите условие, в зависимости от которого будет применяться та или иная конфигурация Lightbox. В приведенном ниже примере условие задается через атрибут "restricted". ~~~js scheduler.attachEvent("onBeforeLightbox", function(event_id) { scheduler.resetLightbox(); - var ev = scheduler.getEvent(event_id); + const ev = scheduler.getEvent(event_id); scheduler.config.lightbox.sections = (ev.restricted) ? restricted_lightbox : full_lightbox; return true; }); ~~~ -3. Свойство 'restricted' события определяет, будет ли использоваться конфигурация "restricted_lightbox". Если оно не задано, будет показан полный lightbox. +3. Используйте свойство события 'restricted' для применения конфигурации "restricted_lightbox". В противном случае будет отображаться полный Lightbox. ~~~js -scheduler.init('scheduler_here', new Date(2017, 5, 30), "week"); +scheduler.init('scheduler_here', new Date(2027, 5, 30), "week"); scheduler.parse([ - { start_date: "2017-06-27 04:00", end_date: "2017-06-27 7:00", + { start_date: "2027-06-27 04:00", end_date: "2027-06-27 7:00", text: "Restricted event", hidden: "You won't see me", restricted: true }, - { start_date: "2017-06-29 05:00", end_date: "2017-06-29 11:00", + { start_date: "2027-06-29 05:00", end_date: "2027-06-29 11:00", text: "Full access", hidden: "Hidden text" } ]); ~~~ -![dinamicchanges_lightbox](/img/dinamicchanges_lightbox.png) - +![dinamicchanges_lightbox.png](/img/dinamicchanges_lightbox.png) -[Dynamic changing of lightbox configurations](https://docs.dhtmlx.com/scheduler/samples/02_customization/29_changing_lightbox_configurations.html) +[Динамическое изменение конфигураций Lightbox](https://docs.dhtmlx.com/scheduler/samples/02_customization/29_changing_lightbox_configurations.html) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/limits.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/limits.md index d61aa4fe..6cf03a42 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/guides/limits.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/limits.md @@ -5,12 +5,12 @@ sidebar_label: "Блокировка и выделение дат" # Блокировка и выделение дат -В данной библиотеке доступно расширение **Limit**, которое позволяет блокировать и выделять определённые даты или диапазоны дат. +Библиотека предоставляет расширение **Limit**, которое позволяет блокировать и помечать (выделять) определенные даты или диапазоны дат. -Чтобы начать использовать этот плагин, просто активируйте его на вашей странице. +Чтобы начать использовать плагин, активируйте его на странице. :::note -Обратите внимание, если вы используете [Вид 'Timeline'](views/timeline.md), расширение 'limit' должно быть подключено раньше, чем 'timeline': +Примечание: если вы используете [views/timeline.md], расширение 'limit' должно быть включено перед расширением 'timeline'. ::: ~~~js @@ -20,113 +20,114 @@ scheduler.plugins({ }); ~~~ -## Параметры конфигурации {#configurationoptions} -Ниже представлены параметры конфигурации, доступные для этого расширения: +## Параметры конфигурации +Расширение предоставляет следующие параметры конфигурации: -- [display_marked_timespans](api/config/display_marked_timespans.md) - управляет отображением выделенных (заблокированных) промежутков времени в Gantt -- [check_limits](api/config/check_limits.md) - включает или отключает проверку ограничений -- [mark_now](api/config/mark_now.md) - включает или отключает маркер текущего времени -- [now_date](api/config/now_date.md) - задаёт дату, используемую опцией [mark_now](api/config/mark_now.md) -- [limit_end](api/config/limit_end.md) - определяет конечную границу допустимого диапазона дат -- [limit_start](api/config/limit_start.md) - определяет начальную границу допустимого диапазона дат +- [display_marked_timespans](api/config/display_marked_timespans.md) - определяет, следует ли выделять помеченные (заблокированные) временные интервалы в планировщике +- [check_limits](api/config/check_limits.md) - активирует/деактивирует проверку ограничений +- [mark_now](api/config/mark_now.md) - включает/выключает отображение маркера текущего времени +- [now_date](api/config/now_date.md) - задает дату для опции [mark_now](api/config/mark_now.md) +- [limit_end](api/config/limit_end.md) - задает конечный предел допустимого диапазона дат +- [limit_start](api/config/limit_start.md) - задает начальный предел допустимого диапазона дат - [limit_view](api/config/limit_view.md) - ограничивает просмотр событий [Current time marking](https://docs.dhtmlx.com/scheduler/samples/02_customization/23_current_time.html) -## Связанные события {#relatedevents} +## Связанные события -Если пользователь попытается создать или изменить событие на недопустимую дату, будет вызвано событие [onLimitViolation](api/event/onlimitviolation.md). +Если планировщик обнаружит попытку создать/изменить событие с недопустимой датой, будет сгенерировано событие [onLimitViolation](api/event/onlimitviolation.md). -## Как заблокировать определённые даты? {#howtoblockcertaindates} +## Как заблокировать определенные даты? -Существует несколько способов задать ограничения в Gantt: +Существует несколько способов задать ограничение в планировщике: -- [addMarkedTimespan](api/method/addmarkedtimespan.md) - выделяет даты и может блокировать их с помощью пользовательских стилей -- [markTimespan](api/method/marktimespan.md) - выделяет или блокирует даты с использованием стандартных или пользовательских стилей; выделение удаляется после любого внутреннего обновления, удобно для подсветки +- [addMarkedTimespan](api/method/addmarkedtimespan.md) - помечает даты, но с определенными настройками делает их блокирующими (позволяет задавать пользовательский стиль для лимита) +- [markTimespan](api/method/marktimespan.md) - помечает и/или блокирует даты, применяя к ним стандартный или пользовательский стиль. Пометка отменяется сразу после любого внутреннего обновления в приложении. Может использоваться для выделения [Blocking dates](https://docs.dhtmlx.com/scheduler/samples/03_extensions/25_advanced_limitation.html) -## Как выделить определённые даты? {#howtomarkcertaindates} +## Как пометить определенные даты? -Вы можете использовать эти два метода для подсветки определённых дат: +Существует два метода, которые можно использовать для пометки указанных даты(й): -- [addMarkedTimespan](api/method/addmarkedtimespan.md) - выделяет даты и может блокировать их с помощью пользовательских стилей -- [markTimespan](api/method/marktimespan.md) - выделяет или блокирует даты с использованием стандартных или пользовательских стилей; выделение удаляется после любого внутреннего обновления, удобно для подсветки +- [addMarkedTimespan](api/method/addmarkedtimespan.md) - помечает даты, но с определенными настройками делает их блокирующими (позволяет задавать пользовательский стиль для лимита) +- [markTimespan](api/method/marktimespan.md) - помечает и/или блокирует даты, применяя к ним стандартный или пользовательский стиль. Пометка отменяется сразу после любого внутреннего обновления в приложении. Может использоваться для выделения [Handling the pointer highlighting](https://docs.dhtmlx.com/scheduler/samples/09_api/06_hightlight_and_single_click_create.html) -## Удаление выделения/блокировки {#removingmarkingblocking} +## Удаление выделения/блокировки -Чтобы снять текущее выделение или блокировку промежутков времени, используйте следующие методы: +Существует несколько методов, которые можно использовать для удаления текущих помеченных/заблокированных временных интервалов: -- [deleteMarkedTimespan](api/method/deletemarkedtimespan.md) - удаляет выделения или блокировки, созданные с помощью [addMarkedTimespan](api/method/addmarkedtimespan.md) -- [unmarkTimespan](api/method/unmarktimespan.md) - удаляет выделения или блокировки, созданные с помощью [markTimespan](api/method/marktimespan.md) +- [deleteMarkedTimespan](api/method/deletemarkedtimespan.md) - удаляет пометку/блокировку, установленную методом [addMarkedTimespan](api/method/addmarkedtimespan.md) +- [unmarkTimespan](api/method/unmarktimespan.md) - удаляет пометку/блокировку, установленную методом [markTimespan](api/method/marktimespan.md) [Handling the pointer highlighting](https://docs.dhtmlx.com/scheduler/samples/09_api/06_hightlight_and_single_click_create.html) -## Приоритет блокировки {#blockingpriority} +## Приоритет блокировки -Если используются несколько методов блокировки для разных диапазонов, приоритет блокировки работает следующим образом (от наивысшего к низшему): +Когда вы вызываете методы 'blocking' несколько раз и блокируете разные диапазоны, блокировка будет следовать такому порядку приоритетов (с наивысшего к наименьшему): -1. Даты, указанные с помощью объектов Date() для конкретных элементов; -2. Даты для конкретных элементов (когда установлен параметр **sections**); -3. Даты, указанные с помощью объектов Date(); -4. Прочие даты. +1. Даты, указанные через объекты Date() для отдельных элементов; +2. Даты для отдельных элементов (когда определён параметр **sections**); +3. Даты, указанные через объекты Date(); +4. Другие даты. -- Блокировка или выделение с более высоким приоритетом перекроет те, что с более низким приоритетом, если у них одинаковый **type**. -- Методы блокировки или выделения с одинаковым приоритетом (перекрывающиеся по времени) будут применяться одновременно. +- Блокировка/пометка с более высоким приоритетом перезапишет те, что с более низким приоритетом, если у них одинаковый **type**. +- Несколько методов блокировки/пометки с одинаковым приоритетом (расположенных в одном временном слоте) будут применяться одновременно. Например: ~~~js -scheduler.addMarkedTimespan({ // блокирует 4 июля 2012 года (среда). - days: new Date(2019, 7, 4), +scheduler.addMarkedTimespan({ // блокирует 4 июля 2027 года (середа). + days: new Date(2027, 7, 4), zones: "fullday", type: "dhx_time_block", - css: "red_section" // применён CSS-класс + css: "red_section" // название применяемого CSS класса }); scheduler.addMarkedTimespan({ // блокирует каждое воскресенье, понедельник, среду days: [0, 1, 3], zones: "fullday", type: "dhx_time_block", - css: "blue_section" // применён CSS-класс + css: "blue_section" // название применяемого CSS класса }); -// блокирует только воскресенье и среду для элемента с id="2" +//блокирует каждое воскресенье и среду только для элемента с id="2" scheduler.addMarkedTimespan({ days: [0,3], zones: "fullday", type: "dhx_time_block", - css: "gray_section", // применён CSS-класс + css: "gray_section", // название применяемого CSS класса sections: { timeline: 2} }); ~~~ -После этих вызовов Gantt будет работать следующим образом: +В результате вызова этих методов вы получите следующее: -1. Сначала будут заблокированы **все воскресенья и среды для элемента с id="2" в Timeline**, они будут выделены серым цветом. -2. Затем будет заблокировано **4 июля 2012 года**, выделено красным. -3. В завершение будут заблокированы **все воскресенья, понедельники и среды**, выделены синим. + +1. Прежде всего, планировщик заблокирует **каждое воскресенье и среду для элемента (id="2)" в Timeline** и **окрасит их в серый**. +2. Затем будет заблокировано **4 июля 2012 года** и **окрашено в красный**. +3. Наконец, будут заблокированы **каждое воскресенье, понедельник, среда** и **окрашены в синий**. ![limits_priority.png](/img/limits_priority.png) -Если вы хотите отображать все маркеры вне зависимости от их приоритета, установите параметр [overwrite_marked_timespans](api/config/overwrite_marked_timespans.md) следующим образом: +Для изменения этого поведения и отображения всех маркеров независимо от их приоритета можно использовать настройку [overwrite_marked_timespans](api/config/overwrite_marked_timespans.md): ~~~js scheduler.config.overwrite_marked_timespans_config = false; -~~~ +~~~ \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/live-update.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/live-update.md index 1eec9d6b..e307967d 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/guides/live-update.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/live-update.md @@ -6,49 +6,50 @@ sidebar_label: "Live Updates Mode (Устаревший)" # Live Updates Mode (Устаревший) :::warning - Данный функционал устарел и больше не поддерживается. +Описанная функциональность устарела и больше не поддерживается. ::: + :::note -Эта статья описывает устаревшую версию режима Live Updates для DHTMLX Scheduler. Информацию о последней версии смотрите [здесь](guides/multiuser-live-updates.md). +Эта статья относится к устаревшей реализации режима Live Updates для DHTMLX Scheduler. Более подробную информацию о текущей версии смотрите [здесь](guides/multiuser-live-updates.md). ::: -Режим Live Update поддерживает синхронизацию данных между пользователями в реальном времени. +Live Updates — это режим, который обеспечивает синхронные обновления данных в реальном времени. -Когда один пользователь вносит изменения, они мгновенно отображаются у всех остальных. +Когда один пользователь вносит изменение, оно становится видимым для всех остальных немедленно. -В этом режиме используется библиотека сокетов `Faye` для обеспечения быстрых и гибких обновлений без необходимости обновлять страницу (обновляется только соответствующий компонент). +Этот режим использует сокет-библиотеку `Faye` для максимальной скорости и гибкости процесса и не требует обновления страницы (он обновляет только тот компонент, к которому применяется). -Здесь вы найдете простой пошаговый гид по использованию этой функции. +В этой статье мы предлагаем пошаговое руководство, чтобы быстро погрузиться в тему. ## Основной принцип -Live updates работают путем трансляции изменений от одного подключенного клиента ко всем остальным. Для этого используется WebSocket-соединение, которое обеспечивает двустороннюю связь между клиентами и сервером. +Живые обновления достигаются путем трансляции изменений, внесённых одним подключённым клиентом, всем остальным подключённым клиентам. Это достигается с помощью WebSocket-соединения для двустороннего обмена сообщениями между подключёнными клиентами и бэкендом. -В этой версии модуль Live Updates расширяет модуль `DataProcessor` для использования клиентской библиотеки `Faye`, а также серверного приложения, которое распределяет сообщения между клиентами. +В этой версии модуля Live Updates реализована через расширение модуля `DataProcessor` с использованием клиента библиотеки `Faye`, а также дополнительного backend-приложения, которое маршрутизирует сообщения между клиентами. -Настройка включает три компонента: +Решение состоит из трёх частей: -1. **Фронтенд** с Scheduler и модулем `DataProcessor`. -2. **Бэкенд**, обрабатывающий CRUD-операции с базой данных. -3. **live-updates hub**, управляющий клиентскими соединениями. +1. **фронтенд** с Scheduler и модулем `DataProcessor`. +2. **бэкенд**, который реализует CRUD-операции в постоянном хранилище. +3. **hub живых обновлений**, который отвечает за подключение клиентов. -Когда пользователь изменяет данные: +Когда пользователь вносит изменения в данные: -- **Фронтенд** отправляет обновление на **бэкенд**. -- Одновременно **фронтенд** отправляет то же обновление в **live-updates hub**. -- **live-updates hub** транслирует обновление всем подключенным клиентам. -- Получив обновление от **live-updates hub**, **фронтенд** применяет его к данным Scheduler без инициирования CRUD-операций на бэкенде. +- **фронтенд** отправляет обновление в **бэкенд**. +- Одновременно **фронтенд** отправляет те же обновления в **hub живых обновлений**. +- **Hub живых обновлений** транслирует обновление всем подключённым клиентам. +- Когда **фронтенд** получает обновление от **hub живых обновлений**, он применяет его к данным Scheduler таким образом, чтобы не вызывать изменений в CRUD-бэкенде. -## Перед началом +## Прежде чем начать -Для прохождения этого руководства вам потребуется рабочее приложение dhtmlxScheduler, интегрированное с серверной логикой, которая загружает данные из базы и сохраняет изменения обратно. (Подробнее [здесь](integrations/howtostart-guides.md).) +Чтобы начать этот туториал, у вас должно быть полнофункциональное приложение dhtmlxScheduler, интегрированное с серверной логикой — такое, которое загружает данные из базы данных и сохраняет изменения обратно. (См. подробности [здесь](integrations/howtostart-guides.md).) -Простой пример может выглядеть так: +Базовый пример такого приложения может выглядеть примерно так: ~~~js ~~~ -## Настройка Live Updates +## Конфигурация Live Updates :::note -Данная реализация Live Updates устарела и не входит в основной пакет. +Эта реализация Live Updates устарела и не входит в основной пакет. ::: -### Шаг 1. Установка +### Шаг 1. Настройка -1. Скачайте **Live Updates plugin** для Scheduler: [download link](https://files.dhtmlx.com/30d/20deb2ff205dc16bc94a7e9fcef4c5fe/live_updates.zip) -2. Скачайте **Live Updates backend** приложение: [download link](https://files.dhtmlx.com/30d/57084e02b121f14bb14b6734d465ad41/websocket-backend.zip) -3. Запустите **Live Updates backend**, следуя инструкциям в его readme-файле. +1. Скачать плагин **Live Updates** для Scheduler: [download link](https://files.dhtmlx.com/30d/20deb2ff205dc16bc94a7e9fcef4c5fe/live_updates.zip) +2. Скачать приложение **Live Updates backend**: [download link](https://files.dhtmlx.com/30d/57084e02b121f14bb14b6734d465ad41/websocket-backend.zip) +3. Запустите приложение **Live Updates backend**, следуя инструкциям во вложенном readme файле. ### Шаг 2. Настройка фронтенда -Чтобы включить режим Live Update, добавьте два дополнительных файла в фронтенд-приложение: +Чтобы работать с режимом Live Updates, подключите два дополнительных файла во фронтенд-приложение: -- **live_updates.js** - файл плагина из предыдущего шага -- **client.js** - файл, динамически генерируемый WebSocket-бэкендом +- **live_updates.js** - файл, загруженный на предыдущем шаге +- **client.js** - файл, который динамически генерируется WebSocket-бэкендом ~~~js ~~~ -В этом примере подключение идет напрямую к WebSocket-приложению. Обычно рекомендуется проксировать этот URL через основное приложение, чтобы скрыть адрес и порт вспомогательного сервиса. Это можно сделать, настроив reverse proxy. +В приведённом выше примере мы подключаемся напрямую к WebSocket-приложению. Обычно вы захотите маршрутизировать этот URL через ваше основное приложение, чтобы не раскрывать адрес и порт второго приложения. Это можно сделать с помощью обратного прокси. **Проксирование запросов через основное приложение (Node.js):** @@ -105,9 +106,9 @@ module.exports = function(app){ ~~~ -### Шаг 3. Активация Live Updates +### Шаг 3. Включение Live Updates -Активируйте режим, вызвав метод **live_updates()** у экземпляра `DataProcessor`. Убедитесь, что `DataProcessor` уже инициализирован. Метод принимает в качестве параметра URL точки входа WebSocket. +Режим включается вызовом метода **live_updates()** у экземпляра `DataProcessor`. Чтобы это работало, сначала необходимо инициализировать `DataProcessor`. В качестве параметра метод принимает URL точки входа WebSocket. ~~~js const dp = scheduler.createDataProcessor({ @@ -118,4 +119,5 @@ const dp = scheduler.createDataProcessor({ dp.live_updates("/liveUpdates"); ~~~ -Полное демо-приложение можно скачать [здесь](https://files.dhtmlx.com/30d/0aea2facd959a8300bf7caec3f5a7f42/dhtmlxscheduler-live-updates.zip). + +Вы можете скачать полное демонстрационное приложение [здесь](https://files.dhtmlx.com/30d/0aea2facd959a8300bf7caec3f5a7f42/dhtmlxscheduler-live-updates.zip). \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/loading-data.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/loading-data.md index 13b1d198..cc08d130 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/guides/loading-data.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/loading-data.md @@ -5,335 +5,344 @@ sidebar_label: "Загрузка данных" # Загрузка данных -dhtmlxScheduler поддерживает загрузку данных в трех форматах: +dhtmlxScheduler может загружать данные в нескольких форматах. Большинство приложений используют **JSON**. **iCalendar (.ics)** и **XML** также поддерживаются для совместимости или сценариев импорта. -1. JSON; -2. XML; -3. ICal. +### Связанные руководства -[Примеры форматов данных](guides/data-formats.md) +- [Обзор форматов данных](guides/data-formats.md) -## Загрузка данных из встроенного набора данных {#loadingdatafromaninlinedataset} - -Для загрузки данных непосредственно из встроенного набора используется метод [parse](api/method/parse.md): +## Загрузка данных из встроенного набора данных +Чтобы загрузить данные из встроенного набора данных, используйте метод [`parse()`](api/method/parse.md): ~~~js -scheduler.init('scheduler_here',new Date(2009,10,1),"month"); +scheduler.init("scheduler_here", new Date(2027, 4, 1), "month"); ... scheduler.parse([ - {text:"Meeting", start_date:"2019-04-11 14:00", end_date:"2019-04-11 17:00"}, - {text:"Conference", start_date:"2019-04-15 12:00", end_date:"2019-04-18 19:00"}, - {text:"Interview", start_date:"2019-04-24 09:00", end_date:"2019-04-24 10:00"} -],"json"); - + { id: "1", text: "Meeting", start_date: "2027-05-11 14:00", end_date: "2027-05-11 17:00" }, + { id: "2", text: "Conference", start_date: "2027-05-15 12:00", end_date: "2027-05-18 19:00" }, + { id: "3", text: "Interview", start_date: "2027-05-24 09:00", end_date: "2027-05-24 10:00" } +]); ~~~ +### Связанные примеры + +- [Отображение событий каскадом](https://docs.dhtmlx.com/scheduler/samples/02_customization/24_cascade_event_display.html) + +### Связанный API + +- [`parse()`](api/method/parse.md) -[Displaying events as a cascade](https://docs.dhtmlx.com/scheduler/samples/02_customization/24_cascade_event_display.html) +### Связанные руководства +- [Форматы данных](guides/data-formats.md) -## Загрузка данных из файла {#loadingdatafromadatafile} +## Загрузка данных из файла -Для загрузки данных из внешнего файла используется метод [load](api/method/load.md): +Чтобы загрузить данные из файла, используйте метод [`load()`](api/method/load.md): ~~~js -scheduler.init('scheduler_here',new Date(2018,10,1),"month"); +scheduler.init("scheduler_here", new Date(2027, 4, 1), "month"); ... -scheduler.load("data.json"); //загрузка данных из файла +scheduler.load("data.json"); // loading data from a file ~~~ +### Связанные примеры -[Basic initialization](https://docs.dhtmlx.com/scheduler/samples/01_initialization_loading/01_basic_init.html) +- [Базовая инициализация](https://docs.dhtmlx.com/scheduler/samples/01_initialization_loading/01_basic_init.html) +### Связанный API -## Загрузка данных из базы данных {#loadingdatafromadatabase} +- [`load()`](api/method/load.md) -Существует два подхода к загрузке данных из базы данных. Оба требуют обработки на клиентской и серверной сторонах. +### Связанные руководства -1) Первый подход использует REST API для взаимодействия с сервером. +- [Форматы данных](guides/data-formats.md) -- Реализация на сервере зависит от выбранного фреймворка. -Например, в Node.js добавляется маршрут сервера для URL, по которому Scheduler отправляет AJAX-запрос. +## Загрузка данных с бэкенда -Этот маршрут формирует ответ в формате JSON. +Загружайте данные с вашего бэкенда, expose REST‑конечную точку, возвращающую события Scheduler в формате JSON. + +- Реализация на стороне сервера зависит от вашего стека технологий. Например, в Node.js можно добавить маршрут, который возвращает данные о событиях: ~~~js -app.get('/data', function(req, res){ - db.event.find().toArray(function(err, data){ - //установка свойства id для всех записей - for (var i = 0; i < data.length; i++) - data[i].id = data[i]._id; - - //вывод ответа - res.send(data); - }); +app.get("/data", async (request, response) => { + const events = await db.event.find().toArray(); + response.json(events); }); ~~~ -- На клиентской стороне используется метод [load](api/method/load.md) с указанием URL, по которому Scheduler будет запрашивать данные: +- Со стороны клиента вызовите [`load()`](api/method/load.md) по URL данных: -~~~js title="Loading from a database. Client-side code" -scheduler.init('scheduler_here', new Date(), "month"); -scheduler.load("apiUrl"); +~~~js +scheduler.init("scheduler_here", new Date(2027, 4, 1), "month"); +scheduler.load("/data"); ~~~ :::note -Более подробная информация о серверной интеграции с REST API доступна в статье [Интеграция с серверной стороной](guides/server-integration.md). +Для сохранения изменений обратно на сервер используйте [`createDataProcessor()`](api/method/createdataprocessor.md). См. [Серверная интеграция](guides/server-integration.md). ::: -2) Второй подход предполагает загрузку данных из таблиц базы данных с помощью [PHP Connector](https://docs.dhtmlx.com/connector__php__index.html). - -- На серверной стороне реализуется скрипт, возвращающий данные в формате XML или JSON: - -~~~js title="Static loading from db. Server-side code" -include ('dhtmlxConnector/codebase/scheduler_connector.php'); - -$res="mysql_connect(""localhost","root",""); -mysql_select_db("sampleDB"); - -$calendar = new SchedulerConnector($res); -$calendar->render_table("events","id","event_start,event_end,text","type"); -~~~ +### Связанный API -- На клиентской стороне используется метод [load](api/method/load.md) с указанием пути к серверному скрипту: - -~~~js title="Static loading from db. Client-side code" -scheduler.init('scheduler_here', new Date(), "month"); -scheduler.load("events.php"); -~~~ +- [`createDataProcessor()`](api/method/createdataprocessor.md) +### Связанные руководства -:::note -Дополнительные подробности приведены в руководстве [dhtmlxScheduler с dhtmlxConnector](integrations/other/howtostart-connector.md). -::: +- [Серверная интеграция](guides/server-integration.md) -## Загрузка данных из нескольких источников {#loadingdatafrommultiplesources} +## Загрузка данных из нескольких источников -Для загрузки данных из нескольких источников доступно расширение **multisource**: +Чтобы загрузить данные из нескольких источников, запросите необходимые конечные точки и объедините результаты перед вызовом [`parse()`](api/method/parse.md): ~~~js -scheduler.plugins({ - multisource: true +Promise.all([ + fetch("/api/events").then((response) => response.json()), + fetch("/api/holidays").then((response) => response.json()) +]).then(([events, holidays]) => { + scheduler.parse([...events, ...holidays]); }); ~~~ -:::note -Несколько источников могут использоваться как для статической, так и для динамической загрузки. -::: +### Связанный API -После подключения соответствующего файла, метод [load](api/method/load.md) может принимать массив источников: +- [`parse()`](api/method/parse.md) -~~~js -scheduler.load(["first/source/some","second/source/other"]); -~~~ - -## Свойства данных {#dataproperties} -------------------------- +### Связанные руководства -### Обязательные свойства +- [Форматы данных](guides/data-formats.md) -Для корректного разбора данных каждой записи необходимы как минимум три свойства: +## Свойства данных -- **start_date** - (*string*) дата начала события; -- **end_date** - (*string*) дата окончания события; -- **text** - (*string*) описание события. +### Обязательные свойства -При загрузке из базы данных требуется дополнительное обязательное свойство: +Чтобы каждое событие можно было корректно разобрать, оно должно содержать следующие свойства: -- **id** - (*string, number*) идентификатор события. +- **id** - (*string|number*) уникальный идентификатор события +- **start_date** - (*date|string*) начальная дата события +- **end_date** - (*date|string*) конечная дата события +- **text** - (*string*) заголовок/описание события -По умолчанию, для данных в формате JSON и XML используется формат даты **'%Y-%m-%d %H:%i'** (см. [спецификацию формата даты](guides/settings-format.md)). +Формат даты по умолчанию для данных в формате JSON и XML — **'%Y-%m-%d %H:%i'** (см. [спецификацию формата даты](guides/settings-format.md)) - Для изменения формата используйте опцию [date_format](api/config/date_format.md). +Чтобы изменить его, используйте конфигурационный параметр [`date_format`](api/config/date_format.md). ~~~js -scheduler.config.date_format="%Y-%m-%d %H:%i"; +scheduler.config.date_format = "%Y-%m-%d %H:%i"; ... -scheduler.init('scheduler_here', new Date(2019, 3, 18), "week"); +scheduler.init("scheduler_here", new Date(2027, 4, 18), "week"); ~~~ ### Пользовательские свойства -Помимо обязательных полей, к данным можно добавлять пользовательские свойства. Дополнительные свойства разбираются как строки и могут использоваться на клиентской стороне по необходимости. +Вы не ограничены обязательными свойствами, перечисленными выше, и можете добавлять любые пользовательские свойства к элементам данных. +Дополнительные свойства данных будут сохраняться как строки и загружаться на клиентскую сторону, где вы сможете использовать их по мере необходимости. -Примеры данных с пользовательскими свойствами доступны [здесь](guides/data-formats.md#datawithcustomproperties). +См. примеры данных с пользовательскими свойствами [здесь](guides/data-formats.md) -## Структура базы данных {#databasestructure} +### Связанный API -При создании базы данных для событий планировщика ожидается следующая структура: +- [`date_format`](api/config/date_format.md) -- **таблица events** - хранит события планировщика - - **id** - (*string/int/guid*) - идентификатор события. Первичный ключ с автоинкрементом. - - **start_date** - (*DateTime*) - дата начала события, не может быть пустой. - - **end_date** - (*DateTime*) - дата окончания события, не может быть пустой. - - **text** - (*string*) - описание события. +### Связанные руководства -Для повторяющихся событий требуются дополнительные столбцы: +- [Объект события](guides/event-object-operations.md) -- **таблица events** - хранит события планировщика - - **id** - (*string/int/guid*) - идентификатор события. Первичный ключ с автоинкрементом. - - **start_date** - (*DateTime*) - дата начала события, не может быть пустой. - - **end_date** - (*DateTime*) - дата окончания события, не может быть пустой. - - **text** - (*string*) - описание события. - - **event_pid** - (*string/int/guid*) - ссылка на id родительской серии событий. Может быть пустым или по умолчанию пустая строка/ноль. - - **event_length** - (*string/bigint*) - длительность события или отметка времени измененного вхождения. Может быть пустым или по умолчанию пустая строка/ноль. Максимальная длина (для строк) - 10. - - **rec_type** - (*string*) - правило повторения. Может быть пустым или по умолчанию пустая строка. Максимальная длина - 50. +## Структура базы данных -Дополнительные столбцы могут быть добавлены по необходимости; они будут доступны через клиентский API. +При настройке базы данных ожидаемая структура таблиц для событий Scheduler следующая: -## Динамическая загрузка {#dynamic-loading} --------------------- - -По умолчанию dhtmlxScheduler загружает все данные сразу, что может быть неэффективно при больших объемах данных. Динамическая загрузка позволяет получать данные частями, ограниченными текущей видимой областью. +- **таблица events** — хранит события Scheduler +- **id** - (*string/int/guid*) уникальный идентификатор события. Первичный ключ, автоинкремент. +- **start_date** - (*DateTime*) начальная дата события, не может быть NULL. +- **end_date** - (*DateTime*) конечная дата события, не может быть NULL. +- **text** - (*string*) заголовок/описание события. + +Если у вас есть повторяющиеся события, добавьте следующие поля: + +- **rrule** - (*string*) правило повторения в формате RFC-5545 +- **duration** - (*number*) продолжительность каждого появления в секундах +- **recurring_event_id** - (*string/int/guid*) идентификатор родительской серии для изменённых/удалённых повторов +- **original_start** - (*DateTime*) исходная дата начала редактируемого/удалённого случая +- **deleted** - (*boolean*) помечает удалённые случаи + +Вы можете определить любые дополнительные столбцы, они могут быть загружены на клиент и доступны для клиентского API. + +### Связанные руководства + +- [Повторяющиеся события](guides/recurring-events.md) + +## Динамическая загрузка + +По умолчанию dhtmlxScheduler загружает все данные сразу. Это может стать проблемой, когда вы используете большие наборы событий. +В таких случаях можно использовать режим динамической загрузки и подгружать данные частями, необходимыми для заполнения текущей видимой области Scheduler. ### Техника -Включите динамическую загрузку с помощью метода [setLoadMode](api/method/setloadmode.md): -~~~js title="Enabling the dynamic loading" +Чтобы включить динамическую загрузку, вызовите метод [`setLoadMode()`](api/method/setloadmode.md): + +~~~js scheduler.setLoadMode("month"); -scheduler.load("some.php"); +scheduler.load("/api/events"); ~~~ -Метод принимает режим загрузки, определяющий объем данных для загрузки: *day, week, month* или *year*. - -Например, при установке режима 'week' планировщик будет запрашивать данные только для текущей недели, подгружая дополнительные данные по мере необходимости. +В качестве параметра метод принимает режим загрузки, который определяет размер загружаемых данных: *day, week, month или year.* +Например, если задать режим 'week', планировщик будет запрашивать данные только за текущую неделю и подгружать оставшиеся по требованию. #### Как работают режимы загрузки -Режимы загрузки определяют интервал данных, который загружается для выбранного периода. Например, при открытии представления Неделя для дат с 2018-01-29 по 2018-02-05: +Предопределённые режимы загрузки задают интервал загрузки данных в пределах установленного периода. Например, вы открываете Week View в scheduler для следующих дат: с 2027-02-02 по 2027-02-09. +В зависимости от выбранного режима динамическая загрузка будет происходить следующим образом: -- Для режима "day" +- для режима "day" ~~~js scheduler.setLoadMode("day"); ~~~ -Планировщик запрашивает данные по дням, например, с 2018-01-29 по 2018-02-05. +Планировщик будет запрашивать данные по дням, например: с 2027-02-02 по 2027-02-09. -- Для режима "month" +- для режима "month" ~~~js scheduler.setLoadMode("month"); ~~~ -Планировщик запрашивает данные по полным месяцам, например, с 2018-01-01 по 2018-03-01. +Планировщик будет запрашивать данные по целым месяцам, например: с 2027-02-01 по 2027-03-01. -- Для режима "year" +- для режима "year" ~~~js scheduler.setLoadMode("year"); ~~~ -Планировщик запрашивает данные по полным годам, например, с 2018-01-01 по 2019-01-01. +Планировщик будет запрашивать данные по целым годам, например: с 2027-01-01 по 2028-01-01. -Запрашиваемый интервал всегда не меньше отображаемого. +В любом случае запрашиваемый интервал не будет меньше отрисованного. -Интервал загрузки влияет на: +Интервал загрузки определяет: -- частоту динамических запросов +- частоту вызовов динамической загрузки -Большие интервалы уменьшают частоту запросов, так как уже полученные данные кэшируются. +Чем больше интервал загрузки, тем реже будут вызываться вызовы динамической загрузки. Планировщик хранит в памяти уже загружённую часть данных и не будет повторно запрашивать её. -- длительность обработки каждого запроса +- длительность обработки отдельного запроса -Большие интервалы означают больше данных за один запрос, что увеличивает время обработки. +Чем больше интервал загрузки, тем дольше обрабатывается запрос, поскольку загружается больше данных за один раз. #### Запрос -Запросы имеют следующий формат: +Сгенерированные запросы выглядят так: ~~~js -some.php?from=DATEHERE&to=DATEHERE +/api/events?from=DATEHERE&to=DATEHERE ~~~ -*где DATEHERE - это валидная дата в формате, определяемом опцией [load_date](api/config/load_date.md).* - +*где DATEHERE — корректное значение даты в формате, определённом опцией [`load_date`](api/config/load_date.md)* -При использовании dhtmlxConnector на сервере не требуется дополнительная обработка для разбора таких запросов. +### Связанный API +- [`setLoadMode()`](api/method/setloadmode.md) +- [`load_date`](api/config/load_date.md) -### Индикатор загрузки +### Индикация загрузки -При работе с большими объемами данных полезно отображать индикатор загрузки. +Когда размер данных велик, полезно отображать индикатор загрузки. Он будет показывать пользователю, что приложение действительно что-то делает. -Включите индикатор загрузки, установив свойство [show_loading](api/config/show_loading.md) в *true*: +Чтобы включить индикатор загрузки для scheduler, установите свойство [`show_loading`](api/config/show_loading.md) в *true*. ~~~js scheduler.config.show_loading = true; ... -scheduler.init('scheduler_here',new Date(2018,0,10),"month"); +scheduler.init("scheduler_here", new Date(2027, 4, 10), "month"); ~~~ :::note -Чтобы изменить изображение индикатора, замените 'imgs/loading.gif' на свою картинку. +Чтобы изменить изображение спиннера загрузки, замените 'imgs/loading.gif' на ваше собственное изображение. ::: -## Загрузка данных для секций Timeline и Units с сервера {#loadingdatawithtimelineandunitssectionsfromtheserver} +## Загрузка данных с Timeline и Units секций с сервера {#collections} -При загрузке данных в представления [Timeline](views/timeline.md) и [Units](views/units.md#loadingdatatotheview) необходимо предоставить массив секций. +При загрузке данных в Timeline и Units виды вам нужно задать массив секций, которые будут загружаться в представления. -Для загрузки секций Timeline и Units с бэкенда требуется более подробная настройка: +Чтобы загрузить данные, содержащие секции Timeline и Units, из бэкенда, нужно реализовать более расширенную конфигурацию: -- При инициализации Timeline вместо массива секций используйте метод [serverList](api/method/serverlist.md) с именем коллекции: +- во время инициализации вида Timeline вместо массива sections используйте метод [`serverList()`](api/method/serverlist.md) и передайте имя коллекции в качестве аргумента: ~~~js scheduler.createTimelineView({ - .... - y_unit: scheduler.serverList("sections"), - ... + .... + y_unit: scheduler.serverList("sections"), + ... }); ~~~ -- Загрузите данные в планировщик с помощью метода [load](api/method/load.md): +- чтобы загрузить данные в scheduler, используйте метод [`load()`](api/method/load.md): ~~~js scheduler.load("data.json"); ~~~ -- На серверной стороне ответ должен быть структурирован следующим образом: - -~~~js title=""data.json"" -{ - "data":[ - { - "id":"1", - "start_date":"2018-03-02 00:00:00", - "end_date":"2018-03-04 00:00:00", - "text":"dblclick me!", - "type":"1" - }, - { - "id":"2", - "start_date":"2018-03-09 00:00:00", - "end_date":"2018-03-11 00:00:00", - "text":"and me!", - "type":"2" - }, - { - "id":"3", - "start_date":"2018-03-16 00:00:00", - "end_date":"2018-03-18 00:00:00", - "text":"and me too!", - "type":"3" - }, - { - "id":"4", - "start_date":"2018-03-02 08:00:00", - "end_date":"2018-03-02 14:10:00", - "text":"Type 2 event", - "type":"2" - } - ], - "collections": { - "sections":[ - {"value":"1","label":"Simple"}, - {"value":"2","label":"Complex"}, - {"value":"3","label":"Unknown"} - ] - } +Если вы получаете данные вручную (например, чтобы добавить заголовки), вы можете передать тот же payload в [`parse()`](api/method/parse.md): + +~~~js +fetch("/api/timeline") + .then((response) => response.json()) + .then((payload) => scheduler.parse(payload, "json")); +~~~ + +- во время реализации ответа данных scheduler на бэкенде используйте следующий формат: + +~~~js title="data.json" +{ + "data":[ + { + "id":"1", + "start_date":"2027-03-02 00:00:00", + "end_date":"2027-03-04 00:00:00", + "text":"dblclick me!", + "type":"1" + }, + { + "id":"2", + "start_date":"2027-03-09 00:00:00", + "end_date":"2027-03-11 00:00:00", + "text":"and me!", + "type":"2" + }, + { + "id":"3", + "start_date":"2027-03-16 00:00:00", + "end_date":"2027-03-18 00:00:00", + "text":"and me too!", + "type":"3" + }, + { + "id":"4", + "start_date":"2027-03-02 08:00:00", + "end_date":"2027-03-02 14:10:00", + "text":"Type 2 event", + "type":"2" + } + ], + "collections": { + "sections":[ + {"value":"1","label":"Simple"}, + {"value":"2","label":"Complex"}, + {"value":"3","label":"Unknown"} + ] + } } -~~~ +~~~ + +В приведённом выше примере массив "data" содержит календарные события, а хэш "collections" содержит коллекции, на которые можно ссылаться через метод [`serverList()`](api/method/serverlist.md). + +### Связанный API + +- [`serverList()`](api/method/serverlist.md) + +### Связанные руководства -В этом примере массив "data" содержит события календаря, а объект "collections" хранит коллекции, на которые ссылается метод [serverList](api/method/serverlist.md). +- [Timeline view](views/timeline.md) +- [Units view](views/units.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/localization.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/localization.md index 9b8192f4..7e3419b7 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/guides/localization.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/localization.md @@ -5,20 +5,20 @@ sidebar_label: "Локализация" # Локализация -Библиотека поддерживает локализацию для планировщика, предоставляя ряд предустановленных локалей и возможность создания собственных. По умолчанию DHTMLX Scheduler поставляется с [английской локалью](api/other/locale.md). +Библиотека поддерживает локализацию планировщика, предоставляя набор предопределённых локалей и способ создания пользовательских. По умолчанию DHTMLX Scheduler использует [английскую локаль](api/other/locale.md). -## Активация {#activation} +## Активация -Чтобы установить язык планировщика, необходимо активировать нужную локаль с помощью метода **setLocale** объекта [scheduler.i18n](api/other/i18n.md). +Чтобы задать желаемый язык для планировщика, активируйте необходимую локаль через метод `setLocale()` объекта [scheduler.i18n](api/other/i18n.md). ~~~js -scheduler.i18n.setLocale("fr"); +scheduler.i18n.setLocale("fr"); ~~~ -Вы можете использовать любую из [предустановленных локалей](#included-locales), включённых в файл dhtmlxscheduler.js, либо создать свою собственную локаль. +Вы можете использовать и обновлять любую из [предопределённых локалей](#included-locales), которые поставляются с файлом dhtmlxscheduler.js, или определить собственную локаль. :::note -Локаль можно менять "на лету", но изменения вступят в силу только после полной перерисовки Scheduler с помощью вызова **scheduler.render()** или **scheduler.init()**. +Локаль можно переключать динамически, но изменения вступят в силу только после полного перерисовывания Планировщика с вызовом либо `scheduler.render()`, либо `scheduler.init()`. ::: ~~~js @@ -26,28 +26,28 @@ scheduler.i18n.setLocale("fr"); scheduler.init("scheduler_here"); ~~~ +### Связанные образцы +- [Localization](https://docs.dhtmlx.com/scheduler/samples/01_initialization_loading/07_locale_usage.html) -[Localization](https://docs.dhtmlx.com/scheduler/samples/01_initialization_loading/07_locale_usage.html) - - -## Включённые локали {#included-locales} +## Включённые локали :::note -Файлы локалей Common и Recurring входят в состав файла **dhtmlxscheduler.js**. +И Common, и Recurring локали хранятся внутри файла `dhtmlxscheduler.js`. ::: -dhtmlxScheduler поддерживает локализацию для следующих языков: + +dhtmlxScheduler включает локализацию для следующих языков: - + - + - - + + @@ -58,7 +58,7 @@ dhtmlxScheduler поддерживает локализацию для след - + @@ -71,65 +71,65 @@ dhtmlxScheduler поддерживает локализацию для след
ЯзыкКод языка
ЯзыкКод языка
Арабскийar
Белорусскийbe
Каталонскийca
Каталанскийca
Китайскийcn
Чешскийcs
Датскийda
Голландскийnl
Английскийen (по умолчанию)
Нидерландскийnl
Английскийen (default)
Финскийfi
Французскийfr
Немецкийde
Итальянскийit
Японскийjp
Норвежскийno
Норвежский букмолnb
Норвежский Бокмальnb
Польскийpl
Португальскийpt
Румынскийro
Украинскийua
-## Создание собственной локали {#creatingcustomlocale} +## Создание собственной локали :::note -Объект [scheduler.i18n](api/other/i18n.md) доступен начиная с v6.0. В более ранних версиях использовался объект [scheduler.locale](api/other/locale.md). Подробнее см. в [статье по миграции](migration.md#53---60). +Объект [scheduler.i18n](api/other/i18n.md) добавлен в версии v6.0. В предыдущих версиях использовался объект [scheduler.locale](api/other/locale.md). Для дополнительной информации см. статью миграции в разделе Migration article (migration.md#53---60). ::: -Самый простой способ создать свою локаль - скопировать стандартную английскую локаль из примера ниже и перевести строки на нужный язык. +Самый простой способ создать пользовательскую локаль — сделать копию локали по умолчанию на английском языке из приведённого ниже образца и перевести все строки на требуемый язык. -Есть два способа применить собственную локаль к Scheduler: +Пользовательская локаль может быть применена к Планировщику двумя способами: -- Переопределить текущую локаль, передав объект локали в метод **setLocale**: +- либо переопределить текущую локаль, передав объект локали в качестве параметра метода `setLocale()`: ~~~js -scheduler.i18n.setLocale(localeObject); +scheduler.i18n.setLocale(localeObject); ~~~ -Если вы укажете только часть объекта локали, планировщик объединит ваши метки с существующей локалью: +Примечание: если вы передаёте частичную локаль, планировщик добавит ваши подписи в текущую локаль: ~~~js scheduler.i18n.setLocale({ labels: { day_tab: "Day", } -}); +}); ~~~ -- Или, если нужно переключаться между несколькими локалями, вы можете добавить локаль с собственным языковым кодом и затем переключиться на неё: +- или, если нужно переключаться между несколькими локалями, определить локаль с уникальным языковым кодом и позже переключить планировщик на неё: ~~~js -scheduler.i18n.addLocale("lang", localeObject); +scheduler.i18n.addLocale("lang", localeObject); scheduler.i18n.setLocale("lang"); ~~~ :::note -Имейте в виду, что переключение на собственную локаль изменит интерфейс приложения. Проверьте и скорректируйте все элементы, зависящие от локали, чтобы планировщик корректно отображался на новом языке. +Обратите внимание: активация пользовательской локали в приложении приведёт к изменениям во внешнем виде интерфейса. Проверьте и при необходимости переопределите все элементы, зависящие от локали, чтобы планировщик выглядел корректно на новом языке. ::: **Примечание** -- Вы можете отправить свой файл локали на **support@dhtmlx.com**, и он может быть включён в будущие версии; -- Активная локаль доступна через объект **scheduler.locale**; -- **monthFull** содержит полные названия месяцев, начиная с января; -- **monthShort** содержит сокращённые названия месяцев, начиная с января; -- **dayFull** содержит полные названия дней недели, начиная с воскресенья; -- **dayShort** содержит сокращённые названия дней недели, начиная с воскресенья. +- Вы можете прислать свой файл локали на **support@dhtmlx.com**, чтобы мы могли включить его в следующий релиз. +- Активная локаль также доступна в объекте `scheduler.locale`. +- `monthFull` - полные названия месяцев, начиная с января +- `monthShort` - сокращённые названия месяцев, начиная с января +- `dayFull` - полные названия дней недели, начиная с воскресенья +- `dayShort` - сокращённые названия дней недели, начиная с воскресенья - -~~~js title="English locale definition" +### Определение английской локали +~~~js scheduler.i18n.setLocale({ - date:{ - month_full: ["January", "February", "March", "April", "May", "June", + date: { + month_full: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"], - month_short: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", + month_short: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], - day_full: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", + day_full: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"], day_short: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"] }, - labels:{ + labels: { dhx_cal_today_button: "Today", day_tab: "Day", week_tab: "Week", @@ -146,30 +146,30 @@ scheduler.i18n.setLocale({ section_time: "Time period", full_day: "Full day", - /*recurring events*/ - confirm_recurring:"Edit recurring event", - section_recurring:"Repeat event", - button_recurring:"Disabled", - button_recurring_open:"Enabled", + /* recurring events */ + confirm_recurring: "Edit recurring event", + section_recurring: "Repeat event", + button_recurring: "Disabled", + button_recurring_open: "Enabled", button_edit_series: "All events", button_edit_occurrence: "This event", button_edit_occurrence_and_following: "This and following events", - /*agenda view extension*/ + /* agenda view extension */ agenda_tab: "Agenda", date: "Date", description: "Description", - /*year view extension*/ + /* year view extension */ year_tab: "Year", /* week agenda extension */ week_agenda_tab: "Agenda", - /*grid view extension*/ + /* grid view extension */ grid_tab: "Grid", - /* touch tooltip*/ + /* touch tooltip */ drag_to_create: "Drag to create", drag_to_move: "Drag to move", @@ -225,20 +225,19 @@ scheduler.i18n.setLocale({ repeat_freq_year: "Year", repeat_on_date: "On date", repeat_ends: "Ends", - month_for_recurring: ["January", "February", "March", "April", "May", "June", + month_for_recurring: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"], - day_for_recurring: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", + day_for_recurring: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"] } }); ~~~ +### Связанные образцы +- [Localization](https://docs.dhtmlx.com/scheduler/samples/01_initialization_loading/07_locale_usage.html) -[Localization](https://docs.dhtmlx.com/scheduler/samples/01_initialization_loading/07_locale_usage.html) - - -## Дополнительные замечания {#additionalnotes} +## Дополнительные заметки -- Если метки **confirm_closing** или **confirm_deleting** не заданы, соответствующее окно подтверждения не появится (подтверждение произойдёт автоматически); -- Метки вида **section_(name)** соответствуют секции lightbox с таким именем. -- Метка **new_event** определяет текст по умолчанию для новых событий. +- Если ярлык `confirm_closing` или `confirm_deleting` не определён, соответствующий диалог подтверждения не будет показываться вовсе (автоподтверждение) +- Ярлык `section_(name)` относится к разделу lightbox с соответствующим именем +- Ярлык `new_event` определяет текст по умолчанию для нового события \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/minicalendar.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/minicalendar.md index 32ea4ff4..6309bb57 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/guides/minicalendar.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/minicalendar.md @@ -10,27 +10,27 @@ sidebar_label: "Мини-календарь (Date Picker)" ![mini_calendar](/img/mini_calendar.png) -[Mini calendar without the scheduler](https://docs.dhtmlx.com/scheduler/samples/05_calendar/02_without_scheduler.html) +[Мини-календарь без планировщика](https://docs.dhtmlx.com/scheduler/samples/05_calendar/02_without_scheduler.html) :::note -Чтобы использовать мини-календарь в вашем приложении, убедитесь, что на странице добавлено расширение **minical**. +Чтобы использовать мини-календарь в приложении, подключите на страницу расширение **minical**. ::: -## В заголовке {#intheheader} +## В заголовке -Чтобы добавить мини-календарь (date picker) в заголовок планировщика (как на изображении ниже), выполните следующие шаги: +Чтобы разместить мини-календарь (выбор даты) в заголовке планировщика (как показано на изображении ниже), выполните следующие шаги: ![calendar_in_header](/img/calendar_in_header.png) -1. Подключите файл расширения на вашей странице: +1. Подключите файл расширения на страницу: ~~~js scheduler.plugins({ minical: true }); ~~~ -2. Определите контейнер для мини-календаря и добавьте его в разметку планировщика: +2. Укажите контейнер для мини-календаря и добавьте его в разметку планировщика: ~~~js
... @@ -39,7 +39,7 @@ scheduler.plugins({ onclick="show_minical()"> 
~~~ -3. Реализуйте логику инициализации (с помощью метода [renderCalendar](api/method/rendercalendar.md)) и уничтожения (с помощью метода [destroyCalendar](api/method/destroycalendar.md)) мини-календаря: +3. Обеспечьте логику инициализации (метод [renderCalendar](api/method/rendercalendar.md)) и уничтожения (метод [destroyCalendar](api/method/destroycalendar.md)) мини-календаря: ~~~js function show_minical(){ if (scheduler.isCalendarVisible()){ @@ -59,46 +59,47 @@ function show_minical(){ ~~~ -[Mini calendar in the scheduler header](https://docs.dhtmlx.com/scheduler/samples/05_calendar/01_select.html) +[Мини-календарь в заголовке планировщика](https://docs.dhtmlx.com/scheduler/samples/05_calendar/01_select.html) -## В заголовке (Сторонний Date Picker) {#intheheaderthirdpartydatepicker} +## В заголовке (Сторонний Date Picker) -В этом разделе показано, как встроить сторонний мини-календарь (date picker) в заголовок планировщика. +В этом разделе покажем, как добавить мини-календарь (выбор даты от сторонних библиотек) в заголовок планировщика. ![custom_minicalendar](/img/custom_minicalendar.png) **Related sample** [3rd party Mini Calendar in the header](https://snippet.dhtmlx.com/5/0dca14de9) -В примере используются [jQuery](https://jquery.com) и [Bootstrap Datepicker](https://bootstrap-datepicker.readthedocs.io/en/latest/) для добавления мини-календаря. Если вы используете другие библиотеки, код потребуется адаптировать, однако общий подход останется похожим: +В нашем примере мы добавим мини-календарь на основе [jQuery](https://jquery.com) и [Bootstrap Datepicker](https://bootstrap-datepicker.readthedocs.io/en/latest/). Если вы используете другие библиотеки, вам потребуется изменить код, но общий подход останется тем же: -1. *Показать date picker при клике по заголовку календаря* +1. *Показать выбор даты при клике по заголовку календаря* -Для начала определите DIV-контейнер для мини-календаря (или другого элемента) внутри заголовка планировщика. Используя [инициализацию через разметку](guides/initialization.md#initializingschedulerviamarkup), это выглядит так: +Во-первых, нужно определить DIV‑контейнер для мини-календаря (или любого другого элемента управления) в заголовке планировщика. +Если вы используете [маркап-инициализацию](guides/initialization.md#initializing-scheduler-via-markup), вы можете сделать это так, как показано в примере: ~~~js -
+
 
 
-
+ ~~~ -Если вы используете [header config](guides/initialization.md#initializingschedulerviaheaderconfig), добавьте [кастомный элемент](api/config/header.md) следующим образом: +Если вы используете [header config](guides/initialization.md#initializing-scheduler-via-header-config), вам нужно добавить [настраиваемый элемент](api/config/header.md) туда: ~~~js scheduler.config.header = [ "day", "week", "month", - {html:'
'+ + {html:''}, @@ -110,7 +111,7 @@ scheduler.config.header = [ scheduler.init("scheduler_here"); ~~~ -Далее, чтобы показывать date picker при клике на дату в панели навигации планировщика, настройте обработчик клика после готовности планировщика: +Чтобы отображать выбор даты при клике по дате в панели навигации планировщика, инициализируем обработчик клика сразу после готовности планировщика: ~~~js scheduler.attachEvent("onSchedulerReady", function(){ @@ -128,7 +129,7 @@ scheduler.attachEvent("onSchedulerReady", function(){ $node.datepicker().on("show", function () { $node.datepicker("update", scheduler.getState().date); - // центрировать popup под датой + // центрируем выпадающий список выборa даты под подписью даты centerDatepicker($(".dhx_cal_date")); }); ... @@ -136,7 +137,7 @@ scheduler.attachEvent("onSchedulerReady", function(){ }); ~~~ -Функция `centerDatepicker` помогает правильно позиционировать выпадающий date picker: +`centerDatepicker` — вспомогательная функция, которую мы реализуем для отображения выпадающего выбора даты в нужном месте: ~~~js ... @@ -145,10 +146,10 @@ scheduler.attachEvent("onSchedulerReady", function(){ if (!$('.datepicker-dropdown').is(':visible')) { return; } - // центрировать popup под датой - var offset = $(".dhx_cal_date").offset(); - var width = $(".dhx_cal_date").width(); - var popupWidth = $(".datepicker-dropdown").width(); + // центрируем выпадающее окно под меткой даты + let offset = $(".dhx_cal_date").offset(); + let width = $(".dhx_cal_date").width(); + let popupWidth = $(".datepicker-dropdown").width(); $(".datepicker-dropdown").css({ top: offset.bottom + "px", left: (width - popupWidth) / 2 + "px" @@ -156,9 +157,9 @@ scheduler.attachEvent("onSchedulerReady", function(){ } ~~~ -2. *Обновлять текущую дату планировщика при выборе даты* +2. *Переключать планировщик на выбранную дату, когда пользователь кликает по дате в date picker* -После показа date picker обновите дату планировщика при выборе дня: +После того как мы отображаем datepicker по запросу, необходимо менять дату планировщика при выборе дня в календаре: ~~~js $node.datepicker().on("changeDate", function () { @@ -166,9 +167,9 @@ scheduler.attachEvent("onSchedulerReady", function(){ }); ~~~ -3. *Подсветить текущие даты в date picker* +3. *Подсветить текущие даты в datepicker* -Чтобы выделить даты, которые сейчас отображаются в планировщике, используйте простой CSS-класс: +Чтобы подсветить даты date picker'а, которые в данный момент отображаются в планировщике, используем простой CSS‑класс: ~~~js .datepicker table .scheduler-date{ @@ -176,16 +177,16 @@ scheduler.attachEvent("onSchedulerReady", function(){ } ~~~ -Всем ячейкам date picker, которые видны в планировщике, присваивается этот класс: +Все клетки date picker, которые сейчас видны в планировщике, будут получать этот класс: ~~~js function fillDatepicker(scheduler) { - // сбросить выделение событий и активных дат + // сброс подсветки событий и активных дат ... $(".datepicker-dropdown").find("[data-date]").removeClass("scheduler-date"); - // выделить дату планировщика - var visibleDates = getVisibleDates(scheduler); + // подсветка даты планировщика + const visibleDates = getVisibleDates(scheduler); visibleDates.forEach(function (date) { $(".datepicker-dropdown").find( "[data-date='" + date + "']" @@ -195,17 +196,17 @@ scheduler.attachEvent("onSchedulerReady", function(){ } ~~~ -Чтобы получить текущие видимые даты, используйте `scheduler.getState`: +Чтобы получить даты, которые в данный момент видны, можно использовать `scheduler.getState`: ~~~js function getVisibleDates(scheduler) { - var minVisible = scheduler.getState().min_date; - var maxVisible = scheduler.getState().max_date; + const minVisible = scheduler.getState().min_date; + const maxVisible = scheduler.getState().max_date; - var current = minVisible; - var result = []; + let current = minVisible; + let result = []; while (current.valueOf() < maxVisible.valueOf()) { - var currentUTC = Date.UTC( + let currentUTC = Date.UTC( current.getFullYear(),current.getMonth(),current.getDate() ); result.push(currentUTC.valueOf()); @@ -216,9 +217,10 @@ scheduler.attachEvent("onSchedulerReady", function(){ } ~~~ -4. *Пометить дни с событиями в date picker* +4. *Подсветить дни с событиями в date picker* -Чтобы выделить даты, в которые есть события в планировщике, добавьте еще один CSS-класс: +Далее, мы хотим, чтобы date picker подсвечивал даты, на которые приходятся события планировщика. +Для этого используем тот же подход, добавив CSS‑класс: ~~~js .datepicker table .has-event::after { @@ -231,26 +233,24 @@ scheduler.attachEvent("onSchedulerReady", function(){ } ~~~ -Это выделяет даты мини-календаря, в которых есть события. - -Чтобы показать тултип с количеством событий при наведении на дату, получите события для месяца, который отображается в date picker: +Как видно из приведенного выше примера, мы подсвечиваем даты мини-календаря, которые содержат события. Чтобы показать тултип с количеством событий для даты, на которую usuário наводит курсор, нужно получить события месяцев, которые в данный момент отображаются в date picker: ~~~js function getVisibleEvents(calendarDate, scheduler) { - var min = scheduler.date.month_start(new Date(calendarDate)); - var max = scheduler.date.add(calendarDate, 1, "month"); + const min = scheduler.date.month_start(new Date(calendarDate)); + const max = scheduler.date.add(calendarDate, 1, "month"); min = scheduler.date.week_start(min); if(scheduler.date.week_start(new Date(max)) < max){ max = scheduler.date.week_start(new Date(max)); max = scheduler.date.add(max, 1, "week"); } - var events = scheduler.getEvents(min, max); - var days = {}; + const events = scheduler.getEvents(min, max); + let days = {}; events.forEach(function (event) { - var eventDate = event.start_date; + let eventDate = event.start_date; while(eventDate < event.end_date){ - var day = Date.UTC( + let day = Date.UTC( eventDate.getFullYear(), eventDate.getMonth(), eventDate.getDate() @@ -265,29 +265,28 @@ scheduler.attachEvent("onSchedulerReady", function(){ } }); - var result = []; - for (var i in days) { + let result = []; + for (let i in days) { result.push({ timestamp: i, count: days[i] }); } return result; } ~~~ -Этот метод получает данные о событиях из планировщика, поэтому выделяются только те события, которые уже загружены. Если ваше приложение использует динамическую загрузку, могут быть показаны не все события, так как загружается только часть. - +В примере выше мы получаем информацию о событиях из планировщика. Это означает, что мы сможем подсветить только те события, которые уже загружены в планировщик. Такой подход не всегда хорош при динамической загрузке, поскольку в плане загружаются лишь небольшая часть всех событий. -В качестве альтернативы можно получать данные о событиях с сервера. +Альтернативный подход состоит в запросе данных о событиях с сервера. -Когда у вас есть временные метки событий и их количество, обновите date picker следующим образом: +Когда у нас есть данные о временных метках клеток, содержащих события, и количестве событий в каждой клетке, мы можем заполнить date picker этой информацией, как в примере: ~~~js function fillDatepicker(scheduler) { - // сбросить выделение событий и активных дат + // сброс подсветки событий и активных дат $(".datepicker-dropdown").find("[data-date]").removeClass("has-event"); $(".datepicker-dropdown").find("[data-date]").removeAttr("title"); ... - // выделить события + // подсветка событий const eventCells = getVisibleEvents($node.datepicker("getDate"), scheduler); eventCells.forEach(function (cellEvents) { $(".datepicker-dropdown").find( @@ -300,9 +299,9 @@ scheduler.attachEvent("onSchedulerReady", function(){ } ~~~ -5. *Синхронизировать отображаемую дату с активной датой планировщика* +5. *Синхронизация отображаемой метки даты с активной датой в планировщике* -В завершение, повторно центрируйте date picker при изменении размера окна и обновляйте выделение при изменении даты в picker: +Наконец, нужно заново центрировать date picker при изменении размера окна и применить подсветку, когда пользователь меняет текущую дату в date picker: ~~~js $(window).on('resize', function () { @@ -326,14 +325,14 @@ scheduler.attachEvent("onSchedulerReady", function(){ refreshDatepicker(scheduler); }); function refreshDatepicker(scheduler) { - // вызывается через timeout, чтобы код сработал после обновления popup datepicker + // вызов через timeout, чтобы код сработал после обновления выпадающего окна datepicker setTimeout(function () { fillDatepicker(scheduler); }); } ~~~ -Если вы используете отдельный элемент для отображения активной даты планировщика, слушайте событие [onViewChange](api/event/onviewchange.md) и обновляйте метку там: +Если вы используете отдельный элемент для отображения активной даты планировщика, вам нужно будет поймать событие [onViewChange](api/event/onviewchange.md) планировщика и обновлять метку даты именно оттуда: ~~~js scheduler.attachEvent("onViewChange", function (newMode , newDate){ @@ -346,16 +345,17 @@ scheduler.attachEvent("onViewChange", function (newMode , newDate){ }); ~~~ -Обратите внимание, что этот обработчик не используется в примере, так как встроенный заголовок даты обновляется автоматически. Используйте его только если вы [скрываете стандартный заголовок даты](guides/scheduler-markup.md) или хотите показывать активную дату в нескольких местах. +Обратите внимание, что мы не используем этот обработчик в нашем примере кода, поскольку опираемся на встроенный заголовок даты планировщика, который обновляется автоматически. Такой код следует использовать только если вы [скрываете заголовок даты по умолчанию](guides/scheduler-markup.md#hiding-the-header-of-scheduler), или если вам нужно отображать активную дату в нескольких местах. -## В lightbox {#inthelightbox} +## В окне (lightbox) -Мини-календарь (date picker) можно также использовать внутри lightbox для выбора "начала" и "конца" события. +Мини-календарь (выбор даты) можно использовать во всплывающем окне для выбора дат начала и конца. ![in_the_lightbox](/img/in_the_lightbox.png) -Чтобы добавить мини-календарь в lightbox, выполните следующие шаги: +Чтобы разместить мини-календарь во всплывающем окне, выполните следующие шаги: + 1. Включите расширение на странице: ~~~js @@ -363,14 +363,14 @@ scheduler.plugins({ minical: true }); ~~~ -2. Измените type секции time на calendar_time вместо time: +2. Установите тип раздела time как calendar_time (вместо time): ~~~js -// стандартное определение lightbox -scheduler.config.lightbox.sections="[" +// дефолтное определение lightbox +scheduler.config.lightbox.sections= [ {name:"description", height:200, map_to:"text", type:"textarea", focus:true}, {name:"time", height:72, type:"time", map_to:"auto"} ]; -// изменить type:"time" -> type:"calendar_time" +//изменить type:"time" -> type:"calendar_time" scheduler.config.lightbox.sections = [ {name:"description", height:200, map_to:"text", type:"textarea", focus:true}, {name:"time", height:72, type:"calendar_time", map_to:"auto" } @@ -378,16 +378,16 @@ scheduler.config.lightbox.sections = [ ~~~ -[Mini calendar in the lightbox](https://docs.dhtmlx.com/scheduler/samples/05_calendar/03_in_form.html) +[Мини-календарь во всплывающем окне (lightbox)](https://docs.dhtmlx.com/scheduler/samples/05_calendar/03_in_form.html) -## Вне планировщика {#outsidethescheduler} +## Вне планировщика -Мини-календарь (date picker) можно разместить в любом месте страницы. +Мини-календарь может располагаться в любом месте на странице. ![outside_the_scheduler](/img/outside_the_scheduler.png) -Чтобы добавить мини-календарь в HTML-контейнер вне планировщика, выполните следующие шаги: +Чтобы разместить мини-календарь в каком‑либо HTML‑контейнере вне планировщика, выполните следующие шаги: 1. Включите расширение на странице: ~~~js @@ -395,17 +395,17 @@ scheduler.plugins({ minical: true }); ~~~ -2. Определите контейнер для мини-календаря на странице: +2. Укажите контейнер для мини‑календаря на странице: ~~~js
...
-
-
+
+
~~~ -3. Вызовите метод [renderCalendar](api/method/rendercalendar.md) для отображения мини-календаря: +3. Вызовите метод [renderCalendar](api/method/rendercalendar.md) для отрисовки мини-календаря на странице: ~~~js const calendar = scheduler.renderCalendar({ container:"cal_here", @@ -417,13 +417,13 @@ const calendar = scheduler.renderCalendar({ ~~~ -[Mini calendar outside the scheduler](https://docs.dhtmlx.com/scheduler/samples/05_calendar/05_plain_structure.html) +[Мини-календарь вне планировщика](https://docs.dhtmlx.com/scheduler/samples/05_calendar/05_plain_structure.html) -## Шаблоны и стили {#templatesandstyles} +## Шаблоны и стили ### Шаблоны -Вы можете легко изменить отображение дат в мини-календаре (выбор дате) с помощью различных шаблонов, описанных в статье [Шаблоны мини-календаря](guides/mini-calendar-templates.md). +Чтобы настроить формат отображаемых дат в мини-календаре (выборе даты), можно воспользоваться набором шаблонов, перечисленных в статье [Шаблоны мини‑календаря](guides/mini-calendar-templates.md). ~~~js scheduler.templates.calendar_month = scheduler.date.date_to_str("%M, %Y"); @@ -434,30 +434,31 @@ const calendar = scheduler.renderCalendar({..}); ![mini_calendar_custom_template](/img/mini_calendar_custom_template.png) -### CSS-классы -Чтобы изменить внешний вид дней в мини-календаре (выбор дате), вы можете переопределить следующие CSS-классы: + +### CSS‑классы +Чтобы настроить внешний вид дней в мини-календаре (выборе даты), можно переопределить следующие CSS‑классы: - + - - + + - - + + - - + + - - + +
CSS classCSS класс Применяется к
.dhx_cal_container.dhx_mini_calendar .dhx_month_headячейка дня.dhx_cal_container.dhx_mini_calendar .dhx_month_headячейке дня
.dhx_cal_container.dhx_mini_calendar .dhx_month_head.dhx_year_eventячейка дня с назначенным событием(ями).dhx_cal_container.dhx_mini_calendar .dhx_month_head.dhx_year_eventячейке дня с назначенным событием(ями)
.dhx_cal_container.dhx_mini_calendar .dhx_now .dhx_month_headячейка дня с текущей датой.dhx_cal_container.dhx_mini_calendar .dhx_now .dhx_month_headячейке дня с текущей датой
.dhx_cal_container.dhx_mini_calendar .dhx_calendar_clickячейка дня с текущей активной датой.dhx_cal_container.dhx_mini_calendar .dhx_calendar_clickячейке дня с выбранной активной датой
@@ -475,8 +476,9 @@ const calendar = scheduler.renderCalendar({..}); ![mini_calendar_custom_css](/img/mini_calendar_custom_css.png) -### Выделение дней с помощью метода markCalendar() -Чтобы назначить определённый CSS-класс дню, вы можете использовать метод [markCalendar](api/method/markcalendar.md): + +### Пометка дней с помощью метода markCalendar() +Чтобы присвоить дню пользовательский CSS‑класс, можно использовать метод [markCalendar](api/method/markcalendar.md): ~~~js + + +scheduler.message({ type:"myCss", text:"some text" }); +~~~ + +## Модальные окна и взаимодействие с клавиатурой + +Клавиатурная функциональность для модальных окон управляется свойством **scheduler.message.keyboard**. Изначально оно установлено в *true*. + +По умолчанию модальные окна блокируют события клавиатуры на странице. Разрешены только следующие клавиши: + +- "space" и "enter" - возвращают *true* как результат модального окна; +- "escape" - возвращает *false* как результат модального окна. + +Установка свойства **keyboard** в значение *false* включит клавиатурные события (и отключит вышеупомянутые клавиши): + +~~~js +scheduler.message.keyboard = false; +scheduler.modalbox({...}); +~~~ + +Это позволяет полноценно использовать клавиатуру, например для ввода значений в поля внутри модальных окон. \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/quick-info.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/quick-info.md index ec5495e6..510cac06 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/guides/quick-info.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/quick-info.md @@ -17,15 +17,14 @@ sidebar_label: "Крупные кнопки для удобной навигац scheduler.plugins({ quick_info: true }); - scheduler.init('scheduler_here',new Date(2009,5,30),"day"); + scheduler.init('scheduler_here',new Date(2027,5,30),"day"); ... + + +~~~ + +Затем укажите основную логику JavaScript, создав файл `src/main.js` с приведённым ниже кодом. Он связывает Scheduler UI с Firestore и обрабатывает обновления в реальном времени. + +~~~js title="src/main.js" +import { scheduler } from "dhtmlx-scheduler"; +import { db } from "./firebase.js"; +import { + collection, + query, + onSnapshot, + addDoc, + deleteDoc, + orderBy, + doc, + updateDoc, + getDocs, +} from "firebase/firestore"; + +import "dhtmlx-scheduler/codebase/dhtmlxscheduler.css"; + +const { remoteUpdates } = scheduler.ext.liveUpdates; + +scheduler.plugins({ + recurring: true, +}); + +scheduler.config.header = [ + "day", + "week", + "month", + "date", + "prev", + "today", + "next", +]; + +scheduler.init("scheduler_here", new Date(2025, 3, 20), "week"); + +const eventsRef = collection(db, "events"); + +scheduler.createDataProcessor(async function (entity, action, ev, id) { + switch (action) { + case "create": + { + const createdDoc = await addDoc(eventsRef, ev); + if (createdDoc.id) { + return { action: "inserted", tid: createdDoc.id }; + } + } + break; + case "update": + { + return updateDoc(doc(db, "events", id), ev); + } + break; + case "delete": + { + const deletedDoc = await deleteDoc(doc(db, "events", id)); + if (deletedDoc) { + return { action: "deleted" }; + } + } + break; + } +}); + +// helper functions to process event data +const processEvent = (docSnapshot) => { + const event = docSnapshot.data(); + event.id = docSnapshot.id; + return event; +}; + +// без этого вызов не появился бы onSnapshot +const eventsQuery = query(eventsRef, orderBy("text", "desc")); + +(async () => { + const EventsSnap = await getDocs(eventsQuery); + const bulkEvents = EventsSnap.docs.map((ev) => processEvent(ev)); + scheduler.parse(bulkEvents); + watchRealtime(); +})(); + +const watchRealtime = () => { + let EventsLoaded = false; + + onSnapshot(eventsQuery, (querySnapshot) => { + if (!EventsLoaded) { + // первый снимок возвращает текущее состояние + // мы уже загрузили его на предыдущем шаге + EventsLoaded = true; + return; + } + querySnapshot.docChanges().forEach((change) => { + // обрабатываются только серверные изменения + if (change.doc.metadata.hasPendingWrites) return; + + const event = processEvent(change.doc); + + switch (change.type) { + case "added": + remoteUpdates.events({ type: "add-event", event }); + break; + case "modified": + remoteUpdates.events({ type: "update-event", event }); + break; + case "removed": + remoteUpdates.events({ type: "delete-event", event }); + break; + } + }); + }); +}; +~~~ + +Этот код интегрирует библиотеку DHTMLX Scheduler с Firebase Firestore, чтобы создать интерактивный календарь событий в приложении на JavaScript в реальном времени. Он синхронизирует данные об событиях между интерфейсом Scheduler и базой Firestore, обеспечивая мгновенное отражение изменений, сделанных в любой из частей, в другой части. Код поддерживает создание, обновление, удаление и повторяющиеся события, используя возможности Firestore в реальном времени. + +### Краткое резюме основных функций + +- **scheduler.createDataProcessor**: обрабатывает операции CRUD для событий Scheduler, синхронизируя их с Firestore: + + - При "create" добавляет новый документ в коллекцию "events". + - При "update" обновляет соответствующий документ Firestore. + - При "delete" удаляет документ из Firestore. + +- **processEvent(docSnapshot)**: преобразует снимок документа Firestore в объект события Scheduler, прикрепляя идентификатор документа. + +- **(...)() IIFE** : начальная загрузка данных. Загружает все существующие события из Firestore в Scheduler при загрузке страницы, затем начинает слушать обновления в реальном времени. + +- **watchRealtime**: использует `onSnapshot` Firestore для прослушивания изменений в коллекции events и обновления интерфейса Scheduler в реальном времени. Ключевые моменты: + + - игнорирует начальный снимок (уже загружен) + - обрабатывает только серверные изменения (игнорирует локальные записи, ещё не подтверждённые на сервере) + - обрабатывает добавленные, изменённые и удалённые события вызовом Scheduler через `remoteUpdates` + +- **onSnapshot(q, callback)**: в реальном времени слушает изменения в коллекции Firestore "events", упорядочивая по полю "text" убыванию, и применяет соответствующие живые обновления к Scheduler UI с использованием `remoteUpdates.events` для добавленных, изменённых или удалённых событий. + +## Шаг 4: Инициализация и развёртывание проекта + +Теперь нужно инициализировать Firebase Hosting и Firestore. Для этого следует: + +1. Из корня проекта выполните следующую команду: + +~~~js +firebase init +~~~ + +Затем выполните шаги ниже: + +- используйте пробел, чтобы выбрать функции Firestore и Hosting +- выберите **Use an existing project** и выберите ваш проект Firebase +- для правил Firestore, индексов и публичного каталога примите значения по умолчанию +- **установите публичный каталог в `dist` (вывод сборки Vite)** +- пропустите настройку развёртывания на GitHub, если вы не хотите её настраивать + +2. Соберите проект, выполнив следующую команду: + +~~~js +npm run build +~~~ + +3. Разверните на Firebase Hosting следующей командой: + +~~~js +firebase deploy +~~~ + +После завершения развёртывания URL хоста будет выведен в консоли. \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/integrations/google-calendar/google-calendar-sync.md b/i18n/ru/docusaurus-plugin-content-docs/current/integrations/google-calendar/google-calendar-sync.md index 7f8a63e2..af471caa 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/integrations/google-calendar/google-calendar-sync.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/integrations/google-calendar/google-calendar-sync.md @@ -1,157 +1,167 @@ --- -title: "Two-way sync with Google Calendar (Node.js)" -sidebar_label: "Two-way sync (Node.js)" -description: "Implement a Node.js + Express integration that syncs DHTMLX Scheduler events with Google Calendar using OAuth 2.0 and Google Calendar API v3." +title: "Двусторонняя синхронизация с Google Calendar (Node.js)" +sidebar_label: "Cинхронизация с Google Calendar" +description: "Реализуйте интеграцию Node.js + Express, которая синхронизирует события DHTMLX Scheduler с Google Calendar с использованием OAuth 2.0 и Google Calendar API v3." --- -# DHTMLX Scheduler: Two-way sync with Google Calendar (Node.js) +# DHTMLX Scheduler: Двусторонняя синхронизация с Google Calendar (Node.js) -In this guide, you will implement **two-way sync** between **DHTMLX Scheduler** and **Google Calendar** in a small Node.js app: +В этом руководстве вы реализуете **двустороннюю синхронизацию** между **DHTMLX Scheduler** и **Google Calendar** в небольшом приложении на Node.js: -- Load calendars and events from Google Calendar into Scheduler -- Push Scheduler create/update/delete operations back to Google Calendar +- Загрузка календарей и событий из Google Calendar в Scheduler +- Отправка операций создания/обновления/удаления Scheduler обратно в Google Calendar :::note -This approach implements **two-way sync via API calls** (Scheduler → backend → Google Calendar). It does **not** implement real-time Google → Scheduler push updates (webhooks). If you change events directly in Google Calendar, reload the app (or reload a date range) to see the updated data in Scheduler. +Этот подход реализует **двустороннюю синхронизацию через вызовы API** (Scheduler → backend → Google Calendar). Он не реализует обновления в реальном времени Google → Scheduler (webhooks). Если вы напрямую изменяете события в Google Calendar, обновите приложение (или обновите диапазон дат), чтобы увидеть обновлённые данные в Scheduler. ::: -You will build: +Вы создадите: -- a Node.js + Express backend with Google OAuth 2.0 ([Passport](https://www.npmjs.com/package/passport)) and a small REST API for Scheduler -- an event mapping layer (Google ↔ Scheduler), including basic recurring events/exceptions handling -- a Scheduler client wired to the backend via `scheduler.createDataProcessor()` +- бэкенд на Node.js + Express с Google OAuth 2.0 ([Passport](https://www.npmjs.com/package/passport)) и небольшим REST API для Scheduler +- слой сопоставления событий (Google ↔ Scheduler), включая базовую обработку повторяющихся событий/исключений +- клиента Scheduler, подключённого к бэкенду через `scheduler.createDataProcessor()` -## Prerequisites +:::note +Полный исходный код доступен на [GitHub](https://github.com/DHTMLX/scheduler-google-calendar-demo). +::: + +## Требования - Node.js 18+ -- A Google account with access to Google Cloud Console -- Basic familiarity with TypeScript and Express -- Access to DHTMLX Scheduler packages (the example uses `@dhx/trial-scheduler`) +- Учётная запись Google с доступом к Google Cloud Console +- Базовые знания TypeScript и Express +- Доступ к пакетам DHTMLX Scheduler (в примере используется `@dhx/trial-scheduler`) -## Demo repository +## Демонстрационный репозиторий -A complete working project that matches this guide is available on GitHub: -- https://github.com/dhtmlx/scheduler-google-auth-demo *(placeholder - replace with your actual repo)* +Полный рабочий проект, соответствующий данному руководству, доступен на GitHub: +- https://github.com/dhtmlx/scheduler-google-auth-demo -The guide explains the key steps and shows the integration code that matters. The repository is the "full runnable reference". +Руководство объясняет ключевые шаги и демонстрирует важный код интеграции. Репозиторий является «полной рабочей ссылкой». -## Project setup +## Настройка проекта -In this section you will prepare Google OAuth credentials, configure the project, and run the app locally. +В этом разделе вы подготовите учетные данные Google OAuth, сконфигурируете проект и запустите приложение локально. -### 1) Get the project code +### 1) Получение кода проекта -Do one of the following: +Выполните одно из следующих действий: -- Clone the repository: +- Клонировать репозиторий: ~~~bash title="Terminal" git clone https://github.com/dhtmlx/scheduler-google-auth-demo.git cd scheduler-google-auth-demo ~~~ -If your project installs `@dhx/*` packages from the private registry, configure npm: +Если ваш проект устанавливает пакеты `@dhx/*` из частного реестра, настройте npm: ~~~bash title="Terminal" npm config set @dhx:registry https://npm.dhtmlx.com ~~~ -### 2) Configure Google Cloud (OAuth 2.0) +### 2) Настройка Google Cloud (OAuth 2.0) -In this step you will create OAuth credentials that the backend uses to access Google Calendar on behalf of a user. +На этом шаге вы создадите учётные данные OAuth, которые бэкенд будет использовать для доступа к Google Calendar от имени пользователя. -> The guide uses OAuth in **Testing** mode (recommended for development). In this mode, only users listed as **Test users** can authorize the app. +> Руководство использует OAuth в режиме тестирования (рекомендуется для разработки). В этом режиме авторизовать приложение могут только пользователи, перечисленные как тестовые. -#### 2.1 Create or select a Google Cloud project +#### 2.1 Создать или выбрать проект Google Cloud -1. Open [Google Cloud Console](https://console.cloud.google.com/). -2. Select an existing project or create a new one. +1. Открыть [Google Cloud Console](https://console.cloud.google.com/). +2. Выбрать существующий проект или создать новый. -#### 2.2 Enable Google Calendar API +#### 2.2 Включить Google Calendar API -1. Go to **APIs & Services → Library**. -2. Search for **Google Calendar API**. -3. Click **Enable**. +1. Перейти в **APIs & Services → Library**. +2. Найти **Google Calendar API**. +3. Нажать **Enable**. -#### 2.3 Configure the OAuth consent screen +#### 2.3 Настроить экран согласия OAuth -1. Go to **APIs & Services → OAuth consent screen**. -2. Choose **External** (typical for consumer Google accounts), then click **Create**. -3. Fill in the required fields: +1. Перейти в **APIs & Services → OAuth consent screen**. +2. Выбрать **External** (типично для потребительских учётных записей Google), затем нажать **Create**. +3. Заполнить обязательные поля: - **App name** - **User support email** - **Developer contact email** -4. Set **Publishing status** to **Testing**. -5. Add **Test users**: - - Add the Google accounts you will use to sign in while developing/testing. +4. Установить **Publishing status** в **Testing**. +5. Добавить **Test users**: + - Добавить учётные записи Google, которыми вы будете входить при разработке/тестировании. :::note -If you skip test users in **Testing** mode, Google will block authorization for accounts that are not explicitly added. +Если пропустить тестовых пользователей в режиме **Testing**, Google заблокирует авторизацию для учётных записей, не включённых явно в список. ::: -#### 2.4 Create OAuth client credentials +#### 2.4 Создать OAuth-клиентские креденциалы + +1. Перейти в **APIs & Services → Credentials**. +2. Нажать **Create credentials → OAuth client ID**. +3. Тип приложения: **Web application**. +4. Добавить этот **Authorized JavaScript origin**: + +~~~text title="JavaScript origin" +http://localhost:3000 +~~~ -1. Go to **APIs & Services → Credentials**. -2. Click **Create credentials → OAuth client ID**. -3. Application type: **Web application**. -4. Add this **Authorized redirect URI**: +5. Добавить этот **Authorized redirect URI**: ~~~text title="Redirect URI" http://localhost:3000/auth/google/callback ~~~ -5. Save and copy: +6. Сохранить и скопировать: - **Client ID** - **Client Secret** -#### 2.5 Scope used by this integration +#### 2.5 Область доступа, используемая этой интеграцией -The backend requests Google Calendar access via: +Бэкенд запрашивает доступ к Google Calendar через: - `https://www.googleapis.com/auth/calendar` -This scope is sufficient for listing calendars and performing event CRUD operations. +Эта область доступа достаточна для перечисления календарей и выполнения операций CRUD над событиями. -### 3) Configure environment variables +### 3) Настройка переменных окружения -In this step you will provide OAuth credentials and session settings to the backend. +На этом этапе вы предоставите креденциалы OAuth и настройки сессий бэкенду. -Copy `.env.example` to `.env`, then fill in the values: +Скопируйте `.env.example` в `.env`, затем заполните значения: ~~~ini title=".env" -GOOGLE_CLIENT_ID=... -GOOGLE_CLIENT_SECRET=... +GOOGLE_CLIENT_ID= +GOOGLE_CLIENT_SECRET= GOOGLE_REDIRECT_URI=http://localhost:3000/auth/google/callback SESSION_SECRET=some-long-random-string PORT=3000 ~~~ -### 4) Install dependencies and run +### 4) Установка зависимостей и запуск ~~~bash title="Terminal" npm install npm run start ~~~ -Open: +Откройте: ~~~text title="App URL" http://localhost:3000 ~~~ -At this point you should be able to click **Add Google Calendars**, sign in, and see Scheduler populated with events. +На этом этапе вы сможете нажать **Add Google Calendars**, войти в систему и увидеть Scheduler, заполненный событиями. --- -## Implementation +## Реализация -The rest of the guide explains how the integration is put together. If you are adapting this to an existing app, treat each section below as an implementation milestone. +Оставшаяся часть руководства объясняет, как именно собирается интеграция. Если вы адаптируете это к уже существующему приложению, считайте каждый раздел ниже как этап реализации. -## Step 1 - Split responsibilities (backend vs client) +## Шаг 1 - Разделение обязанностей (backend vs client) -In this step you will separate responsibilities so Scheduler stays a UI component and the backend owns OAuth + Google API calls. +На этом шаге вы разделите ответственности, чтобы Scheduler оставался UI‑компонентом, а бэкенд владел OAuth + вызовами Google API. -A typical structure: +Типичная структура: ~~~text title="Project structure" scheduler-google-auth-demo/ @@ -175,18 +185,18 @@ scheduler-google-auth-demo/ .env.example ~~~ -- **server/**: OAuth, token storage (in session), Google Calendar API calls, and REST endpoints for Scheduler -- **client/**: Scheduler init + loading, and [DataProcessor](guides/server-integration.md) that forwards CRUD actions to the server +- **server/**: OAuth, хранение токенов в сессии, вызовы Google Calendar API и REST‑концевые точки для Scheduler +- **client/**: инициализация Scheduler + загрузка, и [DataProcessor](guides/server-integration.md) для перенаправления CRUD‑действий на сервер -## Step 2 - Implement Google OAuth (Express session + Passport) +## Шаг 2 - Реализация Google OAuth (Express session + Passport) -In this step you will make the backend able to authenticate a user and store Google access/refresh tokens. +На этом шаге вы сделаете бэкенд способным аутентифицировать пользователя и хранить токены доступа/обновления Google. -### 2.1 Bootstrap the server (sessions + passport) +### 2.1 Подключение сервера (сессии + passport) -Update `server/index.ts` to enable sessions and passport, then mount your routes. +Обновите `server/index.ts`, чтобы включить сессии и passport, затем примонтируйте маршруты. -Below is the core wiring (only the relevant parts are shown): +Ниже приведено ядро подключения (показываются только релевантные части): ~~~ts title="server/index.ts" app.use( @@ -206,7 +216,9 @@ app.use( app.use(passport.initialize()); app.use(passport.session()); -app.use("/events", eventsRoute); +app.use("/events", (req, res, next) => { + req.isAuthenticated() ? next() : res.status(401).json({ error: "Not authenticated" }); +}, eventsRoute); app.use("/auth", authRoute); app.get("/", (req, res) => { @@ -214,13 +226,23 @@ app.get("/", (req, res) => { }); ~~~ -### 2.2 Configure the Google strategy +Inline‑middleware на `/events` гарантирует, что неавторизованные запросы получают ответ `401`, вместо того чтобы падать сервер при попытке привести `req` к `AuthenticatedRequest`. + +### 2.2 Настройка стратегии Google -Update `server/config/passport.ts` to register `passport-google-oauth20`. +Обновите `server/config/passport.ts`, чтобы зарегистрировать `passport-google-oauth20`. -The key idea: keep `accessToken` and `refreshToken` on the user object stored in the session: +Ключевая идея: хранить `accessToken` и `refreshToken` в объекте пользователя, сохраняемом в сессии: ~~~ts title="server/config/passport.ts" +passport.serializeUser((user: Express.User, done) => { + done(null, user); +}); + +passport.deserializeUser((obj: Express.User, done) => { + done(null, obj); +}); + passport.use( new GoogleStrategy( { @@ -241,12 +263,12 @@ passport.use( ~~~ :::note -Production apps usually persist tokens per user in a database and implement refresh token rotation/revocation. This example keeps tokens in-session to keep the flow easy to follow. +Обычно продакшн‑приложения сохраняют токены по пользователю в базе данных и реализуют обновление/ревокацию refresh‑токенов. В этом примере токены хранятся в сессии, чтобы упростить процесс. ::: -### 2.3 Add OAuth routes +### 2.3 Добавить маршруты OAuth -Update `server/routes/auth.route.ts` to expose the OAuth entry point, callback, and logout: +Обновите `server/routes/auth.route.ts`, чтобы открыть точку входа OAuth, коллбек и выход из системы: ~~~ts title="server/routes/auth.route.ts" router.get( @@ -269,26 +291,110 @@ router.get("/google/logout", (req, res, next) => { }); ~~~ -At this point you should be able to hit `/auth/google`, complete the Google consent screen, and return to `/` with an authenticated session. +На этом этапе вы должны суметь открыть `/auth/google`, пройти консент‑экран Google и вернуться к `/` с авторизованной сессией. -## Step 3 - Expose a REST API for Scheduler CRUD +### Создать сервис Google Calendar -In this step you will implement the API contract Scheduler uses: +Создайте `server/services/googleService.ts` для обёртывания CRUD‑методов Google Calendar API v3. Он создаёт OAuth2‑клиента по токенам сессии и предоставляет помощники для перечисления календарей, перечисления событий и создания/обновления/удаления событий: -- `GET /events` - load calendars + events -- `POST /events` - create -- `PUT /events/:eventId` - update -- `DELETE /events/:eventId` - delete +~~~ts title="server/services/googleService.ts" +import { google, calendar_v3 } from "googleapis"; +import type { GoogleOAuthTokens } from "../types/auth.types.ts"; +import config from "../config/index.ts"; -### 3.1 Load calendars + events (GET /events) +const calendarClient = google.calendar("v3"); -Update `server/routes/events.route.ts` to return: +function oauthClient(tokens: GoogleOAuthTokens) { + const client = new google.auth.OAuth2( + config.GOOGLE_CLIENT_ID, + config.GOOGLE_CLIENT_SECRET, + config.GOOGLE_REDIRECT_URI + ); + client.setCredentials({ + access_token: tokens.accessToken, + refresh_token: tokens.refreshToken, + }); + return client; +} +/* ------ CRUD helpers ------- */ -- `data` containing Scheduler-style events -- `collections.calendars` containing list of calendars that will be [available on the client]](guides/loading-data.md) +export async function listCalendars(tokens: GoogleOAuthTokens): Promise { + const { data } = await calendarClient.calendarList.list({ auth: oauthClient(tokens) }); + return data.items ?? []; +} -Below is a working example handler: +export async function listEvents( + tokens: GoogleOAuthTokens, + opts: calendar_v3.Params$Resource$Events$List +): Promise { + const { data } = await calendarClient.events.list({ + auth: oauthClient(tokens), + ...opts, + }); + return data.items ?? []; +} + +export async function createEvent( + tokens: GoogleOAuthTokens, + calendarId: string | undefined, + gEvent: calendar_v3.Schema$Event +): Promise { + const { data } = await calendarClient.events.insert({ + auth: oauthClient(tokens), + calendarId: calendarId || "primary", + requestBody: gEvent, + conferenceDataVersion: 1, + }); + return data; +} + +export async function updateEvent( + tokens: GoogleOAuthTokens, + calendarId: string | undefined, + eventId: string, + gPatch: calendar_v3.Schema$Event +): Promise { + const { data } = await calendarClient.events.patch({ + auth: oauthClient(tokens), + calendarId: calendarId || "primary", + eventId, + requestBody: gPatch, + }); + return data; +} + +export async function deleteEvent( + tokens: GoogleOAuthTokens, + calendarId: string | undefined, + eventId: string +): Promise { + await calendarClient.events.delete({ + auth: oauthClient(tokens), + calendarId: calendarId || "primary", + eventId, + }); +} +~~~ + +## Шаг 3 - Экспорт REST API для CRUD Scheduler + +На этом шаге вы реализуете контракт API, который использует Scheduler: + +- `GET /events` — загрузить календари + события +- `POST /events` — создать +- `PUT /events/:eventId` — обновить +- `DELETE /events/:eventId` — удалить + +### 3.1 Загрузка календарей + событий (GET /events) + +Обновите `server/routes/events.route.ts`, чтобы возвращать: + + +- `data` с событиями в формате Scheduler +- `collections.calendars` с списком календарей, который будет [доступен на клиенте](guides/loading-data.md#collections) + +Ниже приведён рабочий обработчик: ~~~ts title="server/routes/events.route.ts" router.get("/", async (req, res, next) => { @@ -314,7 +420,7 @@ router.get("/", async (req, res, next) => { const googleEvents = await Promise.all( mappedCals.map(async (calendar) => { - const params: Record = { calendarId: calendar.id, timeMin: minDate }; + const params: calendar_v3.Params$Resource$Events$List = { calendarId: calendar.id, timeMin: minDate }; if (maxDate) params.timeMax = maxDate; const calendarEventsResponse = await googleService.listEvents(authedReq.user.tokens, params); @@ -336,13 +442,13 @@ router.get("/", async (req, res, next) => { }); ~~~ -Related docs: [Loading data](guides/loading-data.md). +Связанные документы: [Loading data](guides/loading-data.md#collections). -### 3.2 Forward CRUD operations to Google Calendar +### 3.2 Перенаправление CRUD‑операций в Google Calendar -Update the same route module to handle create/update/delete. +Обновите тот же модуль маршрутов, чтобы обрабатывать создание/обновление/удаление. -Create: +Создание: ~~~ts title="server/routes/events.route.ts" router.post("/", async (req, res, next) => { @@ -363,7 +469,7 @@ router.post("/", async (req, res, next) => { }); ~~~ -Update: +Обновление: ~~~ts title="server/routes/events.route.ts" router.put("/:eventId", async (req, res, next) => { @@ -385,15 +491,15 @@ router.put("/:eventId", async (req, res, next) => { }); ~~~ -Delete: +Удаление: ~~~ts title="server/routes/events.route.ts" router.delete("/:eventId", async (req, res, next) => { const authedReq = req as AuthenticatedRequest; const calendarId = (req.body as DhxEvent)?.calendarId as string | undefined; - // If this is an exception occurrence (id contains "_"), there is nothing to delete on Google side. - // Google Calendar removes occurrences when deleting the main recurring event. + // Если это исключение повторного события (id содержит "_"), удалить на стороне Google ничего не нужно. + // Google Calendar удаляетOccurrence при удалении основного повторяющегося события. const dhxId = req.body?.id as string | undefined; if (typeof dhxId === "string" && dhxId.indexOf("_") > -1) { res.json({ action: "deleted" }); @@ -409,37 +515,41 @@ router.delete("/:eventId", async (req, res, next) => { }); ~~~ -At this point Scheduler can load `/events`, and basic CRUD can be wired on the client. +На данный момент Scheduler может загружать `/events`, а базовые операции CRUD можно реализовать на клиенте. -## Step 4 - Map Google events to Scheduler events (and back) +## Шаг 4 - Соответствие Google‑событий событиям Scheduler (и обратно) -In this step you will implement a mapper that converts between: +На этом шаге вы реализуете маппер, который преобразует между: -- Google event fields (`start.dateTime` / `start.date`, `recurrence`, etc.) -- Scheduler event fields (`start_date`, `end_date`, `rrule`, etc.) +- полями Google‑события (`start.dateTime` / `start.date`, `recurrence`, и т. д.) +- полями события Scheduler (`start_date`, `end_date`, `rrule`, и т. д.) -### Key differences you must handle +### Основные различия, которые нужно учесть -1) **All-day vs timed events** -- Google: all-day uses `start.date` / `end.date` -- Google: timed uses `start.dateTime` / `end.dateTime` and may include `timeZone` -- Scheduler: uses `start_date` / `end_date` (Date objects) +1) **Целодневные vs события с указанием времени** +- Google: целодневные используют `start.date` / `end.date` +- Google: события с временем используют `start.dateTime` / `end.dateTime` и могут содержать `timeZone` +- Scheduler: использует `start_date` / `end_date` (объекты Date) -2) **Recurrence rules** -- Google stores recurrence as array strings with `RRULE:` prefix -- Scheduler uses `rrule` without the prefix +2) **Правила повторения** +- Google хранит повторение в виде массива строк с префиксом `RRULE:` +- Scheduler использует `rrule` без префикса -3) **Recurring series end date** -- Scheduler expects an `end_date` for recurring series. -- Google may use `UNTIL=` in RRULE, or no UNTIL (infinite series). +3) **Конец серии повторений** +- Scheduler ожидает `end_date` для повторяющихся серий. +- Google может использовать `UNTIL=` в RRULE, или вовсе не указывать UNTIL (бесконечная серия). -Related docs: [Recurring events](guides/recurring-events.md). +Связанные документы: [Recurring events](guides/recurring-events.md). ### Google → Scheduler -Update `server/mappers/eventMapper.ts` to map the Google event shape into Scheduler's event shape (excerpt below; keep helper functions like `calculateEndDate()` in the same module): +Обновите `server/mappers/eventMapper.ts`, чтобы преобразовать форму события Google в форму события Scheduler (см. фрагмент ниже; сохраняйте вспомогательные функции, такие как `calculateEndDate()`, в том же модуле): ~~~ts title="server/mappers/eventMapper.ts" +import moment from "moment-timezone"; +import type { DhxEvent, MappedCalendar } from "../types/types.ts"; +import type { calendar_v3 } from "googleapis"; + export function toDhxEvent(gEvent: calendar_v3.Schema$Event, calendar: MappedCalendar): DhxEvent { const ev: DhxEvent = { id: gEvent.id as string, @@ -480,7 +590,7 @@ export function toDhxEvent(gEvent: calendar_v3.Schema$Event, calendar: MappedCal ev.end_date = calculateEndDate(gEvent); } - // Exceptions: original start time + // Исключения: исходное время начала if (gEvent.originalStartTime?.dateTime) { ev.original_start = new Date(gEvent.originalStartTime.dateTime); } @@ -489,9 +599,27 @@ export function toDhxEvent(gEvent: calendar_v3.Schema$Event, calendar: MappedCal } ~~~ +### helper calculateEndDate() + +Извлекает дату UNTIL из правила повторения Google или возвращает дату далеко в будущем для бесконечных серий. Scheduler ожидает end_date у повторяющихся событий, поэтому этот хелпер возвращает её: + +~~~ts title="server/mappers/eventMapper.ts" +// convert UNTIL=20260129T205959Z -> '2026-01-29T20:59:59Z' если существует +// если UNTIL нет -> повторение бесконечно -> вернуть '9999-02-01T00:00:00Z' +function calculateEndDate(gEvent: calendar_v3.Schema$Event): Date { + const until = String(gEvent.recurrence?.[0] ?? "").match(/RRULE:.*?UNTIL=([^;]+)/)?.[1]; + + return until + ? new Date( + until.replace(/^([0-9]{4})([0-9]{2})([0-9]{2})T([0-9]{2})([0-9]{2})([0-9]{2})Z$/, "$1-$2-$3T$4:$5:$6Z") + ) + : new Date(9999, 1, 1); +} +~~~ + ### Scheduler → Google -Update the mapper to convert Scheduler event fields back into Google's schema: +Обновите сопоставитель, чтобы преобразовать поля Scheduler обратно в схему Google: ~~~ts title="server/mappers/eventMapper.ts" export function toGoogleEventPayload(dhx: DhxEvent): calendar_v3.Schema$Event { @@ -500,6 +628,8 @@ export function toGoogleEventPayload(dhx: DhxEvent): calendar_v3.Schema$Event { description: dhx.details ?? "", }; + const tz = dhx.timeZone || "UTC"; + if (dhx.start_date && dhx.end_date) { const isAllDay = dhx.duration === 24 * 60 * 60 || @@ -514,16 +644,14 @@ export function toGoogleEventPayload(dhx: DhxEvent): calendar_v3.Schema$Event { gEvent.end = { date: moment(dhx.start_date).add(1, "day").format("YYYY-MM-DD") }; } else { gEvent.start = { - dateTime: moment - .tz(new Date(dhx.start_date).toISOString(), "YYYY-MM-DD HH:mm", dhx.timeZone) - .format("YYYY-MM-DDTHH:mm:ssZZ"), - timeZone: dhx.timeZone, + dateTime: moment(new Date(dhx.start_date).toISOString()).tz(tz).format("YYYY-MM-DDTHH:mm:ssZZ"), + timeZone: tz, }; const endDate = new Date(new Date(dhx.start_date).getTime() + dhx.duration * 1000).toISOString(); gEvent.end = { - dateTime: moment.tz(endDate, "YYYY-MM-DD HH:mm", dhx.timeZone).format("YYYY-MM-DDTHH:mm:ssZZ"), - timeZone: dhx.timeZone, + dateTime: moment(endDate).tz(tz).format("YYYY-MM-DDTHH:mm:ssZZ"), + timeZone: tz, }; } } else { @@ -533,30 +661,24 @@ export function toGoogleEventPayload(dhx: DhxEvent): calendar_v3.Schema$Event { gEvent.end = { date: moment(dhx.start_date).add(1, "day").format("YYYY-MM-DD") }; } else { gEvent.start = { - dateTime: moment - .tz(new Date(dhx.start_date).toISOString(), "YYYY-MM-DD HH:mm", dhx.timeZone) - .format("YYYY-MM-DDTHH:mm:ssZZ"), - timeZone: dhx.timeZone, + dateTime: moment(new Date(dhx.start_date).toISOString()).tz(tz).format("YYYY-MM-DDTHH:mm:ssZZ"), + timeZone: tz, }; gEvent.end = { - dateTime: moment - .tz(new Date(dhx.end_date).toISOString(), "YYYY-MM-DD HH:mm", dhx.timeZone) - .format("YYYY-MM-DDTHH:mm:ssZZ"), - timeZone: dhx.timeZone, + dateTime: moment(new Date(dhx.end_date).toISOString()).tz(tz).format("YYYY-MM-DDTHH:mm:ssZZ"), + timeZone: tz, }; } } - // Recurring exceptions support + // Поддержка исключений повторяющихся событий if (dhx.recurring_event_id) { gEvent.recurringEventId = dhx.recurring_event_id.toString(); } if (dhx.original_start) { gEvent.originalStartTime = { - dateTime: moment - .tz(new Date(dhx.original_start).toISOString(), "YYYY-MM-DD HH:mm", dhx.timeZone) - .format("YYYY-MM-DDTHH:mm:ssZZ"), - timeZone: dhx.timeZone, + dateTime: moment(new Date(dhx.original_start).toISOString()).tz(tz).format("YYYY-MM-DDTHH:mm:ssZZ"), + timeZone: tz, }; } if (dhx.deleted) { @@ -568,13 +690,13 @@ export function toGoogleEventPayload(dhx: DhxEvent): calendar_v3.Schema$Event { } ~~~ -## Step 5 - Wire Scheduler to the backend (load + CRUD) +## Шаг 5 - Подключение Scheduler к бэкенду (загрузка + CRUD) -In this step you will initialize Scheduler, load data from `GET /events`, and send CRUD operations to the backend via DataProcessor. +На этом шаге вы инициализируете Scheduler, загрузите данные через `GET /events` и отправляете операции CRUD на бэкенд через DataProcessor. -### 5.1 Render a different UI for "authorized vs not authorized" +### 5.1 Отображение другого UI для "авторизован/не авторизован" -Update `client/index.ejs` to expose an authorization flag to the client: +Обновите `client/index.ejs`, чтобы передать клиенту флаг авторизации: ~~~html title="client/index.ejs" ~~~ -### 5.2 Initialize Scheduler and load events +### 5.2 Инициализация Scheduler и загрузка событий -Update `client/main.ts` to initialize Scheduler and load data once the user is authorized. +Обновите `client/main.ts`, чтобы инициализировать Scheduler и загрузить данные после авторизации пользователя. -Only the relevant part is shown: +Только релевантная часть: ~~~ts title="client/main.ts" scheduler.plugins({ recurring: true }); @@ -602,19 +724,19 @@ if (GOOGLE_AUTHORIZED) { } ~~~ -### 5.3 Enable two-way sync with DataProcessor +### 5.3 Включение двусторонней синхронизации через DataProcessor -Update `client/main.ts` to forward Scheduler CRUD actions to the server. +Обновите `client/main.ts`, чтобы пересылать CRUD‑действия Scheduler на сервер. ~~~ts title="client/main.ts" scheduler.createDataProcessor(async (entity, action, data, id) => { const calendars = scheduler.serverList("calendars") as MappedCalendar[]; - // Demo simplification: send everything into the first available calendar. - // In a real app, let users choose a target calendar. + // Упрощение демо: отправляем всё в первый доступный календарь. + // В реальном приложении позвольте пользователю выбрать целевой календарь. data.calendarId = calendars[0]?.id; - // Provide client timezone so the server can generate correct dateTime values. + // Предоставьте клиентский часовой пояс, чтобы сервер мог корректно генерировать значения dateTime. data.timeZone = momentTz.tz.guess(); return fetchEvent(action, data, id); @@ -639,41 +761,41 @@ async function fetchEvent(action, data, id) { } ~~~ -Related docs: [DataProcessor](guides/server-integration.md#createdp). +Связанные документы: [DataProcessor](guides/server-integration.md#technique). -At this point: +На данный момент: -- events from Google Calendar should appear in Scheduler after authorization -- creating/updating/deleting in Scheduler should update Google Calendar +- события из Google Calendar должны появиться в Scheduler после авторизации +- создание/обновление/удаление в Scheduler должно обновлять Google Calendar --- -## Troubleshooting +## Устранение неполадок ### "Error 400: redirect_uri_mismatch" -- **Cause:** The redirect URI in Google Cloud credentials does not match your app callback URL. -- **Fix:** Ensure the Authorized redirect URI is exactly: +- Причина: перенаправляющий URI в учетных данных Google Cloud не совпадает с данным URL‑адресом вашего приложения. +- Исправление: убедитесь, что Authorized redirect URI EXACTLY такой же: - `http://localhost:3000/auth/google/callback` ### "Access blocked: app has not completed the Google verification process" -- **Cause:** Consent screen is not in Testing mode or you are not listed as a test user. -- **Fix:** Set Publishing status to **Testing** and add your account in **Test users**. +- Причина: экран согласия не в режиме Testing или вы не добавлены в список тестовых пользователей. +- Исправление: установите Publishing status в **Testing** и добавьте вашу учётную запись в **Test users**. ### "No refresh token returned" -- **Cause:** Google may return a refresh token only the first time the user consents for a given client ID. -- **Fix:** Ensure your auth request includes `accessType: "offline"` and `prompt: "consent"`. If you already authorized before, revoke access in Google Account permissions and authorize again. +- Причина: Google может вернуть refresh token только при первом согласии пользователя для данного client ID. +- Исправление: убедитесь, что ваш запрос аутентификации включает `accessType: "offline"` и `prompt: "consent"`. Если вы уже авторизованы ранее, отзовите доступ в настройках разрешений Google Account и повторно авторизуйтесь. -## Summary +## Резюме -You implemented two-way sync between Scheduler and Google Calendar: +Вы реализовали двустороннюю синхронизацию между Scheduler и Google Calendar: -- The backend authenticates users via Google OAuth 2.0 and stores tokens in the session -- Scheduler loads calendars and events through `GET /events` -- Scheduler CRUD operations are forwarded to Google Calendar via `POST/PUT/DELETE /events` -- A mapper converts timed/all-day and recurring events between Google Calendar and Scheduler +- Бэкенд аутентифицирует пользователей через Google OAuth 2.0 и хранит токены в сессии +- Scheduler загружает календари и события через `GET /events` +- CRUD‑операции Scheduler пересылаются в Google Calendar через `POST/PUT/DELETE /events` +- Сопоставитель конвертируетTimed/целодневные и повторяющиеся события между Google Calendar и Scheduler -## Demo repository link +## Ссылка на демонстрационный репозиторий -Full working source (replace with your real repo): +Полный рабочий исходник: -- https://github.com/dhtmlx/scheduler-google-auth-demo +- https://github.com/DHTMLX/scheduler-google-calendar-demo \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/integrations/legacy/backbone-integration.md b/i18n/ru/docusaurus-plugin-content-docs/current/integrations/legacy/backbone-integration.md new file mode 100644 index 00000000..1442a28b --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/integrations/legacy/backbone-integration.md @@ -0,0 +1,55 @@ +--- +title: "Интеграция с Backbone (устаревшая)" +sidebar_label: "Интеграция с Backbone (устаревшая)" +--- + +## Интеграция с Backbone (устаревшая) + +:::warning +Эта статья описывает устаревшую интеграцию. Если вы начинаете с нуля, смотрите решения по интеграции фреймворков или настройку на чистом JS. +::: + +С версии 4.0 библиотека предоставляет специальное расширение [**mvc**](guides/extensions-list.md#legacy), которое позволяет интегрировать планировщик с библиотекой Backbone. + +Если у вас есть приложение на основе Backbone и вы хотите добавить туда планировщик (при этом данные всё ещё управляются через Backbone), используйте следующую последовательность действий: + +1. Добавьте файлы dhtmlxScheduler в приложение: +~~~js + + +~~~ +2. Активируйте расширение mvc на странице: +~~~js +scheduler.plugins({ + mvc: true +}); +~~~ +3. Инициализируйте и настройте планировщик обычным способом: +~~~js +scheduler.full_day = true; + +scheduler.init("scheduler_here",new Date(2027,0,6),"month"); +~~~ +4. Теперь вы можете создать коллекцию данных в Backbone и привязать планировщик к ней: +~~~js +//you can use any model here +MyEvent = Backbone.Model.extend({}); +EventList = Backbone.Collection.extend({ + model:MyEvent, + url:"./data/backbone.json" +}); +events = new EventList(); + + +scheduler.backbone(events); //link scheduler to collection +~~~ + +После этого планировщик будет загружать данные из коллекции и отражать любые обновления в ней. Также любые изменения через UI планировщика будут вызывать соответствующие события в коллекции Backbone. + + +Как видите, это довольно просто. Всё, что вам нужно, — использовать метод [backbone](api/method/backbone.md) вместо обычных [load](api/method/load.md) или [parse](api/method/parse.md). + +Метод [backbone](api/method/backbone.md) заставляет планировщик отражать все изменения данных в модели Backbone и наоборот. +В качестве параметра метод принимает коллекцию Backbone. + +[Интеграция с Backbone](https://docs.dhtmlx.com/scheduler/samples/10_integration/07_backbone.html) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/integrations/legacy/dhtmlx-dnd.md b/i18n/ru/docusaurus-plugin-content-docs/current/integrations/legacy/dhtmlx-dnd.md new file mode 100644 index 00000000..ae4c0a69 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/integrations/legacy/dhtmlx-dnd.md @@ -0,0 +1,72 @@ +--- +title: "Перетаскивание из DHTMLX Suite v5.x" +sidebar_label: "Перетаскивание из DHTMLX Suite v5.x" +--- + +# Операции перетаскивания (устаревшее) + +:::warning +Эта статья описывает устаревшую интеграцию. Если вы начинаете с нуля, см. интеграции с фреймворками или настройку на vanilla JS. +::: + +Библиотека предоставляет расширение **outerdrag**, которое позволяет создавать новые события перетаскиванием элементов из внешних компонентов DHTMLX или других планировщиков. + +## Перетаскивание из внешних компонентов + +Как только пользователь перетащит внешний элемент в планировщик, планировщик откроет окно lightbox для создания нового события. + + +![external_dnd](/img/external_dnd.png) + + +[Интеграция с dhtmlxTree](https://docs.dhtmlx.com/scheduler/samples/10_integration/02_dhtmlxtree_outer_drag.html) + + +Давайте рассмотрим внешнюю перетаскивание в контексте компонента dhtmlxTree. + + +Следуйте этим шагам, чтобы интегрировать планировщик с dhtmlxTree: + +1. Скачать пакет dhtmlxTree и распаковать его содержимое в папку [YOUR APPLICATION ROOT] +2. Включите необходимые js и css файлы на страницу: +~~~html + + +... +~~~ +3. Активируйте расширение [outerdrag] на странице: +~~~js +scheduler.plugins({ + outerdrag: true +}); +~~~ +4. Инициализируйте компонент dhtmlxTree (см. инструкции здесь) : +~~~js +const tree = new dhtmlXTreeObject("treebox", "100%", "100%", 0); +tree.setImagePath("../common/dhtmlxTree/imgs/csh_yellowbooks/"); +tree.loadXML("./data/tree.xml"); +~~~ +5. Включите перетаскивание в компоненте dhtmlxTree (см. инструкции здесь) : +~~~js +tree.enableDragAndDrop(true); +~~~ +6. Инициализируйте и настройте планировщик: +~~~js +... +scheduler.init('scheduler_here', new Date(2027, 5, 30), "timeline"); +~~~ +7. Назначьте обработчик на событие [onExternalDragIn](api/event/onexternaldragin.md), чтобы определить, как текст перетаскиваемого элемента будет преобразован в свойство события: +~~~js +scheduler.attachEvent("onExternalDragIn", function(id, source, event){ + const label = tree.getItemText(tree._dragged[0].id); + scheduler.getEvent(id).text = label; + return true; +}); + +~~~ + + +[Интеграция с dhtmlxTree](https://docs.dhtmlx.com/scheduler/samples/10_integration/02_dhtmlxtree_outer_drag.html) + + +Теперь вы можете легко создавать новые события, содержащие данные дерева — просто перетащите нужный узел. \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/integrations/other/bootstrap.md b/i18n/ru/docusaurus-plugin-content-docs/current/integrations/other/bootstrap.md new file mode 100644 index 00000000..b237a1d2 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/integrations/other/bootstrap.md @@ -0,0 +1,48 @@ +--- +title: "Интеграция с Bootstrap" +sidebar_label: "Интеграция с Bootstrap" +--- + +# Интеграция с Bootstrap + +Вы можете интегрировать библиотеку Scheduler с фреймворком Bootstrap. Чтобы добавить Scheduler в приложение на Bootstrap, выполните следующие шаги: + +1. Подключите файл dhtmlxScheduler к приложению: + +~~~html + +~~~ + +2. Укажите HTML-разметку для элементов Bootstrap и добавьте контейнер Scheduler и элементы заголовков, как показано ниже: + +~~~html +
+
+
+ dhtmlxScheduler +
+
+ + +
+ +
+
+ +~~~ + +3. Инициализируйте и настройте Scheduler обычным способом: + +~~~js +scheduler.plugins({ + year_view: true, +}); +scheduler.config.first_hour = 8; +scheduler.config.limit_time_select = true; + +scheduler.init('scheduler_here',new Date(2027,5,30),"week"); +~~~ + + +[Макет Bootstrap](https://docs.dhtmlx.com/scheduler/samples/10_integration/08_bootstrap.html) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/integrations/other/dhxlayout-integration.md b/i18n/ru/docusaurus-plugin-content-docs/current/integrations/other/dhxlayout-integration.md new file mode 100644 index 00000000..5a3303fd --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/integrations/other/dhxlayout-integration.md @@ -0,0 +1,90 @@ +--- +title: "Интеграция с dhtmlxLayout" +sidebar_label: "Интеграция с dhtmlxLayout" +--- + +# Интеграция с dhtmlxLayout + +:::warning +Описанная функциональность устарела и больше не поддерживается. +::: + +Хороший способ разместить [несколько планировщиков](guides/multiple-per-page.md) на странице — использовать dhtmlxLayout. Он не только обеспечивает красивую рамку, но и гарантирует корректное взаимодействие с другими элементами на странице и поведение при изменении размера страницы. + +:::note +Обратите внимание, что dhtmlxLayout не является частью библиотеки dhtmlxScheduler. +Существует две версии Layout на выбор, в зависимости от версии библиотеки dhtmlxSuite. +::: + +## dhtmlxSuite v5+ + +В этой версии dhtmlxLayout может использоваться как отдельный продукт или как часть библиотеки dhtmlxSuite. Чтобы использовать dhtmlxLayout v5.X в вашем приложении, вам следует [приобрести лицензию](https://dhtmlx.com/docs/products/dhtmlxSuite/). + +**Чтобы привязать экземпляр dhtmlxScheduler к ячейке макета**, используйте метод [attachScheduler()](https://docs.dhtmlx.com/api__dhtmlxcell_attachscheduler.html). + +**Примечание**, привязывая планировщик к ячейке, он автоматически инициализируется. Поэтому сначала сконфигурируйте планировщик перед размещением его в макете. + +~~~js +function init() { + const dhxLayout = new dhtmlXLayoutObject(document.body, "2U"); + + sched1 = Scheduler.getSchedulerInstance(); + sched1.config.multi_day = true; + dhxLayout.cells("a").attachScheduler(new Date(2027,05,30),"week",null,sched1); + sched1.load("/data/units") + + sched2 = Scheduler.getSchedulerInstance(); + dhxLayout.cells("b").attachScheduler(new Date(2027,05,30),"month",null,sched2); + sched2.load("/data/units") +} +~~~ + +[Интеграция с dhtmlxLayout (sкин dhx_terrace, Suite v5.1)](https://docs.dhtmlx.com/scheduler/samples/10_integration/05_dhtmlxlayout_terrace.html) + +## dhtmlxSuite v6+ + +Начиная с dhtmlxSuite 6.0, dhtmlxLayout нельзя получить отдельно от всей библиотеки Suite. +Если вы собираетесь использовать этот подход, вам следует приобрести лицензию на +[Suite 6.X library](https://dhtmlx.com/docs/products/dhtmlxSuite/#licensing). + +dhtmlxScheduler версии [5.3](whats-new.md#53) и выше реализует общий интерфейс View, который используется в dhtmlxSuite v6+ и может быть +[прикреплён к любой ячейке напрямую](https://docs.dhtmlx.com/suite/layout/api/cell/layout_cell_attach_method/): + +~~~js +// создайте и настройте экземпляр планировщика +scheduler.config.header = [ + "day", + "week", + "month", + "date", + "prev", + "today", + "next" +]; +scheduler.config.multi_day = true; + +// после привязки планировщика будет сгенерировано событие onSchedulerReady +scheduler.attachEvent("onSchedulerReady", function () { + requestAnimationFrame(function(){ + // здесь можно задать начальный вид и дату и загрузить данные + scheduler.setCurrentView(new Date(2027,5,3), "week"); + scheduler.load("../common/events.json"); + }); + +}); + +const layout = new dhx.Layout("layout", { + rows: [{ + id: "scheduler-cell", + header: "Appointment Scheduler", + html:"
" + }] +}); +layout.cell("scheduler-cell").attach(scheduler); +~~~ + +### Обратите внимание + +- Обратите внимание, что `dhtmlxSuite Layout` асинхронен, планировщик не будет инициализирован сразу после вызова `.attach`. +- Вам нужно обработать событие "onSchedulerReady" для любых настроек после инициализации. +- В данный момент **нет способа задать разметку планировщика, когда он используется вместе с dhtmlxSuite v6+**, что означает, что вам нужно использовать конфигурацию [header](api/config/header.md) для указания элементов навигационной панели. \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/jquery-integration.md b/i18n/ru/docusaurus-plugin-content-docs/current/integrations/other/jquery-integration.md similarity index 100% rename from i18n/ru/docusaurus-plugin-content-docs/current/guides/jquery-integration.md rename to i18n/ru/docusaurus-plugin-content-docs/current/integrations/other/jquery-integration.md diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/integrations/react/configuration-props.md b/i18n/ru/docusaurus-plugin-content-docs/current/integrations/react/configuration-props.md new file mode 100644 index 00000000..4225c511 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/integrations/react/configuration-props.md @@ -0,0 +1,213 @@ +--- +title: Использование свойств DHTMLX Scheduler в ReactScheduler +sidebar_label: Конфигурация +description: "Полная справка об обертках пропсов, сопоставляемых с конфигурацией Scheduler, шаблонами, событиями и обратными вызовами данных." +--- + +# Использование свойств DHTMLX Scheduler в ReactScheduler + +Эта страница описывает пропсы, принятые **React Scheduler**, и как они сопоставляются с API DHTMLX Scheduler. + +## Доступные свойства + +| Свойство | Тип | Описание | +|---|---|---| +| `events` | `Event[]` | События Scheduler, которые нужно отобразить. | +| `view` | `"day" \| "week" \| "month" \| "year" \| ...` | Активный вид Scheduler. | +| `date` | `Date` | Активная дата, используемая для отображения выбранного вида. | +| `templates` | `SchedulerTemplates` | Соответствует шаблонам Scheduler (например, рендеринг стиля/текста события). | +| `config` | `SchedulerConfig` | Соответствует параметрам конфигурации Scheduler. | +| `xy` | `Record` | Настройки размера пользовательского интерфейса (например, скрытие встроенной навигации через `nav_height: 0`). | +| `data` | `{ load?: string \| (() => Promise); save?: string \| SaveHandler; batchSave?: BatchSaveHandler }` | Загрузка данных и обработка изменений: колбэки/URL-адреса. | +| `customLightbox` | `ReactElement \| null` | Заменяет встроенный Lightbox вашим React-компонентом. | +| `modals` | `SchedulerModals` | Переопределяет встроенные диалоги подтверждения (например, подтверждение удаления события). | +| `filter` | `(event: Event) => boolean` | Фильтрует события, отображаемые в Scheduler. | +| `on` props | `(...args) => any` | Обработчики событий, сопоставленные с событиями Scheduler (`onViewChange`, `onBeforeLightbox` и т. д.). | + +## Базовый пример + +```tsx +import ReactScheduler, { + type Event, + type SchedulerConfig, + type SchedulerTemplates, +} from "@dhtmlx/trial-react-scheduler"; +import "@dhtmlx/trial-react-scheduler/dist/react-scheduler.css"; + +const events: Event[] = [ + { + id: 1, + text: "Planning", + start_date: new Date("2025-12-08T09:00:00Z"), + end_date: new Date("2025-12-08T10:00:00Z"), + }, +]; + +const templates: SchedulerTemplates = { + event_class: (_start, _end, event) => event.classname || "", +}; + +const config: SchedulerConfig = { + first_hour: 6, + last_hour: 22, + hour_size_px: 60, +}; + +export default function Demo() { + return ( + + ); +} +``` + +## Свойство data (`load`, `save`, `batchSave`) + +Используйте свойство `data`, чтобы подключить Scheduler к вашему бэкенду или к состоянию, управляемому React. + +### Использование URL-адресов бэкенда + +```tsx + +``` + +### Использование обработчиков обратного вызова + +```tsx + { + if (entity !== "event") return; + + if (action === "create") { + const response = await fetch("/api/events", { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify(item), + }); + + const created = await response.json(); + return { id: created.id }; + } + + if (action === "update") { + await fetch(`/api/events/${id}`, { + method: "PUT", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify(item), + }); + } + + if (action === "delete") { + await fetch(`/api/events/${id}`, { method: "DELETE" }); + } + }, + }} +/> +``` + +## Соответствие шаблонов и конфигурации + +`templates` сопоставляются функциям шаблонов Scheduler, тогда как `config` сопоставляется с параметрами конфигурации Scheduler. + +```tsx + + event.classname === "important" ? "event-important" : "", + }} + config={{ + first_hour: 7, + last_hour: 21, + time_step: 15, + }} +/> +``` + +## Свойства событий + +Вы можете передавать события Scheduler в качестве пропсов React. + +```tsx + { + console.log("View changed:", mode, date); + }} + onBeforeLightbox={(eventId) => { + console.log("Opening editor for", eventId); + return true; + }} +/> +``` + +Для полного списка поддерживаемых событий и колбэков смотрите: + +- [Обзор событий Scheduler](api/overview/events_overview.md) +- [Обзор методов Scheduler](api/overview/methods_overview.md) +- [Обзор свойств Scheduler](api/overview/properties_overview.md) + +## `customLightbox` и `modals` + +Используйте `customLightbox`, когда хотите заменить встроенный редактор событий своим React-компонентом. +Используйте `modals`, когда нужны настраиваемые диалоги подтверждения. + +```tsx +} + modals={{ + onBeforeEventDelete: ({ event, callback }) => { + if (window.confirm(`Delete "${event.text}"?`)) { + callback(); + } + }, + }} +/> +``` + +## Фильтрация событий + +```tsx + event.text.toLowerCase().includes(search.toLowerCase())} +/> +``` + +## Прямой доступ к API через `ref` + +Если ваш кейс не охвачен пропсами, используйте `ref` для получения базового экземпляра Scheduler. + +```tsx +import { useEffect, useRef } from "react"; +import ReactScheduler, { type ReactSchedulerRef } from "@dhx/react-scheduler"; + +export default function DirectApiDemo() { + const schedulerRef = useRef(null); + + useEffect(() => { + const scheduler = schedulerRef.current?.instance; + if (!scheduler) return; + + console.log(scheduler.getEvents()); + scheduler.setCurrentView(new Date()); + }, []); + + return ; +} +``` + +## Связанные страницы + +- [Обзор React Scheduler](integrations/react/overview.md) +- [Основы привязки данных и управления состоянием](integrations/react/state/state-management-basics.md) +- [Быстрый старт с React Scheduler](integrations/react/quick-start.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/integrations/react/copyright.md b/i18n/ru/docusaurus-plugin-content-docs/current/integrations/react/copyright.md new file mode 100644 index 00000000..493aa972 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/integrations/react/copyright.md @@ -0,0 +1,156 @@ +--- +title: "Лицензии третьих лиц" +sidebar_label: "Лицензии третьих лиц" +--- + +# Лицензии третьих лиц + +Эта страница перечисляет уведомления о стороннем программном обеспечении и условия лицензирования для компонентов, распространяемых в составе **DHTMLX React Scheduler**. + +DHTMLX React Scheduler представляет собой комплектную дистрибуцию, которая включает библиотеку DHTMLX Scheduler JavaScript. В результате все сторонние компоненты, распространяемые вместе с DHTMLX Scheduler, также применяются к React Scheduler. + +Эта страница дополнительно перечисляет сторонние компоненты, специфичные для обёртки React и для необязательного приложения примеров React. + +## Компоненты, входящие в состав DHTMLX React Scheduler + +### Шрифт Inter + +Авторские права 2020 The Inter Project Authors ([https://github.com/rsms/inter](https://github.com/rsms/inter)) + +Это программное обеспечение шрифта лицензировано по SIL Open Font License, версия 1.1. +Эта лицензия приведена ниже и также доступна с FAQ по адресу: +[https://openfontlicense.org](https://openfontlicense.org) + +#### SIL OPEN FONT LICENSE Version 1.1 - 26 февраля 2007 г. + +Преамбула +Цели лицензии Open Font License (OFL) заключаются в стимулировании всемирной +разработки совместных проектов по созданию шрифтов, поддержке efforts +по созданию шрифтов в академических и лингвистических сообществах и в +предоставлении свободной и открытой основы, в рамках которой шрифты могут +распределяться и улучшаться в партнерстве с другими. + +OFL позволяет использовать лицензионные шрифты, изучать, изменять и +распространять их свободно, пока они не продаются сами по себе. Шрифты, +включая любые производные работы, могут быть упакованы, внедрены, +распространяться и/или продаваться с любым программным обеспечением, при условии, +что любые зарезервированные имена не используются производными работами. Шрифты и их производные, +однако, не могут выпускаться под иным типом лицензии. Требование о том, чтобы шрифты оставались под этой лицензией, +не распространяется на любой документ, созданный с использованием шрифтов или их производных. + +ОПРЕДЕЛЕНИЯ +"Font Software" относится к набору файлов, опубликованных Правообладателем(ями) по этой лицензии и явно помеченных как таковые. Это может +включать исходники, сборочные скрипты и документацию. + +"Reserved Font Name" относится к любым именам, указанным как зарезервированные после +авторского заявления(й). + +"Original Version" относится к коллекции компонентов Font Software, как +распространяется Правообладателем(ями). + +"Modified Version" относится к любому производному, созданному путем добавления, удаления +или замены — частично или полностью — любых компонентов Original Version, смены форматов +или портирования Font Software в новую среду. + +"Author" относится к любому дизайнеру, инженеру, программисту, техническому +писателю или другому лицу, внесшему вклад в Font Software. + +РАЗРЕШЕНИЕ И УСЛОВИЯ +Настоящим предоставляется бесплатное разрешение любому лицу, получившему +копию Font Software, использовать, изучать, копировать, объединять, внедрять, +изменять, распространять и продавать измененные и неизмененные копии Font +Software, при условии соблюдения следующих условий: + +1) Ни Font Software, ни любой из его отдельных компонентов, +в оригинальной или измененной версиях, не может продаваться сам по себе. + +2) Оригинальные или измененные версии Font Software могут быть упакованы, +распространяться и/или продаваться вместе с любым программным обеспечением, при условии, что каждая копия +содержит вышеуказанное уведомление об авторских правах и эту лицензию. Их можно +включать либо как автономные текстовые файлы, либо в читаемые человеком заголовки, либо +в соответствующие машинно-читаемые метаданные в текстовых или двоичных файлах, при условии что эти поля +легко просматриваются пользователем. + +3) Никакая измененная версия Font Software не может использовать Зарезервированное имя(ена) шрифта, если не получено явное письменное разрешение соответствующего +Правообладателя. Это ограничение применяется только к основному имени шрифта, представленному пользователям. + +4) Имя(я) Правообладателя(ей) или Автора(ов) Font Software не должны использоваться для продвижения, поддержки или рекламы любой +измененной версии, за исключением упоминания вклада(ов) Правообладателя(ей) и Автора(ов) или с их явным письменным +разрешением. + +5) Font Software, измененное или неизмененное, частично или полностью, +должно распространяться исключительно под этой лицензией и не должно +распространяться под любую другую лицензию. Требование к тому, чтобы шрифты +оставались под этой лицензией, не распространяется на любой документ, созданный +с использованием Font Software. + +Прекращение +Лицензия становится недействительной, если какое-либо из вышеуказанных условий не выполнено. + +Отказ от гарантий +FONT SOFTWARE ПРЕДОСТАВЛЯЕТСЯ "КАК ЕСТЬ", БЕЗ ГАРАНТИИ НИКАКИХ ТИПОВ, +ЯВНОЙ ИЛИ НЕЯВНОЙ, ВКЛЮЧАЯ, НО НЕ ОГРАНИВАЯСЬ ТЕМ, ЧТО МОЖЕТ БЫТЬ ГАРАНТИЕЙ ПРИГОДНОСТИ +ДЛЯ ПРОЧЕГО ЦЕЛЕПРИИ; НАРЕЧЕНЫЕ НАРУШЕНИЯ, НАРУШЕНИЕ ПРАВ И Т.Д. НИКЕМ НЕ НЕСЕТ +ОТВЕТСТВЕННОСТИ, ВКЛЮЧАЯ ОБЩИЕ, ОСОБЫЕ, КОСВЕННЫЕ, СЛУЧАЙНЫЕ И ПОСЛЕДСТВЕННЫЕ +УЩЕРБЫ, ВОЗНИКАЮЩИЕ В НАДЕЖДЫ ИЛИ В РЕЗУЛЬТАТЕ ИСПОЛЬЗОВАНИЯ FONT SOFTWARE ИЛИ +ДРУГИХ ОПЕРАЦИЙ С FONT SOFTWARE. + +### lodash-es + +Обёртка React Scheduler включает **[lodash-es](https://www.npmjs.com/package/lodash-es)** для функциональности во время выполнения. + +Авторские права OpenJS Foundation и другие участники https://openjsf.org/ + +Основано на Underscore.js, авторское право Джереми Эшкенаса, +DocumentCloud и Investigative Reporters & Editors http://underscorejs.org/ + +Это программное обеспечение состоит из добровольных вкладов многих +лиц. Точное историческое участие смотрите в истории изменений, +доступной на https://github.com/lodash/lodash + +Следующая лицензия распространяется на все части этого программного обеспечения, кроме тех случаев, когда об этом указано ниже: + +#### MIT License + +Разрешение предоставляется безвозмездно любому лицу, получившему копию данного программного обеспечения и связанных с ним файлов документации (далее именуемых «Программное обеспечение»), для обращения с Программным обеспечением без ограничений, включая без ограничений право использовать, копировать, изменять, объединять, публиковать, распространять, сублицензировать и/или продавать копии Программного обеспечения, и разрешать лицам, которым оно предоставлено, делать то же самое, при соблюдении следующих условий: + +1) Вышеупомянутое уведомление об авторских правах и настоящее предупреждение должны содержаться во всех копиях или существенных частях Программного обеспечения. + +ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ ПРЕДОСТАВЛЯЕТСЯ "КАК ЕСТЬ", БЕЗ ЛЮБОГО РАННЕГО ОБЕСПЕЧЕНИЯ, ЯВНОГО ИЛИ НЕЯВНОГО, ВКЛЮЧАЯ НО НЕ ОГРАНИЧИВАЯСЬ ГАРАНТИЯМИ ТОВАРНОЙ ПРИГОДНОСТИ, ПРИГОДНОСТИ ДЛЯ ОПРЕДЕЛЕННОЙ ЦЕЛИ И НЕДЕПОВЕРЖЕННОСТИ +ПРАВОПИСЕЙ, ПАТЕНТОВ, ТОВАРНЫХ ЗНАКОВ ИЛИ ДРУГИХ ПРАВ. НИ В КОЕМ СЛУЧАЕ АВТОРЫ ИЛИ COPYRIGHT HOLDERS НЕ НЕСУТ ОТВЕТСТВЕННОСТИ С ПО ЛЮБОМУ ИСКУ, УЩЕРБАМ ИЛИ ДРУГОЙ ОТВЕТСТВЕННОСТИ, +ВКЛЮЧАЯ ОБЩИЕ, СПЕЦИАЛЬНЫЕ, КОСВЕННЫЕ, СЛУЧАЙНЫЕ И ПОСЛЕДСТВЕННЫЕ +УЩЕРБЫ, ВОЗНИКАЮЩИЕ В ДЕЙСТВИИ ДОГОВОРА, ДЕЛА ИЛИ ИНЫХ, В СВЯЗИ С ПРОГРАММНЫМ ОБЕСПЕЧЕНИЕМ ИЛИ ИХ ИСПОЛЬЗОВАНИЕМ. + +==== + +Авторские права и связанные с ними права на примеры кода освобождаются посредством CC0. Пример кода определяется как весь исходный код, оформленный в рамках текста документации. + +CC0: http://creativecommons.org/publicdomain/zero/1.0/ + +==== + +Файлы, расположенные в каталогах node_modules и vendor, являются внешними поддерживаемыми библиотеками, используемыми этим программным обеспечением и имеющими собственные лицензии; рекомендуем вам ознакомиться с ними, так как их условия могут отличаться от приведённых выше. + +## Компоненты, используемые в приложении примеров React Scheduler + +DHTMLX React Scheduler может распространяться вместе с необязательным приложением примеров. Следующие сторонние компоненты используются **только в приложении примеров** и не являются частью самой библиотеки React Scheduler. + +Эти зависимости перечислены в файле `package.json` приложения примеров. + +### Экосистема React и UI-библиотеки + +Приложение примеров использует сторонние библиотеки, такие как: + +- React +- React DOM +- Ant Design +- Material UI +- Emotion +- React Router +- Day.js +- React Draggable +- Базовые UI-компоненты + +Эти библиотеки лицензированы в соответствии с их открытыми лицензиями (MIT, Apache License 2.0, или аналогичные щедрые лицензии), как указано авторами. + +Приложение примеров предоставляется исключительно в демонстрационных целях. Обязательства по лицензиям для этих компонентов применяются только в случае перераспределения или модификации приложения примеров. \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/integrations/react/firebase-integration.md b/i18n/ru/docusaurus-plugin-content-docs/current/integrations/react/firebase-integration.md new file mode 100644 index 00000000..93951089 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/integrations/react/firebase-integration.md @@ -0,0 +1,210 @@ +--- +title: Интеграция React Scheduler и Firebase +sidebar_label: Быстрый старт с Firebase +description: "Создайте совместную работу в реальном времени в React Scheduler, синхронизированную через Firebase Firestore." +--- + +# Интеграция React Scheduler и Firebase + +Это руководство показывает, как подключить **React Scheduler** к **Firebase Firestore** для синхронизации между несколькими пользователями в реальном времени. + +Вы создадите: + +- страницу Scheduler, управляемую состоянием React (`events`) +- слушатели Firestore для обновлений в реальном времени +- мост `data.save` для создания/обновления/удаления + +## Шаг 1. Создание проекта + +```bash +npm create vite@latest react-scheduler-firebase -- --template react-ts +cd react-scheduler-firebase +npm install firebase +``` + +Установите React Scheduler, как описано в [руководстве по установке React Scheduler](integrations/react/installation.md). + +Для оценки: + +```bash +npm install @dhtmlx/trial-react-scheduler +``` + +Для профессионального пакета замените импорт из trial на `@dhx/react-scheduler`. + +## Шаг 2. Настройка Firebase + +В консоли Firebase: + +1. Создайте проект. +2. Включите **Firestore Database**. +3. Зарегистрируйте веб-приложение и скопируйте конфигурацию Firebase. + +Добавьте `.env`: + +```env +VITE_FIREBASE_CONFIGURATION={"apiKey":"YOUR_API_KEY","authDomain":"YOUR_AUTH_DOMAIN","projectId":"YOUR_PROJECT_ID","storageBucket":"YOUR_STORAGE_BUCKET","messagingSenderId":"YOUR_MESSAGING_SENDER_ID","appId":"YOUR_APP_ID"} +``` + +Создайте `src/firebase.ts`: + +```ts +import { initializeApp } from "firebase/app"; +import { collection, getFirestore, query } from "firebase/firestore"; + +const firebaseConfig = JSON.parse(import.meta.env.VITE_FIREBASE_CONFIGURATION); + +const app = initializeApp(firebaseConfig); +const db = getFirestore(app); + +const eventsCollection = collection(db, "events"); +const eventsQuery = query(eventsCollection); + +export { db, eventsCollection, eventsQuery }; +``` + +## Шаг 3. Подготовка сидов и типов + +Создайте `src/seed/data.ts`: + +```ts +import type { Event as SchedulerEvent } from "@dhtmlx/trial-react-scheduler"; + +export const seedEvents: SchedulerEvent[] = [ + { + id: "event_1", + text: "Planning", + start_date: "2025-12-08T09:00:00Z", + end_date: "2025-12-08T10:00:00Z", + }, + { + id: "event_2", + text: "Client call", + start_date: "2025-12-08T11:00:00Z", + end_date: "2025-12-08T12:00:00Z", + }, +]; +``` + +## Шаг 4. Рендеринг Scheduler и загрузка событий + +Создайте `src/components/Scheduler.tsx`: + +```tsx +import { useEffect, useMemo, useState } from "react"; +import ReactScheduler, { type Event as SchedulerEvent } from "@dhtmlx/trial-react-scheduler"; +import "@dhtmlx/trial-react-scheduler/dist/react-scheduler.css"; + +import { + addDoc, + deleteDoc, + doc, + getDocs, + onSnapshot, + updateDoc, + type QueryDocumentSnapshot, + type QuerySnapshot, +} from "firebase/firestore"; + +import { db, eventsCollection, eventsQuery } from "../firebase"; + +const mapDoc = (snap: QueryDocumentSnapshot): SchedulerEvent => { + const data = snap.data(); + return { + ...data, + id: snap.id, + } as SchedulerEvent; +}; + +export default function SchedulerWithFirebase() { + const [events, setEvents] = useState([]); + + useEffect(() => { + let mounted = true; + + (async () => { + const initial = await getDocs(eventsQuery); + if (!mounted) return; + setEvents(initial.docs.map(mapDoc)); + })(); + + const unsubscribe = onSnapshot(eventsQuery, (snapshot: QuerySnapshot) => { + const nextEvents = snapshot.docs.map(mapDoc); + setEvents(nextEvents); + }); + + return () => { + mounted = false; + unsubscribe(); + }; + }, []); + + const data = useMemo( + () => ({ + save: async ( + entity: string, + action: string, + raw: SchedulerEvent, + id: string | number + ) => { + if (entity !== "event") return; + + if (action === "create") { + const created = await addDoc(eventsCollection, { + ...raw, + id: undefined, + }); + + return { id: created.id }; + } + + const targetId = String(raw?.id ?? id); + const targetRef = doc(db, "events", targetId); + + if (action === "update") { + await updateDoc(targetRef, { ...raw }); + return; + } + + if (action === "delete") { + await deleteDoc(targetRef); + } + }, + }), + [] + ); + + return ( +
+ +
+ ); +} +``` + +## Шаг 5. Подключение к приложению + +Замените `src/App.tsx`: + +```tsx +import SchedulerWithFirebase from "./components/Scheduler"; + +export default function App() { + return ; +} +``` + +## Примечания по синхронизации + +- Firestore `onSnapshot` обеспечивает синхронизацию всех подключённых клиентов. +- Возврат `{ id: created.id }` в `data.save` обеспечивает замену временных идентификаторов на идентификаторы документов Firestore. +- Держите правила безопасности строгими перед развёртыванием в продакшн. + +## Связанные страницы + +- [Основы привязки данных и управления состоянием](integrations/react/state/state-management-basics.md) +- [Обзор React Scheduler](integrations/react/overview.md#bindingdata) +- [Интеграция с сервером](guides/server-integration.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/integrations/react/index.md b/i18n/ru/docusaurus-plugin-content-docs/current/integrations/react/index.md new file mode 100644 index 00000000..4332ec83 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/integrations/react/index.md @@ -0,0 +1,45 @@ +--- +title: "React Scheduler" +sidebar_label: React Scheduler +description: "Установите, настройте и используйте DHTMLX Scheduler в React с помощью официальной обертки." +image: /img/frameworks/react.png +--- + +React Scheduler — официальная обертка React для DHTMLX Scheduler. Она позволяет использовать график Scheduler как компонент React, сохраняя при этом полный API конфигурации. + +Если вам нужно полное описание того, как работает React Scheduler и какие функции он предоставляет, начните с [Обзор](integrations/react/overview.md). + +## Начало работы + +Если вы новичок в обертке, следуйте этому порядку: + +1. [Установка](integrations/react/installation.md) - выберите версию React Scheduler: Evaluation (публичный npm) или Professional (частный npm). +2. [Быстрый старт](integrations/react/quick-start.md) - отрисуйте ваш первый график и проверьте настройку. +3. [Конфигурация](integrations/react/configuration-props.md) - узнайте, как работать с props, шаблонами и обработчиками событий. + +## Интеграции с фреймворками + +Если ваше приложение построено на мета-фреймворке, используйте эти руководства для настройки, соответствующей фреймворку: + +- [Next.js](integrations/react/nextjs.md) - настройка клиентского компонента и общие ограничения SSR +- [Remix](integrations/react/remix.md) - настройка на основе маршрутов и заметки по интеграции + +## Выбор модели привязки данных + +React Scheduler поддерживает два подхода к привязке данных: + +- **React‑управляемые данные** (рекомендуются для большинства приложений на React). + Вы храните события в React или в менеджере состояний, передаете их как props и обрабатываете обновления через колбэки `data.save`/`data.batchSave`. + +- **Данные, управляемые Scheduler** (полезны в специализированных, чувствительных к производительности случаях) + Вы инициализируете данные один раз и позволяете Scheduler (и ваш бэкенд) управлять жизненным циклом данных. React не повторно применяет обновленные props после каждого изменения. + +Чтобы понять оба подхода и их компромиссы, прочитайте [Основы привязки данных и управления состоянием](integrations/react/state/state-management-basics.md). + +## Учебники по данным и управлению состоянием + +Если вы используете библиотеку управления состоянием, руководства по [Работе с данными и управлением состоянием](/integrations/react/state/) демонстрируют тот же паттерн интеграции, реализованный для каждой библиотеки (Redux Toolkit, Zustand, MobX и т. д.), а также синхронизацию в реальном времени с Firebase. + +## Примеры и ресурсы для оценки + +Если вы оцениваете React Scheduler, страница оценки предоставляет доступ к технической поддержке на период оценки. См. [Установка](integrations/react/installation.md). \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/integrations/react/installation.md b/i18n/ru/docusaurus-plugin-content-docs/current/integrations/react/installation.md new file mode 100644 index 00000000..04a3957d --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/integrations/react/installation.md @@ -0,0 +1,77 @@ +--- +title: Установка React Scheduler +sidebar_label: Установка +description: "Как установить оценочную или коммерческую версию React Scheduler через npm." +--- + +# Установка React Scheduler + +React Scheduler доступен в двух дистрибутивах: + +1. **Оценочная версия** общедоступна на npm, включает водяной знак пробной версии и может дополнительно сопровождаться бесплатным периодом оценки, который предоставляет доступ к технической поддержке. +2. **Профессиональная (коммерческая) версия** доступна из приватного npm-репозитория DHTMLX и предназначена для использования в продакшн-среде. + +Оба пакета содержат один и тот же API. + +## Установка Оценочной версии (публичный npm) + +Оценочная сборка доступна на npm как [@dhtmlx/trial-react-scheduler](https://www.npmjs.com/package/@dhtmlx/trial-react-scheduler): + +~~~bash +npm install @dhtmlx/trial-react-scheduler +~~~ + +Или с Yarn: + +~~~bash +yarn add @dhtmlx/trial-react-scheduler +~~~ + +Эта сборка полностью функциональна, но выводит сообщение о том, что библиотека работает в режиме оценки. + +### Опционально: начать полный период оценки (рекомендуется) + +Хотя установка пробной версии не имеет ограничений, вы также можете начать официальный период оценки через сайт по адресу +[https://dhtmlx.com/docs/products/dhtmlxScheduler-for-React/download.shtml](https://dhtmlx.com/docs/products/dhtmlxScheduler-for-React/download.shtml). + +Начало формальной оценки даёт вам бесплатную техническую поддержку в течение пробного периода. + +**Скачивание офлайн-примеров (zip)** + +Форма оценки также включает ZIP-файл с готовыми к офлайн-использованию примерами. + +Вы также можете изучить дополнительные примеры и демонстрационные проекты на официальном GitHub, перейдя по [React Scheduler Demos on GitHub](https://github.com/DHTMLX/?q=react-scheduler&type=all&language=&sort=). + +## Профессиональная версия (приватный npm) + +Профессиональная версия предназначена для продакшн-приложений и включает коммерческую лицензию и полный доступ к технической поддержке. + +После получения коммерческой лицензии вы можете сгенерировать свои приватные учетные данные npm в [Личном кабинете](https://dhtmlx.com/clients/). + +После генерации логина/пароля настройте npm: + +~~~bash +npm config set @dhx:registry=https://npm.dhtmlx.com +npm login --registry=https://npm.dhtmlx.com --scope=@dhx +~~~ + +Затем установите профессиональный пакет: + +~~~bash +npm install @dhx/react-scheduler +~~~ + +Или, с Yarn: + +~~~bash +yarn add @dhx/react-scheduler +~~~ + +## Следующие шаги + +После установки продолжайте со следующими разделами: + +- [Быстрый старт](integrations/react/quick-start.md) +- [Обзор](integrations/react/overview.md) +- [Основы привязки данных и управления состоянием](integrations/react/state/state-management-basics.md) +- [Руководства по интеграции с фреймворками](/category/framework-integrations/) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/integrations/react/js-scheduler-react.md b/i18n/ru/docusaurus-plugin-content-docs/current/integrations/react/js-scheduler-react.md index 21a0c897..cf8f575a 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/integrations/react/js-scheduler-react.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/integrations/react/js-scheduler-react.md @@ -5,15 +5,16 @@ sidebar_label: "dhtmlxScheduler с React" # dhtmlxScheduler с React -Это руководство предполагает, что вы знакомы с основами [React](https://react.dev/) и его концепциями. Если вы только начинаете работать с React, рекомендуем ознакомиться с [официальной документацией](https://legacy.reactjs.org/docs/getting-started.html). +Вам следует быть знакомым с базовыми концепциями и шаблонами [React](https://react.dev/), чтобы пользоваться этой документацией. +Если нет, ознакомьтесь с [React документацией](https://react.dev/learn) для введения в работу. -DHTMLX Scheduler отлично работает с React. Пример интеграции можно найти на GitHub: [DHTMLX Scheduler with React Demo](https://github.com/DHTMLX/react-scheduler-demo). +DHTMLX Scheduler совместим с React. Вы можете увидеть соответствующий пример на GitHub: [DHTMLX Scheduler with React Demo](https://github.com/DHTMLX/react-scheduler-demo). ## Создание проекта Перед началом убедитесь, что у вас установлен [Node.js](https://nodejs.org/en/). -Для создания простого проекта на React выполните команду: +Вы можете создать базовый проект React с помощью следующей команды: ~~~ npx create-vite my-react-scheduler-app --template react @@ -21,74 +22,75 @@ npx create-vite my-react-scheduler-app --template react ### Установка зависимостей -Перейдите в директорию вашего приложения. В данном примере используется **my-react-scheduler-app**: +Далее перейдите в директорию приложения. Назовём наш проект **my-react-scheduler-app** и запустим: ~~~ cd my-react-scheduler-app ~~~ -Далее установите зависимости и запустите сервер разработки с помощью вашего пакетного менеджера: +После этого нужно установить зависимости и запустить dev-сервер. Для этого используйте менеджер пакетов: -- Для yarn выполните: +- если вы используете yarn, выполните следующие команды: ~~~ yarn install yarn dev ~~~ -- Для npm выполните: +- если же вы пользуетесь npm, выполните следующие команды: ~~~ npm install npm run dev ~~~ -Ваш React-проект будет доступен по адресу **http://localhost:5173**. +Теперь ваше приложение на React должно работать на **http://localhost:5173**. ![Scheduler React app running](/img/scheduler_react_app_run.png) ## Создание Scheduler -Чтобы добавить DHTMLX Scheduler, сначала остановите приложение, нажав **Ctrl+C** в командной строке. После этого установите пакет Scheduler. +Теперь нужно получить код DHTMLX Scheduler. Сначала остановим приложение, нажав **Ctrl+C** в командной строке. Затем можно приступить к установке пакета Scheduler. -## Шаг 1. Установка пакета +### Шаг 1. Установка пакета -PRO-версии библиотеки доступны через **npm/yarn** из нашего приватного репозитория. Пожалуйста, следуйте -[этой инструкции](guides/installation.md#npmevaluationandproversions) для получения доступа. +ПРО-версии библиотеки доступны для установки через **npm/yarn** из нашего приватного репозитория, пожалуйста, следуйте +[данной инструкции](guides/installation.md#npm---evaluation-and-pro-versions) чтобы получить доступ к нему. -Когда у вас будет Evaluation-версия Scheduler, установите её одной из команд: +После того как вы получите Evaluation-версию Scheduler, вы можете установить её следующими командами: -- Через npm: +- для npm: ~~~ npm install @dhx/trial-scheduler ~~~ -- Через yarn: +- для yarn: ~~~ yarn add @dhx/trial-scheduler ~~~ -Также, так как zip-пакет библиотеки структурирован как **npm**-модуль, вы можете -[установить его из локальной папки](guides/installation.md). +Либо, поскольку zip-пакет библиотеки структурирован как модуль **npm**, вы можете [установить его из локальной папки](guides/installation.md#installing-the-package-from-a-local-folder). ## Шаг 2. Создание компонента -Создайте React-компонент для добавления Scheduler в приложение. Создайте папку ***src/components/Scheduler*** и в ней файлы: ***Scheduler.jsx***, ***Scheduler.css*** и ***index.js***. +Теперь нужно создать React-компонент, чтобы добавить Scheduler в приложение. Давайте создадим папку ***src/components/Scheduler***. +Здесь мы создадим файлы ***Scheduler.jsx***, ***Scheduler.css*** и ***index.js***. -Начните с создания ***Scheduler.css*** со стилями для *scheduler-container*: +Необходимо создать файл ***Scheduler.css*** и добавить стили для *scheduler-container*: -~~~js title="src/components/Scheduler/Scheduler.css" + +~~~css title="src/components/Scheduler/Scheduler.css" .scheduler-container { height: 100vh; width: 100vw; } ~~~ -Чтобы контейнер Scheduler занимал всю область body, удалите стандартные стили из ***App.css*** в папке ***src*** и добавьте: +Чтобы Scheduler занимал всё пространство body, нужно убрать стандартные стили из файла ***App.css***, который расположен в папке ***src***, и добавить следующие: -~~~ +~~~css #root { margin: 0; padding: 0; @@ -97,7 +99,7 @@ yarn add @dhx/trial-scheduler } ~~~ -Добавьте файл ***index.js*** со следующим содержимым: +И добавить файл ***index.js*** со следующим содержимым: ~~~js title="src/components/Scheduler/index.js" import Scheduler from './Scheduler'; @@ -105,29 +107,29 @@ import './Scheduler.css'; export default Scheduler; ~~~ -### Импорт исходных файлов +### Импорт исходников -Откройте ***Scheduler.jsx*** и импортируйте исходные файлы Scheduler. В зависимости от способа установки пакета, импорты будут такими: +Откройте только что созданный файл ***Scheduler.jsx*** и импортируйте исходники Scheduler. Обратите внимание, что: -- Если установлен из локальной папки: +- если вы установили пакет Scheduler из локальной папки, ваши пути импорта будут выглядеть так: ~~~js title="Scheduler.jsx" import { Scheduler } from 'dhtmlx-scheduler'; import 'dhtmlx-scheduler/codebase/dhtmlxscheduler.css'; ~~~ -- При использовании trial-версии: +- если вы выбрали установить пробную версию, пути импорта должны быть как в примере: ~~~js title="Scheduler.jsx" import { Scheduler } from '@dhx/trial-scheduler'; import '@dhx/trial-scheduler/codebase/dhtmlxscheduler.css'; ~~~ -В данном руководстве используется **trial**-версия. +В этом руководстве мы будем использовать пробную версию Scheduler. -### Настройка контейнера и добавление Scheduler +### Установка контейнера и добавление Scheduler -Чтобы отобразить Scheduler на странице, создайте контейнер. Создайте ***Scheduler.jsx*** со следующим кодом: +Чтобы отобразить Scheduler на странице, нужно задать контейнер, в который будет отрисовываться компонент. Создайте файл ***Scheduler.jsx*** со следующим кодом: ~~~js title="src/components/Scheduler/Scheduler.jsx" import { useEffect, useRef } from "react"; @@ -164,7 +166,7 @@ export default function SchedulerView( ) { ## Шаг 3. Добавление Scheduler в приложение -Теперь добавьте компонент Scheduler в приложение. Откройте ***src/App.jsx*** и замените содержимое на: +Теперь пора добавить компонент в наше приложение. Откройте ***src/App.jsx*** и используйте компонент *Scheduler* вместо стандартного содержимого, вставив код ниже: ~~~js title="src/App.jsx" import Scheduler from "./components/Scheduler"; @@ -180,13 +182,14 @@ function App() { export default App; ~~~ -После запуска приложения на странице появится пустой Scheduler: +После этого, при запуске приложения, вы увидите пустой Scheduler на странице: ![Scheduler React init](/img/scheduler_init.png) -## Шаг 4. Передача данных +## Шаг 4. Предоставление данных + +Чтобы добавить данные в Scheduler, необходимо предоставить набор данных. Давайте создадим файл ***data.js*** в директории ***src/*** и добавим в него данные: -Чтобы отобразить события в Scheduler, передайте набор данных. Создайте файл ***data.js*** в директории ***src*** и добавьте события: ~~~js title="src/data.js" export function getData() { @@ -208,7 +211,7 @@ export function getData() { } ~~~ -Передайте эти данные как props для компонента Scheduler в ***App.jsx***: +И следует [передать props (наши данные)](https://react.dev/learn/passing-props-to-a-component) в компонент Scheduler в ***App.jsx***: ~~~js title="App.jsx" import { getData } from "./data.js"; @@ -225,7 +228,7 @@ function App() { export default App; ~~~ -Используйте props в методе **scheduler.parse()** внутри компонента Scheduler: +И используйте props в методе **scheduler.parse()** внутри Scheduler-компонтента: ~~~js title="Scheduler.jsx" import { useEffect, useRef } from "react"; @@ -261,15 +264,16 @@ export default function SchedulerView({events}) { } ~~~ -После перезагрузки страницы приложения вы увидите Scheduler с загруженными событиями: +Теперь, если вы снова откроете страницу приложения, вы увидите Scheduler с событиями: ![Scheduler React events](/img/scheduler_events.png) ## Шаг 5. Сохранение данных -Чтобы обрабатывать изменения, внесённые в Scheduler, используйте обработчик [dataProcessor](https://docs.dhtmlx.com/dataprocessor__index.html). Это позволит связаться с сервером. Обработчик может быть функцией или объектом router. dhtmlxScheduler поддерживает ответы Promise от обработчика, корректно обрабатывая завершение действия. +Чтобы зафиксировать изменения, внесённые в Scheduler, можно использовать обработчик [dataProcessor](https://docs.dhtmlx.com/dataprocessor__index.html), который позволяет «общаться» с серверной частью. Обработчик можно объявлять либо как функцию, либо как router-объект. +dhtmlxScheduler принимает ответ Promise от обработчика, поэтому ваш Scheduler корректно обработает завершение действия. -Создайте **DataProcessor** с помощью **createDataProcessor()** и отслеживайте изменения следующим образом: +Вы можете создать **DataProcessor** через API-метод **createDataProcessor()** и зафиксировать изменения вот так: ~~~ scheduler.createDataProcessor(function(entity, action, data, id) {​ @@ -277,12 +281,12 @@ scheduler.createDataProcessor(function(entity, action, data, id) {​ }); ~~~ -Если ваш backend изменяет id события после создания новой записи (что встречается часто), убедитесь, что Promise возвращает объект с **(id: databaseId)** или **(tid: databaseId)**. Это позволит Scheduler обновить запись с новым id из базы данных. Подробнее см. в разделе [server side integration](guides/server-integration.md). +Если ваш сервис изменяет id события после создания новой записи (что обычно так и происходит), убедитесь, что ваш Promise возвращает объект вида **(id: databaseId)** или **(tid: databaseId)** в качестве результата, чтобы Scheduler мог применить новый идентификатор базы данных к запиcи. Узнать [более подробную информацию о серверной стороне](guides/server-integration.md). -На этом настройка React Scheduler завершена. Ознакомьтесь с полной демонстрацией на GitHub: [DHTMLX react-scheduler-demo](https://github.com/DHTMLX/react-scheduler-demo). +Итак, React Scheduler готов, добро пожаловать посмотреть полную демонстрацию на GitHub: [DHTMLX Scheduler with React Demo](https://github.com/DHTMLX/react-scheduler-demo). ## XSS, CSRF и SQL-инъекции -Обратите внимание, что сам Scheduler не защищает от угроз, таких как SQL-инъекции, XSS или CSRF-атаки. Ответственность за защиту приложения от этих рисков лежит на разработчиках backend. +Обратите внимание, что Scheduler не предоставляет средств для предотвращения угроз в приложении, таких как инъекции SQL или атаки XSS и CSRF. Важно, чтобы ответственность за безопасность приложения лежала на разработчиках, реализующих backend. -Обратитесь к статье [Application Security](guides/app-security.md), чтобы узнать о распространённых уязвимостях и способах повышения безопасности вашего приложения. +Ознакомьтесь со статьёй [Application Security](guides/app-security.md), чтобы узнать наиболее уязвимые точки компонента и меры по улучшению безопасности вашего приложения. \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/integrations/react/nextjs.md b/i18n/ru/docusaurus-plugin-content-docs/current/integrations/react/nextjs.md new file mode 100644 index 00000000..40cdb35e --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/integrations/react/nextjs.md @@ -0,0 +1,264 @@ +--- +title: React Scheduler с Next.js +sidebar_label: Next.js +description: Узнайте, как интегрировать DHTMLX React Scheduler с Next.js, используя App Router, включая настройку клиентского компонента и демонстрационные данные. +--- + +# React Scheduler с Next.js + +Это руководство показывает, как создать простое приложение на **Next.js** и отобразить **DHTMLX React Scheduler** на странице. + +:::note +Полный исходный код [доступен на GitHub](https://github.com/dhtmlx/react-scheduler-nextjs-starter). +::: + +## Требования + +- Node.js (рекомендуется LTS) +- основы React + TypeScript +- основы Next.js (App Router, Server/Client Components). Если нужен повтор, см. документацию Next.js: https://nextjs.org/docs + +## Быстрая настройка — создание проекта + +Чтобы сгенерировать каркас приложения Next.js, выполните: + +~~~bash +npx create-next-app@latest +~~~ + +При запросе выберите: + +- Название проекта: **react-scheduler-nextjs-quick-start** +- Использовать шаблон по умолчанию (TypeScript, ESLint, Tailwind CSS, App Router, Turbopack) + +Next.js создаст структуру проекта и установит базовые зависимости. + +После установки перейдите в директорию проекта: + +```bash +cd react-scheduler-nextjs-quick-start +``` + +### Установка React Scheduler + +Установите React Scheduler, как описано в [руководстве по установке React Scheduler](integrations/react/installation.md). + +В этом руководстве мы используем демонстрационный пакет: + +~~~bash +npm install @dhtmlx/trial-react-scheduler +~~~ + +или + +~~~bash +yarn add @dhtmlx/trial-react-scheduler +~~~ + +Если вы уже используете Professional пакет, замените `@dhtmlx/trial-react-scheduler` на `@dhx/react-scheduler` в командах и импортах. + +## Подготовка демонстрационных данных + +Создайте папку `data/` в корне проекта. Внутри нее добавьте файл `demoData.ts`, содержащий начальные данные для Scheduler: + +~~~ts title="data/demoData.ts" +import type { Event } from '@dhtmlx/trial-react-scheduler'; + +export const events: Event[] = [ + { + id: 1, + classname: 'blue', + start_date: new Date('2025-12-08T02:00:00Z'), + end_date: new Date('2025-12-08T10:20:00Z'), + text: 'Product Strategy Hike', + }, + { + id: 2, + classname: 'blue', + start_date: new Date('2025-12-08T12:00:00Z'), + end_date: new Date('2025-12-08T16:00:00Z'), + text: 'Agile Meditation and Release', + }, + { + id: 3, + classname: 'violet', + start_date: new Date('2025-12-09T06:00:00Z'), + end_date: new Date('2025-12-09T11:00:00Z'), + text: 'Tranquil Tea Time', + }, + { + id: 4, + classname: 'green', + start_date: new Date('2025-12-09T11:30:00Z'), + end_date: new Date('2025-12-09T19:00:00Z'), + text: 'Sprint Review and Retreat', + }, + { + id: 5, + classname: 'yellow', + start_date: new Date('2025-12-10T06:00:00Z'), + end_date: new Date('2025-12-10T08:00:00Z'), + text: 'Stakeholder Sunset Yoga Session', + }, +]; +~~~ + +:::note +Сопутствующая демо-версия включает дополнительные события для более богатой визуализации. +::: + +## Создание компонента Scheduler + +Next.js по умолчанию использует Server Components, но React Scheduler в большинстве практических случаев следует рендерить внутри Client Component. + +Это требуется, когда вы: + +- используете `ref` для доступа к экземпляру Scheduler +- передаете колбэки (events, templates, data handlers) +- используете ReactScheduler `hooks` +- предоставляете динамическую конфигурацию или элементы React + +Поэтому наш компонент Scheduler будет начинаться с `"use client"`. + +Создайте новый файл по пути `components/Scheduler/Scheduler.tsx`: + +~~~tsx title="components/Scheduler/Scheduler.tsx" +'use client'; + +import { useMemo, useRef } from 'react'; +import ReactScheduler, { + type ReactSchedulerRef, + type Event, + type SchedulerTemplates, + type SchedulerConfig, +} from '@dhtmlx/trial-react-scheduler'; +import '@dhtmlx/trial-react-scheduler/dist/react-scheduler.css'; + +export interface ReactSchedulerProps { + events: Event[]; + activeView?: string; + activeDate?: Date; +} + +export default function Scheduler({ + events, + activeView = 'week', + activeDate = new Date('2025-12-08T00:00:00Z'), +}: ReactSchedulerProps) { + const schedulerRef = useRef(null); + + const templates: SchedulerTemplates = useMemo( + () => ({ + event_class: (start: Date, end: Date, event: Event) => { + return event.classname || ''; + }, + }), + [] + ); + + const config: SchedulerConfig = useMemo(() => { + return { + first_hour: 6, + last_hour: 22, + hour_size_px: 60, + }; + }, []); + + return ( + { + console.log(`${entity} - ${action} - ${id}`, data); + }, + }} + /> + ); +} +~~~ + +Этот компонент инициализирует Scheduler и предоставляет ему конфигурацию, начальные данные и `ref` для будущих вызовов API. Объект `config` управляет макетом временной шкалы, в то время как свойства `events` задают набор данных Scheduler. Мы также передаем `activeView` и `activeDate` как свойства, чтобы родительский компонент управлял тем, что отображает Scheduler. + +Функция `save`, находящаяся внутри пропа `data`, используется для отслеживания изменений, внесённых в события внутри Scheduler. В этом руководстве мы добавляем простой обработчик-заглушку для отслеживания изменений. Если вы хотите отправлять обновления на бэкенд или связывать их со состоянием React, вы можете следовать официальному руководству по привязке данных [guide](integrations/react/overview.md#bindingdata). + +## Добавление стилей цвета событий + +CSS-классы (`.blue`, `.violet`, `.green`, `.yellow`) применяются через шаблон `event_class` для настройки визуального вида событий. Добавьте следующее в `app/globals.css`: + +~~~css title="app/globals.css" +.blue { + --dhx-scheduler-event-background: linear-gradient(180deg, #0e8af0 0%, #0ec1f0 100%); +} +.violet { + --dhx-scheduler-event-background: linear-gradient(180deg, #d071ef 0%, #ee71d5 100%); +} +.green { + --dhx-scheduler-event-background: linear-gradient(180deg, #12d979 0%, #1ecdeb 100%); +} +.yellow { + --dhx-scheduler-event-background: linear-gradient(180deg, #ffb725 0%, #ffbb25 31.25%, #faea27 100%); +} +~~~ + +:::note +Чтобы Scheduler занимал всю страницу максимально чисто, удалите переменные темы по умолчанию для тёмного режима из `app/globals.css` и убедитесь, что у body нет лишних отступов (margin): + +~~~css +body { + margin: 0; + padding: 0; +} +~~~ +::: + +## Добавление Scheduler на страницу + +Откройте `app/page.tsx` и отобразите Scheduler на главной странице: + +~~~tsx title="app/page.tsx" +import Scheduler from '../components/Scheduler/Scheduler'; +import { events } from '../data/demoData'; + +export default function HomePage() { + return ( +
+ +
+ ); +} +~~~ + +Теперь страница будет отображать полноэкранный Scheduler. + +## Запуск приложения + +Запустите сервер разработки: + +~~~bash +npm run dev +~~~ + +Затем откройте `http://localhost:3000` в вашем браузере. Вы увидите работающий Scheduler с начальными данными внутри приложения Next.js. + +## Резюме + +У вас now есть минимальный проект на Next.js с DHTMLX React Scheduler: + +- Scheduler рендерится как Client Component (`"use client"`) внутри App Router Next.js +- демо-данные загружаются из отдельного файла и передаются как пропсы +- шаблон `event_class` применяет настраиваемые цветовые градиенты к событиям +- обратный вызов `data.save` регистрирует правки в консоли (готов к интеграции с бэкендом) + +## Что дальше + +- [Поток данных, управляемый React](integrations/react/overview.md#bindingdata) +- [Документация по шаблонам React Scheduler](integrations/react/configuration-props.md) +- Изучение интеграций управления состоянием: + - [Использование React Scheduler с Redux Toolkit](integrations/react/state/redux-toolkit.md) + - [Использование React Scheduler с MobX](integrations/react/state/mobx.md) + - [Использование React Scheduler с Zustand](integrations/react/state/zustand.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/integrations/react/overview.md b/i18n/ru/docusaurus-plugin-content-docs/current/integrations/react/overview.md new file mode 100644 index 00000000..717b250c --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/integrations/react/overview.md @@ -0,0 +1,486 @@ +--- +title: "React Scheduler" +sidebar_label: "Обзор" +description: "Обзор обёртки React Scheduler, режимы привязки данных, варианты настройки и совместимость с фреймворками." +--- + +# React Scheduler + +:::note +React Scheduler доступен по лицензиям [Commercial, Enterprise и Ultimate]. +Если вы используете Individuals или GPL-версии Scheduler, используйте [dhtmlxScheduler with React](integrations/react/js-scheduler-react.md). +::: + +## Обзор + +DHTMLX React Scheduler — официальный обёртка для DHTMLX Scheduler на React. Он предоставляет декларативный API для рендеринга и настройки Scheduler, при этом по‑прежнему обеспечивает доступ к встроенному экземпляру Scheduler, когда нужен более тонкий контроль. + +**Ключевые особенности:** + +- передавайте `events`, `view` и `date` как пропсы +- настраивайте поведение через `config` и `templates` +- обрабатывайте изменения пользователя через `data.save` или `data.batchSave` +- используйте `ref` для прямого доступа к методам API Scheduler + +Если вы новичок в DHTMLX Scheduler, смотрите документацию DHTMLX Scheduler [документацию DHTMLX Scheduler](/guides/) для обзора возможностей. + +## Установка и доступ к npm + +Для оценки и установки профессионального пакета смотрите: + +- [Установка](integrations/react/installation.md) + +## Требования к версии + +- React `18+` + +## Основное использование + +```tsx +import { useMemo, useRef } from "react"; +import ReactScheduler, { + type Event, + type ReactSchedulerRef, + type SchedulerConfig, + type SchedulerTemplates, +} from "@dhtmlx/trial-react-scheduler"; +import "@dhtmlx/trial-react-scheduler/dist/react-scheduler.css"; + +const events: Event[] = [ + { + id: 1, + text: "Product Strategy Hike", + classname: "blue", + start_date: new Date("2025-12-08T02:00:00Z"), + end_date: new Date("2025-12-08T10:20:00Z"), + }, +]; + +export default function BasicSchedulerDemo() { + const schedulerRef = useRef(null); + + const templates: SchedulerTemplates = useMemo( + () => ({ + event_class: (_start, _end, event) => event.classname || "", + }), + [] + ); + + const config: SchedulerConfig = useMemo( + () => ({ + first_hour: 6, + last_hour: 22, + hour_size_px: 60, + }), + [] + ); + + return ( +
+ +
+ ); +} +``` + +## Привязка данных {#bindingdata} + +React Scheduler поддерживает две модели привязки данных. + +### React-состояние как источник истины (рекомендовано) + +В этой модели React (или менеджер состояний) владеет данными об событиях: + +- Scheduler читает события из пропсов +- изменения пользователя вызывают ваш колбэк `data.save` +- колбэк обновляет состояние React +- React повторно рендерит Scheduler с обновлёнными пропсами + +```tsx +import { useMemo, useState } from "react"; +import ReactScheduler, { type Event } from "@dhtmlx/trial-react-scheduler"; + +export default function ReactDrivenExample({ seedEvents }: { seedEvents: Event[] }) { + const [events, setEvents] = useState(seedEvents); + + const data = useMemo( + () => ({ + save: (entity: string, action: string, item: Event, id: string | number) => { + if (entity !== "event") return; + + if (action === "create") { + setEvents((prev) => [...prev, item]); + return; + } + + if (action === "update") { + setEvents((prev) => prev.map((e) => (e.id === id ? item : e))); + return; + } + + if (action === "delete") { + setEvents((prev) => prev.filter((e) => e.id !== id)); + } + }, + }), + [] + ); + + return ; +} +``` + +Эта модель особенно удобна, когда другие элементы UI на React должны оставаться синхронизированными с данными Scheduler. + +### Scheduler как источник истины + +В этой модели Scheduler управляет своим внутренним состоянием и перенаправляет изменения в ваш бэкенд. + +```tsx + +``` + +Эта модель полезна, когда React не нужен для немедленного отражения каждого обновления. + +### Загрузка данных + +Данные можно загрузить, используя либо пропсы, либо `data.load`: + +```tsx +// Загрузка через пропсы + + +// Загрузка через транспорт + +``` + +Для требований к формату данных смотрите [Загрузка данных](guides/loading-data.md). + +### Сохранение изменений + +`data.save` может быть URL-адресом или колбэком. + +```tsx + { + if (entity !== "event") return; + + if (action === "create") { + const response = await fetch("/api/events", { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify(item), + }); + + const created = await response.json(); + return { id: created.id }; + } + + if (action === "update") { + await fetch(`/api/events/${id}`, { + method: "PUT", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify(item), + }); + } + + if (action === "delete") { + await fetch(`/api/events/${id}`, { method: "DELETE" }); + } + }, + }} +/> +``` + +Для деталей поведения на стороне бэкенда смотрите [Server Integration](guides/server-integration.md). + +## Замена Lightbox + +Scheduler включает встроенный редактор событий под названием [Lightbox](guides/lightbox-editors.md). + +Его можно заменить, используя `customLightbox`: + +```tsx +import React, { useState } from 'react'; + +export interface CustomLightboxProps { + data?: any; + onSave?: (event: any) => void; + onCancel?: () => void; + onDelete?: () => void; +} + +const CustomLightbox: React.FC = ({ + data, + onSave, + onCancel, + onDelete +}) => { + + let updatedEventText = data.text || ""; + + const handleSaveClick = () => { + if(onSave) + onSave({ ...data, text: updatedEventText }); + }; + + function PaperComponent(props: any) { + const nodeRef = React.useRef(null); + return ( + + + + ); + } + + + function TextComponent() { + const [description, setDescription] = useState(data.text || ''); + + return ( + { + updatedEventText = e.target.value; + setDescription(e.target.value) + }} + sx="{{" width: '100%', padding: '8px', marginTop: '10px' }} + /> + ) + } + + + return ( + + + Edit Event + + + + Description + + + + + + + + + + + + + ); +}; + +export default CustomLightbox; +``` + +Вы также можете перехватить открытие редактора с помощью `onBeforeLightbox`: + +```tsx +import { useEffect, useRef } from 'react'; +import ReactScheduler from "@dhx/react-scheduler"; +import "@dhx/react-scheduler/dist/react-scheduler.css"; +import { useNavigate } from 'react-router-dom'; + + +export default function BasicInitDemo() { + const schedulerRef = useRef(null); + + const { events, handleSaveEvent, handleDeleteEvent, createEvent } + = useOutletContext(); + const navigate = useNavigate(); + + const handleEventEdit = (id: any) => { + const schedulerInstance = schedulerRef.current?.instance; + navigate(`/editor/${id}`, { state: { task: schedulerInstance.getTask(id) } }); + }; + + return ( + + ); +} +``` + +Справка: [onBeforeLightbox](api/event/onbeforelightbox.md) + +## Замена встроенных модальных окон + +Удаление можно переопределить через `modals`. + +```tsx + { + if (window.confirm(`Delete "${event.text}"?`)) { + callback(); // вызов колбэка удалит событие + } + }, + }} +/> +``` + +### Настройка модального окна подтверждения повторяемости {#customizingtherecurrenceconfirmationmodal} + +Когда пользователь редактирует или перетаскивает повторяющееся событие, появляется модальное окно подтверждения, которое спрашивает: изменить только это вхождение, это и последующие события или всю серию. Можно заменить встроенный диалог на свой через `modals.onRecurrenceConfirm`. + +Колбек получает контекст и должен вернуть решение (или Promise, который резолвится в решение): + +| Поле | Тип | Описание | +|---|---|---| +| `origin` | `"lightbox" \| "dnd"` | Было ли действие инициировано из Lightbox или перетаскиванием | +| `occurrence` | `any` | Конкретное вхождение, которое редактируется | +| `series` | `any` | Родительская повторяющаяся задача | +| `labels` | `object` | Локализованные подписи: `title`, `ok`, `cancel`, `occurrence`, `following`, `series` | +| `options` | `string[]` | Доступные варианты, например `["occurrence", "following", "series"]` | + +Возвращаемое значение (`RecurrenceDecision`): `"occurrence"`, `"following"`, `"series"`, или `null` для отмены. + +Пример: + +```tsx +import { useState, useCallback } from "react"; + +function App() { + const [recurrencePrompt, setRecurrencePrompt] = useState(null); + + const onRecurrenceConfirm = useCallback((context) => { + return new Promise((resolve) => { + setRecurrencePrompt({ context, resolve }); + }); + }, []); + + return ( + <> + + {recurrencePrompt && ( + { + recurrencePrompt.resolve(choice); + setRecurrencePrompt(null); + }} + onCancel={() => { + recurrencePrompt.resolve(null); + setRecurrencePrompt(null); + }} + /> + )} + + ); +} +``` + +## Фильтрация + +Используйте проп `filter`, чтобы управлять тем, какие события отображаются: + +```tsx +import { useCallback, useState } from "react"; + +function FilteredScheduler({ events }: { events: any[] }) { + const [query, setQuery] = useState(""); + + const filterFn = useCallback( + (event: any) => { + if (!query.trim()) return true; + return event.text?.toLowerCase().includes(query.trim().toLowerCase()); + }, + [query] + ); + + return ( + <> + setQuery(e.target.value)} + /> + + + ); +} +``` + +## Доступ к базовому API Scheduler + +Когда пропсов недостаточно, получите доступ к экземпляру Scheduler через `ref`: + +```tsx +import { useEffect, useRef } from "react"; +import ReactScheduler, { type ReactSchedulerRef } from "@dhx/react-scheduler"; + +export function DirectRefExample({ events }: { events: any[] }) { + const schedulerRef = useRef(null); + + useEffect(() => { + const scheduler = schedulerRef.current?.instance; + if (!scheduler) return; + + console.log("Events:", scheduler.getEvents()); + scheduler.setCurrentView(new Date()); + }, []); + + return ; +} +``` + +Если вы мутируете Scheduler напрямую, держите пропсы React синхронизированными, чтобы избежать дрейфа состояния. + +Смотрите [Обзор методов Scheduler](api/overview/methods_overview.md) для доступных методов. + +#### Избегайте конфликтов с пропсами React + +- Если вы вручную вызываете `scheduler.parse(( events ))` или `scheduler.addEvent()` в вашем коде, учтите, что возможно потребуется синхронизировать пропсы React. Иначе при следующем рендере React может перезаписать ваши ручные изменения. +- Рекомендуемый подход — полагаться на пропсы обёртки для событий или управлять ими в вашем состоянии React. Затем позвольте обёртке выполнить повторный разбор. + +## Совместимость с SSR-фреймворками (Next.js, Remix) + +:::note +React Scheduler поддерживает SSR. Во время серверного рендера он выводит контейнер-заглушку и выполняет гидратацию на клиенте. +::: + +Используйте руководства, специфичные для фреймворка, для деталей: + +- [React Scheduler с Next.js](integrations/react/nextjs.md) +- [React Scheduler с Remix](integrations/react/remix.md) + +## Дальнейшие шаги + +- [Настройки](integrations/react/configuration-props.md) +- [Привязка данных и основы управления состоянием](integrations/react/state/state-management-basics.md) +- [Быстрый старт](integrations/react/quick-start.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/integrations/react/quick-start.md b/i18n/ru/docusaurus-plugin-content-docs/current/integrations/react/quick-start.md new file mode 100644 index 00000000..cfe607b2 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/integrations/react/quick-start.md @@ -0,0 +1,317 @@ +--- +title: Быстрый старт с React Scheduler +sidebar_label: Быстрый старт +description: 'Пошаговое руководство по использованию компонента React Scheduler' +--- + +# Быстрый старт с React Scheduler + +:::note +Этот туториал охватывает React-обёртку, входящую в выпуски DHTMLX Scheduler: Commercial, Enterprise и Ultimate. +Если вы используете издания **Individual** или **GPL**, следуйте альтернативному руководству: +[Как начать работу с React](integrations/react/js-scheduler-react.md). +::: + +Компонент **React Scheduler** — официальная обёртка для **DHTMLX Scheduler**. +Это руководство проведёт вас через создание небольшого приложения на React и отображение базового Scheduler с использованием trial-пакета. + +Если вы новичок в React, начните с официальной [документации по React](https://react.dev/learn). Ознакомьтесь с [полным рабочим проектом, соответствующим этому руководству, на GitHub](https://github.com/dhtmlx/react-scheduler-quick-start). + +## Требования к версии + +- React **18 и выше** + +## Создание нового проекта на React + +Чтобы создать проект на React и перейти в директорию проекта, выполните следующие команды: + +~~~bash +npm create vite@latest react-scheduler-quick-start -- --template react-ts +cd react-scheduler-quick-start +~~~ + +### Установка React Scheduler + +Установите React Scheduler, как описано в [руководстве по установке React Scheduler](integrations/react/installation.md). + +В этом руководстве мы используем evaluатion-пакет: + +~~~bash +npm install @dhtmlx/trial-react-scheduler +~~~ + +или + +~~~bash +yarn add @dhtmlx/trial-react-scheduler +~~~ + +Если вы уже используете пакет Professional, замените `@dhtmlx/trial-react-scheduler` на `@dhx/react-scheduler` в командах и импортах. + +## Добавление демонстрационных данных + +Для этого примера мы будем использовать статические данные. Создайте файл с именем `src/demoData.ts`: + +~~~ts +import type { Event } from '@dhtmlx/trial-react-scheduler'; + +export const events: Event[] = [ + { + id: 1, + classname: 'blue', + start_date: new Date('2025-12-08T02:00:00Z'), + end_date: new Date('2025-12-08T10:20:00Z'), + text: 'Product Strategy Hike', + }, + { + id: 2, + classname: 'blue', + start_date: new Date('2025-12-08T12:00:00Z'), + end_date: new Date('2025-12-08T16:00:00Z'), + text: 'Agile Meditation and Release', + }, + { + id: 3, + classname: 'violet', + start_date: new Date('2025-12-09T06:00:00Z'), + end_date: new Date('2025-12-09T11:00:00Z'), + text: 'Tranquil Tea Time', + }, + // .... +]; +~~~ + + + +## Создание компонента Scheduler + +Чтобы добавить компонент Scheduler, создайте файл `src/components/Scheduler/Scheduler.tsx` со следующим содержимым: + +~~~tsx +import { useMemo, useRef } from 'react'; +import ReactScheduler, { + type ReactSchedulerRef, + type Event, + type SchedulerTemplates, + type SchedulerConfig, +} from '@dhtmlx/trial-react-scheduler'; +import '@dhtmlx/trial-react-scheduler/dist/react-scheduler.css'; +import './styles.css'; + +export interface ReactSchedulerProps { + events: Event[]; + activeView?: string; + activeDate?: Date; +} + +export default function Scheduler({ + events, + activeView = 'week', + activeDate = new Date('2025-12-08T00:00:00Z'), +}: ReactSchedulerProps) { + const schedulerRef = useRef(null); + + const templates: SchedulerTemplates = useMemo( + () => ({ + event_class: (start: Date, end: Date, event: Event) => { + return event.classname || ''; + }, + }), + [] + ); + + const config: SchedulerConfig = useMemo(() => { + return { + first_hour: 6, + last_hour: 22, + hour_size_px: 60, + }; + }, []); + + return ( + { + console.log(`${entity} - ${action} - ${id}`, data); + }, + }} + /> + ); +} +~~~ + + +Наконец, CSS-классы (`.violet`, `.green`, `.yellow`) применяются через шаблон `event_class` для настройки внешнего вида событий: + +~~~css +.violet { + --dhx-scheduler-event-background: linear-gradient(180deg, #d071ef 0%, #ee71d5 100%); +} +.green { + --dhx-scheduler-event-background: linear-gradient(180deg, #12d979 0%, #1ecdeb 100%); +} +.yellow { + --dhx-scheduler-event-background: linear-gradient(180deg, #ffb725 0%, #ffbb25 31.25%, #faea27 100%); +} +~~~ + + +## Отображение Scheduler в приложении + +Чтобы отобразить Scheduler, замените код в `src/App.tsx` на следующий: + +~~~tsx +import './App.css'; +import Scheduler from './components/Scheduler/Scheduler'; +import { events } from './demoData'; + +function App() { + return ( +
+ +
+ ); +} + +export default App; +~~~ + + +После этого запустите приложение с помощью следующей команды: + +~~~bash +npm run dev +~~~ + + +На данный момент у вас полностью работающее приложение на React + DHTMLX Scheduler. + +Эта конфигурация представляет собой минимальную настройку, необходимую для: + +- отрисовки Scheduler +- отображения событий +- применения базовой конфигурации масштаба +- прикрепления экземпляра Scheduler через React ref +- получения событий через обратный вызов `data.save` + +Это тот же минимальный пример, используемый в демонстрационном проекте на GitHub. + +Далее вы можете продолжать, добавляя более продвинутые функции: + +- синхронизацию данных с состоянием React +- загрузку/сохранение данных с вашего бэкенда +- добавление шаблонов и пользовательских рендереров +- добавление фильтрации +- замену Lightbox на собственный компонент + +Следующие разделы поочерёдно вводят эти возможности. + +## Использование состояния React в качестве источника истины + +_(рекомендуется для большинства приложений на React)_ + +В реальных приложениях события обычно поступают из состояния React. +Ниже приведён полный пример, в котором Scheduler **отправляет изменения обратно в React** через обратный вызов `data.save`. + +~~~tsx +import { useState } from 'react'; +import ReactScheduler, { Event } from '@dhtmlx/trial-react-scheduler'; +import '@dhtmlx/trial-react-scheduler/dist/react-scheduler.css'; +import { events as initialEvents } from './demoData'; + +export default function App() { + const [events, setEvents] = useState(initialEvents); + + const data = { + save: (entity, action, item, id) => { + if (entity === 'event') { + if (action === 'create') setEvents((prev) => [...prev, item]); + if (action === 'update') setEvents((prev) => prev.map((x) => (x.id === id ? item : x))); + if (action === 'delete') setEvents((prev) => prev.filter((x) => x.id !== id)); + } + }, + }; + + return ( +
+ +
+ ); +} +~~~ + +### Почему стоит выбрать этот режим + +- React всегда видит те же данные, что и UI Scheduler +- Работает безупречно с Redux / Zustand / Jotai / MobX +- Легко синхронизировать с API бэкенда + +## Альтернативный режим: Scheduler — источник истины + +_(полезен для очень больших наборов данных)_ + +В этом режиме React не владеет событиями. + +~~~tsx + +~~~ + +### Когда стоит предпочитать этот режим + +- Десятки тысяч событий +- Частые взаимодействия пользователей и обновления +- Вы хотите минимизировать накладные расходы на рендеринг React + +## Использование шаблонов + +_(возвращайте элементы React из функций шаблонов)_ + +Шаблоны позволяют настраивать практически каждую часть планировщика. + +~~~tsx +import ReactScheduler, { SchedulerTemplates } from '@dhtmlx/trial-react-scheduler'; +import { useMemo } from 'react'; +import EventTextBox from './components/EventTextBox'; + +const templates: SchedulerTemplates = useMemo( + () => ({ + event_class: (start, end, event) => { + return 'templates-' + event.classname || ''; + }, + event_text: (start, end, event) => { + return ; + }, + }), + [] +); + +; +~~~ + +### Подробнее + +См. полную секцию здесь: [Документация по шаблонам React Scheduler](integrations/react/configuration-props.md). + +## Репозиторий демонстрации GitHub + +Полностью рабочий проект, следующий за этим руководством, доступен на GitHub: https://github.com/dhtmlx/react-scheduler-quick-start + +## Следующие шаги + +- Изучите все доступные свойства компонента [React Scheduler props](integrations/react/configuration-props.md) +- Исследуйте продвинутые функции Scheduler в разделе [Руководства](/guides/) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/integrations/react/remix.md b/i18n/ru/docusaurus-plugin-content-docs/current/integrations/react/remix.md new file mode 100644 index 00000000..f39c80c1 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/integrations/react/remix.md @@ -0,0 +1,271 @@ +--- +title: React Scheduler с Remix +sidebar_label: Remix +description: Узнайте, как интегрировать DHTMLX React Scheduler с Remix (React Router v7), включая настройку клиентского компонента и демонстрационные данные. +--- + +# React Scheduler с Remix + +Это руководство показывает, как создать простое приложение **Remix** и отрисовать **DHTMLX React Scheduler** на странице. + +:::note +Полный исходный код доступен на GitHub: [GitHub](https://github.com/dhtmlx/react-scheduler-remix-starter). +::: + +## Необходимые условия + +- Node.js (рекомендуется LTS) +- Основы React + TypeScript +- Основы Remix / React Router. Если нужна повторная прокрутка, смотрите документацию Remix: https://remix.run/docs + +## Быстрая настройка - создание проекта + +Поскольку Remix теперь поставляется как часть **React Router v7**, рекомендуемый способ создания проекта: + +~~~bash +npx create-react-router@latest +~~~ + +При prompts выберите: + +- Имя проекта: **react-scheduler-remix-quick-start** +- Использовать шаблон по умолчанию (React, TypeScript, TailwindCSS, SSR) +- **Установить зависимости**: Да + +После установки перейдите в каталог проекта: + +```bash +cd react-scheduler-remix-quick-start +``` + +### Установка React Scheduler + +Установите React Scheduler, как описано в [гайде установки React Scheduler](integrations/react/installation.md). + +В этом уроке используем пакет для оценки: + +~~~bash +npm install @dhtmlx/trial-react-scheduler +~~~ + +или + +~~~bash +yarn add @dhtmlx/trial-react-scheduler +~~~ + +Если вы уже используете Professional пакет, замените `@dhtmlx/trial-react-scheduler` на `@dhx/react-scheduler` в командах и импортaх. + +## Подготовка демонстрационных данных + +Создайте папку `data/` в корне проекта. Внутри добавьте файл `demoData.ts`, содержащий начальные данные для Scheduler: + +~~~ts title="data/demoData.ts" +import type { Event } from '@dhtmlx/trial-react-scheduler'; + +export const events: Event[] = [ + { + id: 1, + classname: 'blue', + start_date: new Date('2025-12-08T02:00:00Z'), + end_date: new Date('2025-12-08T10:20:00Z'), + text: 'Product Strategy Hike', + }, + { + id: 2, + classname: 'blue', + start_date: new Date('2025-12-08T12:00:00Z'), + end_date: new Date('2025-12-08T16:00:00Z'), + text: 'Agile Meditation and Release', + }, + { + id: 3, + classname: 'violet', + start_date: new Date('2025-12-09T06:00:00Z'), + end_date: new Date('2025-12-09T11:00:00Z'), + text: 'Tranquil Tea Time', + }, + { + id: 4, + classname: 'green', + start_date: new Date('2025-12-09T11:30:00Z'), + end_date: new Date('2025-12-09T19:00:00Z'), + text: 'Sprint Review and Retreat', + }, + { + id: 5, + classname: 'yellow', + start_date: new Date('2025-12-10T06:00:00Z'), + end_date: new Date('2025-12-10T08:00:00Z'), + text: 'Stakeholder Sunset Yoga Session', + }, +]; +~~~ + +:::note +Сопутствующая демо-версия включает дополнительные события для более насыщенного визуального отображения. +::: + +## Создание компонента Scheduler + +Remix позволяет использовать клиентские компоненты через стандартную архитектуру React. Scheduler React следует отрисовывать внутри Client Component в большинстве практических случаев. + +Это требуется в тех случаях, когда вы: + +- используете `ref` для доступа к экземпляру Scheduler +- передаете колбэки (события, шаблоны, обработчики данных) +- используете ReactScheduler `hooks` +- предоставляете динамическую конфигурацию или React-элементы + +Поэтому наш компонент Scheduler начнётся с `"use client"`. + +Создайте новый файл по пути `components/Scheduler/Scheduler.tsx`: + +~~~tsx title="components/Scheduler/Scheduler.tsx" +'use client'; + +import { useMemo, useRef } from 'react'; +import ReactScheduler, { + type ReactSchedulerRef, + type Event, + type SchedulerTemplates, + type SchedulerConfig, +} from '@dhtmlx/trial-react-scheduler'; +import '@dhtmlx/trial-react-scheduler/dist/react-scheduler.css'; + +export interface ReactSchedulerProps { + events: Event[]; + activeView?: string; + activeDate?: Date; +} + +export default function Scheduler({ + events, + activeView = 'week', + activeDate = new Date('2025-12-08T00:00:00Z'), +}: ReactSchedulerProps) { + const schedulerRef = useRef(null); + + const templates: SchedulerTemplates = useMemo( + () => ({ + event_class: (start: Date, end: Date, event: Event) => { + return event.classname || ''; + }, + }), + [] + ); + + const config: SchedulerConfig = useMemo(() => { + return { + first_hour: 6, + last_hour: 22, + hour_size_px: 60, + }; + }, []); + + return ( + { + console.log(`${entity} - ${action} - ${id}`, data); + }, + }} + /> + ); +} +~~~ + +Этот компонент инициализирует Scheduler и предоставляет ему конфигурацию, начальные данные и `ref` для будущих вызовов API. Объект `config` управляет компоновкой временной шкалы, в то время как свойство `events` передаёт Scheduler набор данных. Мы также передаём `activeView` и `activeDate` как свойства, чтобы родительский компонент контролировал, что отображает Scheduler. + +Функция `save` внутри свойства `data` используется для отслеживания изменений, внесённых в события внутри Scheduler. В этом уроке мы добавляем простой заглушечный обработчик для отслеживания изменений. Если вы хотите отправлять обновления на бэкенд или связывать их со стейтом React, можно следовать официальному руководству по привязке данных [guide](integrations/react/overview.md#bindingdata). + +## Добавление стилей цвета событий + +CSS-классы (`.blue`, `.violet`, `.green`, `.yellow`) применяются через шаблон `event_class` для настройки визуального отображения событий. Добавьте следующее в `app/app.css`: + +~~~css title="app/app.css" +.blue { + --dhx-scheduler-event-background: linear-gradient(180deg, #0e8af0 0%, #0ec1f0 100%); +} +.violet { + --dhx-scheduler-event-background: linear-gradient(180deg, #d071ef 0%, #ee71d5 100%); +} +.green { + --dhx-scheduler-event-background: linear-gradient(180deg, #12d979 0%, #1ecdeb 100%); +} +.yellow { + --dhx-scheduler-event-background: linear-gradient(180deg, #ffb725 0%, #ffbb25 31.25%, #faea27 100%); +} +~~~ + +:::note +Чтобы Scheduler занял всю страницу чисто, убедитесь, что у body нет лишних отступов: + +~~~css +body { + margin: 0; + padding: 0; +} +~~~ +::: + +## Отображение Scheduler в маршруте + +Откройте главный маршрут страницы — `app/routes/home.tsx`. Замените его содержимое на следующее: + +~~~tsx title="app/routes/home.tsx" +import { events } from '../../data/demoData'; +import type { Route } from './+types/home'; +import Scheduler from 'components/Scheduler/Scheduler'; + +export function meta({}: Route.MetaArgs) { + return [ + { title: 'DHTMLX React Scheduler | Remix (React Router) Quick Start' }, + { name: 'description', content: 'DHTMLX React Scheduler | Remix (React Router) Quick Start' }, + ]; +} + +export default function Home() { + return ( +
+ +
+ ); +} +~~~ + +Теперь Scheduler будет отображаться на маршруте `/`. + +## Запуск приложения + +Запустите сервер разработки: + +~~~bash +npm run dev +~~~ + +Затем откройте в браузере `http://localhost:5173`. Вы должны увидеть рабочий Scheduler с начальными данными внутри приложения Remix. + +## Итог + +У вас теперь минимальный проект Remix с DHTMLX React Scheduler: + +- Scheduler рендерится как клиентский компонент (`"use client"`) внутри Remix / React Router v7 +- демо-данные загружаются из отдельного файла и передаются как props +- шаблон `event_class` применяет пользовательские градиенты цветов к событиям +- колбэк `data.save` выводит правки в консоль (готов к подключению к бэкенду) + +## Что дальше + +- [Поток данных, управляемый React](integrations/react/overview.md#bindingdata) +- [Документация по шаблонам React Scheduler](integrations/react/configuration-props.md) +- Изучайте интеграции управления состоянием: + - [Использование React Scheduler с Redux Toolkit](integrations/react/state/redux-toolkit.md) + - [Использование React Scheduler с MobX](integrations/react/state/mobx.md) + - [Использование React Scheduler с Zustand](integrations/react/state/zustand.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/integrations/react/state/index.md b/i18n/ru/docusaurus-plugin-content-docs/current/integrations/react/state/index.md new file mode 100644 index 00000000..c14c02c1 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/integrations/react/state/index.md @@ -0,0 +1,40 @@ +--- +title: "Данные и управление состоянием" +description: "Как связать React Scheduler со состоянием React или менеджером состояний, обрабатывать редактирование пользователя и выбрать между моделями данных, управляемыми React и Scheduler." +--- + +Этот раздел объясняет, как синхронизировать данные Scheduler со состоянием вашего приложения. Он охватывает рекомендуемую модель, управляемую React (React или хранилище как источник истины), ориентированную на производительность модель, управляемую Scheduler, и практические реализации для популярных библиотек состояния. + +## Начните здесь + +Сначала прочитайте это, чтобы понять две поддерживаемые модели данных и общие паттерны интеграции: + +- [Основы связывания данных и управления состоянием](integrations/react/state/state-management-basics.md) + +Здесь объясняется, как использовать колбэки `data.save` и `data.batchSave`, как загрузка вписывается в каждую модель, и какие изменения происходят, когда Scheduler управляет данными внутри. + +## Выберите библиотеку состояния + +Каждое руководство ниже применяет одну и ту же основную схему (state -> props -> Scheduler, изменения -> callbacks -> state), но использует идиомы конкретной библиотеки: + +- [Redux Toolkit](integrations/react/state/redux-toolkit.md) +- [Zustand](integrations/react/state/zustand.md) +- [MobX](integrations/react/state/mobx.md) +- [XState](integrations/react/state/xstate.md) +- [Jotai](integrations/react/state/jotai.md) +- [Valtio](integrations/react/state/valtio.md) + +## Синхронизация в реальном времени + +Если вам нужны обновления в реальном времени, начните здесь: + +- [Интеграция с Firebase](integrations/react/firebase-integration.md) + +## Примечания по производительности + +Если ваше приложение выполняет крупные операции (массовые правки, частые обновления, большие наборы данных), обратите внимание на: + +- использование `data.batchSave` для снижения накладных расходов на обновление, +- **модель данных, управляемая Scheduler** когда React не требуется немедленно отражать каждое изменение. + +Оба раздела освещены в [Основы связывания данных и управления состоянием](integrations/react/state/state-management-basics.md). \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/integrations/react/state/jotai.md b/i18n/ru/docusaurus-plugin-content-docs/current/integrations/react/state/jotai.md new file mode 100644 index 00000000..5d7dc709 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/integrations/react/state/jotai.md @@ -0,0 +1,597 @@ +--- +title: React Scheduler - Руководство по Jotai +sidebar_label: Jotai +description: Узнайте, как интегрировать DHTMLX React Scheduler с Jotai, включая CRUD-событий, синхронизацию представления/даты, конфигурацию только для чтения и отмену/повтор. +--- + +# React Scheduler - Руководство по Jotai + +Это руководство показывает, как подключить **DHTMLX React Scheduler** к хранилищу **Jotai**. Вы будете хранить события и состояние UI (представление/дата/конфигурация) в атомах, маршрутизировать правки Scheduler через `data.save` и добавить **undo/redo** с историей на основе снимков. + +:::note +Полный исходный код доступен на GitHub: [GitHub](https://github.com/DHTMLX/react-scheduler-jotai-starter). +::: + +## Предварительные требования + +- Node.js (рекомендована версия LTS) +- Основы React + TypeScript +- Знакомство с атомами Jotai и `useAtom`/`useSetAtom`. Если нужен обзор, смотрите документацию Jotai: https://jotai.org/ + +## Быстрая настройка - создание проекта + +Создайте проект на основе Vite + React + TypeScript: + +~~~bash +npm create vite@latest scheduler-jotai-demo -- --template react-ts +cd scheduler-jotai-demo +npm install +~~~ + +Установите Jotai: + +~~~bash +npm install jotai +~~~ + +Установите Material UI (используется в демо-панели инструментов): + +~~~bash +npm install @mui/material @mui/icons-material @emotion/react @emotion/styled +~~~ + +### Установка React Scheduler + +Установите React Scheduler, как описано в [руководстве по установке React Scheduler](integrations/react/installation.md). + +В этом руководстве мы используем пакет evaluation: + +```bash +npm install @dhtmlx/trial-react-scheduler +``` + +или + +```bash +yarn add @dhtmlx/trial-react-scheduler +``` + +Если вы уже используете Professional-пакет, замените `@dhtmlx/trial-react-scheduler` на `@dhx/react-scheduler` в командах и импортах. + +Запустите dev-сервер: + +~~~bash +npm run dev +~~~ + +:::note +Чтобы Scheduler занимал всю страницу, удалите стандартные стили из `src/App.css` и добавьте: + +~~~css +#root { + margin: 0; + padding: 0; + height: 100%; + width: 100%; +} + +body { + margin: 0; +} +~~~ +::: + +## Определение общих типов + +Создайте `src/types.ts`. Эти типы используются в атомах и компонентах: + +~~~ts +export type SchedulerView = "day" | "week" | "month"; +export type SchedulerEventId = string | number; + +export interface SchedulerEvent { + id: SchedulerEventId; + start_date: string; + end_date: string; + text: string; + + // Scheduler может добавлять дополнительные поля (например, пользовательские свойства). Сделайте демо допускающей. + [key: string]: unknown; +} + +export type SchedulerConfig = Record; + +export interface SchedulerSnapshot { + events: SchedulerEvent[]; + config: SchedulerConfig; +} +~~~ + +- `SchedulerEvent` использует сигнатуру индекса, чтобы Scheduler мог добавлять дополнительные поля во время выполнения. +- `SchedulerSnapshot` фиксирует данные, необходимые для undo/redo (события + конфигурация). + +## Настройка образца данных + +Создайте `src/seed/data.ts` с несколькими событиями и исходным состоянием UI. Обратите внимание, что `seedDate` хранится как **число** (timestamp), чтобы состояние атомов оставалось сериализуемым. + +~~~ts +import type { SchedulerEvent, SchedulerView } from "../types"; + +export const seedEvents: SchedulerEvent[] = [ + { id: 1, start_date: "2025-08-11T02:00:00Z", end_date: "2025-08-11T10:20:00Z", text: "Product Strategy Hike" }, + { id: 2, start_date: "2025-08-12T06:00:00Z", end_date: "2025-08-12T11:00:00Z", text: "Tranquil Tea Time" }, + { id: 3, start_date: "2025-08-15T03:00:00Z", end_date: "2025-08-15T08:00:00Z", text: "Demo and Showcase" }, +]; + +export const seedDate = Date.parse("2025-08-15T00:00:00Z"); +export const seedView: SchedulerView = "week"; +~~~ + +:::note +Компаньон-демо включает дополнительные события для более насыщенной визуализации. +::: + +## Создание атомов и действий Jotai + +Создайте `src/schedulerAtoms.ts`. Эта настройка хранит: + +- `events` (данные Scheduler) +- `currentDate` (timestamp) +- `view` (`day | week | month`) +- `config` (конфигурация Scheduler, включая `readonly`) +- `past` / `future` снимки для undo/redo + +В этом примере undo/redo отслеживают только мутации событий и конфигурации. Навигация по дате и переключение вида не добавляются в историю. + +~~~ts +import { atom } from "jotai"; +import { seedDate, seedEvents, seedView } from "./seed/data"; +import type { + SchedulerConfig, + SchedulerEvent, + SchedulerEventId, + SchedulerSnapshot, + SchedulerView, +} from "./types"; + +interface SchedulerState { + events: SchedulerEvent[]; + currentDate: number; + view: SchedulerView; + config: SchedulerConfig; +} + +export type SchedulerAction = + | { + type: "updateEvent"; + payload: Partial & Pick; + } + | { + type: "createEvent"; + payload: Omit & Partial>; + } + | { type: "deleteEvent"; payload: SchedulerEventId } + | { type: "setCurrentDate"; payload: number } + | { type: "setView"; payload: SchedulerView } + | { type: "updateConfig"; payload: Partial } + | { type: "undo" } + | { type: "redo" }; + +const schedulerStateAtom = atom({ + events: seedEvents as unknown as SchedulerEvent[], + currentDate: seedDate, + view: seedView, + config: {}, +}); + +const pastAtom = atom([]); +const futureAtom = atom([]); +const MAX_HISTORY_SIZE = 50; + +const deepCopy = (value: T): T => { + return JSON.parse(JSON.stringify(value)) as T; +}; + +const createSnapshot = (state: SchedulerState): SchedulerSnapshot => ({ + events: deepCopy(state.events), + config: deepCopy(state.config), +}); + +export const schedulerActionsAtom = atom( + null, + (get, set, action: SchedulerAction): SchedulerEvent | void => { + const currentState = get(schedulerStateAtom); + const past = get(pastAtom); + const future = get(futureAtom); + + const pushHistory = () => { + set(pastAtom, [...past.slice(-MAX_HISTORY_SIZE + 1), createSnapshot(currentState)]); + set(futureAtom, []); + }; + + if (action.type === "setCurrentDate") { + set(schedulerStateAtom, { ...currentState, currentDate: action.payload }); + return; + } + + if (action.type === "setView") { + set(schedulerStateAtom, { ...currentState, view: action.payload }); + return; + } + + if (action.type === "createEvent") { + pushHistory(); + const id = action.payload.id != null ? action.payload.id : `id_${Date.now().toString()}`; + const newEvent: SchedulerEvent = { ...action.payload, id } as SchedulerEvent; + + set(schedulerStateAtom, { + ...currentState, + events: [...currentState.events, newEvent], + }); + return newEvent; + } + + if (action.type === "updateEvent") { + const index = currentState.events.findIndex((event) => String(event.id) === String(action.payload.id)); + if (index === -1) return; + + pushHistory(); + set(schedulerStateAtom, { + ...currentState, + events: [ + ...currentState.events.slice(0, index), + { ...currentState.events[index], ...action.payload }, + ...currentState.events.slice(index + 1), + ], + }); + return; + } + + if (action.type === "deleteEvent") { + const exists = currentState.events.some((event) => String(event.id) === String(action.payload)); + if (!exists) return; + + pushHistory(); + set(schedulerStateAtom, { + ...currentState, + events: currentState.events.filter((event) => String(event.id) !== String(action.payload)), + }); + return; + } + + if (action.type === "updateConfig") { + pushHistory(); + set(schedulerStateAtom, { + ...currentState, + config: { ...currentState.config, ...action.payload }, + }); + return; + } + + if (action.type === "undo") { + if (past.length === 0) return; + + const previous = past[past.length - 1]; + set(pastAtom, past.slice(0, -1)); + set(futureAtom, [createSnapshot(currentState), ...future]); + set(schedulerStateAtom, { + ...currentState, + events: previous.events, + config: previous.config, + }); + return; + } + + if (action.type === "redo") { + if (future.length === 0) return; + + const next = future[0]; + set(futureAtom, future.slice(1)); + set(pastAtom, [...past, createSnapshot(currentState)]); + set(schedulerStateAtom, { + ...currentState, + events: next.events, + config: next.config, + }); + } + } +); + +export const schedulerStateViewAtom = atom((get) => get(schedulerStateAtom)); +export const canUndoAtom = atom((get) => get(pastAtom).length > 0); +export const canRedoAtom = atom((get) => get(futureAtom).length > 0); +~~~ + +## Построение панели управления + +Создайте `src/components/Toolbar.tsx`. Эта панель будет: + +- переключать представление (day/week/month) +- навигировать назад/сегодня/вперед +- undo/redo со статусами отключено +- переключать режим только чтения + +~~~tsx +import { ButtonGroup, Button, Typography, Stack, FormControlLabel, Switch } from "@mui/material"; +import UndoIcon from "@mui/icons-material/Undo"; +import RedoIcon from "@mui/icons-material/Redo"; +import React from "react"; +import type { SchedulerView } from "../types"; + +export interface ToolbarProps { + currentView: SchedulerView; + currentDate: Date; + isReadOnly: boolean; + canUndo: boolean; + canRedo: boolean; + onUndo?: () => void; + onRedo?: () => void; + onNavigate?: (action: "prev" | "next" | "today") => void; + onReadOnlyChange?: (value: boolean) => void; + setView: (view: SchedulerView) => void; +} + +export default React.memo(function Toolbar({ + currentView, + currentDate, + isReadOnly, + canUndo, + canRedo, + onUndo, + onRedo, + onNavigate, + onReadOnlyChange, + setView, +}: ToolbarProps) { + return ( + + + {(["day", "week", "month"] as const).map((label) => ( + + ))} + + + + + + onReadOnlyChange?.(event.target.checked)} + inputProps={{ "aria-label": "Toggle read-only" }} + /> + } + /> + + + {new Date(currentDate)?.toLocaleDateString(undefined, { weekday: "short", month: "short", day: "numeric" })} + + + + + + + + ); +}); +~~~ + +## Подключение Scheduler к Jotai + +Создайте `src/components/Scheduler.tsx`. Этот компонент: + +- читает `events/view/currentDate/config` из атомов +- связывает CRUD Scheduler (`create/update/delete`) через `data.save` +- подключает undo/redo, навигацию и переключение режима только чтения +- скрывает встроенную панель навигации Scheduler и использует настраиваемую панель инструментов + +~~~tsx +import { useCallback, useMemo } from "react"; +import { useAtomValue, useSetAtom } from "jotai"; +import ReactScheduler from "@dhtmlx/trial-react-scheduler"; +import "@dhtmlx/trial-react-scheduler/dist/react-scheduler.css"; + +import Toolbar from "./Toolbar"; +import { + canRedoAtom, + canUndoAtom, + schedulerActionsAtom, + schedulerStateViewAtom, +} from "../schedulerAtoms"; +import type { SchedulerEvent, SchedulerEventId, SchedulerView } from "../types"; + +type SaveAction = "create" | "update" | "delete"; +type SaveEntity = "event"; + +export default function DemoJotaiScheduler() { + const state = useAtomValue(schedulerStateViewAtom); + const dispatchAction = useSetAtom(schedulerActionsAtom); + const canUndo = useAtomValue(canUndoAtom); + const canRedo = useAtomValue(canRedoAtom); + + const { events, view, currentDate, config } = state; + const activeDate = useMemo(() => new Date(currentDate), [currentDate]); + const isReadOnly = Boolean((config as { readonly?: unknown }).readonly); + + const setCurrentDate = useCallback( + (dateMs: number) => dispatchAction({ type: "setCurrentDate", payload: dateMs }), + [dispatchAction] + ); + const setView = useCallback( + (nextView: SchedulerView) => dispatchAction({ type: "setView", payload: nextView }), + [dispatchAction] + ); + const undo = useCallback(() => dispatchAction({ type: "undo" }), [dispatchAction]); + const redo = useCallback(() => dispatchAction({ type: "redo" }), [dispatchAction]); + const updateReadOnly = useCallback( + (value: boolean) => dispatchAction({ type: "updateConfig", payload: { readonly: value } }), + [dispatchAction] + ); + + const handleDateNavigation = useCallback( + (action: "prev" | "next" | "today") => { + if (action === "today") { + setCurrentDate(Date.now()); + return; + } + + const step = action === "next" ? 1 : -1; + const date = new Date(currentDate); + + if (view === "day") { + date.setDate(date.getDate() + step); + } else if (view === "week") { + date.setDate(date.getDate() + step * 7); + } else { + date.setMonth(date.getMonth() + step); + } + + setCurrentDate(date.getTime()); + }, + [currentDate, view, setCurrentDate] + ); + + const handleViewChange = useCallback( + (mode: string, date: Date) => { + const nextView: SchedulerView = mode === "day" || mode === "week" || mode === "month" ? mode : "month"; + setView(nextView); + setCurrentDate(date.getTime()); + }, + [setView, setCurrentDate] + ); + + // Scheduler <-> Jotai data bridge + const dataBridge = useMemo( + () => ({ + save: (entity: SaveEntity, action: SaveAction, payload: unknown, id: unknown) => { + if (entity !== "event") return; + + switch (action) { + case "update": { + const eventData = + payload && typeof payload === "object" ? (payload as Partial) : ({} as Partial); + const eventId = eventData.id ?? id; + if (eventId == null) { + console.warn("Update called without an id", { payload, id }); + return; + } + + const updatedEvent = { ...eventData, id: eventId } as Partial & Pick; + dispatchAction({ type: "updateEvent", payload: updatedEvent }); + return updatedEvent; + } + case "create": { + const eventData = + payload && typeof payload === "object" + ? (payload as Omit & Partial>) + : null; + if (!eventData) { + console.warn("Create called without event payload", { payload }); + return; + } + return dispatchAction({ type: "createEvent", payload: eventData }); + } + case "delete": { + const deleteId = + payload && typeof payload === "object" + ? ((payload as { id?: unknown }).id ?? id) + : payload ?? id; + + if (deleteId == null) { + console.warn("Delete called without an id", { payload, id }); + return; + } + + dispatchAction({ type: "deleteEvent", payload: deleteId as SchedulerEventId }); + return deleteId; + } + default: + console.warn(`Unknown action: ${action}`); + return; + } + }, + }), + [dispatchAction] + ); + + const memoizedXY = useMemo(() => ({ nav_height: 0 }), []); + + return ( +
+ + + +
+ ); +} +~~~ + +## Рендер Scheduler в приложении + +Обновите `src/App.tsx`: + +~~~tsx +import Scheduler from "./components/Scheduler"; +import "./App.css"; + +function App() { + return ; +} + +export default App; +~~~ + +## Итого + +Теперь у вас React Scheduler полностью управляется через Jotai: + +- атомы Jotai держат `events`, `view`, `currentDate` и `config` как единственный источник правды +- правки Scheduler маршрутизируются через `data.save` к типизированным действиям Jotai +- undo/redo реализованы с использованием истории на основе снимков для мутаций событий/конфигурации +- переключатель конфигурации только для чтения позволяет заблокировать Scheduler от правок +- настраиваемая панель инструментов обрабатывает навигацию, переключение вида и элементы управления историей + +## Что дальше + +- Повторно изучите концепции, лежащие в основе этого примера, в разделе [Основы привязки данных и управления состоянием](integrations/react/state/state-management-basics.md) +- Изучите конфигурацию Scheduler и варианты templating в [Обзор React Scheduler](integrations/react/overview.md) +- Добавьте сохранение данных, загружая/сохраняя события через API и отправляя действия атомов +- Исследуйте ту же схему с другими менеджерами состояний: + - [Использование React Scheduler с Redux Toolkit](integrations/react/state/redux-toolkit.md) + - [Использование React Scheduler с MobX](integrations/react/state/mobx.md) + - [Использование React Scheduler с XState](integrations/react/state/xstate.md) + - [Использование React Scheduler с Zustand](integrations/react/state/zustand.md) + - [Использование React Scheduler с Valtio](integrations/react/state/valtio.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/integrations/react/state/mobx.md b/i18n/ru/docusaurus-plugin-content-docs/current/integrations/react/state/mobx.md new file mode 100644 index 00000000..4258c53c --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/integrations/react/state/mobx.md @@ -0,0 +1,625 @@ +--- +title: React Scheduler — руководство по MobX +sidebar_label: MobX +description: "Отображение React Scheduler на основе наблюдаемого состояния MobX и обработка создания/обновления/удаления через data.save с откатом/повтором изменений на основе снимков." +--- + +# React Scheduler - MobX Tutorial + +Это руководство показывает, как отрисовать **DHTMLX React Scheduler** в приложении на Vite + React + TypeScript и управлять им через хранилище **MobX**. В конце у вас будет рабочий Scheduler, который поддерживает **создание/обновление/удаление**, **просмотр и навигацию по датам**, **откат/повтор изменений на основе снимков** для изменений событий и переключатель **только чтение**. + +:::note +Полный исходный код доступен на [GitHub](https://github.com/DHTMLX/react-scheduler-mobx-starter). +::: + +Вы создадите: + +- хранилище MobX, которое хранит `events`, текущий `view` и `date` +- мост `data.save`, который преобразует редактирования Scheduler в действия хранилища +- простую панель инструментов (виды, навигация, отмена/повтор, переключатель только чтения), размещенную над Scheduler + +## Предварительные требования + +- Базовые знания React, TypeScript, Vite и MobX +- Рекомендуется: прочитать [Основы привязки данных и управления состоянием](integrations/react/state/state-management-basics.md), чтобы понять режим привязки данных и обратный вызов `data.save`, на котором основан данный учебник. + +## Быстрая настройка - создание проекта + +На этом этапе мы создадим проект Vite, установим зависимости и проверим, что приложение запускается. + +Действия: + +- Создать проект Vite React + TypeScript +- Установить MobX + UI зависимости +- Установить React Scheduler (пакет пробной версии) +- Удалить стандартные стили Vite из `App.css`, чтобы Scheduler занимал всё пространство + +Перед началом установки установите [Node.js](https://nodejs.org/en/). + +Создать проект Vite React + TypeScript: + +~~~bash +npm create vite@latest react-scheduler-mobx-demo -- --template react-ts +cd react-scheduler-mobx-demo +~~~ + +Теперь установите необходимые зависимости. + +* Для **npm**: + +~~~bash +npm install mobx mobx-react-lite @mui/material @mui/icons-material @emotion/react @emotion/styled +~~~ + +* Для **yarn**: + +~~~bash +yarn add mobx mobx-react-lite @mui/material @mui/icons-material @emotion/react @emotion/styled +~~~ + +### Установка React Scheduler + +Установите React Scheduler, как описано в [руководстве по установке React Scheduler](integrations/react/installation.md). + +В этом учебнике мы используем пакет пробной версии: + +```bash +npm install @dhtmlx/trial-react-scheduler +``` + +или + +```bash +yarn add @dhtmlx/trial-react-scheduler +``` + +Если вы уже используете Professional пакет, замените `@dhtmlx/trial-react-scheduler` на `@dhx/react-scheduler` в командах и импортах. + +Теперь можно запустить сервер разработки: + +~~~bash +npm run dev +~~~ + +Теперь ваш проект на React должен работать по адресу `http://localhost:5173`. + +:::note +Чтобы Scheduler занимал всё пространство страницы, удалите стандартные стили Vite из `src/App.css`. + +Обновите `src/App.css` следующим образом. +::: + +~~~css title="src/App.css" +#root, body { + margin: 0; + padding: 0; + height: 100%; + width: 100%; +} +~~~ + +## Настройка тестовых данных + +На этом этапе мы создадим детерминированные сид-данные для Scheduler, чтобы демо выглядело одинаково при каждом запуске. + +Действия: + +- Создать `src/seed/data.ts` с небольшим набором событий +- Экспортировать начальный `view` и `date`, чтобы Scheduler запускался в предсказуемом состоянии + +Создать `src/seed/data.ts`: + +~~~ts title="src/seed/data.ts" +export type SchedulerView = "day" | "week" | "month"; + +export interface SeedEvent { + id: string | number; + start_date: string; + end_date: string; + text: string; +} + +export const seedEvents: SeedEvent[] = [ + { id: 1, start_date: "2025-08-11T02:00:00Z", end_date: "2025-08-11T10:20:00Z", text: "Product Strategy Hike" }, + { id: 2, start_date: "2025-08-12T06:00:00Z", end_date: "2025-08-12T11:00:00Z", text: "Tranquil Tea Time" }, + { id: 3, start_date: "2025-08-15T03:00:00Z", end_date: "2025-08-15T08:00:00Z", text: "Demo and Showcase" }, +]; + +export const seedDate = Date.parse("2025-08-15T00:00:00Z"); + +export const seedView: SchedulerView = "week"; +~~~ + +:::note +Сопутствующая демо-версия включает дополнительные события для более насыщенной визуализации. +::: + +## Построение компонента панели инструментов + +На этом шаге мы создадим простой повторно используемый тулбар, который управляет навигацией Scheduler и историей изменений. + +Действия: + +- Создать файл `src/components/Toolbar.tsx` +- Добавить кнопки для отображений: **Day / Week / Month** +- Добавить кнопки навигации **Prev / Today / Next** +- Добавить кнопки **Undo / Redo**, привязанные к колбэкам +- Добавить переключатель **Read-only** + +Создать `src/components/Toolbar.tsx`: + +~~~tsx title="src/components/Toolbar.tsx" +import { ButtonGroup, Button, Typography, Stack, FormControlLabel, Switch } from "@mui/material"; +import UndoIcon from "@mui/icons-material/Undo"; +import RedoIcon from "@mui/icons-material/Redo"; +import React from "react"; + +export interface ToolbarProps { + currentView: string; + currentDate: Date; + isReadOnly: boolean; + canUndo?: boolean; + canRedo?: boolean; + onUndo?: () => void; + onRedo?: () => void; + onNavigate?: (action: "prev" | "next" | "today") => void; + onReadOnlyChange?: (value: boolean) => void; + setView: (view: "day" | "week" | "month") => void; +} + +export default React.memo(function Toolbar({ + currentView, + currentDate, + isReadOnly, + canUndo, + canRedo, + onUndo, + onRedo, + onNavigate, + onReadOnlyChange, + setView, +}: ToolbarProps) { + return ( + + + {(["day", "week", "month"] as const).map((label) => ( + + ))} + + + + + + + onReadOnlyChange?.(e.target.checked)} + inputProps={{ "aria-label": "Toggle read-only" }} + /> + } + /> + + + + {new Date(currentDate).toLocaleDateString(undefined, { + weekday: "short", + month: "short", + day: "numeric", + })} + + + + + + + + + ); +}); +~~~ + +## Настройка хранилища MobX + +На этом шаге мы создадим хранилище MobX, которое управляет состоянием Scheduler и реализует откат/повтор изменений на основе снимков. + +Действия: + +- Создать `src/store.ts` +- Хранить `events`, текущий `view`, `currentDate` и `config` как наблюдаемое состояние +- Реализовать методы `createEvent`, `updateEvent`, `deleteEvent` +- Добавить `updateConfig` для переключения режима только чтения +- Добавить стеки истории `past` и `future` и операции `undo`/`redo` + +Создать `src/store.ts`: + +~~~ts title="src/store.ts" +import { makeAutoObservable } from "mobx"; +import type { SchedulerConfig } from "@dhtmlx/trial-react-scheduler"; +import { seedEvents, seedView, seedDate, type SeedEvent, type SchedulerView } from "./seed/data"; + +export interface SchedulerEvent extends SeedEvent { + /** + * Extra Scheduler fields are allowed. + * The demo only relies on id/start_date/end_date/text. + */ + [key: string]: unknown; +} + +interface Snapshot { + events: SchedulerEvent[]; + config: SchedulerConfig; +} + +function cloneJson(value: T): T { + return JSON.parse(JSON.stringify(value)) as T; +} + +class SchedulerStore { + events: SchedulerEvent[] = seedEvents as SchedulerEvent[]; + view: SchedulerView = seedView; + currentDate: number = seedDate; + config: SchedulerConfig = {}; + + past: Snapshot[] = []; + future: Snapshot[] = []; + maxHistory = 50; + + constructor() { + makeAutoObservable(this, {}, { autoBind: true }); + } + + get canUndo(): boolean { + return this.past.length > 0; + } + + get canRedo(): boolean { + return this.future.length > 0; + } + + private generateId(): string { + return `id_${Date.now().toString()}`; + } + + private snapshot(): Snapshot { + return { + events: cloneJson(this.events), + config: cloneJson(this.config), + }; + } + + private saveToHistory(): void { + this.past.push(this.snapshot()); + if (this.past.length > this.maxHistory) { + this.past.shift(); + } + this.future = []; + } + + private restore(snapshot: Snapshot): void { + this.events = snapshot.events; + this.config = snapshot.config; + } + + /** + * Navigation is not part of history: undo/redo in this demo is focused on event mutations. + */ + setCurrentDate(date: number): void { + this.currentDate = date; + } + + /** + * Navigation is not part of history: undo/redo in this demo is focused on event mutations. + */ + setView(view: SchedulerView): void { + this.view = view; + } + + updateConfig(partial: Partial): void { + this.saveToHistory(); + this.config = { ...this.config, ...partial }; + } + + /** + * Called by Scheduler's data processor (data.save) on event creation. + * + * Important: we return the created event with a final id (simulating a backend-generated id), + * so Scheduler can replace its temporary id and keep subsequent updates working correctly. + */ + createEvent(eventDraft: Partial): SchedulerEvent { + this.saveToHistory(); + + const id = this.generateId(); + const newEvent: SchedulerEvent = { + ...eventDraft, + id, + start_date: String(eventDraft.start_date ?? new Date().toISOString()), + end_date: String(eventDraft.end_date ?? new Date().toISOString()), + text: String(eventDraft.text ?? "(no title)"), + }; + + this.events = [...this.events, newEvent]; + return newEvent; + } + + updateEvent(updatedEvent: Partial & { id: string | number }): void { + this.saveToHistory(); + this.events = this.events.map((event) => { + if (String(event.id) === String(updatedEvent.id)) { + return { ...event, ...updatedEvent }; + } + return event; + }); + } + + deleteEvent(id: string | number): void { + this.saveToHistory(); + this.events = this.events.filter((event) => String(event.id) !== String(id)); + } + + undo(): void { + if (this.past.length === 0) { + return; + } + + const previous = this.past.pop(); + if (!previous) { + return; + } + + this.future.unshift(this.snapshot()); + this.restore(previous); + } + + redo(): void { + if (this.future.length === 0) { + return; + } + + const next = this.future.shift(); + if (!next) { + return; + } + + this.past.push(this.snapshot()); + this.restore(next); + } +} + +const schedulerStore = new SchedulerStore(); +export default schedulerStore; +~~~ + +## Создание основного компонента Scheduler + +На этом этапе мы отрисуем React Scheduler и соединим его с хранилищем MobX. + +Действия: + +- Создать `src/components/Scheduler.tsx` +- Обернуть компонент в `observer`, чтобы он пересоздавался при изменениях в хранилище +- Создать мост `data.save`, который вызывает действия хранилища для создания/обновления/удаления +- Добавить обработчик `onViewChange` для синхронизации изменений вида Scheduler с состоянием +- Подключить переключатель чтения через `updateConfig` +- Скрыть встроенную панель навигации Scheduler и использовать вместо неё панель инструментов + +Создать `src/components/Scheduler.tsx`: + +~~~tsx title="src/components/Scheduler.tsx" +import { observer } from "mobx-react-lite"; +import ReactScheduler from "@dhtmlx/trial-react-scheduler"; +import "@dhtmlx/trial-react-scheduler/dist/react-scheduler.css"; +import Toolbar from "./Toolbar"; +import schedulerStore, { type SchedulerEvent } from "../store"; +import type { SchedulerView } from "../seed/data"; +import { useCallback, useMemo } from "react"; + +const DemoMobxScheduler = observer(() => { + const { + events, + view, + currentDate, + config, + canUndo, + canRedo, + setView, + setCurrentDate, + updateConfig, + createEvent, + updateEvent, + deleteEvent, + undo, + redo, + } = schedulerStore; + + const activeDate = useMemo(() => new Date(currentDate), [currentDate]); + + const handleDateNavigation = useCallback( + (action: "prev" | "next" | "today") => { + if (action === "today") { + setCurrentDate(Date.now()); + return; + } + + const step = action === "next" ? 1 : -1; + const date = new Date(currentDate); + + if (view === "day") { + date.setDate(date.getDate() + step); + } else if (view === "week") { + date.setDate(date.getDate() + step * 7); + } else { + date.setMonth(date.getMonth() + step); + } + + setCurrentDate(date.getTime()); + }, + [currentDate, view, setCurrentDate] + ); + + const handleViewChange = useCallback( + (mode: string, date: Date) => { + const nextView: SchedulerView = + mode === "day" || mode === "week" || mode === "month" ? mode : "month"; + setView(nextView); + setCurrentDate(date.getTime()); + }, + [setView, setCurrentDate] + ); + + const isReadOnly = Boolean((config as { readonly?: unknown }).readonly); + const handleReadOnlyChange = useCallback( + (value: boolean) => updateConfig({ readonly: value }), + [updateConfig] + ); + + type DataAction = "create" | "update" | "delete"; + + const dataBridge = useMemo( + () => ({ + save: (entity: string, action: string, payload: unknown, id: string | number) => { + if (entity !== "event") { + return; + } + + const safeAction = action as DataAction; + + if (safeAction === "update") { + return updateEvent(payload as Partial & { id: string | number }); + } + + if (safeAction === "create") { + // Important: return the created event with the final id. + // This simulates a backend-generated id and keeps subsequent updates working. + return createEvent(payload as Partial); + } + + if (safeAction === "delete") { + return deleteEvent(id); + } + + console.warn(`Unknown data.save action: ${action}`); + return; + }, + }), + [updateEvent, createEvent, deleteEvent] + ); + + const handleUndo = useCallback(() => undo(), [undo]); + const handleRedo = useCallback(() => redo(), [redo]); + + const memoizedXY = useMemo(() => ({ nav_height: 0 }), []); + + return ( +
+ + + +
+ ); +}); + +export default DemoMobxScheduler; +~~~ + +Наконец, обновите `src/App.tsx`, чтобы отрисовать компонент Scheduler: + +~~~tsx title="src/App.tsx" +import { useEffect } from "react"; +import Scheduler from "./components/Scheduler"; +import "./App.css"; + +function App() { + useEffect(() => { + document.title = "DHTMLX React Scheduler - MobX Demo"; + }, []); + + return ; +} + +export default App; +~~~ + +На данном этапе ваше приложение должно рендерить Scheduler с кастомной панелью инструментов над ним. + +## Запуск приложения + +На этом этапе мы запустим демо и проверим редактирование и историю. + +Действия: + +- Запустите сервер разработки (если он не запущен) +- Создавайте/редактируйте/перемещайте события и убедитесь, что хранилище обновляется через `data.save` +- Используйте Undo/Redo для отката/применения изменений +- Переключите режим чтения, чтобы заблокировать Scheduler + +Запуск: + +~~~bash +npm run dev +~~~ + +Попробуйте: + +- Создайте событие (двойной клик по календарю или используйте встроенный редактор) +- Измените событие (изменить текст/время) +- Переместите событие в другой временной слот +- Используйте Undo / Redo в панели инструментов +- Переключите Read-only, чтобы заблокировать Scheduler от редактирования + +## Итого + +В этом руководстве вы: + +- создали проект на базе Vite + React +- добавили React Scheduler и связали его с хранилищем MobX +- реализовали откат/повтор изменений на основе снимков с использованием массивов истории `past`/`future` +- управляли событиями, видом/датой и конфигурацией через наблюдаемое состояние MobX +- использовали обратный вызов `data.save`, чтобы каждое изменение Scheduler превращалось в действие хранилища +- переключатель конфигурации «Только чтение» позволяет заблокировать Scheduler от редактирования + +Это сохраняет компонент Scheduler полностью декларативным, в то время как вся логика мутаций и обработка истории инкапсулированы внутри состояния MobX. + +## Что дальше + +Для дальнейшей работы: + +- Вернитесь к концепциям, лежащим в основе данного примера, в [Основы привязки данных и управления состоянием](integrations/react/state/state-management-basics.md) +- Изучите конфигурацию Scheduler и параметры шаблонов в [Обзор React Scheduler](integrations/react/overview.md) +- Протестируйте тот же подход с другими менеджерами состояния: + - [Использование React Scheduler с Redux Toolkit](integrations/react/state/redux-toolkit.md) + - [Использование React Scheduler с Zustand](integrations/react/state/zustand.md) + - [Использование React Scheduler с XState](integrations/react/state/xstate.md) + - [Использование React Scheduler с Jotai](integrations/react/state/jotai.md) + - [Использование React Scheduler с Valtio](integrations/react/state/valtio.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/integrations/react/state/redux-toolkit.md b/i18n/ru/docusaurus-plugin-content-docs/current/integrations/react/state/redux-toolkit.md new file mode 100644 index 00000000..303c1181 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/integrations/react/state/redux-toolkit.md @@ -0,0 +1,590 @@ +--- +title: React Scheduler — Руководство по Redux Toolkit +sidebar_label: Redux Toolkit +description: Узнайте, как интегрировать DHTMLX React Scheduler с Redux Toolkit, включая CRUD-операции над событиями, синхронизацию вида/даты, и undo/redo. +--- + +# React Scheduler — Руководство по Redux Toolkit + +Это руководство показывает, как подключить **DHTMLX React Scheduler** к хранилищу **Redux Toolkit**. Вы будете хранить события и состояние интерфейса пользователя (вид/дата/конфигурация) в Redux, направлять редактирования Scheduler через `data.save`, и добавить **undo/redo** с помощью истории на основе снимков и переключателя **только для чтения**. + +:::note +Полный исходный код [доступен на GitHub](https://github.com/DHTMLX/react-scheduler-redux-starter). +::: + +## Предварительные требования + +- Node.js (рекомендуется LTS) +- Основы React + TypeScript +- Основы Redux (actions, reducers, store). Если нужен повтор, смотрите документацию Redux: https://redux.js.org/ + +## Быстрая настройка — создание проекта + +Создайте проект на Vite + React + TS: + +~~~bash +npm create vite@latest scheduler-redux-demo -- --template react-ts +cd scheduler-redux-demo +npm install +~~~ + +Установите Redux Toolkit + React Redux: + +~~~bash +npm install @reduxjs/toolkit react-redux +~~~ + +Установите Material UI (используется для демо панели инструментов): + +~~~bash +npm install @mui/material @mui/icons-material @emotion/react @emotion/styled +~~~ + +### Установка React Scheduler + +Установите React Scheduler, как описано в [руководстве по установке React Scheduler](integrations/react/installation.md). + +В этом руководстве мы используем пакет пробной версии: + +```bash +npm install @dhtmlx/trial-react-scheduler +``` + +или + +```bash +yarn add @dhtmlx/trial-react-scheduler +``` + +Если вы уже используете Professional-пакет, замените `@dhtmlx/trial-react-scheduler` на `@dhx/react-scheduler` в командах и импортах. + +Запустите dev-сервер: + +~~~bash +npm run dev +~~~ + +:::note +Чтобы Scheduler занимал всю страницу, удалите стандартные стили из `src/App.css` и добавьте: + +~~~css +#root { + margin: 0; + padding: 0; + height: 100%; + width: 100%; +} + +body { + margin: 0; +} +~~~ +::: + +## Настройка хранилища Redux + +Создайте `src/redux/store.ts`. Это подключает редуктор `scheduler` к хранилищу Redux: + +~~~ts +import { configureStore } from "@reduxjs/toolkit"; +import schedulerReducer from "./schedulerSlice"; + +export const store = configureStore({ + reducer: { + scheduler: schedulerReducer, + }, +}); + +export type RootState = ReturnType; +export type AppDispatch = typeof store.dispatch; +~~~ + +## Определение общих типов + +Создайте `src/redux/types.ts`. Эти типы общие для среза, действий и компонентов: + +~~~ts +export type SchedulerView = "day" | "week" | "month"; + +export interface SchedulerEvent { + id: string | number; + start_date: string; + end_date: string; + text: string; + + // Scheduler может прикреплять дополнительные поля (например, произвольные пропсы). Оставим демо максимально разрешающим. + [key: string]: unknown; +} + +export type SchedulerConfig = Record; + +export interface SchedulerSnapshot { + events: SchedulerEvent[]; + config: SchedulerConfig; +} +~~~ + +- `SchedulerEvent` использует сигнатуру индекса, чтобы Scheduler мог добавлять дополнительные поля во время выполнения. +- `SchedulerSnapshot` фиксирует данные, необходимые для undo/redo (события + конфигурация). + +## Настройка примерных данных + +Создайте `src/seed/data.ts` со сверстанными событиями и начальным состоянием UI. Обратите внимание, что `currentDate` хранится как **число** (timestamp), чтобы состояние Redux оставалось сериализуемым. + +~~~ts +export const seedEvents = [ + { id: 1, start_date: "2025-08-11T02:00:00Z", end_date: "2025-08-11T10:20:00Z", text: "Product Strategy Hike" }, + { id: 2, start_date: "2025-08-12T06:00:00Z", end_date: "2025-08-12T11:00:00Z", text: "Tranquil Tea Time" }, + { id: 3, start_date: "2025-08-15T03:00:00Z", end_date: "2025-08-15T08:00:00Z", text: "Demo and Showcase" }, +]; + +export const seedDate = Date.parse("2025-08-15T00:00:00Z"); +export const seedView = "week"; +~~~ + +:::note +Сопутствующее демо включает дополнительные события для более насыщенной визуализации. +::: + +## Определение действий Scheduler (создание/обновление/удаление) + +Редактирования Scheduler будут маршрутизироваться через Redux-д.actions. Создайте `src/redux/actions.ts`. + +Действие `createEvent` использует колбэк "prepare", чтобы сгенерировать стабильный ID (моделируя ID, возвращаемый бекендом). Мы также добавляем небольшого помощника (`dispatchAction`), который возвращает отправляемое полезное значение — это полезно, потому что `data.save` Scheduler может вернуть созданный/обновленный объект. + +~~~ts +import { createAction } from "@reduxjs/toolkit"; +import type { Dispatch } from "redux"; +import type { SchedulerEvent } from "./types"; + +// Симулируем получение ID от бекенда. +const generateId = () => `id_${Date.now().toString()}`; + +export const createEvent = createAction( + "schedulerDomain/createEvent", + (eventData: Omit, "id">) => { + const newEvent: SchedulerEvent = { + ...(eventData as Omit), + id: generateId(), + }; + return { payload: newEvent }; + } +); + +export const deleteEvent = createAction( + "schedulerDomain/deleteEvent", + (id: SchedulerEvent["id"]) => ({ payload: id }) +); + +export const updateEvent = createAction( + "schedulerDomain/updateEvent", + (eventData: Partial & Pick) => ({ payload: eventData }) +); + +// Helper function to dispatch an action and return its payload consistently +export function dispatchAction( + dispatch: Dispatch, + actionCreator: (arg: Arg) => { type: string; payload: Payload }, + arg: Arg +): Payload { + return dispatch(actionCreator(arg)).payload; +} +~~~ + +## Создание Redux-среза + +Теперь создайте `src/redux/schedulerSlice.ts`. Этот срез хранит: + +- `events` (данные Scheduler) +- `currentDate` (как timestamp) +- `view` (`day | week | month`) +- `config` (конфигурацию Scheduler, включая `readonly`) +- `past` / `future` (массивы снимков для undo/redo) + +Undo/redo интегрированы непосредственно в срез с использованием снимков. Перед каждым изменением данных вызывается `pushHistory`, который сохраняет снимок текущих событий и конфигурации. Редюсеры `undo` и `redo` меняют текущее состояние на снимок из истории. + +~~~ts +import { createSlice, type PayloadAction } from "@reduxjs/toolkit"; +import { seedEvents, seedDate, seedView } from "../seed/data"; +import { createEvent, deleteEvent, updateEvent } from "./actions"; +import type { SchedulerConfig, SchedulerEvent, SchedulerSnapshot, SchedulerView } from "./types"; + +interface SchedulerState { + events: SchedulerEvent[]; + currentDate: number; + view: SchedulerView; + config: SchedulerConfig; + + past: SchedulerSnapshot[]; + future: SchedulerSnapshot[]; + maxHistory: number; +} + +const deepCopy = (value: T): T => { + // JSON-клон подходит для этого демо: + // - события/конфигурации — обычные объекты + // - нужно иммутабельные снимки для undo/redo + return JSON.parse(JSON.stringify(value)) as T; +}; + +const createSnapshot = (state: SchedulerState): SchedulerSnapshot => ({ + events: deepCopy(state.events), + config: deepCopy(state.config), +}); + +const pushHistory = (state: SchedulerState) => { + state.past.push(createSnapshot(state)); + + if (state.maxHistory > 0 && state.past.length > state.maxHistory) { + state.past.shift(); + } + + state.future = []; +}; + +const initialState: SchedulerState = { + events: seedEvents as unknown as SchedulerEvent[], + currentDate: seedDate, + view: seedView as SchedulerView, + config: {}, + + past: [], + future: [], + maxHistory: 50, +}; + +const schedulerSlice = createSlice({ + name: "scheduler", + initialState, + reducers: { + undo(state) { + if (state.past.length === 0) return; + + const previous = state.past[state.past.length - 1]; + const newFuture = createSnapshot(state as SchedulerState); + + state.events = previous.events; + state.config = previous.config; + state.past = state.past.slice(0, -1); + state.future = [newFuture, ...state.future]; + }, + redo(state) { + if (state.future.length === 0) return; + + const next = state.future[0]; + const newPast = createSnapshot(state as SchedulerState); + + state.events = next.events; + state.config = next.config; + state.future = state.future.slice(1); + state.past = [...state.past, newPast]; + }, + + // Навигация не является undo-действием в этом демо. + setCurrentDate(state, { payload }: PayloadAction) { + state.currentDate = payload; + }, + setView(state, { payload }: PayloadAction) { + state.view = payload; + }, + + updateConfig(state, { payload }: PayloadAction>) { + pushHistory(state as SchedulerState); + state.config = { ...state.config, ...payload }; + }, + }, + extraReducers: (builder) => { + builder + .addCase(createEvent, (state, action) => { + pushHistory(state as SchedulerState); + state.events.push(action.payload); + }) + .addCase(deleteEvent, (state, action) => { + pushHistory(state as SchedulerState); + state.events = state.events.filter((e) => String(e.id) !== String(action.payload)); + }) + .addCase(updateEvent, (state, action) => { + pushHistory(state as SchedulerState); + + const index = state.events.findIndex((e) => String(e.id) === String(action.payload.id)); + if (index !== -1) { + state.events[index] = { ...state.events[index], ...action.payload }; + } + }); + }, +}); + +export const { undo, redo, setCurrentDate, setView, updateConfig } = schedulerSlice.actions; +export default schedulerSlice.reducer; +~~~ + +## Построение компонента панели инструментов + +Создайте `src/components/Toolbar.tsx`. Это небольшая панель инструментов Material UI для: + +- переключения вида (day/week/month) +- перехода на предыдущий/сегодня/следующий +- undo/redo +- переключения режима только для чтения + +~~~tsx +import { ButtonGroup, Button, Typography, Stack, FormControlLabel, Switch } from "@mui/material"; +import UndoIcon from "@mui/icons-material/Undo"; +import RedoIcon from "@mui/icons-material/Redo"; +import React from "react"; +import type { SchedulerView } from "../redux/types"; + +export interface ToolbarProps { + currentView: SchedulerView; + currentDate: Date; + isReadOnly: boolean; + canUndo: boolean; + canRedo: boolean; + onUndo?: () => void; + onRedo?: () => void; + onNavigate?: (action: "prev" | "next" | "today") => void; + onReadOnlyChange?: (value: boolean) => void; + setView: (view: SchedulerView) => void; +} + +export default React.memo(function Toolbar({ + currentView, + currentDate, + isReadOnly, + canUndo, + canRedo, + onUndo, + onRedo, + onNavigate, + onReadOnlyChange, + setView, +}: ToolbarProps) { + return ( + + + {(["day", "week", "month"] as const).map((l) => ( + + ))} + + + + + + onReadOnlyChange?.(e.target.checked)} + inputProps={{ "aria-label": "Toggle read-only" }} + /> + } + /> + + + {new Date(currentDate)?.toLocaleDateString(undefined, { weekday: "short", month: "short", day: "numeric" })} + + + + + + + + ); +}); +~~~ + +## Подключение Scheduler к Redux + +Создайте `src/components/Scheduler.tsx`. Этот компонент: + +- читает `events/view/currentDate/config` из плоского состояния Redux +- предоставляет обратный вызов `data.save`, который диспатчит Redux-акции +- возвращает созданные/обновленные сущности из `save`, чтобы Scheduler мог синхронизировать своё внутреннее учёт +- соединяет `undo/redo` и переключатель конфигурации `read-only` +- скрывает встроенную панель навигации и использует вместо неё пользовательскую панель инструментов + +~~~tsx +import { useCallback, useMemo } from "react"; +import { useDispatch, useSelector } from "react-redux"; + +// Пробная (Trial) версия импорта: +// import ReactScheduler from "@dhtmlx/trial-react-scheduler"; +// import "@dhtmlx/trial-react-scheduler/dist/react-scheduler.css"; + +// Профессиональная версия импорта: +import ReactScheduler from "@dhx/react-scheduler"; +import "@dhx/react-scheduler/dist/react-scheduler.css"; + +import Toolbar from "./Toolbar"; +import { redo, setCurrentDate, setView, undo, updateConfig } from "../redux/schedulerSlice"; +import { createEvent, updateEvent, deleteEvent, dispatchAction } from "../redux/actions"; +import type { AppDispatch, RootState } from "../redux/store"; +import type { SchedulerEvent, SchedulerView } from "../redux/types"; + +export default function ReactSchedulerReduxDemo() { + const dispatch = useDispatch(); + const { past, future, events, view, currentDate, config } = useSelector((s: RootState) => s.scheduler); + const canUndo = past.length > 0; + const canRedo = future.length > 0; + const activeDate = useMemo(() => new Date(currentDate), [currentDate]); + const isReadOnly = Boolean((config as { readonly?: unknown }).readonly); + + const handleDateNavigation = useCallback((action: "prev" | "next" | "today") => { + if (action === "today") { + dispatch(setCurrentDate(Date.now())); + return; + } + + const step = action === "next" ? 1 : -1; + const date = new Date(activeDate); + + if (view === "day") { + date.setDate(date.getDate() + step); + } else if (view === "week") { + date.setDate(date.getDate() + step * 7); + } else { + date.setMonth(date.getMonth() + step); + } + dispatch(setCurrentDate(date.getTime())); + }, [activeDate, view, dispatch]); + + // Мост Scheduler <-> Redux данных + const dataBridge = useMemo(() => ({ + save: (entity: string, action: string, payload: unknown, id: unknown) => { + if (entity !== "event") return; + + switch (action) { + case "update": { + const eventData = payload && typeof payload === "object" ? (payload as Record) : {}; + const eventId = (eventData as Record).id ?? id; + if (eventId == null) { + console.warn("Update called without an id", { payload, id }); + return; + } + + const eventWithId = { ...eventData, id: eventId } as Partial & Pick; + return dispatchAction(dispatch, updateEvent, eventWithId); + } + case "create": + return dispatchAction(dispatch, createEvent, payload as Omit, "id">); + case "delete": { + const deleteId = + payload && typeof payload === "object" + ? (payload as Record).id ?? id + : payload ?? id; + if (deleteId == null) { + console.warn("Delete called without an id", { payload, id }); + return; + } + return dispatchAction(dispatch, deleteEvent, deleteId as SchedulerEvent["id"]); + } + default: + console.warn(`Unknown action: ${action}`); + return; + } + }, + }), [dispatch]); + + const handleViewChange = useCallback( + (mode: string, date: Date) => { + const nextView: SchedulerView = mode === "day" || mode === "week" || mode === "month" ? mode : "month"; + dispatch(setView(nextView)); + dispatch(setCurrentDate(date.getTime())); + }, + [dispatch] + ); + + const handleSetView = useCallback((nextView: SchedulerView) => dispatch(setView(nextView)), [dispatch]); + + const handleUndo = useCallback(() => dispatch(undo()), [dispatch]); + const handleRedo = useCallback(() => dispatch(redo()), [dispatch]); + const handleReadOnlyChange = useCallback( + (value: boolean) => dispatch(updateConfig({ readonly: value })), + [dispatch] + ); + const memoizedXY = useMemo(() => ({ nav_height: 0 }), []); + + return ( +
+ + + +
+ ); +} +~~~ + +## Интеграция провайдера Redux + +Наконец, оберните ваше приложение в провайдер Redux. Обновите `src/App.tsx`: + +~~~tsx +import { Provider } from "react-redux"; +import { store } from "./redux/store"; +import Scheduler from "./components/Scheduler"; +import "./App.css"; + +function App() { + return ( + + + + ); +} + +export default App; +~~~ + +## Итоги + +Теперь React Scheduler полностью управляется через Redux Toolkit: + +- Scheduler читает `events`, `view`, `currentDate` и `config` из Redux +- изменения пользователя маршрутизируются через `data.save` → Redux-акции +- UI синхронизирован, потому что Scheduler получает обновлённые `events` через пропсы +- undo/redo реализованы через history на основе снимков, встроенную прямо в срез +- переключатель конфигурации read-only позволяет зафиксировать Scheduler от редактирования + +## Что дальше + +- Пересмотрите концепции, лежащие в основе этого примера, в [Основы привязки данных и управления состоянием](integrations/react/state/state-management-basics.md) +- Изучите конфигурацию Scheduler и параметры шаблонов в [обзоре React Scheduler](integrations/react/overview.md) +- Добавьте персистенцию (загрузка/сохранение событий через API) через вызов асинхронных thunk-операций и обновление среза соответственно +- Исследуйте тот же подход с другими менеджерами состояния: + - [Using React Scheduler with MobX](integrations/react/state/mobx.md) + - [Using React Scheduler with XState](integrations/react/state/xstate.md) + - [Using React Scheduler with Zustand](integrations/react/state/zustand.md) + - [Using React Scheduler with Valtio](integrations/react/state/valtio.md) + - [Using React Scheduler with Jotai](integrations/react/state/jotai.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/integrations/react/state/state-management-basics.md b/i18n/ru/docusaurus-plugin-content-docs/current/integrations/react/state/state-management-basics.md new file mode 100644 index 00000000..ce8f9a10 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/integrations/react/state/state-management-basics.md @@ -0,0 +1,301 @@ +--- +title: Привязка данных и управление состоянием. Базовый обзор в React Scheduler +sidebar_label: Основы +description: "Обзор двух моделей привязки данных в React Scheduler и базовые шаблоны работы со состоянием в React и менеджерах состояния." +--- + +# Привязка данных и управление состоянием в React Scheduler + +React Scheduler поддерживает две модели привязки данных: + +1. **React state как источник истины** (рекомендуется для большинства приложений на React) +2. **Scheduler как источник истины** (полезно в специализированных случаях с высокой пропускной способностью) + +Обе модели допустимы. Выбирайте одну модель на экране и придерживайтесь её. + +Если вы ещё не отобразили базовую диаграмму, начните с [Быстрого старта](integrations/react/quick-start.md). + +## Модели данных + +### React state как источник истины (рекомендовано) + +В этой модели: + +- вы храните `events` (и часто `view` / `date`) в состоянии React или у менеджера состояний +- вы передаёте это состояние в пропсы `` +- Scheduler вызывает `data.save` / `data.batchSave` при редактировании данных пользователями +- вы обновляете состояние, и React повторно рендерит Scheduler с новыми пропсами + +Используйте это, когда другие компоненты React должны синхронизироваться с данными Scheduler. + +### Scheduler как источник истины + +В этой модели: + +- Scheduler загружает и мутирует данные внутри себя +- вы по желанию передаёте изменения в конечные точки бэкенда +- React не зеркалирует каждое обновление события в состоянии + +Используйте эту модель, когда React не требует немедленного отражения каждого отдельного изменения Scheduler. + +## React state как источник истины {#reactstateasthesourceoftruth} + +### Минимальный пример + +```tsx +import { useMemo, useState } from "react"; +import ReactScheduler, { type Event } from "@dhtmlx/trial-react-scheduler"; +import "@dhtmlx/trial-react-scheduler/dist/react-scheduler.css"; + +import { seedEvents } from "./seed/data"; + +export default function ReactStateScheduler() { + const [events, setEvents] = useState(seedEvents); + + const data = useMemo( + () => ({ + save: (entity: string, action: string, item: Event, id: string | number) => { + if (entity !== "event") return; + + if (action === "create") { + setEvents((prev) => [...prev, item]); + return; + } + + if (action === "update") { + setEvents((prev) => prev.map((e) => (e.id === id ? item : e))); + return; + } + + if (action === "delete") { + setEvents((prev) => prev.filter((e) => e.id !== id)); + } + }, + }), + [] + ); + + return ( +
+ +
+ ); +} +``` + +Этот шаблон делает React каноническим владельцем данных событий. + +## Обработка изменений с помощью `data.save` {#handlingchangeswithdatasave} + +`data.save` вызывается для каждого изменения пользователя: + +```ts +(entity: string, action: string, item: any, id: string | number) => void | Promise +``` + +Для CRUD событий Scheduler: + +- `entity` равен `"event"` +- `action` равен `"create" | "update" | "delete"` +- `item` — созданное/обновлённое/удалённое событие +- `id` — идентификатор затронутого события + +### Пример на стороне бэкенда + +```tsx +const data = { + save: async (entity: string, action: string, item: any, id: string | number) => { + if (entity !== "event") return; + + if (action === "create") { + const response = await fetch("/api/events", { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify(item), + }); + + const created = await response.json(); + return { id: created.id }; + } + + if (action === "update") { + await fetch(`/api/events/${id}`, { + method: "PUT", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify(item), + }); + return; + } + + if (action === "delete") { + await fetch(`/api/events/${id}`, { method: "DELETE" }); + } + }, +}; +``` + +Если ваш бэкенд заменяет временные идентификаторы при создании, верните `{ id: realId }`, чтобы Scheduler мог согласовать клиентские и серверные идентификаторы. + +## Групповые обновления с помощью `data.batchSave` + +`data.batchSave` полезен, когда множество изменений отправляется за короткое время (например, плотные сеансы редактирования). + +Используйте его, когда нужно: + +- уменьшить число запросов за счёт отправки сгруппированных изменений +- обработать обновления в одной транзакции редуктора/хранилища + +```tsx + { + await fetch("/api/events/batch", { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify(changes), + }); + }, + }} +/> +``` + +Используйте `save` для простой логики по изменению и `batchSave` для группированной синхронизации. + +## Загрузка данных в состояние React + +В управляемой React-моделью Scheduler получает данные из состояния React. Распространённые источники: + +- локальное состояние компонента +- глобальный менеджер состояния (Redux Toolkit, Zustand, MobX, XState, Jotai, Valtio) +- вызовы API + +### Источник локального состояния + +```tsx +import { useState } from "react"; +import ReactScheduler, { type Event } from "@dhtmlx/trial-react-scheduler"; +import { seedEvents, seedView, seedDate } from "./seed/data"; + +export default function LocalStateExample() { + const [events] = useState(seedEvents); + + return ( + + ); +} +``` + +### Источник через менеджер состояния + +Каждая библиотека следует одинаковому потоку: + +- селектор/хук считывает состояние +- пропсы передают данные Scheduler +- `data.save` инициирует действия/мутации в хранилище + +```tsx +const events = useSchedulerStore((s) => s.events); +const onSave = useSchedulerStore((s) => s.handleSave); + +; +``` + +Учебные материалы по работе со state-менеджером: + +- [Использование React Scheduler с Redux Toolkit](integrations/react/state/redux-toolkit.md) +- [Использование React Scheduler с Zustand](integrations/react/state/zustand.md) +- [Использование React Scheduler с MobX](integrations/react/state/mobx.md) +- [Использование React Scheduler с XState](integrations/react/state/xstate.md) +- [Использование React Scheduler с Jotai](integrations/react/state/jotai.md) +- [Использование React Scheduler с Valtio](integrations/react/state/valtio.md) + +### Источник загрузки через API + +```tsx +import { useEffect, useState } from "react"; +import ReactScheduler, { type Event } from "@dhtmlx/trial-react-scheduler"; + +export default function SchedulerWithApi() { + const [events, setEvents] = useState(null); + + useEffect(() => { + let disposed = false; + + (async () => { + const response = await fetch("/api/events"); + const payload = await response.json(); + if (!disposed) setEvents(payload.events || []); + })(); + + return () => { + disposed = true; + }; + }, []); + + if (!events) return
Loading Scheduler...
; + + return ; +} +``` + +## Scheduler как источник истины {#schedulerasthesourceoftruth} + +В этом режиме React рендерит компонент, но не хранит каноническое состояние событий. + +### Пример транспорта через URL + +```tsx + +``` + +### Пример через колбэк + +```tsx + { + const response = await fetch("/api/scheduler/load"); + return response.json(); + }, + save: async (entity, action, item, id) => { + await fetch("/api/scheduler/save", { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ entity, action, item, id }), + }); + }, + }} +/> +``` + +Используйте этот подход, когда Scheduler может оставаться основным хранилищем во время выполнения, и React не нуждается в отрисовке каждого обновления. + +## Выбор подходящей модели + +Используйте модель, управляемую React, когда: + +- несколько компонентов React зависят от данных Scheduler +- нужна предсказуемая интеграция глобального состояния +- нужен простой undo/redo в состояниях приложения + +Используйте модель, управляемую Scheduler, когда: + +- React в основном отвечает за оболочку/макет +- вы предпочитаете управляемые Scheduler изменения во время выполнения +- серверный транспорт является основным механизмом синхронизации + +## Что дальше + +- [Обзор React Scheduler](integrations/react/overview.md#bindingdata) +- [Настройка React Scheduler](integrations/react/configuration-props.md) +- [Интеграция с сервером](guides/server-integration.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/integrations/react/state/valtio.md b/i18n/ru/docusaurus-plugin-content-docs/current/integrations/react/state/valtio.md new file mode 100644 index 00000000..d100dfcf --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/integrations/react/state/valtio.md @@ -0,0 +1,587 @@ +--- +sidebar_label: Valtio +title: Использование React Scheduler с Valtio +description: Управляйте состоянием React Scheduler с помощью прокси-хранилища Valtio, применяйте правки пользователей через data.save и добавляйте откат/повтор на основе снимков. +--- + +# Учебник React Scheduler и Valtio + +В этом руководстве показано, как отрисовать **React Scheduler** в приложении на Vite + React + TypeScript и управлять его состоянием с помощью **Valtio**. Вы будете хранить события, текущую дату и активный просмотр в прокси-хранилище Valtio, а затем направлять правки пользователей через колбэк Scheduler`а `data.save`. + +К концу руководства у вас будет Scheduler со следующим функционалом: + +- многофункциональная панель инструментов (переключатель вида, навигация по дате, отмена/повтор, переключатель режима только чтения) +- управляемая хранилищем CRUD-событий (создание/обновление/удаление) +- откат/повтор на основе снимков (события + конфигурация) + +:::note +Полный исходный код доступен [на GitHub](https://github.com/nicetip/react-scheduler-valtio-starter). +::: + +## Требования + +- основы React + TypeScript +- основы Vite +- базовое понимание Valtio +- Рекомендуется: ознакомиться с привязкой данных в React Scheduler и `data.save` в [документации React Scheduler: Привязка данных](integrations/react/state/state-management-basics.md) + +## Создание проекта + +Создайте проект на Vite + React + TypeScript: + +~~~bash +npm create vite@latest scheduler-valtio-demo -- --template react-ts +cd scheduler-valtio-demo +~~~ + +## Установка зависимостей + +В этом руководстве используются: + +- **Valtio** для управления состоянием +- **Material UI** для панели инструментов + +Установите пакеты: + +~~~bash +npm install valtio @mui/material @mui/icons-material @emotion/react @emotion/styled +~~~ + +Если вы используете Yarn: + +~~~bash +yarn add valtio @mui/material @mui/icons-material @emotion/react @emotion/styled +~~~ + +## Установка React Scheduler + +Установите React Scheduler согласно руководству по установке [React Scheduler installation guide](integrations/react/installation.md). + +В этом руководстве используется evaluative-пакет: + +```bash +npm install @dhtmlx/trial-react-scheduler +``` + +или + +```bash +yarn add @dhtmlx/trial-react-scheduler +``` + +Если вы already используете Professional-пакет, замените `@dhtmlx/trial-react-scheduler` на `@dhx/react-scheduler` в командах и импортах. + +## Подготовка стилей приложения + +React Scheduler ожидает родительский контейнер с детерминированной высотой. Замените стандартные стили в `src/App.css` на: + +~~~css title="src/App.css" +#root { + margin: 0; + padding: 0; + height: 100%; + width: 100%; +} +~~~ + +## Добавление начальных данных + +Создайте `src/seed/data.ts` с небольшим набором данных и значениями по умолчанию для вида/даты: + +~~~ts title="src/seed/data.ts" +export const seedEvents = [ + { + id: 1, + start_date: "2025-08-11T02:00:00Z", + end_date: "2025-08-11T10:20:00Z", + text: "Product Strategy Hike", + }, + { + id: 2, + start_date: "2025-08-12T06:00:00Z", + end_date: "2025-08-12T11:00:00Z", + text: "Tranquil Tea Time", + }, + { + id: 3, + start_date: "2025-08-15T03:00:00Z", + end_date: "2025-08-15T08:00:00Z", + text: "Demo and Showcase", + }, + { + id: 4, + start_date: "2025-08-12T11:30:00Z", + end_date: "2025-08-12T19:00:00Z", + text: "Sprint Review and Retreat", + }, +]; + +export const seedDate = Date.parse("2025-08-15T00:00:00Z"); + +export type SchedulerView = "day" | "week" | "month"; +export const seedView: SchedulerView = "week"; +~~~ + +:::note +Сопроводительная демо-страница содержит дополнительные события для более богатой визуализации. +::: + +## Создание хранилища Valtio + +Создайте `src/store.ts`. Это хранилище содержит: + +- `events` (массив событий, передаваемый в Scheduler) +- `currentDate` и `view` (также передаваемые как пропсы) +- `config` (конфигурационный объект Scheduler, включая `readonly`) +- `_past` / `_future` стеки для истории undo/redo + +Ключевая особенность — история на основе снимков: мы сохраняем глубокие копии снимков, чтобы undo/redo не держали ссылки на изменяемые массивы. Навигация (`setCurrentDate`/`setView`) намеренно не подлежит undo — только действия, изменяющие данные (CRUD, изменения конфигурации) добавляют в стек истории. + +~~~ts title="src/store.ts" +import { proxy, snapshot } from "valtio"; +import { seedEvents, seedView, seedDate, type SchedulerView } from "./seed/data"; + +export type SchedulerEvent = { + id: string | number; + start_date: string; + end_date: string; + text: string; + [key: string]: unknown; +}; + +export type SchedulerConfig = Record; + +type HistorySnapshot = { + events: SchedulerEvent[]; + config: SchedulerConfig; +}; + +const deepClone = (value: T): T => { + if (typeof structuredClone === "function") { + return structuredClone(value); + } + + return JSON.parse(JSON.stringify(value)) as T; +}; + +const normalizeId = (value: unknown) => String(value); + +export const createSchedulerStore = () => { + const state = proxy({ + events: seedEvents as SchedulerEvent[], + currentDate: seedDate as number, + view: seedView as SchedulerView, + config: {} as SchedulerConfig, + + // Undo/redo history stacks and capacity + _past: [] as HistorySnapshot[], + _future: [] as HistorySnapshot[], + _cap: 50, + }); + + const getHistorySnapshot = (): HistorySnapshot => { + const snap = snapshot(state); + + return { + events: deepClone(snap.events as SchedulerEvent[]), + config: deepClone(snap.config as SchedulerConfig), + }; + }; + + const recordHistory = () => { + const snapshotItem = getHistorySnapshot(); + + state._past = [...state._past.slice(-state._cap + 1), snapshotItem]; + state._future = []; + }; + + const actions = { + updateEvent: (payload: Partial & { id?: string | number }) => { + const payloadId = payload.id; + + if (payloadId === undefined || payloadId === null) { + return; + } + + recordHistory(); + const normalizedPayloadId = normalizeId(payloadId); + + state.events = state.events.map((eventItem) => { + if (normalizeId(eventItem.id) !== normalizedPayloadId) { + return eventItem; + } + + return { ...eventItem, ...payload, id: eventItem.id }; + }); + }, + + createEvent: (payload: Partial) => { + recordHistory(); + + const newEventId = `id_${Date.now().toString()}`; + const newEvent = { ...payload, id: newEventId } as SchedulerEvent; + + state.events = [...state.events, newEvent]; + return newEvent; + }, + + deleteEvent: (id: string | number) => { + recordHistory(); + const normalizedId = normalizeId(id); + + state.events = state.events.filter((eventItem) => { + return normalizeId(eventItem.id) !== normalizedId; + }); + }, + + // Navigation is not an undoable user action in this demo. + setCurrentDate: (date: number) => { + state.currentDate = date; + }, + + // Navigation is not an undoable user action in this demo. + setView: (view: SchedulerView) => { + state.view = view; + }, + + updateConfig: (partial: Partial) => { + recordHistory(); + state.config = { ...state.config, ...partial }; + }, + + undo: () => { + if (state._past.length === 0) return; + + const previous = state._past[state._past.length - 1]; + const current = getHistorySnapshot(); + + state._past = state._past.slice(0, -1); + state._future = [current, ...state._future]; + + state.events = previous.events; + state.config = previous.config; + }, + + redo: () => { + if (state._future.length === 0) return; + + const next = state._future[0]; + const current = getHistorySnapshot(); + + state._future = state._future.slice(1); + state._past = [...state._past.slice(-state._cap + 1), current]; + + state.events = next.events; + state.config = next.config; + }, + }; + + return { state, actions }; +}; + +export const schedulerStore = createSchedulerStore(); +export default schedulerStore; +~~~ + +## Создание повторно используемой панели инструментов + +Создайте `src/components/Toolbar.tsx`. Это небольшая панель MUI, которая позволяет: + +- переключать вид (day/week/month) +- перемещаться назад/к сегодняшнему дню/вперед +- отменять/повторить +- переключать режим чтения + +~~~tsx title="src/components/Toolbar.tsx" +import { ButtonGroup, Button, Typography, Stack, FormControlLabel, Switch } from "@mui/material"; +import UndoIcon from "@mui/icons-material/Undo"; +import RedoIcon from "@mui/icons-material/Redo"; +import React from "react"; + +import type { SchedulerView } from "../seed/data"; + +export interface ToolbarProps { + currentView: SchedulerView; + currentDate: Date; + isReadOnly: boolean; + canUndo: boolean; + canRedo: boolean; + onUndo?: () => void; + onRedo?: () => void; + onNavigate?: (action: "prev" | "next" | "today") => void; + onReadOnlyChange?: (value: boolean) => void; + setView: (view: SchedulerView) => void; +} + +export default React.memo(function Toolbar({ + currentView, + currentDate, + isReadOnly, + canUndo, + canRedo, + onUndo, + onRedo, + onNavigate, + onReadOnlyChange, + setView, +}: ToolbarProps) { + return ( + + + {(["day", "week", "month"] as const).map((l) => ( + + ))} + + + + + + onReadOnlyChange?.(e.target.checked)} + inputProps={{ "aria-label": "Toggle read-only" }} + /> + } + /> + + + {new Date(currentDate)?.toLocaleDateString(undefined, { weekday: "short", month: "short", day: "numeric" })} + + + + + + + + ); +}); +~~~ + +## Отрисовка React Scheduler и подключение к Valtio + +Создайте `src/components/Scheduler.tsx`. Этот компонент: + +- подписывается на прокси Valtio через `useSnapshot` +- передает `events`, `date`, `view` и `config` как пропсы React Scheduler +- реализует `data.save` через мост-обработчик `switch/case`, который маршрутизирует изменения в действия хранилища +- обеспечивает работу undo/redo и переключатель конфигурации `readonly` +- скрывает встроенную навигационную панель и использует вместо нее пользовательскую панель инструментов + +~~~tsx title="src/components/Scheduler.tsx" +import { useCallback, useMemo } from "react"; + +// Trial import: +import ReactScheduler from "@dhtmlx/trial-react-scheduler"; +import "@dhtmlx/trial-react-scheduler/dist/react-scheduler.css"; + +// Pro import: +// import ReactScheduler from "@dhx/react-scheduler"; +// import "@dhx/react-scheduler/dist/react-scheduler.css"; + +import { useSnapshot } from "valtio"; + +import Toolbar from "./Toolbar"; +import schedulerStore from "../store"; +import type { SchedulerEvent } from "../store"; +import type { SchedulerView } from "../seed/data"; + +export default function DemoValtioScheduler() { + const snap = useSnapshot(schedulerStore.state); + + const canUndo = snap._past.length > 0; + const canRedo = snap._future.length > 0; + const isReadOnly = Boolean((snap.config as { readonly?: unknown }).readonly); + + const activeDate = useMemo(() => { + return new Date(snap.currentDate); + }, [snap.currentDate]); + + const handleSetCurrentDate = useCallback((date: number) => { + schedulerStore.actions.setCurrentDate(date); + }, []); + + const handleSetView = useCallback((view: SchedulerView) => { + schedulerStore.actions.setView(view); + }, []); + + const handleUndo = useCallback(() => { + schedulerStore.actions.undo(); + }, []); + + const handleRedo = useCallback(() => { + schedulerStore.actions.redo(); + }, []); + + const handleReadOnlyChange = useCallback((value: boolean) => { + schedulerStore.actions.updateConfig({ readonly: value }); + }, []); + + const handleDateNavigation = useCallback( + (action: "prev" | "next" | "today") => { + if (action === "today") { + handleSetCurrentDate(Date.now()); + return; + } + + const step = action === "next" ? 1 : -1; + const date = new Date(snap.currentDate); + + if (snap.view === "day") { + date.setDate(date.getDate() + step); + } else if (snap.view === "week") { + date.setDate(date.getDate() + step * 7); + } else { + date.setMonth(date.getMonth() + step); + } + + handleSetCurrentDate(date.getTime()); + }, + [handleSetCurrentDate, snap.currentDate, snap.view] + ); + + // Мост между Scheduler и Valtio + const dataBridge = useMemo(() => { + return { + save: (entity: string, action: string, payload: unknown, id: unknown) => { + if (entity !== "event") return; + + switch (action) { + case "update": { + const eventData = payload && typeof payload === "object" ? (payload as Record) : {}; + const eventId = (eventData as Record).id ?? id; + if (eventId == null) { + console.warn("Update called without an id", { payload, id }); + return; + } + + const eventWithId = { ...eventData, id: eventId } as Partial & Pick; + return schedulerStore.actions.updateEvent(eventWithId); + } + case "create": + return schedulerStore.actions.createEvent(payload as Omit, "id">); + case "delete": { + const deleteId = + payload && typeof payload === "object" + ? (payload as Record).id ?? id + : payload ?? id; + if (deleteId == null) { + console.warn("Delete called without an id", { payload, id }); + return; + } + return schedulerStore.actions.deleteEvent(deleteId as SchedulerEvent["id"]); + } + default: + console.warn(`Unknown action: ${action}`); + return; + } + }, + }; + }, []); + + const handleViewChange = useCallback( + (mode: string, date: Date) => { + const nextView: SchedulerView = mode === "day" || mode === "week" || mode === "month" ? mode : "month"; + schedulerStore.actions.setView(nextView); + schedulerStore.actions.setCurrentDate(date.getTime()); + }, + [] + ); + + const memoizedXY = useMemo(() => ({ nav_height: 0 }), []); + + return ( +
+ + + +
+ ); +} +~~~ + +## Монтирование Scheduler + +Обновите `src/App.tsx`: + +~~~tsx title="src/App.tsx" +import Scheduler from "./components/Scheduler"; +import "./App.css"; + +function App() { + return ; +} + +export default App; +~~~ + +## Запуск приложения + +Запустите сервер разработки: + +~~~bash +npm run dev +~~~ + +или: + +~~~bash +yarn dev +~~~ + +## Итоги + +В этом руководстве вы: + +- создали проект на Vite + React +- отобразили React Scheduler в детерминированном контейнере на всю доступную высоту +- смоделировали `events`, `view`, `currentDate` и `config` в одном прокси-хранилище Valtio +- реализовали откат/повтор на основе снимков с помощью стэков `_past`/`_future` (события + конфигурация) +- маршрутизировали все изменения Scheduler через `data.save` в действия хранилища +- добавили переключатель режима чтения, который блокирует редактирование Scheduler + +Это сохраняет компонент Scheduler декларативным (состояние → пропсы), при этом хранилище обладает всей логикой мутации и истории. + +## Что дальше + +- Изучите две поддерживаемые модели привязки данных в [документации React Scheduler: Привязка данных](integrations/react/state/state-management-basics.md) +- Добавляйте собственные шаблоны и UI, используя проп `templates` +- Изучите ту же схему с другими менеджерами состояний: + - [Использование React Scheduler с Redux Toolkit](integrations/react/state/redux-toolkit.md) + - [Использование React Scheduler с MobX](integrations/react/state/mobx.md) + - [Использование React Scheduler с XState](integrations/react/state/xstate.md) + - [Использование React Scheduler с Zustand](integrations/react/state/zustand.md) + - [Использование React Scheduler с Jotai](integrations/react/state/jotai.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/integrations/react/state/xstate.md b/i18n/ru/docusaurus-plugin-content-docs/current/integrations/react/state/xstate.md new file mode 100644 index 00000000..e3493cd3 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/integrations/react/state/xstate.md @@ -0,0 +1,549 @@ +--- +title: React Scheduler - XState Руководство +sidebar_label: XState +description: "Интегрируйте React Scheduler с XState. Рассматриваются моделирование состояния планировщика в машине состояний, обработка CRUD через data.save и добавление undo/redo + пользовательской навигации." +--- + +# React Scheduler - XState Руководство + +Это руководство показывает, как подключить **DHTMLX React Scheduler** к машине состояний **XState**. Вы будете хранить события и состояние UI (view/date/config) в машине, направлять редактирования Scheduler через `data.save`, и добавлять **undo/redo** на основе истории-снимков. + +:::note +Полный исходный код [доступен на GitHub](https://github.com/DHTMLX/react-scheduler-xstate-starter). +::: + +## Требования + +- Node.js (рекомендуется LTS) +- Основы React + TypeScript +- Основы XState (машины, события, действия). Если нужно освежить память, см. документацию XState: https://stately.ai/docs/xstate + +## Быстрая настройка - создание проекта + +Создайте проект Vite + React + TS: + +~~~bash +npm create vite@latest scheduler-xstate-demo -- --template react-ts +cd scheduler-xstate-demo +npm install +~~~ + +Установите привязки XState + React: + +~~~bash +npm install xstate @xstate/react +~~~ + +Установите Material UI (используется для панели инструментов в демо): + +~~~bash +npm install @mui/material @mui/icons-material @emotion/react @emotion/styled +~~~ + +### Установка React Scheduler + +Установите React Scheduler, как описано в [руководстве по установке React Scheduler](integrations/react/installation.md). + +В этом руководстве мы используем пакет оценки: + +```bash +npm install @dhtmlx/trial-react-scheduler +``` + +или + +```bash +yarn add @dhtmlx/trial-react-scheduler +``` + +Если вы уже используете Professional пакет, замените `@dhtmlx/trial-react-scheduler` на `@dhx/react-scheduler` в командах и импортах. + +Запустите сервер разработки: + +~~~bash +npm run dev +~~~ + +:::note +Чтобы Scheduler занимал всю страницу, удалите дефолтные стили из `src/App.css` и добавьте: + +~~~css +#root { + margin: 0; + padding: 0; + height: 100%; + width: 100%; +} + +body { + margin: 0; +} +~~~ +::: + +## Настройка образца данных + +Создайте `src/seed/data.ts` с несколькими событиями и начальным UI-состоянием. Обратите внимание, что `date` хранится как **число** (timestamp), чтобы контекст машины оставался сериализуемым. + +~~~ts title="src/seed/data.ts" +export type SchedulerView = "day" | "week" | "month"; +export type SchedulerConfig = Record; + +export interface SchedulerEvent { + id: string | number; + start_date: string; + end_date: string; + text: string; + [key: string]: unknown; +} + +export const seedEvents: SchedulerEvent[] = [ + { id: 1, classname: "blue", start_date: "2025-08-11T02:00:00Z", end_date: "2025-08-11T10:20:00Z", text: "Product Strategy Hike" }, + { id: 2, classname: "violet", start_date: "2025-08-12T06:00:00Z", end_date: "2025-08-12T11:00:00Z", text: "Tranquil Tea Time" }, + { id: 3, classname: "blue", start_date: "2025-08-15T03:00:00Z", end_date: "2025-08-15T08:00:00Z", text: "Demo and Showcase" }, +]; + +export const seedDate = Date.parse("2025-08-15T00:00:00Z"); +export const seedView: SchedulerView = "week"; +~~~ + +- `SchedulerEvent` использует индекатор сигнатуры, чтобы Scheduler мог добавлять дополнительные поля во время выполнения. + +:::note +Сопутствующий демо-проект включает дополнительные события с цветовыми классами для более насыщенной визуализации. +::: + +## Настройка машины XState + +Создайте файл `src/machine.ts`. Эта машина хранит: + +- `events` (данные Scheduler) +- `date` (как timestamp) +- `view` (`day | week | month`) +- `config` (конфигурация Scheduler) +- `past` / `future` (массивы снимков для undo/redo) + +Undo/redo интегрированы напрямую в машину с использованием снимков. Перед каждым действием, модифицирующим данные, `saveToHistory` сохраняет снимок текущих событий, вида и даты. Переходы `undo` и `redo` меняют текущее состояние на снимок из истории. + +~~~ts title="src/machine.ts" +import { createMachine, assign } from "xstate"; +import { + seedEvents, + seedView, + seedDate, + type SchedulerView, + type SchedulerEvent, + type SchedulerConfig, +} from "./seed/data"; + +export interface SchedulerMachineContext { + events: SchedulerEvent[]; + view: SchedulerView; + date: number; + config: SchedulerConfig; + past: SchedulerSnapshot[]; + future: SchedulerSnapshot[]; + maxHistory: number; +} + +interface SchedulerSnapshot { + events: SchedulerEvent[]; + view: SchedulerView; + date: number; +} + +type SchedulerMachineEvent = + | { type: "SET_VIEW"; view: SchedulerView } + | { type: "SET_DATE"; date: number } + | { type: "CREATE_EVENT"; event: SchedulerEvent } + | { type: "UPDATE_EVENT"; event: SchedulerEvent } + | { type: "DELETE_EVENT"; id: string | number } + | { type: "UNDO" } + | { type: "REDO" }; + +const deepClone = (value: T): T => { + if (typeof structuredClone === "function") { + return structuredClone(value); + } + return JSON.parse(JSON.stringify(value)) as T; +}; + +const takeSnapshot = (ctx: SchedulerMachineContext): SchedulerSnapshot => ({ + events: deepClone(ctx.events), + view: ctx.view, + date: ctx.date, +}); + +export const schedulerMachine = createMachine({ + id: "scheduler", + types: { + context: {} as SchedulerMachineContext, + events: {} as SchedulerMachineEvent, + }, + context: { + events: seedEvents, + view: seedView, + date: seedDate, + config: {}, + past: [], + future: [], + maxHistory: 50, + }, + initial: "ready", + states: { + ready: { + on: { + SET_VIEW: { actions: ['saveToHistory', 'setView'] }, + SET_DATE: { actions: ['saveToHistory', 'setDate'] }, + CREATE_EVENT: { actions: ['saveToHistory', 'createEvent'] }, + UPDATE_EVENT: { actions: ['saveToHistory', 'updateEvent'] }, + DELETE_EVENT: { actions: ['saveToHistory', 'deleteEvent'] }, + UNDO: { + guard: ({ context }) => context.past.length > 0, + actions: ['undo'] + }, + REDO: { + guard: ({ context }) => context.future.length > 0, + actions: ['redo'] + }, + } + } + }, +}, + { + actions: { + saveToHistory: assign({ + past: ({ context }) => { + const newPast = [...context.past, takeSnapshot(context)]; + if (newPast.length > context.maxHistory) { + newPast.shift(); + } + return newPast; + }, + future: () => [], + }), + setView: assign({ + view: ({ event }) => (event as { type: "SET_VIEW"; view: SchedulerView }).view + }), + setDate: assign({ + date: ({ event }) => (event as { type: "SET_DATE"; date: number }).date + }), + createEvent: assign({ + events: ({ context, event }) => { + const newId = `id_${Date.now()}`; + const newEvent = { ...(event as { type: "CREATE_EVENT"; event: SchedulerEvent }).event, id: newId }; + return [...context.events, newEvent]; + } + }), + updateEvent: assign({ + events: ({ context, event }) => + context.events.map(ev => + String(ev.id) === String((event as { type: "UPDATE_EVENT"; event: SchedulerEvent }).event.id) + ? { ...ev, ...(event as { type: "UPDATE_EVENT"; event: SchedulerEvent }).event } + : ev + ) + }), + deleteEvent: assign({ + events: ({ context, event }) => + context.events.filter(ev => String(ev.id) !== String((event as { type: "DELETE_EVENT"; id: string | number }).id)) + }), + undo: assign(({ context }) => { + const currentState = takeSnapshot(context); + const previousState = context.past[context.past.length - 1]; + const newPast = context.past.slice(0, -1); + const newFuture = [currentState, ...context.future]; + + return { + ...previousState, + past: newPast, + future: newFuture, + }; + }), + redo: assign(({ context }) => { + const currentState = takeSnapshot(context); + const nextState = context.future[0]; + const newFuture = context.future.slice(1); + const newPast = [...context.past, currentState]; + + return { + ...nextState, + past: newPast, + future: newFuture, + }; + }) + } + } +); +~~~ + +На этом этапе машина обеспечивает: + +- Единственный источник правды для пропсов Scheduler +- Undo/redo на основе снимков (история содержит копии, а не ссылки) +- Единичный событие `SET_DATE` — логика навигации (пред/следующая/сегодня) находится в компоненте + +:::tip +Если вы целитесь только в современные браузеры, помощник `deepClone()` по умолчанию предпочитает `structuredClone()` и падает на JSON-клонование для устаревших окружений. +::: + +## Построение компонента панели управления + +Создайте `src/components/Toolbar.tsx`. Это небольшая панель MUI, которая: + +- переключает представление (day/week/month) +- позволяет переходы prev/today/next +- поддерживает undo/redo с состоянием отключения, когда история пуста + +~~~tsx title="src/components/Toolbar.tsx" +import { ButtonGroup, Button, Typography, Stack } from '@mui/material'; +import UndoIcon from '@mui/icons-material/Undo'; +import RedoIcon from '@mui/icons-material/Redo'; +import React from 'react'; +import type { SchedulerView } from "../seed/data"; + +export interface ToolbarProps { + currentView: SchedulerView; + currentDate: Date; + canUndo: boolean; + canRedo: boolean; + onUndo?: () => void; + onRedo?: () => void; + onNavigate?: (action: 'prev' | 'next' | 'today') => void; + setView: (view: SchedulerView) => void; +} + +export default React.memo(function Toolbar({ currentView, currentDate, canUndo, canRedo, onUndo, onRedo, onNavigate, setView }: ToolbarProps) { + return ( + + + {(["day", "week", "month"] as const).map(l => ( + + ))} + + + + + + + {new Date(currentDate)?.toLocaleDateString(undefined, { weekday: "short", month: "short", day: "numeric" })} + + + + + + + + ); +}); +~~~ + +## Подключение Scheduler к XState + +Создайте `src/components/Scheduler.tsx`. Этот компонент: + +- читает `events/view/date/config` из контекста машины XState +- предоставляет колбэк `data.save`, который отправляет события машине +- реализует undo/redo и навигацию +- скрывает встроенную панель навигации и использует вместо нее нашу собственную панель +- применяет цветовые классы через шаблон `event_class` + +~~~tsx title="src/components/Scheduler.tsx" +import { useCallback, useMemo } from "react"; +import { useMachine } from "@xstate/react"; +import ReactScheduler from "@dhtmlx/trial-react-scheduler"; +import "@dhtmlx/trial-react-scheduler/dist/react-scheduler.css"; +import "./styles.css"; +import Toolbar from "./Toolbar"; +import { schedulerMachine } from "../machine"; +import { type SchedulerView } from "../seed/data"; + +export default function DemoXStateScheduler() { + const [state, send] = useMachine(schedulerMachine); + + const canUndo = state.context.past.length > 0; + const canRedo = state.context.future.length > 0; + const activeDate = useMemo(() => new Date(state.context.date), [state.context.date]); + + const templates = useMemo(() => ({ + event_class: (_start: Date, _end: Date, event: Record | null) => { + if (event == null) { + return ""; + } + if (typeof event.classname === "string") { + return event.classname; + } + return ""; + } + }), []); + + const data = useMemo(() => ({ + save: (entity: string, action: string, payload: Record, id: string | number) => { + if (entity !== "event") { + return; + } + switch (action) { + case "create": + send({ type: "CREATE_EVENT", event: payload as never }); + break; + case "update": + send({ type: "UPDATE_EVENT", event: payload as never }); + break; + case "delete": + send({ type: "DELETE_EVENT", id }); + break; + default: + console.warn(`Unhandled action: ${action}`); + } + } + }), [send]); + + const handleDateNavigation = useCallback((action: 'prev' | 'next' | 'today') => { + if (action === 'today') { + send({ type: "SET_DATE", date: Date.now() }) + return; + } + const step = action === 'next' ? 1 : -1; + const date = new Date(state.context.date); + + if (state.context.view === "day") { + date.setDate(date.getDate() + step); + } else if (state.context.view === "week") { + date.setDate(date.getDate() + step * 7); + } else { + date.setMonth(date.getMonth() + step); + } + send({ type: "SET_DATE", date: date.getTime() }) + }, [state.context.date, state.context.view, send]); + + const handleUndo = useCallback(() => send({ type: "UNDO" }), [send]); + const handleRedo = useCallback(() => send({ type: "REDO" }), [send]); + const handleSetView = useCallback((view: SchedulerView) => send({ type: "SET_VIEW", view: view }), [send]); + const memoizedXY = useMemo(() => ({ nav_height: 0 }), []); + + return ( +
+ + +
+ ); +} +~~~ + +Некоторые детали, на которые стоит обратить внимание: + +- Контекст машины является единственным источником правды для `events`, `view` и `date`. +- Обработчик `data.save` преобразует изменения Scheduler, зависящие от сущности, в события машины. +- Мы скрываем встроенную панель навигации Scheduler (`xy={{ nav_height: 0 }}`) и заменяем ее собственной панелью. +- Шаблон `event_class` читает поле `classname` у каждого события и применяет его как CSS-класс. + +## Стили цветов событий + +Создайте файл `src/components/styles.css` с CSS-классами, которые соответствуют значениям `classname` в исходных данных. Шаблон `event_class` применяет эти классы к каждому элементу события. + +~~~css title="src/components/styles.css" +/* + Окраска событий. + Scheduler применяет значение, возвращаемое из templates.event_class, к контейнеру события. + В исходных данных используется `classname`, поэтому мы сопоставляем его через шаблон и стилизуем классы здесь. +*/ + +.blue { + background: #3b82f6 !important; + border-color: #2563eb !important; + color: #ffffff !important; +} + +.green { + background: #22c55e !important; + border-color: #16a34a !important; + color: #ffffff !important; +} + +.violet { + background: #a855f7 !important; + border-color: #9333ea !important; + color: #ffffff !important; +} + +.yellow { + background: #f59e0b !important; + border-color: #d97706 !important; + color: #111827 !important; +} +~~~ + +## Интеграция Scheduler в приложение + +Обновите `src/App.tsx` и `src/App.css`: + +~~~tsx title="src/App.tsx" +import Scheduler from "./components/Scheduler"; +import "./App.css"; + +function App() { + return ( + + ); +} +export default App; +~~~ + +~~~css title="src/App.css" +#root, body { + margin: 0; + padding: 0; + height: 100%; + width: 100%; +} +~~~ + +## Итоги + +Теперь React Scheduler полностью управляется XState: + +- Scheduler читает `events`, `view`, `date` и `config` из контекста машины XState +- Редактирования пользователя маршрутизируются через `data.save` -> события машины для CRUD +- UI синхронизирован благодаря тому, что Scheduler получает обновленное состояние через пропсы +- Undo/redo реализованы через историю-снимков с использованием условий `guard` +- Пользовательская панель инструментов обеспечивает переключение представления, навигацию по дате и undo/redo с отключением + +## Что дальше + +- Пересмотрите концепции, лежащие в основе этого примера, в [Основы привязки данных и управления состоянием](integrations/react/state/state-management-basics.md) +- Изучите конфигурацию Scheduler и_options для templating в [Обзор React Scheduler](integrations/react/overview.md) +- Добавьте персистентность (загрузку/сохранение событий через API) путем отправки асинхронных событий в машину +- Рассмотрите тот же паттерн с другими менеджерами состояния: + - [Использование React Scheduler с Redux Toolkit](integrations/react/state/redux-toolkit.md) + - [Использование React Scheduler с MobX](integrations/react/state/mobx.md) + - [Использование React Scheduler с Zustand](integrations/react/state/zustand.md) + - [Использование React Scheduler с Jotai](integrations/react/state/jotai.md) + - [Использование React Scheduler с Valtio](integrations/react/state/valtio.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/integrations/react/state/zustand.md b/i18n/ru/docusaurus-plugin-content-docs/current/integrations/react/state/zustand.md new file mode 100644 index 00000000..b356090d --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/integrations/react/state/zustand.md @@ -0,0 +1,503 @@ +--- +title: React Scheduler — Руководство Zustand +sidebar_label: Zustand +description: Узнайте, как интегрировать DHTMLX React Scheduler с Zustand, включая операции CRUD над событиями, синхронизацию вида/даты и отмену/повтор действий. +--- + +# React Scheduler — Руководство Zustand + +Это руководство показывает, как связать **DHTMLX React Scheduler** с хранилищем **Zustand**. Вы будете хранить события и состояние интерфейса пользователя (вид, дата, конфигурация) в Zustand, направлять правки Scheduler через `data.save` и добавлять **undo/redo** с помощью истории на основе снимков. + +:::note +Полный исходный код [доступен на GitHub](https://github.com/DHTMLX/react-scheduler-zustand-starter). +::: + +## Требования + +- Node.js (рекомендуется LTS) +- Основы React + TypeScript +- Знакомство с хуками и селекторами Zustand. Если нужен обзор, см. документацию Zustand: https://zustand.docs.pmnd.rs/ + +## Быстрая настройка — создание проекта + +Создайте проект на Vite + React + TS: + +~~~bash +npm create vite@latest scheduler-zustand-demo -- --template react-ts +cd scheduler-zustand-demo +npm install +~~~ + +Установите Zustand: + +~~~bash +npm install zustand +~~~ + +Установите Material UI (используется для панели инструментов демо): + +~~~bash +npm install @mui/material @mui/icons-material @emotion/react @emotion/styled +~~~ + +### Установка React Scheduler + +Установите React Scheduler так, как описано в [руководстве по установке React Scheduler](integrations/react/installation.md). + +В этом руководстве мы используем пакет trial: + +```bash +npm install @dhtmlx/trial-react-scheduler +``` + +или + +```bash +yarn add @dhtmlx/trial-react-scheduler +``` + +Если вы уже используете Professional пакет, замените `@dhtmlx/trial-react-scheduler` на `@dhx/react-scheduler` в командах и импортах. + +Запустите сервер разработки: + +~~~bash +npm run dev +~~~ + +:::note +Чтобы Scheduler занимал всю страницу, удалите базовые стили из `src/App.css` и добавьте: + +~~~css +#root { + margin: 0; + padding: 0; + height: 100%; + width: 100%; +} + +body { + margin: 0; +} +~~~ +::: + +## Определение общих типов + +Создайте `src/types.ts`. Эти типы используются совместно хранилищем и компонентами: + +~~~ts +export type SchedulerView = "day" | "week" | "month"; + +export interface SchedulerEvent { + id: string | number; + start_date: string; + end_date: string; + text: string; + + // Scheduler может прикреплять дополнительные поля (например, пропсы). Держим демо достаточно гибким. + [key: string]: unknown; +} + +export type SchedulerConfig = Record; + +export interface SchedulerSnapshot { + events: SchedulerEvent[]; +} +~~~ + +- `SchedulerEvent` использует сигнатуру индекса, чтобы Scheduler мог добавлять дополнительные поля во время выполнения. +- `SchedulerSnapshot` фиксирует данные, необходимые для undo/redo (события). + +## Настройка примерных данных + +Создайте `src/seed/data.ts` с несколькими событиями и начальными данными UI. Обратите внимание, что `currentDate` хранится как **число** (timestamp), чтобы состояние хранилища оставалось сериализуемым. + +~~~ts +export const seedEvents = [ + { id: 1, start_date: "2025-08-11T02:00:00Z", end_date: "2025-08-11T10:20:00Z", text: "Product Strategy Hike" }, + { id: 2, start_date: "2025-08-12T06:00:00Z", end_date: "2025-08-12T11:00:00Z", text: "Tranquil Tea Time" }, + { id: 3, start_date: "2025-08-15T03:00:00Z", end_date: "2025-08-15T08:00:00Z", text: "Demo and Showcase" }, +]; + +export const seedDate = Date.parse("2025-08-15T00:00:00Z"); +export const seedView = "week"; +~~~ + +:::note +Сопутствующая демонстрация включает дополнительные события для более насыщенной визуализации. +::: + +## Создание хранилища Zustand + +Создайте `src/store.ts`. Это хранилище содержит: + +- `events` (данные Scheduler) +- `currentDate` (как временная метка) +- `view` (`day | week | month`) +- `config` (конфигурационный объект Scheduler) +- `past` / `future` (массивы снимков для undo/redo) + +Undo/redo интегрированы напрямую в хранилище с использованием снимков. Перед каждым действием, изменяющим данные, `pushHistory` сохраняет снимок текущих событий. Действия `undo` и `redo` меняют текущее состояние на снимок из истории. + +~~~ts +import { create } from "zustand"; + +import { seedDate, seedEvents, seedView } from "./seed/data"; +import type { SchedulerConfig, SchedulerEvent, SchedulerSnapshot, SchedulerView } from "./types"; + +export interface SchedulerStoreState { + events: SchedulerEvent[]; + currentDate: number; + view: SchedulerView; + config: SchedulerConfig; + + past: SchedulerSnapshot[]; + future: SchedulerSnapshot[]; + maxHistory: number; + + setCurrentDate: (date: number) => void; + setView: (view: SchedulerView) => void; + + createEvent: (event: Omit & Partial>) => SchedulerEvent; + updateEvent: (event: Partial & Pick) => void; + deleteEvent: (id: SchedulerEvent["id"]) => void; + + undo: () => void; + redo: () => void; +} + +const deepCopy = (value: T): T => { + return JSON.parse(JSON.stringify(value)) as T; +}; + +const createSnapshot = (events: SchedulerEvent[]): SchedulerSnapshot => ({ + events: deepCopy(events), +}); + +// Simulate receiving an ID from a backend. +const generateId = () => `id_${Date.now().toString()}`; + +export const useSchedulerStore = create((set, get) => { + const pushHistory = () => { + const { events, past, maxHistory } = get(); + const snapshot = createSnapshot(events); + + set({ + past: [...past.slice(-maxHistory + 1), snapshot], + future: [], + }); + }; + + return { + events: seedEvents as unknown as SchedulerEvent[], + currentDate: seedDate, + view: seedView as SchedulerView, + config: {}, + + past: [], + future: [], + maxHistory: 50, + + setCurrentDate: (date) => set({ currentDate: date })), + setView: (view) => set({ view }), + + createEvent: (event) => { + pushHistory(); + + const id = event.id != null ? event.id : generateId(); + const newEvent: SchedulerEvent = { ...event, id } as SchedulerEvent; + + set({ events: [...get().events, newEvent] }); + return newEvent; + }, + + updateEvent: (event) => { + const events = get().events; + const index = events.findIndex((e) => String(e.id) === String(event.id)); + if (index === -1) return; + + pushHistory(); + set({ + events: [...events.slice(0, index), { ...events[index], ...event }, ...events.slice(index + 1)], + }); + }, + + deleteEvent: (id) => { + const events = get().events; + const exists = events.some((e) => String(e.id) === String(id)); + if (!exists) return; + + pushHistory(); + set({ events: events.filter((e) => String(e.id) !== String(id)) }); + }, + + undo: () => { + const { past, future, events } = get(); + if (past.length === 0) return; + + const previous = past[past.length - 1]; + set({ + events: previous.events, + past: past.slice(0, -1), + future: [createSnapshot(events), ...future], + }); + }, + + redo: () => { + const { past, future, events } = get(); + if (future.length === 0) return; + + const next = future[0]; + set({ + events: next.events, + past: [...past, createSnapshot(events)], + future: future.slice(1), + }); + }, + }; +}); +~~~ + +## Создание компонента панели инструментов + +Создайте `src/components/Toolbar.tsx`. Это небольшая панель MUI, которая позволяет: + +- переключать вид (day/week/month) +- переходить к предыдущему/к сегодняшнему/к следующему шагу +- undo/redo + +~~~tsx +import { ButtonGroup, Button, Typography, Stack } from "@mui/material"; +import UndoIcon from "@mui/icons-material/Undo"; +import RedoIcon from "@mui/icons-material/Redo"; +import React from "react"; +import type { SchedulerView } from "../types"; + +export interface ToolbarProps { + currentView: SchedulerView; + currentDate: Date; + canUndo: boolean; + canRedo: boolean; + onUndo?: () => void; + onRedo?: () => void; + onNavigate?: (action: "prev" | "next" | "today") => void; + setView: (view: SchedulerView) => void; +} + +export default React.memo(function Toolbar({ + currentView, + currentDate, + canUndo, + canRedo, + onUndo, + onRedo, + onNavigate, + setView, +}: ToolbarProps) { + return ( + + + {(["day", "week", "month"] as const).map((l) => ( + + ))} + + + + + + + {new Date(currentDate)?.toLocaleDateString(undefined, { weekday: "short", month: "short", day: "numeric" })} + + + + + + + + ); +}); +~~~ + +## Подключение Scheduler к Zustand + +Создайте `src/components/Scheduler.tsx`. Этот компонент: + +- читает из хранилища Zustand через селекторы значения `events/view/currentDate/config` +- предоставляет колбэк `data.save`, который вызывает действия хранилища +- возвращает созданные/обновленные сущности из `save`, чтобы Scheduler мог синхронизировать свою внутреннюю логику +- связывает `undo/redo` +- скрывает встроенный навбар и вместо него использует кастомную панель инструментов + +~~~tsx +import { useCallback, useMemo } from "react"; +import ReactScheduler from "@dhtmlx/trial-react-scheduler"; +import "@dhtmlx/trial-react-scheduler/dist/react-scheduler.css"; + +import Toolbar from "./Toolbar"; +import { useSchedulerStore } from "../store"; +import type { SchedulerEvent, SchedulerView } from "../types"; + +export default function DemoZustandScheduler() { + const events = useSchedulerStore((s) => s.events); + const view = useSchedulerStore((s) => s.view); + const currentDate = useSchedulerStore((s) => s.currentDate); + const config = useSchedulerStore((s) => s.config); + + const setView = useSchedulerStore((s) => s.setView); + const setCurrentDate = useSchedulerStore((s) => s.setCurrentDate); + const createEvent = useSchedulerStore((s) => s.createEvent); + const updateEvent = useSchedulerStore((s) => s.updateEvent); + const deleteEvent = useSchedulerStore((s) => s.deleteEvent); + const undo = useSchedulerStore((s) => s.undo); + const redo = useSchedulerStore((s) => s.redo); + + const canUndo = useSchedulerStore((s) => s.past.length > 0); + const canRedo = useSchedulerStore((s) => s.future.length > 0); + + const activeDate = useMemo(() => new Date(currentDate), [currentDate]); + + const handleDateNavigation = useCallback((action: "prev" | "next" | "today") => { + if (action === "today") { + setCurrentDate(Date.now()); + return; + } + + const step = action === "next" ? 1 : -1; + const date = new Date(currentDate); + + if (view === "day") { + date.setDate(date.getDate() + step); + } else if (view === "week") { + date.setDate(date.getDate() + step * 7); + } else { + date.setMonth(date.getMonth() + step); + } + setCurrentDate(date.getTime()); + }, [currentDate, view, setCurrentDate]); + + // Мост Scheduler <-> Zustand: сопоставление CRUD-операций Scheduler с действиями хранилища + const dataBridge = useMemo(() => ({ + save: (entity: string, action: string, payload: unknown, id: unknown) => { + if (entity !== "event") return; + + switch (action) { + case "update": { + const eventData = payload && typeof payload === "object" ? (payload as Record) : {}; + const eventId = (eventData as Record).id ?? id; + if (eventId == null) { + console.warn("Update called without an id", { payload, id }); + return; + } + return updateEvent({ ...eventData, id: eventId } as Partial & Pick); + } + case "create": + return createEvent(payload as Omit); + case "delete": { + const deleteId = + payload && typeof payload === "object" + ? (payload as Record).id ?? id + : payload ?? id; + if (deleteId == null) { + console.warn("Delete called without an id", { payload, id }); + return; + } + return deleteEvent(deleteId as SchedulerEvent["id"]); + } + default: + console.warn(`Unknown action: ${action}`); + return; + } + }, + }), [updateEvent, createEvent, deleteEvent]); + + const handleViewChange = useCallback( + (mode: string, date: Date) => { + const nextView: SchedulerView = mode === "day" || mode === "week" || mode === "month" ? mode : "month"; + setView(nextView); + setCurrentDate(date.getTime()); + }, + [setView, setCurrentDate] + ); + + const handleSetView = useCallback((nextView: SchedulerView) => setView(nextView), [setView]); + + const handleUndo = useCallback(() => undo(), [undo]); + const handleRedo = useCallback(() => redo(), [redo]); + const memoizedXY = useMemo(() => ({ nav_height: 0 }), []); + + return ( +
+ + + +
+ ); +} +~~~ + +Обратите внимание: в отличие от Redux Toolkit, Zustand не требует обертку `Provider`. Хук `useSchedulerStore` читает напрямую из хранилища. + +## Отображение Scheduler во всём приложении + +Обновите `src/App.tsx`: + +~~~tsx +import Scheduler from "./components/Scheduler"; +import "./App.css"; + +function App() { + return ; +} + +export default App; +~~~ + +## Итоги + +Теперь у вас React Scheduler полностью управляется Zustand: + +- Zustand хранит `events`, `view`, `currentDate` и `config` как единственный источник правды +- редактирования пользователя проходят через `data.save` → действия хранилища +- пользовательский интерфейс синхронизирован: Scheduler получает обновлённые `events` через пропсы +- undo/redo реализованы через историю на основе снимков с ограниченным размером стека + +## Что дальше + +- Пересмотрите концепции, лежащие в основе этого примера, в разделе [Основы привязки данных и управления состоянием](integrations/react/state/state-management-basics.md) +- Изучите конфигурацию и возможности шаблонизации Scheduler в [Обзор React Scheduler](integrations/react/overview.md) +- Добавьте хранение данных (загрузка/сохранение событий через API) через действие Zustand и обновление хранилища +- Исследуйте тот же паттерн с другими менеджерами состояний: + - [Использование React Scheduler с Redux Toolkit](integrations/react/state/redux-toolkit.md) + - [Использование React Scheduler с MobX](integrations/react/state/mobx.md) + - [Использование React Scheduler с XState](integrations/react/state/xstate.md) + - [Использование React Scheduler с Valtio](integrations/react/state/valtio.md) + - [Использование React Scheduler с Jotai](integrations/react/state/jotai.md) \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/integrations/salesforce/howtostart-salesforce.md b/i18n/ru/docusaurus-plugin-content-docs/current/integrations/salesforce/howtostart-salesforce.md index dd66855f..909b470d 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/integrations/salesforce/howtostart-salesforce.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/integrations/salesforce/howtostart-salesforce.md @@ -7,56 +7,59 @@ sidebar_label: "dhtmlxScheduler с SalesForce LWC" В этом руководстве описан процесс интеграции dhtmlxScheduler в [SalesForce Lightning Web Component](https://developer.salesforce.com/docs/platform/lwc/guide). -Если вы работаете с другой технологией, ознакомьтесь с другими вариантами интеграции, приведёнными ниже: +Посмотрите [онлайн‑демо](https://dhtmlx-dev-ed.develop.lightning.force.com/) по теме интеграции компонентов DHTMLX с Salesforce LWC (Логин: *user*, Пароль: *demo*). Исходный код демо‑примера приведён на [GitHub](https://github.com/DHTMLX/salesforce-lwc-demo). + +Если вы используете другую технологию, ниже приведён список доступных вариантов интеграции: - [dhtmlxScheduler с ASP.NET Core](integrations/dotnet/howtostart-dotnet-core.md) - [dhtmlxScheduler с ASP.NET MVC](integrations/dotnet/howtostart-dotnet.md) - [dhtmlxScheduler с PHP](integrations/php/howtostart-plain-php.md) -- [dhtmlxScheduler с PHP: Slim](integrations/php/howtostart-php-slim4.md) +- [dhtmlxScheduler с PHP:Slim](integrations/php/howtostart-php-slim4.md) - [dhtmlxScheduler с PHP:Laravel](integrations/php/howtostart-php-laravel.md) - [dhtmlxScheduler с Ruby on Rails](integrations/other/howtostart-ruby.md) - [dhtmlxScheduler с dhtmlxConnector](integrations/other/howtostart-connector.md) -Мы будем использовать [SalesForce CLI](https://developer.salesforce.com/tools/salesforcecli) для создания Lightning Web Component и его деплоя в вашу организацию. Для информации по установке обратитесь к [этой статье](https://developer.salesforce.com/docs/atlas.en-us.sfdx_setup.meta/sfdx_setup/sfdx_setup_intro.htm). Дополнительно вы можете установить [Salesforce Extension Pack](https://marketplace.visualstudio.com/items?itemName="salesforce.salesforcedx-vscode)" для Visual Studio Code, чтобы упростить работу с организациями для разработки. +Мы будем использовать [SalesForce CLI](https://developer.salesforce.com/tools/salesforcecli) для создания Lightning Web Component и загрузки его в организацию. См. [эту статью](https://developer.salesforce.com/docs/atlas.en-us.sfdx_setup.meta/sfdx_setup/sfdx_setup_intro.htm) для руководства по установке. Вы также можете установить [Salesforce Extension Pack](https://marketplace.visualstudio.com/items?itemName=salesforce.salesforcedx-vscode) в Visual Studio Code для работы с разработческими организациями. :::note Полный исходный код доступен [на GitHub](https://github.com/DHTMLX/salesforce-scheduler-demo). ::: -Ниже приведён видеоурок, демонстрирующий создание Scheduler с использованием Salesforce LWC. + +Вы можете посмотреть видеоруководство, которое показывает, как создать Scheduler с Salesforce LWC. -## Необходимые условия +## Требования -Убедитесь, что у вас установлен [SalesForce CLI](https://developer.salesforce.com/tools/salesforcecli). Если нет - ознакомьтесь с [этой статьёй](https://developer.salesforce.com/docs/atlas.en-us.sfdx_setup.meta/sfdx_setup/sfdx_setup_intro.htm) для получения инструкций по установке. +Установите [SalesForce CLI](https://developer.salesforce.com/tools/salesforcecli), если его нет. См. [эту статью](https://developer.salesforce.com/docs/atlas.en-us.sfdx_setup.meta/sfdx_setup/sfdx_setup_intro.htm) для руководства по установке. ## Шаг 1. Создание проекта -Если у вас ещё нет аккаунта, [зарегистрируйтесь](https://developer.salesforce.com/) для получения бесплатного аккаунта разработчика. Эта [статья](https://webkul.com/blog/create-free-developer-account-in-salesforce/) поможет вам в этом. +[Зарегистрируйтесь](https://developer.salesforce.com/) для бесплатной учетной записи разработчика, если у вас её нет. См. [эту статью](https://webkul.com/blog/create-free-developer-account-in-salesforce/) для инструкций по установке. -Используйте строку поиска слева, чтобы найти и выбрать *Dev Hub*: +Слева в строке поиска найдите и выберите *Dev Hub*: -![](/img/sf_devhub.png) +![sf_devhub](/img/sf_devhub.png) -Затем в открывшемся окне настроек включите *Dev Hub*: +В новом окне настроек выберите *Enable Dev Hub*: -![](/img/sf_enabledh.png) +![sf_enabledh](/img/sf_enabledh.png) -Далее создайте базовую папку для вашего проекта Salesforce DX: +Давайте создадим базовый каталог для проекта Salesforce DX: ~~~js $ mkdir ~/salesforce ~~~ -Сгенерируйте проект Salesforce DX с помощью CLI: +Создайте проект Salesforce DX через CLI: ~~~js $ cd ~/salesforce $ sfdx project generate -n scheduler-salesforce-app target dir = C:UsersUsersalesforce create scheduler-salesforce-appconfigproject-scratch-def.json - create scheduler-salesforce-appguides/README.md + create guides/scheduler-salesforce-appREADME.md create scheduler-salesforce-appsfdx-project.json create scheduler-salesforce-app.huskypre-commit create scheduler-salesforce-app.vscodeextensions.json @@ -75,7 +78,7 @@ $ sfdx project generate -n scheduler-salesforce-app create scheduler-salesforce-apppackage.json ~~~ -Перейдите в папку с новым проектом: +Перейдите в созданный проект: ~~~js $ cd scheduler-salesforce-app @@ -83,7 +86,7 @@ $ cd scheduler-salesforce-app ## Шаг 2. Авторизация -Авторизуйте свою организацию с помощью Web Server Flow, выполнив команду: +[Авторизуйте организацию](https://developer.salesforce.com/docs/atlas.en-us.sfdx_dev.meta/sfdx_dev/sfdx_dev_auth_web_flow.htm) с использованием потока Web Server: ~~~js $ sfdx org login web -d @@ -91,15 +94,16 @@ $ sfdx org login web -d Successfully authorized ...@...com with org ID ... ~~~ -Далее обновите файл конфигурации проекта (*sfdx-project.json*), установив параметр "sfdcLoginUrl" в значение вашего "My Domain URL". Найти этот URL можно на странице настроек "My Domain" вашей организации. Например: +Обновите файл конфигурации проекта (*sfdx-project.json*). Установите параметр "sfdcLoginUrl" на ваш "My Domain URL". Найти ваш "My Domain URL" можно на странице настройки "My Domain". Например: + +![sf_mydomain](/img/sf_mydomain.png) -![](/img/sf_mydomain.png) ~~~js title="scheduler-salesforce-app/sfdx-project.json" "sfdcLoginUrl" : "https://xbs2-dev-ed.my.salesforce.com" ~~~ -Создайте Scratch Org с помощью следующей команды: +Создайте Scratch Org: ~~~js $ sfdx org create scratch -f config/project-scratch-def.json -d @@ -123,83 +127,84 @@ Your scratch org is ready. ## Шаг 3. Добавление Scheduler в Salesforce -Чтобы использовать библиотеку, загрузите её в Salesforce как Static Resource. Откройте ваш scratch org, выполнив: +Чтобы начать использовать библиотеку, её нужно загрузить в Salesforce как Static Resource. Откройте ваш scratch org: ~~~js $ sfdx org open ~~~ -Затем перейдите на вкладку "Static Resources" и нажмите кнопку "New": +Теперь перейдите на вкладку "Static Resources" и нажмите кнопку "New" -![](/img/sf_staticresources.png) +![sf_staticresources](/img/sf_staticresources.png) -Дайте ресурсу понятное имя (например, *dhtmlxscheduler*), загрузите ZIP-архив с файлами библиотеки (*dhtmlxscheduler.js* и *dhtmlxscheduler.css*) и установите Cache Control в "Public" для повышения производительности. Нажмите "Save". +Дайте осмысленное имя (мы используем *dhtmlxscheduler*), выберите ZIP‑архив самой библиотеки (архив должен содержать файлы *dhtmlxscheduler.js* и *dhtmlxscheduler.css*), и выберите режим кэширования "Public" для повышения производительности. Нажмите кнопку "Save". ![sf_load_zip](/img/sf_load_zip.png) -Теперь dhtmlxScheduler доступен внутри Salesforce. +Теперь у нас внутри Salesforce есть dhtmlxScheduler. ![sf_scheduler_in_sf](/img/sf_scheduler_in_sf.png) ## Шаг 4. Создание модели данных -События - основные сущности в dhtmlxScheduler. Практичный способ их хранения - сохранять все их свойства в виде обычного JSON внутри Salesforce. Для этого создайте новый объект Event. Откройте Object Manager, затем выберите "Create" и далее "Custom Object": +Основные сущности dhtmlxScheduler — это События. Хорошим подходом является хранение всех свойств сущностей dhtmlxScheduler в виде простого JSON внутри Salesforce. Давайте создадим объект Event. Откройте Object Manager и выберите "Create", затем "Custom Object": -![](/img/sf_new_object.png) +![sf_new_object](/img/sf_new_object.png) -### **Объект события** +### **Объект SchedulerEvent/SchedulerEvents** -Назовите объект события *SchedulerEvent* или *SchedulerEvents*. +Дайте имя объекту события, пусть это будет SchedulerEvent/SchedulerEvents. ![sf_schedulerevent](/img/sf_schedulerevent.png) :::note -Убедитесь, что имя записи совпадает с именем объекта, например: +Имя записи должно соответствовать имени объекта, например: -Имя объекта: SchedulerEvent => Имя записи: SchedulerEvent Name +Object Name: SchedulerEvent => Record Name: SchedulerEvent Name ::: -Нажмите кнопку "Сохранить". +Нажмите кнопку "Save". + +После создания объекта откройте вкладку "Fields & Relationships". Нажмите кнопку "New". -После создания объекта перейдите на вкладку "Fields & Relationships" и нажмите кнопку "New". ![sf_new_field](/img/sf_new_field.png) - **Start Date** -Выберите "Date/Time" в качестве типа данных и нажмите "Next". +Выберите "Date/Time" в качестве типа данных и нажмите кнопку "Next". ![sf_field_type](/img/sf_field_type.png) -Назовите это поле "Start Date". Это поле будет хранить JSON-сериализованные свойства задачи. +Назовите его "Start Date". Он хранит свойства задач в виде JSON. ![sf_start_date](/img/sf_start_date.png) -Нажмите "Next" и принимайте все настройки по умолчанию до появления кнопки "Save & New". +Нажмите кнопку "Next" (принимая все значения по умолчанию) до тех пор, пока не станет доступна кнопка "Save & New". - **End Date** -Добавьте поле "End Date", выбрав "Date/Time" как тип данных. +Создайте поле "End Date". Выберите "Date/Time" в качестве типа данных. ![sf_end_date](/img/sf_end_date.png) -Нажмите "Next" и принимайте настройки по умолчанию до появления кнопки "Save & New". +Нажмите кнопку "Next" (принимая все значения по умолчанию) до тех пор, пока не станет доступна кнопка "Save & New". - **Text** -Создайте поле "Text" и выберите "Text" как тип данных. +Создайте поле "Text". Выберите тип данных "Text". ![sf_text](/img/sf_text.png) -Нажмите "Next" и принимайте все настройки по умолчанию до появления кнопки "Save". +Нажмите кнопку "Next" (принимая все значения по умолчанию) до тех пор, пока не станет доступна кнопка "Save". -В результате поля должны выглядеть следующим образом: +В конце должно выглядеть так: ![sf_schedulerevent_fields](/img/sf_schedulerevent_fields.png) -## Шаг 5. Создание Lightning Web Component +## Шаг 5. Создание компонента Lightning Web -Чтобы создать Lightning Web Component, используйте следующую команду: +Чтобы создать компонент Lightning Web, выполните команду: ~~~js $ sfdx lightning generate component --type lwc -n scheduler -d force-app/main/default/lwc @@ -211,7 +216,7 @@ target dir = C:UsersUsersourcesalesforcescheduler-salesforce-appforce-appmaindef create force-appmaindefaultlwcschedulerscheduler.js-meta.xml ~~~ -Измените определение компонента в *scheduler.js-meta.xml*, чтобы сделать его доступным в Lightning App Builder: +Измените определение компонента в *scheduler.js-meta.xml*, чтобы сделать его доступным в Конструкторе приложений Lightning: ~~~js title="force-app/main/default/lwc/scheduler/scheduler.js-meta.xml" @@ -229,15 +234,15 @@ target dir = C:UsersUsersourcesalesforcescheduler-salesforce-appforce-appmaindef ~~~ -Откройте *scheduler.html* и вставьте следующий код: +Откройте *scheduler.html* и добавьте следующий код в него: ~~~js title="force-app/main/default/lwc/scheduler/scheduler.html" ~~~ -Далее откройте *scheduler.js* и добавьте следующий код: +Откройте *scheduler.js* и добавьте следующий код в него: ~~~js title="force-app/main/default/lwc/scheduler/scheduler.js" /* eslint-disable guard-for-in */ @@ -362,9 +367,9 @@ export default class SchedulerView extends LightningElement { } ~~~ -## Шаг 6. Создание Apex класса +## Шаг 6. Создание Apex‑класса -Следующий шаг - создать класс, который позволит взаимодействовать между Lightning Component и моделью данных. +Следующий шаг — создать класс, который обеспечит взаимодействие между компонентом Lightning и нашей моделью данных. ~~~js $ sfdx apex generate class -n SchedulerData -d force-app/main/default/classes @@ -408,52 +413,52 @@ $ sfdx project deploy start ## Шаг 7. Создание Lightning Page -Откройте "Lightning App Builder" и создайте новую Lightning Page. +Откройте "Lightning App Builder", создайте новую страницу Lightning Page. -![](/img/sf_lightning_app_builder.png) +![sf_lightning_app_builder](/img/sf_lightning_app_builder.png) -Выберите "App Page", затем введите имя страницы и выберите макет. +Выберите "App Page", затем имя страницы и макет. -![](/img/sf_app_page.png) +![sf_app_page](/img/sf_app_page.png) ![sf_new_lightning_page](/img/sf_new_lightning_page.png) -![](/img/sf_page_layout.png) +![sf_page_layout](/img/sf_page_layout.png) -Пользовательский компонент Scheduler должен быть доступен для новой страницы. Добавьте его в любую область и сохраните. +Вы должны увидеть настраиваемый компонент Scheduler, доступный для новой страницы. Добавьте его в любую область и сохраните. ![sf_scheduler](/img/sf_scheduler.png) Активируйте страницу. -![](/img/sf_page_saved.png) +![sf_page_saved](/img/sf_page_saved.png) Сохраните изменения. ![sf_activation](/img/sf_activation.png) -![](/img/sf_add_page_to_nm.png) +![sf_add_page_to_nm](/img/sf_add_page_to_nm.png) ![sf_scheduler_in_app](/img/sf_scheduler_in_app.png) -Откройте страницу приложения. Она должна быть доступна в лаунчере приложений по запросу Scheduler. +Откройте страницу приложения. Она должна быть доступна в запуске приложений (app launcher), если нажать её и ввести Scheduler. ![sf_home_scheduler](/img/sf_home_scheduler.png) -Если всё настроено правильно, на Lightning Page отобразится простая демонстрация Scheduler. +Если всё прошло успешно, вы увидите простой демо‑показ Scheduler на странице Lightning. ![sf_final](/img/sf_final.png) ## Безопасность приложения -Scheduler сам по себе не содержит встроенной защиты от угроз, таких как SQL-инъекции, XSS или CSRF-атаки. Обеспечение безопасности приложения лежит на разработчиках. Подробнее см. [в соответствующей статье](guides/app-security.md). Salesforce спроектирован с учетом безопасности для защиты ваших данных и приложений, и вы можете реализовать собственные меры безопасности, подходящие вашей организации. Дополнительную информацию смотрите в [Salesforce Security Guide](https://developer.salesforce.com/docs/atlas.en-us.securityImplGuide.meta/securityImplGuide/salesforce_security_guide.htm). Кроме того, [этот ресурс](https://developer.salesforce.com/docs/atlas.en-us.secure_coding_guide.meta/secure_coding_guide/secure_coding_lightning_security.htm) содержит важные рекомендации по безопасности. +Scheduler не обеспечивает защиту приложения от различных угроз, таких как SQL-инъекции или XSS и CSRF-атаки. Важно, чтобы ответственность за безопасность приложения лежала на разработчиках, реализующих приложение. Смотрите подробности в соответствующей статье Salesforce, который построен на безопасности для защиты ваших данных и приложений. Вы также можете реализовать свою собственную схему безопасности, чтобы отразить структуру и потребности вашей организации. Для получения дополнительной информации см. [Руководство по безопасности Salesforce](https://developer.salesforce.com/docs/atlas.en-us.securityImplGuide.meta/securityImplGuide/salesforce_security_guide.htm). [Здесь](https://developer.salesforce.com/docs/atlas.en-us.secure_coding_guide.meta/secure_coding_guide/secure_coding_lightning_security.htm) можно узнать, что нужно для обеспечения безопасности. ## Устранение неполадок -Если Scheduler не отображает события после завершения интеграции, обратитесь к статье [Troubleshooting Backend Integration Issues](guides/troubleshooting.md). В ней содержатся рекомендации по выявлению и устранению распространённых проблем. +В случае, если вы выполнили все вышеуказанные шаги по интеграции Scheduler с Salesforce, но Scheduler не рендерит события на странице, ознакомьтесь с статьёй [Troubleshooting Backend Integration Issues](guides/troubleshooting.md). Она описывает способы идентификации причин проблем. ## Что дальше -На этом этапе Scheduler полностью работоспособен. Полный исходный код доступен на [GitHub](https://github.com/DHTMLX/salesforce-scheduler-demo) для клонирования или загрузки для использования в ваших проектах. +Теперь у вас полноценно функционирующий Scheduler. Полный код можно посмотреть на [GitHub](https://github.com/DHTMLX/salesforce-scheduler-demo), клонировать или скачать и использовать в ваших проектах. -Вы также можете ознакомиться с [руководствами по возможностям Scheduler](/guides/) или с учебными материалами по [интеграции Scheduler с другими backend-фреймворками](integrations/howtostart-guides.md). +Вы можете ознакомиться с [Решениями по многочисленным возможностям Scheduler](/guides/) или с решениями по интеграции Scheduler с другими бекенд‑фреймворками [здесь](integrations/howtostart-guides.md). \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/views/agenda-legacy.md b/i18n/ru/docusaurus-plugin-content-docs/current/views/agenda-legacy.md index 2aa4b91d..c5c17ab2 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/views/agenda-legacy.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/views/agenda-legacy.md @@ -74,11 +74,11 @@ scheduler.locale.labels.agenda_tab = "Моя Agenda"; Чтобы определить диапазон дат, отображаемых в виде Agenda, используйте свойства [agenda_end](api/config/agenda_end.md) и [agenda_start](api/config/agenda_start.md): ~~~js -//для отображения дат, начиная с 1 июня 2019 года -scheduler.config.agenda_start = new Date(2019, 5, 1); +//для отображения дат, начиная с 1 июня 2026 года +scheduler.config.agenda_start = new Date(2026, 5, 1); -//для отображения дат до 1 июня 2020 года -scheduler.config.agenda_end = new Date(2020, 5, 1); +//для отображения дат до 1 июня 2027 года +scheduler.config.agenda_end = new Date(2027, 5, 1); ~~~ ## Включение кнопок Следующий/Предыдущий/Сегодня diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/views/agenda.md b/i18n/ru/docusaurus-plugin-content-docs/current/views/agenda.md index 29f2a6f3..8f7204ea 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/views/agenda.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/views/agenda.md @@ -93,8 +93,8 @@ scheduler.date.add_agenda = function(date, inc){ Вы также можете зафиксировать отображаемый диапазон, установив свойства [agenda_end](api/config/agenda_end.md) и [agenda_start](api/config/agenda_start.md): ~~~js -scheduler.config.agenda_start = new Date(2023, 5, 1); -scheduler.config.agenda_end = new Date(2023, 6, 1); +scheduler.config.agenda_start = new Date(2027, 5, 1); +scheduler.config.agenda_end = new Date(2027, 6, 1); ~~~ ## Связанные руководства diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/views/day.md b/i18n/ru/docusaurus-plugin-content-docs/current/views/day.md index 904bc6e2..1a8ea086 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/views/day.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/views/day.md @@ -16,7 +16,7 @@ sidebar_label: "Дневной вид" ~~~js // стандартная инициализация. Дневной вид добавляется автоматически -scheduler.init('scheduler_here', new Date(2019,0,10), "week"); +scheduler.init('scheduler_here', new Date(2027,0,10), "week"); ... scheduler.load("/data/events"); ~~~ diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/views/grid.md b/i18n/ru/docusaurus-plugin-content-docs/current/views/grid.md index 7091e9f1..27bf5c68 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/views/grid.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/views/grid.md @@ -51,8 +51,8 @@ scheduler.createGridView({ {id:"date", label:'Date', sort:'date', width:'*'}, {id:"text", label:'Text', sort:'str', width:200, align:'left'} ], - from:new Date(2019, 3, 10),//левая граница допустимого диапазона дат - to:new Date(2019, 5, 23) //правая граница допустимого диапазона дат + from:new Date(2027, 3, 10),//левая граница допустимого диапазона дат + to:new Date(2027, 5, 23) //правая граница допустимого диапазона дат }); ~~~ diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/views/map.md b/i18n/ru/docusaurus-plugin-content-docs/current/views/map.md index f7a0e43d..d18c9660 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/views/map.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/views/map.md @@ -83,7 +83,7 @@ scheduler.locale.labels.section_location = "Location"; ~~~js //'map' — это стандартное имя для Map View -scheduler.init('scheduler_here',new Date(2024,5,11),"map"); +scheduler.init('scheduler_here',new Date(2027,5,11),"map"); ~~~ @@ -114,7 +114,7 @@ scheduler.config.map_settings = { } } ... -scheduler.init('scheduler_here',new Date(2024,5,11),"map"); +scheduler.init('scheduler_here',new Date(2027,5,11),"map"); ~~~ [Подробнее](views/map.md#map-related-configuration-options) @@ -126,7 +126,7 @@ scheduler.init('scheduler_here',new Date(2024,5,11),"map"); ~~~js scheduler.config.map_view_provider = "googleMap"; ... -scheduler.init('scheduler_here',new Date(2024,5,11),"map"); +scheduler.init('scheduler_here',new Date(2027,5,11),"map"); ~~~ Доступные значения: *"googleMap", "openStreetMaps", "mapbox"*. @@ -138,7 +138,7 @@ scheduler.config.map_settings = { view_provider: "googleMap" } ... -scheduler.init('scheduler_here',new Date(2024,5,11),"map"); +scheduler.init('scheduler_here',new Date(2027,5,11),"map"); ~~~ ## Параметры конфигурации для карты {#map-related-configuration-options} @@ -169,7 +169,7 @@ scheduler.config.map_settings = { view_provider: "googleMap" } ... -scheduler.init('scheduler_here',new Date(2024,5,11),"map"); +scheduler.init('scheduler_here',new Date(2027,5,11),"map"); ~~~ Эти свойства включают: diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/views/month.md b/i18n/ru/docusaurus-plugin-content-docs/current/views/month.md index 1443ccd4..aba45b2b 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/views/month.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/views/month.md @@ -15,7 +15,7 @@ sidebar_label: "Месячный вид" ~~~js // стандартная инициализация; месячный вид добавляется автоматически -scheduler.init('scheduler_here', new Date(2019,0,10), "month"); +scheduler.init('scheduler_here', new Date(2027,0,10), "month"); ... scheduler.load("/data/events"); ~~~ @@ -89,7 +89,7 @@ scheduler.plugins({ // при клике по дню открывается недельный вид scheduler.config.active_link_view = "week"; ... -scheduler.init('scheduler_here', new Date(2012,7,6), "month"); +scheduler.init('scheduler_here', new Date(2027,7,6), "month"); ~~~ @@ -106,7 +106,7 @@ scheduler.init('scheduler_here', new Date(2012,7,6), "month"); // разрешить изменение размера многодневных событий с помощью drag-n-drop scheduler.config.resize_month_events = true; /*!*/ -scheduler.init('scheduler_here', new Date(2019,0,10), "month"); +scheduler.init('scheduler_here', new Date(2027,0,10), "month"); ~~~ [Resizable events in Month view](https://docs.dhtmlx.com/scheduler/samples/02_customization/32_resizable_month_events.html) @@ -118,7 +118,7 @@ scheduler.init('scheduler_here', new Date(2019,0,10), "month"); // разрешить изменение размера однодневных и многодневных событий с помощью drag-n-drop scheduler.config.resize_month_events = true;/*!*/ scheduler.config.resize_month_timed = true; /*!*/ -scheduler.init('scheduler_here', new Date(2019,0,10), "month"); +scheduler.init('scheduler_here', new Date(2027,0,10), "month"); ~~~ **Обратите внимание:** diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/views/timeline.md b/i18n/ru/docusaurus-plugin-content-docs/current/views/timeline.md index 40fcdb6d..0fa55886 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/views/timeline.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/views/timeline.md @@ -149,7 +149,7 @@ scheduler.createTimelineView({ ... }); -var timeline = scheduler.matrix.timeline; +const timeline = scheduler.matrix.timeline; ~~~ После создания можно использовать приведённые ниже методы. @@ -159,7 +159,7 @@ var timeline = scheduler.matrix.timeline; Чтобы получить объект таймлайна, используйте метод [getView](api/method/getview.md). Он принимает имя вида в качестве параметра. Если параметр не передан, возвращается текущий вид. ~~~js -var timeline = scheduler.getView(); +const timeline = scheduler.getView(); timeline.x_size = 8; scheduler.setCurrentView(); ~~~ @@ -253,7 +253,7 @@ timeline.scrollTo({left:300, top:500}); - Для получения X-координаты определённой даты на шкале используйте **posFromDate()** с параметром Date: ~~~js -var left = timeline.posFromDate(new Date()); +const left = timeline.posFromDate(new Date()); ~~~ :::note @@ -263,7 +263,7 @@ var left = timeline.posFromDate(new Date()); - Для получения Y-координаты определённой строки используйте **getSectionTop()** с номером секции: ~~~js -var top = timeline.getSectionTop(section.key); +const top = timeline.getSectionTop(section.key); ~~~ :::note @@ -296,7 +296,7 @@ const top = timeline.getEventTop(scheduler.getEvent(event.id)); Чтобы узнать текущую позицию скроллбара, вызовите **timeline.getScrollPosition()**, который возвращает объект с координатами прокрутки: ~~~js -var timeline = scheduler.getView(); +const timeline = scheduler.getView(); timeline.getScrollPosition(); // { left: 0, top: 0 } ~~~ @@ -308,7 +308,7 @@ timeline.getScrollPosition(); // { left: 0, top: 0 } Также можно отслеживать изменения скролла через событие **onScroll**, которое получает новые значения left и top: ~~~js -var timeline = scheduler.getView(); +const timeline = scheduler.getView(); timeline.attachEvent("onScroll", function(left, top){}); ~~~ @@ -334,9 +334,9 @@ timeline.attachEvent("onScroll", function(left, top){}); Метод возвращает массив объектов событий. ~~~js -var timeline = scheduler.getView(); +const timeline = scheduler.getView(); -var events = timeline.selectEvents({ +const events = timeline.selectEvents({ section: section.key, date: date, selectNested: true @@ -389,11 +389,11 @@ scheduler.createTimelineView({ scheduler.init('scheduler_here'); scheduler.parse([ - {text:"Conference", start_date:"17/09/2012 12:00", end_date:"18/09/2012 21:00", + {text:"Conference", start_date:"17/09/2027 12:00", end_date:"18/09/2027 21:00", room_id:"1"}, - {text:"Meeting", start_date:"17/09/2012 09:00", end_date:"17/09/2012 21:00", + {text:"Meeting", start_date:"17/09/2027 09:00", end_date:"17/09/2027 21:00", room_id:"2"}, - {text:"Conference", start_date:"17/09/2012 15:00", end_date:"18/09/2012 15:00", + {text:"Conference", start_date:"17/09/2027 15:00", end_date:"18/09/2027 15:00", room_id:"3"} ]); ~~~ @@ -443,7 +443,7 @@ scheduler.createTimelineView({ y_property: "section_id", /*!*/ ... }); -scheduler.init('scheduler_here', new Date(2012, 5, 30), "timeline"); +scheduler.init('scheduler_here', new Date(2027, 5, 30), "timeline"); scheduler.parse([ { id:1, text:"Task A", section_id:'1', ...},/*!*/ @@ -596,9 +596,9 @@ scheduler.ignore_timeline = function(date){ // "timeline" — имя пред ~~~js scheduler._click.dhx_cal_next_button = function(dummy,step){ - var mode = scheduler.getState().mode; - var minDate = scheduler.getState().min_date; - var formFunc = scheduler.date.date_to_str("%D"); + const mode = scheduler.getState().mode; + const minDate = scheduler.getState().min_date; + const formFunc = scheduler.date.date_to_str("%D"); // пропустить выходные if(mode=='timeline'){ @@ -873,7 +873,7 @@ scheduler.createTimelineView({ render: "bar", scrollable: true, /*!*/ column_width: 70, /*!*/ - scroll_position:new Date(2018, 0, 15) /*!*/ + scroll_position:new Date(2027, 0, 15) /*!*/ }); ~~~ @@ -983,15 +983,15 @@ scheduler.createTimelineView({ scheduler.templates.timeline_cell_value = function (evs, date, section){ if(section.children){ - var timeline = scheduler.getView(); + const timeline = scheduler.getView(); - var events = timeline.selectEvents({ + const events = timeline.selectEvents({ section: section.key, date: date, selectNested: true }); - var className = ""; + let className = ""; if(!events.length){ className = "load-marker-no"; }else if(events.length < 3){ diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/views/units.md b/i18n/ru/docusaurus-plugin-content-docs/current/views/units.md index e97ead10..fc367885 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/views/units.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/views/units.md @@ -74,11 +74,11 @@ scheduler.createUnitsView({ scheduler.init('scheduler_here'); scheduler.parse([ - {id:1, text:"Task1", start_date:"2019-09-17 12:00", end_date:"2019-09-18 21:00", + {id:1, text:"Task1", start_date:"2027-09-17 12:00", end_date:"2027-09-18 21:00", unit_id:"1"}, - {id:2, text:"Task2", start_date:"2019-09-17 09:00", end_date:"2019-09-17 21:00", + {id:2, text:"Task2", start_date:"2027-09-17 09:00", end_date:"2027-09-17 21:00", unit_id:"3"}, - {id:3, text:"Task3", start_date:"2019-09-17 15:00", end_date:"2019-09-18 15:00", + {id:3, text:"Task3", start_date:"2027-09-17 15:00", end_date:"2027-09-18 15:00", unit_id:"2"} ]); ~~~ @@ -177,7 +177,7 @@ scheduler.createUnitsView({ property: "section_id", /*!*/ ... }); -scheduler.init('scheduler_here', new Date(2019, 5, 30), "unit"); +scheduler.init('scheduler_here', new Date(2027, 5, 30), "unit"); scheduler.parse([ { id:1, text:"Task A", section_id:'1', ...},/*!*/ @@ -238,15 +238,15 @@ scheduler.createUnitsView({ "data":[ { "id":"1", - "start_date":"2019-03-02 15:00:00", - "end_date":"2019-03-04 16:00:00", + "start_date":"2027-03-02 15:00:00", + "end_date":"2027-03-04 16:00:00", "text":"Team meeting", "type_id":"1" }, { "id":"2", - "start_date":"2019-03-02 17:00:00", - "end_date":"2019-03-04 18:00:00", + "start_date":"2027-03-02 17:00:00", + "end_date":"2027-03-04 18:00:00", "text":"Strategy meeting", "type_id":"2" } diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/views/week.md b/i18n/ru/docusaurus-plugin-content-docs/current/views/week.md index 7d6df9f6..9a21f242 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/views/week.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/views/week.md @@ -16,7 +16,7 @@ sidebar_label: "Week View" ~~~js // стандартная инициализация. Вид "Неделя" добавляется автоматически -scheduler.init('scheduler_here', new Date(2019,0,10), "week"); +scheduler.init('scheduler_here', new Date(2027,0,10), "week"); ... scheduler.load("/data/events"); ~~~ diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/whats-new.md b/i18n/ru/docusaurus-plugin-content-docs/current/whats-new.md index 2c7861be..0e04e664 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/whats-new.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/whats-new.md @@ -5,8 +5,105 @@ sidebar_label: "Что нового" # Что нового -Если вы обновляете Scheduler с более ранней версии, ознакомьтесь с [Migration From Older Versions](migration.md) для получения дополнительной информации. +Если вы обновляете Scheduler с более старой версии, ознакомьтесь с [Миграция с более ранних версий](migration.md) для получения дополнительной информации. +7.2.13 +------------- +31 марта 2026 г. Выпуск с исправлениями + +### Исправления + +- Исправлено некорректное предупреждение пробной версии в [React Scheduler](integrations/react/overview.md) +- Исправлена регрессия с удалёнными обновлениями в [React Scheduler](integrations/react/overview.md), когда редактирование события не применяло изменения к существующему событию + + +7.2.12 +------------- +23 марта 2026 г. Выпуск с исправлениями + +### Исправления + +- Исправлено падение на перезагрузке страницы в [React Scheduler](integrations/react/overview.md) при использовании нестандартных тем с включённым плагином [cookie](guides/extensions-list.md#cookie) +- Исправлена регрессия, при которой URL `save` в свойстве `data` применялся некорректно в [React Scheduler](integrations/react/overview.md) +- Исправлена проблема, когда редактирование не первого повторения [recurring event](guides/recurring-events.md) в режиме "This and following events" не применяло все изменения полей [Lightbox](guides/configuring-the-lightbox.md) +- Исправлена проблема, когда динамическое изменение кнопок [Quick Info](guides/quick-info.md) в зависимости от условий события не обновляло попап должным образом +- Исправлена проблема, когда изменение текста одного повторяющегося события в последующем повторении в режиме "This and following events" приводило к перезаписи +- Исправлены стили переполнения попапа [Quick Info](guides/quick-info.md) для корректной обработки длинных описаний событий +- Исправлена ошибка скрипта в [React Scheduler](integrations/react/overview.md), которая возникала при добавлении событий в существующий набор данных через функцию `useState` + +### Обновления + +- Добавлена возможность заменить [recurring event confirmation modal](guides/recurring-events.md#customconfirmationmodal) на настраиваемый диалог. +- Добавлена возможность заменить [recurring event confirmation modal](integrations/react/overview.md#customizingtherecurrenceconfirmationmodal) в [React Scheduler](integrations/react/overview.md) через свойство modals.onRecurrenceConfirm + +7.2.11 +------------- +12 января 2026 г. Выпуск с исправлениями + +### Исправления + +- Исправлена проблема, когда новые события дублировались в [React Scheduler](integrations/react/overview.md), если обработчик `save` не возвращал новый идентификатор +- Исправлена проблема, когда в [Timeline view](views/timeline.md) не применялись шаблоны в [React Scheduler](integrations/react/overview.md) +- Исправлено некорректное связывание событий с секциями в [Timeline view](views/timeline.md) при использовании фильтрации в [React Scheduler](integrations/react/overview.md) +- Исправлена ошибка скрипта в [Agenda view](views/agenda.md) когда секция `date` не включена в [header configuration](guides/initialization.md#initializing-scheduler-via-header-config) +- Исправлено некорректное отображение элементов заголовка во видах [Year](views/year.md) и [Agenda](views/agenda.md) при использовании скина [Material skin](guides/skins.md#material-skin) +- Исправлена проблема разметки в [React Scheduler](integrations/react/overview.md) при переключении с начального вида на основе плагинов на стандартные виды +- Исправлена проблема, когда призрачный блок события появлялся у всем-дневного [recurring event](guides/recurring-events.md) с длительностью ровно 24 часа +- Исправлена проблема, когда [Lightbox](guides/configuring-the-lightbox.md) не открывался при создании нескольких событий перетаскиваанием на один и тот же день в [Month view](views/month.md) с активированным плагином `year_view` + +7.2.10 +------------- +10 декабря 2025 г. Выпуск с исправлениями + +### Исправления + +- Исправлена проблема, когда события смещались влево при перетаскивании из последнего столбца в [multiday Units view](views/units.md#displaying-units-for-multiple-days) +- Исправлена проблема, когда некоторые ячейки дат отсутствовали в конкретных месяцах в [Month view](views/month.md) +- Исправлена проблема перетаскивания/создания на мобильных устройствах при использовании плагина [container_autoresize](guides/extensions-list.md#container-autoresize) +- Исправлена проблема, которая препятствовала созданию события при двойном клике после горизонтального прокручивания в [Units view](views/units.md) + +7.2.9 +--------------- +19 сентября 2025 г. Выпуск с исправлениями + +### Исправления + +- Исправлены утечки памяти, возникавшие в [Timeline view](views/timeline.md) +- Исправлена проблема совместимости между плагином [container_autoresize](guides/extensions-list.md#container-autoresize) и видом [Week Agenda](views/weekagenda.md) +- Исправлена проблема, когда [onScaleDblClick](api/event/onscaledblclick.md) не срабатывал как ожидалось +- Исправлено неконсистентное поведение [onEventSave](api/event/oneventsave.md) и [DataProcessor](api/method/createdataprocessor.md) при работе с [recurring events](guides/recurring-events.md) +- Исправлена проблема [React Scheduler](integrations/react/overview.md), когда несколько экземпляров компонента вызывали дублирование шаблонов +- Исправлено некорректное изменение изменений свойства `events` в [React Scheduler](integrations/react/overview.md) + +## 7.2.8 + +30 июля 2025 г. Выпуск с исправлениями + +### Новое + +- Образцы для [React Scheduler](integrations/react/overview.md) добавлены в пакеты Commercial, Enterprise, Ultimate и Evaluation + +### Исправления + +- Исправлена проблема, когда перетаскивание [recurring event](guides/recurring-events.md) после удаления последующих повторений вело себя неправильно +- Обеспечено отключение элемента управления “Repeat Event” в [Lightbox](guides/lightbox-editors.md) для изменённых экземпляров серии +- Исправлено некорректное отображение устаревших меток для [recurring events](guides/recurring-events.md) +- Исправлен конфликт между настройкой [max_month_events](api/config/max_month_events.md) и [multi-day events](views/month.md), который приводил к исчезновению или перекрытию событий в [Month view](views/month.md) +- Обеспечено включение атрибута **Secure** у cookies, устанавливаемых Scheduler через HTTPS +- Исправлена проблема, когда настройка [event_duration](api/config/event_duration.md) искажала разобранные данные событий +- Исправлена проблема, когда настройка [time_step](api/config/time_step.md) искажала разобранные данные событий + + +## 7.2.6 + +26 июня 2025 г. Выпуск с исправлениями + +### Исправления + +- Исправлена проблема с секундной точностью во времени событий +- Исправлено неверное поведение перетаскивания в [Timeline view](views/timeline.md) во время коротких месяцев +- Исправлено неверное округление событий в [Timeline view](views/timeline.md) +- Предотвращено добавление свойства `!nativeeditor_status` в аргументы [custom router](guides/server-integration.md#custom-routing) DataProcessor ## 7.2.5 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/api_overview.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/api_overview.md index 54a8c95a..88a9cfd1 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/api_overview.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/api_overview.md @@ -445,18 +445,18 @@ description: You can explore an API overview in the documentation of the DHTMLX | Name | Description | |--------------------------------------------|---------------------------------------------| -| [](api/other/ajax.md) | @getshort(api/method/ajax_other.md) | -| [](api/other/config.md) | @getshort(api/method/config_other.md) | -| [](api/other/date.md) | @getshort(api/method/date_other.md) | -| [](api/other/env.md) | @getshort(api/method/env_other.md) | -| [i18n](api/other/i18n.md) | @getshort(api/method/i18n_other.md) | -| [](api/other/ical.md) | @getshort(api/method/ical_other.md) | -| [](api/other/json.md) | @getshort(api/method/json_other.md) | -| [](api/other/keys.md) | @getshort(api/method/keys_other.md) | -| [](api/other/locale.md) | @getshort(api/method/locale_other.md) | -| [](api/other/matrix.md) | @getshort(api/method/matrix_other.md) | -| [](api/other/skin.md) | @getshort(api/method/skin_other.md) | -| [](api/other/templates.md) | @getshort(api/method/templates_other.md) | -| [](api/other/tooltip.md) | @getshort(api/method/tooltip_other.md) | -| [](api/other/version.md) | @getshort(api/method/version_other.md) | -| [](api/other/xy.md) | @getshort(api/method/xy_other.md) | +| [](api/other/ajax.md) | @getshort(api/other/ajax.md) | +| [](api/other/config.md) | @getshort(api/other/config.md) | +| [](api/other/date.md) | @getshort(api/other/date.md) | +| [](api/other/env.md) | @getshort(api/other/env.md) | +| [](api/other/i18n.md) | @getshort(api/other/i18n.md) | +| [](api/other/ical.md) | @getshort(api/other/ical.md) | +| [](api/other/json.md) | @getshort(api/other/json.md) | +| [](api/other/keys.md) | @getshort(api/other/keys.md) | +| [](api/other/locale.md) | @getshort(api/other/locale.md) | +| [](api/other/matrix.md) | @getshort(api/other/matrix.md) | +| [](api/other/skin.md) | @getshort(api/other/skin.md) | +| [](api/other/templates.md) | @getshort(api/other/templates.md) | +| [](api/other/tooltip.md) | @getshort(api/other/tooltip.md) | +| [](api/other/version.md) | @getshort(api/other/version.md) | +| [](api/other/xy.md) | @getshort(api/other/xy.md) | diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/active_link_view.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/active_link_view.md index 5f6b1377..9fafbf27 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/active_link_view.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/active_link_view.md @@ -17,7 +17,7 @@ description: "允许月视图中的日期数字显示为可点击的链接，点 ~~~jsx scheduler.config.active_link_view = "week"; // 指定从月视图跳转到的视图 ... -scheduler.init('scheduler_here',new Date(2012,7,6),"month"); +scheduler.init('scheduler_here',new Date(2027,7,6),"month"); ~~~ **Default value:** day diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/agenda_end.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/agenda_end.md index 83f3d1ea..5ab76d5c 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/agenda_end.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/agenda_end.md @@ -15,10 +15,10 @@ description: "定义显示事件的截止日期" ### Example ~~~jsx -scheduler.config.agenda_start = new Date(2012, 7, 1); -scheduler.config.agenda_end = new Date(2014, 7, 1); +scheduler.config.agenda_start = new Date(2025, 7, 1); +scheduler.config.agenda_end = new Date(2027, 7, 1); ... -scheduler.init('scheduler_here', new Date(2013, 0, 10), "agenda"); +scheduler.init('scheduler_here', new Date(2026, 0, 10), "agenda"); ~~~ **Default value:** 默认为 'agenda_start' 之后一年（值） diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/agenda_start.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/agenda_start.md index 95fca25f..23ce403f 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/agenda_start.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/agenda_start.md @@ -15,10 +15,10 @@ description: "指定事件开始显示的日期" ### Example ~~~jsx -scheduler.config.agenda_start = new Date(2012, 7, 1); -scheduler.config.agenda_end = new Date(2014, 7, 1); +scheduler.config.agenda_start = new Date(2025, 7, 1); +scheduler.config.agenda_end = new Date(2027, 7, 1); ... -scheduler.init('scheduler_here', new Date(2010, 0, 10), "agenda"); +scheduler.init('scheduler_here', new Date(2026, 0, 10), "agenda"); ~~~ **Default value:** 当前用户的日期 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/api_date.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/api_date.md index 2296bd24..9eebd52c 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/api_date.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/api_date.md @@ -17,7 +17,7 @@ description: "设置 api_date 模板使用的日期格式" ~~~jsx scheduler.config.api_date="%Y-%m-%d %H:%i"; -scheduler.init("scheduler_here",new Date(2009,10,1),"week"); +scheduler.init("scheduler_here",new Date(2027,10,1),"week"); ~~~ **Default value:** "%d-%m-%Y %H:%i" diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/auto_end_date.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/auto_end_date.md index a04123b5..22ad4841 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/auto_end_date.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/auto_end_date.md @@ -18,7 +18,7 @@ description: "当开始日期被调整时，自动更新事件的结束日期" scheduler.config.event_duration = 60; scheduler.config.auto_end_date = true; ... -scheduler.init('scheduler_here',new Date(2013,05,11),"week"); +scheduler.init('scheduler_here',new Date(2027,05,11),"week"); ~~~ **Default value:** false diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/buttons_left.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/buttons_left.md index f5744895..64261ad7 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/buttons_left.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/buttons_left.md @@ -24,7 +24,7 @@ description: "保存一组位于 lightbox 左下角的按钮集合" -``` ~~~ **Default value:** ["dhx_delete_btn"] diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/cascade_event_display.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/cascade_event_display.md index 95dc2e6d..10968594 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/cascade_event_display.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/cascade_event_display.md @@ -19,7 +19,7 @@ scheduler.config.cascade_event_display = true; scheduler.config.cascade_event_count = 4; scheduler.config.cascade_event_margin = 30; ... -scheduler.init('scheduler_here', new Date(2009,5,30), "week"); +scheduler.init('scheduler_here', new Date(2027,5,30), "week"); ~~~ **Default value:** false diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/cascade_event_margin.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/cascade_event_margin.md index d55096a3..ae83025c 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/cascade_event_margin.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/cascade_event_margin.md @@ -19,7 +19,7 @@ scheduler.config.cascade_event_display = true; scheduler.config.cascade_event_count = 4; scheduler.config.cascade_event_margin = 30; ... -scheduler.init('scheduler_here',new Date(2009,5,30),"week"); +scheduler.init('scheduler_here',new Date(2027,5,30),"week"); ~~~ **Default value:** 30 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/check_limits.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/check_limits.md index 83c43478..66846894 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/check_limits.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/check_limits.md @@ -17,7 +17,7 @@ description: "切换是否启用限制检查" ~~~jsx scheduler.config.check_limits = false; ... -scheduler.init('scheduler_here',new Date(2013,7,6),"week"); +scheduler.init('scheduler_here',new Date(2027,7,6),"week"); ~~~ **Default value:** true diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/collision_limit.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/collision_limit.md index 6ac5e9b5..ad2dd5bb 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/collision_limit.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/collision_limit.md @@ -17,7 +17,7 @@ description: "定义单个时间段内允许的最大事件数量" ~~~jsx scheduler.config.collision_limit = 2; ... -scheduler.init('scheduler_here',new Date(2010,05,11),"week"); +scheduler.init('scheduler_here',new Date(2027,05,11),"week"); ~~~ **Default value:** 1 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/container_autoresize.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/container_autoresize.md index 9a5b82e0..41d5bfec 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/container_autoresize.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/container_autoresize.md @@ -17,7 +17,7 @@ description: "使调度器的容器自动调整大小以适应全部内容，无 ~~~jsx scheduler.config.container_autoresize = false; ... -scheduler.init('scheduler_here',new Date(2013,0,10),"week"); +scheduler.init('scheduler_here',new Date(2027,0,10),"week"); ~~~ **Default value:** true diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/csp.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/csp.md index 99b80f22..4a6279a0 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/csp.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/csp.md @@ -57,4 +57,4 @@ scheduler.config.csp = false; 请注意，如果应用阻止了这种高性能代码，dhtmlxScheduler 将无法正常工作。 ### Change log -- added in v6.0 +- 6.0 版本新增 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/date_format.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/date_format.md index c2b3b269..6b927826 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/date_format.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/date_format.md @@ -17,7 +17,7 @@ description: "定义用于从数据集中解析数据以及向服务器发送日 ~~~jsx scheduler.config.date_format = "%Y-%m-%d %H:%i"; ... -scheduler.init('scheduler_here',new Date(2019,0,10),"week"); +scheduler.init('scheduler_here',new Date(2027,0,10),"week"); scheduler.load("/data/events"); ~~~ diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/day_column_padding.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/day_column_padding.md index b5199db2..9d6c87d3 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/day_column_padding.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/day_column_padding.md @@ -38,4 +38,4 @@ scheduler.config.day_column_padding = 8; ![Scheduler - padding inside day columns](/img/day_column_padding_set.png) ### Change log -- added in v7.0 +- 7.0 版本新增 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/day_date.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/day_date.md index 88606515..96226f5a 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/day_date.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/day_date.md @@ -32,13 +32,13 @@ scheduler.init('scheduler_here', new Date(2013, 7, 5), "week"); ~~~js scheduler.config.day_date = "%F %j"; -scheduler.init('scheduler_here', new Date(2020, 7, 5), "day"); +scheduler.init('scheduler_here', new Date(2027, 7, 5), "day"); ~~~ 若要在初始化后更新日期格式，需要重写 [day_date](api/template/day_date.md) 模板: ~~~js -var formatDayDate = scheduler.date.date_to_str("%F %j"); +const formatDayDate = scheduler.date.date_to_str("%F %j"); scheduler.templates.day_date = function(date) { return formatDayDate(date); }; diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/dblclick_create.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/dblclick_create.md index 3b5c497c..fd582176 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/dblclick_create.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/dblclick_create.md @@ -17,7 +17,7 @@ description: "允许用户通过双击创建事件" ~~~jsx scheduler.config.dblclick_create = false; ... -scheduler.init('scheduler_here',new Date(2013,05,11),"week"); +scheduler.init('scheduler_here',new Date(2027,05,11),"week"); ~~~ **Default value:** true diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/default_date.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/default_date.md index 666bae3d..61421d14 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/default_date.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/default_date.md @@ -17,7 +17,7 @@ description: "定义模板 'day_date'、'week_date'、'day_scale_date' 用于在 ~~~jsx scheduler.config.default_date = "%j %M %Y"; ... -scheduler.init('scheduler_here',new Date(2013,05,11),"week"); +scheduler.init('scheduler_here',new Date(2027,05,11),"week"); ~~~ **Default value:** "%j %M %Y" diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/details_on_create.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/details_on_create.md index 04fd95f5..0ed14114 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/details_on_create.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/details_on_create.md @@ -17,7 +17,7 @@ description: "允许在通过拖动或双击创建新事件时使用扩展表单 ~~~jsx scheduler.config.details_on_create=true; ... -scheduler.init('scheduler_here', new Date(2013,0,10), "week"); +scheduler.init('scheduler_here', new Date(2027,0,10), "week"); ~~~ **Default value:** true diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/details_on_dblclick.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/details_on_dblclick.md index beb30ea4..d160f4d6 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/details_on_dblclick.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/details_on_dblclick.md @@ -17,7 +17,7 @@ description: "通过双击事件来启用打开lightbox功能" ~~~jsx scheduler.config.details_on_dblclick = true; ... -scheduler.init('scheduler_here',new Date(2013,05,11),"week"); +scheduler.init('scheduler_here',new Date(2027,05,11),"week"); ~~~ **Default value:** true diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/display_marked_timespans.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/display_marked_timespans.md index b8e09930..ef5ec1d6 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/display_marked_timespans.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/display_marked_timespans.md @@ -17,7 +17,7 @@ description: "控制调度器中标记（阻止）的时间段是否高亮显示 ~~~jsx scheduler.config.display_marked_timespans = false; ... -scheduler.init('scheduler_here',new Date(2013,05,11),"week"); +scheduler.init('scheduler_here',new Date(2027,05,11),"week"); ~~~ **Default value:** true diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/displayed_event_color.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/displayed_event_color.md index ea3d7211..1f0bf584 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/displayed_event_color.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/displayed_event_color.md @@ -17,7 +17,7 @@ description: "定义由 showEvent() 方法显示的事件的默认背景颜色" ~~~jsx scheduler.config.displayed_event_color="#DFEDF7"; ... -scheduler.init('scheduler_here',new Date(2013,0,10),"week"); +scheduler.init('scheduler_here',new Date(2027,0,10),"week"); ~~~ **Default value:** #ffc5ab diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/displayed_event_text_color.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/displayed_event_text_color.md index cb3e62ca..5dc310ad 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/displayed_event_text_color.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/displayed_event_text_color.md @@ -17,7 +17,7 @@ description: "定义由 showEvent() 方法显示的事件的默认字体颜色" ~~~jsx scheduler.config.displayed_event_text_color="#195D8A"; ... -scheduler.init('scheduler_here',new Date(2013,0,10),"week"); +scheduler.init('scheduler_here',new Date(2027,0,10),"week"); ~~~ **Default value:** #7e2727 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/drag_create.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/drag_create.md index b96eaa18..533e4ff3 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/drag_create.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/drag_create.md @@ -17,7 +17,7 @@ description: "允许通过拖拽操作创建新事件" ~~~jsx scheduler.config.drag_create = false; ... -scheduler.init('scheduler_here',new Date(2013,7,1),"week"); +scheduler.init('scheduler_here',new Date(2027,7,1),"week"); ~~~ **Default value:** true diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/drag_highlight.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/drag_highlight.md index 0c84d967..aeac4d13 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/drag_highlight.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/drag_highlight.md @@ -18,7 +18,7 @@ description: "此选项在拖动事件穿过scheduler的时间刻度时，高亮 //关闭高亮显示 scheduler.config.drag_highlight = false; /*!*/ -scheduler.init('scheduler_here',new Date(2010,0,10),"week"); +scheduler.init('scheduler_here',new Date(2027,0,10),"week"); scheduler.load("./data/events.xml"); ~~~ diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/drag_in.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/drag_in.md index 1b9a9b9a..82f4c7eb 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/drag_in.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/drag_in.md @@ -15,12 +15,12 @@ description: "限制拖动事件，使其只能在发起拖动的调度器内移 ### Example ~~~jsx -scheduler.init('scheduler_here',new Date(2009,05,30),"week"); +scheduler.init('scheduler_here',new Date(2027,05,30),"week"); scheduler.load("./data/units.xml"); scheduler2.config.drag_in = false; // 禁止事件拖入此调度器 scheduler2 = Scheduler.getSchedulerInstance(); -scheduler2.init('scheduler_here_2',new Date(2009,05,30),"week"); +scheduler2.init('scheduler_here_2',new Date(2027,05,30),"week"); ~~~ **Default value:** true diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/drag_lightbox.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/drag_lightbox.md index bc8b85ff..b99b2a07 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/drag_lightbox.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/drag_lightbox.md @@ -17,7 +17,7 @@ description: "允许通过标题栏拖动lightbox" ~~~jsx scheduler.config.drag_lightbox = false; ... -scheduler.init('scheduler_here',new Date(2013,5,30),"week"); +scheduler.init('scheduler_here',new Date(2027,5,30),"week"); ~~~ **Default value:** true diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/drag_move.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/drag_move.md index 22434dca..68a7435e 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/drag_move.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/drag_move.md @@ -17,11 +17,12 @@ description: "允许通过拖放操作重新定位事件" ~~~jsx scheduler.config.drag_move = false; ... -scheduler.init('scheduler_here',new Date(2013,5,30),"week"); +scheduler.init('scheduler_here',new Date(2027,5,30),"week"); ~~~ **Default value:** true -@views;day, month, timeline, week, weekagenda,units + +**Applicable views:** [Day view](views/day.md), [Month view](views/month.md), [Timeline view](views/timeline.md), [Week view](views/week.md), [Units view](views/units.md) ### Related API - [drag_lightbox](api/config/drag_lightbox.md) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/drag_out.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/drag_out.md index 1d8a932d..88d6145b 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/drag_out.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/drag_out.md @@ -16,11 +16,11 @@ description: "防止事件从此scheduler拖动到其他scheduler" ~~~jsx scheduler.config.drag_out = false; // 禁用从此scheduler向其他scheduler拖动事件 -scheduler.init('scheduler_here', new Date(2009,05,30), "week"); +scheduler.init('scheduler_here', new Date(2027,05,30), "week"); scheduler.load("./data/units.xml"); scheduler2 = Scheduler.getSchedulerInstance(); -scheduler2.init('scheduler_here_2', new Date(2009,05,30), "week"); +scheduler2.init('scheduler_here_2', new Date(2027,05,30), "week"); ~~~ **Default value:** true diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/drag_resize.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/drag_resize.md index 87e043f6..b2f46f40 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/drag_resize.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/drag_resize.md @@ -16,7 +16,7 @@ description: "允许通过拖放操作调整事件的大小" ~~~jsx scheduler.config.drag_resize = false; -scheduler.init('scheduler_here', new Date(2020,5,30), "week"); +scheduler.init('scheduler_here', new Date(2027,5,30), "week"); ~~~ **Default value:** true diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/edit_on_create.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/edit_on_create.md index 88c92c7a..dae5e201 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/edit_on_create.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/edit_on_create.md @@ -17,7 +17,7 @@ description: "允许在创建新事件时打开lightbox" ~~~jsx scheduler.config.edit_on_create = false; ... -scheduler.init('scheduler_here', new Date(2013,05,11), "week"); +scheduler.init('scheduler_here', new Date(2027,05,11), "week"); ~~~ **Default value:** true diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/event_attribute.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/event_attribute.md index f28e2512..2dbda4e5 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/event_attribute.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/event_attribute.md @@ -21,4 +21,4 @@ scheduler.config.event_attribute = "data-event-id" **Default value:** "data-event-id" ### Change log -- added in v6.0 +- 6.0 版本新增 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/event_duration.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/event_duration.md index 498893e2..b03addc9 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/event_duration.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/event_duration.md @@ -18,7 +18,7 @@ description: "设置事件的初始持续时间（以分钟为单位）" scheduler.config.event_duration = 60; scheduler.config.auto_end_date = true; ... -scheduler.init('scheduler_here', new Date(2013, 05, 11), "week"); +scheduler.init('scheduler_here', new Date(2027, 05, 11), "week"); ~~~ **Default value:** 5 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/first_hour.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/first_hour.md index 019de590..46ba9431 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/first_hour.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/first_hour.md @@ -18,7 +18,7 @@ description: "定义小时刻度（Y轴）的起始小时" scheduler.config.first_hour = 9; scheduler.config.last_hour = 18; ... -scheduler.init('scheduler_here', new Date(2013,05,11), "week"); +scheduler.init('scheduler_here', new Date(2027,05,11), "week"); ~~~ **Default value:** 0 (零) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/fix_tab_position.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/fix_tab_position.md index f2af1a4c..4734c114 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/fix_tab_position.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/fix_tab_position.md @@ -17,7 +17,7 @@ description: "将视图的 tabs 从左侧移到右侧" ~~~jsx scheduler.config.fix_tab_position = false; ... -scheduler.init('scheduler_here', new Date(2013,05,11), "week"); +scheduler.init('scheduler_here', new Date(2027,05,11), "week"); ~~~ **Default value:** true diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/full_day.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/full_day.md index 80280a43..cfb04f32 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/full_day.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/full_day.md @@ -17,7 +17,7 @@ description: "允许将事件设置为全天持续" ~~~jsx scheduler.config.full_day = true; ... -scheduler.init('scheduler_here', new Date(2013, 7, 5), "week"); +scheduler.init('scheduler_here', new Date(2027, 7, 5), "week"); ~~~ **Default value:** false @@ -30,4 +30,4 @@ scheduler.init('scheduler_here', new Date(2013, 7, 5), "week"); 启用此选项（*true*）时，lightbox 中用于选择时间段的字段将被禁用，事件持续时间自动设置为覆盖全天--从所选日期的**00:00**开始，到次日的**00:00**结束。 ### Change log -- added in version 2.3 +- 2.3 版本新增 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/header.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/header.md index 264a4e03..80c9d17a 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/header.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/header.md @@ -1,14 +1,14 @@ ---- -sidebar_label: "header" -title: "header config" -description: "设置调度器 header（导航面板）的布局" +--- +sidebar_label: header +title: "header 配置" +description: "为调度器头部（导航面板）提供布局式配置" --- # header ### Description -@short: 设置调度器 header（导航面板）的布局 +@short: 提供调度器头部（导航面板）的布局式配置 @signature: header: any @@ -31,12 +31,11 @@ scheduler.init("scheduler_here"); ### Details -当调度器使用此配置初始化时，调度器容器内的任何现有 HTML 都将被生成的标记替换。 - -此配置可以是一个简单的元素数组，也可以是嵌套结构以定义更复杂的布局。 +当 Scheduler 使用此配置进行初始化时，初始化前放置在调度器容器中的任何 HTML 都会被移除，并将生成的标记替换它们。 -请注意，header/导航栏的高度仍由 [scheduler.xy.nav_height](api/other/xy.md#day) 选项控制。 +该配置的值可以是一个简单的元素数组，亦可是描述复杂布局的嵌套结构。 +请注意，头部/导航栏的高度仍然由 [`scheduler.xy.nav_height`](api/other/xy.md#illustration-images) 选项控制。 ~~~js scheduler.xy.nav_height = 80; @@ -63,29 +62,28 @@ scheduler.config.header = { scheduler.init("scheduler_here"); ~~~ - ~~~html -
+
~~~ 支持的值包括: - - **\{rows: Array, css:string\}** - 多行 header 的容器 - - **\{cols: Array, css:string\}** - 多行 header 中的单行 - - **"prev","next","today"** - 日期导航按钮 - - **"date"** - 显示当前日期的标签 - - **"day", "week", "month" 等** - 用于切换视图的标签页 - - **"spacer"** - 透明元素，占据剩余空间，常用于将元素推到右侧 - - **\{html: string, click: function, css: string\}** - 用于在 header 中添加自定义按钮或图标的对象 - - **"minicalendar"** - 切换 [Mini Calendar](guides/minicalendar.md) 的开关按钮。 +- `{rows: Array, css: string}` - 一个多行表头的容器 +- `{cols: Array, css: string}` - 一个多行表头中的单行 +- `"prev"`, `"next"`, `"today"` - 日期导航按钮 +- `"date"` - 日期标签 +- `"day"`, `"week"`, `"month"`, 等 - 视图选项卡 +- `"spacer"` - 一个透明元素，占用整块自由空间，可用于将另一个元素推到头部的右侧 +- `{html: string, click: function, css: string}` - 用于在头部注入自定义按钮或图标的对象 +- `"minicalendar"` - 一个 [Mini Calendar](guides/minicalendar.md) 的切换 ~~~js scheduler.config.header = [ "day", "week", "month", - {html:"click me!", click:function(){alert("done!") }}, + { html: "click me!", click: () => { alert("done!"); } }, "date", "prev", "today", @@ -94,12 +92,12 @@ scheduler.config.header = [ scheduler.init("scheduler_here"); ~~~ -#### Mini Calendar 设置: +#### Mini Calendar 设置： -"minicalendar" 选项添加了一个按钮，用于切换迷你日历，其点击处理函数如下: +minicalendar 值将显示一个 minicalendar 按钮，点击处理程序如下： -~~~ -function showCalendar () { +~~~js +function showCalendar() { if (scheduler.isCalendarVisible()) { scheduler.destroyCalendar(); } else { @@ -107,7 +105,7 @@ function showCalendar () { position: this, date: scheduler.getState().date, navigation: true, - handler: function (date, calendar) { + handler: (date, calendar) => { scheduler.setCurrentView(date); scheduler.destroyCalendar(); } @@ -116,14 +114,14 @@ function showCalendar () { }; ~~~ -若要使用不同参数自定义迷你日历行为，可以为 minicalendar 按钮提供自定义的点击处理函数，如下所示: +如果你想用不同的参数调用 [`renderCalendar()`](api/method/rendercalendar.md)，你需要为 minicalendar 按钮提供你自己的 `onclick` 处理程序： -~~~ +~~~js scheduler.config.header = [ "day", "week", "month", - {view: "minicalendar", click: function () { + { view: "minicalendar", click: function() { if (scheduler.isCalendarVisible()) { scheduler.destroyCalendar(); } else { @@ -131,14 +129,14 @@ scheduler.config.header = [ position: this, date: scheduler.getState().date, navigation: true, - handler: function (date, calendar) { + handler: (date, calendar) => { scheduler.setCurrentView(date); scheduler.destroyCalendar(); } }); } - -}}, + + } }, "date", "prev", "today", @@ -148,5 +146,5 @@ scheduler.config.header = [ ### Related Guides - [Mobile Responsive Scheduler](guides/touch-support.md) -- [dhtmlxScheduler를 순수 JS/HTML에서 사용하기](guides/initialization.md#initializing-scheduler-via-header-config) -- [미니 캘린더(날짜 선택기)](guides/minicalendar.md) +- [dhtmlxScheduler in Plain JS/HTML](guides/initialization.md) +- [Mini Calendar (Date Picker)](guides/minicalendar.md) \ No newline at end of file diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/highlight_displayed_event.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/highlight_displayed_event.md index 7615b727..467cdfdc 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/highlight_displayed_event.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/highlight_displayed_event.md @@ -17,7 +17,7 @@ description: "决定通过 showEvent 方法获取的事件在显示时是否高 ~~~jsx scheduler.config.highlight_displayed_event=false; ... -scheduler.init('scheduler_here',new Date(2010,0,10),"week"); +scheduler.init('scheduler_here',new Date(2027,0,10),"week"); ~~~ **Default value:** true diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/hour_date.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/hour_date.md index aaba41d0..e769137e 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/hour_date.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/hour_date.md @@ -17,7 +17,7 @@ description: "定义Y轴上显示的时间格式。该格式同样应用于默 ~~~jsx scheduler.config.hour_date = "%H:%i:%s"; ... -scheduler.init('scheduler_here', new Date(2013, 7, 5), "week"); +scheduler.init('scheduler_here', new Date(2027, 7, 5), "week"); ~~~ **Default value:** "%H:%i" diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/hour_size_px.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/hour_size_px.md index 8e71a0c8..7d5125da 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/hour_size_px.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/hour_size_px.md @@ -17,7 +17,7 @@ description: "定义小时块的高度，单位为像素" ~~~jsx scheduler.config.hour_size_px = 40; ... -scheduler.init('scheduler_here', new Date(2010, 7, 5), "week"); +scheduler.init('scheduler_here', new Date(2027, 7, 5), "week"); ~~~ **Default value:** 42 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/icons_edit.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/icons_edit.md index a3fc64bf..2c1e6a61 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/icons_edit.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/icons_edit.md @@ -17,7 +17,7 @@ description: "包含一组图标，这些图标会显示在事件框内的侧边 ~~~jsx scheduler.config.icons_edit = ['icon_custom', 'icon_save', 'icon_cancel']; ... -scheduler.init('scheduler_here',new Date(2013,05,11),"week"); +scheduler.init('scheduler_here',new Date(2027,05,11),"week"); ~~~ **Default value:** ['icon_save', 'icon_cancel'] diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/icons_select.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/icons_select.md index 354e557b..f133614a 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/icons_select.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/icons_select.md @@ -17,7 +17,7 @@ description: "保持一组图标，这些图标会显示在事件框的侧边选 ~~~jsx scheduler.config.icons_select = ['icon_details', 'icon_delete']; ... -scheduler.init('scheduler_here', new Date(2013, 0, 10), "week"); +scheduler.init('scheduler_here', new Date(2027, 0, 10), "week"); ~~~ **Default value:** ['icon_details', 'icon_edit', 'icon_delete'] diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/include_end_by.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/include_end_by.md index 77c84d10..4568c3cc 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/include_end_by.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/include_end_by.md @@ -19,7 +19,7 @@ description: "设置'End by'字段中输入的日期是作为排他日期还是 ~~~jsx scheduler.config.include_end_by = true; ... -scheduler.init('scheduler_here', new Date(2019, 7, 5), "week"); +scheduler.init('scheduler_here', new Date(2027, 7, 5), "week"); ~~~ **Default value:** false @@ -32,21 +32,21 @@ scheduler.init('scheduler_here', new Date(2019, 7, 5), "week"); 默认情况下，"End by"字段中的日期被视为排他日期。 -例如，如果用户在"End by"字段中设置了"01.15.2019": +例如，如果用户在"End by"字段中设置了"01.15.2027": -- 当 include_end_by = false（默认）时，重复系列结束于 01.14.2019。 -- 当 include_end_by = true 时，重复系列结束于 01.15.2019。 +- 当 include_end_by = false（默认）时，重复系列结束于 01.14.2027。 +- 当 include_end_by = true 时，重复系列结束于 01.15.2027。 ### 数据库如何保存日期？ -调度器中选择的所有日期都包含小时和分钟部分，因此在任何日期选择器中选择的日期如 *15.11.2021* 会被解释为 *15.11.2021 00:00*。 +调度器中选择的所有日期都包含小时和分钟部分，因此在任何日期选择器中选择的日期如 *15.11.2027* 会被解释为 *15.11.2027 00:00*。 这会影响在重复事件表单中选择"End by"时系列的持续时间。 -例如，用户在"End by"字段中输入 *15.11.2021*: +例如，用户在"End by"字段中输入 *15.11.2027*: -- 当 include_end_by = false（默认）时，系列结束日期保存为 *15.11.2021 00:00*，意味着最后可能的事件发生时间是 *14.11.2021 23:59*，因此选定日期当天不会发生事件； -- 当 include_end_by = true 时，系列结束日期保存为 *16.11.2021 00:00*（选定日期之后的午夜），将选定日期包含在系列中，允许最后一个事件发生时间为 *15.11.2021 23:59*。 +- 当 include_end_by = false（默认）时，系列结束日期保存为 *15.11.2027 00:00*，意味着最后可能的事件发生时间是 *14.11.2027 23:59*，因此选定日期当天不会发生事件； +- 当 include_end_by = true 时，系列结束日期保存为 *16.11.2027 00:00*（选定日期之后的午夜），将选定日期包含在系列中，允许最后一个事件发生时间为 *15.11.2027 23:59*。 ### Related API - [repeat_date](api/config/repeat_date.md) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/last_hour.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/last_hour.md index 49aeba50..6db422d0 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/last_hour.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/last_hour.md @@ -18,7 +18,7 @@ description: "定义 Y 轴小时刻度的上限。" scheduler.config.first_hour = 9; scheduler.config.last_hour = 18; ... -scheduler.init('scheduler_here', new Date(2013,05,11), "week"); +scheduler.init('scheduler_here', new Date(2027,05,11), "week"); ~~~ **Default value:** 24 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/left_border.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/left_border.md index c3a8a77d..f5e76c37 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/left_border.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/left_border.md @@ -17,7 +17,7 @@ description: "在调度器中启用虚线左边框" ~~~jsx scheduler.config.left_border = true; ... -scheduler.init('scheduler_here', new Date(2013, 7, 5), "month"); +scheduler.init('scheduler_here', new Date(2027, 7, 5), "month"); ~~~ **Default value:** false diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/lightbox.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/lightbox.md index adc5371c..59dad6d5 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/lightbox.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/lightbox.md @@ -1,6 +1,6 @@ --- -sidebar_label: "lightbox" -title: "lightbox config" +sidebar_label: lightbox +title: "lightbox 配置" description: "指定 lightbox 对象" --- @@ -15,94 +15,94 @@ description: "指定 lightbox 对象" ### Example ~~~jsx -scheduler.config.lightbox.sections=[ - { name:"description", height:50, type:"textarea", map_to:"text", focus:true}, - { name:"location", height:43, type:"textarea", map_to:"event_location"}, - { name:"time", height:72, type:"time", map_to:"auto"} +scheduler.config.lightbox.sections = [ + { name: "description", height: 50, type: "textarea", map_to: "text", focus: true }, + { name: "location", height: 43, type: "textarea", map_to: "event_location" }, + { name: "time", height: 72, type: "time", map_to: "auto" } ]; -... -scheduler.init('scheduler_here',new Date(2013,2,1),"week"); +... +scheduler.init('scheduler_here', new Date(2027, 2, 1), "week"); ~~~ ### Related samples -- [Checkbox in the lightbox](https://docs.dhtmlx.com/scheduler/samples/02_customization/13_single_checkbox_section.html) -- [Radio button in the lightbox](https://docs.dhtmlx.com/scheduler/samples/02_customization/14_radio_buttons_section.html) +- [lightbox 中的复选框](https://docs.dhtmlx.com/scheduler/samples/02_customization/13_single_checkbox_section.html) +- [lightbox 中的单选按钮](https://docs.dhtmlx.com/scheduler/samples/02_customization/14_radio_buttons_section.html) ### Details lightbox 对象包含一个主要属性: -- **sections** - (*数组*) 定义在 lightbox 中显示的各个部分 +- `sections` - (array) specifies the lightbox sections ~~~js //默认定义 -scheduler.config.lightbox.sections=[ - {name:"description", height:200, map_to:"text", type:"textarea" , focus:true}, - {name:"time", height:72, type:"time", map_to:"auto"} -] +scheduler.config.lightbox.sections = [ + { name: "description", height: 200, map_to: "text", type: "textarea", focus: true }, + { name: "time", height: 72, type: "time", map_to: "auto" } +]; ~~~ -**sections** 数组中的每个项可以包含以下属性: +Each object in the **sections** array can have the following properties: - + - + - + - + - + - + - + - + - + - + - + - +
name(字符串) 部分的名称，scheduler 会通过 locale.labels 集合获取该部分的标签。例如，'time' 部分的标签为 scheduler.locale.labels.section_time。(string) 区段的名称（根据这个名称，调度器将从 locale.labels 集合中获取该区段的标签）。例如，对于 'time' 区段，调度器将获取存储为 `scheduler.locale.labels.section_time` 的标签。
height(数字) 部分的高度(number) 区段的高度
map_to('auto' 或字符串) 与该部分关联的数据属性名称（详见下文）('auto' or string) 将映射到该区段的数据属性名称（见下方详情）
type(textarea,time,select,template,multiselect,radio,checkbox,combo) 部分使用的控件类型(textarea,time,select,template,multiselect,radio,checkbox,combo) 区段控件（编辑器）类型
time_format(字符串) 定义"时间段"部分中日期和时间控件的排列顺序(string) 设置 'Time Period' 区段中日期时间控件的顺序
focus(布尔值) 如果设置为 true，lightbox 打开时该部分将自动获得焦点(boolean) 如果设置为 true，打开 lightbox 时该区段将获得焦点
default_value(任意类型) 该部分控件的默认值(any) 该区段控件的默认值
onchange(函数) 控件的 'onChange' 事件处理函数（仅适用于 'select' 控件）(function) 指定该区段控件的 'onChange' 事件处理函数（仅适用于 'select' 控件）
options(对象数组) 定义类似 'select', 'multiselect', 'radio', 'combo' 控件的选项。
每个对象表示一个选项，包含以下属性:
  • key - (字符串) 选项的 ID，用于匹配事件数据属性
  • label - (字符串) 选项的显示标签
(array of objects) 定义控件的选项（适用于 'select', 'multiselect', 'radio', 'combo' 控件）。数组中的每个对象定义一个选项，并包含以下属性：
  • key - (string) 选项的 id。此属性会与事件的数据属性进行比较以将选项分配给事件
  • label - (string) 选项的标签
vertical(布尔值) 决定 radio 按钮是垂直排列 (true) 还是水平排列 (false)（仅适用于 'select' 控件）(boolean) 指定单选按钮应垂直排列（true）还是水平排列（false）
仅适用于 'select' 控件
checked_value(布尔值) 复选框被选中时的值。可选，默认为 true（仅适用于 'checkbox' 控件）(boolean) 勾选状态下复选框的值。可选。默认值为 true（仅适用于 'checkbox' 控件）
unchecked_value(布尔值) 复选框未选中时的值。可选，默认为 false（仅适用于 'checkbox' 控件）(boolean) 未勾选状态下复选框的值。可选。默认值为 false（仅适用于 'checkbox' 控件）
## 'map_to:"auto"' 是什么意思？ -当 'map_to' 属性设置为 'auto' 时: +当 `map_to` 属性设置为 `auto` 时: -- 控件本身不返回值，而是通过 'set_value()' 方法直接更新事件的属性（详见 [Custom Lightbox Control](guides/custom-lightbox-editor.md)）。 +- 控件本身不返回值，而是通过 `set_value()` 方法直接更新事件的属性（详见 [Custom Lightbox Control](guides/custom-lightbox-editor.md)）。 - 通常用于同时处理多个事件属性的复杂控件。 ### Related Guides -- [완전히 커스텀된 라이트박스](guides/custom-details-form.md) +- [Fully Custom Lightbox](guides/custom-details-form.md) \ No newline at end of file diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/lightbox_recurring.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/lightbox_recurring.md index ecf6fb26..70e2895a 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/lightbox_recurring.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/lightbox_recurring.md @@ -17,7 +17,7 @@ description: "控制编辑重复事件时 lightbox 的行为方式" ~~~jsx scheduler.config.lightbox_recurring = 'series'; ... -scheduler.init('scheduler_here',new Date(2013,05,11),"week"); +scheduler.init('scheduler_here',new Date(2027,05,11),"week"); ~~~ **Default value:** 'ask' diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/limit_end.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/limit_end.md index 2f243ce0..32ff8b0a 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/limit_end.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/limit_end.md @@ -15,10 +15,10 @@ description: "定义允许日期范围的结束边界" ### Example ~~~jsx -scheduler.config.limit_start = new Date(2018,5,15); -scheduler.config.limit_end = new Date(2018,6,15); +scheduler.config.limit_start = new Date(2027,5,15); +scheduler.config.limit_end = new Date(2027,6,15); ... -scheduler.init('scheduler_here', new Date(2018,5,30), "week"); +scheduler.init('scheduler_here', new Date(2027,5,30), "week"); ~~~ **Default value:** null @@ -36,8 +36,8 @@ scheduler.init('scheduler_here', new Date(2018,5,30), "week"); 此外，您可以通过使用 [limit_view](api/config/limit_view.md) 中的属性来控制是否显示该范围之外的事件: ~~~js -scheduler.config.limit_start = new Date(2018,5,15); -scheduler.config.limit_end = new Date(2018,6,15); +scheduler.config.limit_start = new Date(2027,5,15); +scheduler.config.limit_end = new Date(2027,6,15); scheduler.config.limit_view = true; ~~~ diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/limit_start.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/limit_start.md index 5beab0ff..6d984e60 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/limit_start.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/limit_start.md @@ -15,10 +15,10 @@ description: "设置允许日期范围的起始边界" ### Example ~~~jsx -scheduler.config.limit_start = new Date(2018,5,15); -scheduler.config.limit_end = new Date(2018,6,15); +scheduler.config.limit_start = new Date(2027,5,15); +scheduler.config.limit_end = new Date(2027,6,15); ... -scheduler.init('scheduler_here', new Date(2018,5,30), "week"); +scheduler.init('scheduler_here', new Date(2027,5,30), "week"); ~~~ **Default value:** null @@ -35,8 +35,8 @@ scheduler.init('scheduler_here', new Date(2018,5,30), "week"); **limit_start** 和 **limit_end** 设置限制了可以创建新事件的日期范围。此外，通过启用 `limit_view` 属性，可以防止查看该允许范围之外的事件: ~~~js -scheduler.config.limit_start = new Date(2018,5,15); -scheduler.config.limit_end = new Date(2018,6,15); +scheduler.config.limit_start = new Date(2027,5,15); +scheduler.config.limit_end = new Date(2027,6,15); scheduler.config.limit_view = true; ~~~ diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/limit_time_select.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/limit_time_select.md index 1028426f..fe5b0214 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/limit_time_select.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/limit_time_select.md @@ -17,7 +17,7 @@ description: "通过设置 'last_hour' 和 'first_hour' 选项的最大值和最 ~~~jsx scheduler.config.limit_time_select = true; ... -scheduler.init('scheduler_here',new Date(2013,0,10),"week"); +scheduler.init('scheduler_here',new Date(2027,0,10),"week"); ~~~ **Default value:** false diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/limit_view.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/limit_view.md index c8142716..1f342502 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/limit_view.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/limit_view.md @@ -15,7 +15,7 @@ description: "限制用户浏览事件的日期范围" ### Example ~~~jsx -scheduler.init('scheduler_here',new Date(2022,5,17),"week"); +scheduler.init('scheduler_here',new Date(2027,5,17),"week"); ... scheduler.config.limit_view = true; ~~~ @@ -24,13 +24,13 @@ scheduler.config.limit_view = true; ### Details -例如，将限制设置为2023年，意味着用户无法导航到2022年--只能访问2023年内的日期。 +例如，将限制设置为2023年，意味着用户无法导航到2027年--只能访问2028年内的日期。 如果同时定义了用于限制新事件创建时间段的 **limit_start/limit_end** 设置，**limit_view** 将阻止查看该允许日期范围之外的事件。 ~~~js -scheduler.config.limit_start = new Date(2022,5,15); -scheduler.config.limit_end = new Date(2022,6,15); +scheduler.config.limit_start = new Date(2027,5,15); +scheduler.config.limit_end = new Date(2027,6,15); scheduler.config.limit_view = true; ~~~ diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/load_date.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/load_date.md index 33842aaa..dcacb135 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/load_date.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/load_date.md @@ -16,7 +16,7 @@ description: "定义动态加载时服务器请求参数 'from' 和 'to' 的格 ~~~jsx scheduler.config.load_date = "%Y.%m.%d"; -scheduler.init('scheduler_here',new Date(2009,10,1),"month"); +scheduler.init('scheduler_here',new Date(2027,10,1),"month"); scheduler.setLoadMode("month"); scheduler.load("data/events.php"); diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/map_end.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/map_end.md index 80d84bdb..be1dcac6 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/map_end.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/map_end.md @@ -15,10 +15,10 @@ description: "定义显示事件的截止日期" ### Example ~~~jsx -scheduler.config.map_start = new Date(2012, 7, 1); -scheduler.config.map_end = new Date(2014, 7, 1); +scheduler.config.map_start = new Date(2025, 7, 1); +scheduler.config.map_end = new Date(2027, 7, 1); ... -scheduler.init('scheduler_here', new Date(2013, 0, 10), "map"); +scheduler.init('scheduler_here', new Date(2026, 0, 10), "map"); ~~~ **Default value:** 'map_start' (value) + 1 year diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/map_error_position.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/map_error_position.md index a9dcbb18..aba754b5 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/map_error_position.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/map_error_position.md @@ -19,7 +19,7 @@ description: "定义当事件位置无法确定时在地图上显示的位置" ~~~jsx scheduler.config.map_error_position = new google.maps.LatLng(51.477840, -0.001492); ... -scheduler.init('scheduler_here',new Date(2013,05,11),"map"); +scheduler.init('scheduler_here',new Date(2027,05,11),"map"); ~~~ **Default value:** google.maps.LatLng(15, 15) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/map_infowindow_max_width.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/map_infowindow_max_width.md index b38e6114..5cb764d0 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/map_infowindow_max_width.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/map_infowindow_max_width.md @@ -17,7 +17,7 @@ description: "设置地图视图中地图上弹出标记的最大宽度。" ~~~jsx scheduler.config.map_infowindow_max_width = 350; ... -scheduler.init('scheduler_here',new Date(2013,05,11),"week"); +scheduler.init('scheduler_here',new Date(2027,05,11),"week"); ~~~ **Default value:** 300 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/map_initial_position.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/map_initial_position.md index 9f55e44f..13a42735 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/map_initial_position.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/map_initial_position.md @@ -19,7 +19,7 @@ description: "设置地图的初始显示位置" ~~~jsx scheduler.config.map_initial_position = new google.maps.LatLng(51.477840, -0.001492); ... -scheduler.init('scheduler_here', new Date(2013,05,11), "map"); +scheduler.init('scheduler_here', new Date(2027,05,11), "map"); ~~~ **Default value:** google.maps.LatLng(48.724, 8.215) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/map_initial_zoom.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/map_initial_zoom.md index 64676c66..623a5fad 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/map_initial_zoom.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/map_initial_zoom.md @@ -17,7 +17,7 @@ description: "设置地图视图中地图的初始缩放级别" ~~~jsx scheduler.config.map_initial_zoom = 7; ... -scheduler.init('scheduler_here', new Date(2013,05,11), "week"); +scheduler.init('scheduler_here', new Date(2027,05,11), "week"); ~~~ **Default value:** 1 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/map_resolve_event_location.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/map_resolve_event_location.md index 5ca47e70..52866a40 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/map_resolve_event_location.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/map_resolve_event_location.md @@ -17,7 +17,7 @@ description: "当事件的坐标尚未存储在数据库中时，启用自动尝 ~~~jsx scheduler.config.map_resolve_event_location = false; ... -scheduler.init('scheduler_here',new Date(2013,05,11),"week"); +scheduler.init('scheduler_here',new Date(2027,05,11),"week"); ~~~ **Default value:** true diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/map_resolve_user_location.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/map_resolve_user_location.md index 8a13fe93..e7478fa4 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/map_resolve_user_location.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/map_resolve_user_location.md @@ -17,7 +17,7 @@ description: "控制是否提示用户共享其位置以显示在地图上" ~~~jsx scheduler.config.map_resolve_user_location = false; ... -scheduler.init('scheduler_here', new Date(2013,05,11), "week"); +scheduler.init('scheduler_here', new Date(2027,05,11), "week"); ~~~ **Default value:** true diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/map_settings.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/map_settings.md index af497183..57a0b891 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/map_settings.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/map_settings.md @@ -33,7 +33,7 @@ scheduler.config.map_settings = { view_provider: "googleMap" } ... -scheduler.init('scheduler_here',new Date(2024,05,11),"map"); +scheduler.init('scheduler_here',new Date(2027,05,11),"map"); ~~~ **Applicable views:** [Map view](views/map.md) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/map_start.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/map_start.md index 72a77903..a78ad9f4 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/map_start.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/map_start.md @@ -15,10 +15,10 @@ description: "指定事件开始显示的日期" ### Example ~~~jsx -scheduler.config.map_start = new Date(2012, 7, 1); -scheduler.config.map_end = new Date(2014, 7, 1); +scheduler.config.map_start = new Date(2025, 7, 1); +scheduler.config.map_end = new Date(2027, 7, 1); ... -scheduler.init('scheduler_here', new Date(2013, 0, 10), "map"); +scheduler.init('scheduler_here', new Date(2026, 0, 10), "map"); ~~~ **Default value:** 当前用户的日期 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/map_type.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/map_type.md index 8c3de170..9b9afaef 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/map_type.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/map_type.md @@ -19,7 +19,7 @@ description: "定义 Google Maps 的类型" ~~~jsx scheduler.config.map_type = google.maps.MapTypeId.HYBRID; ... -scheduler.init('scheduler_here',new Date(2013,05,11),"map"); +scheduler.init('scheduler_here',new Date(2027,05,11),"map"); ~~~ **Default value:** ROADMAP diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/map_view_provider.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/map_view_provider.md index 6ab15bbf..00c0699f 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/map_view_provider.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/map_view_provider.md @@ -17,7 +17,7 @@ description: "定义使用哪个地图提供商" ~~~jsx scheduler.config.map_view_provider = "googleMap"; ... -scheduler.init('scheduler_here', new Date(2024, 05, 11), "map"); +scheduler.init('scheduler_here', new Date(2027, 05, 11), "map"); ~~~ **Applicable views:** [Map view](views/map.md) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/map_zoom_after_resolve.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/map_zoom_after_resolve.md index 0ce4cb07..58cd46ec 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/map_zoom_after_resolve.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/map_zoom_after_resolve.md @@ -17,7 +17,7 @@ description: "设置在浏览器请求权限且用户同意时，显示用户位 ~~~jsx scheduler.config.map_zoom_after_resolve = 10; ... -scheduler.init('scheduler_here', new Date(2013, 05, 11), "week"); +scheduler.init('scheduler_here', new Date(2027, 05, 11), "week"); ~~~ **Default value:** 15 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/mark_now.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/mark_now.md index 4f6eeedf..679259d4 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/mark_now.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/mark_now.md @@ -17,7 +17,7 @@ description: "打开或关闭当前时间的标记器" ~~~jsx scheduler.config.mark_now = false; ... -scheduler.init('scheduler_here',new Date(2013,05,11),"week"); +scheduler.init('scheduler_here',new Date(2027,05,11),"week"); ~~~ **Default value:** true diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/max_month_events.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/max_month_events.md index da49dbbb..91d0f358 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/max_month_events.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/max_month_events.md @@ -17,7 +17,7 @@ description: "控制单个单元格中显示的最大事件数量" ~~~jsx scheduler.config.max_month_events = 5; .. -scheduler.init('scheduler_here', new Date(2013,5,30),"month"); +scheduler.init('scheduler_here', new Date(2027,5,30),"month"); ~~~ **Applicable views:** [Month view](views/month.md) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/minicalendar.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/minicalendar.md index d3f24dca..23ebc937 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/minicalendar.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/minicalendar.md @@ -17,7 +17,7 @@ description: "定义 mini calendar 对象" ~~~jsx scheduler.config.minicalendar.mark_events = false; ... -scheduler.init('scheduler_here', new Date(2013, 7, 5), "week"); +scheduler.init('scheduler_here', new Date(2027, 7, 5), "week"); ~~~ **Default value:** \{ mark_events: true \} diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/month_date.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/month_date.md index 1bca5dc2..af61c578 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/month_date.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/month_date.md @@ -17,7 +17,7 @@ description: "定义月视图头部的日期格式" ~~~jsx scheduler.config.month_date = "%F, %Y"; ... -scheduler.init('scheduler_here',new Date(2013,05,11),"week"); +scheduler.init('scheduler_here',new Date(2027,05,11),"week"); ~~~ **Default value:** "%F %Y" diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/month_day.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/month_day.md index e423b62d..19a50bcc 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/month_day.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/month_day.md @@ -17,7 +17,7 @@ description: "定义用于在月视图和年视图的单元格中显示日期的 ~~~jsx scheduler.config.month_day="%j"; ... -scheduler.init('scheduler_here',new Date(2013,05,11),"week"); +scheduler.init('scheduler_here',new Date(2027,05,11),"week"); ~~~ **Default value:** "%d" diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/month_day_min_height.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/month_day_min_height.md index 739648d0..259a1193 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/month_day_min_height.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/month_day_min_height.md @@ -17,7 +17,7 @@ description: "设置月视图中单元格的最小高度" ~~~jsx scheduler.config.month_day_min_height = 150; ... -scheduler.init('scheduler_here', new Date(2013,5,30), "month"); +scheduler.init('scheduler_here', new Date(2027,5,30), "month"); ~~~ **Default value:** 90 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/multi_day.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/multi_day.md index 2f18be33..96b44d99 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/multi_day.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/multi_day.md @@ -17,7 +17,7 @@ description: "允许显示跨越多天的事件" ~~~jsx scheduler.config.multi_day = false; -scheduler.init('scheduler_here', new Date(2020,7,11), "week"); +scheduler.init('scheduler_here', new Date(2027,7,11), "week"); ~~~ **Default value:** true diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/multi_day_height_limit.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/multi_day_height_limit.md index d2a7cc9b..6128c6e1 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/multi_day_height_limit.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/multi_day_height_limit.md @@ -17,7 +17,7 @@ description: "控制显示多日事件部分的高度" ~~~jsx scheduler.config.multi_day_height_limit = 30; ... -scheduler.init('scheduler_here',new Date(2013,7,11),"week"); +scheduler.init('scheduler_here',new Date(2027,7,11),"week"); ~~~ **Default value:** 200 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/multisection.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/multisection.md index b9e41d75..d5b18452 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/multisection.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/multisection.md @@ -19,7 +19,7 @@ description: "允许在 Timeline 或 Units 视图中跨多个 section 渲染相 ~~~jsx scheduler.config.multisection = true; -scheduler.init('scheduler_here', new Date(2012, 5, 30), "timeline"); +scheduler.init('scheduler_here', new Date(2027, 5, 30), "timeline"); ~~~ **Default value:** false diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/multisection_shift_all.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/multisection_shift_all.md index 3ee78f70..b4c0069b 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/multisection_shift_all.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/multisection_shift_all.md @@ -19,7 +19,7 @@ description: "控制在 Timeline 或 Units 视图中拖动分配给多个 sectio ~~~jsx scheduler.config.multisection_shift_all = false; -scheduler.init('scheduler_here', new Date(2012, 5, 30), "timeline"); +scheduler.init('scheduler_here', new Date(2027, 5, 30), "timeline"); ~~~ **Default value:** true diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/now_date.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/now_date.md index a3f629e1..ceafa730 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/now_date.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/now_date.md @@ -15,9 +15,9 @@ description: "设置 Limit 扩展中当前时间标记的日期（通过 - mark_ ### Example ~~~jsx -scheduler.config.now_date = new Date(2010, 7, 5); +scheduler.config.now_date = new Date(2027, 7, 5); ... -scheduler.init('scheduler_here', new Date(2010, 7, 5), "week"); +scheduler.init('scheduler_here', new Date(2027, 7, 5), "week"); ~~~ ### Details diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/occurrence_timestamp_in_utc.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/occurrence_timestamp_in_utc.md index 76ac16a9..9887c69d 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/occurrence_timestamp_in_utc.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/occurrence_timestamp_in_utc.md @@ -17,7 +17,7 @@ description: "让您处理重复事件时无需担心时区问题" ~~~jsx scheduler.config.occurrence_timestamp_in_utc = true; ... -scheduler.init('scheduler_here',new Date(2013,05,11),"week"); +scheduler.init('scheduler_here',new Date(2027,05,11),"week"); ~~~ **Default value:** false diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/overwrite_marked_timespans.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/overwrite_marked_timespans.md index 23b16c29..995bc020 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/overwrite_marked_timespans.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/overwrite_marked_timespans.md @@ -36,4 +36,4 @@ scheduler.config.overwrite_marked_timespans = false; - [Blocking and Marking Dates](guides/limits.md#blockingpriority) ### Change log -- added in v6.0 +- 6.0 版本新增 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/parse_exact_format.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/parse_exact_format.md index 984de1f1..fbe89b6e 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/parse_exact_format.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/parse_exact_format.md @@ -15,34 +15,32 @@ description: "控制调度器在解析日期时是否严格匹配日期格式" ### Example ~~~jsx -```javascript scheduler.config.parse_exact_format = true; -var parseDate = scheduler.date.str_to_date("%Y-%m-%d %H:%i"); +const parseDate = scheduler.date.str_to_date("%Y-%m-%d %H:%i"); // 日期字符串必须完全匹配指定的格式 -parseDate("2019-01-15 12:00"); -// -> Tue Jan 15 2019 12:00:00 +parseDate("2027-01-15 12:00"); +// -> Fri Jan 15 2027 12:00:00 -parseDate("15-01-2019 12:00"); -// -> Sun Jul 11 1920 12:00:00 +parseDate("11-01-2027 12:00"); +// -> Mon Jan 11 2027 12:00:00 -parseDate("2019-01-15T12:00"); +parseDate("2027-01-15T12:00"); // -> Invalid Date scheduler.config.parse_exact_format = false; -var parseDate = scheduler.date.str_to_date("%Y-%m-%d %H:%i"); +const parseDate = scheduler.date.str_to_date("%Y-%m-%d %H:%i"); // 调度器尝试识别传入日期字符串的格式 -parseDate("2019-01-15 12:00"); -// -> Tue Jan 15 2019 12:00:00 +parseDate("2027-01-15 12:00"); +// -> Fri Jan 15 2027 12:00:00 -parseDate("15-01-2019 12:00"); -// -> Tue Jan 15 2019 12:00:00 +parseDate("11-01-2027 12:00"); +// -> Mon Jan 11 2027 12:00:00 -parseDate("2019-01-15T12:00"); -// -> Tue Jan 15 2019 12:00:00 -``` +parseDate("2027-01-15T12:00"); +// -> Fri Jan 15 2027 12:00:00 ~~~ **Default value:** false diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/positive_closing.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/positive_closing.md index 559222d4..d0101f08 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/positive_closing.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/positive_closing.md @@ -17,7 +17,7 @@ description: "控制用户在事件框内直接编辑事件文本时的'保存' ~~~jsx scheduler.config.positive_closing = true; ... -scheduler.init('scheduler_here', new Date(2013,05,11), "week"); +scheduler.init('scheduler_here', new Date(2027,05,11), "week"); ~~~ **Default value:** false diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/preserve_scroll.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/preserve_scroll.md index 14b84699..0f70a312 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/preserve_scroll.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/preserve_scroll.md @@ -17,7 +17,7 @@ description: "在同一视图中切换日期时，停止保持当前的滚动位 ~~~jsx scheduler.config.preserve_scroll = false; ... -scheduler.init('scheduler_here', new Date(2013,05,11), "week"); +scheduler.init('scheduler_here', new Date(2027,05,11), "week"); ~~~ **Default value:** true diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/prevent_cache.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/prevent_cache.md index c0187969..a5f8e96d 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/prevent_cache.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/prevent_cache.md @@ -17,7 +17,7 @@ description: "控制浏览器中是否启用GET请求缓存" ~~~jsx scheduler.config.prevent_cache = true; ... -scheduler.init('scheduler_here',new Date(2009,10,1),"month"); +scheduler.init('scheduler_here',new Date(2027,10,1),"month"); ~~~ **Default value:** false diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/quick_info_detached.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/quick_info_detached.md index c2b8f335..58782cdd 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/quick_info_detached.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/quick_info_detached.md @@ -17,7 +17,7 @@ description: "控制事件表单是从屏幕左侧/右侧弹出，还是紧挨 ~~~jsx scheduler.config.quick_info_detached = false; ... -scheduler.init('scheduler_here',new Date(2013,5,30),"day"); +scheduler.init('scheduler_here',new Date(2027,5,30),"day"); ~~~ **Default value:** true (事件表单将显示在所选事件附近) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/readonly.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/readonly.md index c32d1e99..aa83692f 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/readonly.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/readonly.md @@ -17,7 +17,7 @@ description: "启用调度器的只读模式" ~~~jsx scheduler.config.readonly = true; ... -scheduler.init('scheduler_here',new Date(2013,05,11),"week"); +scheduler.init('scheduler_here',new Date(2027,05,11),"week"); ~~~ **Default value:** false diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/readonly_form.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/readonly_form.md index c9b43c04..9e82c2c5 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/readonly_form.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/readonly_form.md @@ -17,7 +17,7 @@ description: "为 lightbox 启用只读模式" ~~~jsx scheduler.config.readonly_form = true; ... -scheduler.init('scheduler_here',new Date(2013,05,11),"month"); +scheduler.init('scheduler_here',new Date(2027,05,11),"month"); ~~~ **Default value:** false diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/repeat_date.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/repeat_date.md index 94484577..9d155e07 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/repeat_date.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/repeat_date.md @@ -17,7 +17,7 @@ description: "指定'recurring' lightbox 中'End by'字段使用的日期格式" ~~~jsx scheduler.config.repeat_date = "%m/%d/%Y"; ... -scheduler.init('scheduler_here',new Date(2019,05,11),"month"); +scheduler.init('scheduler_here',new Date(2027,05,11),"month"); ~~~ **Default value:** "%m.%d.%Y" diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/resize_month_events.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/resize_month_events.md index 9c69e80e..45b54e48 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/resize_month_events.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/resize_month_events.md @@ -17,7 +17,7 @@ description: "允许在月视图中通过拖放操作调整多日事件的大小 ~~~jsx scheduler.config.resize_month_events = true; -scheduler.init('scheduler_here', new Date(2010,0,10), "month"); +scheduler.init('scheduler_here', new Date(2027,0,10), "month"); ~~~ **Default value:** false diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/resize_month_timed.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/resize_month_timed.md index 7bfd55c6..4373711b 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/resize_month_timed.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/resize_month_timed.md @@ -18,7 +18,7 @@ description: "允许通过拖拽调整月视图中单日事件的大小" scheduler.config.resize_month_events = true; /*!*/ scheduler.config.resize_month_timed = true; /*!*/ -scheduler.init('scheduler_here',new Date(2010,0,10),"month"); +scheduler.init('scheduler_here',new Date(2027,0,10),"month"); ~~~ **Default value:** false diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/rtl.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/rtl.md index fda5323b..8f622ee6 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/rtl.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/rtl.md @@ -17,7 +17,7 @@ description: "为调度器开启 RTL（从右到左）模式" ~~~jsx scheduler.config.rtl = true; ... -scheduler.init('scheduler_here', new Date(2018,0,1), "week"); +scheduler.init('scheduler_here', new Date(2027,0,1), "week"); ~~~ **Default value:** false diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/select.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/select.md index 70ecd58c..486e8a08 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/select.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/select.md @@ -17,7 +17,7 @@ description: "切换事件框内select栏的可见性" ~~~jsx scheduler.config.select = false; ... -scheduler.init('scheduler_here',new Date(2013,0,10),"week"); +scheduler.init('scheduler_here',new Date(2027,0,10),"week"); ~~~ **Default value:** true diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/separate_short_events.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/separate_short_events.md index 7cfc89b9..d62d2e0d 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/separate_short_events.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/separate_short_events.md @@ -17,7 +17,7 @@ description: "帮助避免短事件重叠" ~~~jsx scheduler.config.separate_short_events = true; ... -scheduler.init('scheduler_here', new Date(2013,05,11), "week"); +scheduler.init('scheduler_here', new Date(2027,05,11), "week"); ~~~ **Default value:** false diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/server_utc.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/server_utc.md index 1dd2fd66..a69cbd49 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/server_utc.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/server_utc.md @@ -17,7 +17,7 @@ description: "允许在与服务器交换数据时，将服务器端日期在 UT ~~~jsx scheduler.config.server_utc = true; -scheduler.init('scheduler_here',new Date(2013,05,11),"week"); +scheduler.init('scheduler_here',new Date(2027,05,11),"week"); ~~~ **Default value:** false diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/show_errors.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/show_errors.md index 60e5cf7f..7779a974 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/show_errors.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/show_errors.md @@ -24,5 +24,5 @@ scheduler.config.show_errors = false; - [FAQ](faq.md#an-error-alert-appears-in-the-right-top-corner) ### Change log -- added in v6.0 +- 6.0 版本新增 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/show_loading.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/show_loading.md index 57eb929e..006141ef 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/show_loading.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/show_loading.md @@ -17,7 +17,7 @@ description: "在数据加载期间显示进度指示器或spinner，这对于 ~~~jsx scheduler.config.show_loading = true; ... -scheduler.init('scheduler_here',new Date(2013,0,10),"week"); +scheduler.init('scheduler_here',new Date(2027,0,10),"week"); ~~~ **Default value:** false diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/start_on_monday.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/start_on_monday.md index ca9fb0a8..cdf54f84 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/start_on_monday.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/start_on_monday.md @@ -17,7 +17,7 @@ description: "设置一周的起始天" ~~~jsx scheduler.config.start_on_monday = false; ... -scheduler.init('scheduler_here', new Date(2013, 05, 11), "week"); +scheduler.init('scheduler_here', new Date(2027, 05, 11), "week"); ~~~ **Default value:** true diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/time_step.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/time_step.md index 6a30078b..df282a1a 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/time_step.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/time_step.md @@ -17,7 +17,7 @@ description: "设置事件时间值的最小增量（以分钟为单位）" ~~~jsx scheduler.config.time_step = 15; ... -scheduler.init('scheduler_here',new Date(2013,05,11),"week"); +scheduler.init('scheduler_here',new Date(2027,05,11),"week"); ~~~ **Default value:** 5 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/tooltip_hide_timeout.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/tooltip_hide_timeout.md index 3f7cb691..5ea50690 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/tooltip_hide_timeout.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/tooltip_hide_timeout.md @@ -20,7 +20,7 @@ scheduler.plugins({ }); scheduler.config.tooltip_hide_timeout = 5000; -scheduler.init('scheduler_here',new Date(2023,10,20),"week"); +scheduler.init('scheduler_here',new Date(2027,10,20),"week"); ~~~ ### Details diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/tooltip_offset_x.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/tooltip_offset_x.md index 01f06dc4..13ca4c82 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/tooltip_offset_x.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/tooltip_offset_x.md @@ -17,7 +17,7 @@ description: "当设置为正值时，调整tooltip水平偏移量，使其位 ~~~jsx scheduler.config.tooltip_offset_x = 30; -scheduler.init('scheduler_here',new Date(2023,10,20),"week"); +scheduler.init('scheduler_here',new Date(2027,10,20),"week"); ~~~ **Default value:** 10 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/tooltip_offset_y.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/tooltip_offset_y.md index 2a59f287..0f5ebfce 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/tooltip_offset_y.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/tooltip_offset_y.md @@ -17,7 +17,7 @@ description: "通过设置正值的顶部偏移量来调整 tooltip 的垂直位 ~~~jsx scheduler.config.tooltip_offset_y = 40; -scheduler.init('scheduler_here',new Date(2023,10,20),"week"); +scheduler.init('scheduler_here',new Date(2027,10,20),"week"); ~~~ **Default value:** 20 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/tooltip_timeout.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/tooltip_timeout.md index 4af9cd44..53e59998 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/tooltip_timeout.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/tooltip_timeout.md @@ -20,7 +20,7 @@ scheduler.plugins({ }); scheduler.config.tooltip_hide_timeout = 5000; -scheduler.init('scheduler_here',new Date(2023,10,20),"week"); +scheduler.init('scheduler_here',new Date(2027,10,20),"week"); ~~~ **Default value:** 30 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/touch.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/touch.md index db4920d8..5e928a5a 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/touch.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/touch.md @@ -17,7 +17,7 @@ description: "开启或关闭调度器中的touch支持" ~~~jsx scheduler.config.touch = "force"; ... -scheduler.init('scheduler_here',new Date(2013,3,10),"week"); +scheduler.init('scheduler_here',new Date(2027,3,10),"week"); ~~~ **Default value:** true diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/touch_drag.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/touch_drag.md index d5284d5c..8f2fcbb3 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/touch_drag.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/touch_drag.md @@ -17,7 +17,7 @@ description: "设置区分长按手势和滚动手势的持续时间，单位为 ~~~jsx scheduler.config.touch_drag = 750; ... -scheduler.init('scheduler_here',new Date(2013,3,10),"week"); +scheduler.init('scheduler_here',new Date(2027,3,10),"week"); ~~~ **Default value:** 500 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/touch_tip.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/touch_tip.md index b3284c60..e959e0fe 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/touch_tip.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/touch_tip.md @@ -17,7 +17,7 @@ description: "控制提示消息是否显示在屏幕右上角" ~~~jsx scheduler.config.touch_tip = false; ... -scheduler.init('scheduler_here',new Date(2013,0,10),"week"); +scheduler.init('scheduler_here',new Date(2027,0,10),"week"); ~~~ **Default value:** true diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/undo_deleted.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/undo_deleted.md index 35f4e7d0..67c519ab 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/undo_deleted.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/undo_deleted.md @@ -18,7 +18,7 @@ description: "启用删除事件后出现的Undo弹出窗口" // 关闭Undo弹出窗口 scheduler.config.undo_deleted = false; /*!*/ -scheduler.init('scheduler_here',new Date(2010,0,10),"week"); +scheduler.init('scheduler_here',new Date(2027,0,10),"week"); scheduler.load("./data/events.xml"); ~~~ diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/update_render.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/update_render.md index 5d586494..058a40c5 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/update_render.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/update_render.md @@ -17,7 +17,7 @@ description: "控制调度器是否在每次操作后完全重绘自身" ~~~jsx scheduler.config.update_render = true; ... -scheduler.init('scheduler_here',new Date(2013,7,11),"week"); +scheduler.init('scheduler_here',new Date(2027,7,11),"week"); ~~~ **Default value:** false diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/use_select_menu_space.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/use_select_menu_space.md index 1180d9b9..0fe74b75 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/use_select_menu_space.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/use_select_menu_space.md @@ -17,7 +17,7 @@ description: "定义事件是否占用单元格的整个宽度" ~~~jsx scheduler.config.use_select_menu_space = false; ... -scheduler.init('scheduler_here',new Date(2013,05,11),"week"); +scheduler.init('scheduler_here',new Date(2027,05,11),"week"); ~~~ **Default value:** true diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/week_agenda_select.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/week_agenda_select.md index da078de6..2f87bb4b 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/week_agenda_select.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/week_agenda_select.md @@ -18,7 +18,7 @@ description: "在 Week Agenda 视图中突出显示所选事件" ~~~jsx scheduler.config.week_agenda_select= false; /*!*/ -scheduler.init('scheduler_here',new Date(2013,0,10),"agenda_week"); +scheduler.init('scheduler_here',new Date(2027,0,10),"agenda_week"); ~~~ **Default value:** true diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/week_date.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/week_date.md index 17645441..fa5c9982 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/week_date.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/week_date.md @@ -17,7 +17,7 @@ description: "定义月视图子标题中显示的日期格式。" ~~~jsx scheduler.config.week_date="%l, %W"; ... -scheduler.init('scheduler_here',new Date(2013,05,11),"week"); +scheduler.init('scheduler_here',new Date(2027,05,11),"week"); ~~~ **Default value:** "%l" diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/wide_form.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/wide_form.md index 0216b538..4a86b86a 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/wide_form.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/wide_form.md @@ -17,7 +17,7 @@ description: "控制是否显示标准（wide）lightbox，而非简短版本" ~~~jsx scheduler.config.wide_form = true; ... -scheduler.init('scheduler_here', new Date(2013, 7, 5), "week"); +scheduler.init('scheduler_here', new Date(2027, 7, 5), "week"); ~~~ **Default value:** true diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/year_x.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/year_x.md index 7d554837..7bd70bf9 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/year_x.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/year_x.md @@ -18,7 +18,7 @@ description: "指定Year视图中显示的行数" scheduler.config.year_x = 5; scheduler.config.year_y = 5; ... -scheduler.init('scheduler_here',new Date(2013,0,10),"year"); +scheduler.init('scheduler_here',new Date(2027,0,10),"year"); ~~~ **Default value:** 4 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/year_y.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/year_y.md index bb1e0914..aed477e0 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/year_y.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/year_y.md @@ -18,7 +18,7 @@ description: "设置年视图中显示的列数" scheduler.config.year_x = 5; scheduler.config.year_y = 5; ... -scheduler.init('scheduler_here', new Date(2013, 0, 10), "year"); +scheduler.init('scheduler_here', new Date(2027, 0, 10), "year"); ~~~ **Default value:** 3 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/event/onbeforedrag.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/event/onbeforedrag.md index 55291737..9d507761 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/event/onbeforedrag.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/event/onbeforedrag.md @@ -1,41 +1,41 @@ --- -sidebar_label: "onBeforeDrag" -title: "onBeforeDrag event" -description: "当用户开始拖动或调整大小操作时触发（自版本 2.1+ 起可用）" +sidebar_label: onBeforeDrag +title: "onBeforeDrag 事件" +description: "当用户开始拖拽/调整大小操作时触发（版本 2.1+）" --- # onBeforeDrag ### Description -@short: 当用户开始拖动或调整大小操作时触发（自版本 2.1+ 起可用） +@short: 当用户开始拖拽/调整大小操作时触发（版本 2.1+） -@signature: onBeforeDrag: (id: string, mode: string, e: Event) =\> boolean +@signature: onBeforeDrag: (id: string, mode: string, e: Event) => boolean ### Parameters -- `id` - (required) *string* - 事件的标识符 -- `mode` - (required) *string* - 拖动操作的类型:"move"（移动）、"resize"（调整大小）或 "create"（创建） -- `e` - (required) *Event* - 原生事件对象 +- `id` - (必填) *string* - 事件的 ID +- `mode` - (必填) *string* - 拖拽模式： "move","resize" 或 "create" +- `e` - (必填) *Event* - 一个原生事件对象 ### Returns -- ` result` - (boolean) - 决定是否允许事件的默认操作继续执行（true）或阻止（false） +- `result` - (布尔) - 指定事件的默认操作是否会被触发 (`true`) 还是取消 (`false`) ### Example ~~~jsx -scheduler.attachEvent("onBeforeDrag", function (id, mode, e){ - // 可以在这里添加自定义逻辑 +scheduler.attachEvent("onBeforeDrag", (id, mode, e) => { + // 在此处编写任意自定义逻辑 return true; }); ~~~ ### Related samples -- [Read-only lightbox](https://docs.dhtmlx.com/scheduler/samples/03_extensions/12_readonly_form.html) -- [Read-only events](https://docs.dhtmlx.com/scheduler/samples/03_extensions/14_readonly_event.html) +- [只读 lightbox](https://docs.dhtmlx.com/scheduler/samples/03_extensions/12_readonly_form.html) +- [只读事件](https://docs.dhtmlx.com/scheduler/samples/03_extensions/14_readonly_event.html) ### Details 当用户在 scheduler 内点击支持拖动的元素时，会触发此事件。 -对于 "create" 模式，id 参数尚未设置，因为新事件尚未创建。 +对于 "create" 模式，`id` 参数尚未设置，因为新事件尚未创建。 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/event/onbeforeeventchanged.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/event/onbeforeeventchanged.md index 6c9e48a1..200e488b 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/event/onbeforeeventchanged.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/event/onbeforeeventchanged.md @@ -1,40 +1,40 @@ --- -sidebar_label: "onBeforeEventChanged" -title: "onBeforeEventChanged event" -description: "当通过拖拽修改事件但更改尚未保存时触发。" +sidebar_label: onBeforeEventChanged +title: "onBeforeEventChanged 事件" +description: "在通过拖放更改事件后，尚未保存更改时触发。" --- # onBeforeEventChanged ### Description -@short: 当通过拖拽修改事件但更改尚未保存时触发。 +@short: 当事件通过拖放被修改时触发，但修改尚未保存。 -@signature: onBeforeEventChanged: (ev: object, e: Event, is_new: boolean, original: object) =\> boolean +@signature: onBeforeEventChanged: (ev: object, e: Event, is_new: boolean, original: object) => boolean ### Parameters -- `ev` - (required) *object* - 事件修改后的数据对象 -- `e` - (required) *Event* - 原生事件对象 -- `is_new` - (required) *boolean* - 如果用户正在修改一个新事件，返回 'true'；如果编辑的是已有事件，返回 'false' -- `original` - (required) *object* - 事件修改前的数据对象 +- `ev` - (必需) *object* - 变更后的事件数据对象 +- `e` - (必需) *Event* - 原生事件对象 +- `is_new` - (必需) *boolean* - 若用户修改的是新事件则返回 `true`；如果编辑的事件已存在则返回 `false` +- `original` - (必需) *object* - 变更前的事件数据对象 ### Returns -- ` result` - (boolean) - 决定默认事件操作是否继续执行（true）或被取消（false） +- `result` - (boolean) - 指定事件的默认操作是否会被触发（`true`）还是取消（`false`） ### Example ~~~jsx -scheduler.attachEvent("onBeforeEventChanged", function(ev, e, is_new, original){ - //这里写任何自定义逻辑 +scheduler.attachEvent("onBeforeEventChanged", (ev, e, is_new, original) => { + // 在此处执行任意自定义逻辑 return true; }); ~~~ ### Details -每当通过拖拽添加新事件或更新已有事件时，都会触发此事件。 +该事件在通过拖放添加新事件或修改现有事件时触发。 -- 请注意，处理函数中的第一个参数是数据项对象本身，而不仅仅是其ID（因为新建项可能尚未有ID）。 -- 创建新数据项时，未修改的事件将表现为空对象。 -- 此事件是可取消的:处理函数返回 *false* 将阻止数据更新。 +- 请注意，处理函数的第一个参数取自数据项对象，而不是数据项的ID，因为新创建的数据项可能尚未具有ID。 +- 创建新数据项时，未修改的事件对象将是一个空对象。 +- 该事件是可阻塞的：从处理程序返回 `false` 将阻止数据更新。 \ No newline at end of file diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/event/onbeforeviewchange.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/event/onbeforeviewchange.md index ee30ca63..6301f2e2 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/event/onbeforeviewchange.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/event/onbeforeviewchange.md @@ -1,40 +1,40 @@ ---- -sidebar_label: "onBeforeViewChange" -title: "onBeforeViewChange event" -description: "在用户从当前视图切换到另一个视图之前触发" +--- +sidebar_label: onBeforeViewChange +title: "onBeforeViewChange 事件" +description: "在用户将当前视图切换到其他视图之前触发" --- # onBeforeViewChange ### Description -@short: 在用户从当前视图切换到另一个视图之前触发 +@short: 在用户将当前视图切换到其他视图之前触发 -@signature: onBeforeViewChange: (old_mode: string, old_date: object, mode: string, date: object) =\> boolean +@signature: onBeforeViewChange: (old_mode: string, old_date: Date, mode: string, date: Date) =\> boolean ### Parameters -- `old_mode` - (required) *string* - 当前激活的视图 -- `old_date` - (required) *object* - 当前聚焦的日期 -- `mode` - (required) *string* - 即将激活的视图 -- `date` - (required) *object* - 被选择的新日期 +- `old_mode` - (required) *string* - 当前活动的视图 +- `old_date` - (required) *Date* - 当前活动日期 +- `mode` - (required) *string* - 新视图 +- `date` - (required) *Date* - 新日期 ### Returns -- ` result` - (boolean) - 指示是否应继续执行默认事件操作（true）或阻止操作（false） +- `result` - (boolean) - 定义事件的默认操作是否将被触发（`true`）还是取消（`false`） ### Example ~~~jsx -scheduler.attachEvent("onBeforeViewChange", function(old_mode,old_date,mode,date){ - // 可以在这里添加自定义逻辑 +scheduler.attachEvent("onBeforeViewChange", (old_mode, old_date, mode, date) => { + // 在此处编写任意自定义逻辑 return true; }); ~~~ ### Related samples -- [Configuring the Map view](https://docs.dhtmlx.com/scheduler/samples/03_extensions/23_map_view_timeframes.html) +- [配置地图视图](https://docs.dhtmlx.com/scheduler/samples/03_extensions/23_map_view_timeframes.html) ### Details -- 通过返回 *false* 可以阻止此事件，从而保持调度器停留在当前视图。 -- 当调度器首次加载页面时，该事件也会触发；此时，**old_mode** 和 **old_date** 将是未定义的。 +- 事件是可被阻塞的。返回 `false`，Scheduler 将保持当前视图打开。 +- 事件也会在 Scheduler 最初渲染到页面上时触发。在这种情况下，`old_mode` 和 `old_date` 参数未定义。 \ No newline at end of file diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/event/onclick.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/event/onclick.md index 779b76e6..4c967e41 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/event/onclick.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/event/onclick.md @@ -1,41 +1,41 @@ --- -sidebar_label: "onClick" +sidebar_label: onClick title: "onClick event" -description: "当用户点击事件的左键鼠标时触发" +description: "当用户对事件点击左键时触发" --- # onClick ### Description -@short: 当用户点击事件的左键鼠标时触发 +@short: 当用户对事件点击左键时触发 @signature: onClick: (id: string, e: Event) =\> boolean; ### Parameters -- `id` - (required) *string* - 事件的 id -- `e` - (required) *Event* - 一个原生事件对象 +- `id` - (必需) *string* - 事件的 id +- `e` - (必需) *Event* - 原生事件对象 ### Returns -- ` result` - (boolean) - 决定默认事件动作是否继续执行（true）或被阻止（false） +- `result` - (boolean) - 定义事件的默认操作是否将被触发（`true`）还是被取消（`false`） ### Example ~~~jsx -scheduler.attachEvent("onClick", function (id, e){ - // 此处编写自定义逻辑 - return true; - }); +scheduler.attachEvent("onClick", (id, event) => { + // 在此处编写任意自定义逻辑 + return true; +}); ~~~ ### Related samples -- [Hiding the select bar of the event box](https://docs.dhtmlx.com/scheduler/samples/02_customization/10_without_toolbar.html) -- [Read-only lightbox](https://docs.dhtmlx.com/scheduler/samples/03_extensions/12_readonly_form.html) +- [隐藏事件框的选择栏](https://docs.dhtmlx.com/scheduler/samples/02_customization/10_without_toolbar.html) +- [只读 Lightbox](https://docs.dhtmlx.com/scheduler/samples/03_extensions/12_readonly_form.html) ### Details -此事件可以被阻止。事件处理函数返回除 true 以外的任何值都会阻止默认行为（默认行为通常是显示选中条）。 +该事件是可阻止的（blockable）。如果处理函数返回非 `true` 值，默认反应将被阻止。默认情况下，选择栏会显示。 ### Related Guides -- [Lightbox 조작하기](guides/lightbox-editors-manipulations.md#openingthelightboxonasingleclick) +- [Lightbox 的操作](guides/lightbox-editors-manipulations.md#opening-the-lightbox-on-a-single-click) \ No newline at end of file diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/event/oncontextmenu.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/event/oncontextmenu.md index 6c4b3f6f..7c38164f 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/event/oncontextmenu.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/event/oncontextmenu.md @@ -26,7 +26,7 @@ scheduler.attachEvent("onContextMenu", function (id, e){ ~~~ ### Related samples -- 10_integration/01_dhtmlxMenu.html +- [Integration with dhtmlxMenu](https://docs.dhtmlx.com/scheduler/samples/10_integration/01_dhtmlxmenu.html) ### Details diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/event/ondblclick.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/event/ondblclick.md index 8231ad2b..b0a8a084 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/event/ondblclick.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/event/ondblclick.md @@ -1,34 +1,34 @@ --- -sidebar_label: "onDblClick" +sidebar_label: onDblClick title: "onDblClick event" -description: "当用户双击某个事件时触发" +description: "当用户对事件进行双击时触发" --- # onDblClick ### Description -@short: 当用户双击某个事件时触发 +@short: 当用户对事件进行双击时触发 @signature: onDblClick: (id: string, e: Event) =\> boolean; ### Parameters -- `id` - (required) *string* - 事件的id +- `id` - (required) *string* - 事件的 ID - `e` - (required) *Event* - 原生事件对象 ### Returns -- ` result` - (boolean) - 指示事件的默认操作是否继续执行（true）或被阻止（false） +- `result` - (boolean) - 指定事件的默认行为是否会被触发（`true`）还是取消（`false`） ### Example ~~~jsx -scheduler.attachEvent("onDblClick", function (id, e){ - // 在这里编写自定义逻辑 +scheduler.attachEvent("onDblClick", (id, e) => { + // 在此处编写任意自定义逻辑 return true; -}) +}); ~~~ ### Details -此事件可以被阻止。返回*false*将阻止默认行为的发生。 +该事件是可阻止的。返回 `false` 以取消默认行为。 \ No newline at end of file diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/event/ondragend.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/event/ondragend.md index 02323852..c00f1f1f 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/event/ondragend.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/event/ondragend.md @@ -21,7 +21,7 @@ description: "当拖拽或调整大小操作完成时触发" ### Example ~~~jsx -var dragged_event; +let dragged_event; scheduler.attachEvent("onBeforeDrag", function (id, mode, e){ // 这有助于捕获正在被拖拽的事件 dragged_event = scheduler.getEvent(id); @@ -29,7 +29,7 @@ scheduler.attachEvent("onBeforeDrag", function (id, mode, e){ }); scheduler.attachEvent("onDragEnd", function(id, mode, e){ - var event_obj = dragged_event; + let event_obj = dragged_event; // 在这里放置您的自定义逻辑 }); ~~~ diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/event/oneventdrag.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/event/oneventdrag.md index 2efb6936..0a43204d 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/event/oneventdrag.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/event/oneventdrag.md @@ -1,39 +1,39 @@ --- -sidebar_label: "onEventDrag" -title: "onEventDrag event" -description: "当事件在调度器中被拖动或调整大小时触发" +sidebar_label: onEventDrag +title: "onEventDrag 事件" +description: "在调度器中拖拽/调整事件时触发" --- # onEventDrag ### Description -@short: 当事件在调度器中被拖动或调整大小时触发 +@short: 当用户在调度器中拖拽/调整事件时触发 -@signature: onEventDrag: (id: string, mode: string, ev: Event) =\> void; +@signature: onEventDrag: (id: string, mode: string, e: Event) =\> void; ### Parameters - `id` - (required) *string* - 事件的 id -- `mode` - (required) *string* - 拖动模式:"move"（移动）、"resize"（调整大小）或 "new-size"（创建新事件时） -- `e` - (required) *Event* - 原生事件对象 +- `mode` - (required) *string* - 拖拽模式: "move","resize" 或 "new-size"（创建新事件） +- `e` - (required) *Event* - 本机原生事件对象 ### Example ~~~jsx -scheduler.attachEvent("onEventDrag", function (id, mode, e){ - // 可以在这里添加自定义逻辑 +scheduler.attachEvent("onEventDrag", (id, mode, e) => { + // 在此处编写任意自定义逻辑 }); ~~~ ### Related samples -- [Read-only lightbox](https://docs.dhtmlx.com/scheduler/samples/03_extensions/12_readonly_form.html) -- [Read-only events](https://docs.dhtmlx.com/scheduler/samples/03_extensions/14_readonly_event.html) +- [只读 Lightbox](https://docs.dhtmlx.com/scheduler/samples/03_extensions/12_readonly_form.html) +- [只读事件](https://docs.dhtmlx.com/scheduler/samples/03_extensions/14_readonly_event.html) ### Details -模式说明: +模式描述： -- **move** - 事件正在调度器中被拖动。 -- **resize** - 事件正在通过拖放操作调整大小。 -- **new-size** - 通过拖放操作创建一个新事件。 +- `move` - 用户在 Scheduler 上拖动事件 +- `resize` - 用户通过拖拽调整事件大小 +- `new-size` - 用户通过拖拽创建一个新事件 \ No newline at end of file diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/event/onviewchange.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/event/onviewchange.md index d62cd67f..2728bd81 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/event/onviewchange.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/event/onviewchange.md @@ -1,30 +1,30 @@ --- -sidebar_label: "onViewChange" -title: "onViewChange event" -description: "在当前视图切换到另一个视图后触发" +sidebar_label: onViewChange +title: "onViewChange 事件" +description: "在当前视图切换为其他视图后触发" --- # onViewChange ### Description -@short: 在当前视图切换到另一个视图后触发 +@short: 在当前视图切换为其他视图后触发 -@signature: onViewChange: (new_mode: string, new_date: object) =\> void +@signature: onViewChange: (new_mode: string, new_date: Date) =\> void ### Parameters -- `new_mode` - (required) *string* - 更新后的视图 -- `new_date` - (required) *object* - 更新后的日期 +- `new_mode` - (required) *string* - 新的视图 +- `new_date` - (required) *Date* - 新日期 ### Example ~~~jsx -scheduler.attachEvent("onViewChange", function (new_mode , new_date){ - //在这里编写任何自定义逻辑 +scheduler.attachEvent("onViewChange", (new_mode, new_date) => { + // 在此处编写任意自定义逻辑 }); ~~~ ### Details -每当当前视图更新时，此事件会被触发。 +每次将当前视图切换为其他视图时，该事件都会被调用。 \ No newline at end of file diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/addevent.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/addevent.md index 642e2823..b42230ab 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/addevent.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/addevent.md @@ -1,6 +1,6 @@ ---- -sidebar_label: "addEvent" -title: "addEvent method" +--- +sidebar_label: addEvent +title: "addEvent 方法" description: "添加一个新事件" --- @@ -14,26 +14,26 @@ description: "添加一个新事件" ### Parameters -- `event` - (required) *object* - 事件对象 +- `event` - (必填) *object* - 事件对象 ### Returns -- ` id` - (string) - 事件的id +- `id` - (string) - 事件的 ID ### Example ~~~jsx scheduler.addEvent({ - start_date: "16-06-2013 09:00", - end_date: "16-06-2013 12:00", - text: "Meeting", - holder: "John", // userdata - room: "5" // userdata + start_date: "2027-06-16 09:00", + end_date: "2027-06-16 12:00", + text: "Meeting", + holder: "John", // userdata + room: "5" // userdata }); ~~~ ### Related samples -- [Validating lightbox fields](https://docs.dhtmlx.com/scheduler/samples/02_customization/08_validation.html) -- [Custom event box](https://docs.dhtmlx.com/scheduler/samples/02_customization/27_custom_event_box.html) +- [验证 lightbox 字段](https://docs.dhtmlx.com/scheduler/samples/02_customization/08_validation.html) +- [自定义事件框](https://docs.dhtmlx.com/scheduler/samples/02_customization/27_custom_event_box.html) ### Details @@ -45,11 +45,11 @@ scheduler.addEvent({ 事件对象可以包含以下属性: -- **start_date** - (*Date,string*) 事件开始的日期。如果以字符串形式提供，应遵循 "%d-%m-%Y %H:%i" 格式（如需调整默认格式，请参阅 [api_date](api/config/api_date.md) 选项）。对于[重复事件](guides/recurring-events.md)，**start_date** 必须是 Date 类型。 -- **end_date** - (*Date,string*) 事件预期结束的日期。如果以字符串形式提供，应使用 "%d-%m-%Y %H:%i" 格式（如需修改默认格式，参见 [api_date](api/config/api_date.md) 选项）。对于[重复事件](guides/recurring-events.md)，**end_date** 必须是 Date 类型。 -- **text** - (*string*) 事件描述。 -- **id** - (*string*) 事件标识符。如果省略，将自动生成一个id。 -- **userdata** - (*hash*) 一组自定义属性，以"键-值"对形式表示。 +- `start_date` - (*Date,string*) 事件开始计划的日期。若属性以字符串形式指定，请使用 "%d-%m-%Y %H:%i" 格式（若要修改默认格式，请使用 [`api_date`](api/config/api_date.md) 选项）。对于 [循环事件](guides/recurring-events.md) ，`start_date` 属性的值必须为 Date 类型。 +- `end_date` - (*Date,string*) 事件结束计划的日期。若属性以字符串形式指定，请使用 "%d-%m-%Y %H:%i" 格式（若要修改默认格式，请使用 [`api_date`](api/config/api_date.md) 选项）。对于 [循环事件](guides/recurring-events.md) ，`end_date` 属性的值必须为 Date 类型。 +- `text` - (*string*) 事件文本。 +- `id` - (*string*) 事件的 ID。如果未指定，将自动为该事件生成 ID。 +- `userdata` - (*hash*) 以 '键值对' 形式呈现的一组自定义属性。 ### Related API - [api_date](api/config/api_date.md) @@ -57,4 +57,4 @@ scheduler.addEvent({ - [deleteEvent](api/method/deleteevent.md) ### Related Guides -- [이벤트 추가/삭제](guides/adding-events.md) +- [Adding/Deleting Events](guides/adding-events.md) \ No newline at end of file diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/addeventnow.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/addeventnow.md index 29960e4d..66e27196 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/addeventnow.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/addeventnow.md @@ -25,8 +25,8 @@ description: "创建一个新的事件并打开lightbox进行确认" scheduler.addEventNow(); //或者 scheduler.addEventNow({ - start_date: new Date(2013,0,10,8,30), - end_date: new Date(2013,0,10,10,30), + start_date: new Date(2027,0,10,8,30), + end_date: new Date(2027,0,10,10,30), text: "Meeting", holder: "John", //userdata room: "5" //userdata diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/addmarkedtimespan.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/addmarkedtimespan.md index ad19774a..07037040 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/addmarkedtimespan.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/addmarkedtimespan.md @@ -1,23 +1,23 @@ --- -sidebar_label: "addMarkedTimespan" -title: "addMarkedTimespan method" -description: "标记日期，并且在某些设置下，可以阻止这些日期（允许对限制的边界应用自定义样式）" +sidebar_label: addMarkedTimespan +title: "addMarkedTimespan 方法" +description: "标记日期，但在某些设置下会实现阻塞（允许为限制设置自定义样式）" --- -# addMarkedTimespan +## addMarkedTimespan ### Description @short: 标记日期，并且在某些设置下，可以阻止这些日期（允许对限制的边界应用自定义样式） -@signature: addMarkedTimespan: (config: any) =\> number +@signature: addMarkedTimespan: (config: any) => number ### Parameters -- `config` - (required) *object* - 定义要标记或阻止的时间段的配置对象 +- `config` - (required) *object* - 应用于标记/阻塞的时间跨度的配置对象 ### Returns -- ` id` - (number) - 添加的时间段的ID +- `id` - (number) - 已添加时间跨度的 ID ### Example @@ -46,7 +46,7 @@ scheduler.updateView(); ### Details -此方法自版本3.5起可用。 +该方法自版本 3.5 起可用。 :::note 该方法需要启用[limit](guides/extensions-list.md#limit)插件。 @@ -54,21 +54,19 @@ scheduler.updateView(); :::note -请注意，调用此方法后，标记（阻止）不会立即生效。您需要调用 [updateView](api/method/updateview.md) 来应用更改。 - -::: +请注意，标记（阻塞）不会在你调用该方法后立即应用。你应当调用 [`updateView()`](api/method/updateview.md) 以应用标记。 -
+::: -## 配置对象属性 +## Configuration object properties -配置对象可以包含以下属性: +配置对象可以包含以下属性： - + - + - + - + - + - + - + - + - + @@ -199,13 +197,13 @@ sections: { unit: 5, timeline: [2,3]} ::: -因此，有两种有效的属性组合: +因此，有两种可接受的组合，具有特定的属性集：
- 属性 + 属性 描述 @@ -78,80 +76,80 @@ scheduler.updateView();
start_date 定义限制开始时间的Date对象 用于设置限制起始日期的 Date 对象
~~~js -//阻止从2012年5月3日开始创建事件，直到'end_date' -start_date:new Date(2012,4,3) +//阻止从2027年5月3日开始创建事件，直到'end_date' +start_date: new Date(2027, 4, 3) ~~~
end_date 定义限制结束时间的Date对象 用于设置限制结束日期的 Date 对象
~~~js -//阻止从'start_date'直到2012年9月3日创建事件 -end_date:new Date(2012,8,3) +//阻止从'start_date'直到2027年9月3日创建事件 +end_date: new Date(2027, 8, 3) ~~~
days 要限制的天数 应受限的天数
~~~js -days:[0, 2, 6] //限制星期日、星期二和星期六 -days:"fullweek" //限制整周 -days:new Date(2012,6,1) //阻止2012年7月1日 +days: [0, 2, 6] // 限制星期日、星期二和星期六 +days: "fullweek" // 限制整周 +days: new Date(2027,6,1) // 阻止2027年7月1日 ~~~
zones 要限制的时间段（以分钟为单位）应限制的时间段，以分钟表示
~~~js -//两个限制区间：04:00-08:00 和 12:00-15:00 -zones:[4*60,8*60,12*60,15*60] -zones:"fullday" //限制全天 +// 两个限制区间：04:00-08:00 和 12:00-15:00 +zones: [4*60,8*60,12*60,15*60] +zones: "fullday" // 限制全天 ~~~
css 应用的CSS类名CSS 类名
~~~js -css:"gray" //绘制一个应用了'gray' CSS类的DIV +css: "gray" // 绘制一个应用了'gray' CSS类的DIV ~~~
html 在标记范围内显示的HTML内容将被添加到标记范围内的 HTML 内容
~~~js -//在标记范围上绘制一个带有此文本的DIV -html:"Blocked" +// 在标记范围上绘制一个带有此文本的DIV +html: "Blocked" ~~~
type 指定时间段类型。设置为 'dhx_time_block' 则应用阻止。其他值仅标记时间段，不阻止。定义时间跨度的类型。type 为 'dhx_time_block' 时表示对时间跨度应用阻塞。使用其他任意类型（你可以指定任意值）时，事件将仅被标记
@@ -162,27 +160,27 @@ type: "dhx_time_block" //时间段将被标记并阻止
invert_zones 指示是否应反转 'zones' 中设置的时间段（默认为false）指定是否应对由 zones 属性设置的时间段进行反向处理（默认 false）
~~~js -//结果是两个限制区间：00:00-08:00 和 17:00-24:00 +// 结果是两个限制区间：00:00-08:00 和 17:00-24:00 zones: [8*60, 17*60], invert_zones: true -//结果是两个限制区间：00:00-08:00 和 17:00-24:00 +// 结果是两个限制区间：00:00-08:00 和 17:00-24:00 zones: [0, 8*60, 17*60, 24*60], invert_zones: false ~~~
sections 限制阻止仅针对特定视图中的特定条目。
日期仅在指定视图中被阻止。		允许仅对特定视图中的特定项进行日期阻塞。指定的日期仅在相关视图中被阻塞
~~~js -//仅阻止Unit视图中id=5的条目日期， -//以及Timeline视图中id为2和3的条目日期 +// 仅阻止Unit视图中id=5的条目日期， +// 以及Timeline视图中id为2和3的条目日期 sections: { unit: 5, timeline: [2,3]} ~~~
- + @@ -243,7 +238,7 @@ var config ={ - +
- 属性组合 + 属性集合 示例 @@ -214,8 +212,7 @@ sections: { unit: 5, timeline: [2,3]}
-
    +
  • `days`
  • `zones`
  • `invert_zones`
    • @@ -223,19 +220,17 @@ sections: { unit: 5, timeline: [2,3]}
  • `html`
  • `type`
  • `sections`
    • -
- 		~~~js -var config ={ - days: 1, - zones: [9*60, 15*60], - css: "cssClassName", +const config = { + days: 1, + zones: [9 * 60, 15 * 60], + css: "cssClassName", sections: { - unit: 5 + unit: 5 } -} - +}; ~~~
  • `start_date`
    • -
  • `end_date`
    • +
  • `end_date`
  • `css`
  • `html`
  • `type`
    • @@ -252,42 +247,43 @@ var config ={
~~~js -var config ={ - start_date: new Date(2013,7,13), - end_date: new Date(2013,7,14), +const config = { + start_date: new Date(2027, 7, 13), + end_date: new Date(2027, 7, 14), css: "cssClassName", sections: { - unit: 5 + unit: 5 } -} +}; ~~~
-## markTimespan() 和 addMarkedTimespan() 的比较 + +## `markTimespan()` 和 `addMarkedTimespan()` 对比 - - - -
+
addMarkedTimespan - + markTimespan
-需要调用 [updateView](api/method/updateview.md) 来渲染时间段的DIV - -自动绘制时间段的DIV +
+需要调用 [`updateView()`](api/method/updateview.md) 方法来为时间跨度绘制一个 DIV + +自动为时间跨度绘制一个 DIV
-时间段会永久存在 - -应用内部任何更新后，时间段会立即隐藏 +
+时间跨度在整个过程中一直存在 + +时间跨度将在应用的任何内部更新后隐藏
-返回配置时间段的ID - -返回一个DIV元素或DIV数组 +
+返回配置的时间跨度的 ID + +返回一个 DIV 或一个 DIV 数组
@@ -297,4 +293,4 @@ markTimespan - [checkInMarkedTimespan](api/method/checkinmarkedtimespan.md) ### Related Guides -- [Blocking and Marking Dates](guides/limits.md) +- [Blocking and Marking Dates](guides/limits.md) \ No newline at end of file diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/addshortcut.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/addshortcut.md index 8758fe8a..1e621010 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/addshortcut.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/addshortcut.md @@ -22,7 +22,7 @@ description: "创建一个新的键盘快捷键" ~~~jsx scheduler.addShortcut("shift+w", function(e){ - var eventId = scheduler.locate(e); + const eventId = scheduler.locate(e); if(eventId) scheduler.showQuickInfo(eventId); },"event"); diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/alert.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/alert.md index 9bb3a914..7ea0b958 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/alert.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/alert.md @@ -22,7 +22,7 @@ description: "显示一个 alert 消息框" ### Example ~~~jsx -var box = scheduler.alert({ +const box = scheduler.alert({ title:"Alert", type:"alert-error", text:"You can't do this" diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/assert.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/assert.md index 7af0a783..a42e9827 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/assert.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/assert.md @@ -34,4 +34,4 @@ scheduler.attachEvent("onLoadEnd", function(){ 错误也可以通过 [onError](api/event/onerror.md) 事件以编程方式进行监控。 ### Change log -- added in v6.0 +- 版本 6.0 中添加 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/attachevent.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/attachevent.md index 43bc3af6..f8f52422 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/attachevent.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/attachevent.md @@ -1,36 +1,36 @@ --- -sidebar_label: "attachEvent" -title: "attachEvent method" -description: "为 dhtmlxScheduler 的内部事件绑定处理函数" +sidebar_label: attachEvent +title: "attachEvent 方法" +description: "将处理程序附加到 dhtmlxScheduler 的内部事件" --- # attachEvent ### Description -@short: 为 dhtmlxScheduler 的内部事件绑定处理函数 +@short: 将处理程序附加到 dhtmlxScheduler 的内部事件 @signature: attachEvent: (name: SchedulerEventName, handler: SchedulerCallback, settings?: any) =\> string ### Parameters -- `name` - (required) *SchedulerEventName* - 事件名称，大小写不敏感 -- `handler` - (required) *function* - 处理该事件的函数 -- `settings` - (optional) *object* - 可选，事件处理函数的[配置对象](#properties-of-settings-object) +- `name` - (required) *SchedulerEventName* - 事件名称，忽略大小写 +- `handler` - (required) *function* - 处理函数 +- `settings` - (optional) *object* - 可选，一个用于事件处理程序的 [settings 对象](#properties-of-settings-object) ### Returns -- `event` - (string) - id 绑定事件处理函数的标识符 +- `event` - (string) - 已附加事件处理程序的 id ### Example ~~~jsx -scheduler.attachEvent("onEventSave", function(id, ev) { +scheduler.attachEvent("onEventSave", (id, ev) => { if (!ev.text) { alert("文本不能为空"); return false; } return true; -}) +}); ~~~ ### Related samples @@ -39,37 +39,38 @@ scheduler.attachEvent("onEventSave", function(id, ev) { ### Details -同一个事件可以绑定多个处理函数，所有处理函数都会被执行。
如果任何一个处理函数返回 *false*，则会阻止关联操作的执行。
-处理函数按照绑定的先后顺序依次调用。 +你可以向同一个事件附加多个处理程序，所有处理程序都会被执行。 +如果某些处理程序返回 `false`，相关操作将被阻止。 +事件处理程序按照它们被附加的顺序进行处理。 -通过 [event](api/method/event.md) 添加的所有事件监听器，在调用 [destructor](api/method/destructor.md) 时会被自动移除。 +所有通过 [`event()`](api/method/event.md) 绑定的事件监听器将在调用 [`destructor()`](api/method/destructor.md) 时自动分离。 -## 配置对象的属性 {#properties-of-settings-object} +## Settings 对象的属性 -配置对象可包含以下两个属性: +Settings 对象可以包含两个属性： -1\. **id** - (*string*) 事件处理函数的唯一标识符 +1\. `id` - (*string*) 事件处理程序的 id -这便于从事件中移除特定的处理函数: +例如，您可以很容易地从指定事件分离一个处理程序： -~~~js -scheduler.attachEvent("onClick", function(){ +~~~js {3} +scheduler.attachEvent("onClick", () => { console.log("event click"); -}, {id: "my-click"}); /*!*/ -... //稍后： -gantt.detachEvent("my-click"); +}, { id: "my-click" }); +// after a while: +scheduler.detachEvent("my-click"); ~~~ -2\. **once** - (*boolean*) 指示事件处理函数是否只执行一次 +2\. `once` - (*boolean*) 定义事件是否仅执行一次 -设置为 *true* 时，处理函数仅响应事件的首次触发，示例如下: +如果希望捕获事件的第一次触发，请将该属性设置为 *true*，如下所示： -~~~js -scheduler.attachEvent("onClick", function(){ +~~~js {4} +scheduler.attachEvent("onClick", () => { console.log("capture next event click"); return true; -}, {once: true}); /*!*/ +}, { once: true }); ~~~ ### Related API -- [detachEvent](api/method/detachevent.md) +- [detachEvent](api/method/detachevent.md) \ No newline at end of file diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/backbone.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/backbone.md index 5fcd020b..137442b0 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/backbone.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/backbone.md @@ -20,7 +20,7 @@ description: "保持调度器与Backbone模型中的所有更新同步，反之 ~~~jsx $(".myscheduler").dhx_scheduler({ - date:new Date(2009,5,25), + date:new Date(2027,5,25), mode:"month" }); diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/batchupdate.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/batchupdate.md index 46edf46d..dc5fb30f 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/batchupdate.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/batchupdate.md @@ -22,7 +22,7 @@ description: "一次更新多个事件" ~~~jsx scheduler.batchUpdate(function(){ const events = scheduler.getEvents(); - for(var i = 0; i < events.length; i++){ + for(let i = 0; i < events.length; i++){ const event = events[i]; event.start_date = scheduler.date.add(event.start_date, 1, "day"); event.end_date = scheduler.date.add(event.end_date, 1, "day"); diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/blocktime.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/blocktime.md index 5ab48e4e..64e97423 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/blocktime.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/blocktime.md @@ -41,11 +41,11 @@ scheduler.blockTime(3, [0,8*60], { unit: [1,4] }); ~~~js -//阻止2009年5月3日整天 -scheduler.blockTime(new Date(2009,5,3), "fullday"); +//阻止2027年5月3日整天 +scheduler.blockTime(new Date(2027,5,3), "fullday"); -//阻止2009年6月3日从午夜到上午10点的事件 -scheduler.blockTime(new Date(2009,6,3), [0,10*60]); +//阻止2027年6月3日从午夜到上午10点的事件 +scheduler.blockTime(new Date(2027,6,3), [0,10*60]); //阻止每个星期六从午夜到早上8点，以及晚上6点到午夜的事件 scheduler.blockTime(6, [0,8*60,18*60,24*60]); @@ -87,8 +87,8 @@ scheduler.blockTime({ ~~~js -//阻止从2012年5月3日开始创建事件，直到'end_date' -start_date:new Date(2012,4,3) +//阻止从2027年5月3日开始创建事件，直到'end_date' +start_date:new Date(2027,4,3) ~~~ @@ -99,8 +99,8 @@ start_date:new Date(2012,4,3) ~~~js -//阻止从'start_date'直到2012年9月3日创建事件 -end_date:new Date(2012,8,3) +//阻止从'start_date'直到2027年9月3日创建事件 +end_date:new Date(2027,8,3) ~~~ @@ -113,7 +113,7 @@ end_date:new Date(2012,8,3) ~~~js days:[0, 2, 6] //阻止星期天、星期二和星期六 days:"fullweek" //阻止整周 -days:new Date(2012,6,1) //阻止2012年7月1日 +days:new Date(2027,6,1) //阻止2027年7月1日 ~~~ diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/callevent.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/callevent.md index 17f4af3e..0db61140 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/callevent.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/callevent.md @@ -27,7 +27,7 @@ scheduler.attachEvent("CustomEvent", function(param1, param2){ return true; }); -var res = scheduler.callEvent("CustomEvent", [param1, param2]); +const res = scheduler.callEvent("CustomEvent", [param1, param2]); ~~~ ### Details diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/checkcollision.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/checkcollision.md index 0c36e1fa..62c64487 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/checkcollision.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/checkcollision.md @@ -22,13 +22,13 @@ description: "验证给定的事件是否在相同时段与任何已有事件重 ### Example ~~~jsx -var event = { +const event = { text : "New Event", - start_date : new Date(2013, 02, 20, 10, 00), - end_date : new Date(2013, 02, 20, 14, 00) + start_date : new Date(2027, 02, 20, 10, 00), + end_date : new Date(2027, 02, 20, 14, 00) }; -var isOccupied = scheduler.checkCollision(event); // 返回 'true' 或 'false' +const isOccupied = scheduler.checkCollision(event); // 返回 'true' 或 'false' ~~~ ### Details diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/checkinmarkedtimespan.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/checkinmarkedtimespan.md index dcfc905c..33866eb5 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/checkinmarkedtimespan.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/checkinmarkedtimespan.md @@ -24,15 +24,15 @@ description: "判断一个事件是否落在指定类型的时间段内" ~~~jsx scheduler.addMarkedTimespan({ - start_date: new Date(2013,4,1), - end_date: new Date(2013,7,1), + start_date: new Date(2027,4,1), + end_date: new Date(2027,7,1), css: "red_section", type:"discount" }); -var eventId = scheduler.addEvent({ - start_date: "16-05-2013 09:00", - end_date: "16-05-2013 12:00", +const eventId = scheduler.addEvent({ + start_date: "16-05-2027 09:00", + end_date: "16-05-2027 12:00", text: "Meeting", holder: "John", room: "5" diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/checklimitviolation.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/checklimitviolation.md index b472ba4f..00e18937 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/checklimitviolation.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/checklimitviolation.md @@ -22,13 +22,13 @@ description: "判断给定的事件是否与被阻止的时间段重叠" ### Example ~~~jsx -var event = { +const event = { text : "New Event", - start_date : new Date(2013, 02, 20, 10, 00), - end_date : new Date(2013, 02, 20, 14, 00) + start_date : new Date(2027, 02, 20, 10, 00), + end_date : new Date(2027, 02, 20, 14, 00) }; -var isBlocked = scheduler.checkLimitViolation(event); //返回 'true' 或 'false' +const isBlocked = scheduler.checkLimitViolation(event); //返回 'true' 或 'false' ~~~ ### Details diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/confirm.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/confirm.md index 1fa3dbe2..e7da8314 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/confirm.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/confirm.md @@ -22,7 +22,7 @@ description: "打开一个 confirm 消息框" ### Example ~~~jsx -var box = scheduler.confirm({ +const box = scheduler.confirm({ text: "Continue?", ok:"Yes", cancel:"No", diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/copy.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/copy.md index 2cefee15..18bdc8dc 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/copy.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/copy.md @@ -22,8 +22,8 @@ description: "创建给定对象的深拷贝" ### Example ~~~jsx -var backupEvent = scheduler.copy(scheduler.getEvent(id)); +const backupEvent = scheduler.copy(scheduler.getEvent(id)); ~~~ ### Change log -- added in version 6.0 +- 版本 6.0 中添加 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/createdataprocessor.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/createdataprocessor.md index 8bd4a46e..26aeb6d0 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/createdataprocessor.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/createdataprocessor.md @@ -22,7 +22,7 @@ description: "生成一个新的 dataProcessor 实例并将其链接到 schedule ### Example ~~~jsx -var dp = scheduler.createDataProcessor({ +const dp = scheduler.createDataProcessor({ url: "/api", mode: "REST" }); @@ -35,7 +35,7 @@ var dp = scheduler.createDataProcessor({ 1\. 一个包含 `{url:string, mode:string}` 的对象，指定预定义的数据发送方式 ~~~js -var dp = scheduler.createDataProcessor({ +const dp = scheduler.createDataProcessor({ url: "/api", mode: "REST" }); @@ -49,7 +49,7 @@ var dp = scheduler.createDataProcessor({ 2\. 或者，可以提供一个自定义的 router 对象: ~~~js -var dp = scheduler.createDataProcessor(router); +const dp = scheduler.createDataProcessor(router); ~~~ 这里，router 可以是一个函数: @@ -59,7 +59,7 @@ var dp = scheduler.createDataProcessor(router); // action - "create"|"update"|"delete" // data - 包含事件详情的对象 // id – 被处理对象（事件）的 id -var dp = scheduler.createDataProcessor(function(entity, action, data, id) { +const dp = scheduler.createDataProcessor(function(entity, action, data, id) { switch(action) { case "create": return scheduler.ajax.post( @@ -85,7 +85,7 @@ var dp = scheduler.createDataProcessor(function(entity, action, data, id) { 或者是一个结构如下的对象: ~~~js -var dp = scheduler.createDataProcessor({ +const dp = scheduler.createDataProcessor({ event: { create: function(data) {}, update: function(data, id) {}, diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/createtimelineview.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/createtimelineview.md index dafc324f..6b27ac8d 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/createtimelineview.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/createtimelineview.md @@ -1,7 +1,7 @@ ---- -sidebar_label: "createTimelineView" -title: "createTimelineView method" -description: "在 scheduler 中设置 Timeline 视图" +--- +sidebar_label: createTimelineView +title: "createTimelineView 方法" +description: "在调度程序中创建 Timeline 视图" --- # createTimelineView @@ -10,7 +10,7 @@ description: "在 scheduler 中设置 Timeline 视图" ::: ### Description -@short: 在 scheduler 中设置 Timeline 视图 +@short: 在调度程序中创建 Timeline 视图。 @signature: createTimelineView: (config: any) =\> void @@ -21,111 +21,107 @@ description: "在 scheduler 中设置 Timeline 视图" ### Example ~~~jsx -// 时间刻度从上午8点到晚上8点，间隔为30分钟 +// 从上午 8 点到下午 8 点，步长为 30 分钟 scheduler.createTimelineView({ name: "timeline", - x_unit: "minute", - x_date: "%H:%i", - x_step: 30, - x_size: 24, + x_unit: "minute", + x_date: "%H:%i", + x_step: 30, + x_size: 24, x_start: 16, x_length: 48, fit_events_offset: 15, - y_unit:[ - {key:1, label:"Section A"}, - {key:2, label:"Section B"}, - {key:3, label:"Section C"}, - {key:4, label:"Section D"} + y_unit: [ + { key: 1, label: "分区 A" }, + { key: 2, label: "分区 B" }, + { key: 3, label: "分区 C" }, + { key: 4, label: "分区 D" } ], y_property: "section_id", - render: "bar" + render: "bar" }); -~~~ +~~~ **Applicable views:** [Timeline view](views/timeline.md) ### Related samples -- [Cell mode](https://docs.dhtmlx.com/scheduler/samples/06_timeline/01_slots.html) -- [Bar mode](https://docs.dhtmlx.com/scheduler/samples/06_timeline/02_lines.html) -- [Tree mode](https://docs.dhtmlx.com/scheduler/samples/06_timeline/03_tree.html) +- [单元格模式](https://docs.dhtmlx.com/scheduler/samples/06_timeline/01_slots.html) +- [条形模式](https://docs.dhtmlx.com/scheduler/samples/06_timeline/02_lines.html) +- [树形模式](https://docs.dhtmlx.com/scheduler/samples/06_timeline/03_tree.html) - [Days as Timeline rows](https://docs.dhtmlx.com/scheduler/samples/06_timeline/14_days_as_sections.html) ### Details :::note - 该方法需要启用 [timeline](/guides/extensions-list/#timeline) 插件。 + 此方法需要激活 [timeline](guides/extensions-list.md#timeline) 插件。 ::: - -Timeline 视图的配置对象支持以下属性: - -- name- (string) 视图的标识符。定义与已有 Timeline 视图相同的 name 会覆盖该视图 -- render - ('cell', 'bar', 'tree', 'days') 定义视图模式。默认为 'cell' -- y_property - (string) 用于将事件关联到特定区块的数据属性 -- y_unit - (对象数组) 定义视图中的区块。
每个对象代表一个区块，包含以下属性: - - children - (数组) 仅用于 'Tree' 模式的嵌套子项 - - key - (string) 区块的 ID，用于匹配事件属性以分配事件 - - label - (string) 区块显示标签 - - open - (boolean) 区块是否初始展开（仅对 'Tree' 模式） -- days - (number) Y 轴上的项目数量（天数），仅对 'Days' 模式有效 -- x_unit - (minute, hour, day, week, month, year) X 轴的时间单位。默认为 'minute' -- x_date - (string) X 轴日期格式（参见 [날짜 형식 지정](guides/settings-format.md)）。若未设置，使用 [hour_date](api/config/hour_date.md) 格式 -- x_step - (number) X 轴步长，单位为 'x_unit'。默认为 1 -- x_start - (number) X 轴起始偏移，单位为 'x_unit'。默认为 0 -- x_size - (number) X 轴总长度，表示 'x_step' 的数量。默认为 24 -- x_length - (number) 点击调度器头部"下一页"按钮时滚动的 'x_step' 数量。可选，默认为 1。 -此参数较为复杂，请注意: - - 仅当 x_unit='minute' 或 x_unit='hour' 时有效，其他单位可省略。 - - 若未设置 x_length，时间线根据其他刻度参数（x_start, x_step, x_size）显示部分日间区间，允许滚动浏览日段。 - - 若设置了 x_length，应覆盖整天（填满一天的 x_step 数量），确保"下一页"按钮正常工作。 -- first_hour - (number) 单元格内时间区间的起始小时，仅当 x_unit="day" 有效 -- last_hour - (number) 单元格内时间区间的结束小时，仅当 x_unit="day" 有效 -- show_unassigned (boolean) 若为 false，则未分配到任何区块的事件不显示；若为 true，则这些事件显示在第一个区块。默认为 false，可选 -- section_autoheight - (boolean) 是否启用单元格高度自动调整。默认为 true -- dy - (number) 最小单元格高度（若 section_autoheight 为 false，单元格高度固定为此值；否则高度自动扩展以填充空间）。默认为 50 -- dx - (number) 显示区块名称的列宽。默认为 200 -- event_dy - (number/string) 事件高度；可设为 'full' 以填满整个单元格。默认为 scheduler.xy.bar_height-5 -- event_min_dy - (number) 事件最小高度。默认为 scheduler.xy.bar_height-5 -- resize_events - (boolean) 是否允许单个事件高度缩小以适应单个事件高度（不低于 event_min_dy）。默认为 true -- fit_events - (boolean) 是否扩展区块高度以适应所有事件，或保持固定高度（dy）。3.0 版本起支持。默认为 true -- fit_events_offset - (number) 当 fit_events 为 true 时，最后一个事件下方的额外空白（像素） -- round_position - (boolean) 是否将事件拉伸至单元格全宽，无论持续时间。默认为 false。仅适用于 'bar' 和 'tree' 模式 -- folder_events_available - (boolean) 是否允许将事件分配给整个文件夹（任意层级），而非仅分配给单独持有者。仅适用于 'tree' 模式。默认为 false -- folder_dy - (number) 文件夹（包含子区块的区块）高度（像素）。仅适用于 'tree' 模式 -- second_scale - (object) 在默认 X 轴上方添加第二个 X 轴，用于分组时间区间。可选，3.0 版本起支持。
对象包含: - - x_unit - (minute, hour, day, week, month, year) 时间单位。默认为 'minute' - - x_date - (string) 日期格式（参见 [날짜 형식 지정](guides/settings-format.md)）。若未设置，使用 [hour_date](api/config/hour_date.md) 格式 -- scrollable - (boolean) 是否启用 Timeline 视图的水平滚动；默认为 false。若为 false 或未定义，日期列会缩小以适应视口宽度。若为 true，列宽不会小于 column_width，并在需要时显示水平滚动条。 -- column_width - (number) 时间线日期列的最小宽度；默认为 100 -- scroll_position - (Date) 渲染后滚动到指定日期；接受与 timeline.scrollTo() 相同的参数 -- autoscroll - (object) 配置自动滚动的灵敏度和速度，属性包括: - - range_x - (number) 数据区边缘的水平自动滚动距离 - - range_y - (number) 数据区边缘的垂直自动滚动距离 - - speed_x - (number) 水平自动滚动速度 - - speed_y - (number) 垂直自动滚动速度 -- cell_template - (boolean) 是否启用自定义 Timeline 单元格模板渲染 -- **smart_rendering** - (*boolean*) 是否启用智能渲染，仅渲染可见的行、列和事件，其他在滚动时加载。可滚动时间线默认启用。 -- columns- (数组) 指定左侧面板的列。若未提供，使用 [timeline_scale_label](api/template/timelinename_scale_label.md) 模板。 - - -## 动态修改属性 - -所有 timeline 视图均存储于 **scheduler.matrix** 中。 -你可以通过视图名称访问并修改任意 timeline 视图配置。更新后需重绘 scheduler 以生效: +Timeline 视图的配置对象可以包含以下属性： + +- `name` - (*string*) 视图的 ID。若你指定的名称与已存在的 Timeline 视图同名，则会被覆盖 +- `render` - (*'cell', 'bar', 'tree', 'days'*) 视图模式。默认值为 'cell' +- `y_property` - (*string*) 将用于将事件分配到特定分区的数据属性名 +- `y_unit` - (*array of objects*) 定义视图的分区。数组中的每个对象表示一个单独的分区，并具有以下属性： + - `children` - (*array*) 嵌套项对象数组（仅在 'Tree' 模式下） + - `key` - (*string*) 分区的 ID。此属性将与事件数据属性进行比对以将事件分配到分区 + - `label` - (*string*) 分区的标签 + - `open` - (*boolean*) 指定分区是否在初始时展开（仅在 'Tree' 模式下） +- `days` - (*number*) Y 轴上的项（天数）。仅适用于 'Days' 模式 +- `x_unit` - (*minute, hour, day, week, month, year*) X 轴的度量单位。默认值为 'minute' +- `x_date` - (*string*) [X 轴](guides/settings-format.md) 的日期格式。如果未指定，将使用 [`hour_date`](api/config/hour_date.md) 格式 +- `x_step` - (*number*) X 轴在 `x_unit` 内的步长。默认值为 1 +- `x_start` - (*number*) X 轴在 `x_unit` 内的偏移量。默认值为 0 +- `x_size` - (*number*) X 轴的长度，以 `x_step` 的总数表示。默认值为 24 +- `x_length` - (*number*) 当用户在调度程序头部点击“下一步”按钮时一次滚动的 `x_step` 数量。可选。默认值为 1。 +这是一个有点复杂的参数，为避免出错，请记住以下要点： + - 仅当 `x_unit='minute'` 或 `x_unit='hour'` 时才能使用该参数。在其它情况下，不需要明确指定该参数。 + - 如果 `x_unit='minute'` 或 `x_unit='hour'` 且未指定 `x_length`，X 轴将显示由剩余尺度参数（`x_start`, `x_step`, `x_size`）决定的时间区间（而非整天）。这使你可以将一天分成均等时间区间并通过“下一步”按钮滚动它们。 + - 如果 `x_unit='minute'` 或 `x_unit='hour'`，且你决定设置该参数，请将其设为整天的长度（即 `x_length` 应等于填充整天所需的 `x_steps` 数量），以确保“下一步”按钮的正确工作。 +- `first_hour` - (*number*) 设置单元格时间区间的起始小时。仅在 `x_unit="day"` 时适用 +- `last_hour` - (*number*) 设置单元格时间区间的结束小时。仅在 `x_unit="day"` 时适用 +- `show_unassigned` - (*boolean*) 若为 *false*，属于任一区段的事件不会显示；若为 *true*，此类事件将放置到第一个分区。默认值为 *false*。可选 +- `section_autoheight` - (*boolean*) 启用单元格的自动高度调整。默认值为 *true* +- `dy` - (*number*) 单元格的最小高度（若 `section_autoheight` 为 *false*，单元格高度等于 `dy`；否则高度将增高以填充所有空闲空间）。默认值为 50 +- `dx` - (*number*) 左侧分区名称列的宽度。默认值为 200 +- `event_dy` - (*number/string*) 事件的高度。可以取值为 `full`，占满整个单元格。默认值等于 `scheduler.xy.bar_height-5` +- `event_min_dy` - (*number*) 最小事件高度。默认值等于 `scheduler.xy.bar_height-5` +- `resize_events` - (*boolean*) 指定是否应降低单个事件的高度，使总高度等于一个事件的高度（但不低于 `event_min_dy`）。默认值为 *true* +- `fit_events` - (*boolean*) 指定是否应增加分区高度以容纳该分区中的所有事件，或保持固定（`dy` 参数）。自版本 3.0 起可用。默认值为 *true* +- `fit_events_offset` - (*number*) 在最后一个事件下方添加额外的空隙（像素）。当 `fit_events` 设置为 *true* 时应用 +- `round_position` - (*boolean*) 将事件在单元格宽度上“拉伸”到整个宽度，不论事件持续时间长短。默认值为 *false*。仅适用于 'Bar' 和 'Tree' 模式 +- `folder_events_available` - (*boolean*) 当你希望对整个文件夹（任意层级）也能给事件指定时，应将其设为 *true*。仅适用于 'Tree' 模式。默认值为 *false* +- `folder_dy` - (*number*) 文件夹在像素中的高度（文件夹是具有子分区的分区）。仅适用于 'Tree' 模式 +- `second_scale` - (*object*) 在默认 X 轴之上添加第二条 X 轴，用于在原始刻度上对时间区间进行分组。可选。从版本 3.0 起可用。刻度对象具有以下属性： + - `x_unit` - (*minute, hour, day, week, month, year*) 轴的度量单位。默认值为 'minute' + - `x_date` - (*string*) 轴的日期格式。如果未指定，将使用 [`hour_date`](api/config/hour_date.md) 格式 +- `scrollable` - (*boolean*) 使 Timeline 视图支持水平滚动，默认为 false。若为 *false* 或未定义，日期列将收缩以适应视口宽度。 +若为 *true*，日期列不会收缩到低于 `column_width` 的值，当需要时会出现水平滚动条。 +- `column_width` - (*number*) 定义时间线日期列的最小宽度，默认 100 +- `scroll_position` - (*Date*) 渲染后将 Timeline 滚动到指定位置，参数与 `timeline.scrollTo()` 相同，即渲染后你希望 Timeline 滚动到的日期 +- `autoscroll` - (*object*) 允许配置自动滚动的灵敏度和速度。autoscroll 对象具有以下属性： + - `range_x` - (*number*) 数据区域边缘的水平自动滚动距离 + - `range_y` - (*number*) 数据区域边缘的垂直自动滚动距离 + - `speed_x` - (*number*) 水平自动滚动速度 + - `speed_y` - (*number*) 垂直自动滚动速度 +- `cell_template` - (*boolean*) 启用为时间线指定的模板渲染 +- `smart_rendering` - (*boolean*) 启用时间线中的智能渲染功能（在滚动时仅渲染屏幕上可见的行、列和事件，其他元素在滚动时间线时被渲染）。请注意，在可滚动时间线中默认启用此设置。 +- `columns` - (*array*) 左侧面板的列列表。若未指定，将使用 [`timeline_scale_label`](api/template/timelinename_scale_label.md) 模板作为面板内容。 + +## 动态属性变更 + +所有定义的 timeline 对象都存储在 `scheduler.matrix` 对象中。 +你可以通过名称访问任意 timeline 视图的配置并修改任意属性。修改将在你使用 `setCurrentView()` 更新调度程序时立即应用： ~~~js scheduler.getView('timeline').x_size = 12; -scheduler.setCurrentView(); // 重新绘制 scheduler +scheduler.setCurrentView(); // 重新绘制调度程序 ~~~ - -这里的 "timeline" 是在 [createTimelineView](api/method/createtimelineview.md) 方法中赋予 timeline 视图的名称: +其中 "timeline" 是在 [`createTimelineView()`](api/method/createtimelineview.md) 方法中指定的 Timeline 视图名称： ~~~js scheduler.createTimelineView({ - name:"timeline", + name: "timeline", ... }); -~~~ - - +~~~ \ No newline at end of file diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/createunitsview.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/createunitsview.md index 8364fc43..775b27e3 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/createunitsview.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/createunitsview.md @@ -31,12 +31,12 @@ scheduler.createUnitsView({ ] }); -scheduler.init('scheduler_here',new Date(2009,5,30),"unit"); +scheduler.init('scheduler_here',new Date(2027,5,30),"unit"); scheduler.parse([ - {start_date:"06/30/2009 09:00",end_date:"06/30/2009 12:00",text:"Task1",unit_id:1}, - {start_date:"06/30/2009 12:00",end_date:"06/30/2009 20:00",text:"Task2",unit_id:3}, - {start_date:"06/30/2009 08:00",end_date:"06/30/2009 12:00",text:"Task3",unit_id:2} + {start_date:"06/30/2027 09:00",end_date:"06/30/2027 12:00",text:"Task1",unit_id:1}, + {start_date:"06/30/2027 12:00",end_date:"06/30/2027 20:00",text:"Task2",unit_id:3}, + {start_date:"06/30/2027 08:00",end_date:"06/30/2027 12:00",text:"Task3",unit_id:2} ],"json"); ~~~ diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/dataprocessor.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/dataprocessor.md index ea80d716..efebf175 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/dataprocessor.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/dataprocessor.md @@ -1,6 +1,6 @@ --- -sidebar_label: "DataProcessor" -title: "DataProcessor method" +sidebar_label: DataProcessor +title: "DataProcessor 方法" description: "DataProcessor 构造函数" --- @@ -14,17 +14,17 @@ description: "DataProcessor 构造函数" ### Parameters -- `url` - (required) *string* - 数据源的 URL +- `url` - (必填) *string* - 数据源的 URL ### Example ~~~jsx -var dp = new scheduler.DataProcessor("php/update.php"); +const dataProcessor = new scheduler.DataProcessor("php/update.php"); ~~~ ### Details -关于 DataProcessor 及其 API 的更多详情，请参见[这里](https://docs.dhtmlx.com/dataprocessor__index.html)。 +您可以在 [Server-Side Integration](guides/server-integration.md) 文章中找到有关 DataProcessor 的更多信息。 ### Change log -- 版本 6.0 中新增 +- 已在版本 6.0 中新增 \ No newline at end of file diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/defined.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/defined.md index fc654b17..a99a644d 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/defined.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/defined.md @@ -29,4 +29,4 @@ if(scheduler.defined(event.custom_property)){ ~~~ ### Change log -- added in version 6.0 +- 版本 6.0 中添加 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/deleteevent.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/deleteevent.md index 9c697140..56866c94 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/deleteevent.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/deleteevent.md @@ -19,11 +19,11 @@ description: "删除指定的事件" ### Example ~~~jsx -scheduler.init('scheduler_here',new Date(2009,5,30),"day"); +scheduler.init('scheduler_here',new Date(2027,5,30),"day"); scheduler.parse([ - {id:1, start_date:"06/30/2009 09:00", end_date:"06/30/2009 12:00", text:"Task1"}, - {id:2, start_date:"06/30/2009 12:00", end_date:"06/30/2009 20:00", text:"Task2"}, - {id:3, start_date:"06/30/2009 08:00", end_date:"06/30/2009 12:00", text:"Task3"} + {id:1, start_date:"06/30/2027 09:00", end_date:"06/30/2027 12:00", text:"Task1"}, + {id:2, start_date:"06/30/2027 12:00", end_date:"06/30/2027 20:00", text:"Task2"}, + {id:3, start_date:"06/30/2027 08:00", end_date:"06/30/2027 12:00", text:"Task3"} ],"json"); ... scheduler.deleteEvent(3); diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/deletemarkedtimespan.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/deletemarkedtimespan.md index b4dd16fe..37605dd6 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/deletemarkedtimespan.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/deletemarkedtimespan.md @@ -19,7 +19,7 @@ description: "移除使用 addMarkedTimespan() 方法创建的标记或阻塞" ### Example ~~~jsx -var spanID = scheduler.addMarkedTimespan({ +const spanID = scheduler.addMarkedTimespan({ days: [0,1], zones: "fullday" }); @@ -49,7 +49,7 @@ scheduler.deleteMarkedTimespan(spanID); ~~~js -var spanID = scheduler.addMarkedTimespan({ +const spanID = scheduler.addMarkedTimespan({ days: [3,4,5], zones: [100,400] }); diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/destroycalendar.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/destroycalendar.md index bee1dae4..17cc79f6 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/destroycalendar.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/destroycalendar.md @@ -19,7 +19,7 @@ description: "移除之前创建的迷你日历" ### Example ~~~jsx -var calendar = scheduler.renderCalendar(...); +const calendar = scheduler.renderCalendar(...); ... scheduler.destroyCalendar(calendar); ~~~ diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/destructor.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/destructor.md index e1dd2d25..2e3ff869 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/destructor.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/destructor.md @@ -15,7 +15,7 @@ description: "移除一个 scheduler 实例" ### Example ~~~jsx -var myScheduler = Scheduler.getSchedulerInstance(); +const myScheduler = Scheduler.getSchedulerInstance(); // 移除一个 scheduler 实例 myScheduler.destructor(); diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/detachevent.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/detachevent.md index 677a71db..2dad883a 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/detachevent.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/detachevent.md @@ -19,7 +19,7 @@ description: "移除之前通过 attachEvent 方法添加的事件处理程序" ### Example ~~~jsx -var myEvent = scheduler.attachEvent("onClick", function (id){ +const myEvent = scheduler.attachEvent("onClick", function (id){ ...//事件处理代码 }); ... diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/edit.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/edit.md index e78c8d28..43059260 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/edit.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/edit.md @@ -19,9 +19,9 @@ description: "在事件框内直接打开内联编辑器以更改事件文本" ### Example ~~~jsx -var eventId = scheduler.addEvent({ - start_date: "16-05-2013 09:00", - end_date: "16-05-2013 12:00", +const eventId = scheduler.addEvent({ + start_date: "16-05-2027 09:00", + end_date: "16-05-2027 12:00", text: "Meeting" }); ... diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/editstop.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/editstop.md index ef2c0f9d..68354f3c 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/editstop.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/editstop.md @@ -19,9 +19,9 @@ description: "结束打开时的inline事件编辑器" ### Example ~~~jsx -var eventId = scheduler.addEvent({ - start_date: "16-05-2013 09:00", - end_date: "16-05-2013 12:00", +const eventId = scheduler.addEvent({ + start_date: "16-05-2027 09:00", + end_date: "16-05-2027 12:00", text: "Meeting" }); ... diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/eventremove.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/eventremove.md index 2b70bb2a..0685b437 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/eventremove.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/eventremove.md @@ -19,7 +19,7 @@ description: "从HTML元素中移除事件处理程序" ### Example ~~~jsx -var eventId = scheduler.event("divId", "click", function(e){ +const eventId = scheduler.event("divId", "click", function(e){ do_something(); }); diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/formsection.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/formsection.md index ef123e77..b55b375f 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/formsection.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/formsection.md @@ -22,16 +22,16 @@ description: "提供对lightbox sections对象的访问" ### Example ~~~jsx -var time = scheduler.formSection('time'); -var descr = scheduler.formSection('description'); +const time = scheduler.formSection('time'); +const descr = scheduler.formSection('description'); //获取值 -var value = time.getValue(); -var value1 = descr.getValue(); +const value = time.getValue(); +const value1 = descr.getValue(); //赋值 descr.setValue('abc'); //针对只有单个控件的section -time.setValue(null,{start_date:new Date(2009,03,10),end_date:new Date(2012,03,10)}); +time.setValue(null,{start_date:new Date(2025,03,10),end_date:new Date(2027,03,10)}); //针对含有多个控件的section：第一个参数为null，第二个为数据对象 ~~~ diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/getactiondata.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/getactiondata.md index 838bdce2..0f4851f6 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/getactiondata.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/getactiondata.md @@ -23,8 +23,8 @@ description: "返回当前光标下的日期和区段（如果有的话）" ~~~jsx scheduler.attachEvent("onMouseMove", function(id, e){ - var action_data = scheduler.getActionData(e); - // -> {date:Tue Jun 30 2009 09:10:00, section:2} + const action_data = scheduler.getActionData(e); + // -> {date:Tue Jun 30 2027 09:10:00, section:2} ... }) ~~~ diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/getevent.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/getevent.md index e8f7433c..06fbeac4 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/getevent.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/getevent.md @@ -22,13 +22,13 @@ description: "提供对应于给定 id 的事件对象" ### Example ~~~jsx -var eventId = scheduler.addEvent({ - start_date: "16-05-2013 09:00", - end_date: "16-05-2013 12:00", +const eventId = scheduler.addEvent({ + start_date: "16-05-2027 09:00", + end_date: "16-05-2027 12:00", text: "Meeting" }); ... -var eventObj = scheduler.getEvent(eventId); +const eventObj = scheduler.getEvent(eventId); ~~~ ### Related samples diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/geteventenddate.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/geteventenddate.md index b8a84ad5..1542d17c 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/geteventenddate.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/geteventenddate.md @@ -24,13 +24,13 @@ description: "获取事件的结束日期" ### Example ~~~jsx -var eventId = scheduler.addEvent({ - start_date: "16-05-2013 09:00", - end_date: "16-05-2013 12:00", +const eventId = scheduler.addEvent({ + start_date: "16-05-2027 09:00", + end_date: "16-05-2027 12:00", text: "Meeting" }); ... -scheduler.getEvent(eventId).end_date; // -> Thu May 16 2013 12:00:00 +scheduler.getEvent(eventId).end_date; // -> Thu May 16 2027 12:00:00 ~~~ ### Related API diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/getevents.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/getevents.md index 3f21516f..032eb9b7 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/getevents.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/getevents.md @@ -23,7 +23,7 @@ description: "返回指定时间范围内发生的事件集合" ### Example ~~~jsx -const evs = scheduler.getEvents(new Date(2024,1,10),new Date(2024,2,10)); +const evs = scheduler.getEvents(new Date(2027,1,10),new Date(2027,2,10)); evs.forEach((e) => console.log(e.text)); // 或者 const evs = scheduler.getEvents();// 返回所有事件 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/geteventstartdate.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/geteventstartdate.md index 163c2cae..f731e715 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/geteventstartdate.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/geteventstartdate.md @@ -24,13 +24,13 @@ description: "获取事件的开始日期" ### Example ~~~jsx -var eventId = scheduler.addEvent({ - start_date: "16-05-2013 09:00", - end_date: "16-05-2013 12:00", +const eventId = scheduler.addEvent({ + start_date: "16-05-2027 09:00", + end_date: "16-05-2027 12:00", text: "Meeting" }); ... -scheduler.getEvent(eventId).start_date; // -> Thu May 16 2013 09:00:00 +scheduler.getEvent(eventId).start_date; // -> Sun May 16 2027 09:00:00 ~~~ ### Related API diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/geteventtext.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/geteventtext.md index c02a3d02..26fcf831 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/geteventtext.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/geteventtext.md @@ -24,9 +24,9 @@ description: "获取与事件关联的文本" ### Example ~~~jsx -var eventId = scheduler.addEvent({ - start_date: "16-05-2013 09:00", - end_date: "16-05-2013 12:00", +const eventId = scheduler.addEvent({ + start_date: "16-05-2027 09:00", + end_date: "16-05-2027 12:00", text: "Meeting" }); ... diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/getlabel.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/getlabel.md index 3d13baab..a1e0d50c 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/getlabel.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/getlabel.md @@ -30,7 +30,7 @@ scheduler.config.lightbox.sections=[ // 更多选项 ]; -var holder2 = scheduler.getLabel("unit_id", 2);// ->"John Williams" +const holder2 = scheduler.getLabel("unit_id", 2);// ->"John Williams" ~~~ ### Related samples @@ -53,11 +53,11 @@ scheduler.templates.event_text = function(start, end, event){ return event.text + " ("+scheduler.getLabel("unit_id",event.unit_id) +")"; }; -scheduler.init('scheduler_here',new Date(2013,5,30),"unit"); +scheduler.init('scheduler_here',new Date(2027,5,30),"unit"); scheduler.parse([ - {start_date:"06/30/2013 09:00",end_date:"06/30/2013 12:00",text:"TaskA",unit_id:1}, - {start_date:"06/30/2013 12:00",end_date:"06/30/2013 20:00",text:"TaskB",unit_id:2}, - {start_date:"06/30/2013 08:00",end_date:"06/30/2013 12:00",text:"TaskC",unit_id:2} + {start_date:"06/30/2027 09:00",end_date:"06/30/2027 12:00",text:"TaskA",unit_id:1}, + {start_date:"06/30/2027 12:00",end_date:"06/30/2027 20:00",text:"TaskB",unit_id:2}, + {start_date:"06/30/2027 08:00",end_date:"06/30/2027 12:00",text:"TaskC",unit_id:2} ],"json"); ~~~ diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/getrecdates.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/getrecdates.md index 7c9112c8..75faee38 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/getrecdates.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/getrecdates.md @@ -23,7 +23,7 @@ description: "获取重复事件的所有发生时间" ### Example ~~~jsx -var dates = scheduler.getRecDates(22); +const dates = scheduler.getRecDates(22); ~~~ ### Details @@ -32,24 +32,23 @@ var dates = scheduler.getRecDates(22); 此属性需要启用 [recurring](guides/extensions-list.md#recurring) 扩展。 ::: -举例来说，考虑一个重复事件（id: 22），它从2010年11月12日开始，每隔2天发生一次，时间为14:00到15:00，总共发生3次。该事件调用 [getRecDates](api/method/getrecdates.md) +举例来说，考虑一个重复事件（id: 22），它从2027年11月12日开始，每隔2天发生一次，时间为14:00到15:00，总共发生3次。该事件调用 [getRecDates](api/method/getrecdates.md) 方法将返回以下数组: ~~~js [ { - start_date: Tue Oct 12 2010 14:00:00 GMT+0300 (E. Europe Daylight Time), - end_date: Tue Oct 12 2010 15:00:00 GMT+0300 (E. Europe Daylight Time) + start_date: Tue Oct 12 2027 14:00:00 GMT+0300 (E. Europe Daylight Time), + end_date: Tue Oct 12 2027 15:00:00 GMT+0300 (E. Europe Daylight Time) }, { - start_date: Tue Oct 14 2010 14:00:00 GMT+0300 (E. Europe Daylight Time), - end_date: Tue Oct 14 2010 15:00:00 GMT+0300 (E. Europe Daylight Time) + start_date: Thu Oct 14 2027 14:00:00 GMT+0300 (E. Europe Daylight Time), + end_date: Thu Oct 14 2027 15:00:00 GMT+0300 (E. Europe Daylight Time) }, { - start_date: Tue Oct 16 2010 14:00:00 GMT+0300 (E. Europe Daylight Time), - end_date: Tue Oct 16 2010 15:00:00 GMT+0300 (E. Europe Daylight Time) + start_date: Sat Oct 16 2027 14:00:00 GMT+0300 (E. Europe Daylight Time), + end_date: Sat Oct 16 2027 15:00:00 GMT+0300 (E. Europe Daylight Time) } ] - ~~~ diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/getrenderedevent.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/getrenderedevent.md index 60f4b114..9bebc934 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/getrenderedevent.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/getrenderedevent.md @@ -22,12 +22,12 @@ description: "返回当前显示事件的 HTML 元素" ### Example ~~~jsx -var eventId = scheduler.addEvent({ - start_date: "16-05-2013 09:00", - end_date: "16-05-2013 12:00", +const eventId = scheduler.addEvent({ + start_date: "16-05-2027 09:00", + end_date: "16-05-2027 12:00", text: "Meeting" }); -var eventObj = scheduler.getRenderedEvent(eventId); +const eventObj = scheduler.getRenderedEvent(eventId); //->
09:00 Meeting
~~~ diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/getshortcuthandler.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/getshortcuthandler.md index 738a1a03..bdfb6a91 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/getshortcuthandler.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/getshortcuthandler.md @@ -23,7 +23,7 @@ description: "获取一个键盘导航快捷键的处理函数" ### Example ~~~jsx -var shortcut_handler = scheduler.getShortcutHandler("ctrl+a", "event"); +const shortcut_handler = scheduler.getShortcutHandler("ctrl+a", "event"); ~~~ ### Related samples diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/getstate.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/getstate.md index ed35abeb..17754034 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/getstate.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/getstate.md @@ -18,7 +18,7 @@ description: "获取调度器的当前状态" ### Example ~~~jsx -var mode = scheduler.getState().mode; +const mode = scheduler.getState().mode; if(mode == "day"){ // 在此处编写自定义逻辑 } diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/getuserdata.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/getuserdata.md index 213a3ae9..25352ac6 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/getuserdata.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/getuserdata.md @@ -23,9 +23,9 @@ description: "获取与特定事件关联的用户数据" ### Example ~~~jsx -var eventId = scheduler.addEvent({ - start_date: "16-06-2013 09:00", - end_date: "16-06-2013 12:00", +const eventId = scheduler.addEvent({ + start_date: "16-06-2027 09:00", + end_date: "16-06-2027 12:00", text: "Meeting" }); diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/getview.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/getview.md index bb42007c..13e70bae 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/getview.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/getview.md @@ -22,7 +22,7 @@ description: "根据视图名称返回一个视图对象。如果未提供名称 ### Example ~~~jsx -var timeline = scheduler.getView(); +const timeline = scheduler.getView(); timeline.x_size = 8; scheduler.setCurrentView(); ~~~ diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/init.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/init.md index 97c5bbac..1ce9ecab 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/init.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/init.md @@ -1,7 +1,7 @@ --- -sidebar_label: "init" -title: "init method" -description: "这是用于创建 dhtmlxScheduler 实例的构造函数。" +sidebar_label: init +title: "init 方法" +description: "dhtmlxScheduler 对象的构造函数" --- # init @@ -10,20 +10,20 @@ description: "这是用于创建 dhtmlxScheduler 实例的构造函数。" @short: 这是用于创建 dhtmlxScheduler 实例的构造函数。 -@signature: init: (container: string | HTMLElement, date?: Date, view?: string) =\> void +@signature: init: (container: string|HTMLElement, date?: Date, view?: string) =\> void ### Parameters -- `container` - (required) *string | HTMLElement* - 用于设置 dhtmlxScheduler 的 HTML 容器（或其 ID）。 -- `date` - (optional) *Date* - 调度器的起始日期（默认为当前日期）。 -- `view` - (optional) *string* - 初始视图模式（默认为 "week"）。 +- `container` - (required) *string | HTMLElement* - 一个 HTML 容器（或其 ID），将在其中初始化一个 dhtmlxScheduler 对象 +- `date` - (optional) *Date* - 调度器的初始日期，默认情况下为当前日期 +- `view` - (optional) *string* - 初始视图的名称，默认值为 "week" ### Example ~~~jsx -scheduler.init("scheduler_here",new Date(2010,0,6),"month"); +scheduler.init("scheduler_here", new Date(2027, 0, 6), "month"); ~~~ ### Related samples -- [Basic initialization](https://docs.dhtmlx.com/scheduler/samples/01_initialization_loading/01_basic_init.html) -- [Agenda view](https://docs.dhtmlx.com/scheduler/samples/03_extensions/03_agenda_view.html) +- [基础初始化](https://docs.dhtmlx.com/scheduler/samples/01_initialization_loading/01_basic_init.html) +- [议程视图](https://docs.dhtmlx.com/scheduler/samples/03_extensions/03_agenda_view.html) \ No newline at end of file diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/invertzones.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/invertzones.md index fe06f0a2..7ecd4ad5 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/invertzones.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/invertzones.md @@ -19,7 +19,7 @@ description: "翻转给定的时区范围" ### Example ~~~jsx -var zones = scheduler.invertZones([500, 1000]); // => [0, 500, 1000, 1440] +const zones = scheduler.invertZones([500, 1000]); // => [0, 500, 1000, 1440] ~~~ ### Details diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/iscalendarvisible.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/iscalendarvisible.md index 7d0b03b1..de2027ac 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/iscalendarvisible.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/iscalendarvisible.md @@ -19,7 +19,7 @@ description: "用于识别调度器中日历当前是否显示" ~~~jsx // 检查迷你日历是否可见 -var check = scheduler.isCalendarVisible(); // ->
…
+const check = scheduler.isCalendarVisible(); // ->
…
~~~ ### Related samples diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/isonedayevent.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/isonedayevent.md index 0d4bd9f0..43898961 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/isonedayevent.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/isonedayevent.md @@ -22,9 +22,9 @@ description: "判断给定事件是否仅持续一天，还是跨越多天" ### Example ~~~jsx -var eventId = scheduler.addEvent({ - start_date: "16-06-2013 09:00", - end_date: "16-06-2013 12:00", +const eventId = scheduler.addEvent({ + start_date: "16-06-2027 09:00", + end_date: "16-06-2027 12:00", text: "Meeting" }); scheduler.isOneDayEvent(scheduler.getEvent(eventId));//->true diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/linkcalendar.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/linkcalendar.md index 96f3df8d..c6ad6b4f 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/linkcalendar.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/linkcalendar.md @@ -20,7 +20,7 @@ description: "每当调度器（scheduler）中的活动日期发生变化时， ### Example ~~~jsx -var calendar = scheduler.renderCalendar({ +const calendar = scheduler.renderCalendar({ container:"cal_here", navigation:true, handler:function(date){ diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/load.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/load.md index f381b1a2..47185d64 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/load.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/load.md @@ -1,52 +1,51 @@ --- -sidebar_label: "load" +sidebar_label: load title: "load method" -description: "从外部源加载数据到scheduler中" +description: "loads data to the scheduler from an external data source" --- # load ### Description -@short: 从外部源加载数据到scheduler中 +@short: 从外部数据源将数据加载到调度器 @signature: load: (url: string, callback?: SchedulerCallback) =\> void ### Parameters -- `url` - (required) *string* - 服务器端URL（可以是静态文件或输出支持格式数据的服务器端脚本） -- `callback` - (optional) *function* - 加载完成后调用的函数 +- `url` - (required) *string* - 服务器端 URL（可能是静态文件，或输出数据为以下受支持格式之一的服务器端脚本） +- `callback` - (optional) *function* - 回调函数 ### Example ~~~jsx scheduler.load("data"); // 数据格式会自动检测 // 或者 -scheduler.load("data",function(){ +scheduler.load("data", () => { alert("数据已成功加载"); }); ~~~ ### Related samples -- [Basic initialization](https://docs.dhtmlx.com/scheduler/samples/01_initialization_loading/01_basic_init.html) -- [Loading data from a database](https://docs.dhtmlx.com/scheduler/samples/01_initialization_loading/05_loading_database.html) +- [基础初始化](https://docs.dhtmlx.com/scheduler/samples/01_initialization_loading/01_basic_init.html) +- [从数据库加载数据](https://docs.dhtmlx.com/scheduler/samples/01_initialization_loading/05_loading_database.html) ### Details -请注意，当动态加载数据时，作为第二个参数传入的callback函数仅在初始数据加载时触发。 -后续的数据加载会在之后进行，但callback不会再次调用。 +请注意，在动态加载的情况下，作为第二个参数传递的回调函数仅在初次加载数据时被调用。后续的数据块将稍后加载，因此回调函数将不再被调用。 -如果希望每次数据加载到Scheduler时都执行回调，建议使用 [onLoadEnd](api/event/onloadend.md) 事件。 +如果您需要在每次向 Scheduler 加载数据时都调用回调函数，可以使用 [`onLoadEnd`](api/event/onloadend.md) 事件。 -### 迁移说明 +## Migration -从版本5.2开始，scheduler会自动检测数据格式。 +在 v5.2 及更高版本中，Scheduler 会自动检测数据格式。 -在5.2之前的版本中，该方法接受三个参数: +但在 v5.2 之前，该方法包含三个参数： -- **url** - (*string*) 服务器端URL（可以是静态文件或输出XML数据的服务器端脚本） -- **type** - (*string*) ('json', 'xml', 'ical') 指定数据类型，默认值为 'xml' -- **callback** - (*function*) 加载完成后调用的函数 +- `url` - (*string*) 服务器端 URL（可能是静态文件，或输出数据为 XML 的服务器端脚本） +- `type` - (*string*) (*'json', 'xml', 'ical'*) 数据类型。默认值为 *'xml'* +- `callback` - (*function*) 回调函数 ### Related API - [onLoadEnd](api/event/onloadend.md) @@ -55,8 +54,8 @@ scheduler.load("data",function(){ - [onParse](api/event/onparse.md) ### Related Guides -- [데이터 포맷 예시](guides/data-formats.md) -- [데이터 불러오기](guides/loading-data.md) +- [数据格式示例](guides/data-formats.md) +- [加载数据](guides/loading-data.md) ### Change log -- 从版本5.2开始，移除了第二个 **type** 参数。 +- 从版本5.2开始，移除了第二个 `type` 参数。 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/markcalendar.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/markcalendar.md index 91b96599..3d2818aa 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/markcalendar.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/markcalendar.md @@ -36,7 +36,7 @@ my_style{ var calendar = document.querySelector(".dhx_mini_calendar"); ... - scheduler.markCalendar(calendar, new Date(2010,3,1), "my_style"); + scheduler.markCalendar(calendar, new Date(2027,3,1), "my_style"); ~~~ diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/marktimespan.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/marktimespan.md index b753854c..ab351377 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/marktimespan.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/marktimespan.md @@ -76,8 +76,8 @@ scheduler.markTimespan({ ~~~js -// 阻止从 2012年5月3日 开始直到 'end_date' 的事件创建 -start_date:new Date(2012,4,3) +// 阻止从 2027年5月3日 开始直到 'end_date' 的事件创建 +start_date:new Date(2027,4,3) ~~~ @@ -88,8 +88,8 @@ start_date:new Date(2012,4,3) ~~~js -// 阻止从 'start_date' 开始直到 2012年9月3日 的事件创建 -end_date:new Date(2012,8,3) +// 阻止从 'start_date' 开始直到 2027年9月3日 的事件创建 +end_date:new Date(2027,8,3) ~~~ @@ -102,7 +102,7 @@ end_date:new Date(2012,8,3) ~~~js days:[0, 2, 6] // 限制星期日、星期二和星期六 days:"fullweek" // 限制整周 -days:new Date(2012,6,1) // 阻止 2012年7月1日 +days:new Date(2027,6,1) // 阻止 2027年7月1日 ~~~ @@ -244,8 +244,8 @@ var config ={ ~~~js var config ={ - start_date: new Date(2012,7,13), - end_date: new Date(2012,7,14), + start_date: new Date(2027,7,13), + end_date: new Date(2027,7,14), css: "cssClassName", sections: { unit: 5 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/message.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/message.md index 479d7dc3..63b919c5 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/message.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/message.md @@ -22,7 +22,7 @@ description: "打开一个指定类型的 message box" ### Example ~~~jsx -var box = scheduler.message({ +const box = scheduler.message({ type:"confirm-warning", text:"Are you sure you want to do it?" }); diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/modalbox.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/modalbox.md index 094692be..935db4ab 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/modalbox.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/modalbox.md @@ -22,7 +22,7 @@ description: "打开一个 modalbox" ### Example ~~~jsx -var box = scheduler.modalbox({ +const box = scheduler.modalbox({ title: "Close", type: "alert-warning" }); diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/parse.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/parse.md index 96e09d8b..4b47f3df 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/parse.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/parse.md @@ -1,44 +1,42 @@ --- -sidebar_label: "parse" -title: "parse method" -description: "处理从客户端资源加载数据" +sidebar_label: parse +title: "parse 方法" +description: "从客户端资源加载数据" --- # parse ### Description -@short: 处理从客户端资源加载数据 +@short: 从客户端资源加载数据 @signature: parse: (data: any) =\> void ### Parameters -- `data` - (required) *object* - 一个包含数据的字符串或对象 +- `data` - (必填) *object* - 一个表示数据的字符串或对象 ### Example ~~~jsx scheduler.parse([ - { start_date:"2020-05-13 6:00", end_date:"2020-05-13 8:00", text:"Event 1"}, - { start_date:"2020-06-09 6:00", end_date:"2020-06-09 8:00", text:"Event 2"} + { start_date: "2027-05-13 6:00", end_date: "2027-05-13 8:00", text: "Event 1" }, + { start_date: "2027-06-09 6:00", end_date: "2027-06-09 8:00", text: "Event 2" } ]); ~~~ ### Related samples -- [Coloring events](https://docs.dhtmlx.com/scheduler/samples/02_customization/01_events_coloring.html) -- [Displaying events as a cascade](https://docs.dhtmlx.com/scheduler/samples/02_customization/24_cascade_event_display.html) +- [将事件着色](https://docs.dhtmlx.com/scheduler/samples/02_customization/01_events_coloring.html) +- [将事件级联显示](https://docs.dhtmlx.com/scheduler/samples/02_customization/24_cascade_event_display.html) -### Details +## Migration -### 迁移说明 +在 v5.2 及以后版本中，Scheduler 会自动检测数据格式。 -从版本 5.2 开始，scheduler 会自动识别数据格式。 +但在 v5.2 之前，该方法包含两个参数： -在早期版本（5.2 之前），该方法接受两个参数: - -- **data** - (*object*) 包含数据的字符串或对象； -- **type** - (*string*) 可选，('json', 'xml', 'ical') 指定数据类型。默认值为 'xml' +- `data` - (*object*) 一个表示数据的字符串或对象 +- `type` - (*string*) 可选，(*'json', 'xml', 'ical'*) 数据类型。默认值是 *'xml'* ### Related API - [onBeforeParse](api/event/onbeforeparse.md) @@ -46,7 +44,7 @@ scheduler.parse([ - [parse_date](api/template/parse_date.md) ### Related Guides -- [데이터 포맷 예시](guides/data-formats.md) +- [Examples of Data Formats](guides/data-formats.md) ### Change log -- 第二个 **type** 参数在版本 5.2 中被移除。 +- 在 v5.2 中，该方法的第二个 `type` 参数已被移除。 \ No newline at end of file diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/plugins.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/plugins.md index 20665f52..eb44ce24 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/plugins.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/plugins.md @@ -29,4 +29,4 @@ scheduler.plugins({ - [전체 확장 기능 목록](guides/extensions-list.md) ### Change log -- added in v6.0 +- 版本 6.0 中添加 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/removeshortcut.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/removeshortcut.md index 5d7064fb..ee233512 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/removeshortcut.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/removeshortcut.md @@ -22,7 +22,7 @@ description: "移除键盘快捷键" ~~~jsx // 添加快捷键 scheduler.addShortcut("shift+w", function(e){ - var eventId = scheduler.locate(e); + const eventId = scheduler.locate(e); if(eventId) scheduler.showQuickInfo(eventId); },"event"); diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/render.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/render.md index 3944ae75..362b8b2b 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/render.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/render.md @@ -26,7 +26,7 @@ scheduler.render(); // 切换到不同日期 -scheduler.render(new Date(2020,7,4)); +scheduler.render(new Date(2027,7,4)); // 切换到不同视图 scheduler.render(null, "week"); diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/renderevent.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/renderevent.md index 3e0c7260..bba006c4 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/renderevent.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/renderevent.md @@ -24,8 +24,8 @@ description: "创建自定义事件框的HTML内容" ~~~jsx scheduler.renderEvent = function(container, ev) { - var container_width = container.style.width; - var html = "
"; ... container.innerHTML = html; diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/resetlightbox.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/resetlightbox.md index 96687d30..d28f16f8 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/resetlightbox.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/resetlightbox.md @@ -15,17 +15,17 @@ description: "移除当前 lightbox 的 HTML 对象元素" ### Example ~~~jsx -var full_lightbox = [ +const full_lightbox = [ { name: "description", map_to: "text", type: "textarea", focus: true}, { name: "time", map_to: "auto", type: "time"} ]; -var restricted_lightbox = [ +const restricted_lightbox = [ { name: "description", map_to: "text", type: "textarea", focus: true}, ]; ... scheduler.attachEvent("onBeforeLightbox", function(event_id) { scheduler.resetLightbox(); - var ev = scheduler.getEvent(event_id); + const ev = scheduler.getEvent(event_id); if (ev.restricted ==true){ scheduler.config.lightbox.sections = restricted_lightbox; } else { diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/select.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/select.md index ec95b946..b31ee3ed 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/select.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/select.md @@ -19,9 +19,9 @@ description: "选择你指定的事件" ### Example ~~~jsx -var eventId = scheduler.addEvent({ - start_date: "16-06-2013 09:00", - end_date: "16-06-2013 12:00", +const eventId = scheduler.addEvent({ + start_date: "16-06-2027 09:00", + end_date: "16-06-2027 12:00", text: "Meeting" }); diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/serialize.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/serialize.md index ff4d4036..af9dd3f0 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/serialize.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/serialize.md @@ -19,15 +19,15 @@ console.log(scheduler.serialize()); //(5) [{…}, {…}, {…}, {…}, {…}] -//> 0: {id: 1, start_date: '2022-05-17 09:00', end_date: '2022-05-17 12:00', +//> 0: {id: 1, start_date: '2027-05-17 09:00', end_date: '2027-05-17 12:00', // text: 'Event'} -//> 1: {id: 2, start_date: '2022-05-18 10:00', end_date: '2022-05-18 16:00', +//> 1: {id: 2, start_date: '2027-05-18 10:00', end_date: '2027-05-18 16:00', // text: 'Event'} -//> 2: {id: 3, start_date: '2022-05-20 10:00', end_date: '2022-05-20 14:00', +//> 2: {id: 3, start_date: '2027-05-20 10:00', end_date: '2027-05-20 14:00', // text: 'Event'} -//> 3: {id: 4, start_date: '2022-05-21 16:00', end_date: '2022-05-21 17:00', +//> 3: {id: 4, start_date: '2027-05-21 16:00', end_date: '2027-05-21 17:00', // text: 'Event'} -//> 4: {id: 5, start_date: '2022-05-22 09:00', end_date: '2022-05-22 17:00', +//> 4: {id: 5, start_date: '2027-05-22 09:00', end_date: '2027-05-22 17:00', // text: 'Event'} ~~~ @@ -43,4 +43,4 @@ console.log(scheduler.serialize()); - [format_date](api/template/format_date.md) ### Change log -- added in v6.0 +- 版本 6.0 中添加 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/serverlist.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/serverlist.md index 4a5f24c3..162bb860 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/serverlist.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/serverlist.md @@ -24,10 +24,10 @@ description: "定义一个命名集合，可加载到 Units、Timeline 视图或 ~~~jsx // 通过名称 'my_list' 获取一个选项列表 -var list = scheduler.serverList("my_list"); +const list = scheduler.serverList("my_list"); ... // 创建并返回一个包含指定选项的列表 -var list = scheduler.serverList("options", [ +const list = scheduler.serverList("options", [ {key: 1, label: "John"}, {key: 2, label: "Adam"}, {key: 3, label: "Diane"} diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/setcurrentview.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/setcurrentview.md index d22a0fc6..b42e1f3a 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/setcurrentview.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/setcurrentview.md @@ -1,14 +1,14 @@ --- -sidebar_label: "setCurrentView" +sidebar_label: setCurrentView title: "setCurrentView method" -description: "显示所选的视图和日期" +description: "显示指定的视图和日期" --- # setCurrentView ### Description -@short: 显示所选的视图和日期 +@short: 显示指定的视图和日期 @signature: setCurrentView: (date?: Date, view?: string) =\> void @@ -22,10 +22,10 @@ description: "显示所选的视图和日期" ~~~jsx // 刷新当前视图和日期，不做任何更改 scheduler.setCurrentView(); -// 显示当前视图中的2012年7月4日 -scheduler.setCurrentView(new Date(2012,7,4)); -// 在周视图中显示2012年5月3日 -scheduler.setCurrentView(new Date(2012,5,3), "week"); +// 显示当前视图中的2027年8月4日 +scheduler.setCurrentView(new Date(2027, 7, 4)); +// 在周视图中显示2027年6月3日 +scheduler.setCurrentView(new Date(2027, 5, 3), "week"); ~~~ ### Related samples @@ -34,11 +34,11 @@ scheduler.setCurrentView(new Date(2012,5,3), "week"); ### Details -- 默认视图名称包括"day"，"week"和"month"。对于其他任何视图，请使用其name参数。 -- 调用此方法会触发 [onBeforeViewChange](api/event/onbeforeviewchange.md) 和 [onViewChange](api/event/onviewchange.md) 事件。 -- 此方法类似于 [updateView](api/method/updateview.md)，但关键区别在于 [updateView](api/method/updateview.md) **不会触发任何事件**。 +- 默认视图的名称是 'day', 'week', 'month'. 要指定任何其他视图，请使用其 `name` 参数。 +- 该方法会触发 [`onBeforeViewChange`](api/event/onbeforeviewchange.md) 和 [`onViewChange`](api/event/onviewchange.md)。 +- 该方法类似于 [`updateView()`](api/method/updateview.md)。唯一的区别是 [`updateView()`](api/method/updateview.md) 不会生成任何事件。 ### Related API - [onBeforeViewChange](api/event/onbeforeviewchange.md) - [onViewChange](api/event/onviewchange.md) -- [updateView](api/method/updateview.md) +- [updateView](api/method/updateview.md) \ No newline at end of file diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/setevent.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/setevent.md index 6b69a8ec..f199081b 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/setevent.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/setevent.md @@ -21,8 +21,8 @@ description: "向调度器的数据池中添加一个新的事件" ~~~jsx scheduler.setEvent(1, { - start_date: new Date(2013, 05, 16, 09, 00), - end_date: new Date(2013, 05, 16, 12, 00), + start_date: new Date(2027, 05, 16, 09, 00), + end_date: new Date(2027, 05, 16, 12, 00), text: "Meeting", holder: "John", room: "5" diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/setlightboxsize.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/setlightboxsize.md index 2de74199..f3dd7423 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/setlightboxsize.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/setlightboxsize.md @@ -15,7 +15,7 @@ description: "更新 lightbox 的大小" ### Example ~~~jsx -var control = scheduler.formSection("description"); +const control = scheduler.formSection("description"); control.header.style.display = "none"; scheduler.setLightboxSize(); diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/setloadmode.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/setloadmode.md index f0338407..34bc09c5 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/setloadmode.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/setloadmode.md @@ -20,7 +20,7 @@ description: "设置分段加载数据的模式，实现动态加载" ~~~jsx scheduler.config.load_date = "%Y.%m.%d"; -scheduler.init('scheduler_here',new Date(2009,10,1),"month"); +scheduler.init('scheduler_here',new Date(2027,10,1),"month"); scheduler.setLoadMode("month") scheduler.load("data/events.php"); diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/setuserdata.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/setuserdata.md index 945a4db8..e6784df4 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/setuserdata.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/setuserdata.md @@ -21,9 +21,9 @@ description: "将用户数据分配给特定事件" ### Example ~~~jsx -var eventId = scheduler.addEvent({ - start_date: "16-06-2013 09:00", - end_date: "16-06-2013 12:00", +const eventId = scheduler.addEvent({ + start_date: "16-06-2027 09:00", + end_date: "16-06-2027 12:00", text: "Meeting" }); diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/showevent.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/showevent.md index ce5718fc..910296f6 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/showevent.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/showevent.md @@ -40,9 +40,9 @@ scheduler.showEvent(someId); 例如，在程序中添加一个新事件后，可以这样在scheduler中显示它: ~~~js -var eventId = scheduler.addEvent({ - start_date: "08-06-2013 09:00", - end_date: "08-06-2013 11:00", +const eventId = scheduler.addEvent({ + start_date: "08-06-2027 09:00", + end_date: "08-06-2027 11:00", text: "Meeting" }); ... diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/showlightbox.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/showlightbox.md index 8b620fff..08c19947 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/showlightbox.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/showlightbox.md @@ -19,9 +19,9 @@ description: "为指定事件打开lightbox" ### Example ~~~jsx -var eventId = scheduler.addEvent({ - start_date: "08-06-2013 09:00", - end_date: "08-06-2013 11:00", +const eventId = scheduler.addEvent({ + start_date: "08-06-2027 09:00", + end_date: "08-06-2027 11:00", text: "会议" }); ... diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/showquickinfo.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/showquickinfo.md index b3a3c3fe..881c92db 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/showquickinfo.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/showquickinfo.md @@ -19,9 +19,9 @@ description: "为指定事件打开弹出事件表单" ### Example ~~~jsx -var eventId = scheduler.addEvent({ - start_date: "08-06-2013 09:00", - end_date: "08-06-2013 11:00", +const eventId = scheduler.addEvent({ + start_date: "08-06-2027 09:00", + end_date: "08-06-2027 11:00", text: "Meeting" }); diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/toical.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/toical.md index 35a37929..1c02532a 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/toical.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/toical.md @@ -22,9 +22,9 @@ description: "将调度器数据转换为ICal格式" ### Example ~~~jsx -var str = scheduler.toICal(); +const str = scheduler.toICal(); //或者 -var str = scheduler.toICal("My calendar"); +const str = scheduler.toICal("My calendar"); ~~~ ### Related samples diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/tojson.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/tojson.md index 41a2e297..c9f938b3 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/tojson.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/tojson.md @@ -18,7 +18,7 @@ description: "将调度器的数据转换为 JSON 格式的字符串" ### Example ~~~jsx -var str = scheduler.toJSON(); +const str = scheduler.toJSON(); ~~~ ### Related samples diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/topdfrange.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/topdfrange.md index 16a76c85..f020ea13 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/topdfrange.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/topdfrange.md @@ -23,8 +23,8 @@ description: "导出多个调度器视图到PDF文档（适用于打印）" ### Example ~~~jsx -//导出从2012年1月1日到2012年2月1日的“week”视图页面 -scheduler.toPDFRange(new Date(2012,0,1), new Date(2012, 1,1),'week', +//导出从2027年1月1日到2027年2月1日的“week”视图页面 +scheduler.toPDFRange(new Date(2027,0,1), new Date(2027, 1,1),'week', 'generate.php', 'fullcolor'); ~~~ diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/toxml.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/toxml.md index 34ef611a..3288c61f 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/toxml.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/toxml.md @@ -18,7 +18,7 @@ description: "将调度器的数据转换为XML格式" ### Example ~~~jsx -var str = scheduler.toXML(); +const str = scheduler.toXML(); ~~~ ### Related samples diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/uid.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/uid.md index 723b3433..4279f310 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/uid.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/uid.md @@ -18,5 +18,5 @@ description: "创建一个在当前 scheduler 实例内保证唯一的唯一 ID ### Example ~~~jsx -var new_id = scheduler.uid(); +const new_id = scheduler.uid(); ~~~ diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/unblocktime.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/unblocktime.md index d29171f1..5114565c 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/unblocktime.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/unblocktime.md @@ -23,10 +23,10 @@ description: "移除之前通过 blockTime() 方法设置的时间阻断" ### Example ~~~jsx -var spanId = scheduler.blockTime(new Date(2013,2,5), "fullday"); +const spanId = scheduler.blockTime(new Date(2027,2,5), "fullday"); ... -// 解除2013年2月5日0点到8点以及18点到24点的阻断 -scheduler.unblockTime(new Date(2013,2,5), [0,10*60]); +// 解除2027年2月5日0点到8点以及18点到24点的阻断 +scheduler.unblockTime(new Date(202713,2,5), [0,10*60]); ~~~ ### Related API diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/unmarkcalendar.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/unmarkcalendar.md index d61b181f..6948f9fe 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/unmarkcalendar.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/unmarkcalendar.md @@ -24,7 +24,7 @@ description: "从指定日期移除一个 CSS 类" // 获取日历对象有两种方式： // 通过创建一个迷你日历 -var calendar = scheduler.renderCalendar({ +const calendar = scheduler.renderCalendar({ container:"cal_here", navigation:true, handler:function(date){ @@ -35,9 +35,9 @@ var calendar = scheduler.renderCalendar({ // 或者通过选择包含迷你日历的容器 var calendar = document.querySelector(".dhx_mini_calendar"); -scheduler.markCalendar(calendar, new Date(2010,3,1), "my_style"); +scheduler.markCalendar(calendar, new Date(2027,3,1), "my_style"); ... -scheduler.unmarkCalendar(calendar, new Date(2010,3,1), "my_style"); +scheduler.unmarkCalendar(calendar, new Date(2027,3,1), "my_style"); ~~~ ### Details diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/unmarktimespan.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/unmarktimespan.md index 227b900a..a979ad7e 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/unmarktimespan.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/unmarktimespan.md @@ -19,7 +19,7 @@ description: "清除由 markTimespan() 方法应用的标记或阻止" ### Example ~~~jsx -var spanDIV = scheduler.markTimespan({ +const spanDIV = scheduler.markTimespan({ days: [0,6], zones: "fullday" }); diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/unselect.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/unselect.md index effa74fd..b429e9cb 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/unselect.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/unselect.md @@ -19,9 +19,9 @@ description: "从指定事件中移除选中状态" ### Example ~~~jsx -var eventId = scheduler.addEvent({ - start_date: "16-06-2013 09:00", - end_date: "16-06-2013 12:00", +const eventId = scheduler.addEvent({ + start_date: "16-06-2027 09:00", + end_date: "16-06-2027 12:00", text: "Meeting" }); diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/updatecalendar.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/updatecalendar.md index a2200f5e..3138f22f 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/updatecalendar.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/updatecalendar.md @@ -20,7 +20,7 @@ description: "在迷你 calendar 中显示所选日期" ### Example ~~~jsx -var calendar = scheduler.renderCalendar({ +const calendar = scheduler.renderCalendar({ container:"cal_here", navigation:true, handler:function(date){ @@ -28,7 +28,7 @@ var calendar = scheduler.renderCalendar({ } }); ... -scheduler.updateCalendar(calendar, new Date(2013,01,01)); +scheduler.updateCalendar(calendar, new Date(2027,01,01)); ~~~ ### Details diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/updateevent.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/updateevent.md index e43ba5d4..ea3377d2 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/updateevent.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/updateevent.md @@ -19,9 +19,9 @@ description: "修改指定的事件" ### Example ~~~jsx -var eventId = scheduler.addEvent({ - start_date: "16-06-2013 09:00", - end_date: "16-06-2013 12:00", +const eventId = scheduler.addEvent({ + start_date: "16-06-2027 09:00", + end_date: "16-06-2027 12:00", text: "Meeting" }); diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/updateview.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/updateview.md index 1bf5feaf..d6ad6b46 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/updateview.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/updateview.md @@ -1,31 +1,31 @@ --- -sidebar_label: "updateView" -title: "updateView method" -description: "显示指定的视图和日期，但不触发任何事件" +sidebar_label: updateView +title: "updateView 方法" +description: "显示指定的视图和日期（不触发任何事件）" --- # updateView ### Description -@short: 显示指定的视图和日期，但不触发任何事件 +@short: 显示指定的视图和日期（不触发任何事件） @signature: updateView: (date?: Date, view?: string) =\> void ### Parameters -- `date` - (optional) *Date* - （可选）要设置的日期 -- `view` - (optional) *string* - （可选）视图名称 +- `date` - (optional) *Date* - 要设置的日期 +- `view` - (optional) *string* - 视图名称 ### Example ~~~jsx -// 刷新当前视图和日期，但不做任何更改 +// 显示当前视图和日期。仅刷新，不改变任何内容 scheduler.updateView(); -// 在当前视图中显示2012年7月4日 -scheduler.updateView(new Date(2012,7,4)); -// 在“week”视图中显示2012年5月3日 -scheduler.updateView(new Date(2012,5,3), "week"); +// 在当前活动视图中显示 2027-08-04 +scheduler.updateView(new Date(2027, 7, 4)); +// 在周视图中显示 2027-06-03 +scheduler.updateView(new Date(2027, 5, 3), "week"); ~~~ ### Related samples @@ -33,11 +33,11 @@ scheduler.updateView(new Date(2012,5,3), "week"); ### Details -- 调用此函数而不传入任何参数，仅刷新当前视图。 -- 默认视图名称为 'day'、'week' 和 'month'。若要使用其他视图，请提供其**name**参数。 -- 此方法与 [setCurrentView](api/method/setcurrentview.md) 类似。主要区别是，[setCurrentView](api/method/setcurrentview.md) 会触发 [onBeforeViewChange](api/event/onbeforeviewchange.md) 和 [onViewChange](api/event/onviewchange.md) 事件，而 **updateView** 则不会。 +- 不带参数调用时，该函数将仅刷新当前视图。 +- 默认视图的名称为 'day', 'week', 'month'。要指定其他视图，请使用它的 `name` 参数。 +- 此方法类似于 [`setCurrentView()`](api/method/setcurrentview.md)。唯一的区别是，与 `updateView()` 不同， [`setCurrentView()`](api/method/setcurrentview.md) 会触发 [`onBeforeViewChange`](api/event/onbeforeviewchange.md) 和 [`onViewChange`](api/event/onviewchange.md) 事件。 ### Related API - [setCurrentView](api/method/setcurrentview.md) - [onBeforeViewChange](api/event/onbeforeviewchange.md) -- [onViewChange](api/event/onviewchange.md) +- [onViewChange](api/event/onviewchange.md) \ No newline at end of file diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/other/ajax.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/other/ajax.md index f0c353a3..e2f5ff46 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/other/ajax.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/other/ajax.md @@ -19,11 +19,11 @@ description: "scheduler ajax 模块" {status: "ok", data: "value", data2: "value2"} -var xhr = scheduler.ajax; +const xhr = scheduler.ajax; // HTTP GET xhr.get("server.php").then(function(response) { - var res = JSON.parse(response.responseText); + const res = JSON.parse(response.responseText); if (res && res.status == "ok") { // 响应正常 } @@ -36,7 +36,7 @@ xhr.post({ paramName: "paramValue" } }).then(function(response){ - var res = JSON.parse(response.responseText); + const res = JSON.parse(response.responseText); if (res && res.status == "ok") { // 响应正常 } @@ -107,7 +107,7 @@ scheduler.ajax.post({ paramName: "paramValue" }, callback: function(result){ - var response = result.xmlDoc; + const response = result.xmlDoc; alert(response.responseText); } @@ -221,7 +221,7 @@ dhtmlxScheduler 支持 promises（包括 IE8+）。它内部使用 [Bluebird](ht 创建 promise 的方式如下: ~~~js -var promise = new scheduler.Promise(function(resolve, reject) {...}); +const promise = new scheduler.Promise(function(resolve, reject) {...}); ~~~ 该 promise 实现作用域限定在 Scheduler 内部，因此不是全局的。 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/other/config.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/other/config.md index 23a1312a..2b3acd88 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/other/config.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/other/config.md @@ -18,7 +18,7 @@ description: "定义日期、刻度、控件的配置选项" //设置Y轴项目的格式 scheduler.config.hour_date = "%H:%i:%s"; ... -scheduler.init('scheduler_here', new Date(2013, 7, 5), "month"); +scheduler.init('scheduler_here', new Date(2027, 7, 5), "month"); ~~~ ### Details diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/other/date.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/other/date.md index 08d5fe96..9a55c49d 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/other/date.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/other/date.md @@ -1,136 +1,139 @@ --- -sidebar_label: "date" +sidebar_label: date title: "date config" -description: "一组用于格式化和操作日期的方法集合" +description: "a set of date formatting methods" --- -# date +# 日期 ### Description -@short: 一组用于格式化和操作日期的方法集合 +@short: 一组日期格式化方法 @signature: date: SchedulerDateHelpers + ### Details -**date** 对象包含多个实用方法: +`date` 对象提供以下方法： -- **add**(date, number, unit) - 通过添加或减少指定的时间单位来调整日期 - - **date** - (Date) 要修改的日期对象 - - **number** - (number) 要添加的时间单位数量；正数表示增加时间，负数表示减少时间 - - **unit** - ('minute', 'hour', 'day', 'week', 'month', 'year') 时间单位 +- `add()` - 向日期添加/从日期中减去指定的时间区间 + - `date` - (Date) 需要添加时间/减去时间的日期对象 + - `number` - (number) 要添加的单位数量。若此数字为正，时间将被添加到日期；若为负，则从日期中减去时间 + - `unit` - ('minute', 'hour', 'day', 'week', 'month', 'year') 时间单位 ~~~js -// 给指定日期加1年：2019年6月29日 -> 2020年6月29日 -var newDate = scheduler.date.add(new Date(2019, 05, 29), 1, 'year'); +// 给指定日期加上 1 年: 2027-06-29 -> 2028-06-29 +const newDate = scheduler.date.add(new Date(2027, 5, 29), 1, 'year'); ~~~ -- **convert_to_utc**(date) - 将本地时间转换为对应的UTC时间 - - **date** - (Date) 要转换的日期对象 +- `convert_to_utc()` - 将本地时间转换为 UTC + - `date` - (Date) 需要转换的日期对象 ~~~js -// 2019年6月29日14:00（本地时间） -> 2019年6月29日12:00（UTC） -var time = scheduler.date.convert_to_utc(new Date(2019, 05, 29, 14, 00)); +// 2027-06-29 14:00（本地时间） -> 2027-06-29 12:00（UTC） +const time = scheduler.date.convert_to_utc(new Date(2027, 5, 29, 14, 0)); ~~~ -- **copy**(date) - 创建一个日期对象的副本 - - **date** - (Date) 要复制的日期对象 +- `copy()` - 复制一个 Date 对象 + - `date` - (Date) 要复制的日期对象 ~~~js -var copy = scheduler.date.copy(new Date(2019, 05, 29)); // -> 2019年6月29日 +const copy = scheduler.date.copy(new Date(2027, 5, 29)); // -> 2027-06-29 ~~~ -- **date_part**(date) - 将日期的时间部分重置为00:00:00 - - **date** - (Date) 要修改的日期对象 +- `date_part()` - 将提供日期的时间部分重置为 00:00:00 + - `date` - (Date) 要格式化的日期对象 ~~~js -// 2019年6月29日14:30:10 -> 2019年6月29日00:00:00 -var date = scheduler.date.date_part(new Date(2019, 05, 29, 14, 30, 10)); +// 2027-06-29 14:30:10 -> 2027-06-29 00:00:00 +const date = scheduler.date.date_part(new Date(2027, 5, 29, 14, 30, 10)); ~~~ -- **date_to_str**(format, utc) - 返回一个函数，该函数将Date对象转换为指定格式的字符串 - - **format** - (string) 期望的日期格式（参见 [날짜 형식 지정](guides/settings-format.md)） - - **utc** - (boolean) 是否将本地时间转换为UTC时间 +- `date_to_str()` - 返回一个函数，将 Date 对象转换为指定格式的字符串 +参数: `format` - (string) 日期格式（见 [Date Format Specification](guides/settings-format.md)） +`utc` - (boolean) 指定是否将本地时间转换为 UTC ~~~js -var formatFunc = scheduler.date.date_to_str("%d/%m/%Y"); -var date = formatFunc(new Date(2019, 05, 29)); // -> "29/06/2019" +const formatFunc = scheduler.date.date_to_str("%d/%m/%Y"); +const date = formatFunc(new Date(2027, 5, 29)); // -> "29/06/2027" ~~~ -- **day_start**(date) - 将日期的时间部分重置为00:00:00；这是 date_part 方法的别名。该方法用于Day视图中设置显示日期，可根据需要自定义 - - **date** - (Date) 要修改的日期对象 +- `day_start()` - 将提供日期的时间部分重置为 00:00:00。是 `date_part()` 方法的别名。Day 视图用于设置显示日期，并且可以被重新定义以提供默认行为 +参数: `date` - (Date) 要格式化的日期对象 ~~~js -// 2019年6月29日14:30:10 -> 2019年6月29日00:00:00 -var date = scheduler.date.day_start(new Date(2019, 05, 29, 14, 30, 10)); +// 2027-06-29 14:30:10 -> 2027-06-29 00:00:00 +const date = scheduler.date.day_start(new Date(2027, 5, 29, 14, 30, 10)); ~~~ ->**注意**，此方法会修改传入的日期对象。若要避免修改原始日期，请在传入前用 *new Date* 包裹。例如: +> **注**，传入给方法的日期实际会被修改。若要防止原始日期被修改，可以用 `new Date()` 包装输入日期。例如： ~~~js -var date1 = new Date(2019, 05, 29, 14, 30, 10); -var date2 = scheduler.date.day_start(new Date(date1)); +const originalDate = new Date(2027, 5, 29, 14, 30, 10); +const dayStartDate = scheduler.date.day_start(new Date(originalDate)); ~~~ -- **getISOWeek**(date) - 返回给定日期的ISO周数 - - **date** - (Date) 要计算的日期对象 +- `getISOWeek()` - 返回日期的周数 + - `date` - (Date) 要格式化的日期对象 ~~~js -var week = scheduler.date.getISOWeek(new Date(2019, 05, 29)); // -> 26 +const week = scheduler.date.getISOWeek(new Date(2027, 5, 29)); // -> 26 ~~~ -- **getUTCISOWeek**(date) - 在将日期转换为UTC后，返回该日期的ISO周数 - - **date** - (Date) 要计算的日期对象 +- `getUTCISOWeek()` - 返回日期的周数，但先将本地时间转换为 UTC + - `date` - (Date) 要格式化的日期对象 ~~~js -var week = scheduler.date.getUTCISOWeek(new Date(2019, 05, 29)); // -> 26 +const week = scheduler.date.getUTCISOWeek(new Date(2027, 5, 29)); // -> 26 ~~~ -- **month_start**(date) - 返回一个新的Date对象，表示该日期所在月份的第一天，时间部分重置为00:00:00 - - **date** - (Date) 要处理的日期对象 +- `month_start()` - 返回指定日期所在月份的第一天的 Date 对象，并将时间部分清零 + - `date` - (Date) 要格式化的日期对象 ~~~js -// 2019年6月29日14:30 -> 2019年6月1日00:00 -var firstDay = scheduler.date.month_start(new Date(2019, 05, 29, 14, 30)); +// 2027-06-29 14:30 -> 2027-06-01 00:00 +const firstDay = scheduler.date.month_start(new Date(2027, 5, 29, 14, 30)); ~~~ -- **str_to_date**(format, utc, parseExact) - 返回一个函数，该函数将指定格式的日期字符串转换为Date对象 - - **format** - (string) 日期格式（参见 [날짜 형식 지정](guides/settings-format.md)） - - **utc** - (boolean) 是否将本地时间转换为UTC时间 - - **parseExact** - (boolean) 指定Scheduler是否自动检测日期格式（默认*false*）或严格使用提供的格式（*true*） + +- `str_to_date()` - 返回一个函数，将指定格式的字符串转换为 Date 对象 +参数: `format` - (string) 日期格式（见 [Date Format Specification](guides/settings-format.md)） +`utc` - (boolean) 指定是否将本地时间转换为 UTC +`parseExact` - (boolean) 定义 Scheduler 是否自动识别日期格式（*false*，默认）还是使用用户传入的格式（*true*） + ~~~js -var formatFunc = scheduler.date.str_to_date("%d/%m/%Y"); -var date = formatFunc("29/06/2019"); // -> 2019年6月29日00:00:00 +const formatFunc = scheduler.date.str_to_date("%d/%m/%Y"); +const date = formatFunc("29/06/2027"); // -> 2027-06-29 00:00:00 ~~~ -- **time_part**(date) - 返回Date对象的时间部分，表示为自午夜（00:00:00）起的秒数 - - **date** - (Date) 要计算的日期对象 +- `time_part()` - 以自午夜 (00:00:00) 起的秒数返回 Date 对象的时间部分 + - `date` - (Date) 要格式化的日期对象 ~~~js -var time = scheduler.date.time_part(new Date(2019, 05, 29, 14, 30, 10)); -//time -> 52210 +const time = scheduler.date.time_part(new Date(2027, 5, 29, 14, 30, 10)); +// time -> 52210 ~~~ -- **to_fixed**(num) - 对小于10的数字添加前导零，返回字符串；10及以上数字保持不变 - - **num** - (number) 要格式化的数字 +- `to_fixed()` - 给小于 10 的数字添加前导零，并将结果作为字符串返回。对大于等于 10 的数字不做处理 + - `num` - (number) 要格式化的数字 ~~~js -var num1 = scheduler.date.to_fixed(2); // -> "02" -var num2 = scheduler.date.to_fixed(10); // -> 10 +const num1 = scheduler.date.to_fixed(2); // -> "02" +const num2 = scheduler.date.to_fixed(10); // -> 10 ~~~ -- **week_start**(date) - 返回一个Date对象，表示给定日期所在周的第一天，时间部分重置为00:00:00 - - **date** - (Date) 要处理的日期对象 +- `week_start()` - 返回指定日期所在周的第一天的 Date 对象，并将时间部分清零 + - `date` - (Date) 要格式化的日期对象 ~~~js -// 2019年6月29日14:30 -> 2019年6月24日00:00 -var weekStart = scheduler.date.week_start(new Date(2019, 05, 29, 14, 30)); +// 2027-06-29 14:30 -> 2027-06-28 00:00 +const weekStart = scheduler.date.week_start(new Date(2027, 5, 29, 14, 30)); ~~~ -- **year_start**(date) - 返回一个Date对象，表示给定日期所在年份的第一天，时间部分重置为00:00:00 - - **date** - (Date) 要处理的日期对象 +- `year_start()` - 返回指定日期所在年份的第一天的 Date 对象，并将时间部分清零 + - `date` - (Date) 要格式化的日期对象 ~~~js -// 2019年6月29日14:30 -> 2019年1月1日00:00 -var yearStart = scheduler.date.year_start(new Date(2019, 05, 29, 14, 30)); -~~~ +// 2027-06-29 14:30 -> 2027-01-01 00:00 +const yearStart = scheduler.date.year_start(new Date(2027, 5, 29, 14, 30)); +~~~ \ No newline at end of file diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/other/ical.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/other/ical.md index e05cb85e..1ad99726 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/other/ical.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/other/ical.md @@ -21,18 +21,18 @@ const icalString = scheduler.ical.parse( PRODID:-//dhtmlXScheduler//NONSGML v2.2//EN DESCRIPTION: BEGIN:VEVENT - DTSTART:20220411T140000 - DTEND:20220411T170000 + DTSTART:20270411T140000 + DTEND:20270411T170000 SUMMARY:Meeting END:VEVENT BEGIN:VEVENT - DTSTART:20220415 - DTEND:20220418 + DTSTART:20270415 + DTEND:20270418 SUMMARY:Conference END:VEVENT BEGIN:VEVENT - DTSTART:20220424T090000 - DTEND:20220424T100000 + DTSTART:20270424T090000 + DTEND:20270424T100000 SUMMARY:Interview END:VEVENT END:VCALENDAR` diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/other/json.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/other/json.md index ec683cab..67307782 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/other/json.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/other/json.md @@ -15,7 +15,7 @@ description: "处理 JSON 序列化和解析" ### Example ~~~jsx -var obj = scheduler.json; // -> { parse(data){... }} +const obj = scheduler.json; // -> { parse(data){... }} ~~~ ### Details diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/other/matrix.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/other/matrix.md index 1464af38..ef3aee13 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/other/matrix.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/other/matrix.md @@ -28,7 +28,7 @@ scheduler.createTimelineView({ render:"bar" }); -var configObj = scheduler.matrix; +const configObj = scheduler.matrix; ~~~ ### Related samples diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/other/skin.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/other/skin.md index c506987e..f4924c39 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/other/skin.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/other/skin.md @@ -15,7 +15,7 @@ description: "提供当前调度器使用的 skin" ### Example ~~~jsx -var currentSkin = scheduler.skin;// -> 'glossy' 或 'classic' +const currentSkin = scheduler.skin;// -> 'glossy' 或 'classic' ~~~ ### Details diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/other/tooltip.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/other/tooltip.md index 58530243..ea2d3f2c 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/other/tooltip.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/other/tooltip.md @@ -15,7 +15,7 @@ description: "显示事件的tooltip" ### Example ~~~jsx -var tooltip = scheduler.tooltip; +const tooltip = scheduler.tooltip; tooltip.hide(); tooltip.show(event, text); ~~~ diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/other/version.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/other/version.md index 7d205aa8..375330e7 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/other/version.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/other/version.md @@ -15,5 +15,5 @@ description: "提供当前 dhtmlxScheduler 的版本信息" ### Example ~~~jsx -var version = scheduler.version; // "4.0" +const version = scheduler.version; // "4.0" ~~~ diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/template/day_date.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/template/day_date.md index 03f05313..9dce9e49 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/template/day_date.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/template/day_date.md @@ -23,7 +23,7 @@ description: "定义在 Day 和 Units 视图的标题中显示的日期" ~~~jsx scheduler.templates.day_date = function(date){ - var formatFunc = scheduler.date.date_to_str(scheduler.config.default_date); + const formatFunc = scheduler.date.date_to_str(scheduler.config.default_date); return formatFunc(date); }; ~~~ diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/template/event_bar_text.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/template/event_bar_text.md index ce221d85..57c587b6 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/template/event_bar_text.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/template/event_bar_text.md @@ -1,36 +1,36 @@ --- -sidebar_label: "event_bar_text" -title: "event_bar_text template" -description: "设置多天事件上显示的文本。" +sidebar_label: event_bar_text +title: "event_bar_text 模板" +description: "指定事件文本。仅适用于多日事件" --- # event_bar_text ### Description -@short: 设置多天事件上显示的文本。 +@short: 指定事件文本。仅适用于多日事件 @signature: event_bar_text: (start: Date, end: Date, event: any) =\> string ### Parameters -- `start` - (required) *Date* - 事件开始的日期 -- `end` - (required) *Date* - 事件结束的日期 -- `event` - (required) *object* - 事件对象 +- `start` - (required) *Date* - 事件开始计划的日期 +- `end` - (required) *Date* - 事件结束的计划日期 +- `event` - (required) *object* - 事件的对象 ### Returns -- ` text` - (string) - 用于在scheduler中显示的HTML内容 +- `text` - (string) - 在 Scheduler 中呈现的 HTML 文本 ### Example ~~~jsx -scheduler.templates.event_bar_text = function(start,end,event){ - return event.text; +scheduler.templates.event_bar_text = (start, end, event) => { + return event.text; }; ~~~ -**Applicable views:** [Month view](views/month.md), [Timeline view](views/timeline.md) +**Applicable views:** [月视图模板](views/month-view-templates.md), [时间线视图模板](views/timeline-view-templates.md) ### Related Guides -- [Month View Templates](views/month-view-templates.md) -- [타임라인 뷰 템플릿](views/timeline-view-templates.md) +- [月视图模板](views/month-view-templates.md) +- [时间线视图模板](views/timeline-view-templates.md) \ No newline at end of file diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/template/event_class.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/template/event_class.md index 9bb67cae..b15f742a 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/template/event_class.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/template/event_class.md @@ -1,47 +1,47 @@ --- -sidebar_label: "event_class" -title: "event_class template" -description: "定义将添加到事件容器的CSS类" +sidebar_label: event_class +title: "event_class 模板" +description: "指定将应用于事件容器的 CSS 类" --- # event_class ### Description -@short: 定义将添加到事件容器的CSS类 +@short: 将应用于事件容器的 CSS 类 @signature: event_class: (start: Date, end: Date, ev: any) =\> string ### Parameters -- `start` - (required) *Date* - 事件开始的日期 -- `end` - (required) *Date* - 事件结束的日期 +- `start` - (required) *Date* - 事件计划开始的日期 +- `end` - (required) *Date* - 事件计划结束的日期 - `ev` - (required) *object* - 事件对象 ### Returns -- ` css_class` - (string) - 对应元素的CSS类名 +- `css_class` - (string) - 相关元素的 CSS 类 ### Example ~~~jsx -scheduler.templates.event_class = function(start,end,ev){ +scheduler.templates.event_class = (start, end, ev) => { return ""; }; ~~~ -**Applicable views:** [Day view](views/day.md), [Month view](views/month.md), [Week view](views/week.md), [Year view](views/year.md), [Units view](views/units.md), [Timeline view](views/timeline.md) +**Applicable views:** [日视图](views/day.md), [月视图](views/month.md), [周视图](views/week.md), [年视图](views/year.md), [Units 视图](views/units.md), [时间线视图](views/timeline.md) ### Related samples -- [Coloring events](https://docs.dhtmlx.com/scheduler/samples/02_customization/01_events_coloring.html) -- [Styling events with templates](https://docs.dhtmlx.com/scheduler/samples/02_customization/06_templates.html) +- [为事件着色](https://docs.dhtmlx.com/scheduler/samples/02_customization/01_events_coloring.html) +- [使用模板美化事件](https://docs.dhtmlx.com/scheduler/samples/02_customization/06_templates.html) ### Details -对于Timeline视图，该模板仅在"Bar"和"Tree"模式下使用。 +在时间线视图中，模板仅应用于 'Bar' 和 'Tree' 模式。 -有关自定义事件颜色的详细指导，请参阅相关文档 [Custom Event's Color](guides/custom-events-color.md)。 +有关自定义事件颜色的完整信息，请参阅相关文档 [自定义事件颜色](guides/custom-events-color.md)。 ### Related Guides -- [Custom Event's Color](guides/custom-events-color.md) -- [Day View Templates](views/day-view-templates.md) -- [Month View Templates](views/month-view-templates.md) +- [自定义事件颜色](guides/custom-events-color.md) +- [日视图模板](views/day-view-templates.md) +- [月视图模板](views/month-view-templates.md) \ No newline at end of file diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/template/event_date.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/template/event_date.md index 3b4b9fc4..bd0a66d6 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/template/event_date.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/template/event_date.md @@ -23,7 +23,7 @@ description: "定义事件开始和结束日期中的时间部分。主要由其 ~~~jsx scheduler.templates.event_date = function(date){ - var formatFunc = scheduler.date.date_to_str(scheduler.config.hour_date); + const formatFunc = scheduler.date.date_to_str(scheduler.config.hour_date); return formatFunc(date); } ~~~ diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/template/event_text.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/template/event_text.md index 687787e9..597363dc 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/template/event_text.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/template/event_text.md @@ -1,43 +1,42 @@ --- -sidebar_label: "event_text" -title: "event_text template" -description: "定义事件显示的文本" +sidebar_label: event_text +title: "event_text 模板" +description: "指定事件的文本" --- # event_text ### Description -@short: 定义事件显示的文本 +@short: 指定事件的文本 @signature: event_text: (start: Date, end: Date, event: any) =\> string ### Parameters -- `start` - (required) *Date* - 事件的开始日期 -- `end` - (required) *Date* - 事件的结束日期 -- `event` - (required) *object* - 事件数据对象 +- `start` - (必填) *Date* - 事件计划开始的日期 +- `end` - (必填) *Date* - 事件计划结束的日期 +- `event` - (必填) *object* - 事件对象 ### Returns -- ` text` - (string) - 用于在scheduler中显示事件的html内容 +- `text` - (string) - 用于在 Scheduler 中呈现的 HTML 文本 ### Example ~~~jsx -scheduler.templates.event_text=function(start, end, event){ - return "" - +event.text+""; -} +scheduler.templates.event_text = (start, end, event) => { + return `${event.text}`; +}; ~~~ -**Applicable views:** [Day view](views/day.md), [Week view](views/week.md), [Units view](views/units.md) +**适用视图：** [日视图](views/day.md), [周视图](views/week.md), [单元视图](views/units.md) ### Related samples -- [Styling events with templates](https://docs.dhtmlx.com/scheduler/samples/02_customization/06_templates.html) +- [使用模板自定义事件样式](https://docs.dhtmlx.com/scheduler/samples/02_customization/06_templates.html) ### Details -请注意，对于Month和Timeline视图，应使用[event_bar_text](api/template/event_bar_text.md)模板来设置事件的文本。 +注意：对于 Month 和 Timeline 视图，您需要使用 [`event_bar_text`](api/template/event_bar_text.md) 模板来指定事件的文本。 ### Related Guides -- [Day View Templates](views/day-view-templates.md) +- [日视图模板](views/day-view-templates.md) \ No newline at end of file diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/template/format_date.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/template/format_date.md index 28c62c9d..4f7b37fa 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/template/format_date.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/template/format_date.md @@ -22,7 +22,7 @@ description: "将一个日期对象转换为格式化的日期字符串。这对 ### Example ~~~jsx -var dateToStr = scheduler.date.date_to_str("%Y-%m-%d %H:%i"); +const dateToStr = scheduler.date.date_to_str("%Y-%m-%d %H:%i"); scheduler.templates.format_date = function(date){ return dateToStr(date); }; diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/template/load_format.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/template/load_format.md index c9158018..b8cfda8b 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/template/load_format.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/template/load_format.md @@ -23,7 +23,7 @@ description: "定义动态加载模式中使用的请求格式" ~~~jsx scheduler.templates.load_format = function(date){ - var dateToStr_func = scheduler.date.date_to_str(scheduler.config.load_date); + const dateToStr_func = scheduler.date.date_to_str(scheduler.config.load_date); return dateToStr_func(date); } ~~~ diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/template/month_date.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/template/month_date.md index 42f691b0..86cbbb3d 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/template/month_date.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/template/month_date.md @@ -23,7 +23,7 @@ description: "设置视图头部显示的日期" ~~~jsx scheduler.templates.month_date = function(date){ - var dateToStr_func = scheduler.date.date_to_str(scheduler.config.month_date); + const dateToStr_func = scheduler.date.date_to_str(scheduler.config.month_date); return dateToStr_func(date); }; ~~~ diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/template/month_day.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/template/month_day.md index ed1065a3..ff6b475d 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/template/month_day.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/template/month_day.md @@ -23,7 +23,7 @@ description: "定义日期在单元格中的显示方式" ~~~jsx scheduler.templates.month_day = function(date){ - var dateToStr_func = scheduler.date.date_to_str(scheduler.config.month_day); + const dateToStr_func = scheduler.date.date_to_str(scheduler.config.month_day); return dateToStr_func(date); }; ~~~ diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/template/timelinename_scale_date.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/template/timelinename_scale_date.md index f1c72a3b..40434508 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/template/timelinename_scale_date.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/template/timelinename_scale_date.md @@ -25,8 +25,8 @@ description: "定义X轴上显示的项目" ~~~jsx scheduler.templates.timeline_scale_date = function(date){ - var timeline = scheduler.matrix.timeline; - var func = scheduler.date.date_to_str(timeline.x_date||scheduler.config.hour_date); + const timeline = scheduler.matrix.timeline; + const func = scheduler.date.date_to_str(timeline.x_date||scheduler.config.hour_date); return func(date); } ~~~ diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/template/timelinename_second_scale_date.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/template/timelinename_second_scale_date.md index 0579a4bf..321e4fed 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/template/timelinename_second_scale_date.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/template/timelinename_second_scale_date.md @@ -25,8 +25,8 @@ description: "定义显示在次要X轴上的项目" ~~~jsx scheduler.templates.timeline_second_scale_date = function(date){ - var timeline = scheduler.matrix.timeline; - var func = scheduler.date.date_to_str( + const timeline = scheduler.matrix.timeline; + const func = scheduler.date.date_to_str( (timeline.second_scale && timeline.second_scale.x_date)? timeline.second_scale.x_date:scheduler.config.hour_date ); diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/template/tooltip_date_format.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/template/tooltip_date_format.md index 2d7abbb8..a5df245f 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/template/tooltip_date_format.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/template/tooltip_date_format.md @@ -23,7 +23,7 @@ description: "定义在tooltip中开始和结束日期的显示格式" ~~~jsx scheduler.templates.tooltip_date_format=function (date){ - var formatFunc = scheduler.date.date_to_str("%Y-%m-%d %H:%i"); + const formatFunc = scheduler.date.date_to_str("%Y-%m-%d %H:%i"); return formatFunc(date); } ~~~ diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/template/week_agenda_scale_date.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/template/week_agenda_scale_date.md index e19a4366..bcd61327 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/template/week_agenda_scale_date.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/template/week_agenda_scale_date.md @@ -25,7 +25,7 @@ description: "视图中日单元格显示的日期" ~~~jsx scheduler.templates.week_agenda_scale_date = function(date) { - var scale_date_format = scheduler.date.date_to_str("%l, %F %d"); + const scale_date_format = scheduler.date.date_to_str("%l, %F %d"); return scale_date_format(date); }; ~~~ diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/template/xml_date.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/template/xml_date.md index 9e2d21ae..2fdc668a 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/template/xml_date.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/template/xml_date.md @@ -24,8 +24,8 @@ description: "该模板将来自 XML 文件的字符串根据指定格式转换 ### Example ~~~jsx -var cfg = scheduler.config; -var str_to_date = scheduler.date.str_to_date(cfg.xml_date, cfg.server_utc); +const cfg = scheduler.config; +const str_to_date = scheduler.date.str_to_date(cfg.xml_date, cfg.server_utc); scheduler.templates.xml_date = function(date){ return str_to_date(date); @@ -39,8 +39,8 @@ scheduler.templates.xml_date = function(date){ ::: ~~~js -var cfg = scheduler.config; -var strToDate = scheduler.date.str_to_date(cfg.date_format, cfg.server_utc); +const cfg = scheduler.config; +const strToDate = scheduler.date.str_to_date(cfg.date_format, cfg.server_utc); scheduler.templates.parse_date = function(date){ return strToDate(date); diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/template/xml_format.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/template/xml_format.md index c43d1eef..fc51cb58 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/template/xml_format.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/template/xml_format.md @@ -24,8 +24,8 @@ description: "一个日期对象会被转换成符合特定模板的字符串。 ### Example ~~~jsx -var cfg = scheduler.config; -var date_to_str = scheduler.date.date_to_str(cfg.xml_date, cfg.server_utc); +const cfg = scheduler.config; +const date_to_str = scheduler.date.date_to_str(cfg.xml_date, cfg.server_utc); scheduler.templates.xml_format = function(date){ return date_to_str(date); @@ -39,7 +39,7 @@ scheduler.templates.xml_format = function(date){ ::: ~~~js -var dateToStr = scheduler.date.date_to_str("%Y-%m-%d %H:%i"); +const dateToStr = scheduler.date.date_to_str("%Y-%m-%d %H:%i"); scheduler.templates.format_date = function(date){ return dateToStr (date); }; diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/template/year_date.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/template/year_date.md index a533b7ec..bd810707 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/template/year_date.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/template/year_date.md @@ -22,7 +22,7 @@ description: "设置视图头部显示的日期" ### Example ~~~jsx -var date_to_str=scheduler.date.date_to_str(scheduler.locale.labels.year_tab +" %Y"); +const date_to_str=scheduler.date.date_to_str(scheduler.locale.labels.year_tab +" %Y"); scheduler.templates.year_date = function(date){ return date_to_str(date); diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/export/excel.md b/i18n/zh/docusaurus-plugin-content-docs/current/export/excel.md index d614bf25..64ec361c 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/export/excel.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/export/excel.md @@ -27,7 +27,7 @@ sidebar_label: "导出为 Excel 和 iCal" /*!*/ ~~~ @@ -72,7 +72,7 @@ scheduler.exportToExcel({ ], server:"https://myapp.com/myexport/scheduler", start: new Date(1999, 01, 01), - end: new Date(2022, 01, 01) + end: new Date(2027, 01, 01) }); ~~~ @@ -106,7 +106,7 @@ scheduler.templates.xml_format = scheduler.date.date_to_str("%Y-%m-%d %H:%i"); /*!*/ ~~~ diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/export/pdf-multi.md b/i18n/zh/docusaurus-plugin-content-docs/current/export/pdf-multi.md index 32f57a38..e93d34ad 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/export/pdf-multi.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/export/pdf-multi.md @@ -27,12 +27,12 @@ scheduler.toPDFRange(from, to, view, path, scheme); 4. '_custom_' - 允许自定义配色（需要 PHP 定制，详情请参见章节 ['Export to PDF. Configuring service'](export/pdf.md#usingexportservices)） 5. '_fullcolor_' - 按照视图中显示的背景和文本颜色精确导出 -例如，要导出 2012 年 1 月 1 日至 2012 年 2 月 1 日的 'week' 视图页面，可以这样调用方法: +例如，要导出 2027 年 1 月 1 日至 2027 年 2 月 1 日的 'week' 视图页面，可以这样调用方法: ~~~js scheduler.toPDFRange( - new Date(2012,0,1), - new Date(2012, 1,1), + new Date(2027,0,1), + new Date(2027, 1,1), 'week', 'generate.php', 'fullcolor' diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/export/pdf.md b/i18n/zh/docusaurus-plugin-content-docs/current/export/pdf.md index 5b5e6e7e..0e74f8fb 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/export/pdf.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/export/pdf.md @@ -5,58 +5,57 @@ sidebar_label: "导出为 PDF" # 导出为 PDF -*本文档适用于 dhtmlxScheduler 4.1 及以上版本的导出功能。如需 4.0 或更早版本，请参阅[此指南](export/pdf-legacy.md)。* +*本文涉及 dhtmlxScheduler 4.1 及以上版本的导出。如使用 dhtmlxScheduler 4.0 或更早版本，请参阅 [此处](export/pdf-legacy.md) 的详细信息。* -自 4.1 版本起，dhtmlxScheduler 提供了一种新的方式，通过[在线导出服务](export/pdf.md#defaultexporttopdf)将调度器导出为 PDF 文件。 +自版本 4.1 起，dhtmlxScheduler 提供了一种将调度器导出为 PDF 格式的新方法：一种 [在线导出服务](export/pdf.md#default-export-to-pdf)。 -:::note -该服务可免费使用，但在 GPL 许可下生成的 PDF 会带有库的水印。购买许可证后，在有效的支持期内（所有 PRO 许可证为 12 个月），水印将被移除。 +:::info +该服务是免费的，但输出的 PDF 文件将包含在 GPL 许可下的库水印。若您购买许可证，导出结果在有效支持期内（所有 PRO 许可证为 12 个月）将不带水印。 ::: -## 使用导出服务 {#usingexportservices} +## 使用导出服务 -有多种导出服务可用，可以在本地安装用于将 Scheduler 导出为 PDF。 +有多种导出服务可用。您可以将它们安装在本地计算机上，并本地将 Scheduler 导出为 PDF。 -请注意，导出服务与 Scheduler 包是分开的。如需了解使用条款，请参阅[相关文档](https://dhtmlx.com/docs/products/dhtmlxScheduler/export.shtml)。 +请注意，导出服务并不包含在 Scheduler 软件包中，请阅读 [相应文章](https://dhtmlx.com/docs/products/dhtmlxScheduler/export.shtml) 以了解每种服务的使用条款。 -## 请求大小限制 {#limitsonrequestsize} +## 请求大小限制 -API 端点 *https://export.dhtmlx.com/scheduler* 处理导出请求（如 *exportToPDF*、*exportToPNG* 等）。最大允许请求大小为 **10 MB**。 +有一个通用 API 端点 `https://export.dhtmlx.com/scheduler`，提供诸如 `exportToPDF()` 与 `exportToPNG()` 等导出方法。最大请求大小为 10 MB。 -## 默认导出为 PDF {#defaultexporttopdf} +## 默认导出为 PDF -要将调度器导出为 PDF，请按照以下步骤操作: +要将调度器导出为 PDF 文档，请完成以下步骤： -- 通过 [plugins](api/method/plugins.md) 方法启用 export_api 插件: +- 若要使用在线导出服务，请通过 [`plugins()`](api/method/plugins.md) 方法启用 `export_api` 插件： ~~~js scheduler.plugins({ - export_api: true + export_api: true }); ~~~ :::note -对于 7.0 之前的 Scheduler 版本，需要在页面中引入 **https://export.dhtmlx.com/scheduler/api.js** 脚本以启用在线导出服务，例如: +如果您使用的 Scheduler 版本早于 7.0，请在页面中包含 `https://export.dhtmlx.com/scheduler/api.js` 文件以启用在线导出服务，例如： -~~~js +~~~html ~~~ ::: -- 使用 exportToPDF 方法进行导出: +- 调用 [`exportToPDF()`](#parameters-of-the-export-method) 方法以导出 Scheduler： -~~~html -/*!*/ +~~~html {1} + ~~~ +### 相关示例 +- [Export to PDF/PNG](https://docs.dhtmlx.com/scheduler/samples/04_export/06_online_export.html) -[Export to PDF/PNG](https://docs.dhtmlx.com/scheduler/samples/04_export/06_online_export.html) - - -## 导出方法的参数 {#parametersoftheexportmethod} +## export 方法的参数 -[exportToPDF()](api/method/exporttopdf.md) 方法可接受一个可选的对象参数，包含多种属性: +[`exportToPDF()`](api/method/exporttopdf.md) 方法接收一个包含若干属性的对象作为参数。所有属性都是可选的： @@ -95,88 +94,88 @@ scheduler.plugins({
- -~~~js title="调用 exportToPDF 并带参数的示例" +### 使用可选属性调用 export 方法 +~~~js scheduler.exportToPDF({ - name:"myscheduler.pdf", - format:"A4", - orientation:"portrait", - zoom:1, - header:"

My company

", - footer:"

Bottom line

", - server:"https://myapp.com/myexport/scheduler" + name: "myscheduler.pdf", + format: "A4", + orientation: "portrait", + zoom: 1, + header: "

My company

", + footer: "

Bottom line

", + server: "https://myapp.com/myexport/scheduler" }); ~~~ -## 输出文件名 {#nameoftheoutputfile} +## 输出文件的名称 -如需自定义导出 PDF 的文件名，请在 [exportToPDF](export/pdf.md#parametersoftheexportmethod) 参数中的 **name** 属性设置: +要为输出文件设置自定义名称，请在 [`exportToPDF()`](export/pdf.md#parameters-of-the-export-method) 方法的参数中使用 `name` 属性： -~~~js +~~~js {2} scheduler.exportToPDF({ - name:"my_beautiful_scheduler.pdf"/*!*/ + name: "my_beautiful_scheduler.pdf" }); ~~~ -## 输出文件的页眉/页脚 {#headerfooteroftheoutputfile} +## 输出文件的页眉/页脚 -可以通过 [exportToPDF](export/pdf.md#parametersoftheexportmethod) 参数中的 **header** 和 **footer** 属性为导出的 PDF 添加页眉和页脚: +要为输出的 PDF 文件添加页眉/页脚，请在 [`exportToPDF()`](export/pdf.md#parameters-of-the-export-method) 方法的参数中使用 `header`/`footer` 属性： :::note -这些属性中可以使用任意 HTML。插入图片时，请确保 "src" 属性为绝对 URL。 +请注意，在指定参数时您可以使用任意 HTML。在指定图片时，请记得将全局路径设置为 `src` 属性的值。 ::: -~~~js +~~~js {3-4} scheduler.exportToPDF({ - name:"myscheduler.pdf", - header:"

My company

",/*!*/ - footer:"

Bottom line

"/*!*/ + name: "myscheduler.pdf", + header: "

My company

", + footer: "

Bottom line

" }); ~~~ -## 输出文件的自定义样式 {#customstylefortheoutputfile} +## 为输出文件应用自定义样式 -可通过引入包含自定义 CSS 类的样式表来应用自定义样式: +要为调度器应用自定义样式，请提供包含自定义 CSS 类的样式表： -- 通过链接外部样式表: +- 通过链接： -~~~js +~~~js {3} scheduler.exportToPDF({ - name:"calendar.pdf", - header:'' /*!*/ + name: "calendar.pdf", + header: '' }); ~~~ -- 或者通过在 `' /*!*/ + name: "calendar.pdf", + header: '' }); ~~~ -请注意，此方式仅适用于全网可访问的 HTTP URL。对于本地或内网环境，可直接在 header 中嵌入所有样式，例如: +注意，上述解决方案适用于全局 HTTP 引用。如果您的 CSS 类是在内网/本地环境中指定的，则可以按如下方式将所有样式嵌入： ~~~js scheduler.exportToPDF({ - header:"" + header: "" }); ~~~ -## 导出 HTML 元素 {#exportinghtmlelements} +## 导出 HTML 元素 -将 Scheduler 导出为 PDF 时，出于安全考虑，对 HTML 元素存在一些限制。 +在将 Scheduler 导出为 PDF 时，请注意由于潜在的安全性原因，对 HTML 元素的导出有所限制。 -某些元素如 ``、``、`` 标签，*src* 属性指向 SVG 图片 URL（适用于 PNG 和 JPG 导出，不适用于 Base64），例如: +- 您可以使用一个 `` 元素，其 `src` 属性包含 SVG 格式的图片 URL（适用于 PNG 和 JPG，Base64 格式不适用），例如： ~~~html ~~~ -- 使用 CSS 样式，如 *background* 或 *background-image*，通过 `url()` 指向图片 URL 或 Base64 字符串（适用于 PNG、JPG 和 SVG）: +- 您可以使用样式元素，例如 `background` 或 `background-image`，并将 `url` 属性设为图片链接或 Base64 格式的图片作为其值（适用于 PNG/JPG/SVG 格式） ~~~css .red { @@ -187,4 +186,4 @@ scheduler.exportToPDF({ } ~~~ -如果您有自定义的导出模块，并且需要导出不受支持的 HTML 元素，可以联系技术支持获取如何修改模块以绕过限制的建议。但请注意，这样做可能会使服务器面临 XSS 安全风险。 +如果您有导出模块并且需要导出在线导出服务器不支持的 HTML 元素，您可以提交支持请求以获取关于对模块进行哪些修改以移除限制的说明。然而，请注意，这样做会使您的服务器容易受到 XSS 攻击。 \ No newline at end of file diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/export/serialization.md b/i18n/zh/docusaurus-plugin-content-docs/current/export/serialization.md index 4210d9bd..f2b6b13c 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/export/serialization.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/export/serialization.md @@ -20,7 +20,7 @@ scheduler.plugins({ 要将调度器数据转换为 XML 字符串，请使用 [toXML](api/method/toxml.md) 方法: ~~~js -var xml = scheduler.toXML(); //xml string +const xml = scheduler.toXML(); //xml string ~~~ @@ -32,7 +32,7 @@ var xml = scheduler.toXML(); //xml string 要将调度器数据转换为 JSON 字符串，请使用 [toJSON](api/method/tojson.md) 方法: ~~~js -var json_string = scheduler.toJSON(); //json string +const json_string = scheduler.toJSON(); //json string ~~~ :::note @@ -48,7 +48,7 @@ var json_string = scheduler.toJSON(); //json string 要将调度器数据转换为 iCal 字符串，请使用 [toICal](api/method/toical.md) 方法: ~~~js -var ical_string = scheduler.toICal(); //ical string +const ical_string = scheduler.toICal(); //ical string ~~~ 此外，还提供了一个[用于 iCal 导入导出操作的外部脚本](guides/ical-export-import.md) @@ -107,7 +107,7 @@ scheduler.data_attributes = function(){ ~~~js scheduler.data_attributes = function(){ - var empty = function(a){ return a||""; } + const empty = function(a){ return a||""; } return [["id"], ["text"], ["start_date",scheduler.templates.xml_format], @@ -146,7 +146,7 @@ scheduler.plugins({ ~~~js function save(){ - var form = document.getElementById("xml_form"); + const form = document.getElementById("xml_form"); form.elements.data.value = scheduler.toXML(); form.submit(); } diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/backbone-integration.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/backbone-integration.md deleted file mode 100644 index 2fc3da5a..00000000 --- a/i18n/zh/docusaurus-plugin-content-docs/current/guides/backbone-integration.md +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: "Backbone 集成" -sidebar_label: "Backbone 集成" ---- - -# Backbone 集成 - -从 4.0 版本开始，库提供了专门的扩展 [**mvc**](guides/extensions-list.md#mvc)，可以实现调度器与 Backbone 库的平滑集成。 - -对于基于 Backbone 构建的应用程序，如果希望在继续通过 Backbone 管理数据的同时集成调度器，可以按照以下方式操作: - -1. 将 dhtmlxScheduler 文件添加到您的应用程序中: -~~~js - - -~~~ -2. 在页面上启用 mvc 扩展: -~~~js -scheduler.plugins({ - mvc: true -}); -~~~ -3. 像往常一样设置并初始化调度器: -~~~js -scheduler.full_day = true; - -scheduler.init("scheduler_here",new Date(2019,0,6),"month"); -~~~ -4. 接下来，创建一个 Backbone 数据集合并将调度器连接到该集合: -~~~js -//这里可以使用任何模型 -MyEvent = Backbone.Model.extend({}); -EventList = Backbone.Collection.extend({ - model:MyEvent, - url:"./data/backbone.json" -}); -events = new EventList(); - - -scheduler.backbone(events); //将调度器与集合连接 -~~~ - -完成上述操作后，调度器会从集合中加载数据，并与任何更新保持同步。同样，通过调度器界面进行的任何更改也会触发 Backbone 集合中的相应事件。 - -整个流程非常简单。关键在于使用 [backbone](api/method/backbone.md) 方法，而不是通常的 [load](api/method/load.md) 或 [parse](api/method/parse.md) 方法。 - - -[backbone](api/method/backbone.md) 方法确保调度器与 Backbone 模型中的所有数据变化保持同步，反之亦然。 -它接受一个 Backbone 集合作为参数。 - - -[Backbone integration](https://docs.dhtmlx.com/scheduler/samples/10_integration/07_backbone.html) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/collisions.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/collisions.md index c361db7b..832c201a 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/guides/collisions.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/collisions.md @@ -5,11 +5,11 @@ sidebar_label: "防止在同一时间段内安排重复事件" # 防止在同一时间段内安排重复事件 -在许多场景中，限制在同一时间段内可安排的事件数量非常重要。例如，如果某个时间段已经安排了一个事件，您可能希望阻止添加第二个事件。 +在许多用例中，您可能需要限制一个时间段内的事件数量。例如，当某个时间已经定义了其他事件时，您可能需要拒绝创建第 2 个事件。 -## 激活冲突检测功能 +## 启用碰撞监测 -要管理单个时间段内允许的事件数量，可以使用 [**collision**](guides/extensions-list.md#collision) 扩展。 +要控制一个时间段内的事件数量，请使用 [**collision**](guides/extensions-list.md#collision) 扩展。 ~~~js title="激活 'collision' 扩展" scheduler.plugins({ @@ -17,50 +17,44 @@ scheduler.plugins({ }); ~~~ -*一旦在页面上启用该扩展，无论是创建新事件还是移动已有事件，系统都会阻止用户在同一时间段内安排两个事件。* +*一旦在页面上启用该扩展，该扩展就会被激活。从此时起，调度程序将不再允许在同一个时间段内放置 2 个事件（创建或移动）。* +## 管理一个时间段内允许的事件数量 -## 管理单个时间段内允许的事件数量 +默认情况下，一个时间段内允许的事件数量为 1。要调整此数量，请使用 [collision_limit](api/config/collision_limit.md) 属性： -默认情况下，每个时间段只允许一个事件。要调整此限制，请使用 [collision_limit](api/config/collision_limit.md) 属性: - -~~~js title="限制每个时间段最多只能创建2个事件" -scheduler.config.collision_limit = 2; //允许每个时间段创建2个事件 -~~~ - -[Controlling the number of events in a time slot](https://docs.dhtmlx.com/scheduler/samples/03_extensions/15_collision.html) - - -*当 ['collision' 扩展](guides/extensions-list.md#collision) 启用时，每当用户尝试在已有事件的时间段内添加或移动事件时，调度器会触发 [onEventCollision](api/event/oneventcollision.md) 事件。此事件会根据 [collision_limit](api/config/collision_limit.md) 属性设置的限制进行检查。* +[在一个时间段内控制事件数量](https://docs.dhtmlx.com/scheduler/samples/03_extensions/15_collision.html) +*在启用 ['collision' extension](guides/extensions-list.md#collision) 的情况下，每当用户尝试在已被占用的时间段内创建新事件或修改某个现有事件时，调度程序都会触发 [onEventCollision](api/event/oneventcollision.md) 事件，该事件会检查使用 [collision_limit](api/config/collision_limit.md) 属性所设的值。* -请注意，[onEventCollision](api/event/oneventcollision.md) 事件在数据加载期间不会触发。若要在加载数据时也强制执行事件数量限制，需要稍作代码补充: +但请记住，[onEventCollision](api/event/oneventcollision.md) 事件在加载数据时不会被触发。所以，要在向调度程序加载数据时控制一个时间段内的项目数量，您需要对前面的代码稍作扩展： -~~~js title="限制每个时间段最多只能创建/加载2个事件" -scheduler.config.collision_limit = 2; //允许每个时间段创建2个事件 +[Denying creating/loading more than 2 events per time slot](Denying creating/loading more than 2 events per time slot) +~~~js +scheduler.config.collision_limit = 2; //allows creating 2 events per time slot scheduler.attachEvent("onEventLoading", function(ev){ /*!*/ return scheduler.checkCollision(ev); /*!*/ }); /*!*/ - ~~~ -[checkCollision](api/method/checkcollision.md) 方法会检查某个事件是否与现有事件重叠，并相应触发 [onEventCollision](api/event/oneventcollision.md) 事件。 +[checkCollision](api/method/checkcollision.md) 方法会检查某个事件是否发生在已被另一个事件占用的时间点，并触发 [onEventCollision](api/event/oneventcollision.md) 事件。 -## 获取某个时间段内已有事件的数量 +## 获取一个时间段内存在的事件数量 -要查询某个特定时间段内已安排了多少事件，可以使用 [getEvents](api/method/getevents.md) 方法: +要获取一个时间段内存在的事件数量，请使用 [getEvents](api/method/getevents.md) 方法： -~~~js title="获取某个时间段内的事件数量" -var count = scheduler.getEvents(ev.start_date, ev.end_date).length; +[获取一个时间段内的事件数量](Getting the number of events in a time slot) +~~~js +const count = scheduler.getEvents(ev.start_date, ev.end_date).length; ~~~ -请注意，[getEvents](api/method/getevents.md) 方法会遍历所有事件并比较它们的日期，因此当事件数量非常多时，该操作可能需要一些时间。 +请注意，[getEvents](api/method/getevents.md) 方法会遍历所有事件并比较它们的日期，因此如果您使用成千上万的事件，可能需要一些时间。 -## 防止重复预订/事件的完整检查清单 +## 防止重复预订/事件的完整清单 -以下是防止同一时间段内事件冲突的步骤汇总: +下面是避免一个时间段内事件冲突需要完成的步骤清单： -1) 在页面中引入 *collision* 扩展: +1) 将 *collision* 扩展包含在页面中： ~~~js scheduler.plugins({ @@ -68,81 +62,81 @@ scheduler.plugins({ }); ~~~ -2) 在从服务器加载数据期间，阻止用户创建新事件。 +2) 在从服务器加载数据时阻止新事件的创建。 -这可以确保在日历完全加载之前无法添加事件。请结合 [onLoadEnd](api/event/onloadend.md) 和 [onLoadStart](api/event/onloadstart.md) 事件处理器，以及 [readonly](api/config/readonly.md) 属性，如下所示: +因此，在数据尚未加载且日历为空时，用户将无法创建事件。为此应使用 [onLoadEnd](api/event/onloadend.md) 与 [onLoadStart](api/event/onloadstart.md) 事件处理程序，以及 [readonly](api/config/readonly.md) 属性，如下所示： ~~~js -// 在开始从数据源加载数据前，使调度器只读 +// 将调度程序设为只读 +// 在数据源加载数据尚未开始时 scheduler.attachEvent("onLoadStart", function(){ scheduler.config.readonly = true; }); -// 在数据源加载完成后，使调度器可编辑 +// 在数据源加载完成后再设为可编辑 scheduler.attachEvent("onLoadEnd", function(){ scheduler.config.readonly = false; }); ~~~ -3) 启用动态加载，以提升在处理大量记录时的性能，避免一次性加载所有数据。 +3) 启用动态加载，以在记录很多且一次性加载全部数据时加速数据加载。 -要启用动态加载，请在加载数据前调用 [setLoadMode](api/method/setloadmode.md) 方法: +要启用动态加载，您需要调用 [setLoadMode](api/method/setloadmode.md) 方法，并在此之后加载您的脚本： -~~~js title="启用动态加载" +[启用动态加载](Enabling the dynamic loading) +~~~js scheduler.setLoadMode("month"); scheduler.load("/some"); ~~~ -4) 使用 PHP 连接器的校验功能，在服务器端验证冲突事件。更多细节请参见 -[data validation](https://docs.dhtmlx.com/connector__php__validation.html#processingincaseofvalidationerror) 相关文章。 +4) 在服务器端的 API 中验证冲突事件。如果检测到冲突，请在响应中返回错误状态并在客户端处理。 -如果校验失败，您可以在客户端重新加载数据。 +如果检查失败，您也可以在客户端重新加载数据。 -要处理校验失败，请使用 DataProcessor 的 [onValidationError](https://docs.dhtmlx.com/api__dataprocessor_onvalidationerror_event.html) 和 -[onAfterUpdate](https://docs.dhtmlx.com/api__dataprocessor_onafterupdate_event.html) 事件，并通过调度器方法 [clearAll](api/method/clearall.md) 和 [load](api/method/load.md) 重新加载数据: +要处理检查失败，请使用 DataProcessor 事件 [onValidationError](https://docs.dhtmlx.com/api__dataprocessor_onvalidationerror_event.html) 与 [onAfterUpdate](https://docs.dhtmlx.com/api__dataprocessor_onafterupdate_event.html)，并使用 Scheduler 的方法 [clearAll](api/method/clearall.md) 与 [load](api/method/load.md) 重新加载数据： a. [onValidationError](https://docs.dhtmlx.com/api__dataprocessor_onvalidationerror_event.html) -在发生校验错误后、数据发送前触发: +在验证错误触发后、数据发送之前发生 ~~~js dp.attachEvent("onValidationError", function(id, details){ - //从服务器重新加载最新数据 + //从服务器重新加载实际数据 scheduler.clearAll(); scheduler.load("/data"); }); ~~~ -参数说明: +参数： -- id - (string) 出错项的id +- id - (string) 发生错误的项的 ID - details - (object) 错误详情 b. [onAfterUpdate](https://docs.dhtmlx.com/api__dataprocessor_onafterupdate_event.html) -在服务器响应处理完成后触发: +在服务器端响应已接收并处理之后触发 ~~~js dp.attachEvent("onAfterUpdate", function(id, action, tid, response){ if(action == "invalid" || action == "error"){ - //从服务器重新加载最新数据 + //从服务器重新加载实际数据 scheduler.clearAll(); scheduler.load("/data"); } }); ~~~ -参数说明: +参数： -- id - (string) 被更新项的id -- action - (string) 响应状态（操作类型），详见下文 -- tid - (string) 新id（仅适用于插入操作） -- response - (mixed) 包含解析结果的xml节点或json对象 +- id - (string) 更新项的 ID +- action - (string) 响应状态（操作类型），见下方详情 +- tid - (string) 新的 ID（仅在插入操作时适用） +- response - (mixed) xml 节点/json 对象，包含解析后的 xml/json 响应 -可能的响应状态包括: +可能的响应状态如下： -- updated; +- updated; - inserted; - deleted; - invalid; -- error. +- error. \ No newline at end of file diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/combo.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/combo.md index 29e78206..a3ec7ac0 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/guides/combo.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/combo.md @@ -1,16 +1,16 @@ --- -title: "Combo（组合框）" -sidebar_label: "Combo（组合框）" +title: "Combo" +sidebar_label: "Combo" --- # Combo（组合框） -本节介绍由 DHTMLX Combo 组件 提供的组合框。 +一个通过 DHTMLX Combo 组件 提供的组合框。 ![combo_editor](/img/combo_editor.png) ~~~js -var holders = [ +const holders = [ { key: 1, label: 'James' }, { key: 2, label: 'Alex' }, { key: 3, label: 'Antony' }, @@ -25,7 +25,7 @@ scheduler.config.lightbox.sections = [ image_path:"../common/dhtmlxCombo/imgs/", height:30, filtering:true}, { name:"time", height:72, type:"time", map_to:"auto"} ]; -~~~ +~~~ [Combo box in the lightbox](https://docs.dhtmlx.com/scheduler/samples/02_customization/15_combo_select.html) @@ -33,9 +33,9 @@ scheduler.config.lightbox.sections = [ ## 初始化 -要在 lightbox 中包含 Combo 控件，请按照以下步骤操作: +要将 Combo 控件添加到 lightbox，请按照下列步骤操作： -1. 引入 dhtmlxCombo 文件: +1. 包含 dhtmlxCombo 文件： ~~~js @@ -43,13 +43,13 @@ scheduler.config.lightbox.sections = [ ~~~ -2. 在页面上启用 editors 扩展: +2. 在页面上激活 [editors](guides/extensions-list.md#editors) 扩展： ~~~js scheduler.plugins({ editors: true }); ~~~ -3. 在 lightbox 配置中添加相应的 section: +3. 将该段添加到 lightbox 配置中： ~~~js scheduler.config.lightbox.sections = [ { name:"description", ... }, @@ -58,7 +58,7 @@ scheduler.config.lightbox.sections = [ { name:"time", ...} ]; ~~~ -4. 为该 section 设置标签: +4. 为该段设置标签： ~~~js scheduler.locale.labels.section_holders = "Holder"; ~~~ @@ -71,53 +71,53 @@ scheduler.locale.labels.section_holders = "Holder"; ## 属性 -以下是 'combo' 控件常用的重要属性（完整列表请参见 [此处](api/config/lightbox.md)）: +以下属性对“combo”控件来说最为重要且常用（完整列表请参见 [此处](api/config/lightbox.md)）： - + - + - + - + - - + + - + - - + + - + - +
name(string) section 的名称(string) 该段的名称
height(number) section 的高度(number) 该段的高度
map_to(string) section 映射的数据属性名称(string) 将映射到该段的数据属性名称
type(textarea,time,select,template,multiselect,radio,checkbox,combo) section 控件的类型(textarea,time,select,template,multiselect,radio,checkbox,combo) 该段控件的类型
options(对象数组) 定义控件的选项（适用于 'select'、'multiselect'、'radio'、'combo' 控件）。 每个数组对象表示一个选项，包括以下属性:
  • key - (string) 选项的 id。该属性与事件的数据属性进行比较，用于将选项分配给事件
  • label - (string) 选项的显示文本
options(array of objects) 定义控件的选项（对 'select', 'multiselect', 'radio', 'combo' 控件有效）。数组中的每个对象定义一个选项，并包含以下属性：
  • key - (string) 选项的标识符。此属性将与事件的数据属性进行比较，用于将选项分配给事件
  • label - (string) 选项的标签
image_path(string) dhtmlxCombo 图片的路径(string) dhtmlxCombo 图像的路径
filtering(boolean, string) 启用自动过滤支持（输入时过滤选项）。可选 该参数可取以下值之一:
  • false - 禁用过滤
  • true 或 "start" - 启用过滤，从选项开头开始搜索
  • "between" - 启用过滤，搜索项中任意位置出现的文本
filtering(boolean, string) 启用自动筛选功能（输入时将过滤选项）。可选值如下：
  • false - 禁用筛选
  • true 或 "start" - 启用筛选，从项的开头进行搜索
  • "between" - 启用筛选，搜索输入文本在项中的任意位置
script_path(string) 提供 combo 选项的服务端脚本路径。可选(string) 指向服务器端脚本的路径，该脚本将从服务器提供加载控件选项。可选
cache(boolean) 启用或禁用脚本响应的缓存（建议启用）。可选(boolean) 启用/禁用脚本响应的缓存（推荐开启该属性）。可选
-## 为控件填充数据 +## 使用数据填充控件 -要为 Combo 控件提供选项值，请使用 [options](api/config/lightbox.md) 参数: +一般而言，要为 Combo 控件设置值，应使用 [options](api/config/lightbox.md) 参数： ~~~js scheduler.config.lightbox.sections = @@ -134,14 +134,14 @@ scheduler.config.lightbox.sections = ]; ~~~ -[options](api/config/lightbox.md) 参数中的每一项都必须包含两个必需属性: +在 [options](api/config/lightbox.md) 参数中的项必须具备两个必需属性： - **key** - 选项的 id -- **label** - 选项的显示文本 +- **label** - 选项的标签 ## 从服务器填充控件数据 -要从服务器加载 Combo 选项，请使用 **script_path** 属性指定处理请求的服务端脚本 URL。 +要从服务器填充 Combo 控件，请使用 **script_path** 属性，指定将处理服务器请求的服务器端脚本的路径。 ~~~js scheduler.config.lightbox.sections = [ @@ -150,22 +150,21 @@ scheduler.config.lightbox.sections = [ ]; ~~~ -**script_path** 属性定义 combo 通过 AJAX 加载选项的 URL。 +**script_path** 属性指定从中加载选项的 URL，即若指定了 script_path，Combo 将通过 AJAX 从该 URL 加载数据。 -由于 combo 选择器基于 [dhtmlxCombo](https://docs.dhtmlx.com/combo__index.html)，服务器应返回兼容格式的数据。 -关于向 combo 添加数据的详细信息可参见 [Loading Options](https://docs.dhtmlx.com/combo__adding_options.html) 文章。 +Combo 选择器基于 [dhtmlxCombo](https://docs.dhtmlx.com/combo__index.html)，因此服务器应返回与之兼容的数据。有关向组合框添加数据的方式，请参阅文章 [Loading Options](https://docs.dhtmlx.com/combo__adding_options.html)。 -请求会在以下两种情况下发送: +该 URL 的请求分为两种情况： -1) 当 lightbox 打开且 combo 已有选中值时，控件会发送请求以加载该选项的 label。 +1) 打开 lightbox 时，Combo 有选定值 — 控件向服务器发送请求并加载所选选项的标签。 -请求包含一个 **id** 查询参数: +请求将包含一个 id 查询参数： ~~~ GET /url?id="1" ~~~ -响应应为仅包含指定 id 项目的数组，格式如下: +响应应返回仅包含指定 id 的项的数组，格式如下： ~~~ [ @@ -174,16 +173,15 @@ GET /url?id="1" ~~~ -2) 当用户在 combo 输入框中输入内容时，控件会加载过滤后的选项。 +2) 用户在下拉框输入文本时 — 控件加载筛选后的值。 -请求会携带输入内容作为 **mask** 查询参数: +客户端将发送带有输入文本的 mask 参数的请求： ~~~ GET /url?mask="al" ~~~ -服务器应返回所有匹配 mask 的项: - +服务器的响应应返回所有与 mask 值匹配的项： ~~~ [ { "value": 1, "text": "Albania"}, @@ -191,34 +189,24 @@ GET /url?mask="al" ] ~~~ -如果你使用 [PHP Connector](https://github.com/DHTMLX/connector-php) 库，服务端代码可能如下所示: +示例后端处理程序（Node.js/Express）： ~~~js -event->attach("beforeFilter", "by_id"); - function by_id($filter) { - if (isset($_GET['id'])) - $filter->add("item_id", $_GET['id'], '='); - } - - $combo->dynamic_loading(3); - $combo->render_table("Countries","item_id","item_nm"); - -?> +app.get("/api/countries", async (req, res) => { + const { id, mask } = req.query; + // 通过 id 或 mask 查询数据源 + const items = await countriesService.find({ id, mask }); + res.json(items); // [{ value: 1, text: "Albania" }, ...] +}); ~~~ -[Populating a combo box from the server](https://docs.dhtmlx.com/scheduler/samples/02_customization/18_combo_select_from_db.html) +[从服务器填充组合框](https://docs.dhtmlx.com/scheduler/samples/02_customization/18_combo_select_from_db.html) -## 自动过滤模式 +## 自动筛选模式 -自动过滤模式指的是用户输入时选项会自动过滤。要启用此模式，请将 **filtering** 属性设置为 *true*: +自动筛选模式是在用户输入时自动过滤选项的模式。要启用该模式，请将 **filtering** 属性设置为 true： ~~~js scheduler.config.lightbox.sections = [ @@ -227,8 +215,8 @@ scheduler.config.lightbox.sections = [ ]; ~~~ :::note -请注意，无论数据是从客户端还是服务端加载，自动过滤都可以使用。 +请注意，无论数据来自何处（客户端还是服务器端），均可使用自动筛选模式。 ::: -更多详情请参阅 dhtmlxCombo 文档中的 Filtering。 +更多相关信息请参阅 dhtmlxCombo 文档 dhtmlxCombo. Filtering 。 \ No newline at end of file diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/custom-details-form.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/custom-details-form.md index 3e37051f..ce95c4fa 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/guides/custom-details-form.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/custom-details-form.md @@ -1,49 +1,50 @@ ---- -title: "完全自定义 Lightbox" -sidebar_label: "完全自定义 Lightbox" +--- +title: "完全自定义灯箱" +sidebar_label: "完全自定义灯箱" --- -# 完全自定义 Lightbox +# 完全自定义灯箱 -要为调度器创建一个完全自定义的 lightbox，你需要重写 [showLightbox](api/method/showlightbox.md) 方法: +为了为调度程序指定一个完全自定义的灯箱，请重新定义 [`showLightbox()`](api/method/showlightbox.md) 方法： ~~~js -scheduler.showLightbox = function(id){ +scheduler.showLightbox = (id) => { // id - 事件的 id ... 用于显示任何自定义表单的代码 ... -} +}; ~~~ -有两个辅助方法可以让这个过程更加简单: - - -- [startLightbox](api/method/startlightbox.md) - 在指定的 HTML 容器内显示自定义 lightbox，并居中显示在屏幕上。 -- [endLightbox](api/method/endlightbox.md) - 关闭 lightbox +有 2 个辅助方法可用于简化实现： +- [`startLightbox()`](api/method/startlightbox.md) - 在指定的 HTML 容器中居中显示自定义灯箱 +- [`endLightbox()`](api/method/endlightbox.md) - 关闭灯箱 -假设你在页面的某处有一个 ID 为 **#custom_form** 的 HTML 容器。要实现自定义 lightbox，可以按照如下方式操作: +假设在页面的某处有 `#custom_form` HTML 容器。然后你可以像下面这样实现自定义灯箱： ~~~js -var custom_form = document.getElementById("custom_form"); +const customForm = document.getElementById("custom_form"); -scheduler.showLightbox = function(id){ - var ev = scheduler.getEvent(id); - scheduler.startLightbox(id, custom_form ); +scheduler.showLightbox = (id) => { + const event = scheduler.getEvent(id); + scheduler.startLightbox(id, customForm); ...'此处需要将事件值设置到表单中'... - //document.getElementById("some_input").value = ev.text; -} + // document.getElementById("some_input").value = event.text; +}; + // 需要绑定到“保存”按钮 -function save_form() { - var ev = scheduler.getEvent(scheduler.getState().lightbox_id); +const saveForm = () => { + const event = scheduler.getEvent(scheduler.getState().lightbox_id); ...'此处需要从表单中获取值'... - //ev.text = document.getElementById("some_input").value; - scheduler.endLightbox(true, custom_form); -} + // event.text = document.getElementById("some_input").value; + scheduler.endLightbox(true, customForm); +}; + // 需要绑定到“取消”按钮 -function close_form(argument) { - scheduler.endLightbox(false, custom_form); -} +const closeForm = () => { + scheduler.endLightbox(false, customForm); +}; ~~~ +### 相关示例 -[Fully custom lightbox](https://docs.dhtmlx.com/scheduler/samples/02_customization/16_custom_form.html) +- [完全自定义灯箱](https://docs.dhtmlx.com/scheduler/samples/02_customization/16_custom_form.html) \ No newline at end of file diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/custom-events-color.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/custom-events-color.md index 75ccef0d..02929fbc 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/guides/custom-events-color.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/custom-events-color.md @@ -1,40 +1,41 @@ ---- -title: "自定义事件颜色" -sidebar_label: "自定义事件颜色" +--- +title: "自定义事件的颜色" +sidebar_label: "自定义事件的颜色" --- -# 自定义事件颜色 +# 自定义事件的颜色 -有三种方式可以自定义事件的颜色: +有三种方式可以为事件指定自定义颜色： -1. [通过在事件对象的属性中直接设置颜色值](guides/custom-events-color.md#specifyingcolorsinpropertiesoftheeventobject)； -2. [为事件添加额外的 CSS 类](guides/custom-events-color.md#attachingadditionalcssclassestoanevent)； -3. [根据数据动态生成样式](guides/custom-events-color.md#loadingcolorswithdata)。 +1. [在事件对象的属性中设置颜色值](guides/custom-events-color.md#specifying-colors-in-properties-of-the-event-object); +2. [为事件附加额外的 CSS 类](guides/custom-events-color.md#attaching-additional-css-classes-to-an-event). +2. [从数据生成样式](guides/custom-events-color.md#loading-colors-with-data). -![custom_event_color](/img/custom_event_color.png) +![自定义事件颜色](/img/custom_event_color.png) -## 在事件对象属性中指定颜色 {#specifyingcolorsinpropertiesoftheeventobject} +## 在事件对象的属性中指定颜色 -要为事件分配自定义颜色，只需在事件数据对象中添加以下一个或两个属性: +要为事件指定自定义颜色，只需在数据对象中添加 2 个额外属性（或仅添加其中一个）： -- **textColor** - 设置事件字体颜色； -- **color** - 设置事件背景颜色。 +- **textColor** - 指定事件的文本颜色； +- **color** - 指定事件的背景颜色。 -![custom_color_model](/img/custom_color_model.png) +![自定义颜色模型](/img/custom_color_model.png) -~~~js title="Setting the event's color in the data object" +在数据对象中设置事件的颜色： +~~~js scheduler.parse([ - {id:1, start_date:"2019-05-21",end_date:"2019-05-25",text:"Task1", color:"red"}, - {id:2, start_date:"2019-06-02",end_date:"2019-06-05",text:"Task2", color:"blue"} + {id:1, start_date:"2027-05-21",end_date:"2027-05-25",text:"Task1", color:"red"}, + {id:2, start_date:"2027-06-02",end_date:"2027-06-05",text:"Task2", color:"blue"} ],"json"); ... scheduler.getEvent(1).color = "yellow"; scheduler.updateEvent(1); ~~~ -请注意，这些是特殊属性。scheduler 会自动检测它们，并将指定的颜色应用到事件的容器和文本上。如果未设置这些属性，则会使用默认颜色。 +请注意，这些是特殊属性。默认情况下，调度程序总是检查事件是否具有这些属性；如果有，它会将相关值应用到事件的容器和文本。否则，调度程序将对该事件使用预定义的颜色。 -这些属性支持任何有效的 CSS 颜色格式，例如: +这些属性可以具有任意有效的 CSS 颜色值，例如以下表示法均有效： ~~~js ev.color = "#FF0000"; @@ -42,175 +43,164 @@ ev.color = "red"; ev.color = "rgb(255,0,0)"; ~~~ -## 为事件附加额外的 CSS 类 {#attachingadditionalcssclassestoanevent} - -另一种设置事件颜色的方法是为事件添加自定义 CSS 类。 +## 为事件附加额外的 CSS 类 -### 技术实现 +第二种为事件着色的方法是为其应用额外的 CSS 类。 -你可以使用 [event_class](api/template/event_class.md) 模板为事件应用 CSS 类。 +### 技术要点 +要为事件应用一个 CSS 类，请使用 [event_class](api/template/event_class.md) 模板。 -默认情况下，模板如下所示: +模板的默认实现是： ~~~js scheduler.templates.event_class = function(start, end, ev){ return ""; } ~~~ -*该函数返回的字符串会被添加到事件的 class 属性中，因此你可以根据事件的状态返回不同的类名。* - - -[Coloring events](https://docs.dhtmlx.com/scheduler/samples/02_customization/01_events_coloring.html) +*该函数返回将添加到事件类中的字符串。因此，你可以根据事件的状态返回不同的类。* +[为事件着色](https://docs.dhtmlx.com/scheduler/samples/02_customization/01_events_coloring.html) -### 示例 {#loadingcolorswithdata} +### 示例 +假设你希望将分配给管理者和员工的事件用不同颜色表示：管理者为绿色，员工为橙色。在这种情况下，你需要做两件事： -假设你希望根据事件属于经理还是员工来设置不同的颜色:经理为绿色，员工为橙色。实现步骤如下: +1. 为该集合定义一个命名的 serverList，例如命名为 'people'，并将其用于数据源： -1. 在数据模型中添加一个额外的属性，例如 'type'，用于标识用户类型:'manager' 或 'employee'。 + ![扩展数据模型](/img/extended_data_model.png) +2. 为这些类型指定相关的 CSS 类，例如命名为 'manager_event' 和 'employee_event'。对于这样的名称，CSS 定义将如下所示： - ![extended_data_model](/img/extended_data_model.png) -2. 创建与这些类型对应的 CSS 类，如 'manager_event' 和 'employee_event'。CSS 代码可能如下: +[重新定义默认的 CSS 类](Redefining the default CSS classes) - - - -~~~js title="Redefining the default CSS classes" ~~~html - + } + ~~~ -对于 6.0 及之前版本的 Scheduler（不支持 CSS 变量），可以使用如下样式： +对于较老版本的 Scheduler（v6.0 及更早版本），不支持 CSS 变量，可以使用以下样式对事件进行着色： ~~~html - -~~~ -3. 最后，重写 [event_class](api/template/event_class.md) 模板为事件分配类名： + /* day 或 week 视图中的事件 */ + .dhx_cal_event.manager_event div{ + background-color: #009966 !important; + color: black !important; + } + .dhx_cal_event.employee_event div{ + background-color: #FF9933 !important; + color: black !important; + } + /* 月视图中的多日事件 */ + .dhx_cal_event_line.manager_event{ + background-color: #009966 !important; + color: black !important; + } + .dhx_cal_event_line.employee_event{ + background-color: #FF9933 !important; + color: black !important; + } + + /* 月视图中時間固定的事件 */ + .dhx_cal_event_clear.manager_event{ + color: black !important; + } + .dhx_cal_event_clear.employee_event{ + color: black !important; + } +~~~ +3. 并且，最终覆盖 [event_class](api/template/event_class.md) 模板 -~~~js title="Applying additional CSS classes to events:" +[应用额外的 CSS 类到事件:](Applying additional CSS classes to events:) +~~~js scheduler.templates.event_class = function (start, end, event) { - if (event.type == 'manager') return "manager_event"; - return "employee_event"; + if (event.type == 'manager') return "manager_event"; + return "employee_event"; }; ~~~ +[为事件着色](https://docs.dhtmlx.com/scheduler/samples/02_customization/01_events_coloring.html) -[Coloring events](https://docs.dhtmlx.com/scheduler/samples/02_customization/01_events_coloring.html) +[使用模板来样式化事件](https://docs.dhtmlx.com/scheduler/samples/02_customization/06_templates.html) +## 使用数据加载颜色 -[Styling events with templates](https://docs.dhtmlx.com/scheduler/samples/02_customization/06_templates.html) +如果颜色是来自后端数据的一部分，例如任务颜色与阶段相关，或分配给任务的资源无法在页面上硬编码，那么手动从数据生成样式可能是一个不错的解决方法。 - -## 通过数据加载颜色 - -当颜色来自后端数据（例如任务颜色取决于阶段或分配的资源，无法硬编码）时，可以根据数据动态生成样式。 - -假设你有一个分配了用户的任务列表，任务样式取决于用户属性： +设想你拥有以下可分配给任务的用户集合。任务样式应由用户记录的属性来定义： ~~~js [ - {"key":1, "label":"John", "backgroundColor":"#03A9F4", "textColor":"#FFF"}, - {"key":2, "label":"Mike", "backgroundColor":"#f57730", "textColor":"#FFF"}, - {"key":3, "label":"Anna", "backgroundColor":"#e157de", "textColor":"#FFF"}, - {"key":4, "label":"Bill", "backgroundColor":"#78909C", "textColor":"#FFF"}, - {"key":7, "label":"Floe", "backgroundColor":"#8D6E63", "textColor":"#FFF"} + {"key":1, "label":"John", "backgroundColor":"#03A9F4", "textColor":"#FFF"}, + {"key":2, "label":"Mike", "backgroundColor":"#f57730", "textColor":"#FFF"}, + {"key":3, "label":"Anna", "backgroundColor":"#e157de", "textColor":"#FFF"}, + {"key":4, "label":"Bill", "backgroundColor":"#78909C", "textColor":"#FFF"}, + {"key":7, "label":"Floe", "backgroundColor":"#8D6E63", "textColor":"#FFF"} ] ~~~ -在这种情况下，用户及其颜色与 scheduler 分开管理，scheduler 事先并不知道用户 ID 或颜色。 +在此用例中，用户及其颜色由应用程序的不同部分创建和管理，调度器通常事先并不知道用户 ID 及其颜色。 -实际做法如下： +在这种情况下你可以这样做： -- 为该集合定义一个命名的 serverList： +- 为此集合定义一个命名的 serverList ~~~js scheduler.serverList("people"); ~~~ -- 通过支持的 [数据格式](guides/data-formats.md#json-with-collections) 或自定义 XHR 请求将这些选项加载到页面。 +- 将选项加载到页面，可以使用受支持的 [数据格式](guides/data-formats.md#json-with-collections) 之一，或通过自定义 xhr 手动加载 -- 加载后，根据数据动态生成 CSS 样式： +- 选项加载完成后，你可以从数据生成 CSS 样式： ~~~js scheduler.attachEvent("onLoadEnd", function(){ - // 使用唯一的 ID 作为样式元素 - var styleId = "dynamicSchedulerStyles"; + // 为样式元素使用一个任意的 id + const styleId = "dynamicSchedulerStyles"; - // 如果样式元素已存在，则复用 + // 如果你将重新加载带颜色的选项 - 重用之前创建的样式元素 - var element = document.getElementById(styleId); - if(!element){ - element = document.createElement("style"); - element.id = styleId; - document.querySelector("head").appendChild(element); - } - var html = []; - var resources = scheduler.serverList("people"); + let element = document.getElementById(styleId); + if(!element){ + element = document.createElement("style"); + element.id = styleId; + document.querySelector("head").appendChild(element); + } + let html = []; + const resources = scheduler.serverList("people"); - // 为每个用户创建 CSS 规则并插入样式元素 + // 为每个选项生成 css 样式并写入到样式元素中 - resources.forEach(function(r){ + resources.forEach(function(r){ html.push(`.event_resource_${r.key} { --dhx-scheduler-event-background:${r.backgroundColor}; --dhx-scheduler-event-color:${r.textColor}; }`); - }); - element.innerHTML = html.join(""); + }); + element.innerHTML = html.join(""); }); ~~~ -- 然后，在 event_class 模板中为事件分配生成的类名： +- 之后你就可以将从模板生成的相关类分配给事件了： ~~~js scheduler.templates.event_class = function (start, end, event) { - var css = []; + let css = []; - if(event.owner_id){ - css.push("event_resource_" + event.owner_id); - } + if(task.owner_id){ + css.push("event_resource_" + event.owner_id); + } - return css.join(" "); + return css.join(" "); }; -~~~ +~~~ \ No newline at end of file diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/custom-events-display.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/custom-events-display.md index abf4a661..06b7483a 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/guides/custom-events-display.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/custom-events-display.md @@ -5,63 +5,62 @@ sidebar_label: "自定义事件框" # 自定义事件框 -dhtmlxScheduler 允许您自定义事件的显示方式。 +dhtmlxScheduler 提供了为事件定义自定义显示的功能。 :::note -此功能仅适用于 [Day View](views/day.md)、[주간 보기](views/week.md) 和 [Units View](views/units.md)。 +仅适用于 [Day View](views/day.md)、[Week View](views/week.md) 和 [Units View](views/units.md) 三种视图。 ::: -## 技术说明 +## 技术要点 -您可以通过 [renderEvent](api/method/renderevent.md) 方法自定义事件: +通过 [renderEvent](api/method/renderevent.md) 方法实现事件的自定义显示： ~~~js scheduler.renderEvent = function(container, ev) { - // 你的自定义代码 + // your customizing code } ~~~ -- **_container_** - 事件的容器元素 -- **_ev_** - 事件对象本身 - +- **_container_** - 事件的容器 +- **_ev_** - 事件对象 [Custom event box](https://docs.dhtmlx.com/scheduler/samples/02_customization/27_custom_event_box.html) - ## 重要提示 -- 返回 _true_ 将应用您的自定义渲染，返回 _false_ 则会使用默认渲染方式。 -- 某些 CSS 类具有特定作用，并且应当作为元素 className 的首个类名: - - **_dhx_event_move_** - 使元素可拖动（通常为事件头部）。 - - **_dhx_event_resize_** - 允许通过拖动元素调整事件时长。 +- 返回 _true_ 表示应用自定义逻辑，返回 _false_ 表示应用默认逻辑。 +- 某些 CSS 类具有特殊用途（它们必须在元素的 className 中排在最前面）： + - **_dhx_event_move_** - 使用此样式的元素可以被拖拽（通常是事件头部）。 + - **_dhx_event_resize_** - 拖动具有此样式的元素将改变事件的持续时间。 ~~~js -var html = "
"; - // 事件内容的容器 - html += "
"; + // a container for the event's content + html+= "
"; html += ""; - // 这里有两种选择：对于短事件仅显示开始时间，对于长事件显示开始和结束时间 - if ((ev.end_date - ev.start_date)/60000 > 40) { // 如果事件持续超过40分钟 + //two options here:show only start date for short events or start+end for long ones + if ((ev.end_date - ev.start_date)/60000>40){//if an event is longer than 40 minutes html += scheduler.templates.event_header(ev.start_date, ev.end_date, ev); html += " @@ -69,24 +68,24 @@ scheduler.renderEvent = function(container, ev) { } else { html += scheduler.templates.event_date(ev.start_date) + ""; } - // 显示事件文本 - html += "" + scheduler.templates.event_text(ev.start_date, ev.end_date, ev) + - "
"; + // displaying the event's text + html += "" + scheduler.templates.event_text(ev.start_date,ev.end_date,ev)+ + "" + "
"; - // 调整大小部分 + // the resize section html += "
"; container.innerHTML = html; - return true; // 必须：true 使用自定义渲染，false 为默认渲染 + return true; //required, true - to display a custom form, false - the default form }; ~~~ -相关的 CSS 如下所示: +和相关的 CSS 如下所示： ~~~html ~~~ -另外，您也可以使用 CSS 变量替代固定颜色，例如: +你也可以使用 CSS 变量来替代固定颜色值，如下所示： ~~~html ~~~ - -[Custom event box](https://docs.dhtmlx.com/scheduler/samples/02_customization/27_custom_event_box.html) +[自定义事件框](https://docs.dhtmlx.com/scheduler/samples/02_customization/27_custom_event_box.html) \ No newline at end of file diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/custom-lightbox-editor.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/custom-lightbox-editor.md index ff9103b5..f1a68174 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/guides/custom-lightbox-editor.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/custom-lightbox-editor.md @@ -1,70 +1,70 @@ --- -title: "自定义 Lightbox 控件" -sidebar_label: "自定义 Lightbox 控件" +title: "自定义灯箱控件" +sidebar_label: "自定义灯箱控件" --- -# 自定义 Lightbox 控件 +# 自定义灯箱控件 -要设置一个自定义控件（编辑器），你需要像下面这样定义一个新对象: +要创建一个自定义控件（编辑器），请按如下方式定义一个新对象： ~~~js scheduler.form_blocks["my_editor"]={ - render:function(config){ // config - 区块配置对象 - var height="(config.height||50)+""px"; + render:function(config){ // config- section configuration object + const height="(config.height||50)+""px"; return "
" + "
"; }, set_value:function(node,value,ev,config){ - // node - 与上面定义的 HTML 相关的 HTML 元素 - // value - 由 map_to 属性指定的值 - // ev - 事件对象 - // config - 区块配置对象 + // node - HTML object related to HTML defined above + // value - value defined by map_to property + // ev - event object + // config - section configuration object node.querySelector("textarea").value = value || ""; }, get_value:function(node,ev,config){ - // node - 与上面定义的 HTML 相关的 HTML 元素 + // node - HTML object related to HTML defined above // event object - // config - 区块配置对象 + // config - section configuration object return node.querySelector("textarea").value; }, focus:function(node){ - // node - 与上面定义的 HTML 相关的 HTML 元素 + // node - HTML object related to HTML defined above node.querySelector("textarea").focus(); } }; ~~~ -用法示例: +Usage: ~~~js scheduler.locale.labels.section_details = "Details"; -scheduler.config.lightbox.sections="[" +scheduler.config.lightbox.sections = [ { name:"details", height:35, map_to:"text", type:"my_editor", focus:true}, { name:"time", height:72, type:"time", map_to:"auto"} ]; ~~~ -需要注意的是，在 "render" 函数返回的 HTML 中**避免**使用自闭合标签，否则可能会导致浏览器解析问题: +请确保不要在由 "render" 函数返回的 HTML 代码中使用短闭合标签语法，因为这可能在浏览器中引发解析问题： ~~~js -// 错误示例: +// bad: render:function(){ return "
"; } -// 正确示例: +// good: render:function(){ return "
"; } ~~~ -[Custom editor in the lightbox](https://docs.dhtmlx.com/scheduler/samples/02_customization/05_custom_editor.html) +[灯箱中的自定义编辑器](https://docs.dhtmlx.com/scheduler/samples/02_customization/05_custom_editor.html) ## 示例 -以下是如何构建这样一个自定义编辑器的例子: +让我们考虑如何创建以下自定义编辑器： ![custom_editor](/img/custom_editor.png) @@ -72,7 +72,7 @@ render:function(){ ~~~js scheduler.form_blocks["my_editor"]={ render:function(sns){ - return "
" + + return "
" + "Text  " + @@ -87,18 +87,18 @@ scheduler.form_blocks["my_editor"]={ return node.querySelector("[name='text']").value; }, focus:function(node){ - var input = node.querySelector("[name='text']"); + const input = node.querySelector("[name='text']"); input.select(); input.focus(); } }; scheduler.locale.labels.section_description = "Details"; -scheduler.config.lightbox.sections="[" +scheduler.config.lightbox.sections = [ { name:"description", map_to:"text", type:"my_editor" , focus:true}, { name:"time", height:72, type:"time", map_to:"auto"} ]; ~~~ -[Custom editor in the lightbox](https://docs.dhtmlx.com/scheduler/samples/02_customization/05_custom_editor.html) +[灯箱中的自定义编辑器](https://docs.dhtmlx.com/scheduler/samples/02_customization/05_custom_editor.html) \ No newline at end of file diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/custom-skins.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/custom-skins.md index 1805856a..4c852d92 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/guides/custom-skins.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/custom-skins.md @@ -5,13 +5,13 @@ sidebar_label: "皮肤自定义" # 皮肤自定义 -从 7.0 版本开始，Scheduler 皮肤是通过 CSS 变量构建的，这使得自定义和样式调整变得更加简单。 +从 v7.0 起，Scheduler 的皮肤使用 CSS 变量，您可以用它们进行自定义和样式设置。 +### 相关示例 +- [Customize and switch between themes](https://docs.dhtmlx.com/scheduler/samples/07_skins/07_themes.html) -[Customize and switch between themes](https://docs.dhtmlx.com/scheduler/samples/07_skins/07_themes.html) - -主要 CSS 变量: +关键 CSS 变量： ~~~css :root { @@ -76,64 +76,62 @@ sidebar_label: "皮肤自定义" --dhx-scheduler-popup-border-radius: var(--dhx-scheduler-border-radius); } - ~~~ -所有这些变量都位于包内的 **codebase/sources/less/src/themes/variables.less** 文件中。 + + +所有变量都可以在包中的 **codebase/sources/LESS/src/themes/variables.less** 文件中找到。 ## 如何自定义皮肤 -最简单的更改 Scheduler 外观的方法是在你自己的样式表中覆盖 CSS 变量。例如: +最简单的自定义 Scheduler 外观的方法，是在您的样式表中覆盖相关的 CSS 变量。下面是一个示例： ~~~html ~~~ +### 相关示例 +- [Customize and switch between themes](https://docs.dhtmlx.com/scheduler/samples/07_skins/07_themes.html) -[Customize and switch between themes](https://docs.dhtmlx.com/scheduler/samples/07_skins/07_themes.html) - -通过这样设置变量，你可以用自己的样式替换默认样式，这些更改会在整个 Scheduler 中生效。 +通过这种方式定义变量，您可以重新定义默认样式，确保自定义样式应用于 Scheduler。 :::note -为了确保整个主题变量值的继承一致性，建议在 :root 元素上定义变量。 +为确保在整个主题中正确继承值，请在 `:root` 元素定义变量。 ::: -在 **:root** 层级定义这些样式，可以确保它们在整个组件中被正确继承。这样，当某个变量依赖于另一个变量时，变更会正确级联。 +在整个组件中确保正确继承和应用的关键，是在 `:root` 元素定义这些样式。当重新定义其他变量所使用的变量时，它将正确影响组件中的相关样式。 -例如，变量 `--dhx-scheduler-scale-color` 继承自 `--dhx-scheduler-container-color`。 +例如，变量 `--dhx-scheduler-scale-color` 继承自主文本颜色变量 `--dhx-scheduler-container-color`。 -- 在 **:root** 层级重定义 `--dhx-scheduler-container-color` 会相应地更新 `--dhx-scheduler-scale-color`。 +- 如果在 `:root` 级别重新定义 `--dhx-scheduler-container-color`，您将确保 `--dhx-scheduler-scale-color` 能反映这一变化。 ~~~html ~~~ -- 但是，如果你在更深的 DOM 层级（如 **.dhx_cal_container** 内部）重定义 `--dhx-scheduler-container-color`，则不会影响 `--dhx-scheduler-scale-color`。 +- 如果在 DOM 树的较低级别重新定义 `--dhx-scheduler-container-color`，例如在 **.dhx_cal_container** 内，则不会影响 `--dhx-scheduler-scale-color` 变量。 ~~~html @@ -141,90 +139,91 @@ sidebar_label: "皮肤自定义" ## 如何使用源代码 -dhtmlxScheduler 提供了以下几种样式文件格式: +dhtmlxScheduler 附带以下形式的样式文件： -- **codebase/dhtmlxscheduler.css** - 用于生产环境的压缩 CSS 文件； -- **codebase/sources/dhtmlxscheduler.css** - 可读的预构建 CSS 文件； -- **codebase/sources/less/** - Scheduler 皮肤的 LESS 源文件。 +- **codebase/dhtmlxscheduler.css** - 面向皮肤的预构建压缩 CSS 文件，已经准备就绪可用于生产环境； +- **codebase/sources/dhtmlxscheduler.css** - 预构建的可读 CSS 文件； +- **codebase/sources/less/** - Scheduler 皮肤的源 Less 文件。 -如果你想深度定制现有皮肤或创建新皮肤，源 LESS 文件会非常有用。 +后者可用于对现有皮肤进行深度自定义或创建新的皮肤。 ## 如何开始 -你可以将 **codebase/sources/less** 作为一个 NPM 包进行设置。该源文件夹包含两类文件: +您可以将 `codebase/sources/less` 初始化为一个 NPM 包。源代码将包含两种类型的文件： - 样式表； -- 声明微变量的文件，用于细节调整或构建新皮肤。 +- 带有微变量声明的文件，您可以使用它们对调度器视图进行微调或创建新的皮肤。 ## 如何构建皮肤 -在 **codebase/sources/less/** 目录下，运行: +在 `codebase/sources/less/` 运行： -~~~ +~~~sh > npm install ~~~ -安装完成后，可以使用以下命令重新构建 CSS 文件: +安装完成后，您可以使用以下命令重新构建 CSS 文件： -~~~ +~~~sh > npm run build ~~~ -或者监听更改并自动重建: +或者 -~~~ +~~~sh > npm run watch ~~~ -这些脚本会将源文件编译为 CSS，并将输出文件放入 Scheduler 包的 *codebase* 文件夹，替换现有的 CSS 文件。 +该脚本将从源代码重新构建 CSS 文件，并将其放入调度程序包的 *codebase* 文件夹中，替换现有文件。 ## 结构 -7.0 版本的 **less** 文件夹结构（未来版本可能有所调整）如下: +版本 7.0 的 `less` 文件夹结构如下（未来版本可能会变动）： -### 图片 +### 图像 - **./src/imgs** - 所有皮肤使用的 SVG 图标 -- **./src/iconfont** - 包含在 web 字体中的图标 +- **./src/iconfont** - 预构建进网页字体的图标 ### 皮肤定义 -默认变量定义在 `terrace` 皮肤中，其他皮肤会覆盖这些变量并添加自己的样式。 +默认变量集合在 `terrace` 皮肤中定义，其他皮肤重新定义相应变量并添加样式。 - **./src/themes** - - *./src/themes/variables.less* - 所有皮肤通用变量，包括 `terrace` - - *./src/themes/contrast_black* - 高对比度黑色皮肤变量 - - *./src/themes/contrast_white* - 高对比度白色皮肤变量 - - *./src/themes/material* - material 皮肤变量 - - *./src/themes/dark* - dark 皮肤变量 - - *./src/themes/flat* - flat 皮肤变量 + - *./src/themes/variables.less* - 所有皮肤通用的变量，`terrace` 皮肤 + - *./src/themes/contrast_black* - 对比黑色皮肤变量 + - *./src/themes/contrast_white* - 对比白色皮肤变量 + - *./src/themes/material* - Material 风格皮肤变量 + - *./src/themes/dark* - 暗色皮肤变量 + - *./src/themes/flat* - Flat 风格皮肤变量 -### 构建皮肤的入口文件 +### 构建皮肤的入口点 - theme.less - package.json + ## 创建自定义皮肤 -要创建新皮肤，请从 **sources/less/src/themes** 中复制并重命名一个现有皮肤。操作步骤如下: +若要创建一个新的皮肤，您可以从 `sources/less/src/themes` 文件夹复制并重命名现有的皮肤之一。请按以下步骤操作： -1）复制并重命名一个现有皮肤文件。例如: +1. 复制并重命名 `sources/less/src/themes` 文件夹中的现有文件之一，例如： -~~~ --> 复制： +~~~text +-> copy: codebase/sources/less/src/themes/material.less --> 重命名为： +-> rename to: codebase/sources/less/src/themes/custom.less ~~~ -2）在 **sources/less/src/themes/index.less** 文件中引入你的新文件，如下所示: +2. 在 `sources/less/src/themes/index.less` 中导入新文件，如下所示： -~~~ +~~~less @import "./custom"; ~~~ -然后如下定义你的自定义变量: +并按以下内容添加变量： ~~~css :root[data-scheduler-theme='custom'] { @@ -236,24 +235,26 @@ codebase/sources/less/src/themes/custom.less } ~~~ -请记得在带有 `data-scheduler-theme` 属性的 `:root` 选择器下定义皮肤变量。 +请注意，皮肤变量应在 `:root` 元素下定义，使用 `data-scheduler-there` 选择器。 -每个新主题都应包含 **--dhx-scheduler-theme** 变量，并设置为主题名称。 +一个新主题必须包含 `--dhx-scheduler-theme` 变量及主题名称。 -3）通过运行以下命令重新构建皮肤: +3. 通过运行以下命令重新构建皮肤： -~~~ +~~~sh npm run build ~~~ :::note -请注意，Scheduler 可能会根据所用皮肤应用一些预定义设置。当你通过复制现有皮肤创建新皮肤时，可能需要手动调整对应的 Scheduler 设置。 +请注意，调度程序可能会基于所应用的皮肤对日历应用一些预定义设置。 +当您通过复制现有皮肤来创建新皮肤时，您可能需要手动将相应设置应用到调度程序。 ::: + ## JS 样式设置 -Scheduler 中有些样式选项并非仅通过 CSS 控制，而是通过 JavaScript 配置设置的。这些包括: +请注意，调度程序样式并非全部通过 CSS 控制，某些参数是由 JavaScript 配置定义的。它们包括： - [hour_size_px](api/config/hour_size_px.md) -- 以及 [scheduler.xy](api/other/xy.md) 对象的所有设置 +- 和 [scheduler.xy](api/other/xy.md) 对象的所有设置 \ No newline at end of file diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/customizing-edit-select-bars.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/customizing-edit-select-bars.md index 9e5456fb..0ca4a154 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/guides/customizing-edit-select-bars.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/customizing-edit-select-bars.md @@ -1,15 +1,15 @@ --- -title: "自定义'选择'和'编辑'工具栏" -sidebar_label: "自定义'选择'和'编辑'工具栏" +title: "自定义 'Select' 与 'Edit' 栏" +sidebar_label: "自定义 'Select' 与 'Edit' 栏" --- -# 自定义"选择"和"编辑"工具栏 +# 自定义 "Select" 与 "Edit" 栏 -dhtmlxScheduler 允许你为编辑和选择工具栏设置自定义按钮集合。 +dhtmlxScheduler 提供了为编辑栏和选择栏定义自定义按钮集合的可能性。 -## 选择工具栏 +## 选择栏 -默认情况下，选择工具栏包含 3 个按钮（'Details'、'Edit'、'Delete'），它们通过 [icons_select](api/config/icons_select.md) 配置选项定义。 +默认情况下，选择栏包含 3 个按钮（'Details'、'Edit'、'Delete'），由 [icons_select](api/config/icons_select.md) 配置选项指定。 ~~~js scheduler.config.icons_select = [ @@ -19,18 +19,19 @@ scheduler.config.icons_select = [ ]; ~~~ -### 使用示例 -如下图所示，这里是一个选择工具栏的示例: +### 用法示例 +让我们来看看下图所示的选择栏： + ![select_bar.png](/img/select_bar.png) -在现有按钮旁边新增了一个名为 **Location** 的按钮。 +在现有按钮的基础上，我们新增了一个按钮 - **Location**。 -实现步骤如下: - -- 按如下方式更新 [icons_select](api/config/icons_select.md): +以下是我们的步骤： +- 重新定义 [icons_select](api/config/icons_select.md)，如下所示： + ~~~js scheduler.config.icons_select = [ "icon_location", @@ -38,41 +39,41 @@ scheduler.config.icons_select = [ "icon_edit", "icon_delete" ]; - ~~~ - + :::note -注意，每个按钮的名称必须以 "icon_" 开头 +注：任何按钮必须以 "icon_" 开头 ::: -- 为新按钮定义标签: - +- 为新按钮设置标签： + ~~~js scheduler.locale.labels.icon_location = "Location"; ~~~ -- 为按钮分配 CSS 类: - +- 为按钮设置 CSS 类： + ~~~js .dhx_menu_icon.icon_location{ background-image: url('location_icon.png'); } ~~~ -- 为按钮提供点击事件处理函数: - +- 指定处理按钮点击的处理函数： + ~~~js scheduler._click.buttons.location = function(id){ some_function(id); }; ~~~ + +其中 **scheduler._click.buttons** 包含栏按钮的 onClick 处理函数集合。'location' 是在 [icons_edit](api/config/icons_edit.md) 中，位于 'icon_' 部分后的按钮名称。 + -这里，**scheduler._click.buttons** 保存了工具栏按钮的 onClick 事件处理函数。'location' 键对应于 [icons_select](api/config/icons_select.md) 中按钮名称（去掉 'icon_' 前缀）。 +## 编辑栏 -## 编辑工具栏 - -通常，编辑工具栏有 2 个按钮（'Save' 和 'Cancel'），通过 [icons_edit](api/config/icons_edit.md) 选项进行配置。 +通常，编辑栏包含 2 个按钮（'Save' 和 'Cancel'），由 [icons_edit](api/config/icons_edit.md) 配置选项指定。 ~~~js scheduler.config.icons_edit = [ @@ -81,17 +82,18 @@ scheduler.config.icons_edit = [ ]; ~~~ -### 使用示例 -参考下图所示的编辑工具栏: +### 用法示例 +让我们来看看下图所示的编辑栏： + ![customizing_edit_bar.png](/img/customizing_edit_bar.png) -除了 **Save** 和 **Cancel** 按钮外，还新增了一个 **Info** 按钮。 -具体步骤如下: - -- 按如下方式更新 [icons_edit](api/config/icons_edit.md): +在 **Save** 和 **Cancel** 按钮的基础上，我们新增了一个按钮 - **Info**。 +以下是我们的步骤： +- 重新定义 [icons_edit](api/config/icons_edit.md)，如下所示： + ~~~js scheduler.config.icons_edit = [ "icon_custom", @@ -100,39 +102,41 @@ scheduler.config.icons_edit = [ ]; ~~~ -- 设置新按钮的标签: - +- 为新按钮设置标签： + ~~~js scheduler.locale.labels.icon_custom = "Info"; ~~~ -- 定义按钮的 CSS 类: - +- 为按钮设置 CSS 类： + ~~~js .dhx_menu_icon.icon_custom{ background-image: url('info_icon.png'); } ~~~ -- 指定按钮的点击事件处理函数: - +- 指定处理按钮点击的处理函数： + ~~~js scheduler._click.buttons.custom = function(id){ some_function; }; ~~~ -同样，**scheduler._click.buttons** 包含了按钮的点击事件处理函数，'custom' 与 [icons_edit](api/config/icons_edit.md) 中按钮名称（去掉 'icon_' 前缀）一致。 +其中 **scheduler._click.buttons** 包含栏按钮的 onClick 处理函数集合。'custom' 是在 [icons_edit](api/config/icons_edit.md) 中，位于 'icon_' 部分后的按钮名称。 + -## 动态修改工具栏元素 +## 动态改变栏元素 -你可以根据特定条件动态修改编辑和选择工具栏上的按钮。 +编辑栏和选择栏的按钮可以根据某些条件动态地改变。 -例如，如果你的事件有一个布尔属性 **important**，用来表示该事件很重要且不应被删除，则可以根据该属性动态显示或隐藏选择工具栏中的 'delete' 按钮。示例代码如下: +例如，您的事件有一个自定义布尔属性 **important**，表示该事件是否重要且用户无法删除。 +根据该属性的值，您可能希望在选择栏中隐藏/显示 'delete' 按钮。要实现这样的行为，请使用以下技巧： ~~~js scheduler.attachEvent("onClick", function(id){ - var event = scheduler.getEvent(id); + const event = scheduler.getEvent(id); if (event.important) scheduler.config.icons_select = ["icon_details"]; else @@ -140,4 +144,4 @@ scheduler.attachEvent("onClick", function(id){ return true; }); -~~~ +~~~ \ No newline at end of file diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/data-export.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/data-export.md deleted file mode 100644 index 3bf8a409..00000000 --- a/i18n/zh/docusaurus-plugin-content-docs/current/guides/data-export.md +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: "数据导出与导入" -sidebar_label: "数据导出与导入" ---- - -# 数据导出与导入 - -- [Google Calendar와의 통합](integrations/google-calendar/google-calendar-sync.md) -- [Export to PDF](export/pdf.md) -- [Export to PNG](export/png.md) -- [엑셀 및 iCal로 내보내기](export/excel.md) -- [데이터 직렬화: XML, JSON, iCal](export/serialization.md) - diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/data-formats.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/data-formats.md index 605a4f68..0b2fe9eb 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/guides/data-formats.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/data-formats.md @@ -5,12 +5,11 @@ sidebar_label: "数据格式示例" # 数据格式示例 -本文提供了所有支持的数据格式的示例。 - +在本文中，您将看到所有受支持的数据格式的示例。 @@ -29,48 +28,49 @@ sidebar_label: "数据格式示例" - - + + - - - + + + - - + +
- 表 1 + Table 1 演示事件
会议2019年4月11日 14:002019年4月11日 17:002027年4月11日 14:002027年4月11日 17:00
大会2019年4月15日 12:002019年4月18日 19:00研讨会2027年4月15日 12:002027年4月18日 19:00
面试2019年4月24日 09:002019年4月24日 10:002027年4月24日 09:002027年4月24日 10:00
-## JSON {#json} + +## JSON ~~~js [ { "id":"1", - "text":"Meeting", - "start_date":"2019-04-11 14:00", - "end_date":"2019-04-11 17:00" + "text":"会议", + "start_date":"2027-04-11 14:00", + "end_date":"2027-04-11 17:00" }, { "id":"2", - "text":"Conference", - "start_date":"2019-04-15 12:00", - "end_date":"2019-04-18 19:00" + "text":"研讨会", + "start_date":"2027-04-15 12:00", + "end_date":"2027-04-18 19:00" }, { "id":"3", - "text":"Interview", - "start_date":"2019-04-24 09:00", - "end_date":"2019-04-24 10:00" + "text":"面试", + "start_date":"2027-04-24 09:00", + "end_date":"2027-04-24 10:00" } ] ~~~ -## 带集合的 JSON {#json-with-collections} +## 带集合的 JSON 当你需要包含额外的数据集合时，这种格式非常有用。 例如，在从服务器加载时间线和单元部分时可以使用，如[从服务器加载 Timeline 和 Units 部分](guides/loading-data.md#loadingdatawithtimelineandunitssectionsfromtheserver)所述: @@ -80,29 +80,29 @@ sidebar_label: "数据格式示例" "data":[ { "id":"1", - "start_date":"2019-03-02 00:00:00", - "end_date":"2019-03-04 00:00:00", + "start_date":"2027-03-02 00:00:00", + "end_date":"2027-03-04 00:00:00", "text":"dblclick me!", "type":"1" }, { "id":"2", - "start_date":"2019-03-09 00:00:00", - "end_date":"2019-03-11 00:00:00", + "start_date":"2027-03-09 00:00:00", + "end_date":"2027-03-11 00:00:00", "text":"and me!", "type":"2" }, { "id":"3", - "start_date":"2019-03-16 00:00:00", - "end_date":"2019-03-18 00:00:00", + "start_date":"2027-03-16 00:00:00", + "end_date":"2027-03-18 00:00:00", "text":"and me too!", "type":"3" }, { "id":"4", - "start_date":"2019-03-02 08:00:00", - "end_date":"2019-03-02 14:10:00", + "start_date":"2027-03-02 08:00:00", + "end_date":"2027-03-02 14:10:00", "text":"Type 2 event", "type":"2" } @@ -117,29 +117,29 @@ sidebar_label: "数据格式示例" } ~~~ -## XML {#xml} +## XML ~~~xml - - 04/11/2013 14:00 - 04/11/2013 17:00 + + 04/11/2027 14:00 + 04/11/2027 17:00 - - 04/15/2013 12:00 - 04/18/2013 19:00 + + 04/15/2027 12:00 + 04/18/2027 19:00 - - 04/24/2013 09:00 - 04/24/2013 10:00 + + 04/24/2027 09:00 + 04/24/2027 10:00 ~~~ -## iCal {#ical} +## iCal ~~~html BEGIN:VCALENDAR @@ -147,38 +147,39 @@ VERSION:2.0 PRODID:-//dhtmlXScheduler//NONSGML v2.2//EN DESCRIPTION: BEGIN:VEVENT -DTSTART:20130411T140000 -DTEND:20130411T170000 -SUMMARY:Meeting +DTSTART:20270411T140000 +DTEND:20270411T170000 +SUMMARY:会议 END:VEVENT BEGIN:VEVENT -DTSTART:20130415 -DTEND:20130418 -SUMMARY:Conference +DTSTART:20270415 +DTEND:20270418 +SUMMARY:研讨会 END:VEVENT BEGIN:VEVENT -DTSTART:20130424T090000 -DTEND:20130424T100000 -SUMMARY:Interview +DTSTART:20270424T090000 +DTEND:20270424T100000 +SUMMARY:面试 END:VEVENT END:VCALENDAR ~~~ -## 带自定义属性的数据 {#datawithcustomproperties} +## 带自定义属性的数据 + +讓我們考慮一個例子，假設初始資料集（如[上方](guides/data-formats.md)所示）具有 2 個自訂屬性： -以下是一个示例，基本数据集（见[上文](guides/data-formats.md)）中包含了两个自定义属性: +- **room** - 事件将发生在的房间号。 +- **holder** - 负责该事件的人员姓名。 -- **room** - 活动举办房间的编号。 -- **holder** - 负责该活动的人员姓名。 #### JSON ~~~js [ { "id":"1", - "text":"Meeting", - "start_date":"2019-04-11 14:00", - "end_date":"2019-04-11 17:00" + "text":"会议", + "start_date":"2027-04-11 14:00", + "end_date":"2027-04-11 17:00" "room":327, "holder":"James" } @@ -200,9 +201,9 @@ scheduler.templates.event_text = function(start, end, event){ ~~~xml - - 04/11/2013 14:00 - 04/11/2013 17:00 + + 04/11/2027 14:00 + 04/11/2027 17:00 327 @@ -210,6 +211,7 @@ scheduler.templates.event_text = function(start, end, event){ ~~~ #### iCal + 请注意，在客户端，属性名（除了 DTSTART、DTEND 和 SUMMARY 之外）会从大写转换为小写:ROOM 会变为 room，HOLDER 会变为 holder。 ~~~html @@ -218,11 +220,11 @@ VERSION:2.0 PRODID:-//dhtmlXScheduler//NONSGML v2.2//EN DESCRIPTION: BEGIN:VEVENT -DTSTART:20130411T140000 -DTEND:20130411T170000 -SUMMARY:Meeting +DTSTART:20270411T140000 +DTEND:20270411T170000 +SUMMARY:会议 ROOM:327 HOLDER:James END:VEVENT END:VCALENDAR -~~~ +~~~ \ No newline at end of file diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/datastore-integration.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/datastore-integration.md deleted file mode 100644 index 55774a76..00000000 --- a/i18n/zh/docusaurus-plugin-content-docs/current/guides/datastore-integration.md +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: "与 dhtmlxDataStore 的集成" -sidebar_label: "与 dhtmlxDataStore 的集成" ---- - -# 与 dhtmlxDataStore 的集成 - -本文介绍如何使用 [dhtmlXDataStore](https://docs.dhtmlx.com/datastore__index.html) 对象来同步[多个调度器](guides/multiple-per-page.md)。这些调度器都从同一个数据存储获取数据，因此在一个调度器中更改的事件会自动更新到其他调度器中。 - -:::note -温馨提示:dhtmlxDataStore 是 [dhtmlxSuite5](https://dhtmlx.com/docs/products/dhtmlxSuite5/) 套件的一部分，并不包含在 dhtmlxScheduler 中。不过，即使没有 dhtmlxSuite 许可证，您依然可以免费将 dhtmlxDataStore 与 dhtmlxScheduler 一起使用。请按照下方步骤在您的应用中进行设置。 -::: - -- [下载 dhtmlxDataStore 包](https://files.dhtmlx.com/30d/33230caa09f4b5030ea5bfe374ef6d57/dhtmlxDataStore.zip) -- 在页面加载 dhtmlxscheduler.js 之后，添加 *dhtmlxcommon.js* 和 *datastore.js*。请确保加载顺序如下: - -~~~js - - - -~~~ - -通过 DataStore 同步调度器的典型方式如下: - -~~~js -function init() { - var data = new dhtmlXDataStore({ - url:"data/data.json", - scheme:{ - $init:function(obj){ - if (typeof obj.start_date == "string"){ - obj.start_date = scheduler.templates.parse_date(obj.start_date); - obj.end_date = scheduler.templates.parse_date(obj.end_date); - } - } - } - }); - - scheduler1 = Scheduler.getSchedulerInstance(); - scheduler1.init('scheduler_here',new Date(2019,05,12),"week"); - scheduler1.sync(data, { copy:true }); - - - scheduler2 = Scheduler.getSchedulerInstance(); - scheduler2.init('scheduler_here_too',new Date(2019,05,12),"month"); - scheduler2.sync(data, { copy:true }); -} -~~~ - -上述代码的主要流程如下: - -1. 首先，按照常规方式初始化 dhtmlXDataStore（详情可参考 [Initialization](https://docs.dhtmlx.com/datastore__initialization.html) 和 [Data scheme](https://docs.dhtmlx.com/datastore__data_scheme.html) 章节，以及 [dhtmlXDataStore 文档](https://docs.dhtmlx.com/datastore__index.html)）。 -2. 然后，创建两个调度器。与普通用法类似，不同之处在于我们使用 [sync](https://docs.dhtmlx.com/api__datastore_sync.html) 方法将它们连接到 DataStore。 - -[sync](https://docs.dhtmlx.com/api__datastore_sync.html) 方法用于将调度器与 DataStore 关联，它接受两个参数: - -+ **data** - （必填）为调度器提供数据的 dhtmlXDataStore 实例。 -+ **(copy:true)** - （必填）指示调度器创建 DataStore 数据的副本。 - -第二个参数需要特别注意，因为它是 dhtmlxScheduler 特有的，在主 dhtmlXDataStore 文档中没有介绍。 - -此选项指示 DataStore 为每个调度器创建独立的数据副本。因此，在上面的例子中，_DataStore_、_scheduler1_ 和 _scheduler2_ 都各自维护着自己的数据集。但您无需手动同步这些数据集--这一切都会自动完成。当您在某个调度器中做出更改时，更新会传递到 DataStore，进而同步到其他调度器的数据集中。 - -您可能会疑惑，如果最终效果看起来一样，为什么还需要这个额外的步骤？ - -原因如下:除了主要的事件属性之外，每个事件还包含一系列由 Scheduler 在运行时分配的内部属性。这些内部属性会根据当前选择的视图而变化。例如，如果同一事件在两个调度器中都被打开，但显示在不同的视图中，这些内部属性的值可能会不同步，导致事件显示异常。 - -此时，使用参数（**(copy:true)**）可以避免此类问题，确保数据正确处理。此外，数据副本在其他场景下也很有用。 - -例如，如果页面上有两个调度器显示相同事件，但位于不同时区（如莫斯科和伦敦），共用同一数据集就不合适。为每个调度器维护独立的数据集，可以确保在两个时区都能正确显示事件。 - - -[Integration with dhtmlXDataStore](https://docs.dhtmlx.com/scheduler/samples/10_integration/04_datastore.html) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/date-formats.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/date-formats.md index 57d70569..25a2b5ae 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/guides/date-formats.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/date-formats.md @@ -5,61 +5,61 @@ sidebar_label: "日期操作" # 日期操作 -该库包含 [date](api/other/date.md) 对象，提供了多种日期格式化方法。 +本库包含 [date](api/other/date.md) 对象，提供一组日期格式化方法。 -本文介绍了一些最重要且常用的方法。完整的方法列表可参见 [date object page](api/other/date.md)。 +在本文中，我们将重点介绍一些特别重要且常用的方法。完整的方法列表可以在 [date 对象页面](api/other/date.md) 找到。 ## 将 Date 对象转换为字符串 -要将 Date 对象转换为字符串，可使用 [date_to_str](api/other/date.md) 方法: +要将 Date 对象转换为字符串，请使用 [date_to_str](api/other/date.md) 方法： - -*该方法返回一个函数，根据指定的格式模式将 Date 对象格式化为字符串:* + +*该方法返回一个将 Date 对象转换为指定格式字符串的函数：* ~~~js -var formatFunc = scheduler.date.date_to_str("%d/%m/%Y"); -var date = formatFunc(new Date(2013, 05, 29)); // -> "29/06/2013" +const formatFunc = scheduler.date.date_to_str("%d/%m/%Y"); +const date = formatFunc(new Date(2027, 05, 29)); // -> "29/06/2027" ~~~ - -[Displaying several weeks in Week view](https://docs.dhtmlx.com/scheduler/samples/11_scales/03_two_work_weeks.html) - +[在周视图中显示多周](https://docs.dhtmlx.com/scheduler/samples/11_scales/03_two_work_weeks.html) ## 将字符串转换为 Date 对象 -要将字符串转换为 Date 对象，可使用 [str_to_date](api/other/date.md) 方法: +要将字符串转换为 Date 对象，请使用 [str_to_date](api/other/date.md) 方法： + +*该方法返回一个将指定格式的字符串转换为 Date 对象的函数：* -*该方法提供一个函数，按指定的格式解析字符串并返回 Date 对象:* - -你可以像这样创建一个日期解析函数: +你可以按以下方式生成日期转换函数： ~~~js -var formatFunc = scheduler.date.str_to_date("%d/%m/%Y"); -var date = formatFunc("29/06/2019"); // -> 2019年6月29日 00:00:00 +const formatFunc = scheduler.date.str_to_date("%d/%m/%Y"); +const date = formatFunc("29/06/2027"); // -> 29 June, 2027 00:00:00 ~~~ + ## 转换为 UTC -要将本地日期和时间转换为 UTC，可使用 [convert_to_utc](api/other/date.md) 方法: +要将本地时间转换为 UTC，请使用 [convert_to_utc](api/other/date.md) 方法： ~~~js -//2019年6月29日 14:00（本地时间）-> 2019年6月29日 12:00（UTC） -var time = scheduler.date.convert_to_utc(new Date(2019, 05, 29, 14, 00)); +//29 June, 2027 14:00 (local time) -> 29 June, 2027 12:00 (utc) +const time = scheduler.date.convert_to_utc(new Date(2027, 05, 29, 14, 00)); ~~~ -## 为日期添加（或减少）时间间隔 -要为指定日期添加或减少时间间隔，可使用 [add](api/other/date.md) 方法: +## 向日期添加（或减少）时间间隔 + +要向指定日期添加（或减少）时间间隔，请使用 [add](api/other/date.md) 方法： ~~~js -//为指定日期添加1年：2019年6月29日 -> 2020年6月29日 -var newDate = scheduler.date.add(new Date(2019, 05, 29), 1, 'year'); +//为指定日期添加1年：2027年6月29日 -> 2028年6月29日 +const newDate = scheduler.date.add(new Date(2027, 05, 29), 1, 'year'); ~~~ -[Changing the Y-Axis step](https://docs.dhtmlx.com/scheduler/samples/02_customization/09_timestep.html) +[更改 Y 轴步长](https://docs.dhtmlx.com/scheduler/samples/02_customization/09_timestep.html) :::note -如需完整的日期格式化方法列表，请参见 [here](api/other/date.md)。 -::: +完整的日期格式化方法列表，请参见 [此处](api/other/date.md)。 +::: \ No newline at end of file diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/dhtmlx-components-integration.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/dhtmlx-components-integration.md deleted file mode 100644 index d6b5a3f9..00000000 --- a/i18n/zh/docusaurus-plugin-content-docs/current/guides/dhtmlx-components-integration.md +++ /dev/null @@ -1,129 +0,0 @@ ---- -title: "拖放操作" -sidebar_label: "拖放操作" ---- - -# 拖放操作 - -本库包含 **outerdrag** 扩展，使您可以通过从外部 DHTMLX 组件或其他调度器拖动元素来创建新事件。 - -## 从外部组件拖拽 {#draggingfromexternalcomponents} - -当从外部来源拖动元素到调度器时，调度器会自动打开 lightbox 以创建新事件。 - - -![external_dnd](/img/external_dnd.png) - - -[Integration with dhtmlxTree](https://docs.dhtmlx.com/scheduler/samples/10_integration/02_dhtmlxtree_outer_drag.html) - - -以下是 dhtmlxTree 组件与外部拖放的工作方式。 - -要将调度器与 dhtmlxTree 集成，请按照以下步骤操作: - -1. 下载 dhtmlxTree 包，并将其内容解压到应用根目录。 -2. 在页面中引入所需的 js 和 css 文件: -~~~html - - -... -~~~ -3. 启用 outerdrag 扩展: -~~~js -scheduler.plugins({ - outerdrag: true -}); -~~~ -4. 初始化 dhtmlxTree 组件（参见 此处）: -~~~js -var tree = new dhtmlXTreeObject("treebox", "100%", "100%", 0); -tree.setImagePath("../common/dhtmlxTree/imgs/csh_yellowbooks/"); -tree.loadXML("./data/tree.xml"); -~~~ -5. 在 dhtmlxTree 组件中启用拖放（说明见 此处）: -~~~js -tree.enableDragAndDrop(true); -~~~ -6. 初始化并配置调度器: -~~~js -... -scheduler.init('scheduler_here', new Date(2019, 5, 30), "timeline"); -~~~ -7. 为 [onExternalDragIn](api/event/onexternaldragin.md) 事件绑定处理函数，以定义如何将拖拽元素的文本赋值给事件: -~~~js -scheduler.attachEvent("onExternalDragIn", function(id, source, event){ - var label = tree.getItemText(tree._dragged[0].id); - scheduler.getEvent(id).text = label; - return true; -}); -~~~ - - -[Integration with dhtmlxTree](https://docs.dhtmlx.com/scheduler/samples/10_integration/02_dhtmlxtree_outer_drag.html) - - -完成上述设置后，您只需拖拽所需节点即可轻松通过树的数据创建新事件。 - -## 调度器间的拖放 {#draganddropbetweenschedulers} - -:::note -此功能仅适用于 Commercial（自 2021 年 10 月 6 日起）、Enterprise 和 Ultimate 许可证版本。 -::: - -当在页面上显示[多个调度器](guides/multiple-per-page.md)时，可以启用它们之间的拖放，实现事件在不同调度器之间的无缝移动。 - -要启用调度器间的拖放支持，请引入 "**drag_between**" 扩展: - -~~~js title="Enabling drag-and-drop support for several schedulers" - - - - -~~~ - -您可以在 [Scheduler PRO package](https://dhtmlx.com/docs/products/dhtmlxScheduler/) 中的 **"samples/20_multiple/06_drag_between_layout.html"** 示例中找到相关代码。 - -### 限制事件拖出/拖入调度器 -如需禁止事件从某个调度器中拖出，请将 [drag_out](api/config/drag_out.md) 属性设置为 *false*: - -~~~js -scheduler.config.drag_out = false; // 禁止事件从该调度器拖出 /*!*/ -scheduler.init('scheduler_here',new Date(2019, 5,30),"week"); -scheduler.load("./data/units.xml"); - -scheduler2 = Scheduler.getSchedulerInstance(); -scheduler2.init('scheduler_here_2',new Date(2019, 5, 30),"week"); -~~~ - - -如需禁止事件被拖入某个调度器，请将 [drag_in](api/config/drag_in.md) 属性设置为 *false*: - -~~~js -scheduler.init('scheduler_here',new Date(2019, 5, 30),"week"); -scheduler.load("./data/units.xml"); - -scheduler2.config.drag_in = false; // 禁止事件被拖入该调度器 /*!*/ -scheduler2 = Scheduler.getSchedulerInstance(); -scheduler2.init('scheduler_here_2',new Date(2019, 5, 30),"week"); -~~~ - -**"samples/20_multiple/06_drag_between_layout.html"** 示例可在 [Scheduler PRO package](https://dhtmlx.com/docs/products/dhtmlxScheduler/) 中获取。 - -### 拖放事件 - -- [onBeforeEventDragOut](api/event/onbeforeeventdragout.md) - 在事件被拖出调度器前触发 -- [onEventDragOut](api/event/oneventdragout.md) - 当事件被拖出调度器时触发 -- [onBeforeEventDragIn](api/event/onbeforeeventdragin.md) - 在拖拽事件进入调度器前触发 -- [onEventDragIn](api/event/oneventdragin.md) - 当拖拽事件移动到调度器上方时触发 -- [onEventDropOut](api/event/oneventdropout.md) - 当拖拽事件被放置到调度器区域外时触发 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/dhxlayout-integration.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/dhxlayout-integration.md deleted file mode 100644 index 4cee069f..00000000 --- a/i18n/zh/docusaurus-plugin-content-docs/current/guides/dhxlayout-integration.md +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: "与 dhtmlxLayout 集成" -sidebar_label: "与 dhtmlxLayout 集成" ---- - -# 与 dhtmlxLayout 集成 - -使用 dhtmlxLayout 是在页面上组织[多个调度器](guides/multiple-per-page.md)的便捷方式。它不仅提供了美观的框架，还能帮助管理与页面其他元素的交互，并能顺畅适应页面尺寸的变化。 - -:::note -请注意，dhtmlxLayout 并不包含在 dhtmlxScheduler 库中。根据您使用的 dhtmlxSuite 版本，Layout 有两个不同的版本可供选择。 -::: - -## dhtmlxSuite v5+ - -在该版本中，dhtmlxLayout 可以作为独立产品或 dhtmlxSuite 库的一部分使用。要在项目中引入 dhtmlxLayout v5.X，您需要[购买许可证](https://dhtmlx.com/docs/products/dhtmlxSuite5/)。 - -**要将 dhtmlxScheduler 实例添加到 layout 单元格中**，请使用 [attachScheduler()](https://docs.dhtmlx.com/api__dhtmlxcell_attachscheduler.html) 方法。 - -**注意**，将调度器附加到单元格会自动初始化它。因此，请在插入到 layout 之前完成调度器的相关配置。 - -~~~js -function init() { - var dhxLayout = new dhtmlXLayoutObject(document.body, "2U"); - - sched1 = Scheduler.getSchedulerInstance(); - sched1.config.multi_day = true; - dhxLayout.cells("a").attachScheduler(new Date(2019,05,30),"week",null,sched1); - sched1.load("/data/units") - - sched2 = Scheduler.getSchedulerInstance(); - dhxLayout.cells("b").attachScheduler(new Date(2019,05,30),"month",null,sched2); - sched2.load("/data/units") -} -~~~ - - -[Integration with dhtmlxLayout (dhx_terrace skin, Suite v5.1)](https://docs.dhtmlx.com/scheduler/samples/10_integration/05_dhtmlxlayout_terrace.html) - - -## dhtmlxSuite v6+ - -从 dhtmlxSuite 6.0 开始，dhtmlxLayout 仅作为完整 Suite 库的一部分提供。若要以此方式使用，需获取 [Suite 6.X 库](https://dhtmlx.com/docs/products/dhtmlxSuite/#licensing)的许可证。 - -自 [版本 5.3](guides/what-s-new.md#53) 起，dhtmlxScheduler 实现了与 dhtmlxSuite v6+ 兼容的通用 View 接口，并且可以[直接附加到任意单元格](https://docs.dhtmlx.com/suite/layout/api/cell/layout_cell_attach_method/): - -~~~js -// 创建并配置 scheduler 实例 -scheduler.config.header = [ - "day", - "week", - "month", - "date", - "prev", - "today", - "next" -]; -scheduler.config.multi_day = true; - -// scheduler 附加后，将触发 onSchedulerReady 事件 -scheduler.attachEvent("onSchedulerReady", function () { - requestAnimationFrame(function(){ - // 此处可设置初始视图和日期，并加载数据 - scheduler.setCurrentView(new Date(2017,5,3), "week"); - scheduler.load("../common/events.json"); - }); - -}); - -const layout = new dhx.Layout("layout", { - rows: [{ - id: "scheduler-cell", - header: "Appointment Scheduler", - html:"
" - }] -}); -layout.cell("scheduler-cell").attach(scheduler); -~~~ - -### 注意事项 - -- 请注意，`dhtmlxSuite Layout` 以异步方式运行，因此在调用 `.attach` 后调度器不会立即可用。 -- 需要监听 "onSchedulerReady" 事件，以便执行任何初始化后的操作。 -- 目前，**在 dhtmlxSuite v6+ 中使用调度器时无法指定调度器的标记（markup）**。因此，导航面板的控件必须通过 [header](api/config/header.md) 进行配置。 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/drag-between.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/drag-between.md new file mode 100644 index 00000000..ede61261 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/drag-between.md @@ -0,0 +1,69 @@ +--- +title: "多个调度器之间的拖放" +sidebar_label: "多个调度器之间的拖放" +--- + +# 在多个调度器之间拖放 + +:::info +该功能仅在 Commercial（自 2021 年 10 月 6 日起）、Enterprise 及 Ultimate 许可证下可用。 +::: + +如果在同一页面显示 [多个调度器](guides/multiple-per-page.md)，你可以启用它们之间的拖放操作，使用户能够在一个调度器和另一个调度器之间拖动事件，反之亦然。 + +要为调度器启用拖放支持，请在页面中包含 "**drag_between**" 扩展: + +[Enabling drag-and-drop support for several schedulers](Enabling drag-and-drop support for several schedulers) + +~~~html + + + + +~~~ + +示例 **"samples/20_multiple/06_drag_between_layout.html"** 由 [Scheduler PRO 包](https://dhtmlx.com/docs/products/dhtmlxScheduler/) 提供。 + +### Denying dragging events to\/from one of schedulers +要拒绝从某个调度器拖出事件，请将 [drag_out](api/config/drag_out.md) 属性设置为 *false*： + +~~~js +scheduler.config.drag_out = false;//restrict dragging events from this scheduler /*!*/ +scheduler.init('scheduler_here',new Date(2027, 5,30),"week"); +scheduler.load("./data/units.xml"); + +scheduler2 = Scheduler.getSchedulerInstance(); +scheduler2.init('scheduler_here_2',new Date(2027, 5, 30),"week"); +~~~ + +要拒绝将事件拖入某个调度器，请将 [drag_in](api/config/drag_in.md) 属性设置为 *false*： + +~~~js +scheduler.init('scheduler_here',new Date(2027, 5, 30),"week"); +scheduler.load("./data/units.xml"); + + +scheduler2.config.drag_in = false;//restrict dragging events to this scheduler /*!*/ +scheduler2 = Scheduler.getSchedulerInstance(); +scheduler2.init('scheduler_here_2',new Date(2027, 5, 30),"week"); +~~~ + +示例 **"samples/20_multiple/06_drag_between_layout.html"** 由 [Scheduler PRO 包](https://dhtmlx.com/docs/products/dhtmlxScheduler/) 提供。 + +### Drag events + +- [onBeforeEventDragOut](api/event/onbeforeeventdragout.md) - 在拖拽的事件被移出调度器之前触发 +- [onEventDragOut](api/event/oneventdragout.md) - 当拖拽的事件被移出调度器时触发 +- [onBeforeEventDragIn](api/event/onbeforeeventdragin.md) - 在拖拽的事件被移动到调度器上方之前触发 +- [onEventDragIn](api/event/oneventdragin.md) - 当拖拽的事件被移动到调度器上方时触发 +- [onEventDropOut](api/event/oneventdropout.md) - 当拖拽的事件被放置在调度器区域之外时触发 \ No newline at end of file diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/event-object-operations.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/event-object-operations.md index e94b90e3..f51088ea 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/guides/event-object-operations.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/event-object-operations.md @@ -7,43 +7,43 @@ sidebar_label: "事件对象操作" ## 获取事件对象 -要获取事件对象，请使用 [getEvent](api/method/getevent.md) 方法: +要获取事件对象，请使用 [getEvent](api/method/getevent.md) 方法： ~~~js scheduler.parse([ - {id:1, start_date:"2019-05-13 6:00", end_date:"2019-05-13 8:00", text:"Event 1"}, - {id:2, start_date:"2019-06-09 6:00", end_date:"2019-06-09 8:00", text:"Event 2"} + {id:1, start_date:"2027-05-13 6:00", end_date:"2027-05-13 8:00", text:"Event 1"}, + {id:2, start_date:"2027-06-09 6:00", end_date:"2027-06-09 8:00", text:"Event 2"} ]); ... -var eventObj = scheduler.getEvent(1); -//->{id:1, start_date:"2019-05-13 6:00", end_date:"2019-05-13 8:00", text:"Event 1"} +const eventObj = scheduler.getEvent(1); +//->{id:1, start_date:"2027-05-13 6:00", end_date:"2027-05-13 8:00", text:"Event 1"} ~~~ -## 获取指定时间段内的事件 +## 根据指定时间段获取事件集合 -要获取在某一时间段内发生的事件列表，请使用 [getEvents](api/method/getevents.md) 方法: +要获取在指定时间段内发生的事件集合，请使用 [getEvents](api/method/getevents.md) 方法： ~~~js -var evs = scheduler.getEvents(new Date(2019,1,10),new Date(2019,2,10)); +const evs = scheduler.getEvents(new Date(2027,1,10),new Date(2027,2,10)); //其中 evs 是事件对象的数组 ~~~ -## 获取调度器中的所有事件 +## 获取调度器的所有事件 -要获取当前加载到调度器中的所有事件，可以如下调用 [getEvents](api/method/getevents.md) 方法，不传递任何参数: +要获取加载到调度器中的所有事件，请按如下方式调用 [getEvents](api/method/getevents.md) 方法，不带参数： ~~~js -var evs = scheduler.getEvents(); +const evs = scheduler.getEvents(); // 返回所有事件，形式为对象数组 ~~~ -## 从当前日期获取下一个事件 +## 从当前日期开始获取下一个事件 ~~~js -var evs = scheduler.getEvents(new Date(), new Date(9999,1,1)); +const evs = scheduler.getEvents(new Date(), new Date(9999,1,1)); //evs - 所有即将到来的事件列表 evs.sort(function(a,b){ return (a.start_date > b.start_date ? 1 : -1); }); -//evs[0] - 最近的即将到来的事件 +//evs[0] - 最近的即将到来事件 ~~~ ## 获取事件的 id @@ -52,47 +52,49 @@ evs.sort(function(a,b){ return (a.start_date > b.start_date ? 1 : -1); }); ~~~js title="Getting the event's id by the event's text" scheduler.parse([ - {id:1, start_date:"2019-05-13 6:00", end_date:"2019-05-13 8:00", text:"Event 1"}, - {id:2, start_date:"2019-06-09 6:00", end_date:"2019-06-09 8:00", text:"Event 2"} + {id:1, start_date:"2027-05-13 6:00", end_date:"2027-05-13 8:00", text:"Event 1"}, + {id:2, start_date:"2027-06-09 6:00", end_date:"2027-06-09 8:00", text:"Event 2"} ]); ... -var evs = scheduler.getEvents(); //获取调度器中的所有事件 -for(var i="0;i 2 }; ~~~ -如果已知事件的大致时间，建议在获取事件时限定时间范围，以提升性能: + 如果你大致知道所需事件的大致时间，最好对返回的事件集合进行限制，以提高应用速度： ~~~js -var evs = scheduler.getEvents(new Date(2019,05,01),new Date(2019,05,10)); -for(var i="0;i 2 + const eventId = evs[i].id;// -> 2 }; ~~~ + ## 更改事件的 id -要更新事件的 id，可以使用 [changeEventId](api/method/changeeventid.md) 方法，示例如下: +要更改事件当前的 id，可以使用 [changeEventId](api/method/changeeventid.md) 方法，如下所示： ~~~js -scheduler.changeEventId("ev15", "ev25"); //将事件 id 从 "ev15" 更改为 "ev25" +scheduler.changeEventId("ev15", "ev25"); //changes the event id "ev15" -> "ev25" ~~~ -## 将 lightbox 选项的标签作为事件文本 -默认情况下，Scheduler 事件的文本是从 lightbox 中映射的 text 字段设置的。 +## 将 lightbox 选项的标签设置为事件文本 + +默认情况下，调度器事件的文本是通过灯箱（lightbox）中的映射文本字段设置的。 ![default_event_text](/img/default_event_text.png) -你也可以覆盖此默认行为，使用下拉选项中所选项的 label 作为事件文本。 +也可以重新定义默认行为，使在组合框中所选选项的标签作为事件的文本。 ![option_event_text](/img/option_event_text.png) -事件文本由以下模板之一决定:[event_text](api/template/event_text.md) 或 [event_bar_text](api/template/event_bar_text.md)，具体取决于视图类型。要自定义事件文本的生成方式，你应重定义相应的模板。 +事件的文本由以下模板之一来指定：[event_text](api/template/event_text.md) 或 [event_bar_text](api/template/event_bar_text.md)，具体取决于视图的类型。因此，要改变向事件添加文本的方式，你应重新定义相应的模板。 ~~~js scheduler.config.lightbox.sections = [ @@ -107,9 +109,9 @@ scheduler.config.lightbox.sections = [ ]; scheduler.templates.event_text = scheduler.templates.event_bar_text = function(start, end, event){ - var options = scheduler.serverList("options"); + const options = scheduler.serverList("options"); - for(var i = 0; i < options.length; i++){ + for(let i = 0; i < options.length; i++){ if(options[i].key == event.type){ return options[i].label; } @@ -119,10 +121,10 @@ scheduler.templates.event_text = scheduler.templates.event_bar_text = function(s }; ~~~ -关于上述代码，有几点需要注意: +关于上述代码，有若干注意事项： -- [serverList](api/method/serverlist.md) 方法为下拉框提供选项，并在模板中获取。它也可用于通过 connector 与其他数据一起加载选项，并支持动态更新选项。 +- [serverList](api/method/serverlist.md) 方法用于为组合框提供选项并在模板内检索它们。你可以通过 JSON 集合将选项与事件数据一起加载（见 [Data formats](guides/data-formats.md#json-with-collections)）并稍后使用 [updateCollection](api/method/updatecollection.md) 更新它们。 -- 模板通过线性查找方式查找被选中的项。如果事件或选项数量较大，由于模板可能会被频繁调用，这种方式可能影响性能。为提升效率，建议使用哈希表进行更快的查找，而不是每次遍历数组。 +- 模板内部有对所选项的线性搜索。在某些情况下，当你有大量事件/选项时，可能会对性能产生明显影响，因为这些模板会被频繁调用。为解决此问题，你可以为快速搜索创建一个哈希表，而不是不停地遍历数组。 -- 客户端需要有完整的选项列表才能正确显示。如果没有，必须手动加载选项，例如在使用自动补全搜索并动态获取选项时。 +- 客户端应具备完整的选项列表以进行展示。否则，你需要手动加载选项，例如如果你使用自动完成的搜索功能，它会动态地拉取所需的选项。 \ No newline at end of file diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/excel.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/excel.md deleted file mode 100644 index d614bf25..00000000 --- a/i18n/zh/docusaurus-plugin-content-docs/current/guides/excel.md +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: "导出为 Excel 和 iCal" -sidebar_label: "导出为 Excel 和 iCal" ---- - -# 导出为 Excel 和 iCal - -从 4.2 版本开始，dhtmlxScheduler 支持将所有调度器数据导出为 Excel 和 iCal 格式。 - -## 请求大小限制 - -有一个共享的 API 端点 **https://export.dhtmlx.com/scheduler**，用于多种导出方法（如 *exportToPDF*、*exportToPNG* 等）。**最大请求大小为 10 MB**。 - - -## 导出为 Excel - -要将调度器数据导出为 Excel 文件，请按照以下步骤操作: - -1. 在页面中添加 "https://export.dhtmlx.com/scheduler/api.js" 脚本以启用在线导出服务: -~~~html - - /*!*/ - -~~~ -2. 使用 exportToExcel 方法导出调度器数据: -~~~html -/*!*/ - - -~~~ - - -#### 导出方法的参数 - -**exportToExcel()** 方法可以接受一个可选对象，包含以下属性: - - - - - - - - - - - - - - - - - - - - - - - - -
name(string) 输出文件名，需带有 '.xlsx' 扩展名
columns(array) 配置导出表格中的列
  • 'id' - (string/number) 映射到该列的事件属性 ID
  • 'header' - (string) 列标题文本
  • 'width' - (number) 列宽度（像素）
server(string) 指定导出请求的 API 端点。可以指向本地安装的导出服务。默认值为 https://export.dhtmlx.com/scheduler
start(string|object) 设置要导出的数据起始日期
end(string|object) 设置要导出的数据结束日期
- - -~~~js title="调用导出方法并传入可选属性" -scheduler.exportToExcel({ - name:"My document.xls", - columns:[ - { id:"text", header:"Title", width:150 }, - { id:"start_date", header:"Start date", width:250 } - ], - server:"https://myapp.com/myexport/scheduler", - start: new Date(1999, 01, 01), - end: new Date(2022, 01, 01) -}); -~~~ - -#### 设置日期格式 - -如需控制导出的 Excel 文件中日期的显示方式，可以这样设置 **xml_format** 模板: - -~~~js -scheduler.templates.xml_format = scheduler.date.date_to_str("%Y-%m-%d %H:%i"); -~~~ - -**Related sample** [Setting date format](https://snippet.dhtmlx.com/5/6d3de8fa2) - -关于日期格式的更多细节，请参阅[此处](guides/settings-format.md)的说明。 - -## 导出为 iCal - -要将调度器数据导出为 iCal 字符串，请按照以下步骤操作: - -- 引入 "https://export.dhtmlx.com/scheduler/api.js" 脚本以启用在线导出服务: - -~~~html - - /*!*/ - -~~~ - -- 使用 exportToICal 方法导出调度器数据: - -~~~html -/*!*/ - - -~~~ - - -#### 导出方法的参数 - -**exportToICal()** 方法可以接受一个可选对象，包含如下属性: - - - - - - - - -
server(string) 指定导出请求的 API 端点。可以设置为本地部署的导出服务。默认值为 https://export.dhtmlx.com/scheduler
- - -~~~js title="调用导出方法并传入可选属性" -scheduler.exportToICal({ - server:"https://myapp.com/myexport/scheduler" -}); -~~~ diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/export.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/export.md deleted file mode 100644 index 4210d9bd..00000000 --- a/i18n/zh/docusaurus-plugin-content-docs/current/guides/export.md +++ /dev/null @@ -1,175 +0,0 @@ ---- -title: "数据序列化为 XML、JSON、iCal" -sidebar_label: "数据序列化为 XML、JSON、iCal" ---- - -# 数据序列化为 XML、JSON、iCal - -## 准备工作 - -要启用此功能，只需激活 **serialize** 扩展。 - -~~~js -scheduler.plugins({ - serialize: true -}); -~~~ - -## 导出为 XML - -要将调度器数据转换为 XML 字符串，请使用 [toXML](api/method/toxml.md) 方法: - -~~~js -var xml = scheduler.toXML(); //xml string -~~~ - - -[Serialize scheduler events](https://docs.dhtmlx.com/scheduler/samples/04_export/01_serialize_data.html) - - -## 导出为 JSON - -要将调度器数据转换为 JSON 字符串，请使用 [toJSON](api/method/tojson.md) 方法: - -~~~js -var json_string = scheduler.toJSON(); //json string -~~~ - -:::note -请注意，此方法返回的是 JSON 字符串，而不是 JavaScript 对象。如果你需要 JSON 对象，请改用 [getEvents](api/method/getevents.md) 方法。 -::: - - -[Serialize scheduler events](https://docs.dhtmlx.com/scheduler/samples/04_export/01_serialize_data.html) - - -## 导出为 iCal - -要将调度器数据转换为 iCal 字符串，请使用 [toICal](api/method/toical.md) 方法: - -~~~js -var ical_string = scheduler.toICal(); //ical string -~~~ - -此外，还提供了一个[用于 iCal 导入导出操作的外部脚本](guides/ical-export-import.md) - - -[Serialize scheduler events](https://docs.dhtmlx.com/scheduler/samples/04_export/01_serialize_data.html) - - -## 序列化时的属性 - -:::note -此方法不适用于 iCal 格式。 -::: - -默认情况下，导出仅包含标准属性（属性）: - -1. id -2. text -3. start_date（*序列化格式由 [date_format](api/config/date_format.md) 属性控制*） -4. end_date - -要包含自定义属性，可以重写 **data_attributes** 方法。一个简单的示例如下: - -~~~js -scheduler.data_attributes = function(){ - return [ - ["id"],["text"],["date_start"],["date_end"], - ["custom_attribute"] - ]; -}; -~~~ - -本质上，该方法返回属性名称列表。 - -你还可以指定格式化函数，在序列化前处理属性数据。 - -这对于在添加到 XML 前需要格式化的日期非常有用。 - -~~~js -scheduler.data_attributes = function(){ - return [ - ["id"], - ["text"], - ["start_date",scheduler.templates.format_date], - ["end_date",scheduler.templates.format_date]]; -} -~~~ - -## 序列化重复事件 - -:::note -该技术同样不适用于 iCal 格式。 -::: - -如果使用了 "recurring" 扩展，则需要定义与重复事件相关的其他属性: - -~~~js -scheduler.data_attributes = function(){ - var empty = function(a){ return a||""; } - return [["id"], - ["text"], - ["start_date",scheduler.templates.xml_format], - ["end_date",scheduler.templates.xml_format], - ["rec_type",empty], - ["event_length",empty], - ["event_pid",empty]]; -} -~~~ - -## 将数据保存为 XML 文件 - -序列化使得可以简单地通过将数据存储到 XML 文件中来保存数据，而无需数据库。 - -- 首先，启用 **serialize** 扩展: - -~~~js -scheduler.plugins({ - serialize: true -}); -~~~ - -- 然后，在页面中添加一个隐藏表单用于保存数据: - -~~~xml -
- -
-~~~ - -- 在页面上添加一个"保存"按钮 - -~~~html - -~~~ - -~~~js -function save(){ - var form = document.getElementById("xml_form"); - form.elements.data.value = scheduler.toXML(); - form.submit(); -} -~~~ - -- 在服务器端，将数据写入已有文件。xml_writer.php 可以如下: - -~~~php - -~~~ - -一个空的 data.xml 文件如下: - -~~~xml - -~~~ - -通过这种设置，调度器可以从 data.xml 加载事件，点击"保存"按钮会将当前调度器状态序列化为 XML 并保存回文件。 - -这样，下次加载调度器时，将显示之前保存的事件。 - -## 故障排查 - -如果你发现保存时数据被意外转义，请检查 PHP 配置中的 "magic_quotes" 是否已关闭。 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/extensions-list.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/extensions-list.md index f5ccc069..572216c6 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/guides/extensions-list.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/extensions-list.md @@ -1,23 +1,23 @@ ---- -title: "扩展功能完整列表" -sidebar_label: "扩展功能完整列表" +--- +title: "全部扩展列表" +sidebar_label: "全部扩展列表" --- -# 扩展功能完整列表 +# 全部扩展列表 -dhtmlxScheduler 提供多种扩展功能，以增强默认功能。 +dhtmlxScheduler 包含若干扩展，为标准行为添加额外功能。 -要启用扩展，请通过 [scheduler.plugins](api/method/plugins.md) 方法激活。 +要使用扩展，请通过 [`plugins()`](api/method/plugins.md) 方法激活它。 :::info -从 v6.0 开始，扩展代码文件已从 **ext** 文件夹中移除，并合并进 *dhtmlxscheduler.js* 文件。 +在 v6.0 版本中，扩展代码文件已从调度器代码库的 **ext** 文件夹中移除，并合并到 *dhtmlxscheduler.js* 文件中。 -如果你使用的是 dhtmlxScheduler 5.3 或更早版本，请参考 [迁移指南](migration.md#53---60)。 +如果你使用的是 dhtmlxScheduler 5.3 及更早版本，请查阅 [迁移文章](migration.md#53---60)。 ::: -## Active Links {#activelinks} +## Active Links -在"月视图"和"周视图"中，将日期数字显示为可点击链接，点击后可打开所选视图中的对应日期。 +将 Month（月视图）和 Week（周视图）中的日期数字显示为可点击的链接，点击后在指定的视图中打开相关日期。 ~~~js scheduler.plugins({ @@ -27,18 +27,15 @@ scheduler.plugins({ #### 相关资源 -文章:[月视图](views/month.md#presentingdaysnumbersasclickablelinks) - - -API: [active_link_view](api/config/active_link_view.md) +文章: [Month View](views/month.md) +API: [active_link_view](api/config/active_link_view.md) -[Month days as links](https://docs.dhtmlx.com/scheduler/samples/03_extensions/06_links_plugin.html) +示例: [Month days as links](https://docs.dhtmlx.com/scheduler/samples/03_extensions/06_links_plugin.html) +## Agenda View -## Agenda View {#agenda-view} - -这是 Agenda 视图的代码文件。 +Agenda 视图的代码文件。 ~~~js scheduler.plugins({ @@ -48,15 +45,13 @@ scheduler.plugins({ #### 相关资源 -文章:[아젠다 뷰](views/agenda.md) - +文章: [Agenda View](views/agenda.md) -[Agenda view](https://docs.dhtmlx.com/scheduler/samples/03_extensions/03_agenda_view.html) +示例: [Agenda view](https://docs.dhtmlx.com/scheduler/samples/03_extensions/03_agenda_view.html) +## All Timed -## All Timed {#all-timed} - -将多天事件以与单天事件相同的样式显示。 +以常规方式显示多日事件（如同将多天事件显示为单日事件）。 ~~~js scheduler.plugins({ @@ -68,13 +63,11 @@ scheduler.plugins({ API: [all_timed](api/config/all_timed.md) +示例: [Displaying multi-day events in the regular way](https://docs.dhtmlx.com/scheduler/samples/03_extensions/26_multi_day_visible.html) -[Displaying multi-day events in the regular way](https://docs.dhtmlx.com/scheduler/samples/03_extensions/26_multi_day_visible.html) - +## Collision -## Collision {#collision} - -处理在同一时间段内发生的多个事件。 +管理时间槽中的事件数量。 ~~~js scheduler.plugins({ @@ -82,18 +75,15 @@ scheduler.plugins({ }); ~~~ - #### 相关资源 -文章:[타임 슬롯에서 중복 이벤트 방지하기](guides/collisions.md) +文章: [Preventing Double Events in a Time Slot](guides/collisions.md) +示例: [Controlling the number of events in a time slot](https://docs.dhtmlx.com/scheduler/samples/03_extensions/15_collision.html) -[Controlling the number of events in a time slot](https://docs.dhtmlx.com/scheduler/samples/03_extensions/15_collision.html) +## Container Autoresize - -## Container Autoresize {#containerautoresize} - -自动调整调度器容器大小以适应内容。 +为调度器容器启用自动调整大小（内容适配容器尺寸）。 ~~~js scheduler.plugins({ @@ -103,18 +93,15 @@ scheduler.plugins({ #### 相关资源 -文章:[dhtmlxScheduler를 순수 JS/HTML에서 사용하기](guides/initialization.md#container-autoresizing) - +文章: [dhtmlxScheduler in Plain JS/HTML](guides/initialization.md#scheduler-autoresizing) API: [container_autoresize](api/config/container_autoresize.md) +示例: [Autoresizing the scheduler container](https://docs.dhtmlx.com/scheduler/samples/03_extensions/28_container_autoresize.html) -[Autoresizing the scheduler container](https://docs.dhtmlx.com/scheduler/samples/03_extensions/28_container_autoresize.html) - +## Cookie -## Cookie {#cookie} - -使用 cookie 存储当前调度器状态（模式和日期）。 +将调度器当前状态（模式和日期）保存在 Cookies 中。 ~~~js scheduler.plugins({ @@ -124,16 +111,15 @@ scheduler.plugins({ #### 相关资源 -[Work with cookies](https://docs.dhtmlx.com/scheduler/samples/03_extensions/08_cookies_plugin.html) - +示例: [Work with cookies](https://docs.dhtmlx.com/scheduler/samples/03_extensions/08_cookies_plugin.html) -## Daytimeline {#daytimeline} +## Daytimeline -:::info -此扩展仅在 PRO 版本中提供 +:::note +此扩展仅在 PRO 版本可用 ::: -为时间线视图提供 "Days" 模式。 +Timeline 视图的 “Days” 模式的代码文件。 ~~~js scheduler.plugins({ @@ -141,22 +127,20 @@ scheduler.plugins({ }); ~~~ - #### 相关资源 -文章:[타임라인 뷰](views/timeline.md) +文章: [Timeline View](views/timeline.md) +示例: [Days as Timeline rows](https://docs.dhtmlx.com/scheduler/samples/06_timeline/14_days_as_sections.html) -[Days as Timeline rows](https://docs.dhtmlx.com/scheduler/samples/06_timeline/14_days_as_sections.html) - -## Drag-n-Drop zwischen Schedulern {#drag-n-drop-between-schedulers} +## Drag-n-Drop between Schedulers :::info -此扩展仅在 Scheduler PRO 版本（Commercial（自 2021 年 10 月 6 日起）、Enterprise 和 Ultimate 许可证）中提供。 +此扩展仅在 Scheduler PRO 版本（商业许可（自 2021 年 10 月 6 日起）、企业版和 Ultimate 许可证）中可用。 ::: -允许在多个调度器之间拖放事件，实现事件从一个调度器移动到另一个调度器。 +允许在多个调度器之间进行拖放操作，从一个调度器拖动事件到另一个调度器，反之亦然。 ~~~js scheduler.plugins({ @@ -166,12 +150,11 @@ scheduler.plugins({ #### 相关资源 -文章:[调度器之间的拖放](guides/drag-between.md) - +文章: [Drag-and-drop between Schedulers](guides/drag-between.md) -## Editors {#editors} +## Editors -包含 lightbox 中使用的 [radio](guides/radio.md)、[combo](guides/combo.md)、[checkbox](guides/checkbox.md) 控件的代码。 +用于 Lightbox 的 [radio](guides/radio.md)、[combo](guides/combo.md)、[checkbox](guides/checkbox.md) 控件的代码文件。 ~~~js scheduler.plugins({ @@ -179,18 +162,15 @@ scheduler.plugins({ }); ~~~ - #### 相关资源 -文章:[Lightbox 컨트롤](guides/lightbox-editors.md) - +文章: [Lightbox Editors](guides/lightbox-editors.md) -[Radio button in the lightbox](https://docs.dhtmlx.com/scheduler/samples/02_customization/14_radio_buttons_section.html) +示例: [Radio button in the lightbox](https://docs.dhtmlx.com/scheduler/samples/02_customization/14_radio_buttons_section.html) +## Expand -## Expand {#expand} - -在调度器右上角添加"展开"图标，点击可在原始大小和全屏之间切换。 +在调度器右上角添加 “expand” 图标。点击该图标可将调度器的尺寸从原始大小切换为“全屏”，再切换回原始大小。 ~~~js scheduler.plugins({ @@ -198,21 +178,17 @@ scheduler.plugins({ }); ~~~ - #### 相关资源 -API: [expand](api/method/expand.md), [collapse](api/method/collapse.md) - +API: [`expand()`](api/method/expand.md), [`collapse()`](api/method/collapse.md) 事件: [onBeforeExpand](api/event/onbeforeexpand.md), [onBeforeCollapse](api/event/onbeforecollapse.md), [onExpand](api/event/onexpand.md), [onCollapse](api/event/oncollapse.md) - - -[Full-screen view](https://docs.dhtmlx.com/scheduler/samples/03_extensions/05_expand_plugin.html) +示例: [Full-screen view](https://docs.dhtmlx.com/scheduler/samples/03_extensions/05_expand_plugin.html) -## Export service {#export-service} +## Export service -启用在线导出服务。 +提供启用在线导出服务的选项。 ~~~js scheduler.plugins({ @@ -222,16 +198,14 @@ scheduler.plugins({ #### 相关资源 -文章:[Export to PDF](export/pdf.md) , [Export to PNG](export/png.md) +文章: [Export to PDF](export/pdf.md), [Export to PNG](export/png.md) +示例: [Export to PDF/PNG](https://docs.dhtmlx.com/scheduler/samples/04_export/06_online_export.html) -[Export to PDF/PNG](https://docs.dhtmlx.com/scheduler/samples/04_export/06_online_export.html) - - -## Grid View {#gridview} +## Grid View :::info -此扩展仅在 PRO 版本中提供 +此扩展仅在 PRO 版本可用 ::: Grid 视图的代码文件。 @@ -242,18 +216,15 @@ scheduler.plugins({ }); ~~~ - #### 相关资源 -文章:[Grid View](views/grid.md) - +文章: [Grid View](views/grid.md) -[Grid view](https://docs.dhtmlx.com/scheduler/samples/03_extensions/27_grid_view.html) +示例: [Grid view](https://docs.dhtmlx.com/scheduler/samples/03_extensions/27_grid_view.html) +## HTML Templates -## HTML Templates {#html-templates} - -允许使用 HTML 代码定义模板。 +允许将模板定义为 HTML 代码。 ~~~js scheduler.plugins({ @@ -263,13 +234,12 @@ scheduler.plugins({ #### 相关资源 -文章:[模板](guides/templates.md#specifyingtemplatesasanhtmlcode) - +文章: [Templates](guides/templates.md#specifying-templates-with-code) -[Specifying templates with HTML](https://docs.dhtmlx.com/scheduler/samples/03_extensions/09_html_templates_plugin.html) +示例: [Specifying templates with HTML](https://docs.dhtmlx.com/scheduler/samples/03_extensions/09_html_templates_plugin.html) -## Keyboard Navigation {#keyboard-navigation} +## Keyboard Navigation 启用键盘导航。 @@ -281,18 +251,15 @@ scheduler.plugins({ #### 相关资源 -文章:[키보드 내비게이션](guides/keyboard-navigation.md) - - -[Keyboard Navigation and WAI-ARIA - Flat Skin](https://docs.dhtmlx.com/scheduler/samples/13_accessibility/01_regular_skin_all_views.html) +文章: [Keyboard Navigation](guides/keyboard-navigation.md) +示例: [Keyboard Navigation and WAI-ARIA - Flat Skin](https://docs.dhtmlx.com/scheduler/samples/13_accessibility/01_regular_skin_all_views.html) -[Keyboard navigation in the scheduler](https://docs.dhtmlx.com/scheduler/samples/03_extensions/07_navigation_plugin.html) +示例: [Keyboard navigation in the scheduler](https://docs.dhtmlx.com/scheduler/samples/03_extensions/07_navigation_plugin.html) +## Legacy -## Legacy {#legacy} - -激活已弃用 API 的支持。 +启用已弃用的 API。 ~~~js scheduler.plugins({ @@ -302,12 +269,11 @@ scheduler.plugins({ #### 相关资源 -文章:[Migration From Older Versions](migration.md) - +文章: [Migration From Older Versions](migration.md) -## Limit {#limit} +## Limit -提供阻止和高亮特定日期的选项。 +提供阻止和突出显示日期的功能。 ~~~js scheduler.plugins({ @@ -317,13 +283,12 @@ scheduler.plugins({ #### 相关资源 -文章:[Blocking and Marking Dates](guides/limits.md) +文章: [Blocking and Marking Dates](guides/limits.md) +示例: [Limiting dates for creating events](https://docs.dhtmlx.com/scheduler/samples/03_extensions/16_limitation.html) -[Limiting dates for creating events](https://docs.dhtmlx.com/scheduler/samples/03_extensions/16_limitation.html) - -## Map View {#mapview} +## Map View Map 视图的代码文件。 @@ -335,15 +300,14 @@ scheduler.plugins({ #### 相关资源 -文章:[Map View](views/map.md) - +文章: [Map View](views/map.md) -[Map view](https://docs.dhtmlx.com/scheduler/samples/03_extensions/19_map_view.html) +示例: [Map view](https://docs.dhtmlx.com/scheduler/samples/03_extensions/19_map_view.html) -## Mini Calendar (Date Picker) {#minicalendardatepicker} +## Mini Calendar (Date Picker) -添加迷你日历的插件。 +一个用于迷你日历的插件。 ~~~js scheduler.plugins({ @@ -353,19 +317,18 @@ scheduler.plugins({ #### 相关资源 -文章:[미니 캘린더(날짜 선택기)](guides/minicalendar.md), [시간 및 날짜](guides/time.md#minicalendarinthelightbox) +文章: [Mini Calendar (Date Picker)](guides/minicalendar.md), [Time and Date](guides/time.md#mini-calendar-in-the-lightbox) +示例: [Mini calendar in the scheduler header](https://docs.dhtmlx.com/scheduler/samples/05_calendar/01_select.html) -[Mini calendar in the scheduler header](https://docs.dhtmlx.com/scheduler/samples/05_calendar/01_select.html) - -## Multisection {#multisection} +## Multisection :::info -此扩展仅在 PRO 版本中提供 +此扩展仅在 PRO 版本可用 ::: -允许在时间线视图中为事件分配多个区段，或在单位视图中分配多个单位。 +允许在 Timeline 视图中将事件分配到多个部分，或在 Units 视图中分配到多个单元。 ~~~js scheduler.plugins({ @@ -375,18 +338,16 @@ scheduler.plugins({ #### 相关资源 -文章:[타임라인 뷰](views/timeline.md#assignmentofeventstoseveralsections), [Units View](views/units.md#assigningeventstoseveralunits) - +文章: [Timeline View](views/timeline.md), [Units View](views/units.md) API: [multisection](api/config/multisection.md) +示例: [Multisection events in Timeline and Units view](https://docs.dhtmlx.com/scheduler/samples/12_multisection_events/01_multisection_events.html) -[Multisection events in Timeline and Units view](https://docs.dhtmlx.com/scheduler/samples/12_multisection_events/01_multisection_events.html) +## Multiselect -## Multiselect {#multiselect} - -为 lightbox 添加 [multiselect](guides/multiselect.md) 控件的支持。 +用于 Lightbox 的 [multiselect](guides/multiselect.md) 控件的扩展。 ~~~js scheduler.plugins({ @@ -396,15 +357,14 @@ scheduler.plugins({ #### 相关资源 -文章:[Lightbox 컨트롤](guides/lightbox-editors.md) - +文章: [Lightbox Editors](guides/lightbox-editors.md) -[Multiselect control in the lightbox](https://docs.dhtmlx.com/scheduler/samples/03_extensions/21_multiselect_options.html) +示例: [Multiselect control in the lightbox](https://docs.dhtmlx.com/scheduler/samples/03_extensions/21_multiselect_options.html) -## Multisource {#multisource} +## Multisource -支持从多个数据源加载数据。 +提供从多个数据源加载数据的功能。 ~~~js scheduler.plugins({ @@ -414,15 +374,14 @@ scheduler.plugins({ #### 相关资源 -文章:[데이터 불러오기](guides/loading-data.md#loadingdatafrommultiplesources) +文章: [Loading Data](guides/loading-data.md#loading-data-from-multiple-sources) +示例: [Loading data from multiple sources](https://docs.dhtmlx.com/scheduler/samples/03_extensions/13_multisource.html) -[Loading data from multiple sources](https://docs.dhtmlx.com/scheduler/samples/03_extensions/13_multisource.html) +## Outerdrag -## Outerdrag {#outerdrag} - -允许从外部 DHTMLX 组件（如 dhtmlxTree）拖动事件。 +允许从外部 DHTMLX 组件（如 dhtmlxTree）拖拽事件。 ~~~js scheduler.plugins({ @@ -430,27 +389,25 @@ scheduler.plugins({ }); ~~~ - #### 相关资源 -文章:[드래그 앤 드롭(Drag-and-Drop) 작업](guides/drag-between.md) +文章: [Drag-and-Drop Operations](guides/drag-between.md) +示例: [Integration with dhtmlxTree](https://docs.dhtmlx.com/scheduler/samples/10_integration/02_dhtmlxtree_outer_drag.html) -[Integration with dhtmlxTree](https://docs.dhtmlx.com/scheduler/samples/10_integration/02_dhtmlxtree_outer_drag.html) +## PDF -## PDF {#pdf} +提供导出为 PDF 文档的功能。 -支持导出为 PDF 文档。 +- [Export to PDF (version 4.0)](export/pdf-legacy.md) -- [导出为 PDF（4.0 版本）](export/pdf-legacy.md) +- [Export to PDF (version 4.1+)](export/pdf.md) -- [导出为 PDF（4.1+ 版本）](export/pdf.md) +## Quick Info -## Quick Info {#quickinfo} - -显示包含事件详细信息的弹出窗口。 +提供一个包含事件详情的弹出框。 ~~~js scheduler.plugins({ @@ -458,18 +415,16 @@ scheduler.plugins({ }); ~~~ - #### 相关资源 -文章:[Mobile Responsive Scheduler](guides/touch-support.md) +文章: [Mobile Responsive Scheduler](guides/touch-support.md) +示例: [Touch-oriented scheduler](https://docs.dhtmlx.com/scheduler/samples/03_extensions/29_quick_info.html) -[Touch-oriented scheduler](https://docs.dhtmlx.com/scheduler/samples/03_extensions/29_quick_info.html) +## Readonly -## Readonly {#readonly} - -为 lightbox 和部分事件启用只读模式。 +为 Lightbox 和特定事件提供只读模式。 ~~~js scheduler.plugins({ @@ -477,18 +432,16 @@ scheduler.plugins({ }); ~~~ - #### 相关资源 -文章:[읽기 전용 모드](guides/readonly.md) +文章: [Read-only Mode](guides/readonly.md) +示例: [Read-only lightbox](https://docs.dhtmlx.com/scheduler/samples/03_extensions/12_readonly_form.html) -[Read-only lightbox](https://docs.dhtmlx.com/scheduler/samples/03_extensions/12_readonly_form.html) +## Recurring -## Recurring {#recurring} - -添加对周期性事件的支持。 +为重复事件提供支持。 ~~~js scheduler.plugins({ @@ -496,18 +449,16 @@ scheduler.plugins({ }); ~~~ - #### 相关资源 -文章:[반복 이벤트](guides/recurring-events.md) +文章: [Recurring Events](guides/recurring-events.md) +示例: [Recurring events](https://docs.dhtmlx.com/scheduler/samples/03_extensions/01_recurring_events.html) -[Recurring events](https://docs.dhtmlx.com/scheduler/samples/03_extensions/01_recurring_events.html) - -## Recurring Legacy {#recurring-legacy} +## Recurring Legacy -为周期性事件提供旧版支持。 +重复事件的旧引擎。 ~~~js scheduler.plugins({ @@ -517,12 +468,12 @@ scheduler.plugins({ #### 相关资源 -文章:[Recurring Events (v7.1 이하)](guides/recurring-events-legacy.md) +文章: [Recurring Events (up to v7.1)](guides/recurring-events-legacy.md) -## Serialize {#serialize} +## Serialize -支持将数据序列化为 ICal、XML 和 JSON 格式。 +提供序列化为 ICal、XML、JSON 格式的支持。 ~~~js scheduler.plugins({ @@ -530,24 +481,20 @@ scheduler.plugins({ }); ~~~ - #### 相关资源 -文章:[데이터 직렬화: XML, JSON, iCal](export/serialization.md) - +文章: [Data Serialization to XML, JSON, iCal](export/serialization.md) - +示例: [Serialize scheduler events](https://docs.dhtmlx.com/scheduler/samples/04_export/01_serialize_data.html) -[Serialize scheduler events](https://docs.dhtmlx.com/scheduler/samples/04_export/01_serialize_data.html) - -## Timeline {#timeline} +## Timeline :::info -此扩展仅在 PRO 版本中提供 +此扩展仅在 PRO 版本可用 ::: -时间线视图插件。 +Timeline 视图插件。 ~~~js scheduler.plugins({ @@ -555,16 +502,14 @@ scheduler.plugins({ }); ~~~ - #### 相关资源 -文章:[타임라인 뷰](views/timeline.md) +文章: [Timeline View](views/timeline.md) +示例: [Bar mode](https://docs.dhtmlx.com/scheduler/samples/06_timeline/02_lines.html) -[Bar mode](https://docs.dhtmlx.com/scheduler/samples/06_timeline/02_lines.html) - -## Tooltip {#tooltip} +## Tooltip 为事件启用工具提示。 @@ -574,22 +519,20 @@ scheduler.plugins({ }); ~~~ - #### 相关资源 -文章:[툴팁 (Tooltips)](guides/tooltips.md) +文章: [Tooltips](guides/tooltips.md) +示例: [Tooltips](https://docs.dhtmlx.com/scheduler/samples/03_extensions/20_tooltip.html) -[Tooltips](https://docs.dhtmlx.com/scheduler/samples/03_extensions/20_tooltip.html) - -## Treetimeline {#treetimeline} +## Treetimeline :::info -此扩展仅在 PRO 版本中提供 +此扩展仅在 PRO 版本可用 ::: -为时间线视图提供 "Tree" 模式。 +用于 Timeline 视图的 “Tree” 模式的扩展。 ~~~js scheduler.plugins({ @@ -597,22 +540,20 @@ scheduler.plugins({ }); ~~~ - #### 相关资源 -文章:[타임라인 뷰](views/timeline.md) +文章: [Timeline View](views/timeline.md) +示例: [Tree mode](https://docs.dhtmlx.com/scheduler/samples/06_timeline/03_tree.html) -[Tree mode](https://docs.dhtmlx.com/scheduler/samples/06_timeline/03_tree.html) - -## Units {#units} +## Units :::info -此扩展仅在 PRO 版本中提供 +此扩展仅在 PRO 版本可用 ::: -单位视图扩展。 +Units 视图扩展。 ~~~js scheduler.plugins({ @@ -620,25 +561,23 @@ scheduler.plugins({ }); ~~~ - #### 相关资源 -文章:[Units View](views/units.md) +文章: [Units View](views/units.md) +示例: [Units view](https://docs.dhtmlx.com/scheduler/samples/03_extensions/02_units_view.html) -[Units view](https://docs.dhtmlx.com/scheduler/samples/03_extensions/02_units_view.html) +## URL -## URL {#url} +将调度器的状态（日期、事件 ID、视图）保存在 URL 中。 -将调度器的状态（日期、事件 ID、视图）存储在 URL 中。 +例如： -示例: -~~~js -10_url_date_plugin.html#date=2014-08-01,mode=month - 或 -10_url_date_plugin.html#event="15" -~~~ +```text +10_url_date_plugin.html#date=2027-08-01,mode=month +10_url_date_plugin.html#event=15 +``` ~~~js scheduler.plugins({ @@ -646,16 +585,15 @@ scheduler.plugins({ }); ~~~ - #### 相关资源 -[Saving the scheduler state in URL](https://docs.dhtmlx.com/scheduler/samples/03_extensions/10_url_date_plugin.html) +示例: [Saving the scheduler state in URL](https://docs.dhtmlx.com/scheduler/samples/03_extensions/10_url_date_plugin.html) -## Week Agenda {#weekagenda} +## Week Agenda :::info -此扩展仅在 PRO 版本中提供 +此扩展仅在 PRO 版本可用 ::: Week Agenda 视图的代码文件。 @@ -666,16 +604,14 @@ scheduler.plugins({ }); ~~~ - #### 相关资源 -文章:[Week Agenda View](views/weekagenda.md) +文章: [Week Agenda View](views/weekagenda.md) +示例: [WeekAgenda view](https://docs.dhtmlx.com/scheduler/samples/03_extensions/24_week_agenda.html) -[WeekAgenda view](https://docs.dhtmlx.com/scheduler/samples/03_extensions/24_week_agenda.html) - -## Year {#year} +## Year Year 视图的代码文件。 @@ -687,7 +623,6 @@ scheduler.plugins({ #### 相关资源 -文章:[Year View](views/year.md) - +文章: [Year View](views/year.md) -[Year view](https://docs.dhtmlx.com/scheduler/samples/03_extensions/04_year_view.html) +示例: [Year view](https://docs.dhtmlx.com/scheduler/samples/03_extensions/04_year_view.html) \ No newline at end of file diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/filtering.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/filtering.md index 7b4a3564..e25cc386 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/guides/filtering.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/filtering.md @@ -1,40 +1,41 @@ ---- -title: "过滤事件" -sidebar_label: "过滤事件" +--- +title: "筛选事件" +sidebar_label: "筛选事件" --- -# 过滤事件 +# 筛选事件 -对于每个视图，可以定义一个过滤函数，用于决定哪些事件会显示在调度器中，哪些事件会被隐藏。 +对于任何指定的视图，您可以设置一个过滤函数，该函数将定义在 Scheduler 中应显示哪些事件以及哪些不应显示。 ~~~js -scheduler.filter_week = function(id, event){ - if(event.name == 'New event') +scheduler.filter_week = (id, event) => { + if (event.name === 'New event') { return false; // 该事件将被过滤（不会渲染） - //或者 - return true; // 该事件将被渲染 -} + } + + return true; // 该事件将被渲染 +}; ~~~ -这里，"week"指的是视图的名称（在 *'scheduler.filter_week'* 中使用）。 +在此，`"week"` 是 `scheduler.filter_week` 中视图的名称。 -**filter_(viewName)** 函数接受两个参数: +`filter_(viewName)` 方法接收两个参数： -- **id** - 事件的标识符 -- **event** - 事件对象本身 +- `id` - 事件的 id +- `event` - 事件对象 -也可以为不同的视图分配不同的过滤函数: +请记住，您可以为不同的视图设置不同的过滤函数： ~~~js -scheduler.filter_day = scheduler.filter_week = function(id, event){ - //some_code -} +scheduler.filter_day = scheduler.filter_week = (id, event) => { + // some code +}; ... -scheduler.filter_timeline = function(id, event){ - //some_other code -} +scheduler.filter_timeline = (id, event) => { + // some other code +}; ~~~ - -[Filtering events](https://docs.dhtmlx.com/scheduler/samples/09_api/09_filtering_events.html) +### 相关示例 +- [筛选事件](https://docs.dhtmlx.com/scheduler/samples/09_api/09_filtering_events.html) \ No newline at end of file diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/guides.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/guides.md deleted file mode 100644 index bbf29f18..00000000 --- a/i18n/zh/docusaurus-plugin-content-docs/current/guides/guides.md +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: "指南" -sidebar_label: "指南" ---- - -# 指南 - -本节包含支持您高效使用 dhtmlxScheduler 的主要指导材料。 -内容以任务为中心，分为针对常见和复杂任务的手册，无论这些任务是常见还是罕见。 -文章涵盖了基本操作流程和实用解决方案。 - -请查看 dhtmlxScheduler 库 [Standard 和 PRO 版本可用的功能](guides/editions-comparison.md)。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

在页面上创建 Scheduler

  • [初始化 Scheduler](guides/initialization.md)
  • [스케줄러 설치 방법](guides/installation.md)
  • [전체 확장 기능 목록](guides/extensions-list.md)
介绍如何安装和初始化 Scheduler，并提供可用扩展的列表。

前端快速入门 Scheduler

  • [dhtmlxScheduler를 순수 JS/HTML에서 사용하기](guides/initialization.md)
  • [dhtmlxScheduler와 Angular 연동](integrations/angular/howtostart-angular.md)
  • [dhtmlxScheduler와 React](integrations/react/js-scheduler-react.md)
  • [dhtmlxScheduler와 Vue.js](integrations/vue/howtostart-vue.md)
  • [dhtmlxScheduler와 Svelte 연동](integrations/svelte/howtostart-svelte.md)
介绍如何在前端构建和设置标准 Scheduler。

服务端快速入门 Scheduler

  • [dhtmlxScheduler와 ASP.NET Core](integrations/dotnet/howtostart-dotnet-core.md)
  • [dhtmlxScheduler와 Node.js](integrations/node/howtostart-nodejs.md)
  • [dhtmlxScheduler와 ASP.NET MVC](integrations/dotnet/howtostart-dotnet.md)
  • [dhtmlxScheduler와 PHP](integrations/php/howtostart-plain-php.md)
  • [dhtmlxScheduler와 PHP:Laravel 연동하기](integrations/php/howtostart-php-laravel.md)
  • [dhtmlxScheduler와 PHP:Slim](integrations/php/howtostart-php-slim4.md)
  • [dhtmlxScheduler와 SalesForce LWC 통합하기](integrations/salesforce/howtostart-salesforce.md)
  • [dhtmlxScheduler와 Ruby on Rails 연동하기](integrations/other/howtostart-ruby.md)
  • [dhtmlxScheduler와 dhtmlxConnector 연동하기](integrations/other/howtostart-connector.md)
介绍如何在不同服务器端平台创建标准 Scheduler，并通过配置、模板自定义、事件绑定等方式实现功能。

Scheduler 配置

  • [Mobile Responsive Scheduler](guides/touch-support.md)
  • [일반 설정 안내](guides/configuration.md)
  • [스케줄러 마크업](guides/scheduler-markup.md)
  • [RTL (오른쪽-왼쪽) 모드](guides/rtl-mode.md)
  • [Localization](guides/localization.md)
  • [페이지에서 여러 개의 Scheduler 생성하기](guides/multiple-per-page.md)
  • [접근성](guides/accessibility.md)
演示如何配置 Scheduler、在同一页面创建多个调度器、本地化界面、启用无障碍功能等。

数据加载与存储

  • [데이터 불러오기](guides/loading-data.md)
  • [Server-Side Integration](guides/server-integration.md)
介绍将数据加载到 Scheduler 的不同方法，包括多种数据源、格式和技术，以及服务端集成的相关细节。

视图配置

  • [视图概述](/views/)
  • [뷰의 X축에서 시간 단위 숨기기](guides/custom-scales.md)
  • [Custom View](guides/custom-views.md)
  • [Blocking and Marking Dates](guides/limits.md)
讲解如何通过调整刻度单位、自定义视图、限制特定日期等方式自定义视图。
重点介绍如何操作 Lightbox:添加或移除控件、获取和设置控件值、自定义外观等。

Scheduler 事件管理

  • [이벤트 객체 작업](guides/event-object-operations.md)
  • [이벤트 추가/삭제](guides/adding-events.md)
  • [이벤트 필터링](guides/filtering.md)
  • [드래그 앤 드롭(Drag-and-Drop) 작업](guides/drag-between.md)
  • [반복 이벤트](guides/recurring-events.md)
  • [읽기 전용 모드](guides/readonly.md)
  • [Validation](guides/validation.md)
  • [타임 슬롯에서 중복 이벤트 방지하기](guides/collisions.md)
涵盖事件对象的基本操作，如添加、删除、筛选，并介绍如何处理周期性事件、设置 Scheduler 或部分只读等。

事件自定义

  • [事件框](guides/custom-events-display.md)
  • [颜色](guides/custom-events-color.md)
  • [内容（模板）](guides/custom-events-content.md)
  • [提示信息](guides/tooltips.md)
  • [事件的编辑与选择条](guides/customizing-edit-select-bars.md)
  • [스케일 및 이벤트 박스 크기 조정](guides/sizing.md)
详细介绍如何个性化事件的各个方面，从文本模板到事件框的视觉表现。

数据导入/导出

  • [与 Google 日历集成](integrations/google-calendar/google-calendar-sync.md)
  • [Export to PDF](export/pdf.md)
  • [Export to PNG](export/png.md)
  • [엑셀 및 iCal로 내보내기](export/excel.md)
  • [ XML、JSON、iCal 及其他格式](export/serialization.md)
介绍 Scheduler 数据导入导出的可用格式和方法。

外观与样式

  • [스킨(Skins)](guides/skins.md)
  • [레이블, 날짜, 스타일 포매팅](guides/templates.md)
  • [스킨 커스터마이제이션](guides/custom-skins.md)
介绍 Scheduler 的图形元素及其样式定制方法。

日期处理

  • [날짜 형식 지정](guides/settings-format.md)
  • [날짜 작업](guides/date-formats.md)
讨论 Scheduler 中与日期相关的重要主题，包括日期与字符串的相互转换，以及日期格式中允许的字符。

集成

  • [Popup Messages and Modal Boxes](guides/popups-and-modals.md)
  • [타입스크립트와 함께 Scheduler 사용하기](guides/scheduler-typescript.md)
  • [jQuery 통합](integrations/other/jquery-integration.md)
  • [dhtmlxLayout와의 통합](integrations/other/dhxlayout-integration.md)
详细介绍 Scheduler 与第三方框架的集成选项。

特殊扩展与版本

  • [미니 캘린더(날짜 선택기)](guides/minicalendar.md)
  • [Live Updates 모드 (레거시)](guides/live-update.md)
  • [여러 사용자](guides/multiple-users.md)
介绍库中包含的各种扩展及其增强功能的使用方法。

用户界面指南

  • [Scheduler GUI](guides/user-interface.md)
从终端用户角度描述 Scheduler 的界面元素。
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/how-to-start.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/how-to-start.md deleted file mode 100644 index 97a20ccd..00000000 --- a/i18n/zh/docusaurus-plugin-content-docs/current/guides/how-to-start.md +++ /dev/null @@ -1,240 +0,0 @@ ---- -title: "如何开始" -sidebar_label: "如何开始" ---- - -# 如何开始 - -本教程将带您逐步创建一个基础的调度器，实现从数据库加载数据并保存回去的功能。 -这里的最终示例可以作为使用 dhtmlxScheduler 构建应用的坚实基础。 - -![init_scheduler_front.png](/img/init_scheduler_front.png) - - -[Loading data from a database](https://docs.dhtmlx.com/scheduler/samples/01_initialization_loading/05_loading_database.html) - - -## 第一步:创建新的 HTML 文件并添加所需代码文件 - -首先，新建一个 HTML 文件，并引入调度器所需的脚本和样式文件。 - -您需要的文件有: - -- *dhtmlxscheduler.js* -- *dhtmlxscheduler_material.css*（用于 Material 皮肤；您也可以[查看其它可用皮肤](guides/skins.md)） - -~~~html - - - - How to start - - - - - //your code will be here - - -~~~ - -让我们快速了解一下 dhtmlxScheduler 包的结构，以便找到这些文件的位置: - -- sources - 源代码文件，未压缩，便于阅读，主要用于调试。 -- samples - 示例代码片段。 -- docs - 组件的完整文档。 -- codebase - 为生产环境优化的压缩文件。请在您的项目中使用此文件夹下的文件。 - -## 第二步:定义相关的 DIV 元素 - -在初始化调度器之前，需要为其界面元素设置必要的 DIV 容器。 - -调度器所需的典型 'div' 结构如下: - -~~~js -
-
-
 
-
 
-
-
-
-
-
-
-
-
-
-~~~ - -## 第三步:样式设置 - -为了确保调度器在各浏览器中能正常全屏显示，请为调度器添加如下 CSS 样式: - -~~~css - -~~~ - -如果您不使用全屏模式，则无需添加该样式。此时只需在主 **div** 上设置所需的 CSS 属性即可: - -~~~html -
-... -~~~ - -## 第四步:初始化 - -一切准备就绪后，即可初始化调度器。请注意，调度器是静态对象，每个页面只能初始化一次。 -您可以通过 **dhtmlxScheduler** 或 **scheduler** 来引用调度器实例。 - -~~~js -scheduler.init('scheduler_here', new Date(),"month"); -~~~ - -## 第五步:加载数据 - -此时运行应用会显示调度器，但其中不会有任何事件。 - -要为其填充数据，可以先用一个简单的内联对象作为数据源。 -使用 [parse](api/method/parse.md) 方法从内联对象加载数据。 - -每个事件对象包含: - -- **id** - (*string, number*) 事件标识符。 -- **start_date** - (*string*) 事件开始日期，默认格式为 "%m/%d/%Y %H:%i"。 -- **end_date** - (*string*) 事件结束日期，默认格式为 "%m/%d/%Y %H:%i"。 -- **text** - (*string*) 事件描述。 - -~~~js -var events = [ - {id:1, text:"Meeting", start_date:"04/11/2018 14:00",end_date:"04/11/2018 17:00"}, - {id:2, text:"Conference",start_date:"04/15/2018 12:00",end_date:"04/18/2018 19:00"}, - {id:3, text:"Interview", start_date:"04/24/2018 09:00",end_date:"04/24/2018 10:00"} -]; - -scheduler.parse(events); // 指定数据源及格式 -~~~ - -您也可以[从服务器加载数据](#step7loadingdatafromtheserver)。 - -:::note -有关与服务器端集成的详细信息，请参见 [Server-Side Integration](guides/server-integration.md) 文章。 -::: - -## 第六步:数据库结构 - -:::note -如果您希望从数据库而不是内联对象加载数据，请按照以下步骤操作。 -::: - -如果您决定从服务器加载数据，则需要一个结构如下的数据库表: - -![db_table](/img/db_table.png) - -可以使用以下 SQL 代码创建: - -~~~js -CREATE TABLE `events` ( - `id` int(11) NOT NULL AUTO_INCREMENT, - `start_date` datetime NOT NULL, - `end_date` datetime NOT NULL, - `text` varchar(255) NOT NULL, - PRIMARY KEY (`id`) -) -~~~ - -除了这些字段外，您还可以根据需要添加额外的列，这些列可以发送到客户端并[映射到 lightbox](guides/custom-details-form.md)。 - -请注意，数据库中的日期时间格式为 '%Y-%m-%d %H:%i'，与调度器默认的 '%m/%d/%Y %H:%i' 不同。 -为确保正确处理，需要通过 [xml_date](api/config/xml_date.md) 选项更新调度器的日期格式。 - -请确保在初始化调度器前设置相关配置，如下所示: - -~~~js -scheduler.config.xml_date="%Y-%m-%d %H:%i"; -... -scheduler.init('scheduler_here',new Date(),"month"); -~~~ - -## 第七步:从服务器加载数据 - -要从数据库加载数据，请使用 [load](api/method/load.md) 方法，并提供处理数据操作的服务器端脚本 URL。 - -:::note -[dhtmlxConnector](https://docs.dhtmlx.com/connector__php__index.html) 库可以帮助您快速开始，如下所示。但对于新项目，建议手动构建后端 API，以获得更高的灵活性。详情参见 [Server-Side Integration](guides/server-integration.md)。 -::: - -方法调用示例: - -~~~js -// 指定处理 CRUD 操作的服务器端脚本 URL -scheduler.load("data/connector.php"); -~~~ - -## 第八步:服务器端脚本 - -以下是一个 dhtmlxScheduler 的服务器端脚本示例: - -~~~php -render_table("events","id","start_date,end_date,text"); -~~~ - -### 数据库列映射 - -请注意，**$connector->render_table** 中列的顺序很重要。前三个列分别对应客户端事件对象的 *start_date*、*end_date* 和 *text* 属性，无论实际的列名如何: - -~~~js -$conn->render_table("events","EventId","Start,End,Name,details",""); -// JS: event.id, event.start_date, event.end_date, event.text, event.text, event.details -~~~ - -#### 映射额外的列 - -任何额外的列都将根据其名称直接映射: - -~~~js -$conn->render_table("events","id","start_date,end_date,text,custom,details",""); -// JS: event.start_date, event.end_date, event.text, event.custom, event.details -~~~ - -您也可以使用别名: - -~~~js -$conn->render_table("events","id", - "start_date,end_date,text,custom_column(customProperty),details",""); -// JS: event.start_date, event.end_date, event.text, event.customProperty, event.details -~~~ - -## 第九步:保存数据 - -此时，调度器已经可以从数据库加载数据，但还不能自动保存更改。 -要启用保存功能，请使用 dataProcessor。 - -dataProcessor 的使用非常简单，只需初始化并将其与调度器关联即可: - -~~~js -var dp = scheduler.createDataProcessor("data/connector.php"); -dp.init(scheduler); -~~~ - -到这里为止，您已经拥有了一个可以与数据库进行数据加载和保存的基础调度器。 - -接下来，您可以根据具体需求对其进行自定义和扩展。 - - -[Loading data from a database](https://docs.dhtmlx.com/scheduler/samples/01_initialization_loading/05_loading_database.html) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/ical-export-import.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/ical-export-import.md index 3061e97d..34a18dae 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/guides/ical-export-import.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/ical-export-import.md @@ -1,36 +1,38 @@ --- -title: "iCal 导入/导出" -sidebar_label: "iCal 导入/导出" +title: "iCal 导出/导入" +sidebar_label: "iCal 导出/导入" --- -# iCal 导入/导出 +# iCal 导出/导入 :::note -**该工具已废弃且不再受支持。因此，请不要在您的应用程序中使用它！** +此工具已被废弃，不再受支持。请不要在您的应用程序中使用它！ ::: -可以通过现成的工具或 API 方法，以 iCal 格式导入或导出数据。 +遗留的导出器/导入器是基于 PHP 的，因此下面的代码片段是 PHP 示例。如果您使用的是其他后端，请使用您平台的 iCalendar 库，并将字段映射到 Scheduler 事件属性。 + +您可以通过使用现成的实用工具或 API 方法来导入/导出 iCal 格式的数据。 ## iCal 导出器（前端） ![ical_exporter1.png](/img/ical_exporter1.png) -该工具的前端由两个部分组成: +该实用工具的前端由两部分组成： -- **资源配置** +- **资源配置** - **数据库配置** -在第一部分，您需要指定数据路径。可以通过打开对话窗口选择路径（**Ical file**，即"Overview"按钮），也可以手动输入路径（**Ical URL**）。 +在第一部分中，您设置数据的路径。您可以通过从打开的对话框中选择路径（**Ical file**，按钮“概览”）或手动指定（**Ical URL**）来完成。 -第二部分包含典型的数据库设置（主机、数据库和表名、用户名和密码），iCal 数据将被保存到这里。您还可以选择是否删除旧数据（**Delete all data**）。 +第二部分包含要保存 iCal 数据的数据库的标准设置（主机、数据库和表名、用户名和密码），这里您也可以设置是否需要删除旧数据（**Delete all data**）。 ## API 方法 -以下是可用于在应用程序中实现 iCal 导入/导出的 API 方法。 +在这里可以找到用于在应用程序中实现 iCal 导出/导入的所有 API 方法。 ### 初始化 -要设置 iCal 导出器/导入器，请使用以下代码: +要初始化 iCal 导出/导入器，请使用以下代码： ~~~php require_once("codebase/class.php"); @@ -38,27 +40,30 @@ $export = new ICalExporter(); ~~~ + ### iCalendar 导入 -以下方法用于导入 iCal 数据: +您可以使用以下方法导入 iCal 数据： -- **setTitle($title)** - 在 toICal() 方法中为 iCal 文件指定标题 +- **setTitle($title)** - 在 toICal() 方法中设置 iCal 文件的标题 - **getTitle()** - 获取 iCal 文件的标题 -- **toICal($events)** - 将数组或 XML 字符串的数据转换为 iCalendar 格式 +- **toICal($events)** - 将来自数组或 XML 字符串的信息转换为 iCalendar 格式 ### iCalendar 导出 -以下方法用于导出 iCal 数据: +您可以使用以下方法导出 iCal 数据： - **toHash($ical)** - 将 iCal 字符串转换为事件数组 - **toXML($ical)** - 将 iCal 字符串转换为 XML 格式 + #### 示例 -以下是一些演示如何进行 iCal 导入/导出的代码片段。 +这里给出了一些代码片段，展示了如何执行 iCal 导出/导入。 + + 设置 iCalendar 标题 -此示例演示如何为导入或导出的 iCalendar 数据设置标题。 +以下代码允许您设置导入/导出 iCalendar 数据的标题。 ~~~php $xml = file_get_contents("events_rec.xml"); @@ -70,16 +75,18 @@ file_put_contents("ical.ics", $ical); ~~~ + + 事件数组 -此示例展示了用于从/向数组导入/导出数据的事件数组。 +这是一个示例事件数组，用于从/向数组导入/导出数据。 + ~~~php $events = array( array( "id" => 1, - "start_date" => "2010-04-05 08:00:00", - "end_date" => "2012-04-09 09:00:00", + "start_date" => "2027-04-05 08:00:00", + "end_date" => "2027-04-09 09:00:00", "text" => "text1", "rec_type" => "week_2___3,5", "event_pid" => null, @@ -88,8 +95,8 @@ $events = array( array( "id" => 2, - "start_date" => "2010-04-06 12:00:00", - "end_date" => "2010-04-06 18:00:00", + "start_date" => "2027-04-06 12:00:00", + "end_date" => "2027-04-06 18:00:00", "text" => "text2", "rec_type" => "", "event_pid" => null, @@ -98,8 +105,8 @@ $events = array( array( "id" => 3, - "start_date" => "2010-04-07 12:00:00", - "end_date" => "2010-04-07 18:00:00", + "start_date" => "2027-04-07 12:00:00", + "end_date" => "2027-04-07 18:00:00", "text" => "text3", "rec_type" => "", "event_pid" => null, @@ -108,8 +115,8 @@ $events = array( array( "id" => 4, - "start_date" => "2010-04-08 12:00:00", - "end_date" => "2010-04-08 18:00:00", + "start_date" => "2027-04-08 12:00:00", + "end_date" => "2027-04-08 18:00:00", "text" => "text4", "rec_type" => "", "event_pid" => null, @@ -119,9 +126,10 @@ $events = array( ~~~ -+ 从数组到 iCal -此代码片段用于将数组中的数据导出为 iCal 字符串: ++ 从数组导出到 iCal + +使用此代码将数据从数组导出到 iCal 字符串： ~~~php require_once("codebase/class.php"); @@ -131,9 +139,10 @@ file_put_contents("ical.ics"); ~~~ -+ 从 XML 到 iCal -此代码片段用于将 XML 数据导出为 iCal 格式: ++ 从 XML 导出到 iCal + +使用此代码将数据从 XML 导出到 iCal： ~~~php $xml = file_get_contents("events_rec.xml"); @@ -144,9 +153,10 @@ file_put_contents("ical.ics"); ~~~ + + 从 iCal 到数组 -此示例用于将 iCal 文件中的数据导出为数组: +使用此代码将数据从 iCal 导出到数组： ~~~php $ical = file_get_contents("ical.ics"); @@ -156,9 +166,10 @@ $events = $export->toHash($ical); ~~~ + + 从 iCal 到 XML -此代码片段用于将 iCal 文件中的数据导出为 XML 格式: +使用此代码将数据从 iCal 转换为 XML： ~~~php $ical = file_get_contents("ical.ics"); @@ -167,4 +178,4 @@ $export = new ICalExporter(); $xml = $export->toXML($ical); file_put_contents("events_rec.xml", $xml); -~~~ +~~~ \ No newline at end of file diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/index.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/index.md new file mode 100644 index 00000000..b1e7ee65 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/index.md @@ -0,0 +1,155 @@ +--- +title: "指南" +sidebar_label: "指南" +--- + +# 指南 + +本指南信息是文档的核心部分，帮助您在实际使用 dhtmlxScheduler 时。 +本章节分为面向任务的手册，帮助您完成简单和复杂的任务。 +文章聚焦于关键步骤和问题解决活动。 + +请查看 dhtmlxScheduler 库在 Standard 与 PRO 版本中的功能对比 [Standard 与 PRO 版本中的功能对比](guides/editions-comparison.md)。 + +
+ +## 在页面上创建 Scheduler + +展示如何安装并初始化 Scheduler，并提供可用扩展的列表。 + +- ### [初始化 Scheduler](guides/initialization.md) +- ### [安装 Scheduler 的方式](guides/installation.md) +- ### [扩展的完整列表](guides/extensions-list.md) + +## 使用前端框架入门 + +介绍如何在前端构建并配置标准的 Scheduler。 + +- ### [在纯 JavaScript/HTML 中的 Scheduler](guides/initialization.md) +- ### [使用 Angular 的 Scheduler](integrations/angular/howtostart-angular.md) +- ### [使用 React 的 Scheduler](integrations/react/js-scheduler-react.md) +- ### [使用 Vue.js 的 Scheduler](integrations/vue/howtostart-vue.md) +- ### [使用 Svelte 的 Scheduler](integrations/svelte/howtostart-svelte.md) + +## 服务端入门 + +展示如何在不同的服务器端平台上构建标准的 Scheduler，并让它运行。 + +- ### [使用 ASP.NET Core 的 Scheduler](integrations/dotnet/howtostart-dotnet-core.md) +- ### [使用 Node.js 的 Scheduler](integrations/node/howtostart-nodejs.md) +- ### [使用 ASP.NET MVC 的 Scheduler](integrations/dotnet/howtostart-dotnet.md) +- ### [使用 PHP 的 Scheduler](integrations/php/howtostart-plain-php.md) +- ### [使用 Laravel 的 Scheduler](integrations/php/howtostart-php-laravel.md) +- ### [使用 Slim4 的 Scheduler](integrations/php/howtostart-php-slim4.md) +- ### [使用 Salesforce LWC 的 Scheduler](integrations/salesforce/howtostart-salesforce.md) +- ### [使用 Ruby on Rails 的 Scheduler](integrations/other/howtostart-ruby.md) + +## 框架版本 + +了解如何将 Scheduler 集成到现代前端框架中。 + +- ### [React Scheduler 概览](integrations/react/overview.md) + +## 配置 Scheduler + +展示如何配置 Scheduler、创建多个 Scheduler、对 UI 进行本地化以及启用无障碍功能。 + +- ### [移动端自适应 Scheduler](guides/touch-support.md) +- ### [常用配置](guides/configuration.md) +- ### [Scheduler 标记](guides/scheduler-markup.md) +- ### [RTL 模式](guides/rtl-mode.md) +- ### [本地化](guides/localization.md) +- ### [页面上的多个 Scheduler](guides/multiple-per-page.md) +- ### [无障碍性](guides/accessibility.md) + +## 数据加载与存储 + +介绍将数据加载到 Scheduler 以及与后端集成的方式。 + +- ### [加载数据](guides/loading-data.md) +- ### [服务端集成](guides/server-integration.md) + +## 配置视图 + +展示如何配置 Scheduler 的视图与时间线。 + +- ### [视图概览](/views/) +- ### [自定义刻度](guides/custom-scales.md) +- ### [自定义视图](guides/custom-views.md) +- ### [阻塞和标记日期](guides/limits.md) + +## 配置 Lightbox（编辑表单） + +聚焦于 Lightbox 的使用及编辑器。 + +- ### [Lightbox 编辑器](guides/lightbox-editors.md) +- ### [自定义编辑器](guides/custom-lightbox-editor.md) +- ### [Lightbox 操作](guides/lightbox-editors-manipulations.md) +- ### [完全自定义 Lightbox](guides/custom-details-form.md) +- ### [更改按钮](guides/changing-lightbox-buttons.md) + +## 管理事件 + +涵盖对事件对象的操作。 + +- ### [Event Object Operations](guides/event-object-operations.md) +- ### [Adding and Deleting Events](guides/adding-events.md) +- ### [Filtering Events](guides/filtering.md) +- ### [Drag-and-Drop Operations](guides/drag-between.md) +- ### [Recurring Events](guides/recurring-events.md) +- ### [Read-Only Mode](guides/readonly.md) +- ### [Validation](guides/validation.md) +- ### [Preventing Collisions](guides/collisions.md) + +## 自定义事件 + +描述如何自定义事件的外观和行为。 + +- ### [Event Box](guides/custom-events-display.md) +- ### [Event Color](guides/custom-events-color.md) +- ### [Event Content](guides/custom-events-content.md) +- ### [Tooltips](guides/tooltips.md) +- ### [Edit and Select Bars](guides/customizing-edit-select-bars.md) +- ### [Sizing](guides/sizing.md) + +## 导出与导入数据 + +涵盖数据导入/导出的格式和技术。 + +- ### [Google 日历集成](integrations/google-calendar/google-calendar-sync.md) +- ### [导出为 PDF](export/pdf.md) +- ### [导出为 PNG](export/png.md) +- ### [导出为 Excel 和 iCal](export/excel.md) +- ### [序列化格式](export/serialization.md) + +## 外观与样式 + +介绍 Scheduler GUI 的样式选项。 + +- ### [皮肤](guides/skins.md) +- ### [模板](guides/templates.md) +- ### [自定义皮肤](guides/custom-skins.md) + +## 日期处理 + +讨论日期格式和相关操作。 + +- ### [日期格式规范](guides/settings-format.md) +- ### [日期运算](guides/date-formats.md) + +## 特殊扩展与版本 + +带你了解可选扩展。 + +- ### [Mini Calendar](guides/minicalendar.md) +- ### [弹出消息与模态框](guides/popups-and-modals.md) +- ### [多人实时更新](guides/multiuser-live-updates.md) +- ### [多个用户](guides/multiple-users.md) + +## 用户界面指南 + +从最终用户的角度描述 Scheduler 界面。 + +- ### [Scheduler GUI](guides/user-interface.md) + +
\ No newline at end of file diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/initialization.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/initialization.md index 48f82980..420a717d 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/guides/initialization.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/initialization.md @@ -1,15 +1,15 @@ ---- -title: "dhtmlxScheduler 在原生 JS/HTML 中的使用" -sidebar_label: "dhtmlxScheduler 在原生 JS/HTML 中的使用" +--- +title: "Plain JS/HTML 中的 dhtmlxScheduler" +sidebar_label: "快速入门" --- import { FrameworkIcon } from '@site/src/components/FrameworkIcon'; -# dhtmlxScheduler 在原生 JS/HTML 中的使用 +# Plain JS/HTML 中的 dhtmlxScheduler -在使用 dhtmlxScheduler 构建应用时，第一步是将 Scheduler 设置并显示在页面上。 +当你使用 dhtmlxScheduler 开发应用时，第一步就是初始化，简单来说，就是在页面上显示 Scheduler。 -本指南介绍如何使用原生 JS 和 HTML 初始化 dhtmlxScheduler。若需与前端框架集成，请参考以下指南: +本指南介绍在纯 JavaScript 和 HTML 中初始化 dhtmlxScheduler。你也可以查看关于与前端框架集成的指南：
@@ -17,7 +17,7 @@ import { FrameworkIcon } from '@site/src/components/FrameworkIcon';
React
- Use the ready-made ReactScheduler component with props and events. + 使用带有 props 和事件的现成 ReactScheduler 组件。
@@ -25,7 +25,7 @@ import { FrameworkIcon } from '@site/src/components/FrameworkIcon';
Angular
- Integrate Scheduler into Angular projects using a thin wrapper. + 通过一个薄包装器将 Scheduler 集成到 Angular 项目中。
@@ -33,7 +33,7 @@ import { FrameworkIcon } from '@site/src/components/FrameworkIcon';
Vue
- Use Scheduler inside Vue apps with a small wrapper and reactive configuration. + 在 Vue 应用中使用 Scheduler，配合一个小包装和响应式配置。
@@ -41,7 +41,7 @@ import { FrameworkIcon } from '@site/src/components/FrameworkIcon';
Svelte
- Embed Scheduler in Svelte with a simple component that binds config and events. + 使用一个简单的组件将 Scheduler 嵌入到 Svelte，并绑定配置和事件。
@@ -49,24 +49,25 @@ import { FrameworkIcon } from '@site/src/components/FrameworkIcon';
Salesforce
- Use Scheduler in Salesforce Lightning Web Components and connect it to org data. + 在 Salesforce Lightning Web Components 中使用 Scheduler，并将其连接到组织数据。
-在页面上初始化 Scheduler 有两种方式: -- [通过 Scheduler 的标记（markup）方式初始化](#initializing-scheduler-via-markup) -- [通过 header 配置属性初始化](#initializing-scheduler-via-header-config) +在页面上初始化 Scheduler 有两种方式： + +- [通过 scheduler 的标记](#initializing-scheduler-via-markup) +- [通过 header 配置属性](#initializing-scheduler-via-header-config) -## 通过标记方式初始化 Scheduler {#initializing-scheduler-via-markup} +## 通过标记初始化 Scheduler -要通过标记（markup）方式在页面上设置一个基础的 Scheduler，请按照以下 3 个步骤操作: +通过标记在页面上显示一个基本的 Scheduler，请按照 3 个步骤： -1. 在页面中引入 [dhtmlxScheduler 代码文件](#required-code-files)。 -2. 在页面中添加一个 DIV 容器，并为其元素添加必要的子 DIV。 -3. 使用 [init](api/method/init.md) 方法在创建的容器中初始化 dhtmlxScheduler。该方法接收一个 HTML 容器（或其 id），Scheduler 将在此容器中渲染。 +1. 在页面中包含 [dhtmlxScheduler 代码文件](#required-code-files)。 +2. 在页面创建一个 DIV 容器，并为其元素定义相关的 DIV 容器。 +3. 使用 [init](api/method/init.md) 方法在新创建的容器中初始化 dhtmlxScheduler。该方法的参数是 Scheduler 将要显示的 HTML 容器（或其 id）。 ~~~html @@ -91,7 +92,7 @@ import { FrameworkIcon } from '@site/src/components/FrameworkIcon';
- @@ -104,16 +105,16 @@ import { FrameworkIcon } from '@site/src/components/FrameworkIcon'; [Basic initialization](https://docs.dhtmlx.com/scheduler/samples/01_initialization_loading/01_basic_init.html) -## 通过 header 配置初始化 Scheduler {#initializing-scheduler-via-header-config} +## 通过 header 配置初始化 Scheduler -如果你希望让 scheduler [自适应响应式](guides/initialization.md#making-scheduler-responsive)，推荐使用此方法。 +你需要通过这种方式初始化 scheduler 以实现 [响应式](guides/initialization.md#making-scheduler-responsive)。 -要在页面上设置一个基础的 Scheduler，请按照以下步骤操作: +要在页面上显示一个基本的 Scheduler，请执行以下步骤： -1. 在页面中引入 [dhtmlxScheduler 代码文件](#required-code-files)。 -2. 在页面中添加一个 DIV 容器。 -3. 在 [header](api/config/header.md) 配置对象中定义 scheduler 的结构。 -4. 使用 [init](api/method/init.md) 方法在容器中初始化 dhtmlxScheduler，将容器（或其 id）作为参数传递。 +1. 在页面中包含 [dhtmlxScheduler 代码文件](#required-code-files)。 +2. 创建一个 DIV 容器。 +3. 在 [header](api/config/header.md) 配置对象中指定调度器的结构。 +4. 使用 [init](api/method/init.md) 方法在新创建的容器中初始化 dhtmlxScheduler。该方法的参数是 Scheduler 将要显示的 HTML 容器（或其 id）。 ~~~html @@ -139,7 +140,7 @@ import { FrameworkIcon } from '@site/src/components/FrameworkIcon'; "today", "next" ]; - scheduler.init('scheduler_here',new Date(2020,0,1),"week"); /*!*/ + scheduler.init('scheduler_here',new Date(2027,0,1),"week"); /*!*/ ~~~ @@ -148,34 +149,33 @@ import { FrameworkIcon } from '@site/src/components/FrameworkIcon'; [Responsive scheduler](https://docs.dhtmlx.com/scheduler/samples/01_initialization_loading/13_touch_ui.html) -## 所需代码文件 {#required-code-files} +## 需要的代码文件 -需要引入的文件有: +所需的代码文件是： - *dhtmlxscheduler.js* -- *dhtmlxscheduler.css* （你也可以在 [스킨(Skins)](guides/skins.md) 中查看可用的皮肤） +- *dhtmlxscheduler.css* (你也可以 [探索可用的皮肤](guides/skins.md)) ~~~html ~~~ -以下是 dhtmlxScheduler 包结构的简要说明，帮助你找到这些文件: +让我们快速了解 dhtmlxScheduler 包的结构，看看文件在哪里： -- sources - 包含库的源代码文件。未压缩，便于阅读，主要用于调试。 +- sources - 库的源代码文件。文件未经过压缩，易于阅读。该包主要用于组件调试。 :::note -请注意，Scheduler 库的 **试用版** 不包含 **sources** 文件夹。 +请注意，**Trial** 版本的 Scheduler 库不包含 **sources** 文件夹。 ::: -- samples - 包含代码示例。 -- codebase - 包含库的压缩代码文件。体积更小，适合生产环境使用。在你的项目中应使用该文件夹下的文件。 +- samples - 代码示例。 +- codebase - 库的打包代码文件。这些文件体积更小，适用于生产环境。 在你的应用中你需要使用这个文件夹中的文件。 -## Scheduler 尺寸设置 +## Scheduler 尺寸 -Scheduler 会填满其容器元素的整个尺寸（上述示例中的 *scheduler_here* div），但不会自动扩大容器本身。 -这意味着如果你没有为容器设置高度，或者高度为 0，scheduler 也会有 0 高度，从而不可见。 +Scheduler 会占据其容器元素的全部尺寸（上面的示例中的 *scheduler_here* div），而不会自动扩展。也就是说，如果你不指定容器高度，或将其设为 0，Scheduler 也将具有零高度，无法显示。 -在我们的示例中，通常通过为 document body 和 scheduler 容器都设置 100% 的宽高，使 scheduler 占满整个屏幕: +在我们的示例中，我们通常通过将文档主体和 Scheduler 容器元素都设置为 100% 宽高来实现全屏 Scheduler： ~~~html -
+
~~~ -如果 *scheduler_here* 元素被放置在一个默认尺寸设置的 div 内，可能会出现问题: +如果把 *scheduler_here* 元素放在具有默认尺寸的 div 中，这很容易出错，导致 Scheduler 显示不正确： ~~~html ~~~ -此外，还需要一些 JavaScript 来为 sticky 时间刻度设置正确的 top 值，使其正好位于导航面板下方。 +此外，你需要一些 JavaScript 代码来确保粘性时间刻度的正确顶部位置，使其正好位于导航面板下方。 -由于导航面板的高度可能因样式和内容不同而变化，因此应动态计算其高度，并将其作为 header 的 top 值应用，如下所示: +由于导航面板是可扩展的，并且可以根据其他样式和内容调整其高度，因此你需要动态计算其高度并将其应用为头部的顶部坐标，具体如下： ~~~js scheduler.attachEvent("onViewChange", function(){ @@ -295,33 +295,33 @@ scheduler.attachEvent("onViewChange", function(){ }); ~~~ -你可以在下面的代码片段中查看完整演示: +在下面的片段中查看完整演示： -**Related sample** [Container autoresize and sticky header](https://snippet.dhtmlx.com/syo8wm9s) +**相关示例** [Container autoresize and sticky header](https://snippet.dhtmlx.com/syo8wm9s) -## 使 Scheduler 响应式 {#making-scheduler-responsive} +## 让 Scheduler 响应式 -当通过 [header 配置属性](#initializing-scheduler-via-header-config) 初始化 Scheduler 时，可以选择适合客户端屏幕尺寸的表头布局。同时还会应用某些样式，使元素和字体能够很好地适配较小的屏幕。 +当你通过 [header 配置属性](#initializing-scheduler-via-header-config) 初始化 Scheduler 时，你将能够选择适合客户端屏幕尺寸的头部结构。它 também 会应用某些样式，使小屏设备上的元素与字体尺寸具有响应性。 -更多信息请参阅专门的文章:[Mobile Responsive Scheduler](guides/touch-support.md)。 +你可以在单独的文章中找到更多细节：[Mobile Responsive Scheduler](guides/touch-support.md). -## 在 ES6/7 和 TypeScript 应用中导入文件 {#import-files-into-es67-and-typescript-apps} +## 将文件导入 ES6/7 与 TypeScript 应用 -使用以下命令导入文件: +使用以下命令导入文件： ~~~js import { scheduler } from 'dhtmlx-scheduler'; ~~~ -对于 Commercial、Enterprise 或 Ultimate 版本，导入方式如下: +对于 Commercial、Enterprise 或 Ultimate 版本，命令如下所示： ~~~js import { scheduler, Scheduler } from 'dhtmlx-scheduler'; ~~~ -## 在 Vite 中使用 Scheduler +## 与 Vite 一起使用 -如果你的项目使用 Vite，请在 **vite.config.js** 文件中添加以下设置，确保 Scheduler 能正确集成到应用中: +如果你在项目中使用 Vite，以下设置是为了确保 Scheduler 正确被包含在应用中所必需的，在 **vite.config.js** 文件中添加： ~~~js title="vite.config.js" optimizeDeps: { @@ -331,37 +331,38 @@ optimizeDeps: { } ~~~ -在 RequireJS 应用中引入文件 + +将文件包含在基于 RequireJS 的应用中 ------------------------------------------- -要在 RequireJS 应用中添加 dhtmlxScheduler 文件，请参考以下示例: +要在 RequireJS 基础的应用中包含 dhtmlxScheduler 文件，请遵循下面示例中的逻辑： ~~~js requirejs(["codebase/dhtmlxscheduler"], function(dhx){ - var scheduler = dhx.scheduler; - var Scheduler = dhx.Scheduler;// 适用于 Enterprise 版本 + const scheduler = dhx.scheduler; + const Scheduler = dhx.Scheduler;// for Enterprise builds scheduler.init('scheduler_here',new Date(),"week"); scheduler.parse([ { - id: 1, text: "Event 1", start_date: "2022-07-15 09:00", - end_date: "2022-07-15 10:00" + id: 1, text: "Event 1", start_date: "2027-07-15 09:00", + end_date: "2027-07-15 10:00" }, { - id: 2, text: "Event 2", start_date: "2022-07-15 10:00", - end_date: "2022-07-15 11:00" + id: 2, text: "Event 2", start_date: "2027-07-15 10:00", + end_date: "2027-07-15 11:00" } ]); }); ~~~ -dhtmlxScheduler 库返回一个对象，包含 `scheduler` 和 `Scheduler`（适用于 Commercial、Enterprise 或 Ultimate 版本）--它们分别对应于 [此处](guides/multiple-per-page.md) 描述的 *scheduler* 和 *Scheduler* 对象。 +dhtmlxScheduler 库将返回一个包含字段 `scheduler` 和 `Scheduler` 的对象（在 Commercial、Enterprise 或 Ultimate 版本中）——描述的 *scheduler* 与 *Scheduler* 对象请参见 [此处](guides/multiple-per-page.md)。 :::note -在 RequireJS 中使用 Scheduler 及自定义扩展时，请确保为 RequireJS 指定 `shim` 配置，并正确声明扩展对 Scheduler 的依赖。 +在 RequireJS 中使用 Scheduler 与自定义扩展时，你应为 RequireJS 指定 `shim` 配置，并直接在其中设置扩展对 Scheduler 的依赖。 ::: -下面的示例展示了如何正确设置自定义扩展文件 *custom_tooltip_plugin.js*: +下面的示例演示了如何正确设置自定义扩展文件 *custom_tooltip_plugin.js*： ~~~js requirejs.config({ @@ -376,25 +377,24 @@ requirejs.config({ requirejs(["dhtmlxscheduler"], function (dhx) { - var scheduler = dhx.scheduler; + const scheduler = dhx.scheduler; scheduler.init('scheduler_here',new Date(),"week"); scheduler.parse([ { - id: 1, text: "Event 1", start_date: "2022-07-15 09:00", - end_date: "2022-07-15 10:00" + id: 1, text: "Event 1", start_date: "2027-07-15 09:00", + end_date: "2027-07-15 10:00" }, { - id: 2, text: "Event 2", start_date: "2022-07-15 10:00", - end_date: "2022-07-15 11:00" + id: 2, text: "Event 2", start_date: "2027-07-15 10:00", + end_date: "2027-07-15 11:00" } ]); }); ~~~ -确保包内任何文件的模块名指定为 *包的 codebase 文件夹内的相对路径* 加上 *文件名*，例如: - -**核心库:** +请检查包内任意文件的模块名是否按照“代码库的 codebase 文件夹内的相对路径”加“文件名”的形式指定，例如： -- "dhtmlxscheduler": "./vendor/dhtmlxscheduler/dhtmlxscheduler" +**core library:** +- "dhtmlxscheduler": "./vendor/dhtmlxscheduler/dhtmlxscheduler" \ No newline at end of file diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/integration-with-bootstrap.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/integration-with-bootstrap.md deleted file mode 100644 index 8d20e83a..00000000 --- a/i18n/zh/docusaurus-plugin-content-docs/current/guides/integration-with-bootstrap.md +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: "与 Bootstrap 集成" -sidebar_label: "与 Bootstrap 集成" ---- - -# 与 Bootstrap 集成 - -Scheduler 库可以轻松集成到 Bootstrap 框架中。要在基于 Bootstrap 的应用中引入 Scheduler，请按照以下步骤操作: - -1. 在您的应用中添加 dhtmlxScheduler 脚本: - -~~~html - -~~~ - -2. 使用 Bootstrap 组件设置 HTML 结构，包括 Scheduler 容器和头部元素，如下所示: - -~~~html -
-
-
- dhtmlxScheduler -
-
- - -
- -
-
- -~~~ - -3. 按常规方式初始化并配置 Scheduler: - -~~~js -scheduler.plugins({ - year_view: true, -}); -scheduler.config.first_hour = 8; -scheduler.config.limit_time_select = true; - -scheduler.init('scheduler_here',new Date(2017,5,30),"week"); -~~~ - - -[Bootstrap layout](https://docs.dhtmlx.com/scheduler/samples/10_integration/08_bootstrap.html) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/integration-with-dhtmlxmessage.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/integration-with-dhtmlxmessage.md deleted file mode 100644 index 568b8edf..00000000 --- a/i18n/zh/docusaurus-plugin-content-docs/current/guides/integration-with-dhtmlxmessage.md +++ /dev/null @@ -1,363 +0,0 @@ ---- -title: "弹出消息与模态框" -sidebar_label: "弹出消息与模态框" ---- - -# 弹出消息与模态框 - -在 Scheduler 中，消息用于通知用户错误、确认或拒绝操作、选择选项等。Scheduler 的消息基于 [dhtmlxMessage 仓库的一个分支](https://github.com/DHTMLX/message)，因此 dhtmlxMessage 的所有特性同样适用于 dhtmlxScheduler 的消息。 - -消息主要分为两类:[简单弹出消息框](#basicpopupmessage) 和带有按钮、可阻止应用交互的 [模态消息框](#modalmessageboxes)。 - -模态消息框可分为三种类型: - -- [警告消息框](#alert) -- [确认消息框](#confirm) -- [模态框](#modal) - -## 简单弹出消息框 - -要显示一个基本的模态消息框，请使用 [scheduler.message](api/method/message.md) 方法。唯一必需的参数是消息文本: - -~~~js -scheduler.message("The event is updated"); -~~~ - -消息框有三种类型: - -- 默认消息框（**type:"info"**） - -![default_message](/img/default_message.png) - -- 错误消息框（**type:"error"**） - -![error_message](/img/error_message.png) - -- 警告消息框（**type:"warning"**） - -![warning_message](/img/warning_message.png) - -要创建特定类型的消息框，请将 *type* 属性设置为相应的值: - -~~~js -// 创建错误消息框 -scheduler.message({ - text: "Click on the buttons to explore Scheduler message types", - expire: -1, - type: "error" -}); -~~~ - - -[Different types of popups and modal boxes](https://docs.dhtmlx.com/scheduler/samples/09_api/11_popups_and_messages.html) - - -如需自定义消息框的外观，可以通过 type 参数指定 CSS 类，详见[此处](#styling)。 - -### 消息框的位置 - -默认情况下，弹出消息框出现在窗口的右上角。与 [模态消息框](#modalmessageboxes) 不同，弹出消息框不会阻止与应用的交互。可通过设置 **scheduler.message.position** 属性更改位置: - -~~~js -scheduler.message.position = 'bottom'; -~~~ - -可选的位置值有: - -- **top** - 在右上角显示消息框（默认） -- **bottom** - 在右下角显示消息框 -- **left** - 在 Scheduler 下方左侧显示消息框 -- **right** - 在 Scheduler 下方右侧显示消息框 - -### 消息持续时间 - -通过设置 *expire* 参数（单位:毫秒），可以控制消息框显示的时长。默认值为 4000 毫秒。 - -如需更改显示时长或阻止消息自动消失，将 *expire* 设置为 "-1"。此时，只有点击消息框才会关闭。 - -~~~js -scheduler.message({ - type:"error", - text:"Invalid data format", - expire:10000 -}); -~~~ - -### 通过 API 隐藏消息框 - -如需在消息未到期前手动关闭特定消息框，请使用 **scheduler.message.hide(boxId)** 方法。它接收一个参数: - -- **boxId** - 创建消息框时分配的 ID - -~~~js -scheduler.message({ - id:"myBox", - text:"Page is loaded" -}); - -scheduler.message.hide("myBox"); -~~~ - -## 模态消息框 - -模态消息框会阻止与父应用的交互，直到用户点击按钮完成操作。点击按钮后，消息框关闭，并执行任何回调函数。 - -模态消息框分为三种: - -- [警告消息框](#alert) -- 带有单个按钮的警告框 -- [确认消息框](#confirm) -- 带有两个按钮（确认或取消）的确认框 -- [模态框](#modal) -- 可自定义按钮数量的模态框 - -常用属性包括: - -- **id** - 消息框的 ID -- **title** - 标题文本 -- **type** - 消息类型（如 warning 或 error） -- **text** - 消息正文 -- **ok** - "OK" 按钮文本 -- **cancel** - "Cancel" 按钮文本（仅用于确认框） -- **callback** - 按钮点击时调用的函数，根据按钮返回 *true* 或 *false* -- **position** - 目前仅支持 "top"；其他值会使消息框居中 -- **width** - 模态框宽度（CSS [长度](https://developer.mozilla.org/en-US/docs/Web/CSS/length) 或 [百分比](https://developer.mozilla.org/en-US/docs/Web/CSS/percentage)，如 "100px"、"50%"） -- **height** - 模态框高度（CSS [长度](https://developer.mozilla.org/en-US/docs/Web/CSS/length) 或 [百分比](https://developer.mozilla.org/en-US/docs/Web/CSS/percentage)，如 "100px"、"50%"） - -## 警告消息框 (#alert) - -![alert](/img/alert.png) - -警告框包含一个 "OK" 按钮。可通过 *ok* 参数设置按钮文本: - -- 简写形式（仅指定消息文本，*text* 隐式设置，其他参数为默认值）: - -~~~js -scheduler.alert("Text"); -~~~ - -- 完整形式（可设置多个参数，未指定的采用默认值）: - -~~~js -scheduler.alert({ - text: "some text", - title: "Alert", - ok: "Ok", - callback: function(){...} -}); -~~~ - -## 确认消息框 (#confirm) - -![confirm](/img/confirm.png) - -确认框包含两个按钮:"OK" 和 "Cancel"，按钮文本通过相应属性设置。 - -- 简写形式 - -~~~js -scheduler.confirm("ConfirmText"); -~~~ - -- 完整形式 - -~~~js -scheduler.confirm({ - title:"Confirm", - text:"This is a simple confirm", - ok:"Ok", - cancel:"Cancel", - callback: function(result){ - if(result){ - scheduler.message("You clicked Ok"); - }else{ - scheduler.message("You clicked Cancel"); - } - } -}); -~~~ - -## 模态框 (#modal) - -![modalbox](/img/modalbox.png) - -模态框具有以下特点: - -- *text* 支持任意 *HTML* 内容 -- 支持通过 *buttons* 数组定义多个按钮，每个按钮有文本标签 -- *callback* 函数接收被点击按钮的索引作为参数 - -~~~js -scheduler.modalbox({ - title:"Settings", - text: " ... html code here... ", - buttons:["Save", "Defaults", "Cancel"], - callback: function(result){ - scheduler.alert(result); - } -}); -~~~ - -### 配置模态框按钮 - -配置模态框按钮有两种主要方式: - -- 简写形式: - -~~~js -scheduler.modalbox({ - // 其他设置 - buttons:["Save", "Delete", "Cancel"], - callback: function(result){ - switch(result){ - case "0": - // Save - break; - case "1": - // Delete - break; - case "2": - // Cancel - break; - } - } -}); -~~~ - -在此形式下，回调函数接收被点击按钮的字符串索引（"0"、"1"、"2" ...）。每个按钮会基于小写标签生成 CSS 类，例如:*scheduler_**save**_button*、*scheduler_**delete**_button*、*scheduler_**cancel**_button*。 - -这些类可用于按钮样式自定义: - -~~~js -.scheduler_delete_button div{ - background:red; -} -~~~ - -如果多个弹窗使用相同按钮名但需不同样式，可使用 **type** 属性: - -~~~js -scheduler.modalbox({ - // 其他设置 - type:"special_popup", - buttons:["Save", "Delete", "Cancel"] -}); -~~~ - -**type** 的值会加上 "scheduler_" 前缀，并作为类名添加到弹窗元素上: - -~~~js -.scheduler_special_popup .scheduler_delete_button div{ - background:red; -} -~~~ - -- 完整形式: - -你可以通过详细配置，明确指定按钮标签、CSS 类和回调值: - -~~~js -scheduler.modalbox({ - // 其他设置 - buttons: [ - { label:"Save", css:"link_save_btn", value:"save" }, - { label:"Cancel", css:"link_cancel_btn", value:"cancel" }, - { label:"Delete", css:"link_delete_btn", value:"delete" } - ], - callback: function(result){ - switch(result){ - case "save": - // Save - break; - case "cancel": - // Cancel - break; - case "delete": - // Delete - break; - } - } -}); -~~~ - -仅 **label** 参数为必需；**css** 和 **value** 可选。若未指定，CSS 类会根据小写标签自动生成，回调值为按钮索引。 - -**css** 类会加上 "scheduler_" 前缀，并应用到按钮元素: - -~~~js -.scheduler_link_delete_btn div{ - background:red; -} -~~~ - -## 隐藏模态消息框 - -如需手动关闭模态消息框，请使用 **scheduler.modalbox.hide()** 方法，并传入模态框的容器元素: - -~~~js -var box = scheduler.modalbox({ - title: "Settings", - text: " ... html code here... ", - buttons: ["Save", "Defaults", "Cancel"], - callback: function(result){ - scheduler.alert(result); - } -}); - -scheduler.modalbox.hide(box); -~~~ - -对于 **alert** 和 **confirm** 框，同样使用 **scheduler.modalbox.hide()** 方法: - -~~~js -var box = scheduler.confirm({ - text: "Continue?", - ok:"Yes", - cancel:"No", - callback: function(result){ - scheduler.message("Result: "+result); - } -}); - -scheduler.modalbox.hide(box); -~~~ - -## 样式自定义 - -你可以通过定义 CSS 样式自定义任意消息框的外观。通常通过 *type* 参数指定 CSS 类:创建 CSS 类并将其名称赋值给 *type*。 - -关于 'type' 参数，请注意以下事项: - -- 若要自定义 alert 和 confirm 框，请使用与窗口相关的方法初始化。 -- 若要自定义消息框，请使用通用方法初始化。 -- CSS 类名应以 'scheduler-' 前缀开头。 -- 为确保样式生效，请使用如 **.scheduler-some div** 的选择器定位 scheduler 消息内部元素。 - -示例: - -~~~js - - -scheduler.message({ type:"myCss", text:"some text" }); -~~~ - -## 模态窗口与键盘交互 - -模态框的键盘行为由 **scheduler.message.keyboard** 属性控制，默认值为 *true*。 - -启用时，模态框会阻止页面上的大多数键盘事件。仅以下按键可用: - -- "空格键"和"回车键" -- 在模态框中触发 *true* 结果 -- "Esc" -- 触发 *false* 结果 - -将 **scheduler.message.keyboard** 设为 *false* 可关闭此阻止，允许完整键盘输入，适用于在模态框中输入数据: - -~~~js -scheduler.message.keyboard = false; -scheduler.modalbox({...}); -~~~ - -这样即可在模态窗口中正常使用键盘。 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/jquery-integration.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/jquery-integration.md deleted file mode 100644 index df378318..00000000 --- a/i18n/zh/docusaurus-plugin-content-docs/current/guides/jquery-integration.md +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: "jQuery 集成" -sidebar_label: "jQuery 集成" ---- - -# jQuery 集成 - -从 4.0 版本开始，dhtmlxScheduler 支持与 jQuery 集成。 - -以下是如何使用 jQuery 初始化一个标准调度器的方法: - -~~~js -$(function(){ - $(".myscheduler").dhx_scheduler({ - date:new Date(2019,4,25), - mode:"month" - }); - - scheduler.load("data/events"); -}); -~~~ - -在此示例中: - -- **".myscheduler"** - 一个 jQuery 兼容的 CSS 选择器，用于指定调度器要创建的容器（在 PRO 版本中，可以同时在多个容器中初始化调度器）。 -- **dhx_scheduler()** 方法用于创建 dhtmlxScheduler 的实例。它接受一个配置对象作为参数: - - **date** - (*Date*) 设置调度器的初始日期（默认为当前日期） - - **mode** - (*string*) 指定初始视图（默认为 "week"） - - 其他配置项（通常通过 scheduler.config.xxxxx 设置）也可以通过这种方式传递 -:::note -通过 jQuery 方法初始化的调度器支持与标准调度器相同的配置和 API。 -::: - - -[JQuery integration](https://docs.dhtmlx.com/scheduler/samples/10_integration/06_jquery.html) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/keyboard-navigation.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/keyboard-navigation.md index 9f871a4b..a3026415 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/guides/keyboard-navigation.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/keyboard-navigation.md @@ -5,11 +5,11 @@ sidebar_label: "键盘导航" # 键盘导航 -Scheduler 及其各元素可通过单独按键或组合键进行访问。本文将全面介绍 Scheduler 的键盘导航，包括焦点行为、内置快捷键以及如何自定义快捷键。 +您可以通过按键或按键组合来访问 Scheduler 及其元素。本教程将为您提供有关 Scheduler 键盘导航的全部必要信息，包含焦点行为、就绪快捷键的使用以及自定义快捷键的创建等要点。 -## 启用功能 {#enablingthefunctionality} +## 启用功能 -要在 Scheduler 中启用键盘导航，只需在页面上激活 **key_nav** 扩展。 +要在 Scheduler 中使用键盘导航，需要在页面上启用 **key_nav** 扩展。 ~~~js scheduler.plugins({ @@ -17,36 +17,37 @@ scheduler.plugins({ }); ~~~ -## 键盘导航中的焦点行为 {#focusbehaviorduringkeyboardnavigation} +## 键盘导航过程中的焦点行为 -### Scheduler 上的焦点 +### Focus on Scheduler -按下 Tab 键会将焦点设置到 Scheduler，就像其他元素一样。获得焦点后，可以使用方向键和其他快捷键在 Scheduler 内部导航。 +当按下 Tab 键时，Scheduler 的焦点与其他普通元素获得焦点的方式相同。 +之后要在 Scheduler 中进行导航，可以使用箭头键及其他按键。 -再次按下 Tab 键会将焦点从 Scheduler 移到页面上的其他元素。 +当再次按下 Tab 键时，焦点离开 Scheduler，移动到页面的其他位置。 -### 模态窗口上的焦点 +### Focus on a modal window -当模态窗口（如 lightbox 或确认窗口）打开时，焦点会从 Scheduler 转移到该窗口，可以像在常规表单中一样进行导航。关闭窗口后，焦点会返回到 Scheduler。 +当一个模态窗口（如灯箱、确认窗口）打开时，焦点从 Scheduler 移到该窗口，导航在其中就像在简单表单中一样进行。窗口关闭后，焦点返回到 Scheduler。 -如需通过编程方式将焦点返回到 Scheduler，请使用 [focus](api/method/focus.md) 方法: +要将焦点返回到 Scheduler，需要使用 [focus](api/method/focus.md) 方法。 ~~~js scheduler.focus(); ~~~ -当 Scheduler 重新获得焦点时，焦点会放在内部的活动元素、第一行或最近选中的项目上。 +当 Scheduler 再次获得焦点时，它会将焦点放在内部的活动元素上，或者放在第一行，或放在最近被选中的元素上。 -模态窗口内的默认导航操作包括: +模态窗口中的默认导航操作如下： - *Enter* - 确认并关闭 -- *Escape* - 关闭且不保存更改 +- *Escape* - 关闭且不进行任何更改 -如果焦点在表单按钮上，按下 *Space* 或 *Enter* 会触发该按钮的操作，而不是默认行为。 +如果焦点设在表单中的某个按钮上，按下 *Space* 或 *Enter* 将调用聚焦中的按钮，而不是执行该操作。 -## 焦点单元格的样式 {#stylingcellsinfocus} +## 对获得焦点的单元格进行样式化 -被聚焦的单元格默认以灰色/黄色背景高亮显示。要自定义此样式，可修改 **.dhx_focus_slot** CSS 类: +当您将焦点设置在单元格上时，它会以灰色/黄色高亮显示。如果需要更改此样式，请使用 **.dhx_focus_slot** CSS 类： ~~~js ~~~ -## 作用域 {#scopes} +## 作用域 (Scopes) -键盘操作取决于上下文，即可以为 Scheduler 内的不同元素（作用域）分配不同的快捷键。可用的作用域有: +在按键点击时调用的动作取决于上下文。这意味着可以将不同的动作附加到不同的元素（scopes）。 +Scheduler 中有以下上下文元素（scopes）： - **"scheduler"** - 整个 Scheduler -- **"timeSlot"** - 时间槽 -- **"event"** - 事件 +- **"timeSlot"** - 一个时间槽 +- **"event"** - 一个事件 - **"minicalDate"** - 迷你日历中的日期 - **"minicalButton"** - 迷你日历中的箭头按钮 -如果同一个快捷键分配给多个作用域，则附加在更具体元素上的快捷键优先生效。例如，事件上的快捷键会覆盖分配给整个 Scheduler 的相同快捷键。 +如果同一个快捷键绑定到了多个作用域，更具体的快捷键将被触发。这意味着如果同一个快捷键同时绑定到 Scheduler 和其某个元素上，绑定到元素上的快捷键将先于绑定到整个 Scheduler 的快捷键被调用。 ### 添加快捷键 -要添加新的键盘快捷键，请使用 [addShortcut](api/method/addshortcut.md) 方法，需传入三个参数: +要创建一个新的键盘快捷键，需要使用 [addShortcut](api/method/addshortcut.md) 方法并向其传递三个参数： -- **shortcut** - (*string*) 按键或组合键 -- **handler** - (*function*) 快捷键触发时执行的函数 -- **scope** - (*string*) 绑定处理函数的上下文元素 +- **shortcut** - (*string*) 一个新的快捷键或按键组合名称 +- **handler** - (*function*) 在快捷键被触发时调用的处理函数 +- **scope** - (*string*) 要将处理函数绑定到的上下文元素名称 ~~~js scheduler.addShortcut("shift+w", function(e){ - var target = e.target; + const target = e.target; if(target.closest("[event_id]")) - var eventId = target.getAttribute("event_id"); + const eventId = target.getAttribute("event_id"); if(eventId) scheduler.showQuickInfo(eventId); @@ -89,75 +91,76 @@ scheduler.addShortcut("shift+w", function(e){ ### 移除快捷键 -要从某个作用域移除快捷键，请使用 [removeShortcut](api/method/removeshortcut.md) 方法，需传入两个参数: +要从某个作用域中移除快捷键，需要使用 [removeShortcut](api/method/removeshortcut.md) 方法。该方法接受两个参数： -- **shortcut** - (*string*) 快捷键的按键或组合键 -- **scope** - (*string*) 要移除快捷键的上下文元素 +- **shortcut** - (*string*) 快捷键名称或按键组合 +- **scope** - (*string*) 要附加该快捷键的上下文元素名称 ~~~js scheduler.removeShortcut("shift+w","event"); ~~~ -### 获取快捷键处理函数 +### 获取快捷键处理程序 -可以使用 [getShortcutHandler](api/method/getshortcuthandler.md) 获取某个快捷键的处理函数，需传入: +您可以使用 [getShortcutHandler](api/method/getshortcuthandler.md) 方法获取快捷键的处理程序。该方法接受两个参数： -- **shortcut** - (*string*) 按键或组合键 -- **scope** - (*string*) 快捷键绑定的上下文元素 +- **shortcut** - (*string*) 快捷键名称或按键组合 +- **scope** - (*string*) 要附加该快捷键的上下文元素名称 ~~~js -var shortcut_handler = scheduler.getShortcutHandler("shift+w","event"); +const shortcut_handler = scheduler.getShortcutHandler("shift+w","event"); ~~~ -此方法返回处理该快捷键的函数。 +该方法返回一个函数，表示快捷键调用时的处理程序。 -## 快捷键语法 {#shortcutsyntax} +## 快捷键语法 -快捷键可以由以下几种组合构成: +键盘快捷键可以由以下按键或按键组合组成： -- 修饰键加字符键（如 "ctrl+a"）； -- 修饰键加非字符键（如 "ctrl+space"）； -- 单个字符键（如 "a"）； -- 单个非字符键（如 "space"）。 +- 修饰键 + 字符键（"ctrl+a"）； +- 修饰键 + 非字符键（"ctrl+space"）； +- 字符键（"a"）； +- 非字符键（"space"） -如需让多个组合键触发同一操作，可用逗号分隔，如 "ctrl+a, ctrl+space"。 +一个操作可以有多组按键组合。在这种情况下，所有组合将以逗号分隔列出： "ctrl+a, ctrl+space"。 -### 快捷键支持的按键列表 +### 支持在快捷键中使用的按键列表 -- 修饰键:**shift**、**alt**、**ctrl**、**meta** -- 非字符键:**backspace**、**tab**、**enter**、**esc**、**space**、**up**、**down**、**left**、**right**、**home**、**end**、**pageup**、**pagedown**、**delete**、**insert**、**plus**、**f1-f12** +- 修饰键：**shift**, **alt**, **ctrl**, **meta**; +- 非字符键：**backspace**, **tab**, **enter**, **esc**, **space**, **up**, **down**, **left**, **right**, **home**, **end**, **pageup**, **pagedown**, **delete**, +**insert**, **plus**, **f1-f12**. -## 现有快捷键 {#existingshortcuts} +## 现有快捷键 -Scheduler 内置了一组用于导航的快捷键: +这里有一组现成的快捷键，您可以用来导航 Scheduler： -### 通用快捷键 +### 通用键盘快捷键 -- **Tab** - 聚焦 Scheduler -- **Alt+1, Alt+2, Alt+3, ...** - 切换视图 -- **Ctrl+Left/Right** - 切换到上一天/下一天 -- **Ctrl+Up/Down** - 滚动数据区 -- **Ctrl+Enter** - 新建事件 +- **Tab** - 将焦点放在 Scheduler 上 +- **Alt+1,Alt+2,Alt+3,...** - 在视图之间切换 +- **Ctrl+Left/Right** - 移动到下一个/上一个日期 +- **Ctrl+Up/Down** - 滚动数据区域 +- **Ctrl+Enter** - 创建一个新事件 - **E, Shift+E** - 选择下一个/上一个事件 -- **Home** - 跳转到当前日期 -- **Ctrl+C, Ctrl+X, Ctrl+V** - 复制、剪切、粘贴事件 +- **Home** - 切换到当前日期 +- **Ctrl+C, Ctrl+X, Ctrl+V** - 复制/剪切/粘贴一个事件 ### 时间槽快捷键 -- **上/下/左/右方向键** - 在时间槽间移动 -- **Shift+上/下/左/右方向键** - 扩展选中时间槽 -- **Enter** - 在选中的时间槽中创建事件 +- **Up/Down/Left/Right Arrow Keys** - 在时间槽之间导航 +- **Shift+Up/Down/Left/Right Arrow Keys** - 扩展一个时间槽 +- **Enter** - 在所选时间槽中创建一个事件 ### 事件快捷键 -- **上/下/左/右方向键** - 跳转到时间槽 -- **Enter** - 打开 lightbox +- **Up/Down/Left/Right Arrow Keys** - 转到一个时间槽 +- **Enter** - 打开灯箱 ### 迷你日历快捷键 -- **Tab** - 聚焦迷你日历 -- **上/下/左/右方向键** - 导航按钮和日期 -- **Enter** - 激活选中的按钮或日期 +- **Tab** - 将焦点放在 Mini Calendar 上 +- **Up/Down/Left/Right Arrow Keys** - 在按钮/单元格之间导航 +- **Enter** - 点击按钮/单元格 [Keyboard Navigation and WAI-ARIA - Flat Skin](https://docs.dhtmlx.com/scheduler/samples/13_accessibility/01_regular_skin_all_views.html) @@ -165,8 +168,8 @@ Scheduler 内置了一组用于导航的快捷键: [Keyboard navigation in the scheduler](https://docs.dhtmlx.com/scheduler/samples/03_extensions/07_navigation_plugin.html) -### 相关事件 +### Related events - [onEventCopied](api/event/oneventcopied.md) - [onEventCut](api/event/oneventcut.md) -- [onEventPasted](api/event/oneventpasted.md) +- [onEventPasted](api/event/oneventpasted.md) \ No newline at end of file diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/lightbox-editors-manipulations.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/lightbox-editors-manipulations.md index 003473c6..8aee022e 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/guides/lightbox-editors-manipulations.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/lightbox-editors-manipulations.md @@ -1,29 +1,29 @@ --- -title: "Lightbox 操作" -sidebar_label: "Lightbox 操作" +title: "Lightbox 的操作" +sidebar_label: "Lightbox 的操作" --- -# Lightbox 操作 +# Lightbox 的操作 -## 获取/设置控件值 {#gettingsettingthecontrolvalue} +## 获取/设置控件的值 -要获取或更新某个 section 控件的值，可以像下面这样使用 [formSection](api/method/formsection.md) 对象: +要获取/设置分区控件的值，请使用 [formSection](api/method/formsection.md) 对象，如下所示： ~~~js -// 获取值 -var value = scheduler.formSection('description').getValue(); +//获取值 +const value = scheduler.formSection('description').getValue(); -// 设置值 +//设置值 scheduler.formSection('description').setValue('abc'); ~~~ -[Setting/getting values of lightbox's controls](https://docs.dhtmlx.com/scheduler/samples/02_customization/22_opertions_with_lightbox.html) +[Lightbox 控件的设置/获取](https://docs.dhtmlx.com/scheduler/samples/02_customization/22_opertions_with_lightbox.html) -## 单击打开 Lightbox {#openingthelightboxonasingleclick} +## 单击打开 Lightbox -你可以配置 Lightbox 通过单击事件打开。可以结合 [onClick](api/event/onclick.md) 事件与 [showLightbox](api/method/showlightbox.md) 方法实现: +可以通过单击打开现有的 Lightbox。为此，请使用 [onClick](api/event/onclick.md) 事件和 [showLightbox](api/method/showlightbox.md) 方法： ~~~js scheduler.attachEvent("onClick", function (id, e){ @@ -32,14 +32,14 @@ scheduler.attachEvent("onClick", function (id, e){ }); ~~~ -**Related sample** [Opening the lightbox on one click](https://snippet.dhtmlx.com/5/50e639d2a) +**相关示例** [单击打开 Lightbox](https://snippet.dhtmlx.com/5/50e639d2a) -这样配置后，左键单击事件框即可打开 Lightbox。 +当用户在事件框上单击鼠标左键时，Lightbox 将被打开。 -## 检查 Lightbox 是否已打开 {#checkingwhetherthelightboxisopened} +## 检查 Lightbox 是否已打开 -要判断 Lightbox 当前是打开还是关闭，可以检查 [getState](api/method/getstate.md) 方法返回的 state 对象中的 **lightbox_id** 属性。 -如果 Lightbox 已打开，则返回当前 Lightbox 中事件的 id；否则返回 'null' 或 'undefined': +要检查 Lightbox 是否当前已打开或已关闭，请使用由 [getState](api/method/getstate.md) 方法返回的状态对象中的 **lightbox_id** 属性。 +如果 Lightbox 已打开，该方法将返回已打开事件的 id，否则将返回 'null' 或 'undefined'： ~~~js if (scheduler.getState().lightbox_id){ @@ -49,34 +49,34 @@ if (scheduler.getState().lightbox_id){ } ~~~ -## 映射事件对象属性到 Lightbox section {#mapping-properties-of-an-event-object-to-the-lightbox-sections} +## 将事件对象属性映射到 Lightbox 的分区 -要将事件对象的属性映射到 Lightbox 的 section，请按以下步骤操作: +要将事件对象的属性映射到 Lightbox 的分区，请执行以下操作： -- 确保你的数据源以[支持的格式](guides/data-formats.md)提供事件数据 +- 确保数据源以 [supported format](guides/data-formats.md) 返回事件 ~~~js { "data":[ { "id":"1", - "start_date":"2019-03-02 00:00:00", - "end_date":"2019-03-04 00:00:00", + "start_date":"2027-03-02 00:00:00", + "end_date":"2027-03-04 00:00:00", "text":"Graduation ceremony", "type":"1", "location":"London" }, ... - ] + ] } ~~~ -注意，数据源返回的所有属性都会被添加到事件对象中，并可通过[客户端 API](guides/event-object-operations.md)访问。 +注意，您的数据源返回的所有属性将被添加到事件对象中，并可用于 [客户端 API](guides/event-object-operations.md)。 -- 要将 Lightbox 控件映射到特定属性，请在 section 配置中设置 **map_to** 属性为事件属性名: +- 为将 Lightbox 控件映射到特定属性，请将事件属性的名称分配给分区的 **map_to** 属性： ~~~js -scheduler.config.lightbox.sections="[" +scheduler.config.lightbox.sections=[ {name:"description", height:70, map_to:"text", type:"textarea" , focus:true}, {name:"locationInput", height:35, map_to:"location", type:"textarea" }, {name:"typeSelect", map_to:"type", type:"select", options:scheduler.serverList("types")}, @@ -84,29 +84,33 @@ scheduler.config.lightbox.sections="[" ]; ~~~ -[time](guides/time.md) 和 [recurring](guides/recurring-events.md#recurringlightbox) 控件是例外，它们始终映射到固定属性（分别是 **event.start_date/event.end_date** 和 **event.rec_type/event.event_length/event.event_pid**）。 +只有 [time] 和 [recurring] 控件是例外，它们始终映射到固定的属性 (**event.start_date/event.end_date** 和 **event.rec_type/event.event_length/event.event_pid**，分别为）。 -## Time 控件的自动结束日期 {#automatic-end-date-in-the-time-control} +## Time 控件中的自动结束日期 -要设置默认事件时长，并让结束日期自动更新以保持该时长，请配置以下属性: +要设置事件的初始持续时间并使结束日期自动改变以保持该值，请使用 +[event_duration] 与 [auto_end_date] 属性： ~~~js -// 指定 auto_end_time 参数的事件时长（分钟） +//为 auto_end_time 参数指定事件持续时间（分钟） scheduler.config.event_duration = 60; scheduler.config.auto_end_date = true; ~~~ -[Automatic end date](https://docs.dhtmlx.com/scheduler/samples/02_customization/11_auto_end_date.html) +[自动结束日期](https://docs.dhtmlx.com/scheduler/samples/02_customization/11_auto_end_date.html) -这样，当用户在 Lightbox 中更改事件的开始时间或日期时，结束时间和日期会自动调整，以保持事件时长为 60 分钟（由 [event_duration](api/config/event_duration.md) 选项指定）。 +通过此配置，每当用户在 Lightbox 中更改开始事件的时间或日期时， +结束事件的时间和日期将自动改变，以使事件持续时间等于 60 分钟 +（即 event_duration 选项的值）。 -## 设置 Lightbox 控件的默认值 {#setting-the-default-value-for-a-lightboxs-control} +## 为 Lightbox 的控件设置默认值 -要为 Lightbox section 指定默认值，可以使用该 section 的 **default_value** 属性。 +要为 Lightbox 的分区设置默认值，请使用该分区对象的 **default_value** 属性。 -例如，如果你添加了一个自定义的事件地点 section 并命名为 'Location'，默认情况下新建事件时它是空的。要让其默认显示某个地址（如格林威治天文台），可以这样配置 Lightbox: +例如，您添加了一个自定义分区，用于在 Lightbox 中显示事件的位置，并将其命名为 'Location'。 +当用户创建新事件时，该字段将是空的。要纠正这种行为并默认显示，例如 Greenwich 天文台的地址，请按如下方式配置 Lightbox： ~~~js scheduler.config.lightbox.sections = [ @@ -117,9 +121,9 @@ scheduler.config.lightbox.sections = [ ]; ~~~ -请注意，**default_value** 设置的是 Lightbox section 的默认内容，而不是新事件的默认值。也就是说，新事件只有在打开 Lightbox 并保存后才会获得该值。 +注意，**default_value** 属性设置 Lightbox 的分区的默认值，而不是为新事件设置默认值，即新建事件只有在用户打开 Lightbox 并保存事件后才会获得指定的值。 -如果需要在创建新事件时直接赋予默认值，可以使用 [onEventCreated](api/event/oneventcreated.md) 事件: +要直接为新事件设置默认值，请使用 [onEventCreated](api/event/oneventcreated.md) 事件： ~~~js scheduler.attachEvent("onEventCreated", function(id,e){ @@ -129,155 +133,155 @@ scheduler.attachEvent("onEventCreated", function(id,e){ }); ~~~ -## 更改日期时间控件顺序及移除时间选择器 {#changingtheorderofdatetimecontrolsandremovingtimeselectors} +## 更改日期时间控件的顺序以及移除时间选择器 -你可以通过设置 **time_format** 属性，重新排列或省略"时间区间"section中的日期时间控件: +您可以改变“Time period”部分中日期时间控件的顺序，或移除其中的一些。为此，请使用 **time_format** 属性： ~~~js -scheduler.config.lightbox.sections="[" +scheduler.config.lightbox.sections= [ {name:"description", height:130, map_to:"text", type:"textarea" , focus:true}, {name:"time", ..., time_format:["%H:%i","%m","%d","%Y"]} ]; ~~~ :::note -注意，这只会更改数组中元素的顺序，不会修改数据的显示格式。 +注意，你不能改变数据呈现的格式，只能改变数组中项目的顺序。 ::: -例如，你可以这样调整格式: +例如，可以按如下方式更改格式： ~~~js -// 默认 +//默认 time_format:["%H:%i", "%m", "%d", "%Y"] -// 月份优先 +//月份在前 time_format:["%m","%d", "%Y", "%H:%i"] -// 省略年份选择器 +//移除了年份选择器 time_format:["%H:%i", "%m", "%d"] -// 错误用法 -time_format:["%H:%i", "%M", "%d", "%Y"] // "%m" 错误写成了 "%M" +//不正确的示例 +time_format:["%H:%i", "%M", "%d", "%Y"] //将 "%m" 改为 "%M" ~~~ -## 只读模式 {#readonlymode} +## 只读模式 -关于只读模式的更多信息，请参见 [읽기 전용 모드](guides/readonly.md) 章节。 +关于只读模式的详细信息，请参阅章节 [Read-only Mode](guides/readonly.md)。 -## 针对某些事件隐藏 section {#makingasectionhiddenforsomeevents} +## 使某些事件的分区隐藏 -如果要针对特定事件隐藏某个 section，可以重写其 **set_value** 方法，例如: +要使某些事件的分区对特定事件隐藏，请重新定义其 **set_value** 方法，如下所示： ~~~js -scheduler.form_blocks.textarea.set_value="function(node,value,ev){" - node.firstChild.value="value||"""; - var style = ev.some_property?"":"none"; - node.style.display="style;" // 编辑区域 - node.previousSibling.style.display="style;" // section 标题 - scheduler.setLightboxSize(); // 相应调整 Lightbox 大小 +scheduler.form_blocks.textarea.set_value = function(node,value,ev){ + node.firstChild.value= value || ""; + let style = ev.some_property ? "" : "none"; + node.style.display = "style;" // 编辑区域 + node.previousSibling.style.display = "style;" //分区头 + scheduler.setLightboxSize(); // Lightbox 的正确尺寸 } ~~~ -### "全天事件"选项 +### '全日事件' 选项 -要在 Lightbox 中启用"全天事件"选项，只需将 [full_day](api/config/full_day.md) 选项设置为 *true*: +要在 Lightbox 中添加 'full-day event' 选项，请将 [full_day](api/config/full_day.md) 选项设置为 *true*。 +为此，只需添加以下代码行： ~~~js scheduler.config.full_day = true; ~~~ -启用后，**Time period** section 左侧会出现 **Full Day** 复选框。勾选后，该 section 内所有输入字段将被禁用，事件时长自动设置为全天--从当前单元格日期的 **0:00 AM** 到次日 **0:00 AM**。 +一旦启用 [full_day](api/config/full_day.md) 选项，左侧的 **Time period** 部分将显示 “Full Day” 复选框。选择后，该分区的所有输入字段将被阻塞，事件持续时间将被设为整日，从当天的 0:00 开始，到次日的 0:00 结束。 +[整日事件](https://docs.dhtmlx.com/scheduler/samples/02_customization/12_full_day_event.html) -[Full day events](https://docs.dhtmlx.com/scheduler/samples/02_customization/12_full_day_event.html) +## Lightbox 的类型 -## Lightbox 类型 {#typesoflightbox} +Lightbox 可以以两种类型之一呈现： -Lightbox 提供两种样式: +- 标准（宽）; +- 短形式。 -- 标准（宽） -- 简洁 +在默认皮肤中，Lightbox 只能以标准（宽）类型呈现，而在“glossy”或“classic”皮肤中可以在类型之间选择。 -在默认皮肤下，仅支持标准（宽）Lightbox；而 'glossy' 或 'classic' 皮肤可以选择两种样式。 - -要选择所需类型，请使用 [wide_form](api/config/wide_form.md) 属性: +要设置所需的类型，请使用 [wide_form](api/config/wide_form.md) 属性： ~~~js scheduler.config.wide_form = true; ~~~ -**标准（宽）Lightbox**: +**Standard (wide) Lightbox**: ![scheduler_wide_form.png](/img/scheduler_wide_form.png) -**简洁表单**: +**Short form**: ![scheduler_standard_form.png](/img/scheduler_standard_form.png) -### Section 标题中的按钮 +### 分区头部的按钮 -你可以按如下步骤，在 section 标题中添加自定义按钮: +可以在分区头部添加自定义按钮。要向分区头部添加按钮，请完成以下步骤： -- 在 section 对象中添加 'button' 属性: +- 在分区对象中指定 'button' 属性： ~~~js {name:"description", height:130, map_to:"text", type:"textarea", button:"help"} ~~~ -- 定义按钮的标签文本: +- 设置按钮标签： ~~~js -// 'help' 对应 'button' 属性的值 +// 'button' 属性的值为 'help' scheduler.locale.labels.button_help = "Help label"; ~~~ -- 提供按钮点击的处理函数: +- 指定按钮点击的处理程序： -~~~ -scheduler.form_blocks.textarea.button_click="function(index,button,shead,sbody){" - // 你的自定义代码 +~~~js +scheduler.form_blocks.textarea.button_click = function(index,button,shead,sbody){ + // 任何自定义代码 } ~~~ -其中: +其中： + +- **index** - (*number*) 分区的索引。基于零的编号 +- **button** - (*HTMLElement*) 按钮的 HTML 元素 +- **shead** - (*HTMLElement*) 分区头部的 HTML 元素 +- **sbody** - (*HTMLElement*) 分区主体的 HTML 元素 -- **index** - (*number*) section 的从零开始的索引 -- **button** - (*HTMLElement*) 按钮元素 -- **shead** - (*HTMLElement*) section 标题元素 -- **sbody** - (*HTMLElement*) section 内容元素 +您可以通过下面的 CSS 类定义用于按钮的图片： -你可以通过以下 CSS 类自定义按钮图片: - -~~~js +~~~css .dhx_custom_button_help{ background-image:url(imgs/but_help.gif); } ~~~ -## 关联下拉控件 {#linkingselectcontrols} +## 链接选择控件 -Lightbox 内的下拉控件可以相互依赖。通过 select 控件的 [onchange 属性](guides/select.md#properties) 实现，如下所示: +您可以让 Lightbox 中的选择控件相互依赖。要做到这一点，请使用选择控件的 onchange 属性，如下所示： ~~~js -var update_select_options = function(select, options) { // 辅助函数 +const update_select_options = function(select, options) { // helper function select.options.length = 0; - for (var i="0;" ionchange event is fired when a user changes the selected option of the parent section. The options of the child section will change accordingly. -当用户在父 section 选择不同选项时，onchange 事件会触发，从而更新子 section 的选项。 +## Lightbox 分区的动态改变 -## 动态更改 Lightbox section {#dynamic-changing-of-the-lightbox-sections} +有可能动态地改变 Lightbox 的分区。这意味着 Lightbox 的分区可以根据指定的配置来隐藏、阻塞或显示。 -你可以动态修改 Lightbox section，也就是说，可以根据不同配置隐藏、禁用或显示 Lightbox 的不同部分。 +您可以通过 [resetLightbox()](api/method/resetlightbox.md) 方法动态地更改 Lightbox 的分区。例如： -可以通过 [resetLightbox()](api/method/resetlightbox.md) 方法实现。具体步骤如下: - -1. 首先，定义两个数组，分别表示 Lightbox 的不同控件集合。 +1. 创建两个包含不同控件集的 Lightbox 配置数组： ~~~js -var full_lightbox = [ +const full_lightbox = [ { name: "description", height: 200, map_to: "text", type: "textarea", focus: true}, { name: "hidden", height: 23, map_to: "hidden", type: "textarea"}, { name: "time", height: 72, type: "time", map_to: "auto"} ]; -var restricted_lightbox = [ +const restricted_lightbox = [ { name: "description", height: 200, map_to: "text", type: "textarea", focus: true}, { name: "time", height: 72, type: "time", map_to: "auto"} ]; ~~~ -2. 然后，实现如下逻辑: +2. 接下来需要执行以下步骤： + +- 在显示新 Lightbox 之前，调用 resetLightbox() 方法以移除当前的编辑表单控件集并生成具有另一组控件的新 Lightbox 对象。 + +- 通过其 id 获取事件对象，并根据该对象的条件应用相应的 Lightbox 配置。在下面的示例中，条件是通过 "restricted" 属性引入的。 -- 在打开新 Lightbox 之前，调用 resetLightbox() 方法，清除当前控件，并创建新的 Lightbox 配置。 -- 通过事件 id 获取事件对象，并根据条件决定使用哪种 Lightbox 配置。以下示例以 "restricted" 属性作为判断条件。 ~~~js scheduler.attachEvent("onBeforeLightbox", function(event_id) { scheduler.resetLightbox(); - var ev = scheduler.getEvent(event_id); + const ev = scheduler.getEvent(event_id); scheduler.config.lightbox.sections = (ev.restricted) ? restricted_lightbox : full_lightbox; return true; }); ~~~ -3. 事件的 'restricted' 属性决定是否使用 "restricted_lightbox" 配置。如果未设置，则显示完整 Lightbox。 +3. 使用 'restricted' 事件属性以应用 "restricted_lightbox" 配置。否则，将显示完整 Lightbox。 ~~~js -scheduler.init('scheduler_here', new Date(2017, 5, 30), "week"); +scheduler.init('scheduler_here', new Date(2027, 5, 30), "week"); scheduler.parse([ - { start_date: "2017-06-27 04:00", end_date: "2017-06-27 7:00", + { start_date: "2027-06-27 04:00", end_date: "2027-06-27 7:00", text: "Restricted event", hidden: "You won't see me", restricted: true }, - { start_date: "2017-06-29 05:00", end_date: "2017-06-29 11:00", + { start_date: "2027-06-29 05:00", end_date: "2027-06-29 11:00", text: "Full access", hidden: "Hidden text" } ]); ~~~ -![dinamicchanges_lightbox](/img/dinamicchanges_lightbox.png) - +![dinamicchanges_lightbox.png](/img/dinamicchanges_lightbox.png) -[Dynamic changing of lightbox configurations](https://docs.dhtmlx.com/scheduler/samples/02_customization/29_changing_lightbox_configurations.html) +[Dynamic changing of lightbox configurations](https://docs.dhtmlx.com/scheduler/samples/02_customization/29_changing_lightbox_configurations.html) \ No newline at end of file diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/limits.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/limits.md index b94d6fe5..d6233510 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/guides/limits.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/limits.md @@ -1,16 +1,16 @@ ---- -title: "阻止和标记日期" -sidebar_label: "阻止和标记日期" +--- +title: "阻塞与标记日期" +sidebar_label: "阻塞与标记日期" --- -# 阻止和标记日期 +# 阻塞与标记日期 -该库包含 **Limit** 扩展，允许您阻止和高亮特定日期或日期范围。 +该库提供了名为 **Limit** 的扩展，允许你阻塞并标记（高亮显示）某些日期或日期范围。 -要开始使用该插件，只需在页面上启用它即可。 +要开始使用该插件，请在页面上激活它。 :::note -注意，如果您使用 [타임라인 뷰](views/timeline.md)，'limit' 扩展应在 'timeline' 之前启用: +请注意，如果你使用 [](views/timeline.md)，应在启用 'timeline' 之前先启用 'limit' 扩展： ::: ~~~js @@ -20,83 +20,82 @@ scheduler.plugins({ }); ~~~ -## 配置选项 {#configurationoptions} - -以下是此扩展可用的配置选项: +## 配置选项 -- [display_marked_timespans](api/config/display_marked_timespans.md) - 控制调度器中是否高亮显示已标记（阻止）的时间段 -- [check_limits](api/config/check_limits.md) - 打开或关闭限制检查 -- [mark_now](api/config/mark_now.md) - 切换显示当前时间的标记 -- [now_date](api/config/now_date.md) - 设置 [mark_now](api/config/mark_now.md) 选项使用的日期 -- [limit_end](api/config/limit_end.md) - 定义允许日期范围的结束限制 -- [limit_start](api/config/limit_start.md) - 定义允许日期范围的开始限制 -- [limit_view](api/config/limit_view.md) - 限制事件的查看 +该扩展提供以下配置选项： +- [display_marked_timespans](api/config/display_marked_timespans.md) - 定义是否应在调度程序中高亮显示标记（阻塞）时间段 +- [check_limits](api/config/check_limits.md) - 启用/禁用对限制的检查 +- [mark_now](api/config/mark_now.md) - 启用/禁用显示当前时间的标记 +- [now_date](api/config/now_date.md) - 为 [mark_now](api/config/mark_now.md) 选项设置日期 +- [limit_end](api/config/limit_end.md) - 设置允许日期范围的结束限制 +- [limit_start](api/config/limit_start.md) - 设置允许日期范围的开始限制 +- [limit_view](api/config/limit_view.md) - 限制查看事件 -[Current time marking](https://docs.dhtmlx.com/scheduler/samples/02_customization/23_current_time.html) +[当前时间标记](https://docs.dhtmlx.com/scheduler/samples/02_customization/23_current_time.html) -## 相关事件 {#relatedevents} -如果有人尝试在不允许的日期创建或更改事件，会触发 [onLimitViolation](api/event/onlimitviolation.md) 事件。 +## 相关事件 -## 如何阻止某些日期？ {#how-to-block-certain-dates} +如果调度程序检测到尝试创建/修改一个日期不被允许的事件，将生成 [onLimitViolation](api/event/onlimitviolation.md) 事件。 - +## 如何阻塞某些日期？ -在调度器中设置限制有几种方法: +有几种方法可以在调度程序中指定一个限制： -- [addMarkedTimespan](api/method/addmarkedtimespan.md) - 标记日期并可通过自定义样式选项阻止它们 -- [markTimespan](api/method/marktimespan.md) - 使用默认或自定义样式标记或阻止日期；在任何内部更新后移除标记，适合高亮显示 +- [addMarkedTimespan](api/method/addmarkedtimespan.md) - 标记日期，但在某些设置下实现阻塞（允许为限制设置自定义样式） +- [markTimespan](api/method/marktimespan.md) - 通过应用默认样式或自定义样式来标记和/或阻塞日期。标记在应用内发生任何内部更新后会立即取消。可用于高亮显示 [Blocking dates](https://docs.dhtmlx.com/scheduler/samples/03_extensions/25_advanced_limitation.html) -## 如何标记某些日期？ {#how-to-mark-certain-dates} +## 如何标记某些日期？ - +有两种方法可用于标记指定日期（们）： -您可以使用以下两种方法高亮特定日期: -- [addMarkedTimespan](api/method/addmarkedtimespan.md) - 标记日期并可通过自定义样式选项阻止它们 -- [markTimespan](api/method/marktimespan.md) - 使用默认或自定义样式标记或阻止日期；在任何内部更新后移除标记，适合高亮显示 +- [addMarkedTimespan](api/method/addmarkedtimespan.md) - 标记日期，但在某些设置下实现阻塞（允许为限制设置自定义样式） +- [markTimespan](api/method/marktimespan.md) - 通过应用默认或自定义样式来标记和/或阻塞日期。标记在应用内发生任何内部更新后会被取消。可用于高亮显示 [Handling the pointer highlighting](https://docs.dhtmlx.com/scheduler/samples/09_api/06_hightlight_and_single_click_create.html) -## 移除标记/阻止 {#removingmarkingblocking} +## 移除标记/阻塞 -要清除当前已标记或阻止的时间段，可以使用以下方法: +有几种方法可以移除当前标记/阻塞的时间范围： -- [deleteMarkedTimespan](api/method/deletemarkedtimespan.md) - 移除通过 [addMarkedTimespan](api/method/addmarkedtimespan.md) 设置的标记或阻止 -- [unmarkTimespan](api/method/unmarktimespan.md) - 移除通过 [markTimespan](api/method/marktimespan.md) 设置的标记或阻止 +- [deleteMarkedTimespan](api/method/deletemarkedtimespan.md) - 移除由 [addMarkedTimespan](api/method/addmarkedtimespan.md) 方法设置的标记/阻塞 +- [unmarkTimespan](api/method/unmarktimespan.md) - 移除由 [markTimespan](api/method/marktimespan.md) 方法设置的标记/阻塞 [Handling the pointer highlighting](https://docs.dhtmlx.com/scheduler/samples/09_api/06_hightlight_and_single_click_create.html) -## 阻止优先级 {#blockingpriority} +## 阻塞优先级 -当使用多种阻止方法覆盖不同范围时，阻止优先级如下（从高到低）: +当你多次调用“blocking”方法并阻塞不同的范围时，阻塞将按以下优先级（从高到低）执行： -1. 针对特定条目使用 Date() 对象指定的日期； -2. 特定条目的日期（设置了 **sections** 参数时）； -3. 使用 Date() 对象指定的日期； + +1. 通过 Date() 对象为某些项指定的日期； +2. 针对某些项的日期（当定义了 **sections** 参数时）； +3. 通过 Date() 对象指定的日期； 4. 其他日期。 -- 如果阻止或标记使用相同的 **type**，优先级高的会覆盖优先级低的。 -- 如果阻止或标记方法优先级相同（时间上重叠），则会同时应用。 +- 当同一 **type** 的阻塞/标记具有相同优先级时，优先级更高的将覆盖优先级较低的。 +- 具有相同优先级的若干阻塞/标记方法（位于同一时间槽中）将同时应用。 + +例如： -例如: ~~~js -scheduler.addMarkedTimespan({ // 阻止 2012 年 7 月 4 日（星期三） - days: new Date(2019, 7, 4), +scheduler.addMarkedTimespan({ // 阻止 2027 年 7 月 4 日（星期三） + days: new Date(2027, 7, 4), zones: "fullday", type: "dhx_time_block", css: "red_section" // 应用的 CSS 类 @@ -117,16 +116,18 @@ scheduler.addMarkedTimespan({ }); ~~~ -经过以上调用，调度器行为如下: -1. 首先，会阻止 **Timeline 视图中 id="2" 条目的每个周日和周三**，并将其着色为灰色。 -2. 接着，会阻止 **2012 年 7 月 4 日** 并将其着色为红色。 -3. 最后，会阻止 **每个周日、周一和周三**，并将其着色为蓝色。 +调用这些方法的结果将如下： + + +1. 首先，调度程序将在 Timeline 视图中的项（id="2"）的每个周日和周三阻塞，并将它们显示为灰色。 +2. 接着，将阻塞 2027 年 7 月 4 日，并将其着色为红色。 +3. 最后，将阻塞每个周日、周一、周三，并将它们着色为蓝色。 ![limits_priority.png](/img/limits_priority.png) -如果您希望无论优先级如何都显示所有标记，可以这样设置 [overwrite_marked_timespans](api/config/overwrite_marked_timespans.md) 选项: +若要改变此行为并显示所有标记而不管其优先级如何，你可以使用 [overwrite_marked_timespans](api/config/overwrite_marked_timespans.md) 设置： ~~~js scheduler.config.overwrite_marked_timespans_config = false; -~~~ +~~~ \ No newline at end of file diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/live-update.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/live-update.md index f599952e..a40580c8 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/guides/live-update.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/live-update.md @@ -1,51 +1,56 @@ --- -title: "实时更新模式（旧版）" -sidebar_label: "实时更新模式（旧版）" +title: "实时更新模式（遗留版）" +sidebar_label: "实时更新模式（遗留版）" --- -# 实时更新模式（旧版） +# 实时更新模式（遗留版） + +:::warning +所述功能已被弃用，且不再维护。 +::: :::note -本文介绍的是 DHTMLX Scheduler 实时更新模式的旧版。如需了解最新版本的信息，请参阅[这里](guides/multiuser-live-updates.md)。 +本文指的是 DHTMLX Scheduler 的 Live Updates 模块的传统实现。当前版本的详细信息请参阅 [这里](guides/multiuser-live-updates.md)。 ::: -实时更新模式可让数据在用户之间实时同步。 +Live Update 是一种在实时环境中提供同步数据更新的模式。 -当某个用户做出更改时，其他所有用户会立刻看到这些更改。 +当一个用户进行更改时，立即对所有其他用户可见。 -该模式使用 `Faye` socket 库，以确保无需刷新页面即可实现快速且灵活的更新（仅相关组件会更新）。 +该模式使用 `Faye` 套接字库，使该过程尽可能快速且灵活，并且不需要页面刷新（它只更新应用了该模式的组件）。 -本文将为你提供一份简单的入门指南，帮助你快速上手此功能。 +在本文中，我们将为你提供一步步的教程，帮助你快速入门该主题。 ## 基本原理 -实时更新通过将一个已连接客户端的更改广播给所有其他客户端来实现。这依赖于 WebSocket 连接，允许客户端与后端之间进行双向通信。 +实时更新是通过将一个已连接客户端所作的更改广播给所有其他已连接客户端来实现的。\ +这是通过利用 WebSocket 连接在已连接的客户端和后端之间进行双向消息交换来实现的。 -在此版本中，实时更新模块扩展了 `DataProcessor` 模块，使用 `Faye` 客户端库，并结合用于在客户端之间分发消息的后端应用。 +在此 Live Updates 模块的版本中，通过扩展 `DataProcessor` 模块以使用 `Faye` 库客户端，并配合一个额外的后端应用程序在客户端之间分发消息来实现。 -整体架构包含三个部分: +该解决方案由三部分组成： -1. 带有 Scheduler 和 `DataProcessor` 模块的**前端**。 -2. 负责数据库 CRUD 操作的**后端**。 -3. 管理客户端连接的**实时更新中心（hub）**。 +1. 之前端，包含 Scheduler 与 `DataProcessor` 模块。 +2. 后端，在持久存储上实现 CRUD 操作。 +3. live-updates hub，负责连接客户端。 -当用户更新数据时: +当用户对数据进行修改时： -- **前端**将更新发送到**后端**。 -- 同时，**前端**会将相同的更新发送到**实时更新中心**。 -- **实时更新中心**将该更新广播给所有已连接的客户端。 -- **前端**在收到来自**实时更新中心**的更新后，会将其应用到 Scheduler 数据中，但不会触发后端的 CRUD 操作。 +- 前端将更新发送到后端。 +- 同时，前端将同样的更新发送到 live-updates hub。 +- live-updates hub 将更新广播给所有已连接的客户端。 +- 当前端从 live-updates hub 接收到更新时，它将其应用到 Scheduler 数据中，以避免触发对 CRUD 后端的变更。 -## 开始前准备 +## 开始之前 -要完成本教程，你需要一个已集成服务端逻辑的 dhtmlxScheduler 应用，该应用能从数据库加载数据并保存更改。（详细信息见[这里](integrations/howtostart-guides.md)。） +要开始本教程，你必须拥有一个与服务器端逻辑集成的完整 dhtmlxScheduler 应用程序——它能够从数据库加载数据并将修改保存回数据库。 (详细信息请参阅 [这里](integrations/howtostart-guides.md)。) -一个简单示例如下: +此类应用程序的一个基本示例可能如下所示： ~~~js ~~~ -此示例直接连接 WebSocket 应用。通常建议通过主应用转发此 URL，以隐藏二级应用的地址和端口。你可以通过设置反向代理实现。 +在上面的代码示例中，我们直接连接到 WebSocket 应用。通常，你会希望通过主应用来路由这个 URL，以避免暴露次要应用的地址和端口。这可以通过使用反向代理来实现。 -**通过主应用代理请求（Node.js）:** +通过主应用（Node.js）进行请求代理： ~~~js const httpProxy = require('http-proxy'); @@ -95,16 +100,16 @@ module.exports = function(app){ } ~~~ -**前端:** +前端： ~~~js ~~~ -### 步骤 3. 启用实时更新 +### 第 3 步：启用 Live Updates -调用 `DataProcessor` 实例的 **live_updates()** 方法以激活实时更新模式。请确保已先初始化 `DataProcessor`。该方法参数为 WebSocket 入口地址。 +通过在 `DataProcessor` 实例上调用 **live_updates()** 方法来启用该模式。要使其工作，必须先初始化 `DataProcessor`。作为参数，该方法接受 WebSocket 入口点的 URL。 ~~~js const dp = scheduler.createDataProcessor({ @@ -115,4 +120,4 @@ const dp = scheduler.createDataProcessor({ dp.live_updates("/liveUpdates"); ~~~ -你可以在[这里](https://files.dhtmlx.com/30d/0aea2facd959a8300bf7caec3f5a7f42/dhtmlxscheduler-live-updates.zip)下载完整演示应用。 +你可以在 [此处](https://files.dhtmlx.com/30d/0aea2facd959a8300bf7caec3f5a7f42/dhtmlxscheduler-live-updates.zip) 下载一个完整的演示应用。 \ No newline at end of file diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/loading-data.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/loading-data.md index 0e6484a7..068027c7 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/guides/loading-data.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/loading-data.md @@ -5,329 +5,352 @@ sidebar_label: "加载数据" # 加载数据 -dhtmlxScheduler 支持三种数据格式的加载: +dhtmlxScheduler 可以以多种格式加载数据。大多数应用使用 **JSON**。用于兼容性或导入场景，也支持 **iCalendar (.ics)** 和 **XML**。 -1. JSON； -2. XML； -3. ICal。 +### 相关指南 -[데이터 포맷 예시](guides/data-formats.md) +- [- 数据格式总览](guides/data-formats.md) -## 从内联数据集加载数据 {#loadingdatafromaninlinedataset} -要直接从内联数据集加载数据，可以使用 [parse](api/method/parse.md) 方法: +## 从内联数据集加载数据 + +要从内联数据集加载数据，请使用 [`parse()`](api/method/parse.md) 方法： ~~~js -scheduler.init('scheduler_here',new Date(2009,10,1),"month"); +scheduler.init("scheduler_here", new Date(2027, 4, 1), "month"); ... scheduler.parse([ - {text:"Meeting", start_date:"2019-04-11 14:00", end_date:"2019-04-11 17:00"}, - {text:"Conference", start_date:"2019-04-15 12:00", end_date:"2019-04-18 19:00"}, - {text:"Interview", start_date:"2019-04-24 09:00", end_date:"2019-04-24 10:00"} -],"json"); + { id: "1", text: "Meeting", start_date: "2027-05-11 14:00", end_date: "2027-05-11 17:00" }, + { id: "2", text: "Conference", start_date: "2027-05-15 12:00", end_date: "2027-05-18 19:00" }, + { id: "3", text: "Interview", start_date: "2027-05-24 09:00", end_date: "2027-05-24 10:00" } +]); ~~~ +### 相关示例 + +- [- 将事件显示为级联](https://docs.dhtmlx.com/scheduler/samples/02_customization/24_cascade_event_display.html) + +### 相关 API + +- [`parse()`](api/method/parse.md) + +### 相关指南 -[Displaying events as a cascade](https://docs.dhtmlx.com/scheduler/samples/02_customization/24_cascade_event_display.html) +- [- 数据格式](guides/data-formats.md) -## 从数据文件加载数据 {#loadingdatafromadatafile} +## 从数据文件加载数据 -要从外部文件加载数据，可以使用 [load](api/method/load.md) 方法: +要从文件加载数据，请使用 [`load()`](api/method/load.md) 方法： ~~~js -scheduler.init('scheduler_here',new Date(2018,10,1),"month"); +scheduler.init("scheduler_here", new Date(2027, 4, 1), "month"); ... scheduler.load("data.json"); //从文件加载数据 ~~~ -[Basic initialization](https://docs.dhtmlx.com/scheduler/samples/01_initialization_loading/01_basic_init.html) +### 相关示例 +- [- 基本初始化](https://docs.dhtmlx.com/scheduler/samples/01_initialization_loading/01_basic_init.html) -## 从数据库加载数据 {#loadingdatafromadatabase} +### 相关 API -有两种方式可以从数据库加载数据。两者都需要处理客户端和服务端。 +- [`load()`](api/method/load.md) -1) 第一种方式是通过 REST API 与服务器通信。 +### 相关指南 -- 服务端的实现取决于所选用的框架。 -例如，对于 Node.js，需要为 Scheduler 发送 AJAX 请求的 URL 添加一个服务器路由。 +- [- 数据格式](guides/data-formats.md) -该路由会生成一个 JSON 响应。 + +## 从后端加载数据 + +通过暴露返回 Scheduler 事件 JSON 格式的 REST 端点来从后端加载数据。 + +- 服务器端实现取决于您的技术栈。例如，在 Node.js 中，您可以添加一个返回事件数据的路由： ~~~js -app.get('/data', function(req, res){ - db.event.find().toArray(function(err, data){ - //为所有记录设置 id 属性 - for (var i = 0; i < data.length; i++) - data[i].id = data[i]._id; - - //输出响应 - res.send(data); - }); +app.get("/data", async (request, response) => { + const events = await db.event.find().toArray(); + response.json(events); }); ~~~ -- 在客户端，使用 [load](api/method/load.md) 方法并指定 Scheduler 请求数据的 URL: +- 在客户端，使用带数据 URL 的 [`load()`](api/method/load.md) 调用： -~~~js title="Loading from a database. Client-side code" -scheduler.init('scheduler_here', new Date(), "month"); -scheduler.load("apiUrl"); +~~~js +scheduler.init("scheduler_here", new Date(2027, 4, 1), "month"); +scheduler.load("/data"); ~~~ :::note -关于与 REST API 服务端集成的更多详细信息，请参见文章 [Server-Side Integration](guides/server-integration.md)。 +要将修改保存回服务器，请使用 [`createDataProcessor()`](api/method/createdataprocessor.md)。请参阅 [服务器端集成](guides/server-integration.md)。 ::: -2) 第二种方式是使用 [PHP Connector](https://docs.dhtmlx.com/connector__php__index.html) 从数据库表加载数据。 - -- 在服务端，实现一个返回 XML 或 JSON 格式数据的脚本: - -~~~js title="Static loading from db. Server-side code" -include ('dhtmlxConnector/codebase/scheduler_connector.php'); - -$res="mysql_connect(""localhost","root",""); -mysql_select_db("sampleDB"); - -$calendar = new SchedulerConnector($res); -$calendar->render_table("events","id","event_start,event_end,text","type"); -~~~ +### 相关 API -- 在客户端，使用 [load](api/method/load.md) 方法并指定服务端脚本的路径: - -~~~js title="Static loading from db. Client-side code" -scheduler.init('scheduler_here', new Date(), "month"); -scheduler.load("events.php"); -~~~ +- [`createDataProcessor()`](api/method/createdataprocessor.md) + +### 相关指南 + +- [服务器端集成](guides/server-integration.md) -:::note -更多细节请参考 [dhtmlxScheduler와 dhtmlxConnector 연동하기](integrations/other/howtostart-connector.md) 指南。 -::: -## 从多个源加载数据 {#loadingdatafrommultiplesources} +## 从多个来源加载数据 -如需从多个源加载数据，可以使用 **multisource** 扩展: +要从多个来源加载数据，在调用 [`parse()`](api/method/parse.md) 之前，请请求所需的端点并合并结果： ~~~js -scheduler.plugins({ - multisource: true +Promise.all([ + fetch("/api/events").then((response) => response.json()), + fetch("/api/holidays").then((response) => response.json()) +]).then(([events, holidays]) => { + scheduler.parse([...events, ...holidays]); }); ~~~ -:::note -多数据源可用于静态和动态加载 -::: +### 相关 API -引入相关文件后，[load](api/method/load.md) 方法可以接受一个源数组: +- [`parse()`](api/method/parse.md) -~~~js -scheduler.load(["first/source/some","second/source/other"]); -~~~ +### 相关指南 -## 数据属性 {#dataproperties} +- [- 数据格式](guides/data-formats.md) -### 必需属性 -数据项至少需要以下三个属性才能被正确解析: +## 数据属性 -- **start_date** - (*string*) 事件的开始时间； -- **end_date** - (*string*) 事件的结束时间； -- **text** - (*string*) 事件描述。 +### 必填属性 -从数据库加载时，还需要一个额外的必需属性: +为使其被正确解析，每个事件必须包含以下属性： -- **id** - (*string, number*) 事件标识符。 +- **id** - (*string|number*) 一个唯一的事件 id +- **start_date** - (*date|string*) 事件的开始日期 +- **end_date** - (*date|string*) 事件的结束日期 +- **text** - (*string*) 事件标题/描述 -默认情况下，JSON 和 XML 数据使用日期格式 **'%Y-%m-%d %H:%i'** （参见 [日期格式规范](guides/settings-format.md)）。 +JSON 和 XML 数据的默认日期格式为 **'%Y-%m-%d %H:%i'**（参见 [日期格式规范](guides/settings-format.md)） - 如需修改，可使用 [date_format](api/config/date_format.md) 选项。 +要更改它，请使用 [`date_format`](api/config/date_format.md) 配置选项。 ~~~js -scheduler.config.date_format="%Y-%m-%d %H:%i"; +scheduler.config.date_format = "%Y-%m-%d %H:%i"; ... -scheduler.init('scheduler_here', new Date(2019, 3, 18), "week"); +scheduler.init("scheduler_here", new Date(2027, 4, 18), "week"); ~~~ ### 自定义属性 -除了必需字段外，数据项还可以包含自定义属性。这些额外属性会被作为字符串解析，并可在客户端按需使用。 +您不受上述必填属性的限制，可以向数据项添加任何自定义属性。 +额外的数据属性将被解析为字符串并加载到客户端，您可以根据需要使用它们。 -带有自定义属性的数据示例可在 [这里](guides/data-formats.md#datawithcustomproperties) 查看。 +有关具有自定义属性的数据示例，请参见 [数据格式](guides/data-formats.md) -## 数据库结构 {#databasestructure} +### 相关 API -为调度事件建立数据库时，建议的结构如下: +- [`date_format`](api/config/date_format.md) -- **events 表** - 存储调度事件 - - **id** - (*string/int/guid*) - 事件标识符。主键，自增。 - - **start_date** - (*DateTime*) - 事件开始时间，不能为空。 - - **end_date** - (*DateTime*) - 事件结束时间，不能为空。 - - **text** - (*string*) - 事件描述。 +### 相关指南 -对于循环事件，还需要附加列: +- [事件对象](guides/event-object-operations.md) -- **events 表** - 存储调度事件 - - **id** - (*string/int/guid*) - 事件标识符。主键，自增。 - - **start_date** - (*DateTime*) - 事件开始时间，不能为空。 - - **end_date** - (*DateTime*) - 事件结束时间，不能为空。 - - **text** - (*string*) - 事件描述。 - - **event_pid** - (*string/int/guid*) - 父事件系列 id 的引用。可为空或默认为空（空字符串、零）。 - - **event_length** - (*string/bigint*) - 事件持续时间或已修改发生的时间戳。可为空或默认为空（空字符串、零）。最大长度（字符串）为 10。 - - **rec_type** - (*string*) - 循环规则。可为空或默认为空字符串。最大长度为 50。 -可根据需要添加更多列，这些列将在客户端 API 可访问。 +## 数据库结构 -## 动态加载 {#dynamic-loading} +当您设置数据库时，调度事件的期望结构如下： -默认情况下，dhtmlxScheduler 会一次性加载所有数据，对于大型数据集效率较低。动态加载允许分批加载数据，仅限于当前可见区域。 +- **events table** - 指定调度器事件 +- **id** - (*string/int/guid*) 事件 id。主键，自动增量 +- **start_date** - (*DateTime*) 事件的开始日期，不可为空 +- **end_date** - (*DateTime*) 事件的结束日期，不可为空 +- **text** - (*string*) 任务的描述 -### 技术实现 +如果您有重复事件，请添加以下字段： -通过调用 [setLoadMode](api/method/setloadmode.md) 方法启用动态加载: -~~~js title="Enabling the dynamic loading" +- **rrule** - (*string*) RFC-5545 格式的重复规则 +- **duration** - (*number*) 每次出现的持续时间（以秒为单位） +- **recurring_event_id** - (*string/int/guid*) 修改/删除发生的父系列 id +- **original_start** - (*DateTime*) 编辑/删除发生的原始开始日期 +- **deleted** - (*boolean*) 标记已删除的发生 + +您可以定义任意其他列，它们可以加载到客户端并供客户端 API 使用。 + +### 相关指南 + +- [重复事件](guides/recurring-events.md) + + +## 动态加载 + +默认情况下，dhtmlxScheduler 会一次性加载所有数据。当您使用大型事件集合时，可能会带来问题。 +在这种情况下，您可以使用动态加载模式并按部分加载数据，以填充调度器当前可见区域所需。 + +### 技巧 + +要启用动态加载，请调用 [`setLoadMode()`](api/method/setloadmode.md) 方法： + +~~~js scheduler.setLoadMode("month"); -scheduler.load("some.php"); +scheduler.load("/api/events"); ~~~ -该方法接受一个加载模式，用于确定要加载的数据范围:*day, week, month,* 或 *year*。 +作为参数，该方法接受定义要加载的数据大小的加载模式：*day、week、month 或 year*。 -例如，设置为 'week' 模式后，调度器只会请求当前周的数据，并根据需要加载更多数据。 +例如，如果您设置 'week' 模式，调度器将仅请求当前周的数据，并在需要时加载其余数据。 +#### 加载模式的工作原理 -#### 加载模式的工作方式 +预定义的加载模式指定在设定时间段内加载数据的区间。例如，您在调度器中打开周视图，日期范围为：从 2027-02-02 到 2027-02-09。 +根据所选模式，动态加载将按如下方式进行： -加载模式定义了为所选周期加载数据的区间。例如，打开 2018-01-29 到 2018-02-05 的周视图: - -- "day" 模式 +- 对于 "day" 模式 ~~~js scheduler.setLoadMode("day"); ~~~ -调度器按天请求数据，如从 2018-01-29 到 2018-02-05。 +调度器将按天请求数据，即：从 2027-02-02 到 2027-02-09。 -- "month" 模式 +- 对于 "month" 模式 ~~~js scheduler.setLoadMode("month"); ~~~ -调度器按整月请求数据，如从 2018-01-01 到 2018-03-01。 +调度器将按整月请求数据，即：从 2027-02-01 到 2027-03-01。 -- "year" 模式 +- 对于 "year" 模式 ~~~js scheduler.setLoadMode("year"); ~~~ -调度器按整年请求数据，如从 2018-01-01 到 2019-01-01。 +调度器将按整年请求数据，即：从 2027-01-01 到 2028-01-01。 -请求的区间总是至少覆盖当前显示的区间。 +在任何情况下，请求的区间都不会小于渲染的区间。 -加载区间会影响: +加载区间定义了： - 动态加载调用的频率 -区间越大，加载调用的频率越低，因为已加载的数据会被缓存。 +区间越大，动态加载调用的频率越低。调度器会在内存中保留已加载的数据部分，不会对其重复发出请求。 -- 每次请求所需的时间 +- 处理单个请求的持续时间 -区间越大，每次请求的数据越多，处理时间也越长。 +区间越大，单个请求处理的时间越长，因为一次加载的数据越多。 -#### 请求格式 +#### 请求 -请求格式如下: +生成的请求如下所示： ~~~js -some.php?from=DATEHERE&to=DATEHERE +/api/events?from=DATEHERE&to=DATEHERE ~~~ -*其中 DATEHERE 是由 [load_date](api/config/load_date.md) 选项指定格式的有效日期。* +*其中 DATEHERE 是一个有效日期值，格式由 [`load_date`](api/config/load_date.md) 选项定义。* +### 相关 API -如果服务端采用 dhtmlxConnector，则无需额外处理即可解析这些请求。 +- [`setLoadMode()`](api/method/setloadmode.md) +- [`load_date`](api/config/load_date.md) -### 加载进度指示（加载动画） +### 加载指示器 -处理大量数据时，显示加载动画有助于提示进度。 +当处理大量数据时，显示加载指示器很有用。它会向用户表明应用程序确实在运行。 -可通过设置 [show_loading](api/config/show_loading.md) 属性为 *true* 启用加载动画: +要为调度器启用加载指示器，请将 [`show_loading`](api/config/show_loading.md) 属性设置为 *true*。 ~~~js scheduler.config.show_loading = true; ... -scheduler.init('scheduler_here',new Date(2018,0,10),"month"); +scheduler.init("scheduler_here", new Date(2027, 4, 10), "month"); ~~~ :::note -如需自定义加载动画图片，请将 'imgs/loading.gif' 替换为自定义图片。 +要更改加载指示器图片，请用自定义图片替换 'imgs/loading.gif'。 ::: -## 从服务端加载 Timeline 和 Units 区段数据 {#loadingdatawithtimelineandunitssectionsfromtheserver} +## 通过服务器加载 Timeline 和 Units 部分数据 {#collections} -将数据加载到 [Timeline](views/timeline.md#dataloading) 和 [Units](views/units.md#loadingdatatotheview) 视图时，需要提供区段数组。 +在向 [Timeline](views/timeline.md) 和 [Units](views/units.md) 视图加载数据时，您需要设置一个将被加载到视图中的 sections 数组。 -如需从后端加载 Timeline 和 Units 区段，需要更详细的设置: +为了从后端加载包含 Timeline 和 Units 部分的数据，您需要实现更扩展的配置： -- 在初始化 Timeline 视图时，不直接传递 sections 数组，而是使用 [serverList](api/method/serverlist.md) 方法和集合名称: +- 在 Timeline 视图初始化期间，不再使用 sections 数组，而应使用 [`serverList()`](api/method/serverlist.md) 方法，并将集合名称作为参数传递： ~~~js scheduler.createTimelineView({ - .... - y_unit: scheduler.serverList("sections"), - ... + .... + y_unit: scheduler.serverList("sections"), + ... }); ~~~ -- 使用 [load](api/method/load.md) 方法将数据加载到调度器: +- 要将数据加载到调度器，请使用 [`load()`](api/method/load.md) 方法： ~~~js scheduler.load("data.json"); ~~~ -- 服务端返回的数据结构应如下所示: - -~~~js title=""data.json"" -{ - "data":[ - { - "id":"1", - "start_date":"2018-03-02 00:00:00", - "end_date":"2018-03-04 00:00:00", - "text":"dblclick me!", - "type":"1" - }, - { - "id":"2", - "start_date":"2018-03-09 00:00:00", - "end_date":"2018-03-11 00:00:00", - "text":"and me!", - "type":"2" - }, - { - "id":"3", - "start_date":"2018-03-16 00:00:00", - "end_date":"2018-03-18 00:00:00", - "text":"and me too!", - "type":"3" - }, - { - "id":"4", - "start_date":"2018-03-02 08:00:00", - "end_date":"2018-03-02 14:10:00", - "text":"Type 2 event", - "type":"2" - } - ], - "collections": { - "sections":[ - {"value":"1","label":"Simple"}, - {"value":"2","label":"Complex"}, - {"value":"3","label":"Unknown"} - ] - } +如果您手动获取数据（例如添加头信息），可以将相同的有效负载传递给 [`parse()`](api/method/parse.md)： + +~~~js +fetch("/api/timeline") + .then((response) => response.json()) + .then((payload) => scheduler.parse(payload, "json")); +~~~ + +- 在后端实现调度器数据响应时，请使用以下格式： + +~~~js title="data.json" +{ + "data":[ + { + "id":"1", + "start_date":"2027-03-02 00:00:00", + "end_date":"2027-03-04 00:00:00", + "text":"dblclick me!", + "type":"1" + }, + { + "id":"2", + "start_date":"2027-03-09 00:00:00", + "end_date":"2027-03-11 00:00:00", + "text":"and me!", + "type":"2" + }, + { + "id":"3", + "start_date":"2027-03-16 00:00:00", + "end_date":"2027-03-18 00:00:00", + "text":"and me too!", + "type":"3" + }, + { + "id":"4", + "start_date":"2027-03-02 08:00:00", + "end_date":"2027-03-02 14:10:00", + "text":"Type 2 event", + "type":"2" + } + ], + "collections": { + "sections":[ + {"value":"1","label":"Simple"}, + {"value":"2","label":"Complex"}, + {"value":"3","label":"Unknown"} + ] + } } ~~~ -在此示例中，"data" 数组包含日历事件，"collections" 对象包含通过 [serverList](api/method/serverlist.md) 方法引用的集合。 +在上述示例中，"data" 数组包含日历事件，"collections" 哈希包含可通过 [`serverList()`](api/method/serverlist.md) 方法引用的集合。 + +### 相关 API + +- [`serverList()`](api/method/serverlist.md) + +### 相关指南 + +- [Timeline 视图](views/timeline.md) +- [单位视图](views/units.md) \ No newline at end of file diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/localization.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/localization.md index e1a42d8c..923b8880 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/guides/localization.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/localization.md @@ -1,24 +1,24 @@ ---- -title: "本地化" -sidebar_label: "本地化" +--- +title: "本地化" +sidebar_label: "本地化" --- # 本地化 -该库通过提供多种预定义语言环境以及自定义选项，支持调度器的本地化。默认情况下，DHTMLX Scheduler 提供[英文语言环境](api/other/locale.md)。 +该库通过提供若干预定义的区域设置以及创建自定义区域设置的方法，来支持调度器的本地化。默认情况下，DHTMLX Scheduler 使用 [English locale](api/other/locale.md)。 ## 激活 -要设置调度器的语言，只需在 [scheduler.i18n](api/other/i18n.md) 对象上使用 **setLocale** 方法激活所需的语言环境。 +要为调度程序设置所需语言，请通过 [scheduler.i18n](api/other/i18n.md) 对象的 `setLocale()` 方法激活相应的区域设置。 ~~~js -scheduler.i18n.setLocale("fr"); +scheduler.i18n.setLocale("fr"); ~~~ -你可以使用 dhtmlxscheduler.js 文件中包含的[预定义语言环境](#included-locales)，也可以创建自定义语言环境。 +您可以使用并更新捆绑在 dhtmlxscheduler.js 文件中的任意 [预定义区域设置](#included-locales)，也可以定义自定义区域设置。 :::note -语言环境可以动态切换，但只有在通过调用 **scheduler.render()** 或 **scheduler.init()** 完全重绘调度器后，更新才会生效。 +区域设置可以动态切换，但只有在通过 `scheduler.render()` 或 `scheduler.init()` 调用完成重绘后，变更才会生效。 ::: ~~~js @@ -26,20 +26,19 @@ scheduler.i18n.setLocale("fr"); scheduler.init("scheduler_here"); ~~~ +### 相关示例 +- [Localization](https://docs.dhtmlx.com/scheduler/samples/01_initialization_loading/07_locale_usage.html) -[Localization](https://docs.dhtmlx.com/scheduler/samples/01_initialization_loading/07_locale_usage.html) - - -## 已包含的语言环境 {#included-locales} +## 已包含的区域设置 :::note -Common 和 Recurring 语言环境文件均包含在 **dhtmlxscheduler.js** 文件中。 +Common 区域设置文件和 Recurring 区域设置文件都位于 `dhtmlxscheduler.js` 文件中。 ::: -dhtmlxScheduler 支持以下语言的本地化: +dhtmlxScheduler 包含以下语言的本地化： - + @@ -47,18 +46,18 @@ dhtmlxScheduler 支持以下语言的本地化: - + - + - + @@ -71,64 +70,65 @@ dhtmlxScheduler 支持以下语言的本地化:
语言语言代码
语言语言代码
阿拉伯语ar
白俄罗斯语be
加泰罗尼亚语ca
捷克语cs
丹麦语da
荷兰语nl
英语en (默认)
英语en (default)
芬兰语fi
法语fr
德语de
希腊语el
希伯来语he
匈牙利语hu
印度尼西亚语id
印尼语id
意大利语it
日语jp
挪威语no
挪威博克马尔语nb
挪威 Bokmålnb
波兰语pl
葡萄牙语pt
罗马尼亚语ro
乌克兰语ua
-## 创建自定义语言环境 +## 创建自定义区域设置 :::note -[scheduler.i18n](api/other/i18n.md) 对象自 v6.0 起可用。在早期版本中，使用的是 [scheduler.locale](api/other/locale.md) 对象。详情请参阅 [迁移指南](migration.md#53---60)。 +在 v6.0 中新增了 [scheduler.i18n](api/other/i18n.md) 对象。在早期版本中，使用的是 [scheduler.locale](api/other/locale.md) 对象。欲了解更多信息，请参阅 [迁移文章](migration.md#53---60)。 ::: -创建自定义语言环境最简单的方法是从下方示例复制默认英文语言环境，并将字符串翻译为你希望的语言。 +创建自定义区域设置的最简单方法，是从下面的示例中复制默认的英语区域设置，并将所有字符串翻译成所需语言。 -有两种方式将自定义语言环境应用到调度器: +自定义区域设置可以通过两种方式应用到 Scheduler： -- 通过向 **setLocale** 方法传递语言环境对象，覆盖当前语言环境: +- 要么通过将区域设置对象作为参数传递给 `setLocale()` 方法来覆盖当前区域设置： ~~~js -scheduler.i18n.setLocale(localeObject); +scheduler.i18n.setLocale(localeObject); ~~~ -如果只提供部分语言环境对象，调度器会将你的标签与现有语言环境合并: +注意，如果你提供了部分区域设置对象，调度程序会将你的标签添加到当前区域设置中： ~~~js scheduler.i18n.setLocale({ labels: { day_tab: "Day", } -}); +}); ~~~ -- 或者，如果你需要在多个语言环境之间切换，可以添加带自定义语言代码的语言环境，然后切换到它: +- 要么，如果你需要在多个区域设置之间切换，请使用自定义语言代码定义区域设置，然后稍后将调度程序切换到它： ~~~js -scheduler.i18n.addLocale("lang", localeObject); +scheduler.i18n.addLocale("lang", localeObject); scheduler.i18n.setLocale("lang"); ~~~ :::note -请注意，切换到自定义语言环境会修改应用界面。请确保检查并调整所有依赖于语言环境的元素，以确保调度器在新语言下正确显示。 +注意，在应用中激活自定义区域设置会导致应用界面发生变化。请检查并（如有需要）重新定义所有依赖于区域设置的元素，以确保调度程序在新语言下看起来正常。 ::: -**注意** +**注** -- 你可以将自定义语言环境文件发送至 **support@dhtmlx.com**，有可能被包含在未来的版本中； -- 当前激活的语言环境可通过 **scheduler.locale** 对象访问； -- **monthFull** 包含从一月开始的完整月份名称； -- **monthShort** 包含从一月开始的月份缩写； -- **dayFull** 包含从星期天开始的完整星期名称； -- **dayShort** 包含从星期天开始的星期缩写。 +- 你可以将自定义区域设置文件发送至 **support@dhtmlx.com**，以便我们在下一个版本中加入。 +- 当前活动的区域设置也在 `scheduler.locale` 对象中可用。 +- `monthFull` - 从一月起的月份全称 +- `monthShort` - 从一月起的月份简称 +- `dayFull` - 从星期日起的周日全称 +- `dayShort` - 从星期日起的周日简称 -~~~js title="English locale definition" +### English locale 定义 +~~~js scheduler.i18n.setLocale({ - date:{ - month_full: ["January", "February", "March", "April", "May", "June", + date: { + month_full: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"], - month_short: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", + month_short: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], - day_full: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", + day_full: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"], day_short: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"] }, - labels:{ + labels: { dhx_cal_today_button: "Today", day_tab: "Day", week_tab: "Week", @@ -145,30 +145,30 @@ scheduler.i18n.setLocale({ section_time: "Time period", full_day: "Full day", - /*recurring events*/ - confirm_recurring:"Edit recurring event", - section_recurring:"Repeat event", - button_recurring:"Disabled", - button_recurring_open:"Enabled", + /* recurring events */ + confirm_recurring: "Edit recurring event", + section_recurring: "Repeat event", + button_recurring: "Disabled", + button_recurring_open: "Enabled", button_edit_series: "All events", button_edit_occurrence: "This event", button_edit_occurrence_and_following: "This and following events", - /*agenda view extension*/ + /* agenda view extension */ agenda_tab: "Agenda", date: "Date", description: "Description", - /*year view extension*/ + /* year view extension */ year_tab: "Year", /* week agenda extension */ week_agenda_tab: "Agenda", - /*grid view extension*/ + /* grid view extension */ grid_tab: "Grid", - /* touch tooltip*/ + /* touch tooltip */ drag_to_create: "Drag to create", drag_to_move: "Drag to move", @@ -224,21 +224,19 @@ scheduler.i18n.setLocale({ repeat_freq_year: "Year", repeat_on_date: "On date", repeat_ends: "Ends", - month_for_recurring: ["January", "February", "March", "April", "May", "June", + month_for_recurring: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"], - day_for_recurring: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", + day_for_recurring: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"] } }); ~~~ +### 相关示例 +- [Localization](https://docs.dhtmlx.com/scheduler/samples/01_initialization_loading/07_locale_usage.html) -[Localization](https://docs.dhtmlx.com/scheduler/samples/01_initialization_loading/07_locale_usage.html) - - -## 附加说明 - -- 如果未设置 **confirm_closing** 或 **confirm_deleting** 标签，相关确认对话框将不会出现（将自动确认）； -- 类似 **section_(name)** 的标签对应 lightbox 中该名称的部分。 -- **new_event** 标签定义新事件默认显示的文本。 +## 其他说明 +- 如果未定义 `confirm_closing` 或 `confirm_deleting` 标签，相应的确认对话框将完全不显示（自动确认） +- `section_(name)` 标签指的是相关名称的轻盒（lightbox）部分 +- `new_event` 标签定义新事件的默认文本 \ No newline at end of file diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/minicalendar.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/minicalendar.md index 7ff7e7a1..c13a2c35 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/guides/minicalendar.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/minicalendar.md @@ -5,32 +5,30 @@ sidebar_label: "迷你日历（日期选择器）" # 迷你日历（日期选择器） -迷你日历（日期选择器）是一个实用的扩展，可以让你在页面的 HTML 容器中显示一个紧凑的月份视图。 +迷你日历（日期选择器）是一种特殊扩展，提供在页面的 HTML 容器中呈现小型月份视图的能力。 ![mini_calendar](/img/mini_calendar.png) - -[Mini calendar without the scheduler](https://docs.dhtmlx.com/scheduler/samples/05_calendar/02_without_scheduler.html) - +[无调度器的迷你日历](https://docs.dhtmlx.com/scheduler/samples/05_calendar/02_without_scheduler.html) :::note -要在你的应用中使用迷你日历，请确保在页面上添加 **minical** 扩展。 +要在应用中使用迷你日历，请在页面上包含 **minical** 扩展。 ::: -## 在头部添加 {#intheheader} +## 在页眉中 -要将迷你日历（日期选择器）添加到调度器的头部（如下图所示），请按照以下步骤操作: +要将迷你日历（日期选择器）放入调度程序的页眉中（如下图所示），请按以下步骤操作： ![calendar_in_header](/img/calendar_in_header.png) -1. 在页面上引入扩展文件: +1. 在页面上包含扩展文件： ~~~js scheduler.plugins({ minical: true }); ~~~ -2. 定义迷你日历的容器，并将其添加到调度器的标记中: +2. 为迷你日历指定容器并将其添加到调度程序标记中： ~~~js
... @@ -39,7 +37,7 @@ scheduler.plugins({ onclick="show_minical()"> 
~~~ -3. 实现初始化（使用 [renderCalendar](api/method/rendercalendar.md) 方法）和销毁（使用 [destroyCalendar](api/method/destroycalendar.md) 方法）迷你日历的逻辑: +3. 提供初始化（[renderCalendar](api/method/rendercalendar.md) 方法）和销毁（[destroyCalendar](api/method/destroycalendar.md) 方法）迷你日历的逻辑： ~~~js function show_minical(){ if (scheduler.isCalendarVisible()){ @@ -59,46 +57,47 @@ function show_minical(){ ~~~ -[Mini calendar in the scheduler header](https://docs.dhtmlx.com/scheduler/samples/05_calendar/01_select.html) +[调度程序页眉中的迷你日历](https://docs.dhtmlx.com/scheduler/samples/05_calendar/01_select.html) -## 在头部集成第三方日期选择器 {#intheheaderthirdpartydatepicker} +## 在页眉中（第三方日期选择器） -本节展示如何将第三方迷你日历（日期选择器）集成到调度器的头部。 +在本节中，我们将演示如何将第三方迷你日历（日期选择器）添加到调度程序的页眉中。 ![custom_minicalendar](/img/custom_minicalendar.png) -**Related sample** [3rd party Mini Calendar in the header](https://snippet.dhtmlx.com/5/0dca14de9) +**相关示例** [3rd party Mini Calendar in the header](https://snippet.dhtmlx.com/5/0dca14de9) -我们的示例使用 [jQuery](https://jquery.com) 和 [Bootstrap Datepicker](https://bootstrap-datepicker.readthedocs.io/en/latest/) 来添加迷你日历。如果你使用其他库，需要相应调整代码，但整体思路类似: +在我们的示例中，我们将基于 [jQuery](https://jquery.com) 和 [Bootstrap Datepicker](https://bootstrap-datepicker.readthedocs.io/en/latest/) 添加一个迷你日历。如果你使用其他库，需要修改代码，但总体思路应保持不变： -1. *点击日历头部时显示日期选择器* +1. *在单击日历头部时显示日期选择器* -首先，在调度器头部内定义一个用于迷你日历（或其他控件）的 DIV 容器。采用 [标记初始化方式](guides/initialization.md#initializing-scheduler-via-markup) 时，类似如下: +首先，需要在调度程序头部定义迷你日历（或其他控件）的 DIV 容器。 +如果使用 [markup initialization method]，可以像下面这样做： ~~~js -
+
 
 
-
+ ~~~ -如果你使用 [header config](guides/initialization.md#initializing-scheduler-via-header-config)，可以像这样添加 [自定义元素](api/config/header.md): +如果你使用 [header config](guides/initialization.md#initializing-scheduler-via-header-config)，则需要在其中添加 [一个自定义元素](api/config/header.md) ： ~~~js scheduler.config.header = [ "day", "week", "month", - {html:'
'+ + {html:''}, @@ -110,7 +109,7 @@ scheduler.config.header = [ scheduler.init("scheduler_here"); ~~~ -接下来，在调度器准备好后，设置点击调度器导航面板中的日期时显示日期选择器的事件: +为了在单击调度程序导航面板中的日期时显示日期选择器，我们在调度程序就绪时初始化点击事件： ~~~js scheduler.attachEvent("onSchedulerReady", function(){ @@ -136,7 +135,7 @@ scheduler.attachEvent("onSchedulerReady", function(){ }); ~~~ -`centerDatepicker` 函数用于正确定位下拉日期选择器: +`centerDatepicker` 是我们实现的辅助函数，用于在必要位置呈现下拉日期选择器： ~~~js ... @@ -146,9 +145,9 @@ scheduler.attachEvent("onSchedulerReady", function(){ return; } // 将弹出层居中显示在日期标签下方 - var offset = $(".dhx_cal_date").offset(); - var width = $(".dhx_cal_date").width(); - var popupWidth = $(".datepicker-dropdown").width(); + let offset = $(".dhx_cal_date").offset(); + let width = $(".dhx_cal_date").width(); + let popupWidth = $(".datepicker-dropdown").width(); $(".datepicker-dropdown").css({ top: offset.bottom + "px", left: (width - popupWidth) / 2 + "px" @@ -156,9 +155,9 @@ scheduler.attachEvent("onSchedulerReady", function(){ } ~~~ -2. *用户选择日期时更新调度器当前日期* +2. *当用户在日期选择器中单击日期时，将调度程序切换到所选日期* -显示日期选择器后，当选择某天时更新调度器的日期: +一旦按需显示日期选择器，我们需要在日历中选择日期时更改调度程序的日期： ~~~js $node.datepicker().on("changeDate", function () { @@ -166,9 +165,9 @@ scheduler.attachEvent("onSchedulerReady", function(){ }); ~~~ -3. *在日期选择器中高亮显示当前日期* +3. *在日期选择器中高亮当前日期* -为了突出显示调度器当前显示的日期，可以应用一个简单的 CSS 类: +要高亮显示在调度程序中当前显示的日期选择器日期，我们使用一个简单的 css 类： ~~~js .datepicker table .scheduler-date{ @@ -176,7 +175,7 @@ scheduler.attachEvent("onSchedulerReady", function(){ } ~~~ -调度器中可见的所有日期单元格都会添加此类: +所有在调度程序中当前可见的日期单元格都会获得此类： ~~~js function fillDatepicker(scheduler) { @@ -185,7 +184,7 @@ scheduler.attachEvent("onSchedulerReady", function(){ $(".datepicker-dropdown").find("[data-date]").removeClass("scheduler-date"); // 高亮调度器日期 - var visibleDates = getVisibleDates(scheduler); + const visibleDates = getVisibleDates(scheduler); visibleDates.forEach(function (date) { $(".datepicker-dropdown").find( "[data-date='" + date + "']" @@ -195,17 +194,17 @@ scheduler.attachEvent("onSchedulerReady", function(){ } ~~~ -要获取当前可见日期，可使用 `scheduler.getState`： +要获取当前可见的日期，可以使用 `scheduler.getState`： ~~~js function getVisibleDates(scheduler) { - var minVisible = scheduler.getState().min_date; - var maxVisible = scheduler.getState().max_date; + const minVisible = scheduler.getState().min_date; + const maxVisible = scheduler.getState().max_date; - var current = minVisible; - var result = []; + let current = minVisible; + let result = []; while (current.valueOf() < maxVisible.valueOf()) { - var currentUTC = Date.UTC( + let currentUTC = Date.UTC( current.getFullYear(),current.getMonth(),current.getDate() ); result.push(currentUTC.valueOf()); @@ -216,9 +215,10 @@ scheduler.attachEvent("onSchedulerReady", function(){ } ~~~ -4. *在日期选择器中标记有事件的日期* +4. *在日期选择器中高亮带有事件的日期* -为了高亮显示调度器中有事件的日期，可以添加另一个 CSS 类: +接下来，我们希望日期选择器高亮显示在调度程序中指定事件的日期。 +为此，我们使用与上一步相同的方法添加一个 css 类： ~~~js .datepicker table .has-event::after { @@ -231,26 +231,26 @@ scheduler.attachEvent("onSchedulerReady", function(){ } ~~~ -这将高亮显示迷你日历中有事件的日期。 +如上所示，我们高亮显示包含事件的迷你日历日期。 -要在鼠标悬停日期时显示事件数量的提示，可以获取当前日期选择器所显示月份的事件: +要在用户将光标悬停在日期上时显示该日期的事件数量提示，需要获取日期选择器当前显示月份中的事件： ~~~js function getVisibleEvents(calendarDate, scheduler) { - var min = scheduler.date.month_start(new Date(calendarDate)); - var max = scheduler.date.add(calendarDate, 1, "month"); + const min = scheduler.date.month_start(new Date(calendarDate)); + const max = scheduler.date.add(calendarDate, 1, "month"); min = scheduler.date.week_start(min); if(scheduler.date.week_start(new Date(max)) < max){ max = scheduler.date.week_start(new Date(max)); max = scheduler.date.add(max, 1, "week"); } - var events = scheduler.getEvents(min, max); - var days = {}; + const events = scheduler.getEvents(min, max); + let days = {}; events.forEach(function (event) { - var eventDate = event.start_date; + let eventDate = event.start_date; while(eventDate < event.end_date){ - var day = Date.UTC( + let day = Date.UTC( eventDate.getFullYear(), eventDate.getMonth(), eventDate.getDate() @@ -265,20 +265,19 @@ scheduler.attachEvent("onSchedulerReady", function(){ } }); - var result = []; - for (var i in days) { + let result = []; + for (let i in days) { result.push({ timestamp: i, count: days[i] }); } return result; } ~~~ -该方法从调度器中获取事件数据，因此只会高亮当前已加载的事件。如果你的应用使用动态加载，可能无法覆盖所有事件，因为只加载了一部分。 - +在上面的示例中，我们从调度程序获取事件信息。这意味着我们只能高亮显示已加载到调度程序中的事件。当使用动态加载时，这种方法并不特别好，因为在某一时刻只有一小部分事件会被加载到调度程序中。 -另一种方式是从服务器请求事件数据。 +另一种方法是从服务器请求事件数据。 -获得事件时间戳和数量后，可以如下更新日期选择器: +当我们获得包含事件时间戳以及每个单元格的事件数量的数据后，我们可以用这些信息填充日期选择器，如下所示： ~~~js function fillDatepicker(scheduler) { @@ -300,9 +299,9 @@ scheduler.attachEvent("onSchedulerReady", function(){ } ~~~ -5. *保持显示的日期标签与调度器当前日期同步* +5. *将显示的日期标签与调度程序中的活动日期同步* -最后，在窗口尺寸变化时重新居中日期选择器，并在用户更改日期时更新高亮: +最后，我们需要在窗口大小变化时重新居中日期选择器，并在用户在日期选择器中更改当前日期时应用高亮： ~~~js $(window).on('resize', function () { @@ -333,7 +332,7 @@ scheduler.attachEvent("onSchedulerReady", function(){ } ~~~ -如果你使用独立元素显示调度器当前日期，可以监听 [onViewChange](api/event/onviewchange.md) 事件并在其中更新标签: +如果你使用一个单独的元素来显示调度程序的活动日期，你需要捕获调度程序的 [onViewChange](api/event/onviewchange.md) 事件，并从那里更新日期标签： ~~~js scheduler.attachEvent("onViewChange", function (newMode , newDate){ @@ -346,31 +345,32 @@ scheduler.attachEvent("onViewChange", function (newMode , newDate){ }); ~~~ -请注意，该处理器在示例代码中未使用，因为内置日期头会自动更新。只有在你 [隐藏默认日期头](guides/scheduler-markup.md#hidingtheheaderofscheduler) 或需要在多个地方显示当前日期时，才需要这样做。 +请注意，我们在代码示例中没有使用此处理程序，因为我们依赖调度程序内置的日期头，该头会自动更新。只有在 [隐藏默认日期头](guides/scheduler-markup.md#hiding-the-header-of-scheduler)，或需要在多个位置显示活动日期时，才需要使用这种代码。 -## 在弹窗（lightbox）中使用 {#inthelightbox} +## 在灯箱中 -迷你日历（日期选择器）也可以在弹窗中用于选择"开始"和"结束"日期。 +迷你日历（日期选择器）可以在灯箱中用于选择“开始”和“结束”日期。 ![in_the_lightbox](/img/in_the_lightbox.png) -要在弹窗中添加迷你日历，请按照以下步骤操作: +要将迷你日历放置在灯箱中，请按照以下步骤： -1. 在页面上启用扩展: + +1. 在页面上启用扩展： ~~~js scheduler.plugins({ minical: true }); ~~~ -2. 将 time 区块的 type 属性从 time 修改为 calendar_time: +2. 将 time 部分的 type 设置为 calendar_time（而不是 time）： ~~~js -// 默认弹窗配置 -scheduler.config.lightbox.sections="[" +//默认灯箱定义 +scheduler.config.lightbox.sections= [ {name:"description", height:200, map_to:"text", type:"textarea", focus:true}, {name:"time", height:72, type:"time", map_to:"auto"} ]; -// 修改 type:"time" -> type:"calendar_time" +//将 type:"time" -> type:"calendar_time" scheduler.config.lightbox.sections = [ {name:"description", height:200, map_to:"text", type:"textarea", focus:true}, {name:"time", height:72, type:"calendar_time", map_to:"auto" } @@ -378,34 +378,34 @@ scheduler.config.lightbox.sections = [ ~~~ -[Mini calendar in the lightbox](https://docs.dhtmlx.com/scheduler/samples/05_calendar/03_in_form.html) +[调度程序灯箱中的迷你日历](https://docs.dhtmlx.com/scheduler/samples/05_calendar/03_in_form.html) -## 在调度器外部使用 {#outsidethescheduler} +## 调度程序之外 迷你日历（日期选择器）可以放置在页面的任意位置。 ![outside_the_scheduler](/img/outside_the_scheduler.png) -要在调度器外的 HTML 容器中添加迷你日历，请按照以下步骤操作: +要将迷你日历放在调度程序之外的某个 HTML 容器中，请执行以下步骤： -1. 在页面上启用扩展: +1. 在页面上启用扩展： ~~~js scheduler.plugins({ minical: true }); ~~~ -2. 在页面上定义迷你日历的容器: +2. 指定页面上迷你日历的容器： ~~~js
...
-
-
+
+
~~~ -3. 调用 [renderCalendar](api/method/rendercalendar.md) 方法来渲染迷你日历: +3. 调用 [renderCalendar](api/method/rendercalendar.md) 方法在页面上呈现迷你日历： ~~~js const calendar = scheduler.renderCalendar({ container:"cal_here", @@ -417,13 +417,13 @@ const calendar = scheduler.renderCalendar({ ~~~ -[Mini calendar outside the scheduler](https://docs.dhtmlx.com/scheduler/samples/05_calendar/05_plain_structure.html) +[调度程序外部的迷你日历](https://docs.dhtmlx.com/scheduler/samples/05_calendar/05_plain_structure.html) -## 模板与样式 {#templatesandstyles} +## 模板与样式 ### 模板 -您可以通过使用 [Mini Calendar Templates](guides/mini-calendar-templates.md) 文章中描述的各种模板，轻松更改日期在迷你日历（日期选择器）中的显示方式。 +要自定义在迷你日历（日期选择器）中显示的日期格式，您可以使用本文中列出的多种模板，详见文章 [Mini Calendar Templates]。 ~~~js scheduler.templates.calendar_month = scheduler.date.date_to_str("%M, %Y"); @@ -434,30 +434,31 @@ const calendar = scheduler.renderCalendar({..}); ![mini_calendar_custom_template](/img/mini_calendar_custom_template.png) + ### CSS 类 -要调整迷你日历（日期选择器）中日期的外观，您可以覆盖以下 CSS 类: +要自定义迷你日历（日期选择器）中日期的外观，您可以重新定义以下 CSS 类： - - + + - - + + - - + + - - + + - - + +
CSS 类应用于CSS classApplied to
.dhx_cal_container.dhx_mini_calendar .dhx_month_head单天的单元格.dhx_cal_container.dhx_mini_calendar .dhx_month_heada day's cell
.dhx_cal_container.dhx_mini_calendar .dhx_month_head.dhx_year_event带有分配事件的单天单元格.dhx_cal_container.dhx_mini_calendar .dhx_month_head.dhx_year_eventa day's cell with the assigned event(s)
.dhx_cal_container.dhx_mini_calendar .dhx_now .dhx_month_head当前日期的单天单元格.dhx_cal_container.dhx_mini_calendar .dhx_now .dhx_month_heada day's cell with the current date
.dhx_cal_container.dhx_mini_calendar .dhx_calendar_click当前活动日期的单天单元格.dhx_cal_container.dhx_mini_calendar .dhx_calendar_clicka day's cell with the currently active date
@@ -475,8 +476,8 @@ const calendar = scheduler.renderCalendar({..}); ![mini_calendar_custom_css](/img/mini_calendar_custom_css.png) -### 使用 markCalendar() 方法标记日期 -要为某一天分配特定的 CSS 类，可以使用 [markCalendar](api/method/markcalendar.md) 方法: +### Marking days with the markCalendar() method +要为某一天分配自定义 CSS 类，您可以使用 [markCalendar](api/method/markcalendar.md) 方法： ~~~js ' /*!*/ -}); -~~~ - -请注意，此方式仅适用于全网可访问的 HTTP URL。对于本地或内网环境，可直接在 header 中嵌入所有样式，例如: - -~~~js -scheduler.exportToPDF({ - header:"" -}); -~~~ - -## 导出 HTML 元素 {#exportinghtmlelements} - -将 Scheduler 导出为 PDF 时，出于安全考虑，对 HTML 元素存在一些限制。 - -某些元素如 ``、``、`` 标签，*src* 属性指向 SVG 图片 URL（适用于 PNG 和 JPG 导出，不适用于 Base64），例如: - -~~~html - -~~~ - -- 使用 CSS 样式，如 *background* 或 *background-image*，通过 `url()` 指向图片 URL 或 Base64 字符串（适用于 PNG、JPG 和 SVG）: - -~~~css -.red { - background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABmJLR0QA/wD/AP+gvaeTAAAAB3RJTUUH1ggDCwMADQ4NnwAAAFVJREFUGJWNkMEJADEIBEcbSDkXUnfSgnBVeZ8LSAjiwjyEQXSFEIcHGP9oAi+H0Bymgx9MhxbFdZE2a0s9kTZdw01ZhhYkABSwgmf1Z6r1SNyfFf4BZ+ZUExcNUQUAAAAASUVORK5CYII=") 100%/contain no-repeat; - display: inline-block; - width: 32px; - height: 32px; -} -~~~ - -如果您有自定义的导出模块，并且需要导出不受支持的 HTML 元素，可以联系技术支持获取如何修改模块以绕过限制的建议。但请注意，这样做可能会使服务器面临 XSS 安全风险。 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/png.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/png.md deleted file mode 100644 index 86f5e687..00000000 --- a/i18n/zh/docusaurus-plugin-content-docs/current/guides/png.md +++ /dev/null @@ -1,188 +0,0 @@ ---- -title: "导出为 PNG" -sidebar_label: "导出为 PNG" ---- - -# 导出为 PNG - -从 4.1 版本开始，dhtmlxScheduler 提供了一个[在线导出服务](export/png.md#defaultexporttopng)，允许您将调度器导出为 PNG 图像。 - -:::note -该服务是免费的，但导出的 PNG 图片将在 GPL 许可下包含库的水印。如果您购买了许可证，在有效支持期内（所有 PRO 许可证为 12 个月），导出将不会有水印。 -::: - -## 使用导出服务 {#usingexportservices} - -您可以选择不同的导出服务。可以将它们本地安装在您的机器上，从而无需依赖在线服务即可导出 Scheduler 为 PNG。 - -请注意，导出服务并未与 Scheduler 包一起提供。有关各服务的使用条款，请参阅[相关文档](https://dhtmlx.com/docs/products/dhtmlxScheduler/export.shtml)。 - -## 请求大小限制 {#limitsonrequestsize} - -所有导出方法（如 *exportToPDF*、*exportToPNG* 等）都使用统一的 API 端点 **https://export.dhtmlx.com/scheduler**。允许的最大请求大小为 **10 MB**。 - - -## 默认导出为 PNG {#defaultexporttopng} - -要将调度器导出为 PNG 图像，请按照以下步骤操作: - -- 使用 [plugins](api/method/plugins.md) 方法启用 export_api 插件: - -~~~js -scheduler.plugins({ - export_api: true -}); -~~~ - -:::note -对于 7.0 之前的 Scheduler 版本，还需要在页面中引入 **https://export.dhtmlx.com/scheduler/api.js** 脚本以激活在线导出服务，例如: - -~~~js - - -~~~ -::: - -- 使用 exportToPNG 方法触发导出: - -~~~html -/*!*/ -~~~ - - -[Export to PDF/PNG](https://docs.dhtmlx.com/scheduler/samples/04_export/06_online_export.html) - - -## 导出方法的参数 {#parametersoftheexportmethod} - -[exportToPNG()](api/method/exporttopng.md) 方法接受一个包含多个可选属性的对象: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
name(string) 指定输出文件的名称
format('A0', 'A1', 'A2', 'A3', 'A4', 'A5') 设置输出 PNG 图片的格式
orientation('portrait', 'landscape') 设置输出 PNG 图片的方向
zoom(number) 控制输出 PNG 图片的缩放级别
header(string) 为输出 PNG 图片添加页眉；可以使用任意 HTML
footer(string) 为输出 PNG 图片添加页脚；可以使用任意 HTML
server(string) 指定导出请求的 API 端点。如果您运行了本地导出服务，可用此参数。默认值为 https://export.dhtmlx.com/scheduler
- - -~~~js title="调用导出方法并带有可选参数的示例" -scheduler.exportToPNG({ - format:"A4", - orientation:"portrait", - zoom:1, - header:"

My company

", - footer:"

Bottom line

", - server:"https://myapp.com/myexport/scheduler" -}); -~~~ - - -## 输出文件名 {#nameoftheoutputfile} - -您可以在 [exportToPNG](export/png.md#parametersoftheexportmethod) 方法中通过 **name** 属性自定义导出的 PNG 文件名: - -~~~js -scheduler.exportToPNG({ - name:"my_beautiful_scheduler.png"/*!*/ -}); -~~~ - - -## 输出文件的页眉/页脚 {#headerfooteroftheoutputfile} - -要在输出 PNG 中包含页眉或页脚，请在 [exportToPNG](export/png.md#parametersoftheexportmethod) 方法中使用 **header** 和 **footer** 属性: - -:::note -这里可以插入任意 HTML。若包含图片，请确保 "src" 属性使用全局 URL。 -::: - -~~~js -scheduler.exportToPNG({ - name:"myscheduler.png", - header:"

My company

", - footer:"

Bottom line

" -}); -~~~ - - -## 输出文件的自定义样式 {#customstylefortheoutputfile} - -要为导出的调度器应用自定义样式，可以通过以下任一方法添加 CSS: - -- 引入样式表链接: - -~~~js -scheduler.exportToPNG({ - name:"calendar.png", - header:'' /*!*/ -}); -~~~ - -- 或直接通过 'style' 标签内嵌样式: - -~~~js -scheduler.exportToPNG({ - name:"calendar.png", - header:'' /*!*/ -}); -~~~ - -如果您的 CSS 存放在本地或内网，也可以将所有样式内联嵌入，如下所示: - -~~~js -scheduler.exportToPNG({ - header:"" -}); -~~~ - - -## 导出 HTML 元素 {#exportinghtmlelements} - -导出 Scheduler 为 PNG 时，请注意，出于安全考虑，某些 HTML 元素的导出是受限的。 - -如 ``、``、`` 标签，指向 SVG 图片 URL（适用于 PNG 和 JPG 导出，但不适用于 Base64），例如: - -~~~html - -~~~ - -- 使用 CSS 样式如 *background* 或 *background-image*，其 `url` 可指向图片 URL 或 Base64 编码的图片（适用于 PNG/JPG/SVG 导出）: - -~~~css -.red { - background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABmJLR0QA/wD/AP+gvaeTAAAAB3RJTUUH1ggDCwMADQ4NnwAAAFVJREFUGJWNkMEJADEIBEcbSDkXUnfSgnBVeZ8LSAjiwjyEQXSFEIcHGP9oAi+H0Bymgx9MhxbFdZE2a0s9kTZdw01ZhhYkABSwgmf1Z6r1SNyfFf4BZ+ZUExcNUQUAAAAASUVORK5CYII=") 100%/contain no-repeat; - display: inline-block; - width: 32px; - height: 32px; -} -~~~ - -如果您拥有自己的导出模块，并需要导出在线导出服务器不支持的 HTML 元素，请联系技术支持获取如何调整模块以移除这些限制的建议。但请注意，这么做可能会使您的服务器暴露于 XSS 漏洞风险中。 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/popups-and-modals.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/popups-and-modals.md new file mode 100644 index 00000000..5e600196 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/popups-and-modals.md @@ -0,0 +1,374 @@ +--- +title: "弹出消息与模态框" +sidebar_label: "弹出消息与模态框" +--- + +# 弹出消息和模态框 + +消息在 Scheduler 中用于通知用户发生错误、确认或拒绝某个操作、从若干选项中进行选择等。 +Scheduler 消息基于 [the fork of the dhtmlxMessage repository](https://github.com/DHTMLX/message) 的一个分支。 +因此，dhtmlxMessage 的全部功能对 dhtmlxScheduler 的消息同样适用。 + +消息主要有两种类型：[简单弹出消息框](#basic-popup-message) 和 带按钮的[模态消息框](#modal-message-boxes)，二者会阻塞应用的运行。 + +模态消息框可以属于三种类型之一： + +- [警告消息框](#alert-message-box-alert) +- [确认消息框](#confirm-message-box-confirm) +- [Modalbox](#modal-box-modal) + + +## 基本弹出消息 + +要创建一个基本的模态消息框，请使用 [scheduler.message](api/method/message.md) 方法。该方法的必填参数是消息文本： + +~~~js +scheduler.message("The event is updated"); +~~~ + +消息框有三种类型： + +- 默认消息框（**type:"info"**） + +![default_message](/img/default_message.png) + +- 错误消息框（**type:"error"**） + +![error_message](/img/error_message.png) + +- 警告消息框（**type:"warning"**） + +![warning_message](/img/warning_message.png) + +要创建相应的消息框，需要通过 *type* 属性设置相应的值： + +~~~js +// 创建一个错误消息框 +scheduler.message({ + text: "Click on the buttons to explore Scheduler message types", + expire: -1, + type: "error" +}); +~~~ + + +[不同类型的弹出框和模态框](https://docs.dhtmlx.com/scheduler/samples/09_api/11_popups_and_messages.html) + + +要应用不同的样式到消息框，需要通过 type 参数指定一个 CSS 类，如此处所述 [here](#styling)。 + +### 消息框定位 + +默认情况下，弹出消息框显示在窗口的右上角。与会覆盖父应用并阻塞其工作的[模态消息框](#modal-message-boxes)不同，弹出消息框不会阻塞工作流。你可以通过设置 **scheduler.message.position** 属性来改变消息框的位置： + +~~~js +scheduler.message.position = 'bottom'; +~~~ + +消息位置有四个可能的取值： + +- **top** - 在窗口的右上角显示消息框，默认设置 +- **bottom** - 在窗口的右下角显示消息框 +- **left** - 在窗口左侧显示，在 Scheduler 下方 +- **right** - 在窗口右侧显示，在 Scheduler 下方 + +### 过期间隔 + +可以通过 *expire* 参数自定义消息框的过期时间。它是在消息结束一定时间后消息框消失的时间段，单位为毫秒。 +默认情况下，过期间隔为 4000 毫秒。 + +你也可以修改该值，或通过将 expire 参数设为 "-1" 来完全取消过期时间。在这种情况下，消息框只会在鼠标点击时消失。 + +~~~js +scheduler.message({ + type:"error", + text:"Invalid data format", + expire:10000 +}); +~~~ + +### 使用 API 隐藏消息框 + +如果你想手动隐藏指定的消息框，而不是等待它自动隐藏，可以使用 **scheduler.message.hide(boxId)** 方法。它只接收一个参数： + +- **boxId** - 构造消息框时指定的框的 id + +~~~js +scheduler.message({ + id:"myBox", + text:"Page is loaded" +}); + +scheduler.message.hide("myBox"); +~~~ + + +## 模态消息框 + +模态消息框会阻塞父应用的工作，直到执行了所需操作（通常是点击按钮）。它在按钮点击后关闭，若有回调函数则会执行。 + +模态消息框共有三种类型： + +- [ Alert Message Box](#alert-message-box-alert) - 带一个按钮的提醒框； +- [ Confirm Message Box](#confirm-message-box-confirm) - 带两个按钮的确认框（用于确认或取消）； +- [ Modalbox](#modal-box-modal) - 带无限数量按钮的模态消息框。 + +框的一些通用属性包括： + +- **id** - 消息框的 id； +- **title** - 标题文本； +- **type** - 消息框的类型（警告或错误）； +- **text** - 消息框主体文本； +- **ok** - “OK” 按钮的文本； +- **cancel** - “Cancel” 按钮的文本（用于确认框）； +- **callback** - 按钮点击时调用的函数。参数为 *true* 或 *false*，取决于所点击的按钮； +- **position** - 目前仅支持一个值 - "top"，其他值将对齐为居中； +- **width** - 模态框的宽度（以 CSS [<length>](https://developer.mozilla.org/en-US/docs/Web/CSS/length) 或 [<percentage>](https://developer.mozilla.org/en-US/docs/Web/CSS/percentage) 值设置，例如 "100px", "50%"）； +- **height** - 模态框的高度（同样以 CSS [<length>](https://developer.mozilla.org/en-US/docs/Web/CSS/length) 或 [<percentage>](https://developer.mozilla.org/en-US/docs/Web/CSS/percentage) 值设置，例如 "100px", "50%"）。 + +## Alert Message Box (#alert) {#alert-message-box-alert} + +![alert](/img/alert.png) + +警报消息框包含一个“OK”按钮。要设置“OK”按钮的文本，请使用 *ok* 参数，其值为文本： + +- 简短形式（仅包含消息文本 - 参数 'text' 的隐式使用，其他参数采用默认值）： + +~~~js +scheduler.alert("Text"); +~~~ + +- 完整形式（包含若干可用参数，未指定的参数采用默认值） + +~~~js +scheduler.alert({ + text: "some text", + title: "Alert", + ok: "Ok", + callback: function(){...} +}); +~~~ + + +## Confirm Message Box (#confirm) {#confirm-message-box-confirm} + +![confirm](/img/confirm.png) + +确认消息框有两个按钮：“OK”和“Cancel”。按钮文本在相应的属性中定义。 + +- 简短形式 + +~~~js +scheduler.confirm("ConfirmText"); +~~~ + +- 完整形式 + +~~~js +scheduler.confirm({ + title:"Confirm", + text:"This is a simple confirm", + ok:"Ok", + cancel:"Cancel", + callback: function(result){ + if(result){ + scheduler.message("You clicked Ok"); + }else{ + scheduler.message("You clicked Cancel"); + } + } +}); +~~~ + + +## Modal Box (#modal) {#modal-box-modal} + +![modalbox](/img/modalbox.png) + +模态框具备一些特殊特性： + +- 其 *text* 可以包含任意 *HTML* 内容； +- 其中 *buttons* 数组可以指定很多按钮，数组内包含按钮的文本值； +- *callback* 函数将参数设为所选按钮的 *index*。 + +~~~js +scheduler.modalbox({ + title:"Settings", + text: " ... html code here... ", + buttons:["Save", "Defaults", "Cancel"], + callback: function(result){ + scheduler.alert(result); + } +}); +~~~ + + +### 配置模态框按钮 + +定义模态框按钮的配置有两种主要方式： + +- 简短形式： + +~~~js +scheduler.modalbox({ + // other settings + buttons:["Save", "Delete", "Cancel"], + callback: function(result){ + switch(result){ + case "0": + //Save + break; + case "1": + //Delete + break; + case "2": + //Cancel + break; + } + } +}); +~~~ + +回调函数的结果将等于从按钮数组中按下的按钮的字符串化索引值（"0", "1", "2",...）。 +每个按钮将从其标签转换为小写来获得一个 CSS 类，例如 *scheduler_**save**_button*, *scheduler_**delete**_button*, *scheduler_**cancel**_button*。 + +这些类可用于样式化按钮： + +~~~js +.scheduler_delete_button div{ + background:red; +} +~~~ + +如果同一个名称的按钮被多个弹出框使用且需要不同的样式，可以使用 **type** 配置： + +~~~js +scheduler.modalbox({ + // other settings + type:"special_popup", + buttons:["Save", "Delete", "Cancel"] +}); +~~~ + +**type** 将会以 "scheduler_" 字符串为前缀并添加到弹出元素的类名中： + +~~~js +.scheduler_special_popup .scheduler_delete_button div{ + background:red; +} +~~~ + +- 完整形式： + +可以通过更长的配置形式显式定义按钮的 CSS 类和回调值： + +~~~js +scheduler.modalbox({ + // other settings + buttons: [ + { label:"Save", css:"link_save_btn", value:"save" }, + { label:"Cancel", css:"link_cancel_btn", value:"cancel" }, + { label:"Delete", css:"link_delete_btn", value:"delete" } + ], + callback: function(result){ + switch(result){ + case "save": + //Save + break; + case "cancel": + //Cancel + break; + case "delete": + //Delete + break; + } + } +}); +~~~ + +其中 **label** 参数为必填项，而 **css** 和 **value** 选项可以省略。若缺少参数，将按按钮配置简短形式计算：CSS 将从小写化的按钮标签继承，按钮索引将用作值。 + +**css** 将以 "scheduler_" 字符串为前缀并添加到按钮元素的类名中： + +~~~css +.scheduler_link_delete_btn div{ + background:red; +} +~~~ + +## 隐藏模态消息框 + +要手动隐藏模态消息框，而不是等待其自动隐藏，可以使用 **scheduler.modalbox.hide()** 方法。参数为模态框的 div 容器： + +~~~js +const box = scheduler.modalbox({ + title: "Settings", + text: " ... html code here... ", + buttons: ["Save", "Defaults", "Cancel"], + callback: function(result){ + scheduler.alert(result); + } +}); + +scheduler.modalbox.hide(box); +~~~ + +对于 **alert** 和 **confirm** 模态框，同样需要使用 **scheduler.modalbox.hide()** 方法： + +~~~js +const box = scheduler.confirm({ + text: "Continue?", + ok:"Yes", + cancel:"No", + callback: function(result){ + scheduler.message("Result: "+result); + } +}); + +scheduler.modalbox.hide(box); +~~~ + + +## 样式 + +对于任意类型的消息框，你都可以定义自定义样式以实现所需的外观。 +通常，通过 *type* 参数指定相应的 CSS 类：你定义一个 CSS 类并将该参数设置为它的名称。 + +在设置 'type' 参数时需要牢记一些规则： + +- 要为警告和确认框设置 CSS 类，必须以“窗口相关”的方式初始化此类框。 +- 要为消息框设置 CSS 类，必须以“通用”方式初始化此类框。 +- CSS 类名应以 'scheduler-' 前缀开头。 +- 为了正确应用样式，需使用该类名作为 .scheduler-some div 的选择器，表示该样式适用于调度程序消息内部的元素。 + +~~~js + + + +scheduler.message({ type:"myCss", text:"some text" }); +~~~ + + +## 模态窗口与键盘交互 + +模态框的键盘功能由 **scheduler.message.keyboard** 属性控制。初始时，它被设置为 true。 + +默认情况下，模态框会阻止页面的键盘事件。可使用的按键只有： + +- "space" 和 "enter" - 将模态框的结果设为 true； +- "escape" - 将模态框的结果设为 false。 + +通过将 **keyboard** 属性设置为 false，你将启用键盘事件（并禁用上述按键）： + +~~~js +scheduler.message.keyboard = false; +scheduler.modalbox({...}); +~~~ + +这使得你可以在模态框内对输入框等控件进行完整的键盘输入。 \ No newline at end of file diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/quick-info.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/quick-info.md index a10c165a..00acd5b9 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/guides/quick-info.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/quick-info.md @@ -1,15 +1,15 @@ --- -title: "大按钮让导航更便捷" -sidebar_label: "大按钮让导航更便捷" +title: "更易导航的大按钮" +sidebar_label: "更易导航的大按钮" --- -# 大按钮让导航更便捷 +# 更易导航的大按钮 -从 3.7 版本开始，dhtmlxScheduler 引入了 ["Quick Info" 扩展](guides/extensions-list.md#quickinfo)。该功能允许用更大、更易用的按钮替换常规的侧边栏按钮和简化的编辑表单。 +从版本 3.7 开始，dhtmlxScheduler 提供了新的 ["Quick Info" extension](guides/extensions-list.md#quick-info)。该扩展能够用新的（更大、使用更方便的）按钮替代标准的侧边栏按钮和简化的编辑表单。 -## 启用大按钮调度器 +## 启用大按钮调度程序 -要启用大按钮调度器，只需在页面上开启 ["Quick Info"](guides/extensions-list.md#quickinfo) 扩展: +要启用大按钮调度程序，请在页面上启用 ["Quick Info"](guides/extensions-list.md#quick-info) 扩展： ~~~js @@ -17,37 +17,34 @@ sidebar_label: "大按钮让导航更便捷" scheduler.plugins({ quick_info: true }); - scheduler.init('scheduler_here',new Date(2009,5,30),"day"); + scheduler.init('scheduler_here',new Date(2027,5,30),"day"); ... + + +~~~ + +然后，通过创建 `src/main.js` 文件并使用下面提供的代码来指定主要的 JavaScript 逻辑。它将 Scheduler UI 与 Firestore 连接，并处理实时更新。 + +~~~js title="src/main.js" +import { scheduler } from "dhtmlx-scheduler"; +import { db } from "./firebase.js"; +import { + collection, + query, + onSnapshot, + addDoc, + deleteDoc, + orderBy, + doc, + updateDoc, + getDocs, +} from "firebase/firestore"; + +import "dhtmlx-scheduler/codebase/dhtmlxscheduler.css"; + +const { remoteUpdates } = scheduler.ext.liveUpdates; + +scheduler.plugins({ + recurring: true, +}); + +scheduler.config.header = [ + "day", + "week", + "month", + "date", + "prev", + "today", + "next", +]; + +scheduler.init("scheduler_here", new Date(2025, 3, 20), "week"); + +const eventsRef = collection(db, "events"); + +scheduler.createDataProcessor(async function (entity, action, ev, id) { + switch (action) { + case "create": + { + const createdDoc = await addDoc(eventsRef, ev); + if (createdDoc.id) { + return { action: "inserted", tid: createdDoc.id }; + } + } + break; + case "update": + { + return updateDoc(doc(db, "events", id), ev); + } + break; + case "delete": + { + const deletedDoc = await deleteDoc(doc(db, "events", id)); + if (deletedDoc) { + return { action: "deleted" }; + } + } + break; + } +}); + +// helper functions to process event data +const processEvent = (docSnapshot) => { + const event = docSnapshot.data(); + event.id = docSnapshot.id; + return event; +}; + +// without it collection wouldn't call onSnapshot +const eventsQuery = query(eventsRef, orderBy("text", "desc")); + +(async () => { + const EventsSnap = await getDocs(eventsQuery); + const bulkEvents = EventsSnap.docs.map((ev) => processEvent(ev)); + scheduler.parse(bulkEvents); + watchRealtime(); +})(); + +const watchRealtime = () => { + let EventsLoaded = false; + + onSnapshot(eventsQuery, (querySnapshot) => { + if (!EventsLoaded) { + // first snapshot sends the current state + // we have already loaded it at the previous step + EventsLoaded = true; + return; + } + querySnapshot.docChanges().forEach((change) => { + // processes only the server-side changes + if (change.doc.metadata.hasPendingWrites) return; + + const event = processEvent(change.doc); + + switch (change.type) { + case "added": + remoteUpdates.events({ type: "add-event", event }); + break; + case "modified": + remoteUpdates.events({ type: "update-event", event }); + break; + case "removed": + remoteUpdates.events({ type: "delete-event", event }); + break; + } + }); + }); +}; +~~~ + +本代码将 DHTMLX Scheduler 库与 Firebase Firestore 集成，用于在 JavaScript 应用中创建一个实时、交互式的事件日历。它在 Scheduler UI 与 Firestore 数据库之间同步事件数据，确保两者中的更改能够在另一方中立即反映。代码支持事件创建、更新、删除与周期性事件，利用 Firestore 的实时能力。 + +### 关键函数摘要 + +- **scheduler.createDataProcessor**：通过与 Firestore 同步来处理 Scheduler 事件的 CRUD 操作： + + - 当执行 "create" 时，在 "events" 集合中新增一个文档。 + - 当执行 "update" 时，更新相应的 Firestore 文档。 + - 当执行 "delete" 时，从 Firestore 中删除文档。 + +- **processEvent(docSnapshot)**：将 Firestore 文档快照转换为 Scheduler 事件对象，并附上文档的 ID。 + +- **(...)() IIFE**：初始数据加载。在页面加载时从 Firestore 将所有现有事件加载到 Scheduler，然后开始监听实时更新。 + +- **watchRealtime**：使用 Firestore 的 `onSnapshot` 监听发生在 events 集合中的变化，并实时更新 Scheduler UI。关键点是： + + - 忽略初始快照（已加载） + - 仅处理服务器端更改（忽略本地、未提交的写入） + - 通过调用 Scheduler 的 `remoteUpdates` 处理新增、修改和删除事件 + +- **onSnapshot(q, callback)**：实时监听 Firestore 的 "events" 集合中的变化，按文本降序排序，并对新增、修改或删除的事件应用相应的实时更新到 Scheduler UI，使用 `remoteUpdates.events`。 + +## Step 4: Initialize and deploy the project + +现在需要初始化 Firebase Hosting 和 Firestore。为此，您应该： + +1. 从项目根目录，运行以下命令： + +~~~js +firebase init +~~~ + +然后执行以下步骤： + +- 使用空格键选择 **Firestore** 与 **Hosting** 功能 +- 选择 **Use an existing project** 并选择您的 Firebase 项目 +- 对 Firestore 规则、索引和公共目录，接受默认设置 +- 将公共目录设置为 `dist`（Vite 构建输出） +- 除非你想配置它，否则跳过 GitHub 部署设置 + +2. 通过以下命令构建您的项目： + +~~~js +npm run build +~~~ + +3. 使用以下命令部署到 Firebase Hosting： + +~~~js +firebase deploy +~~~ + +部署完成后，控制台会显示您的托管 URL。 \ No newline at end of file diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/integrations/google-calendar/google-calendar-sync.md b/i18n/zh/docusaurus-plugin-content-docs/current/integrations/google-calendar/google-calendar-sync.md index 3d8812ad..cf7774d0 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/integrations/google-calendar/google-calendar-sync.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/integrations/google-calendar/google-calendar-sync.md @@ -1,157 +1,163 @@ --- -title: "Two-way sync with Google Calendar (Node.js)" -sidebar_label: "Two-way sync (Node.js)" -description: "Implement a Node.js + Express integration that syncs DHTMLX Scheduler events with Google Calendar using OAuth 2.0 and Google Calendar API v3." +title: "与 Google 日历的双向同步（Node.js）" +sidebar_label: "Google 日历" +description: "实现一个 Node.js + Express 集成，将 DHTMLX Scheduler 事件通过 OAuth 2.0 与 Google 日历 API v3 同步。" --- -# DHTMLX Scheduler: Two-way sync with Google Calendar (Node.js) +# DHTMLX Scheduler: 与 Google 日历的双向同步（Node.js） -In this guide, you will implement **two-way sync** between **DHTMLX Scheduler** and **Google Calendar** in a small Node.js app: +在本指南中，你将实现 **DHTMLX Scheduler** 与 **Google 日历** 之间的 **双向同步**，在一个小型 Node.js 应用中： -- Load calendars and events from Google Calendar into Scheduler -- Push Scheduler create/update/delete operations back to Google Calendar +- 从 Google 日历加载日历和事件到 Scheduler +- 将 Scheduler 的创建/更新/删除操作推送回 Google 日历 :::note -This approach implements **two-way sync via API calls** (Scheduler → backend → Google Calendar). It does **not** implement real-time Google → Scheduler push updates (webhooks). If you change events directly in Google Calendar, reload the app (or reload a date range) to see the updated data in Scheduler. +此方法实现的是通过 API 调用的 **双向同步**（Scheduler → 后端 → Google 日历）。它不实现 Google → Scheduler 的实时推送更新（webhook）。如果你直接在 Google 日历中修改事件，请重新加载应用（或重新加载一个日期范围）以在 Scheduler 中看到更新的数据。 ::: -You will build: +你将构建： -- a Node.js + Express backend with Google OAuth 2.0 ([Passport](https://www.npmjs.com/package/passport)) and a small REST API for Scheduler -- an event mapping layer (Google ↔ Scheduler), including basic recurring events/exceptions handling -- a Scheduler client wired to the backend via `scheduler.createDataProcessor()` +- 一个包含 Google OAuth 2.0 的 Node.js + Express 后端（[Passport](https://www.npmjs.com/package/passport)）以及一个用于 Scheduler 的小型 REST API +- 一个事件映射层（Google ↔ Scheduler），包括基本的计划内事件/例外处理 +- 一个通过 `scheduler.createDataProcessor()` 连接到后端的 Scheduler 客户端 -## Prerequisites +:::note +完整的源代码可在 GitHub 上获取：[https://github.com/DHTMLX/scheduler-google-calendar-demo](https://github.com/DHTMLX/scheduler-google-calendar-demo)。 +::: -- Node.js 18+ -- A Google account with access to Google Cloud Console -- Basic familiarity with TypeScript and Express -- Access to DHTMLX Scheduler packages (the example uses `@dhx/trial-scheduler`) +## 前提条件 -## Demo repository +- Node.js 18+ +- 拥有 Google Cloud Console 访问权限的 Google 账号 +- 对 TypeScript 和 Express 的基本熟悉 +- 访问 DHTMLX Scheduler 包（示例使用 `@dhx/trial-scheduler`） -A complete working project that matches this guide is available on GitHub: -- https://github.com/dhtmlx/scheduler-google-auth-demo *(placeholder - replace with your actual repo)* +## 演示仓库 -The guide explains the key steps and shows the integration code that matters. The repository is the "full runnable reference". +与本指南匹配的完整可运行项目可在 GitHub 上获取： +- https://github.com/dhtmlx/scheduler-google-auth-demo -## Project setup +该指南解释了关键步骤并展示了重要的集成代码。仓库是“完整可运行的参考实现”。 -In this section you will prepare Google OAuth credentials, configure the project, and run the app locally. +## 项目设置 -### 1) Get the project code +在本节中，你将准备 Google OAuth 凭据、配置项目并在本地运行应用。 -Do one of the following: +### 1) 获取项目代码 -- Clone the repository: +执行以下任意一种操作： +- 克隆仓库： ~~~bash title="Terminal" git clone https://github.com/dhtmlx/scheduler-google-auth-demo.git cd scheduler-google-auth-demo ~~~ -If your project installs `@dhx/*` packages from the private registry, configure npm: - +如果你的项目需要从私有注册表安装 `@dhx/*` 包，请配置 npm： ~~~bash title="Terminal" npm config set @dhx:registry https://npm.dhtmlx.com ~~~ -### 2) Configure Google Cloud (OAuth 2.0) +### 2) 配置 Google Cloud（OAuth 2.0） -In this step you will create OAuth credentials that the backend uses to access Google Calendar on behalf of a user. +在此步骤中，你将创建后端用于以用户身份访问 Google 日历的 OAuth 凭据。 -> The guide uses OAuth in **Testing** mode (recommended for development). In this mode, only users listed as **Test users** can authorize the app. +> 本指南在 **Testing** 模式下使用 OAuth（开发推荐）。在该模式下，只有被列为测试用户的用户才可以授权应用。 -#### 2.1 Create or select a Google Cloud project +#### 2.1 创建或选择 Google Cloud 项目 -1. Open [Google Cloud Console](https://console.cloud.google.com/). -2. Select an existing project or create a new one. +1. 打开 [Google Cloud Console](https://console.cloud.google.com/)。 +2. 选择一个已有项目或创建一个新项目。 -#### 2.2 Enable Google Calendar API +#### 2.2 启用 Google 日历 API -1. Go to **APIs & Services → Library**. -2. Search for **Google Calendar API**. -3. Click **Enable**. +1. 转到 **APIs & Services → Library**。 +2. 搜索 **Google Calendar API**。 +3. 点击 **Enable**（启用）。 -#### 2.3 Configure the OAuth consent screen +#### 2.3 配置 OAuth 同意屏幕 -1. Go to **APIs & Services → OAuth consent screen**. -2. Choose **External** (typical for consumer Google accounts), then click **Create**. -3. Fill in the required fields: - - **App name** - - **User support email** - - **Developer contact email** -4. Set **Publishing status** to **Testing**. -5. Add **Test users**: - - Add the Google accounts you will use to sign in while developing/testing. +1. 转到 **APIs & Services → OAuth consent screen**。 +2. 选择 **External**（对于消费型 Google 账户常见），然后点击 **Create**。 +3. 填写必填字段： + - **App name**（应用名称） + - **User support email**（用户支持邮箱） + - **Developer contact email**（开发者联系邮箱） +4. 将 **Publishing status** 设置为 **Testing**。 +5. 添加 **Test users**： + - 添加你在开发/测试时将用于登录的 Google 账号。 :::note -If you skip test users in **Testing** mode, Google will block authorization for accounts that are not explicitly added. +如果在 **Testing** 模式下跳过测试用户，Google 将阻止未明确添加的账户授权。 ::: -#### 2.4 Create OAuth client credentials +#### 2.4 创建 OAuth 客户端凭据 -1. Go to **APIs & Services → Credentials**. -2. Click **Create credentials → OAuth client ID**. -3. Application type: **Web application**. -4. Add this **Authorized redirect URI**: +1. 转到 **APIs & Services → Credentials**。 +2. 点击 **Create credentials → OAuth client ID**。 +3. 应用类型：**Web application**。 +4. 添加以下 **Authorized JavaScript origin**： +~~~text title="JavaScript origin" +http://localhost:3000 +~~~ +5. 添加以下 **Authorized redirect URI**： ~~~text title="Redirect URI" http://localhost:3000/auth/google/callback ~~~ -5. Save and copy: +6. 保存并复制： - **Client ID** - **Client Secret** -#### 2.5 Scope used by this integration +#### 2.5 本集成使用的作用域 -The backend requests Google Calendar access via: +后端通过以下方式请求 Google 日历访问权限： - `https://www.googleapis.com/auth/calendar` -This scope is sufficient for listing calendars and performing event CRUD operations. +此作用域足以列出日历并执行事件的 CRUD 操作。 -### 3) Configure environment variables +### 3) 配置环境变量 -In this step you will provide OAuth credentials and session settings to the backend. +在此步骤中，你将向后端提供 OAuth 凭据和会话设置。 -Copy `.env.example` to `.env`, then fill in the values: +把 `.env.example` 复制为 `.env`，然后填写值： ~~~ini title=".env" -GOOGLE_CLIENT_ID=... -GOOGLE_CLIENT_SECRET=... +GOOGLE_CLIENT_ID=<上一步中的 Client ID> +GOOGLE_CLIENT_SECRET=<上一步中的 Client Secret> GOOGLE_REDIRECT_URI=http://localhost:3000/auth/google/callback SESSION_SECRET=some-long-random-string PORT=3000 ~~~ -### 4) Install dependencies and run +### 4) 安装依赖并运行 ~~~bash title="Terminal" npm install npm run start ~~~ -Open: +打开： ~~~text title="App URL" http://localhost:3000 ~~~ -At this point you should be able to click **Add Google Calendars**, sign in, and see Scheduler populated with events. +此时你应该能够点击 **Add Google Calendars**、完成登录，并在 Scheduler 中看到加载的日历与事件。 --- -## Implementation +## 实现 -The rest of the guide explains how the integration is put together. If you are adapting this to an existing app, treat each section below as an implementation milestone. +本节后续内容将解释如何把集成组合在一起。如果你是在将本指南应用于现有应用，请将下面每个小节视为一个实现里程碑。 -## Step 1 - Split responsibilities (backend vs client) +## 步骤 1 - 职责分离（后端 vs 客户端） -In this step you will separate responsibilities so Scheduler stays a UI component and the backend owns OAuth + Google API calls. +在此步骤中，你将分离职责，让 Scheduler 保持为 UI 组件，后端负责 OAuth 和 Google API 调用。 -A typical structure: +一个典型的结构是： ~~~text title="Project structure" scheduler-google-auth-demo/ @@ -175,18 +181,18 @@ scheduler-google-auth-demo/ .env.example ~~~ -- **server/**: OAuth, token storage (in session), Google Calendar API calls, and REST endpoints for Scheduler -- **client/**: Scheduler init + loading, and [DataProcessor](guides/server-integration.md) that forwards CRUD actions to the server +- **server/**：OAuth、会话中的令牌存储、Google Calendar API 调用，以及 Scheduler 的 REST 端点 +- **client/**：Scheduler 初始化和加载，以及 [DataProcessor](guides/server-integration.md) 将 CRUD 操作转发到服务器 -## Step 2 - Implement Google OAuth (Express session + Passport) +## 步骤 2 - 实现 Google OAuth（Express 会话 + Passport） -In this step you will make the backend able to authenticate a user and store Google access/refresh tokens. +在此步骤中，你将使后端能够对用户进行认证并在会话中存储 Google 的访问令牌/刷新令牌。 -### 2.1 Bootstrap the server (sessions + passport) +### 2.1 引导服务器（会话 + passport） -Update `server/index.ts` to enable sessions and passport, then mount your routes. +更新 `server/index.ts` 以启用会话和 passport，然后挂载路由。 -Below is the core wiring (only the relevant parts are shown): +以下是核心连接（仅展示相关部分）： ~~~ts title="server/index.ts" app.use( @@ -206,7 +212,9 @@ app.use( app.use(passport.initialize()); app.use(passport.session()); -app.use("/events", eventsRoute); +app.use("/events", (req, res, next) => { + req.isAuthenticated() ? next() : res.status(401).json({ error: "Not authenticated" }); +}, eventsRoute); app.use("/auth", authRoute); app.get("/", (req, res) => { @@ -214,13 +222,21 @@ app.get("/", (req, res) => { }); ~~~ -### 2.2 Configure the Google strategy +在 `/events` 上的行内中间件确保未认证的请求在路由处理程序将 `req` 转换为 `AuthenticatedRequest` 时不会导致服务器崩溃，而是返回 `401` 响应。 -Update `server/config/passport.ts` to register `passport-google-oauth20`. +### 2.2 配置 Google 策略 -The key idea: keep `accessToken` and `refreshToken` on the user object stored in the session: +更新 `server/config/passport.ts`，注册 `passport-google-oauth20`。核心思路是：在会话中存储的用户对象上保留 `accessToken` 和 `refreshToken`： ~~~ts title="server/config/passport.ts" +passport.serializeUser((user: Express.User, done) => { + done(null, user); +}); + +passport.deserializeUser((obj: Express.User, done) => { + done(null, obj); +}); + passport.use( new GoogleStrategy( { @@ -241,12 +257,12 @@ passport.use( ~~~ :::note -Production apps usually persist tokens per user in a database and implement refresh token rotation/revocation. This example keeps tokens in-session to keep the flow easy to follow. +生产环境中通常会把令牌持久化到数据库，并实现刷新令牌的轮换/撤销。本示例将令牌保存在会话中，以便于理解。 ::: -### 2.3 Add OAuth routes +### 2.3 添加 OAuth 路由 -Update `server/routes/auth.route.ts` to expose the OAuth entry point, callback, and logout: +更新 `server/routes/auth.route.ts`，暴露 OAuth 入口、回调和登出： ~~~ts title="server/routes/auth.route.ts" router.get( @@ -269,26 +285,109 @@ router.get("/google/logout", (req, res, next) => { }); ~~~ -At this point you should be able to hit `/auth/google`, complete the Google consent screen, and return to `/` with an authenticated session. +到此，你应能够访问 `/auth/google`，完成 Google 同意屏幕并带着已认证的会话返回到 `/`。 + +### 创建 Google 日历服务层 + +创建 `server/services/googleService.ts`，封装 Google Calendar API v3 的 CRUD 方法。它从会话令牌中创建 OAuth2 客户端，并暴露列出日历、列出事件、以及创建/更新/删除事件的帮助函数： + +~~~ts title="server/services/googleService.ts" +import { google, calendar_v3 } from "googleapis"; +import type { GoogleOAuthTokens } from "../types/auth.types.ts"; +import config from "../config/index.ts"; + +const calendarClient = google.calendar("v3"); + +function oauthClient(tokens: GoogleOAuthTokens) { + const client = new google.auth.OAuth2( + config.GOOGLE_CLIENT_ID, + config.GOOGLE_CLIENT_SECRET, + config.GOOGLE_REDIRECT_URI + ); + client.setCredentials({ + access_token: tokens.accessToken, + refresh_token: tokens.refreshToken, + }); + return client; +} + +/* ------ CRUD helpers ------- */ + +export async function listCalendars(tokens: GoogleOAuthTokens): Promise { + const { data } = await calendarClient.calendarList.list({ auth: oauthClient(tokens) }); + return data.items ?? []; +} + +export async function listEvents( + tokens: GoogleOAuthTokens, + opts: calendar_v3.Params$Resource$Events$List +): Promise { + const { data } = await calendarClient.events.list({ + auth: oauthClient(tokens), + ...opts, + }); + return data.items ?? []; +} + +export async function createEvent( + tokens: GoogleOAuthTokens, + calendarId: string | undefined, + gEvent: calendar_v3.Schema$Event +): Promise { + const { data } = await calendarClient.events.insert({ + auth: oauthClient(tokens), + calendarId: calendarId || "primary", + requestBody: gEvent, + conferenceDataVersion: 1, + }); + return data; +} -## Step 3 - Expose a REST API for Scheduler CRUD +export async function updateEvent( + tokens: GoogleOAuthTokens, + calendarId: string | undefined, + eventId: string, + gPatch: calendar_v3.Schema$Event +): Promise { + const { data } = await calendarClient.events.patch({ + auth: oauthClient(tokens), + calendarId: calendarId || "primary", + eventId, + requestBody: gPatch, + }); + return data; +} + +export async function deleteEvent( + tokens: GoogleOAuthTokens, + calendarId: string | undefined, + eventId: string +): Promise { + await calendarClient.events.delete({ + auth: oauthClient(tokens), + calendarId: calendarId || "primary", + eventId, + }); +} +~~~ -In this step you will implement the API contract Scheduler uses: +## 步骤 3 - 为 Scheduler CRUD 暴露 REST API -- `GET /events` - load calendars + events -- `POST /events` - create -- `PUT /events/:eventId` - update -- `DELETE /events/:eventId` - delete +在此步骤中，你将实现 Scheduler 使用的 API 合同： -### 3.1 Load calendars + events (GET /events) +- `GET /events` - 加载日历 + 事件 +- `POST /events` - 创建 +- `PUT /events/:eventId` - 更新 +- `DELETE /events/:eventId` - 删除 -Update `server/routes/events.route.ts` to return: +### 3.1 加载日历 + 事件（GET /events） +更新 `server/routes/events.route.ts`，返回： -- `data` containing Scheduler-style events -- `collections.calendars` containing list of calendars that will be [available on the client]](guides/loading-data.md#loadingdatawithtimelineandunitssectionsfromtheserver) +- `data`：包含 Scheduler 风格的事件 +- `collections.calendars`：包含日历列表，客户端将可用该列表（详见 [加载数据](guides/loading-data.md#collections)） -Below is a working example handler: +以下为一个工作示例处理程序： ~~~ts title="server/routes/events.route.ts" router.get("/", async (req, res, next) => { @@ -314,7 +413,7 @@ router.get("/", async (req, res, next) => { const googleEvents = await Promise.all( mappedCals.map(async (calendar) => { - const params: Record = { calendarId: calendar.id, timeMin: minDate }; + const params: calendar_v3.Params$Resource$Events$List = { calendarId: calendar.id, timeMin: minDate }; if (maxDate) params.timeMax = maxDate; const calendarEventsResponse = await googleService.listEvents(authedReq.user.tokens, params); @@ -336,13 +435,13 @@ router.get("/", async (req, res, next) => { }); ~~~ -Related docs: [Loading data](guides/loading-data.md#loadingdatawithtimelineandunitssectionsfromtheserver). +相关文档： [加载数据](guides/loading-data.md#collections)。 -### 3.2 Forward CRUD operations to Google Calendar +### 3.2 将 CRUD 操作转发到 Google Calendar -Update the same route module to handle create/update/delete. +更新同一路由模块以处理创建/更新/删除。 -Create: +创建： ~~~ts title="server/routes/events.route.ts" router.post("/", async (req, res, next) => { @@ -363,7 +462,7 @@ router.post("/", async (req, res, next) => { }); ~~~ -Update: +更新： ~~~ts title="server/routes/events.route.ts" router.put("/:eventId", async (req, res, next) => { @@ -385,15 +484,15 @@ router.put("/:eventId", async (req, res, next) => { }); ~~~ -Delete: +删除： ~~~ts title="server/routes/events.route.ts" router.delete("/:eventId", async (req, res, next) => { const authedReq = req as AuthenticatedRequest; const calendarId = (req.body as DhxEvent)?.calendarId as string | undefined; - // If this is an exception occurrence (id contains "_"), there is nothing to delete on Google side. - // Google Calendar removes occurrences when deleting the main recurring event. + // 如果这是一个异常发生（id 包含 "_"），则 Google 端暂无需要删除的项。 + // Google 日历在删除主循环事件时会删除发生的全部实例 const dhxId = req.body?.id as string | undefined; if (typeof dhxId === "string" && dhxId.indexOf("_") > -1) { res.json({ action: "deleted" }); @@ -409,37 +508,41 @@ router.delete("/:eventId", async (req, res, next) => { }); ~~~ -At this point Scheduler can load `/events`, and basic CRUD can be wired on the client. +至此，Scheduler 可以加载 `/events`，客户端也可以完成基本的 CRUD 逻辑并与 Google Calendar 对接。 -## Step 4 - Map Google events to Scheduler events (and back) +## 步骤 4 - 将 Google 事件映射为 Scheduler 事件（以及相反） -In this step you will implement a mapper that converts between: +在此步骤中，你将实现一个映射器，用于在以下字段之间进行转换： -- Google event fields (`start.dateTime` / `start.date`, `recurrence`, etc.) -- Scheduler event fields (`start_date`, `end_date`, `rrule`, etc.) +- Google 事件字段（`start.dateTime` / `start.date`、`recurrence` 等） +- Scheduler 事件字段（`start_date`、`end_date`、`rrule` 等） -### Key differences you must handle +### 你必须处理的关键差异 -1) **All-day vs timed events** -- Google: all-day uses `start.date` / `end.date` -- Google: timed uses `start.dateTime` / `end.dateTime` and may include `timeZone` -- Scheduler: uses `start_date` / `end_date` (Date objects) +1) **全天事件 vs 有时段的事件** +- Google：全天事件使用 `start.date` / `end.date` +- Google：有时段的事件使用 `start.dateTime` / `end.dateTime`，可能包含 `timeZone` +- Scheduler：使用 `start_date` / `end_date`（Date 对象） -2) **Recurrence rules** -- Google stores recurrence as array strings with `RRULE:` prefix -- Scheduler uses `rrule` without the prefix +2) **重复规则** +- Google 将重复存储为带有 `RRULE:` 前缀的数组字符串 +- Scheduler 使用无前缀的 `rrule` -3) **Recurring series end date** -- Scheduler expects an `end_date` for recurring series. -- Google may use `UNTIL=` in RRULE, or no UNTIL (infinite series). +3) **重复系列的结束日期** +- Scheduler 期望重复事件有一个 `end_date` +- Google 的 RRULE 可能包含 `UNTIL=`，也可能没有 UNTIL（无限重复） -Related docs: [Recurring events](guides/recurring-events.md). +相关文档： [Recurring events](guides/recurring-events.md)。 ### Google → Scheduler -Update `server/mappers/eventMapper.ts` to map the Google event shape into Scheduler's event shape (excerpt below; keep helper functions like `calculateEndDate()` in the same module): +更新 `server/mappers/eventMapper.ts`，将 Google 事件的形状映射到 Scheduler 的事件形状（摘录如下；请保持 `calculateEndDate()` 等辅助函数在同一模块中）： ~~~ts title="server/mappers/eventMapper.ts" +import moment from "moment-timezone"; +import type { DhxEvent, MappedCalendar } from "../types/types.ts"; +import type { calendar_v3 } from "googleapis"; + export function toDhxEvent(gEvent: calendar_v3.Schema$Event, calendar: MappedCalendar): DhxEvent { const ev: DhxEvent = { id: gEvent.id as string, @@ -456,7 +559,7 @@ export function toDhxEvent(gEvent: calendar_v3.Schema$Event, calendar: MappedCal const start = gEvent.start; const end = gEvent.end; - // Non-recurring + // 非重复 if (start?.dateTime && end?.dateTime && !gEvent.recurrence?.length) { ev.start_date = new Date(start.dateTime); ev.end_date = new Date(end.dateTime); @@ -465,7 +568,7 @@ export function toDhxEvent(gEvent: calendar_v3.Schema$Event, calendar: MappedCal ev.end_date = new Date(end.date + "T00:00:00"); } - // Recurring + // 递归 if (gEvent.recurrence?.length) { ev.rrule = String(gEvent.recurrence[0]).replace("RRULE:", ""); @@ -480,7 +583,7 @@ export function toDhxEvent(gEvent: calendar_v3.Schema$Event, calendar: MappedCal ev.end_date = calculateEndDate(gEvent); } - // Exceptions: original start time + // 异常：原始开始时间 if (gEvent.originalStartTime?.dateTime) { ev.original_start = new Date(gEvent.originalStartTime.dateTime); } @@ -489,9 +592,27 @@ export function toDhxEvent(gEvent: calendar_v3.Schema$Event, calendar: MappedCal } ~~~ +### `calculateEndDate()` 助手函数 + +从 Google 的重复规则中提取 UNTIL 日期，若不存在 UNTIL，则为无限系列返回一个很远的未来日期。Scheduler 期望在重复事件上有 `end_date`，因此此助手提供一个值： + +~~~ts title="server/mappers/eventMapper.ts" +// 将 UNTIL=20260129T205959Z 转换为 '2026-01-29T20:59:59Z'（如果存在） +// 如果不存在 UNTIL -> 事件无限重复 -> 返回 '9999-02-01T00:00:00Z' +function calculateEndDate(gEvent: calendar_v3.Schema$Event): Date { + const until = String(gEvent.recurrence?.[0] ?? "").match(/RRULE:.*?UNTIL=([^;]+)/)?.[1]; + + return until + ? new Date( + until.replace(/^([0-9]{4})([0-9]{2})([0-9]{2})T([0-9]{2})([0-9]{2})([0-9]{2})Z$/, "$1-$2-$3T$4:$5:$6Z") + ) + : new Date(9999, 1, 1); +} +~~~ + ### Scheduler → Google -Update the mapper to convert Scheduler event fields back into Google's schema: +更新映射器，将 Scheduler 的事件字段再转换为 Google 的模式： ~~~ts title="server/mappers/eventMapper.ts" export function toGoogleEventPayload(dhx: DhxEvent): calendar_v3.Schema$Event { @@ -500,12 +621,14 @@ export function toGoogleEventPayload(dhx: DhxEvent): calendar_v3.Schema$Event { description: dhx.details ?? "", }; + const tz = dhx.timeZone || "UTC"; + if (dhx.start_date && dhx.end_date) { const isAllDay = dhx.duration === 24 * 60 * 60 || new Date(dhx.end_date).getTime() - new Date(dhx.start_date).getTime() === 24 * 60 * 60 * 1000; - // Recurring + // 递归 if (dhx.rrule && dhx.duration) { gEvent.recurrence = ["RRULE:" + dhx.rrule]; @@ -514,49 +637,41 @@ export function toGoogleEventPayload(dhx: DhxEvent): calendar_v3.Schema$Event { gEvent.end = { date: moment(dhx.start_date).add(1, "day").format("YYYY-MM-DD") }; } else { gEvent.start = { - dateTime: moment - .tz(new Date(dhx.start_date).toISOString(), "YYYY-MM-DD HH:mm", dhx.timeZone) - .format("YYYY-MM-DDTHH:mm:ssZZ"), - timeZone: dhx.timeZone, + dateTime: moment(new Date(dhx.start_date).toISOString()).tz(tz).format("YYYY-MM-DDTHH:mm:ssZZ"), + timeZone: tz, }; const endDate = new Date(new Date(dhx.start_date).getTime() + dhx.duration * 1000).toISOString(); gEvent.end = { - dateTime: moment.tz(endDate, "YYYY-MM-DD HH:mm", dhx.timeZone).format("YYYY-MM-DDTHH:mm:ssZZ"), - timeZone: dhx.timeZone, + dateTime: moment(endDate).tz(tz).format("YYYY-MM-DDTHH:mm:ssZZ"), + timeZone: tz, }; } } else { - // Non-recurring + // 非重复 if (isAllDay) { gEvent.start = { date: moment(dhx.start_date).format("YYYY-MM-DD") }; gEvent.end = { date: moment(dhx.start_date).add(1, "day").format("YYYY-MM-DD") }; } else { gEvent.start = { - dateTime: moment - .tz(new Date(dhx.start_date).toISOString(), "YYYY-MM-DD HH:mm", dhx.timeZone) - .format("YYYY-MM-DDTHH:mm:ssZZ"), - timeZone: dhx.timeZone, + dateTime: moment(new Date(dhx.start_date).toISOString()).tz(tz).format("YYYY-MM-DDTHH:mm:ssZZ"), + timeZone: tz, }; gEvent.end = { - dateTime: moment - .tz(new Date(dhx.end_date).toISOString(), "YYYY-MM-DD HH:mm", dhx.timeZone) - .format("YYYY-MM-DDTHH:mm:ssZZ"), - timeZone: dhx.timeZone, + dateTime: moment(new Date(dhx.end_date).toISOString()).tz(tz).format("YYYY-MM-DDTHH:mm:ssZZ"), + timeZone: tz, }; } } - // Recurring exceptions support + // 递归异常支持 if (dhx.recurring_event_id) { gEvent.recurringEventId = dhx.recurring_event_id.toString(); } if (dhx.original_start) { gEvent.originalStartTime = { - dateTime: moment - .tz(new Date(dhx.original_start).toISOString(), "YYYY-MM-DD HH:mm", dhx.timeZone) - .format("YYYY-MM-DDTHH:mm:ssZZ"), - timeZone: dhx.timeZone, + dateTime: moment(new Date(dhx.original_start).toISOString()).tz(tz).format("YYYY-MM-DDTHH:mm:ssZZ"), + timeZone: tz, }; } if (dhx.deleted) { @@ -568,13 +683,13 @@ export function toGoogleEventPayload(dhx: DhxEvent): calendar_v3.Schema$Event { } ~~~ -## Step 5 - Wire Scheduler to the backend (load + CRUD) +## 步骤 5 - 将 Scheduler 与后端连接（加载 + CRUD） -In this step you will initialize Scheduler, load data from `GET /events`, and send CRUD operations to the backend via DataProcessor. +在此步骤中，你将初始化 Scheduler、从 `GET /events` 加载数据，并通过 DataProcessor 将 CRUD 操作发送到后端。 -### 5.1 Render a different UI for "authorized vs not authorized" +### 5.1 为“已授权 vs 未授权”呈现不同的 UI -Update `client/index.ejs` to expose an authorization flag to the client: +更新 `client/index.ejs`，向客户端暴露授权标志： ~~~html title="client/index.ejs" ~~~ -### 5.2 Initialize Scheduler and load events +### 5.2 初始化 Scheduler 并加载事件 -Update `client/main.ts` to initialize Scheduler and load data once the user is authorized. - -Only the relevant part is shown: +更新 `client/main.ts`，初始化 Scheduler 并在用户授权后加载数据。仅展示相关部分： ~~~ts title="client/main.ts" scheduler.plugins({ recurring: true }); @@ -602,19 +715,19 @@ if (GOOGLE_AUTHORIZED) { } ~~~ -### 5.3 Enable two-way sync with DataProcessor +### 5.3 使用 DataProcessor 启用双向同步 -Update `client/main.ts` to forward Scheduler CRUD actions to the server. +更新 `client/main.ts`，将 Scheduler 的 CRUD 操作转发到服务器。 ~~~ts title="client/main.ts" scheduler.createDataProcessor(async (entity, action, data, id) => { const calendars = scheduler.serverList("calendars") as MappedCalendar[]; - // Demo simplification: send everything into the first available calendar. - // In a real app, let users choose a target calendar. + // 演示简化：将所有内容发送到第一个可用日历。 + // 实际应用中让用户选择目标日历。 data.calendarId = calendars[0]?.id; - // Provide client timezone so the server can generate correct dateTime values. + // 提供客户端时区，以便服务器生成正确的 dateTime 值。 data.timeZone = momentTz.tz.guess(); return fetchEvent(action, data, id); @@ -639,41 +752,41 @@ async function fetchEvent(action, data, id) { } ~~~ -Related docs: [DataProcessor](guides/server-integration.md#createdp). +相关文档： [DataProcessor](guides/server-integration.md#technique)。 -At this point: +至此： -- events from Google Calendar should appear in Scheduler after authorization -- creating/updating/deleting in Scheduler should update Google Calendar +- 授权后，Google Calendar 的事件应会显示在 Scheduler 中 +- Scheduler 中的创建/更新/删除应当同步回 Google Calendar --- -## Troubleshooting +## 故障排除 ### "Error 400: redirect_uri_mismatch" -- **Cause:** The redirect URI in Google Cloud credentials does not match your app callback URL. -- **Fix:** Ensure the Authorized redirect URI is exactly: +- 原因：Google Cloud 凭据中的回调 URI 与应用回调 URL 不匹配。 +- 解决：确保授权的重定向 URI 与下面完全一致： - `http://localhost:3000/auth/google/callback` ### "Access blocked: app has not completed the Google verification process" -- **Cause:** Consent screen is not in Testing mode or you are not listed as a test user. -- **Fix:** Set Publishing status to **Testing** and add your account in **Test users**. +- 原因：同意屏幕未处于 Testing 模式，或你不在测试用户列表中。 +- 解决：将 Publishing status 设置为 **Testing**，并在 **Test users** 中添加你的账户。 ### "No refresh token returned" -- **Cause:** Google may return a refresh token only the first time the user consents for a given client ID. -- **Fix:** Ensure your auth request includes `accessType: "offline"` and `prompt: "consent"`. If you already authorized before, revoke access in Google Account permissions and authorize again. +- 原因：Google 可能只有在用户对给定客户端 ID 第一次同意时才返回刷新令牌。 +- 解决：确保你的授权请求包含 `accessType: "offline"` 和 `prompt: "consent"`。如果你之前已经授权，请在 Google 账户权限中撤销授权并重新授权。 -## Summary +## 总结 -You implemented two-way sync between Scheduler and Google Calendar: +你已经实现了 Scheduler 与 Google 日历之间的双向同步： -- The backend authenticates users via Google OAuth 2.0 and stores tokens in the session -- Scheduler loads calendars and events through `GET /events` -- Scheduler CRUD operations are forwarded to Google Calendar via `POST/PUT/DELETE /events` -- A mapper converts timed/all-day and recurring events between Google Calendar and Scheduler +- 后端通过 Google OAuth 2.0 进行用户认证，并将令牌存储在会话中 +- Scheduler 通过 `GET /events` 加载日历和事件 +- Scheduler 的 CRUD 操作通过 `POST/PUT/DELETE /events` 转发到 Google Calendar +- 映射器在 Google 日历和 Scheduler 之间转换有时段/全天以及重复事件 -## Demo repository link +## 演示仓库链接 -Full working source (replace with your real repo): +完整可运行的源代码： -- https://github.com/dhtmlx/scheduler-google-auth-demo +- https://github.com/DHTMLX/scheduler-google-calendar-demo \ No newline at end of file diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/integrations/legacy/backbone-integration.md b/i18n/zh/docusaurus-plugin-content-docs/current/integrations/legacy/backbone-integration.md new file mode 100644 index 00000000..e87380c1 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/integrations/legacy/backbone-integration.md @@ -0,0 +1,52 @@ +--- +title: "Backbone 集成（遗留）" +sidebar_label: "Backbone 集成（遗留）" +--- + +# Backbone 集成（遗留） + +:::warning +本文描述了一个遗留的集成方案。如果你是从头开始，请参阅框架集成或纯 JavaScript 设置。 +::: + +从 4.0 版本开始，库提供了一个名为 [**mvc**](guides/extensions-list.md#legacy) 的特殊扩展，允许你将调度程序与 Backbone 库集成。 + +如果你有一个基于 Backbone 的应用程序并希望在那里添加调度程序（仍然使用 Backbone 管理数据），请使用以下技术： + +1. 将 dhtmlxScheduler 文件包含到应用中： +~~~js + + +~~~ +2. 在页面上激活 mvc 扩展： +~~~js +scheduler.plugins({ + mvc: true +}); +~~~ +3. 以通常的方式初始化和配置调度程序： +~~~js +scheduler.full_day = true; + +scheduler.init("scheduler_here",new Date(2019,0,6),"month"); +~~~ +4. 现在你可以在 backbone 中创建数据集合并将调度程序链接到它： +~~~js +//你可以在这里使用任何模型 +MyEvent = Backbone.Model.extend({}); +EventList = Backbone.Collection.extend({ + model:MyEvent, + url:"./data/backbone.json" +}); +events = new EventList(); + + +scheduler.backbone(events); //link scheduler to collection +~~~ + +之后，调度程序将从集合加载数据并反映其中的任何更新。此外，调度程序 UI 的任何更改都会在 backbone 的集合中触发相关事件。 + +正如你所看到的，它相当简单。你所需要做的只是使用 [backbone](api/method/backbone.md) 方法，而不是通常的 [load](api/method/load.md) 或 [parse](api/method/parse.md) 方法。 + + +[Backbone 集成](https://docs.dhtmlx.com/scheduler/samples/10_integration/07_backbone.html) \ No newline at end of file diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/integrations/legacy/dhtmlx-dnd.md b/i18n/zh/docusaurus-plugin-content-docs/current/integrations/legacy/dhtmlx-dnd.md new file mode 100644 index 00000000..b6dc4bd6 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/integrations/legacy/dhtmlx-dnd.md @@ -0,0 +1,65 @@ +--- +title: "来自 DHTMLX Suite v5.x 的拖放" +sidebar_label: "来自 DHTMLX Suite v5.x 的拖放" +--- + +# 拖放操作（旧版） + +:::warning +本文描述的是一个遗留的集成。如果您是从零开始，请参阅框架集成或 Vanilla JS 设置。 +::: + +库提供了 **outerdrag** 扩展，允许通过拖动外部 DHTMLX 组件或其他日程组件中的元素来创建新的事件。 + +## 从外部组件拖放 + +当用户将某个外部元素拖到日程安排器上时，日程安排器将打开一个 lightbox 用于创建新事件。 + +![external_dnd](/img/external_dnd.png) + +[与 dhtmlxTree 的集成](https://docs.dhtmlx.com/scheduler/samples/10_integration/02_dhtmlxtree_outer_drag.html) + +让我们在 dhtmlxTree 组件 的场景中考虑外部拖放。 + +按照以下步骤，将日程安排器与 dhtmlxTree 集成： + +1. 下载 dhtmlxTree 包并将其内容解压到 [YOUR APPLICATION ROOT] 文件夹 +2. 在页面中包含必要的 js 和 css 文件： +~~~html + + +... +~~~ +3. 在页面上激活 [outerdrag](guides/extensions-list.md#outerdrag) 扩展： +~~~js +scheduler.plugins({ + outerdrag: true +}); +~~~ +4. 初始化 dhtmlxTree 组件（参见 此处 的说明）： +~~~js +var tree = new dhtmlXTreeObject("treebox", "100%", "100%", 0); +tree.setImagePath("../common/dhtmlxTree/imgs/csh_yellowbooks/"); +tree.loadXML("./data/tree.xml"); +~~~ +5. 在 dhtmlxTree 组件中启用拖放功能（参见 此处）： +~~~js +tree.enableDragAndDrop(true); +~~~ +6. 初始化并配置日程安排器： +~~~js +... +scheduler.init('scheduler_here', new Date(2019, 5, 30), "timeline"); +~~~ +7. 将处理程序附加到 [onExternalDragIn](api/event/onexternaldragin.md) 事件，以设定拖动元素的文本如何转换为事件的属性： +~~~js +scheduler.attachEvent("onExternalDragIn", function(id, source, event){ + var label = tree.getItemText(tree._dragged[0].id); + scheduler.getEvent(id).text = label; + return true; +}); +~~~ + +[与 dhtmlxTree 的集成](https://docs.dhtmlx.com/scheduler/samples/10_integration/02_dhtmlxtree_outer_drag.html) + +现在，您可以轻松创建包含树数据的新事件——只需拖动并放下所需的节点。 \ No newline at end of file diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/integrations/other/bootstrap.md b/i18n/zh/docusaurus-plugin-content-docs/current/integrations/other/bootstrap.md new file mode 100644 index 00000000..efd2f6c5 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/integrations/other/bootstrap.md @@ -0,0 +1,48 @@ +--- +title: "与 Bootstrap 的集成" +sidebar_label: "与 Bootstrap 的集成" +--- + +# 与 Bootstrap 的集成 + +您可以将 Scheduler 库与 Bootstrap 框架集成。要在 Bootstrap 应用程序中添加 Scheduler，请按照以下步骤进行： + +1. 将 dhtmlxScheduler 文件包含到应用中： + +~~~html + +~~~ + +2. 为 Bootstrap 元素指定 HTML 标记，并添加一个 Scheduler 容器和头部元素，如下所示： + +~~~html +
+
+
+ dhtmlxScheduler +
+
+ + +
+ +
+
+ +~~~ + +3. 以常规方式初始化并配置 Scheduler： + +~~~js +scheduler.plugins({ + year_view: true, +}); +scheduler.config.first_hour = 8; +scheduler.config.limit_time_select = true; + +scheduler.init('scheduler_here',new Date(2027,5,30),"week"); +~~~ + + +[Bootstrap 布局](https://docs.dhtmlx.com/scheduler/samples/10_integration/08_bootstrap.html) \ No newline at end of file diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/integrations/other/dhxlayout-integration.md b/i18n/zh/docusaurus-plugin-content-docs/current/integrations/other/dhxlayout-integration.md new file mode 100644 index 00000000..4a0e5aad --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/integrations/other/dhxlayout-integration.md @@ -0,0 +1,88 @@ +--- +title: "与 dhtmlxLayout 的集成" +sidebar_label: "与 dhtmlxLayout 的集成" +--- + +# 与 dhtmlxLayout 的集成 + +:::warning +所描述的功能已被弃用，且不再维护。 +::: + +在页面上放置 [多个调度器](guides/multiple-per-page.md) 的一个好方法是使用 dhtmlxLayout。它不仅提供了美观的框架，还确保与页面上其他元素的正确交互，并根据页面大小的变化进行相应调整。 + +:::note +请注意，dhtmlxLayout 不是 dhtmlxScheduler 库的一部分。根据 dhtmlxSuite 库的版本，Layout 有两种版本可供选择。 +::: + +## dhtmlxSuite v5+ + +在这个版本中 dhtmlxLayout 可以作为独立产品使用，也可以作为 dhtmlxSuite 库的一部分使用。要在您的应用中使用 dhtmlxLayout v5.X，您应 [购买许可证](https://dhtmlx.com/docs/products/dhtmlxSuite/)。 + +**将 dhtmlxScheduler 实例附加到布局单元格中**，请使用 [attachScheduler()] 方法。 + +**注**，将调度器附加到单元格会自动初始化它。因此，请在将调度器放入布局之前进行配置。 + +~~~js +function init() { + var dhxLayout = new dhtmlXLayoutObject(document.body, "2U"); + + sched1 = Scheduler.getSchedulerInstance(); + sched1.config.multi_day = true; + dhxLayout.cells("a").attachScheduler(new Date(2027,05,30),"week",null,sched1); + sched1.load("/data/units") + + sched2 = Scheduler.getSchedulerInstance(); + dhxLayout.cells("b").attachScheduler(new Date(2027,05,30),"month",null,sched2); + sched2.load("/data/units") +} +~~~ + +[Integration with dhtmlxLayout (dhx_terrace skin, Suite v5.1)](https://docs.dhtmlx.com/scheduler/samples/10_integration/05_dhtmlxlayout_terrace.html) + +## dhtmlxSuite v6+ + +从 dhtmlxSuite 6.0 开始，dhtmlxLayout 不能再单独从整个 Suite 库中获取。 +如果您打算使用这种方式，您应购买 [Suite 6.X 库](https://dhtmlx.com/docs/products/dhtmlxSuite/#licensing) 的许可证。 + +dhtmlxScheduler 版本 [5.3](whats-new.md#53) 及更高版本实现了在 dhtmlxSuite v6+ 中使用的通用 View 接口，并且可以 [直接附加到任何单元格](https://docs.dhtmlx.com/suite/layout/api/cell/layout_cell_attach_method/)： + +~~~js +// create and configure the scheduler instance +scheduler.config.header = [ + "day", + "week", + "month", + "date", + "prev", + "today", + "next" +]; +scheduler.config.multi_day = true; + +// after the scheduler is attached, onSchedulerReady will be fired +scheduler.attachEvent("onSchedulerReady", function () { + requestAnimationFrame(function(){ + // here you can set the initial view and date and load the data + scheduler.setCurrentView(new Date(2027,5,3), "week"); + scheduler.load("../common/events.json"); + }); + +}); + +const layout = new dhx.Layout("layout", { + rows: [{ + id: "scheduler-cell", + header: "Appointment Scheduler", + html:"
" + }] +}); +layout.cell("scheduler-cell").attach(scheduler); +~~~ + + +### 注意事项 + +- 注意，`dhtmlxSuite Layout` 是异步的，调度器不会在 `.attach` 调用之后立即初始化。 +- 你需要监听 onSchedulerReady 事件以进行任何后初始化设置。 +- 目前在与 dhtmlxSuite v6+ 一起使用时，无法为调度器指定标记（markup），这意味着你需要使用 [header](api/config/header.md) 配置来指定导航面板的控件。 \ No newline at end of file diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/integrations/other/jquery-integration.md b/i18n/zh/docusaurus-plugin-content-docs/current/integrations/other/jquery-integration.md new file mode 100644 index 00000000..85ec76bd --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/integrations/other/jquery-integration.md @@ -0,0 +1,34 @@ +--- +title: "jQuery 集成" +sidebar_label: "jQuery 集成" +--- + +# jQuery 集成 + +从版本 4.0 起，dhtmlxScheduler 可以与 jQuery 集成。 + +一个使用 jQuery 的标准调度程序可以按如下方式初始化： + +~~~js +$(function(){ + $(".myscheduler").dhx_scheduler({ + date:new Date(2027,4,25), + mode:"month" + }); + + scheduler.load("data/events"); +}); +~~~ + +其中： + +- **".myscheduler"** - 一个与 jQuery 兼容的 CSS 选择器，用于容器，在其中将创建调度程序（在 PRO 版本中，您可以一次在多个容器中初始化调度程序） +- **dhx_scheduler()** 方法用于初始化 dhtmlxScheduler 的一个实例。作为参数，该方法接收一个配置对象： + - **date** - (*Date*) 调度程序的初始日期（默认是当前日期） + - **mode** - (*string*) 初始视图的名称（默认值为 "week"） + - 其他任何配置参数（通常通过 scheduler.config.xxxxx 设置）也可以按如下方式设置 +:::note +通过 jQuery 调用初始化的调度程序可以使用与标准调度程序相同的配置和 API +::: + +[jQuery 集成](https://docs.dhtmlx.com/scheduler/samples/10_integration/06_jquery.html) \ No newline at end of file diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/integrations/react/configuration-props.md b/i18n/zh/docusaurus-plugin-content-docs/current/integrations/react/configuration-props.md new file mode 100644 index 00000000..6b90679f --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/integrations/react/configuration-props.md @@ -0,0 +1,212 @@ +--- +title: 在 ReactScheduler 中使用 DHTMLX Scheduler 属性 +sidebar_label: 配置 +description: "封装属性的完整参考，映射到 Scheduler 配置、模板、事件以及数据回调。" +--- + +# 在 ReactScheduler 中使用 DHTMLX Scheduler 属性 + +本页描述了 **React Scheduler** 接受的 props 及其如何映射到 DHTMLX Scheduler API。 + +## 可用的 props + +| Prop | Type | 描述 | +|---|---|---| +| `events` | `Event[]` | 要渲染的 Scheduler 事件。 | +| `view` | `"day" \| "week" \| "month" \| "year" \| ...` | 活动的 Scheduler 视图。 | +| `date` | `Date` | 用于渲染所选视图的活动日期。 | +| `templates` | `SchedulerTemplates` | 映射到 Scheduler 模板（例如，事件样式/文本渲染）。 | +| `config` | `SchedulerConfig` | 映射到 Scheduler 配置选项。 | +| `xy` | `Record` | UI 尺寸设置（例如，将内置导航隐藏，`nav_height: 0`）。 | +| `data` | `{ load?: string \| (() => Promise); save?: string \| SaveHandler; batchSave?: BatchSaveHandler }` | 数据加载与变更处理的回调/URL。 | +| `customLightbox` | `ReactElement \| null` | 用你自己的 React 组件替换内置 Lightbox。 | +| `modals` | `SchedulerModals` | 覆盖内置的确认对话框（例如，事件删除确认）。 | +| `filter` | `(event: Event) => boolean` | 筛选在 Scheduler 中显示的事件。 | +| `on` props | `(...args) => any` | 映射到 Scheduler 事件的事件处理函数（`onViewChange`、`onBeforeLightbox` 等）。 | + +## 基本示例 + +```tsx +import ReactScheduler, { + type Event, + type SchedulerConfig, + type SchedulerTemplates, +} from "@dhtmlx/trial-react-scheduler"; +import "@dhtmlx/trial-react-scheduler/dist/react-scheduler.css"; + +const events: Event[] = [ + { + id: 1, + text: "Planning", + start_date: new Date("2025-12-08T09:00:00Z"), + end_date: new Date("2025-12-08T10:00:00Z"), + }, +]; + +const templates: SchedulerTemplates = { + event_class: (_start, _end, event) => event.classname || "", +}; + +const config: SchedulerConfig = { + first_hour: 6, + last_hour: 22, + hour_size_px: 60, +}; + +export default function Demo() { + return ( + + ); +} +``` + +## 数据 prop (`load`, `save`, `batchSave`) + +使用 `data` prop 将 Scheduler 连接到后端或 React 管理的状态。 + +### 使用后端 URL + +```tsx + +``` + +### 使用回调处理程序 + +```tsx + { + if (entity !== "event") return; + + if (action === "create") { + const response = await fetch("/api/events", { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify(item), + }); + + const created = await response.json(); + return { id: created.id }; + } + + if (action === "update") { + await fetch(`/api/events/${id}`, { + method: "PUT", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify(item), + }); + } + + if (action === "delete") { + await fetch(`/api/events/${id}`, { method: "DELETE" }); + } + }, + }} +/> +``` + +## 模板与配置映射 + +`templates` 映射到 Scheduler 的模板函数，而 `config` 映射到 Scheduler 的配置选项。 + +```tsx + + event.classname === "important" ? "event-important" : "", + }} + config={{ + first_hour: 7, + last_hour: 21, + time_step: 15, + }} +/> +``` + +## 事件属性 + +你可以将 Scheduler 事件作为 React props 传递。 + +```tsx + { + console.log("View changed:", mode, date); + }} + onBeforeLightbox={(eventId) => { + console.log("Opening editor for", eventId); + return true; + }} +/> +``` + +如需完整的受支持事件和回调列表，请参阅： + +- [Scheduler events overview](api/overview/events_overview.md) +- [Scheduler methods overview](api/overview/methods_overview.md) +- [Scheduler properties overview](api/overview/properties_overview.md) + +## `customLightbox` 与 `modals` + +当你想用自定义的事件编辑器替换内置编辑器时，请使用 `customLightbox`。当你需要自定义确认对话框时，请使用 `modals`。 + +```tsx +} + modals={{ + onBeforeEventDelete: ({ event, callback }) => { + if (window.confirm(`Delete "${event.text}"?`)) { + callback(); + } + }, + }} +/> +``` + +## 事件过滤 + +```tsx + event.text.toLowerCase().includes(search.toLowerCase())} +/> +``` + +## 通过 `ref` 直接访问 API + +如果某些用例未被 props 覆盖，请使用 `ref` 获取底层 Scheduler 实例。 + +```tsx +import { useEffect, useRef } from "react"; +import ReactScheduler, { type ReactSchedulerRef } from "@dhx/react-scheduler"; + +export default function DirectApiDemo() { + const schedulerRef = useRef(null); + + useEffect(() => { + const scheduler = schedulerRef.current?.instance; + if (!scheduler) return; + + console.log(scheduler.getEvents()); + scheduler.setCurrentView(new Date()); + }, []); + + return ; +} +``` + +## 相关页面 + +- [React Scheduler Overview](integrations/react/overview.md) +- [Data Binding & State Management Basics](integrations/react/state/state-management-basics.md) +- [Quick Start with React Scheduler](integrations/react/quick-start.md) \ No newline at end of file diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/integrations/react/copyright.md b/i18n/zh/docusaurus-plugin-content-docs/current/integrations/react/copyright.md new file mode 100644 index 00000000..18a5d084 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/integrations/react/copyright.md @@ -0,0 +1,125 @@ +--- +title: "第三方许可" +sidebar_label: "第三方许可" +--- + +# 第三方许可 + +本页列出作为 **DHTMLX React Scheduler** 一部分分发的组件所包含的第三方软件告知与许可条款。 + +DHTMLX React Scheduler 是一个捆绑发行版，其中包含 DHTMLX Scheduler JavaScript 库。因此，与 DHTMLX Scheduler 重新分发的所有第三方组件也同样适用于 React Scheduler。 + +本页还列出特定于 React 封装器以及可选的 React 示例应用程序的第三方组件。 + +## 作为 DHTMLX React Scheduler 打包的一部分的组件 + +### Inter 字体 + +版权所有 2020 The Inter Project Authors（[https://github.com/rsms/inter](https://github.com/rsms/inter)） + +本字体软件采用 SIL Open Font License（开放字体许可），版本 1.1。该许可的原文如下，也可在 FAQ 中获取： +[https://openfontlicense.org](https://openfontlicense.org) + +#### SIL OPEN FONT LICENSE Version 1.1 - 2007 年 2 月 26 日 + +前言 +开放字体许可证（OFL）的目标是在全球范围内促进协作字体项目的发展，支持学术与语言社区的字体创作工作，并提供一个自由开放的框架，在其中字体可以与他人共同分享与改进。 + +OFL 允许对被许可的字体进行自由使用、学习、修改和再分发，前提是不能单独出售字体本身。字体及其任何派生作品可以与任何软件捆绑、嵌入、再分发和/或出售，但前提是派生作品不得使用保留名称。字体及其派生物不能以任何其他许可证进行发布。然而，使用该字体或其派生物创建的文档不受此许可的约束。 + +定义 +"Font Software" 指按本许可由版权所有者发布并清楚标注为此的字体软件集合，可能包括源文件、构建脚本和文档。 + +"Reserved Font Name" 指版权声明之后以此标注的任何名称。 + +"Original Version" 指版权所有者按本许可分发的字体软件组件集合。 + +"Modified Version" 指通过增加、删除、或在整体或部分上替换 Original Version 的组件、改变格式或将字体软件移植到新环境所产生的任何派生版本。 + +"Author" 指为字体软件做出贡献的设计师、工程师、程序员、技术作者或其他人员。 + +权限与条件 +特此免费授权给任何获得字体软件副本的人员使用、学习、复制、合并、嵌入、修改、再分发，并出售修改和未修改的字体软件副本，需符合以下条件： + +1) 字体软件及其任何单独组件的原始版本或修改版本不得单独出售。 + +2) 字体软件的原始版本或修改版本可与任何软件捆绑、再分发和/或出售，前提是每个副本都包含上述版权声明和本许可。可将其作为独立文本文件、易读的头部信息，或在文本或二进制文件中的适当机器可读元数据字段中包含，只要用户能够轻松查看这些字段。 + +3) 除非获得相应版权持有者的明确书面许可，否则任何修改版本不得使用保留的字体名称。该限制仅适用于呈现给用户的主字体名称。 + +4) 版权持有者或字体软件作者的名称不得用于宣传、背书或推广任何修改版本，除非用于确认版权持有者和作者的贡献，或获得他们的明确书面许可。 + +5) 字体软件，无论是否经过修改，整体或部分地，必须完全在本许可下分发，且不得在任何其他许可下分发。对使用字体软件创建的文档不适用保持在此许可下的要求。 + +终止 +若不符合上述任何条件，本许可即告无效。 + +免责声明 +字体软件“按原样”提供，未附带任何形式的保证，无论是明示还是暗示，包括但不限于对适销性、特定用途适用性和非侵权性的保证。在任何情况下，版权持有者均不对因使用或无法使用字体软件或与字体软件相关的其他交易而产生的任何索赔、损害或其他责任负责。 + +### lodash-es + +React Scheduler 封装包含用于运行时功能的 **[lodash-es](https://www.npmjs.com/package/lodash-es)**。 + +版权所有 OpenJS Foundation 及其他贡献者 https://openjsf.org/ + +基于 Underscore.js，版权所有 Jeremy Ashkenas、DocumentCloud 与 Investigative Reporters & Editors http://underscorejs.org/ + +本软件由许多个人自愿贡献而成。有关确切的贡献历史，请参阅在 https://github.com/lodash/lodash 的修订历史。 + +以下许可适用于本软件的所有部分，除非下文另有说明： + +#### MIT 许可证 + +特此免费授权任何获得本软件及相关文档文件（以下称“软件”）副本的人员，在不受限制的情况下处理本软件，包括但不限于使用、复制、修改、合并、出版、分发、再许可和/或销售软件的副本，并允许向其提供软件的人员执行上述操作，但须遵守以下条件： + +1) 无论原始版本还是修改版本， Font Software 或其任何单独组件不得单独出售。 + +2) Font Software 的原始版本或修改版本可以与任何软件捆绑、再分发和/或出售，前提是每份副本都包含上述版权声明和本许可。这些可以作为独立的文本文件、易读的头部信息，或在文本或二进制文件中的适当机器可读元数据字段中包含，只要这些字段对用户可轻松查看。 + +3) 任何修改版本不得使用保留的字体名称，除非获得相应版权持有者的明确书面许可。该限制仅适用于提供给用户的主字体名称。 + +4) 不得将字体软件的版权持有者或作者的名称用于宣传、背书或推广任何修改版本，除非用于对版权持有者和作者的贡献表示致谢，或获得他们的明确书面许可。 + +5) 字体软件，无论是否修改，整体或部分地，必须完全在本许可下分发，且不得在任何其他许可下分发。对使用字体软件创建的文档不适用保持在此许可下的要求。 + + termination +如未满足上述任何条件，本许可即失效。 + +免责声明 +本软件按“原样”提供，不提供任何形式的保证（无论是明示、暗示或法定的），包括但不限于对适销性、特定用途适用性和非侵权性的保证。在任何情况下，作者或版权持有者都不对因本软件的使用或无法使用本软件、或与本软件相关的其他交易而引起的任何索赔、损害或其他责任承担责任。 + +==== + +本示例代码的版权及相关权利通过 CC0 放弃。示例代码定义为文档正文中显示的所有源代码。 + +CC0: http://creativecommons.org/publicdomain/zero/1.0/ + +==== + +位于 node_modules 和 vendor 目录中的文件是本软件使用的外部维护库，它们有自己的许可证；我们建议您阅读它们，因为它们的条款可能与上述条款不同。 + + +## 用于 React Scheduler 示例应用程序的组件 + +DHTMLX React Scheduler 可能与可选的示例应用程序一起分发。以下第三方组件仅在示例应用程序中使用，且并非 React Scheduler 库本身的一部分。 + +这些依赖项在示例应用程序的 `package.json` 中列出。 + +### React 生态系统与 UI 库 + +示例应用程序使用以下第三方库，例如： + +- React +- React DOM +- Ant Design +- Material UI +- Emotion +- React Router +- Day.js +- React Draggable +- Base UI 组件 + +这些库依据各自的开源许可证（MIT、Apache License 2.0，或类似的宽松许可证）授权，由其作者指定。 + +示例应用程序仅用于演示目的。对这些组件的许可义务仅在示例应用程序被重新分发或修改时适用。 \ No newline at end of file diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/integrations/react/firebase-integration.md b/i18n/zh/docusaurus-plugin-content-docs/current/integrations/react/firebase-integration.md new file mode 100644 index 00000000..ca6c3ef3 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/integrations/react/firebase-integration.md @@ -0,0 +1,210 @@ +--- +title: React Scheduler 与 Firebase 集成 +sidebar_label: Firebase 快速入门 +description: "通过 Firebase Firestore 实时同步构建一个协作的 React Scheduler。" +--- + +# React Scheduler 与 Firebase 集成 + +本教程展示如何将 **React Scheduler** 连接到 **Firebase Firestore**，实现实时多用户同步。 + +您将构建： + +- 一个基于 React 状态（`events`）的 Scheduler 页面 +- 用于实时更新的 Firestore 监听器 +- 一个用于创建/更新/删除的 `data.save` 桥接 + +## 步骤 1。创建项目 + +```bash +npm create vite@latest react-scheduler-firebase -- --template react-ts +cd react-scheduler-firebase +npm install firebase +``` + +按照 [React Scheduler 安装指南](integrations/react/installation.md) 的说明安装 React Scheduler。 + +对于评估版： + +```bash +npm install @dhtmlx/trial-react-scheduler +``` + +对于专业版，请将 trial 的导入替换为 `@dhx/react-scheduler`。 + +## 步骤 2。配置 Firebase + +在 Firebase 控制台： + +1. 创建一个项目。 +2. 启用 **Firestore 数据库**。 +3. 注册一个 Web 应用并复制 Firebase 配置。 + +添加 `.env`： + +```env +VITE_FIREBASE_CONFIGURATION={"apiKey":"YOUR_API_KEY","authDomain":"YOUR_AUTH_DOMAIN","projectId":"YOUR_PROJECT_ID","storageBucket":"YOUR_STORAGE_BUCKET","messagingSenderId":"YOUR_MESSAGING_SENDER_ID","appId":"YOUR_APP_ID"} +``` + +创建 `src/firebase.ts`： + +```ts +import { initializeApp } from "firebase/app"; +import { collection, getFirestore, query } from "firebase/firestore"; + +const firebaseConfig = JSON.parse(import.meta.env.VITE_FIREBASE_CONFIGURATION); + +const app = initializeApp(firebaseConfig); +const db = getFirestore(app); + +const eventsCollection = collection(db, "events"); +const eventsQuery = query(eventsCollection); + +export { db, eventsCollection, eventsQuery }; +``` + +## 步骤 3。准备种子数据和类型 + +创建 `src/seed/data.ts`： + +```ts +import type { Event as SchedulerEvent } from "@dhtmlx/trial-react-scheduler"; + +export const seedEvents: SchedulerEvent[] = [ + { + id: "event_1", + text: "Planning", + start_date: "2025-12-08T09:00:00Z", + end_date: "2025-12-08T10:00:00Z", + }, + { + id: "event_2", + text: "Client call", + start_date: "2025-12-08T11:00:00Z", + end_date: "2025-12-08T12:00:00Z", + }, +]; +``` + +## 步骤 4。渲染 Scheduler 并加载事件 + +创建 `src/components/Scheduler.tsx`： + +```tsx +import { useEffect, useMemo, useState } from "react"; +import ReactScheduler, { type Event as SchedulerEvent } from "@dhtmlx/trial-react-scheduler"; +import "@dhtmlx/trial-react-scheduler/dist/react-scheduler.css"; + +import { + addDoc, + deleteDoc, + doc, + getDocs, + onSnapshot, + updateDoc, + type QueryDocumentSnapshot, + type QuerySnapshot, +} from "firebase/firestore"; + +import { db, eventsCollection, eventsQuery } from "../firebase"; + +const mapDoc = (snap: QueryDocumentSnapshot): SchedulerEvent => { + const data = snap.data(); + return { + ...data, + id: snap.id, + } as SchedulerEvent; +}; + +export default function SchedulerWithFirebase() { + const [events, setEvents] = useState([]); + + useEffect(() => { + let mounted = true; + + (async () => { + const initial = await getDocs(eventsQuery); + if (!mounted) return; + setEvents(initial.docs.map(mapDoc)); + })(); + + const unsubscribe = onSnapshot(eventsQuery, (snapshot: QuerySnapshot) => { + const nextEvents = snapshot.docs.map(mapDoc); + setEvents(nextEvents); + }); + + return () => { + mounted = false; + unsubscribe(); + }; + }, []); + + const data = useMemo( + () => ({ + save: async ( + entity: string, + action: string, + raw: SchedulerEvent, + id: string | number + ) => { + if (entity !== "event") return; + + if (action === "create") { + const created = await addDoc(eventsCollection, { + ...raw, + id: undefined, + }); + + return { id: created.id }; + } + + const targetId = String(raw?.id ?? id); + const targetRef = doc(db, "events", targetId); + + if (action === "update") { + await updateDoc(targetRef, { ...raw }); + return; + } + + if (action === "delete") { + await deleteDoc(targetRef); + } + }, + }), + [] + ); + + return ( +
+ +
+ ); +} +``` + +## 步骤 5。将其挂载到应用中 + +替换 `src/App.tsx`： + +```tsx +import SchedulerWithFirebase from "./components/Scheduler"; + +export default function App() { + return ; +} +``` + +## 同步说明 + +- Firestore `onSnapshot` 会让所有已连接的客户端保持同步。 +- 在 `data.save` 返回 `{ id: created.id }` 时，确保 Scheduler 将临时 ID 替换为 Firestore 文档 ID。 +- 正式部署前，请确保安全规则设置严格。 + +## 相关页面 + +- [数据绑定与状态管理基础](integrations/react/state/state-management-basics.md) +- [React Scheduler 概览](integrations/react/overview.md#bindingdata) +- [服务器端集成](guides/server-integration.md) \ No newline at end of file diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/integrations/react/index.md b/i18n/zh/docusaurus-plugin-content-docs/current/integrations/react/index.md new file mode 100644 index 00000000..1689c0cb --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/integrations/react/index.md @@ -0,0 +1,44 @@ +--- +title: "React Scheduler" +sidebar_label: React Scheduler +description: "在 React 中通过官方包装器安装、配置并使用 DHTMLX Scheduler。" +image: /img/frameworks/react.png +--- + +React Scheduler 是 DHTMLX Scheduler 的官方 React 包装器。它允许将 Scheduler 图表作为一个 React 组件使用，同时仍然支持完整的配置 API。 + +如果您想要了解 React Scheduler 的工作原理及其提供的功能，请从 [概览](integrations/react/overview.md) 开始。 + +## 快速开始 + +如果您是此包装器的新手，请按以下顺序进行： + +1. [安装](integrations/react/installation.md) - 选择 React Scheduler 的评估版（公开 npm）或专业版（私有 npm）版本。 +2. [快速开始](integrations/react/quick-start.md) - 渲染您的第一个图表并验证设置。 +3. [配置](integrations/react/configuration-props.md) - 了解如何使用 props、templates 和 event handlers。 + +## 框架集成 + +如果您的应用程序是使用元框架构建的，请使用这些指南以获得框架相关的设置： + +- [Next.js](integrations/react/nextjs.md) - 客户端组件设置和常见的 SSR 限制 +- [Remix](integrations/react/remix.md) - 基于路由的设置和集成说明 + +## 选择数据绑定模型 + +React Scheduler 支持两种数据绑定方法： + +- **React 管理的数据**（对大多数 React 应用推荐）。您将事件保存在 React 中或在状态管理器中，作为 props 传递，并通过 `data.save`/`data.batchSave` 回调来处理更新。 + +- **Scheduler 管理的数据**（在特定、对性能敏感的场景中有用） +您初始化数据一次，让 Scheduler（以及您的后端）拥有数据生命周期。React 不会在每次变更后重新应用更新的 props。 + +要了解这两种方法及其取舍，请阅读 [数据绑定与状态管理基础](integrations/react/state/state-management-basics.md)。 + +## 数据与状态教程 + +如果您正在使用状态管理库，位于 [数据与状态管理](/integrations/react/state/) 的指南展示了为每个库实现的相同集成模式（Redux Toolkit、Zustand、MobX 等），以及与 Firebase 的实时同步。 + +## 示例与评估资源 + +如果您正在评估 React Scheduler，评估页在评估期间提供技术支持。请参阅 [安装](integrations/react/installation.md)。 \ No newline at end of file diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/integrations/react/installation.md b/i18n/zh/docusaurus-plugin-content-docs/current/integrations/react/installation.md new file mode 100644 index 00000000..b825248d --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/integrations/react/installation.md @@ -0,0 +1,78 @@ +--- +title: 安装 React Scheduler +sidebar_label: 安装 +description: "如何通过 npm 安装 React Scheduler 的评估版或商业版。" +--- + +# 安装 React Scheduler + +React Scheduler 有两种发行版： + +1. **评估版** 在 npm 上公开提供，包含试用水印，并可选择与一个免费评估期配合，以获得技术支持。 +2. **专业版（商业版）** 可从私有 DHTMLX npm 仓库获取，适用于生产环境。 + +两个发行版包含相同的 API。 + +## 安装评估版本（公开 npm） + +评估构建在 npm 上以 [@dhtmlx/trial-react-scheduler](https://www.npmjs.com/package/@dhtmlx/trial-react-scheduler) 提供： + +~~~bash +npm install @dhtmlx/trial-react-scheduler +~~~ + +或者使用 Yarn： + +~~~bash +yarn add @dhtmlx/trial-react-scheduler +~~~ + +此构建功能完备，但会显示一条消息，指示库正在评估模式下运行。 + +### 可选：开启完整评估期（推荐） + +尽管试用包安装没有限制，您也可通过以下网站开启正式评估： + +[https://dhtmlx.com/docs/products/dhtmlxScheduler-for-React/download.shtml](https://dhtmlx.com/docs/products/dhtmlxScheduler-for-React/download.shtml). + +正式评估将为您在试用期内提供免费技术支持。 + +**下载离线示例（zip）** + +评估表单还包括包含离线就绪示例的可下载 ZIP 文件。 + +您也可以通过查看 [React Scheduler Demos on GitHub](https://github.com/DHTMLX/?q=react-scheduler&type=all&language=&sort=) 在官方 GitHub 上探索更多示例和演示项目。 + +## 专业版（私有 npm） + +专业版用于生产应用，包含商业许可和全面的技术支持。 + +获得商业许可证后，您可以在 [Client's Area](https://dhtmlx.com/clients/) 生成私有 npm 凭据。 + +生成登录名/密码后，配置 npm： + +~~~bash +npm config set @dhx:registry=https://npm.dhtmlx.com +npm login --registry=https://npm.dhtmlx.com --scope=@dhx +~~~ + +然后安装 Professional 包： + +~~~bash +npm install @dhx/react-scheduler +~~~ + +或者，使用 Yarn： + +~~~bash +yarn add @dhx/react-scheduler +~~~ + +## 下一步 + +安装后，请继续： + +- [快速上手](integrations/react/quick-start.md) +- [概览](integrations/react/overview.md) +- [数据绑定与状态管理基础](integrations/react/state/state-management-basics.md) +- [框架指南](/category/framework-integrations/) \ No newline at end of file diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/integrations/react/js-scheduler-react.md b/i18n/zh/docusaurus-plugin-content-docs/current/integrations/react/js-scheduler-react.md index 51f85c39..d8c96ff9 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/integrations/react/js-scheduler-react.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/integrations/react/js-scheduler-react.md @@ -1,94 +1,95 @@ --- -title: "dhtmlxScheduler 与 React 集成指南" -sidebar_label: "dhtmlxScheduler 与 React 集成指南" +title: "dhtmlxScheduler 与 React" +sidebar_label: "dhtmlxScheduler 与 React" --- -# dhtmlxScheduler 与 React 集成指南 +# dhtmlxScheduler 与 React -本指南假定您已基本了解 [React](https://react.dev/) 的相关概念和模式。如果您是 React 新手，建议先阅读 [React 官方文档](https://legacy.reactjs.org/docs/getting-started.html) 入门教程。 +使用本档文档前，你应熟悉 [React](https://react.dev/) 的基本概念和模式。 +如果你还不熟悉，请参考 [React 文档](https://react.dev/learn) 的入门教程。 -DHTMLX Scheduler 可以很好地与 React 集成。您可以在 GitHub 上找到相关示例:[DHTMLX Scheduler with React Demo](https://github.com/DHTMLX/react-scheduler-demo)。 +DHTMLX Scheduler 与 React 兼容。你可以在 GitHub 上查看对应的示例： [DHTMLX Scheduler 与 React 演示](https://github.com/DHTMLX/react-scheduler-demo)。 -## 创建项目 +## 创建一个项目 -在创建项目之前，请确保已安装 [Node.js](https://nodejs.org/en/)。 +在开始创建新项目之前，请安装 Node.js（[Node.js 官方网站](https://nodejs.org/en/)）。 -要搭建一个简单的 React 项目，请运行以下命令: +你可以使用以下命令创建一个基本的 React 项目： ~~~ npx create-vite my-react-scheduler-app --template react ~~~ -### 安装依赖 +### 依赖项安装 -接下来，进入您的应用目录。本例中使用 **my-react-scheduler-app**: +接下来你应该进入应用目录。我们把项目命名为 **my-react-scheduler-app**，并执行： ~~~ cd my-react-scheduler-app ~~~ -然后使用您喜欢的包管理器安装依赖并启动开发服务器: +之后你应安装依赖并启动开发服务器。为此，请使用包管理器： -- 如果使用 yarn，运行: +- 如果你使用 yarn，请执行以下命令： ~~~ yarn install yarn dev ~~~ -- 如果使用 npm，运行: +- 如果你使用 npm，请执行以下命令： ~~~ npm install npm run dev ~~~ -您的 React 项目现在应该可以通过 **http://localhost:5173** 访问。 +现在你的 React 项目应该在 **http://localhost:5173** 运行。 -![Scheduler React app running](/img/scheduler_react_app_run.png) +![Scheduler React 应用正在运行](/img/scheduler_react_app_run.png) ## 创建 Scheduler -要添加 DHTMLX Scheduler，首先通过命令行按 **Ctrl+C** 停止应用。然后继续安装 Scheduler 包。 +现在我们应该获取 DHTMLX Scheduler 的代码。首先，在命令行中按下 **Ctrl+C** 停止应用。然后我们就可以继续安装 Scheduler 包。 -## 步骤 1. 安装包 +## 步骤 1. 包安装 -库的 PRO 版本可通过我们的私有仓库使用 **npm/yarn** 获取。请参考 -[此说明](guides/installation.md#npmevaluationandproversions) 获取访问权限。 +库的 PRO 版本可通过我们的私有仓库用于 npm/yarn 安装，请按照 [本说明](guides/installation.md#npm---evaluation-and-pro-versions) 以获取访问权限。 -获得 Scheduler 的 Evaluation 版本后，使用以下命令之一安装: +获得 Scheduler 的评估版本后，可以使用以下命令安装： -- 使用 npm: +- 对于 npm： ~~~ npm install @dhx/trial-scheduler ~~~ -- 使用 yarn: +- 对于 yarn： ~~~ yarn add @dhx/trial-scheduler ~~~ -另外，由于库的 zip 包结构与 **npm** 模块兼容，您也可以 -[从本地文件夹安装](guides/installation.md#install-from-local-folder)。 +或者，由于库的 zip 包被构建为一个 **npm** 模块，你可以 [从本地文件夹安装](guides/installation.md#installing-the-package-from-a-local-folder)。 -## 步骤 2. 创建组件 +## 步骤 2. 组件创建 -接下来，创建一个 React 组件用于在应用中集成 Scheduler。新建文件夹 ***src/components/Scheduler***，并在其中创建以下文件:***Scheduler.jsx***、***Scheduler.css*** 和 ***index.js***。 +现在我们应该创建一个 React 组件，将 Scheduler 添加到应用中。让我们创建 ***src/components/Scheduler*** 文件夹。 +在这里我们将创建 ***Scheduler.jsx***、***Scheduler.css*** 和 ***index.js*** 文件。 -首先创建 ***Scheduler.css***，为 *scheduler-container* 添加样式: +我们需要创建 ***Scheduler.css*** 文件并为 *scheduler-container* 添加样式： -~~~js title="src/components/Scheduler/Scheduler.css" + +~~~css title="src/components/Scheduler/Scheduler.css" .scheduler-container { height: 100vh; width: 100vw; } ~~~ -为确保 Scheduler 容器填满整个页面，请删除 ***src*** 文件夹下 ***App.css*** 的默认样式，并添加如下内容: +为了让 Scheduler 容器占据 body 的整个空间，你需要移除位于 ***src*** 文件夹中的 ***App.css*** 的默认样式，并添加以下样式： -~~~ +~~~css #root { margin: 0; padding: 0; @@ -97,7 +98,8 @@ yarn add @dhx/trial-scheduler } ~~~ -然后添加 ***index.js*** 文件，内容如下: +并添加 ***index.js*** 文件，内容如下： + ~~~js title="src/components/Scheduler/index.js" import Scheduler from './Scheduler'; @@ -107,27 +109,30 @@ export default Scheduler; ### 导入源文件 -打开 ***Scheduler.jsx*** 并导入 Scheduler 源文件。根据您安装包的方式，导入代码如下: +打开新创建的 ***Scheduler.jsx*** 文件并导入 Scheduler 的源文件。注意： + +- 如果你是从本地文件夹安装 Scheduler 包，你的导入路径将如下所示： -- 如果从本地文件夹安装: ~~~js title="Scheduler.jsx" import { Scheduler } from 'dhtmlx-scheduler'; import 'dhtmlx-scheduler/codebase/dhtmlxscheduler.css'; ~~~ -- 如果使用 trial 版本: +- 如果你选择安装 trial 版本，导入路径应如： + ~~~js title="Scheduler.jsx" import { Scheduler } from '@dhx/trial-scheduler'; import '@dhx/trial-scheduler/codebase/dhtmlxscheduler.css'; ~~~ -本教程使用 **trial** 版本。 +在本教程中我们将使用 Scheduler 的 **trial** 版本。 ### 设置容器并添加 Scheduler -要在页面上渲染 Scheduler，需要设置一个容器。创建 ***Scheduler.jsx***，内容如下: +要在页面上显示 Scheduler，我们需要设置容器以渲染组件。创建 ***Scheduler.jsx*** 文件，使用以下代码： + ~~~js title="src/components/Scheduler/Scheduler.jsx" import { useEffect, useRef } from "react"; @@ -164,7 +169,7 @@ export default function SchedulerView( ) { ## 步骤 3. 将 Scheduler 添加到应用中 -现在将 Scheduler 组件添加到您的应用中。打开 ***src/App.jsx***，将默认内容替换为: +现在是将组件添加到应用中的时候。打开 ***src/App.jsx***，并使用 *Scheduler* 组件替代默认内容，插入以下代码： ~~~js title="src/App.jsx" import Scheduler from "./components/Scheduler"; @@ -180,13 +185,14 @@ function App() { export default App; ~~~ -重新启动应用后，页面上会出现一个空白的 Scheduler: +之后，当你启动应用时，页面上应该会看到一个空的 Scheduler： ![Scheduler React init](/img/scheduler_init.png) -## 步骤 4. 提供数据 +## 第 4 步. 提供数据 + +要向 Scheduler 添加数据，我们需要提供一个数据集。让我们在 ***src/*** 目录中创建 ***data.js*** 文件并添加一些数据： -要在 Scheduler 中显示事件，需要提供一组数据。在 ***src/*** 目录下创建 ***data.js*** 并添加一些事件: ~~~js title="src/data.js" export function getData() { @@ -208,7 +214,8 @@ export function getData() { } ~~~ -然后，在 ***App.jsx*** 中将此数据作为 props 传递给 Scheduler 组件: +并且应在 ***App.jsx*** 中将 props（我们的数据）传递给 Scheduler 组件： + ~~~js title="App.jsx" import { getData } from "./data.js"; @@ -225,7 +232,8 @@ function App() { export default App; ~~~ -在 Scheduler 组件中，通过 **scheduler.parse()** 方法使用该 props: +并在 Scheduler 组件中对 **scheduler.parse()** 方法使用 props： + ~~~js title="Scheduler.jsx" import { useEffect, useRef } from "react"; @@ -261,15 +269,16 @@ export default function SchedulerView({events}) { } ~~~ -现在刷新页面，Scheduler 会加载显示事件: +现在如果你重新打开应用页面，你应该会看到带有事件的 Scheduler： ![Scheduler React events](/img/scheduler_events.png) -## 步骤 5. 保存数据 +## 第 5 步. 保存数据 + +要捕获在 Scheduler 中所做的更改，你可以使用 [dataProcessor] 处理程序，它允许与你的服务器端后端进行“通信”。处理程序可以被声明为函数或路由对象。dhtmlxScheduler 接受来自处理程序的 Promise 响应，因此你的 Scheduler 将正确处理操作的完成。 -要处理 Scheduler 中的变更，可以使用 [dataProcessor](https://docs.dhtmlx.com/dataprocessor__index.html) 处理器。这样可以与您的后端服务器通信。该处理器可以是函数或路由对象。dhtmlxScheduler 支持 handler 返回 Promise，因此可以正确处理操作完成。 +你可以通过 API 方法 **createDataProcessor()** 创建一个 **DataProcessor**，并像下面这样捕获更改： -通过 **createDataProcessor()** 创建 **DataProcessor** 并捕获变更，如下: ~~~ scheduler.createDataProcessor(function(entity, action, data, id) {​ @@ -277,12 +286,12 @@ scheduler.createDataProcessor(function(entity, action, data, id) {​ }); ~~~ -如果您的后端在创建新事件后会更改事件 id（常见情况），请确保 Promise 返回一个包含 **(id: databaseId)** 或 **(tid: databaseId)** 的对象。这样 Scheduler 会将记录更新为新的数据库 id。更多细节请参见 [server side integration](guides/server-integration.md)。 +如果在创建新记录后你的服务会修改事件 id（通常会这样做），请确保你的 Promise 返回一个包含 **(id: databaseId)** 或 **(tid: databaseId)** 的对象作为结果，以便 Scheduler 能将新的数据库 id 应用到记录中。获取服务器端的更多信息 [关于服务器端](guides/server-integration.md)。 -至此，React Scheduler 的基本集成已完成。您可以在 GitHub 上查看完整演示:[DHTMLX react-scheduler-demo](https://github.com/DHTMLX/react-scheduler-demo)。 +好吧，React Scheduler 已就绪，欢迎你 [在 GitHub 上查看完整演示](https://github.com/DHTMLX/react-scheduler-demo)。 -## XSS、CSRF 和 SQL 注入攻击 +## XSS、CSRF 与 SQL 注入攻击 -请注意，Scheduler 本身不提供针对 SQL 注入、XSS 或 CSRF 等安全威胁的防护。保护您的应用免受这些风险是后端开发者的责任。 +请注意，Scheduler 不提供防止应用程序免受各种威胁的任何手段，例如 SQL 注入或 XSS 与 CSRF 攻击。确保应用程序安全的责任在于实现后台的开发人员。 -请参考 [应用安全](guides/app-security.md) 文章，了解常见漏洞及如何提升应用安全性。 +请查看 [应用程序安全] 文章，以了解组件最易受攻击的点以及可采取的提高应用程序安全性的措施。 \ No newline at end of file diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/integrations/react/nextjs.md b/i18n/zh/docusaurus-plugin-content-docs/current/integrations/react/nextjs.md new file mode 100644 index 00000000..575e7a56 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/integrations/react/nextjs.md @@ -0,0 +1,264 @@ +--- +title: 使用 Next.js 的 React Scheduler +sidebar_label: Next.js +description: 了解如何在 Next.js 中使用 App Router 将 DHTMLX React Scheduler 集成到应用中，包括客户端组件的设置和演示数据。 +--- + +# 使用 Next.js 的 React Scheduler + +本教程演示如何创建一个简单的 **Next.js** 应用，并在页面上渲染一个 **DHTMLX React Scheduler**。 + +:::note +完整的源代码可在 [GitHub](https://github.com/dhtmlx/react-scheduler-nextjs-starter) 获取。 +::: + +## 前置条件 + +- Node.js（推荐使用 LTS 版本） +- React + TypeScript 基础 +- Next.js 基础（App Router、Server/Client Components）。如需快速回顾，请参阅 Next.js 文档：https://nextjs.org/docs + +## 快速开始 - 创建项目 + +要搭建一个 Next.js 应用，请执行： + +~~~bash +npx create-next-app@latest +~~~ + +在提示时，选择： + +- Project name: **react-scheduler-nextjs-quick-start** +- Use the default template (TypeScript, ESLint, Tailwind CSS, App Router, Turbopack) + +Next.js 将创建项目结构并安装基本依赖。 + +安装完成后，进入项目目录： + +```bash +cd react-scheduler-nextjs-quick-start +``` + +### 安装 React Scheduler + +按照 [React Scheduler 安装指南](integrations/react/installation.md) 的说明安装 React Scheduler。 + +在本教程中我们使用 evaluation 包： + +~~~bash +npm install @dhtmlx/trial-react-scheduler +~~~ + +或 + +~~~bash +yarn add @dhtmlx/trial-react-scheduler +~~~ + +如果你已经使用 Professional 包，请在命令与导入中将 `@dhtmlx/trial-react-scheduler` 替换为 `@dhx/react-scheduler`。 + +## 准备演示数据 + +在项目根目录创建一个 `data/` 文件夹。在其中添加一个 `demoData.ts` 文件，包含 Scheduler 的初始数据： + +~~~ts title="data/demoData.ts" +import type { Event } from '@dhtmlx/trial-react-scheduler'; + +export const events: Event[] = [ + { + id: 1, + classname: 'blue', + start_date: new Date('2025-12-08T02:00:00Z'), + end_date: new Date('2025-12-08T10:20:00Z'), + text: 'Product Strategy Hike', + }, + { + id: 2, + classname: 'blue', + start_date: new Date('2025-12-08T12:00:00Z'), + end_date: new Date('2025-12-08T16:00:00Z'), + text: 'Agile Meditation and Release', + }, + { + id: 3, + classname: 'violet', + start_date: new Date('2025-12-09T06:00:00Z'), + end_date: new Date('2025-12-09T11:00:00Z'), + text: 'Tranquil Tea Time', + }, + { + id: 4, + classname: 'green', + start_date: new Date('2025-12-09T11:30:00Z'), + end_date: new Date('2025-12-09T19:00:00Z'), + text: 'Sprint Review and Retreat', + }, + { + id: 5, + classname: 'yellow', + start_date: new Date('2025-12-10T06:00:00Z'), + end_date: new Date('2025-12-10T08:00:00Z'), + text: 'Stakeholder Sunset Yoga Session', + }, +]; +~~~ + +:::note +配套演示包含更多事件以获得更丰富的视觉效果。 +::: + +## 创建 Scheduler 组件 + +Next.js 默认使用 Server Components，但在实际应用中，React Scheduler 通常需要在 Client Component 中渲染。 + +只有在以下情况需要时才需要这样做： + +- 使用 `ref` 访问 Scheduler 实例 +- 传入回调（events、templates、data handlers） +- 使用 ReactScheduler `hooks` +- 提供动态配置或 React 元素 + +因此我们的 Scheduler 组件将以 `"use client"` 开头。 + +在 `components/Scheduler/Scheduler.tsx` 新建文件： + +~~~tsx title="components/Scheduler/Scheduler.tsx" +'use client'; + +import { useMemo, useRef } from 'react'; +import ReactScheduler, { + type ReactSchedulerRef, + type Event, + type SchedulerTemplates, + type SchedulerConfig, +} from '@dhtmlx/trial-react-scheduler'; +import '@dhtmlx/trial-react-scheduler/dist/react-scheduler.css'; + +export interface ReactSchedulerProps { + events: Event[]; + activeView?: string; + activeDate?: Date; +} + +export default function Scheduler({ + events, + activeView = 'week', + activeDate = new Date('2025-12-08T00:00:00Z'), +}: ReactSchedulerProps) { + const schedulerRef = useRef(null); + + const templates: SchedulerTemplates = useMemo( + () => ({ + event_class: (start: Date, end: Date, event: Event) => { + return event.classname || ''; + }, + }), + [] + ); + + const config: SchedulerConfig = useMemo(() => { + return { + first_hour: 6, + last_hour: 22, + hour_size_px: 60, + }; + }, []); + + return ( + { + console.log(`${entity} - ${action} - ${id}`, data); + }, + }} + /> + ); +} +~~~ + +该组件初始化 Scheduler，并为其提供配置、初始数据以及用于将来 API 调用的 `ref`。`config` 对象控制时间线的布局，而 `events` 属性向 Scheduler 提供数据集。我们还通过 props 传递 `activeView` 和 `activeDate`，以便父组件控制 Scheduler 显示的内容。 + +`data` 属性中的 `save` 函数用于跟踪对 Scheduler 内事件的更新。在本教程中，我们添加了一个简单的占位处理程序来跟踪变更。如果你想将更新发送到后端或绑定到 React 状态，可以参考官方数据绑定指南（[数据绑定指南](integrations/react/overview.md#bindingdata)）。 + +## 为事件添加颜色样式 + +通过 `event_class` 模板应用的 CSS 类 (`.blue`, `.violet`, `.green`, `.yellow`) 用于自定义事件的视觉呈现。将以下内容添加到 `app/globals.css`： + +~~~css title="app/globals.css" +.blue { + --dhx-scheduler-event-background: linear-gradient(180deg, #0e8af0 0%, #0ec1f0 100%); +} +.violet { + --dhx-scheduler-event-background: linear-gradient(180deg, #d071ef 0%, #ee71d5 100%); +} +.green { + --dhx-scheduler-event-background: linear-gradient(180deg, #12d979 0%, #1ecdeb 100%); +} +.yellow { + --dhx-scheduler-event-background: linear-gradient(180deg, #ffb725 0%, #ffbb25 31.25%, #faea27 100%); +} +~~~ + +:::note +为了让 Scheduler 完整占据页面，请从 `app/globals.css` 中移除默认的暗色模式主题变量，并确保 body 没有额外的 margin： + +~~~css +body { + margin: 0; + padding: 0; +} +~~~ +::: + +## 将 Scheduler 添加到页面 + +打开 `app/page.tsx`，在主页面上渲染 Scheduler： + +~~~tsx title="app/page.tsx" +import Scheduler from '../components/Scheduler/Scheduler'; +import { events } from '../data/demoData'; + +export default function HomePage() { + return ( +
+ +
+ ); +} +~~~ + +现在页面将显示一个全屏的 Scheduler。 + +## 启动应用程序 + +运行开发服务器： + +~~~bash +npm run dev +~~~ + +然后在浏览器中打开 `http://localhost:3000`。现在你应该会看到在 Next.js 应用中运行的 Scheduler，且包含初始数据。 + +## 总结 + +你现在有了一个最小的 Next.js 项目，其中包含 DHTMLX React Scheduler： + +- Scheduler 以 Client Component（`"use client"`）的形式渲染在 Next.js App Router 内部 +- 演示数据从单独的文件加载并作为 props 传递 +- `event_class` 模板为事件应用了自定义颜色渐变 +- `data.save` 回调将编辑记录到控制台（可连接到后端） + +## 下一步 + +- [基于 React 的数据流](integrations/react/overview.md#bindingdata) +- [React Scheduler 模板文档](integrations/react/configuration-props.md) +- 探索状态管理集成： + - [使用 Redux Toolkit 的 React Scheduler](integrations/react/state/redux-toolkit.md) + - [使用 MobX 的 React Scheduler](integrations/react/state/mobx.md) + - [使用 Zustand 的 React Scheduler](integrations/react/state/zustand.md) \ No newline at end of file diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/integrations/react/overview.md b/i18n/zh/docusaurus-plugin-content-docs/current/integrations/react/overview.md new file mode 100644 index 00000000..00a907cc --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/integrations/react/overview.md @@ -0,0 +1,484 @@ +--- +title: "React 调度器" +sidebar_label: "概览" +description: "关于 React Scheduler 封装、数据绑定模式、自定义选项以及框架兼容性的概览。" +--- + +# React 调度器 + +:::note +React Scheduler 可在 [商业版、企业版和 Ultimate 版许可证](https://dhtmlx.com/docs/products/licenses.shtml) 下使用。 +如果你使用 Scheduler 的 Individual 或 GPL 版，请使用 [dhtmlxScheduler with React](integrations/react/js-scheduler-react.md)。 +::: + +## 概览 + +DHTMLX React Scheduler 是 DHTMLX Scheduler 的官方 React 封装。它为 Scheduler 提供声明式的渲染和配置 API，同时在需要高级控制时仍然暴露底层的 Scheduler 实例。 + +**主要特性：** + +- 将 `events`、`view` 和 `date` 作为 props 传递 +- 使用 `config` 与 `templates` 自定义行为 +- 通过 `data.save` 或 `data.batchSave` 处理用户变更 +- 使用 `ref` 直接访问 Scheduler API 方法 + +如果你是 DHTMLX Scheduler 的初学者，请参阅 [DHTMLX Scheduler 文档](/guides/) 了解其功能概览。 + +## 安装与 npm 访问 + +关于评估版和专业包的安装，请参阅： + +- [Installation](integrations/react/installation.md) + +## 版本要求 + +- React `18+` + +## 基本用法 + +```tsx +import { useMemo, useRef } from "react"; +import ReactScheduler, { + type Event, + type ReactSchedulerRef, + type SchedulerConfig, + type SchedulerTemplates, +} from "@dhtmlx/trial-react-scheduler"; +import "@dhtmlx/trial-react-scheduler/dist/react-scheduler.css"; + +const events: Event[] = [ + { + id: 1, + text: "Product Strategy Hike", + classname: "blue", + start_date: new Date("2025-12-08T02:00:00Z"), + end_date: new Date("2025-12-08T10:20:00Z"), + }, +]; + +export default function BasicSchedulerDemo() { + const schedulerRef = useRef(null); + + const templates: SchedulerTemplates = useMemo( + () => ({ + event_class: (_start, _end, event) => event.classname || "", + }), + [] + ); + + const config: SchedulerConfig = useMemo( + () => ({ + first_hour: 6, + last_hour: 22, + hour_size_px: 60, + }), + [] + ); + + return ( +
+ +
+ ); +} +``` + +## 数据绑定 {#bindingdata} + +React Scheduler 支持两种数据绑定模型。 + +### 以 React 状态作为真实数据源（推荐） + +在此模型中，React（或某个状态管理器）拥有事件数据： + +- Scheduler 从 props 读取事件 +- 用户更改会调用你的 `data.save` 回调 +- 回调更新 React 状态 +- React 重新渲染带有更新 props 的 Scheduler + +```tsx +import { useMemo, useState } from "react"; +import ReactScheduler, { type Event } from "@dhtmlx/trial-react-scheduler"; + +export default function ReactDrivenExample({ seedEvents }: { seedEvents: Event[] }) { + const [events, setEvents] = useState(seedEvents); + + const data = useMemo( + () => ({ + save: (entity: string, action: string, item: Event, id: string | number) => { + if (entity !== "event") return; + + if (action === "create") { + setEvents((prev) => [...prev, item]); + return; + } + + if (action === "update") { + setEvents((prev) => prev.map((e) => (e.id === id ? item : e))); + return; + } + + if (action === "delete") { + setEvents((prev) => prev.filter((e) => e.id !== id)); + } + }, + }), + [] + ); + + return ; +} +``` + +此模型在其他 React UI 需要与 Scheduler 数据保持同步时非常合适。 + +### Scheduler 作为真实数据源 + +在此模型中，Scheduler 管理其内部状态并将编辑转发给后端。 + +```tsx + +``` + +当你不需要让 React 即刻镜像每次更新时，此模型特别有用。 + +### 加载数据 + +你可以通过 props 或 `data.load` 加载数据： + +```tsx +// 通过 Props 加载 + + +// 通过传输加载 + +``` + +关于数据格式的要求，请参阅 [Loading Data](guides/loading-data.md)。 + +### 保存变更 + +`data.save` 可以是一个 URL 或一个回调。 + +```tsx + { + if (entity !== "event") return; + + if (action === "create") { + const response = await fetch("/api/events", { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify(item), + }); + + const created = await response.json(); + return { id: created.id }; + } + + if (action === "update") { + await fetch(`/api/events/${id}`, { + method: "PUT", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify(item), + }); + } + + if (action === "delete") { + await fetch(`/api/events/${id}`, { method: "DELETE" }); + } + }, + }} +/> +``` + +有关后端行为的详细信息，请参阅 [Server Integration](guides/server-integration.md)。 + +## 替换 Lightbox + +Scheduler 内置的事件编辑器称为 [Lightbox](guides/lightbox-editors.md)。 +你可以通过使用 `customLightbox` 来替换它： + +```tsx +import React, { useState } from 'react'; + +export interface CustomLightboxProps { + data?: any; + onSave?: (event: any) => void; + onCancel?: () => void; + onDelete?: () => void; +} + +const CustomLightbox: React.FC = ({ + data, + onSave, + onCancel, + onDelete +}) => { + + let updatedEventText = data.text || ""; + + const handleSaveClick = () => { + if(onSave) + onSave({ ...data, text: updatedEventText }); + }; + + function PaperComponent(props: any) { + const nodeRef = React.useRef(null); + return ( + + + + ); + } + + + function TextComponent() { + const [description, setDescription] = useState(data.text || ''); + + return ( + { + updatedEventText = e.target.value; + setDescription(e.target.value) + }} + sx="{{" width: '100%', padding: '8px', marginTop: '10px' }} + /> + ) + } + + + return ( + + + Edit Event + + + + Description + + + + + + + + + + + + + ); +}; + +export default CustomLightbox; +``` + +你也可以通过 `onBeforeLightbox` 拦截编辑器的打开： + +```tsx +import { useEffect, useRef } from 'react'; +import ReactScheduler from "@dhx/react-scheduler"; +import "@dhx/react-scheduler/dist/react-scheduler.css"; +import { useNavigate } from 'react-router-dom'; + + +export default function BasicInitDemo() { + const schedulerRef = useRef(null); + + const { events, handleSaveEvent, handleDeleteEvent, createEvent } + = useOutletContext(); + const navigate = useNavigate(); + + const handleEventEdit = (id: any) => { + const schedulerInstance = schedulerRef.current?.instance; + navigate(`/editor/${id}`, { state: { task: schedulerInstance.getTask(id) } }); + }; + + return ( + + ); +} +``` + +参考: [onBeforeLightbox](api/event/onbeforelightbox.md) + +## 替换内置模态框 + +删除确认对话框可以通过 `modals` 覆盖。 + +```tsx + { + if (window.confirm(`Delete "${event.text}"?`)) { + callback(); // 调用回调将删除事件 + } + }, + }} +/> +``` + +### 自定义 Recurrence 确认模态框 {#customizingtherecurrenceconfirmationmodal} + +当用户编辑或拖动重复事件时，会弹出确认模态框，询问应仅修改当前发生、此及之后的事件，还是整个系列。你可以使用 `modals.onRecurrenceConfirm` 替换此内置对话框。 + +回调接收一个上下文对象，必须返回一个决定（或返回一个 Promise 解析为一个决定）： + +字段 | 类型 | 描述 +- origin | `"lightbox" \| "dnd"` | 行为是从 Lightbox 触发还是从拖放触发 +- occurrence | `any` | 正在编辑的具体发生 +- series | `any` | 父级重复事件 +- labels | `object` | 本地化标签：`title`、`ok`、`cancel`、`occurrence`、`following`、`series` +- options | `string[]` | 可用选项，例如 `["occurrence", "following", "series"]` + +返回值（RecurrenceDecision）：`"occurrence"`、`"following"`、`"series"`，或 `null` 代表取消。 + +示例： + +```tsx +import { useState, useCallback } from "react"; + +function App() { + const [recurrencePrompt, setRecurrencePrompt] = useState(null); + + const onRecurrenceConfirm = useCallback((context) => { + return new Promise((resolve) => { + setRecurrencePrompt({ context, resolve }); + }); + }, []); + + return ( + <> + + {recurrencePrompt && ( + { + recurrencePrompt.resolve(choice); + setRecurrencePrompt(null); + }} + onCancel={() => { + recurrencePrompt.resolve(null); + setRecurrencePrompt(null); + }} + /> + )} + + ); +} +``` + +## 过滤 + +使用 `filter` 属性来控制显示哪些事件： + +```tsx +import { useCallback, useState } from "react"; + +function FilteredScheduler({ events }: { events: any[] }) { + const [query, setQuery] = useState(""); + + const filterFn = useCallback( + (event: any) => { + if (!query.trim()) return true; + return event.text?.toLowerCase().includes(query.trim().toLowerCase()); + }, + [query] + ); + + return ( + <> + setQuery(e.target.value)} + /> + + + ); +} +``` + +## 访问底层 Scheduler API + +当 props 不足以满足需求时，可以通过 `ref` 访问 Scheduler 实例： + +```tsx +import { useEffect, useRef } from "react"; +import ReactScheduler, { type ReactSchedulerRef } from "@dhx/react-scheduler"; + +export function DirectRefExample({ events }: { events: any[] }) { + const schedulerRef = useRef(null); + + useEffect(() => { + const scheduler = schedulerRef.current?.instance; + if (!scheduler) return; + + console.log("Events:", scheduler.getEvents()); + scheduler.setCurrentView(new Date()); + }, []); + + return ; +} +``` + +如果你直接变更 Scheduler，请确保 React 属性保持同步以避免状态漂移。 + +有关可用方法，请参阅 [Scheduler Methods Overview](api/overview/methods_overview.md)。 + +#### 避免与 React 属性冲突 + +- 如果你在自己的代码中手动调用 `scheduler.parse(( events ))` 或 `scheduler.addEvent()`，请注意你可能需要保持 React 属性同步。否则，下一次 React 重新渲染时，可能会覆盖你手动的更改。 +- 推荐的方法是依赖封装器的事件属性，或在你的 React 状态中管理它们。然后让封装器处理重新解析。 + +## 与 SSR 框架（Next.js、Remix）的兼容性 + +:::note +React Scheduler 兼容 SSR。在服务器端渲染期间，它会输出一个占位容器，客户端再进行 hydration。 +::: + +请使用框架特定的指南获取更多细节： + +- [React Scheduler with Next.js](integrations/react/nextjs.md) +- [React Scheduler with Remix](integrations/react/remix.md) + +## 下一步 + +- [配置](integrations/react/configuration-props.md) +- [数据绑定与状态管理基础知识](integrations/react/state/state-management-basics.md) +- [快速入门](integrations/react/quick-start.md) \ No newline at end of file diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/integrations/react/quick-start.md b/i18n/zh/docusaurus-plugin-content-docs/current/integrations/react/quick-start.md new file mode 100644 index 00000000..477b74c2 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/integrations/react/quick-start.md @@ -0,0 +1,311 @@ +--- +title: React Scheduler 快速入门 +sidebar_label: 快速入门 +description: '逐步指南，使用 React Scheduler 组件' +--- + +# React Scheduler 快速入门 + +:::note +本教程涵盖 DHTMLX Scheduler 的商业版、企业版与终极版中包含的 React wrapper。 +如果您使用的是 **个人版** 或 **GPL 版**，请参阅替代指南： +[如何在 React 中开始](integrations/react/js-scheduler-react.md)。 +::: + +The **React Scheduler** 组件是 **DHTMLX Scheduler** 的官方包装器。 +本指南将带你创建一个小型 React 应用并使用试用包渲染一个基本的 Scheduler。 + +如果你是 React 新手，请从官方 [React 文档](https://react.dev/learn) 开始学习。也可以查看在 GitHub 上遵循本教程的完整工作项目： +[a complete working project that follows this tutorial on GitHub](https://github.com/dhtmlx/react-scheduler-quick-start)。 + +## 版本要求 + +- React **18 及以上版本** + +## 创建一个新的 React 项目 + +要创建一个 React 项目并进入项目目录，请运行以下命令： + +~~~bash +npm create vite@latest react-scheduler-quick-start -- --template react-ts +cd react-scheduler-quick-start +~~~ + +### 安装 React Scheduler + +按照 [React Scheduler 安装指南](integrations/react/installation.md) 的说明安装。 + +在本教程中，我们使用评估包： + +~~~bash +npm install @dhtmlx/trial-react-scheduler +~~~ + +或 + +~~~bash +yarn add @dhtmlx/trial-react-scheduler +~~~ + +如果您已经使用 Professional 包，请在命令与导入中将 `@dhtmlx/trial-react-scheduler` 替换为 `@dhx/react-scheduler`。 + +## 添加演示数据 + +我们在这个示例中使用静态数据。创建一个名为 `src/demoData.ts` 的文件： + +~~~ts +import type { Event } from '@dhtmlx/trial-react-scheduler'; + +export const events: Event[] = [ + { + id: 1, + classname: 'blue', + start_date: new Date('2025-12-08T02:00:00Z'), + end_date: new Date('2025-12-08T10:20:00Z'), + text: 'Product Strategy Hike', + }, + { + id: 2, + classname: 'blue', + start_date: new Date('2025-12-08T12:00:00Z'), + end_date: new Date('2025-12-08T16:00:00Z'), + text: 'Agile Meditation and Release', + }, + { + id: 3, + classname: 'violet', + start_date: new Date('2025-12-09T06:00:00Z'), + end_date: new Date('2025-12-09T11:00:00Z'), + text: 'Tranquil Tea Time', + }, + // .... +]; +~~~ + +## 创建一个 Scheduler 组件 + +要添加一个 Scheduler 组件，请创建 `src/components/Scheduler/Scheduler.tsx` 文件，内容如下： + +~~~tsx +import { useMemo, useRef } from 'react'; +import ReactScheduler, { + type ReactSchedulerRef, + type Event, + type SchedulerTemplates, + type SchedulerConfig, +} from '@dhtmlx/trial-react-scheduler'; +import '@dhtmlx/trial-react-scheduler/dist/react-scheduler.css'; +import './styles.css'; + +export interface ReactSchedulerProps { + events: Event[]; + activeView?: string; + activeDate?: Date; +} + +export default function Scheduler({ + events, + activeView = 'week', + activeDate = new Date('2025-12-08T00:00:00Z'), +}: ReactSchedulerProps) { + const schedulerRef = useRef(null); + + const templates: SchedulerTemplates = useMemo( + () => ({ + event_class: (start: Date, end: Date, event: Event) => { + return event.classname || ''; + }, + }), + [] + ); + + const config: SchedulerConfig = useMemo(() => { + return { + first_hour: 6, + last_hour: 22, + hour_size_px: 60, + }; + }, []); + + return ( + { + console.log(`${entity} - ${action} - ${id}`, data); + }, + }} + /> + ); +} +~~~ + +最后，CSS 类（`.violet`、`.green`、`.yellow`）通过 `event_class` 模板应用，用于自定义事件的视觉外观： + +~~~css +.violet { + --dhx-scheduler-event-background: linear-gradient(180deg, #d071ef 0%, #ee71d5 100%); +} +.green { + --dhx-scheduler-event-background: linear-gradient(180deg, #12d979 0%, #1ecdeb 100%); +} +.yellow { + --dhx-scheduler-event-background: linear-gradient(180deg, #ffb725 0%, #ffbb25 31.25%, #faea27 100%); +} +~~~ + +## 在应用中渲染 Scheduler + +要在应用中显示 Scheduler，请将 `src/App.tsx` 的代码替换为以下代码： + +~~~tsx +import './App.css'; +import Scheduler from './components/Scheduler/Scheduler'; +import { events } from './demoData'; + +function App() { + return ( +
+ +
+ ); +} + +export default App; +~~~ + +之后，请使用下面的命令运行应用： + +~~~bash +npm run dev +~~~ + +到此，你将拥有一个 **完全可运行的 React + DHTMLX Scheduler 应用**。 + +该设置代表实现以下目标所需的 **最小配置**： + +- 渲染一个 Scheduler +- 显示事件 +- 应用一个基本的比例配置 +- 通过 React ref 附加 Scheduler 实例 +- 通过 `data.save` 回调接收事件 + +这是在 [GitHub 演示项目](https://github.com/dhtmlx/react-scheduler-quick-start) 中使用的相同最小示例。 + +从这里开始，你可以通过添加更高级的功能来继续： + +- 与 React 状态同步数据 +- 从后端加载/保存数据 +- 添加模板和自定义渲染器 +- 添加筛选 +- 用自定义组件替换 Lightbox + +接下来的各节将逐一介绍这些能力。 + +## 使用 React state 作为数据源（真相源） + +（适用于大多数 React 应用的推荐做法） + +在实际应用中，事件通常来自 React 状态。下面是一个完整示例，其中 Scheduler 通过 `data.save` 回调将更改发送回 React。 + +~~~tsx +import { useState } from 'react'; +import ReactScheduler, { Event } from '@dhtmlx/trial-react-scheduler'; +import '@dhtmlx/trial-react-scheduler/dist/react-scheduler.css'; +import { events as initialEvents } from './demoData'; + +export default function App() { + const [events, setEvents] = useState(initialEvents); + + const data = { + save: (entity, action, item, id) => { + if (entity === 'event') { + if (action === 'create') setEvents((prev) => [...prev, item]); + if (action === 'update') setEvents((prev) => prev.map((x) => (x.id === id ? item : x))); + if (action === 'delete') setEvents((prev) => prev.filter((x) => x.id !== id)); + } + }, + }; + + return ( +
+ +
+ ); +} +~~~ + +### 为什么选择这种模式 + +- React 总是看到与 Scheduler UI 相同的数据 +- 与 Redux / Zustand / Jotai / MobX 兼容良好 +- 易于与后端 API 同步 + +## 替代模式：Scheduler 作为真相源 + +（适用于非常大规模的数据集） + +在此模式下，React 不拥有事件。 + +~~~tsx + +~~~ + +### 何时更偏好此模式 + +- 数万条事件 +- 频繁的用户交互与更新 +- 你希望最小化 React 渲染开销 + +## 使用模板 + +（从模板函数返回 React 元素） + +模板几乎可以自定义调度器的每一个部分。 + +~~~tsx +import ReactScheduler, { SchedulerTemplates } from '@dhtmlx/trial-react-scheduler'; +import { useMemo } from 'react'; +import EventTextBox from './components/EventTextBox'; + +const templates: SchedulerTemplates = useMemo( + () => ({ + event_class: (start, end, event) => { + return 'templates-' + event.classname || ''; + }, + event_text: (start, end, event) => { + return ; + }, + }), + [] +); + +; +~~~ + +### 更多细节 + +请参阅完整章节：[React Scheduler 模板文档](integrations/react/configuration-props.md)。 + +## GitHub 演示仓库 + +一个遵循本教程的完整工作项目已在 GitHub 提供：[GitHub 演示仓库](https://github.com/dhtmlx/react-scheduler-quick-start)。 + +## 下一步 + +- 学习所有可用的 [React Scheduler 属性](integrations/react/configuration-props.md) +- 在 [Guides](/guides/) 中探索高级 Scheduler 功能 \ No newline at end of file diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/integrations/react/remix.md b/i18n/zh/docusaurus-plugin-content-docs/current/integrations/react/remix.md new file mode 100644 index 00000000..0dd4d136 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/integrations/react/remix.md @@ -0,0 +1,266 @@ +--- +title: Remix 中的 React Scheduler +sidebar_label: Remix +description: 了解如何将 DHTMLX React Scheduler 与 Remix（React Router v7）集成，包括客户端组件的设置和演示数据。 +--- + +# Remix 中的 React Scheduler + +本教程展示如何创建一个简单的 **Remix** 应用并在页面上渲染一个 **DHTMLX React Scheduler**。 + +:::note +完整的源代码可在 [GitHub 上获取](https://github.com/dhtmlx/react-scheduler-remix-starter)。 +::: + +## 前提条件 + +- Node.js（推荐使用 LTS） +- React + TypeScript 基础 +- Remix / React Router 基础知识。若需要快速回顾，请参阅 Remix 文档： https://remix.run/docs + +## 快速设置 - 创建项目 + +由于 Remix 现已作为 React Router v7 的一部分发布，推荐的搭建项目方式是： + +~~~bash +npx create-react-router@latest +~~~ + +在提示时选择： + +- 项目名称：**react-scheduler-remix-quick-start** +- 使用默认模板（React、TypeScript、TailwindCSS、SSR） +- **Install dependencies**: Yes + +安装完成后进入项目目录： + +```bash +cd react-scheduler-remix-quick-start +``` + +### 安装 React Scheduler + +按照 [React Scheduler 安装指南](integrations/react/installation.md) 中的说明进行安装。 + +在本教程中我们使用评估包： + +~~~bash +npm install @dhtmlx/trial-react-scheduler +~~~ + +或 + +~~~bash +yarn add @dhtmlx/trial-react-scheduler +~~~ + +如果你已经使用 Professional 包，请在命令和导入中将 `@dhtmlx/trial-react-scheduler` 替换为 `@dhx/react-scheduler`。 + +## 准备演示数据 + +在项目根目录创建一个 `data/` 文件夹。在其中添加一个 `demoData.ts` 文件，包含 Scheduler 的初始数据： + +~~~ts title="data/demoData.ts" +import type { Event } from '@dhtmlx/trial-react-scheduler'; + +export const events: Event[] = [ + { + id: 1, + classname: 'blue', + start_date: new Date('2025-12-08T02:00:00Z'), + end_date: new Date('2025-12-08T10:20:00Z'), + text: 'Product Strategy Hike', + }, + { + id: 2, + classname: 'blue', + start_date: new Date('2025-12-08T12:00:00Z'), + end_date: new Date('2025-12-08T16:00:00Z'), + text: 'Agile Meditation and Release', + }, + { + id: 3, + classname: 'violet', + start_date: new Date('2025-12-09T06:00:00Z'), + end_date: new Date('2025-12-09T11:00:00Z'), + text: 'Tranquil Tea Time', + }, + { + id: 4, + classname: 'green', + start_date: new Date('2025-12-09T11:30:00Z'), + end_date: new Date('2025-12-09T19:00:00Z'), + text: 'Sprint Review and Retreat', + }, + { + id: 5, + classname: 'yellow', + start_date: new Date('2025-12-10T06:00:00Z'), + end_date: new Date('2025-12-10T08:00:00Z'), + text: 'Stakeholder Sunset Yoga Session', + }, +]; +~~~ + +:::note +配套演示包含更多事件以获得更丰富的视觉效果。 +::: + +## 创建 Scheduler 组件 + +Remix 允许通过标准的 React 架构使用客户端组件。在大多数实际场景中，React Scheduler 应该在 Client Component 中渲染。 + +当你需要时刻访问 Scheduler 实例、传递回调（events、templates、data handlers）、使用 ReactScheduler 的 `hooks`、或提供动态配置/React 元素时，这一点就很重要。 + +因此，我们的 Scheduler 组件将以 `"use client"` 开头。 + +在 `components/Scheduler/Scheduler.tsx` 创建一个新文件： + +~~~tsx title="components/Scheduler/Scheduler.tsx" +'use client'; + +import { useMemo, useRef } from 'react'; +import ReactScheduler, { + type ReactSchedulerRef, + type Event, + type SchedulerTemplates, + type SchedulerConfig, +} from '@dhtmlx/trial-react-scheduler'; +import '@dhtmlx/trial-react-scheduler/dist/react-scheduler.css'; + +export interface ReactSchedulerProps { + events: Event[]; + activeView?: string; + activeDate?: Date; +} + +export default function Scheduler({ + events, + activeView = 'week', + activeDate = new Date('2025-12-08T00:00:00Z'), +}: ReactSchedulerProps) { + const schedulerRef = useRef(null); + + const templates: SchedulerTemplates = useMemo( + () => ({ + event_class: (start: Date, end: Date, event: Event) => { + return event.classname || ''; + }, + }), + [] + ); + + const config: SchedulerConfig = useMemo(() => { + return { + first_hour: 6, + last_hour: 22, + hour_size_px: 60, + }; + }, []); + + return ( + { + console.log(`${entity} - ${action} - ${id}`, data); + }, + }} + /> + ); +} +~~~ + +该组件初始化 Scheduler，并提供配置、初始数据，以及用于未来 API 调用的 `ref`。`config` 对象控制时间线的布局，而 `events` 属性为 Scheduler 提供数据集。我们还通过 props 传递 `activeView` 和 `activeDate`，以便父组件控制 Scheduler 显示的内容。 + +`data` 属性中的 `save` 函数用于跟踪 Scheduler 内对 events 的修改。在本教程中，我们添加了一个简单的占位处理程序来跟踪变更。如果你想将更新发送到后端或绑定到 React 状态，可以参考官方数据绑定指南（[integrations/react/overview.md#bindingdata](integrations/react/overview.md#bindingdata)）。 + +## 为事件添加颜色样式 + +通过 `event_class` 模板应用 CSS 类（`.blue`、`.violet`、`.green`、`.yellow`）来自定义事件的可视外观。将以下内容添加到 `app/app.css`： + +~~~css title="app/app.css" +.blue { + --dhx-scheduler-event-background: linear-gradient(180deg, #0e8af0 0%, #0ec1f0 100%); +} +.violet { + --dhx-scheduler-event-background: linear-gradient(180deg, #d071ef 0%, #ee71d5 100%); +} +.green { + --dhx-scheduler-event-background: linear-gradient(180deg, #12d979 0%, #1ecdeb 100%); +} +.yellow { + --dhx-scheduler-event-background: linear-gradient(180deg, #ffb725 0%, #ffbb25 31.25%, #faea27 100%); +} +~~~ + +:::note +为了让 Scheduler 占满整个页面，请确保 body 没有额外的边距： + +~~~css +body { + margin: 0; + padding: 0; +} +~~~ +::: + +## 在路由上渲染 Scheduler + +打开主页面路由 — `app/routes/home.tsx`。将其内容替换为以下内容： + +~~~tsx title="app/routes/home.tsx" +import { events } from '../../data/demoData'; +import type { Route } from './+types/home'; +import Scheduler from 'components/Scheduler/Scheduler'; + +export function meta({}: Route.MetaArgs) { + return [ + { title: 'DHTMLX React Scheduler | Remix (React Router) Quick Start' }, + { name: 'description', content: 'DHTMLX React Scheduler | Remix (React Router) Quick Start' }, + ]; +} + +export default function Home() { + return ( +
+ +
+ ); +} +~~~ + +现在 Scheduler 将显示在 `/` 路由上。 + +## 启动应用 + +运行开发服务器： + +~~~bash +npm run dev +~~~ + +然后在浏览器中打开 `http://localhost:5173`。现在你应该能看到一个在 Remix 应用中工作的 Scheduler，包含初始数据。 + +## 摘要 + +现在你拥有一个最小化的 Remix 项目，其中集成了 DHTMLX React Scheduler： + +- Scheduler 作为 Client Component（`"use client"`）渲染在 Remix / React Router v7 中 +- 演示数据从单独的文件加载并作为 props 传递 +- `event_class` 模板为事件应用自定义颜色渐变 +- `data.save` 回调将编辑记录输出到控制台（可与后端对接） + +## 下一步 + +- [基于 React 的数据流](integrations/react/overview.md#bindingdata) +- [React Scheduler 模板文档](integrations/react/configuration-props.md) +- 探索状态管理集成： + - [将 React Scheduler 与 Redux Toolkit 配合使用](integrations/react/state/redux-toolkit.md) + - [将 React Scheduler 与 MobX 配合使用](integrations/react/state/mobx.md) + - [将 React Scheduler 与 Zustand 配合使用](integrations/react/state/zustand.md) \ No newline at end of file diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/integrations/react/state/index.md b/i18n/zh/docusaurus-plugin-content-docs/current/integrations/react/state/index.md new file mode 100644 index 00000000..7429b410 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/integrations/react/state/index.md @@ -0,0 +1,40 @@ +--- +title: "数据与状态管理" +description: "如何将 React Scheduler 与 React 状态或状态管理器绑定、处理用户编辑，并在 React 管理的数据模型与 Scheduler 管理的数据模型之间进行选择。" +--- + +本节介绍如何让 Scheduler 数据与应用程序状态保持同步。内容涵盖推荐的以 React 为驱动的模型（以 React 或存储作为唯一数据源）、面向性能的 Scheduler 管理数据模型，以及对广泛使用的状态库的实际实现。 + +## 从这里开始 + +请先阅读以下内容，以了解两种受支持的数据模型及常见的集成模式： + +- [数据绑定与状态管理基础](integrations/react/state/state-management-basics.md) + +它解释了如何使用 `data.save` 和 `data.batchSave` 回调、加载在各模型中的作用，以及 Scheduler 内部管理数据时有哪些变化。 + +## 选择你的状态库 + +下面的每个教程都应用相同的核心模式（state -> props -> Scheduler，changes -> callbacks -> state），但使用各库的特有实现风格： + +- [Redux Toolkit](integrations/react/state/redux-toolkit.md) +- [Zustand](integrations/react/state/zustand.md) +- [MobX](integrations/react/state/mobx.md) +- [XState](integrations/react/state/xstate.md) +- [Jotai](integrations/react/state/jotai.md) +- [Valtio](integrations/react/state/valtio.md) + +## 实时同步 + +如果你需要实时更新，请从这里开始： + +- [Firebase Integration](integrations/react/firebase-integration.md) + +## 性能注意事项 + +如果你的应用执行大量操作（批量编辑、频繁更新、海量数据集），请关注： + +- 使用 `data.batchSave` 以降低更新开销， +- 当 React 不需要立即反映每个变更时，使用 **Scheduler-managed data** 模型。 + +这两个主题都在 [数据绑定与状态管理基础](integrations/react/state/state-management-basics.md) 中有所涵盖。 \ No newline at end of file diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/integrations/react/state/jotai.md b/i18n/zh/docusaurus-plugin-content-docs/current/integrations/react/state/jotai.md new file mode 100644 index 00000000..c5ef4b71 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/integrations/react/state/jotai.md @@ -0,0 +1,597 @@ +--- +title: React Scheduler - Jotai 教程 +sidebar_label: Jotai +description: 了解如何将 DHTMLX React Scheduler 与 Jotai 集成，包括事件的 CRUD、视图/日期同步、只读配置，以及撤销/重做。 +--- + +# React Scheduler - Jotai 教程 + +本教程演示如何将 **DHTMLX React Scheduler** 连接到一个 **Jotai** 存储。你将把事件和 UI 状态（view/date/config）保存在原子中，通过 `data.save` 路由 Scheduler 编辑，并通过基于快照的历史实现 **撤销/重做**。 + +:::note +完整的源代码可在 [GitHub 上找到](https://github.com/DHTMLX/react-scheduler-jotai-starter)。 +::: + +## 先决条件 + +- Node.js（推荐 LTS） +- React + TypeScript 基础 +- 熟悉 Jotai 的 atoms 与 `useAtom`/`useSetAtom`。如需快速回顾，请参阅 Jotai 文档：https://jotai.org/ + +## 快速设置 - 创建项目 + +创建一个 Vite + React + TypeScript 项目： + +~~~bash +npm create vite@latest scheduler-jotai-demo -- --template react-ts +cd scheduler-jotai-demo +npm install +~~~ + +安装 Jotai： + +~~~bash +npm install jotai +~~~ + +安装 Material UI（用于演示工具栏）： + +~~~bash +npm install @mui/material @mui/icons-material @emotion/react @emotion/styled +~~~ + +### 安装 React Scheduler + +按 [React Scheduler 安装指南](integrations/react/installation.md) 所述安装 React Scheduler。 + +在本教程中，我们使用评估包： + +```bash +npm install @dhtmlx/trial-react-scheduler +``` + +或 + +```bash +yarn add @dhtmlx/trial-react-scheduler +``` + +如果你已经使用 Professional 套件，在命令和导入中将 `@dhtmlx/trial-react-scheduler` 替换为 `@dhx/react-scheduler`。 + +运行开发服务器： + +~~~bash +npm run dev +~~~ + +:::note +为了让 Scheduler 占满整页，请从 `src/App.css` 删除默认样式并添加： + +~~~css +#root { + margin: 0; + padding: 0; + height: 100%; + width: 100%; +} + +body { + margin: 0; +} +~~~ +::: + +## 定义共享类型 + +创建 `src/types.ts`。这些类型在原子和组件之间共享： + +~~~ts +export type SchedulerView = "day" | "week" | "month"; +export type SchedulerEventId = string | number; + +export interface SchedulerEvent { + id: SchedulerEventId; + start_date: string; + end_date: string; + text: string; + + // Scheduler may attach extra fields (e.g. custom props). Keep the demo permissive. + [key: string]: unknown; +} + +export type SchedulerConfig = Record; + +export interface SchedulerSnapshot { + events: SchedulerEvent[]; + config: SchedulerConfig; +} +~~~ + +- `SchedulerEvent` 使用索引签名，以便 Scheduler 可以在运行时附加额外字段。 +- `SchedulerSnapshot` 捕捉撤销/重做所需的数据（事件 + 配置）。 + +## 设置示例数据 + +创建 `src/seed/data.ts`，包含若干事件和初始 UI 状态。请注意，`seedDate` 以 **数字**（时间戳）的形式存储，以确保原子状态可序列化。 + +~~~ts +import type { SchedulerEvent, SchedulerView } from "../types"; + +export const seedEvents: SchedulerEvent[] = [ + { id: 1, start_date: "2025-08-11T02:00:00Z", end_date: "2025-08-11T10:20:00Z", text: "Product Strategy Hike" }, + { id: 2, start_date: "2025-08-12T06:00:00Z", end_date: "2025-08-12T11:00:00Z", text: "Tranquil Tea Time" }, + { id: 3, start_date: "2025-08-15T03:00:00Z", end_date: "2025-08-15T08:00:00Z", text: "Demo and Showcase" }, +]; + +export const seedDate = Date.parse("2025-08-15T00:00:00Z"); +export const seedView: SchedulerView = "week"; +~~~ + +:::note +伴随的演示包括额外的事件，以获得更丰富的视觉效果。 +::: + +## 创建 Jotai 原子和操作 + +创建 `src/schedulerAtoms.ts`。本设置存储： + +- `events`（Scheduler 数据） +- `currentDate`（时间戳） +- `view`（`day | week | month`） +- `config`（Scheduler 配置对象，包含 `readonly`） +- 用于撤销/重做的 `past` / `future` 快照 + +在本示例中，撤销/重做仅跟踪 **事件和配置的变更**。日期导航和视图切换未加入历史记录。 + +~~~ts +import { atom } from "jotai"; +import { seedDate, seedEvents, seedView } from "./seed/data"; +import type { + SchedulerConfig, + SchedulerEvent, + SchedulerEventId, + SchedulerSnapshot, + SchedulerView, +} from "./types"; + +interface SchedulerState { + events: SchedulerEvent[]; + currentDate: number; + view: SchedulerView; + config: SchedulerConfig; +} + +export type SchedulerAction = + | { + type: "updateEvent"; + payload: Partial & Pick; + } + | { + type: "createEvent"; + payload: Omit & Partial>; + } + | { type: "deleteEvent"; payload: SchedulerEventId } + | { type: "setCurrentDate"; payload: number } + | { type: "setView"; payload: SchedulerView } + | { type: "updateConfig"; payload: Partial } + | { type: "undo" } + | { type: "redo" }; + +const schedulerStateAtom = atom({ + events: seedEvents as unknown as SchedulerEvent[], + currentDate: seedDate, + view: seedView, + config: {}, +}); + +const pastAtom = atom([]); +const futureAtom = atom([]); +const MAX_HISTORY_SIZE = 50; + +const deepCopy = (value: T): T => { + return JSON.parse(JSON.stringify(value)) as T; +}; + +const createSnapshot = (state: SchedulerState): SchedulerSnapshot => ({ + events: deepCopy(state.events), + config: deepCopy(state.config), +}); + +export const schedulerActionsAtom = atom( + null, + (get, set, action: SchedulerAction): SchedulerEvent | void => { + const currentState = get(schedulerStateAtom); + const past = get(pastAtom); + const future = get(futureAtom); + + const pushHistory = () => { + set(pastAtom, [...past.slice(-MAX_HISTORY_SIZE + 1), createSnapshot(currentState)]); + set(futureAtom, []); + }; + + if (action.type === "setCurrentDate") { + set(schedulerStateAtom, { ...currentState, currentDate: action.payload }); + return; + } + + if (action.type === "setView") { + set(schedulerStateAtom, { ...currentState, view: action.payload }); + return; + } + + if (action.type === "createEvent") { + pushHistory(); + const id = action.payload.id != null ? action.payload.id : `id_${Date.now().toString()}`; + const newEvent: SchedulerEvent = { ...action.payload, id } as SchedulerEvent; + + set(schedulerStateAtom, { + ...currentState, + events: [...currentState.events, newEvent], + }); + return newEvent; + } + + if (action.type === "updateEvent") { + const index = currentState.events.findIndex((event) => String(event.id) === String(action.payload.id)); + if (index === -1) return; + + pushHistory(); + set(schedulerStateAtom, { + ...currentState, + events: [ + ...currentState.events.slice(0, index), + { ...currentState.events[index], ...action.payload }, + ...currentState.events.slice(index + 1), + ], + }); + return; + } + + if (action.type === "deleteEvent") { + const exists = currentState.events.some((event) => String(event.id) === String(action.payload)); + if (!exists) return; + + pushHistory(); + set(schedulerStateAtom, { + ...currentState, + events: currentState.events.filter((event) => String(event.id) !== String(action.payload)), + }); + return; + } + + if (action.type === "updateConfig") { + pushHistory(); + set(schedulerStateAtom, { + ...currentState, + config: { ...currentState.config, ...action.payload }, + }); + return; + } + + if (action.type === "undo") { + if (past.length === 0) return; + + const previous = past[past.length - 1]; + set(pastAtom, past.slice(0, -1)); + set(futureAtom, [createSnapshot(currentState), ...future]); + set(schedulerStateAtom, { + ...currentState, + events: previous.events, + config: previous.config, + }); + return; + } + + if (action.type === "redo") { + if (future.length === 0) return; + + const next = future[0]; + set(futureAtom, future.slice(1)); + set(pastAtom, [...past, createSnapshot(currentState)]); + set(schedulerStateAtom, { + ...currentState, + events: next.events, + config: next.config, + }); + } + } +); + +export const schedulerStateViewAtom = atom((get) => get(schedulerStateAtom)); +export const canUndoAtom = atom((get) => get(pastAtom).length > 0); +export const canRedoAtom = atom((get) => get(futureAtom).length > 0); +~~~ + +## 构建控制工具栏 + +创建 `src/components/Toolbar.tsx`。该工具栏将： + +- 切换视图（day/week/month） +- 导航上一个/今天/下一个 +- 撤销/重做，含禁用状态 +- 切换只读模式 + +~~~tsx +import { ButtonGroup, Button, Typography, Stack, FormControlLabel, Switch } from "@mui/material"; +import UndoIcon from "@mui/icons-material/Undo"; +import RedoIcon from "@mui/icons-material/Redo"; +import React from "react"; +import type { SchedulerView } from "../types"; + +export interface ToolbarProps { + currentView: SchedulerView; + currentDate: Date; + isReadOnly: boolean; + canUndo: boolean; + canRedo: boolean; + onUndo?: () => void; + onRedo?: () => void; + onNavigate?: (action: "prev" | "next" | "today") => void; + onReadOnlyChange?: (value: boolean) => void; + setView: (view: SchedulerView) => void; +} + +export default React.memo(function Toolbar({ + currentView, + currentDate, + isReadOnly, + canUndo, + canRedo, + onUndo, + onRedo, + onNavigate, + onReadOnlyChange, + setView, +}: ToolbarProps) { + return ( + + + {(["day", "week", "month"] as const).map((label) => ( + + ))} + + + + + + onReadOnlyChange?.(event.target.checked)} + inputProps={{ "aria-label": "Toggle read-only" }} + /> + } + /> + + + {new Date(currentDate)?.toLocaleDateString(undefined, { weekday: "short", month: "short", day: "numeric" })} + + + + + + + + ); +}); +~~~ + +## 将 Scheduler 连接到 Jotai + +创建 `src/components/Scheduler.tsx`。该组件将： + +- 从原子中读取 `events/view/currentDate/config` +- 通过 `data.save` 桥接 Scheduler 的 CRUD（`create/update/delete`） +- 连接 `undo/redo`、导航以及只读切换 +- 隐藏内置 Scheduler 导航栏并使用自定义工具栏 + +~~~tsx +import { useCallback, useMemo } from "react"; +import { useAtomValue, useSetAtom } from "jotai"; +import ReactScheduler from "@dhtmlx/trial-react-scheduler"; +import "@dhtmlx/trial-react-scheduler/dist/react-scheduler.css"; + +import Toolbar from "./Toolbar"; +import { + canRedoAtom, + canUndoAtom, + schedulerActionsAtom, + schedulerStateViewAtom, +} from "../schedulerAtoms"; +import type { SchedulerEvent, SchedulerEventId, SchedulerView } from "../types"; + +type SaveAction = "create" | "update" | "delete"; +type SaveEntity = "event"; + +export default function DemoJotaiScheduler() { + const state = useAtomValue(schedulerStateViewAtom); + const dispatchAction = useSetAtom(schedulerActionsAtom); + const canUndo = useAtomValue(canUndoAtom); + const canRedo = useAtomValue(canRedoAtom); + + const { events, view, currentDate, config } = state; + const activeDate = useMemo(() => new Date(currentDate), [currentDate]); + const isReadOnly = Boolean((config as { readonly?: unknown }).readonly); + + const setCurrentDate = useCallback( + (dateMs: number) => dispatchAction({ type: "setCurrentDate", payload: dateMs }), + [dispatchAction] + ); + const setView = useCallback( + (nextView: SchedulerView) => dispatchAction({ type: "setView", payload: nextView }), + [dispatchAction] + ); + const undo = useCallback(() => dispatchAction({ type: "undo" }), [dispatchAction]); + const redo = useCallback(() => dispatchAction({ type: "redo" }), [dispatchAction]); + const updateReadOnly = useCallback( + (value: boolean) => dispatchAction({ type: "updateConfig", payload: { readonly: value } }), + [dispatchAction] + ); + + const handleDateNavigation = useCallback( + (action: "prev" | "next" | "today") => { + if (action === "today") { + setCurrentDate(Date.now()); + return; + } + + const step = action === "next" ? 1 : -1; + const date = new Date(currentDate); + + if (view === "day") { + date.setDate(date.getDate() + step); + } else if (view === "week") { + date.setDate(date.getDate() + step * 7); + } else { + date.setMonth(date.getMonth() + step); + } + + setCurrentDate(date.getTime()); + }, + [currentDate, view, setCurrentDate] + ); + + const handleViewChange = useCallback( + (mode: string, date: Date) => { + const nextView: SchedulerView = mode === "day" || mode === "week" || mode === "month" ? mode : "month"; + setView(nextView); + setCurrentDate(date.getTime()); + }, + [setView, setCurrentDate] + ); + + // Scheduler <-> Jotai data bridge + const dataBridge = useMemo( + () => ({ + save: (entity: SaveEntity, action: SaveAction, payload: unknown, id: unknown) => { + if (entity !== "event") return; + + switch (action) { + case "update": { + const eventData = + payload && typeof payload === "object" ? (payload as Partial) : ({} as Partial); + const eventId = eventData.id ?? id; + if (eventId == null) { + console.warn("Update called without an id", { payload, id }); + return; + } + + const updatedEvent = { ...eventData, id: eventId } as Partial & Pick; + dispatchAction({ type: "updateEvent", payload: updatedEvent }); + return updatedEvent; + } + case "create": { + const eventData = + payload && typeof payload === "object" + ? (payload as Omit & Partial>) + : null; + if (!eventData) { + console.warn("Create called without event payload", { payload }); + return; + } + return dispatchAction({ type: "createEvent", payload: eventData }); + } + case "delete": { + const deleteId = + payload && typeof payload === "object" + ? ((payload as { id?: unknown }).id ?? id) + : payload ?? id; + + if (deleteId == null) { + console.warn("Delete called without an id", { payload, id }); + return; + } + + dispatchAction({ type: "deleteEvent", payload: deleteId as SchedulerEventId }); + return deleteId; + } + default: + console.warn(`Unknown action: ${action}`); + return; + } + }, + }), + [dispatchAction] + ); + + const memoizedXY = useMemo(() => ({ nav_height: 0 }), []); + + return ( +
+ + + +
+ ); +} +~~~ + +## 在应用中渲染 Scheduler + +更新 `src/App.tsx`： + +~~~tsx +import Scheduler from "./components/Scheduler"; +import "./App.css"; + +function App() { + return ; +} + +export default App; +~~~ + +## 总结 + +现在，你已经拥有一个完全由 Jotai 驱动的 React Scheduler： + +- Jotai 原子将 `events`、`view`、`currentDate` 和 `config` 作为单一可信源 +- Scheduler 的编辑通过 `data.save` 路由到类型化的 Jotai 动作 +- 撤销/重做通过基于快照的历史记录实现，用于事件/配置的变更 +- 只读配置开关可将 Scheduler 锁定，防止编辑 +- 自定义工具栏处理导航、视图切换和历史控制 + +## 接下来要做什么 + +- 重新查看本示例背后的概念，请参考 [Data Binding & State Management Basics](integrations/react/state/state-management-basics.md) +- 在 [React Scheduler overview](integrations/react/overview.md) 中探索 Scheduler 的配置与模板选项 +- 通过从 API 加载/保存事件并派发原子动作来实现持久化 +- 使用相同模式探索与其他状态管理器的结合： + - [使用 React Scheduler 与 Redux Toolkit](integrations/react/state/redux-toolkit.md) + - [使用 React Scheduler 与 MobX](integrations/react/state/mobx.md) + - [使用 React Scheduler 与 XState](integrations/react/state/xstate.md) + - [使用 React Scheduler 与 Zustand](integrations/react/state/zustand.md) + - [使用 React Scheduler 与 Valtio](integrations/react/state/valtio.md) \ No newline at end of file diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/integrations/react/state/mobx.md b/i18n/zh/docusaurus-plugin-content-docs/current/integrations/react/state/mobx.md new file mode 100644 index 00000000..47dec403 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/integrations/react/state/mobx.md @@ -0,0 +1,626 @@ +--- +title: 使用 MobX 的 React Scheduler +sidebar_label: MobX +description: "从可观察的 MobX 状态渲染 React Scheduler，并通过 data.save 处理创建/更新/删除，以及基于快照的撤销/重做。" +--- + +# React Scheduler - MobX 教程 + +本教程展示如何在 Vite + React + TypeScript 应用中渲染 **DHTMLX React Scheduler**，并由一个 **MobX** 存储驱动它。 +到最后，你将拥有一个可用的 Scheduler，支持 **创建/更新/删除**、**视图与日期导航**、对事件变更的**基于快照的撤销/重做**，以及一个 **只读** 开关。 + +:::note +完整源代码可在 [GitHub 上获取](https://github.com/DHTMLX/react-scheduler-mobx-starter)。 +::: + +你将构建： + +- 一个拥有 `events`、当前 `view` 与 `date` 的 MobX 存储 +- 一个将 Scheduler 编辑转换成存储操作的 `data.save` 桥接 +- 一个简单的工具栏（视图、导航、撤销/重做、只读切换），位于 Scheduler 之上 + +## 先决条件 + +- 具备 React、TypeScript、Vite 和 MobX 的基础知识 +- 建议：阅读 [Data Binding & State Management Basics](integrations/react/state/state-management-basics.md)，以理解本教程所基于的数据绑定模式及 `data.save` 回调。 + +## 快速上手 - 创建项目 + +在这一步中，我们将创建一个 Vite 项目、安装依赖并验证应用运行状态。 + +操作： + +- 创建一个 Vite React + TypeScript 项目 +- 安装 MobX + UI 相关依赖 +- 安装 React Scheduler（试用包） +- 移除 Vite 的默认 `App.css` 样式，以便 Scheduler 能填充视口 + +在开始之前，请安装 [Node.js](https://nodejs.org/en/)。 + +创建 Vite React + TypeScript 项目： + +~~~bash +npm create vite@latest react-scheduler-mobx-demo -- --template react-ts +cd react-scheduler-mobx-demo +~~~ + +现在安装所需的依赖。 + +* 对于 **npm**： + +~~~bash +npm install mobx mobx-react-lite @mui/material @mui/icons-material @emotion/react @emotion/styled +~~~ + +* 对于 **yarn**： + +~~~bash +yarn add mobx mobx-react-lite @mui/material @mui/icons-material @emotion/react @emotion/styled +~~~ + +### 安装 React Scheduler + +按照 [React Scheduler 安装指南](integrations/react/installation.md) 安装 React Scheduler。 + +在本教程中我们使用评估包： + +```bash +npm install @dhtmlx/trial-react-scheduler +``` + +或 + +```bash +yarn add @dhtmlx/trial-react-scheduler +``` + +如果你已经使用 Professional 包，请在命令和导入中将 `@dhtmlx/trial-react-scheduler` 替换为 `@dhx/react-scheduler`。 + +现在可以启动开发服务器： + +~~~bash +npm run dev +~~~ + +现在你应该可以在 `http://localhost:5173` 看到你的 React 项目在运行。 + +:::note +为使 Scheduler 占满页面，请移除 `src/App.css` 的默认 Vite 样式。 + +将 `src/App.css` 更新为以下内容。 +::: + +~~~css title="src/App.css" +#root, body { + margin: 0; + padding: 0; + height: 100%; + width: 100%; +} +~~~ + +## 设置示例数据 + +在这一步中，我们将为 Scheduler 创建确定性的种子数据，使演示在每次运行时都看起来一致。 + +操作： + +- 创建 `src/seed/data.ts`，包含少量事件 +- 导出初始的 `view` 与 `date`，使 Scheduler 从一个可预测的状态开始 + +创建 `src/seed/data.ts`： + +~~~ts title="src/seed/data.ts" +export type SchedulerView = "day" | "week" | "month"; + +export interface SeedEvent { + id: string | number; + start_date: string; + end_date: string; + text: string; +} + +export const seedEvents: SeedEvent[] = [ + { id: 1, start_date: "2025-08-11T02:00:00Z", end_date: "2025-08-11T10:20:00Z", text: "Product Strategy Hike" }, + { id: 2, start_date: "2025-08-12T06:00:00Z", end_date: "2025-08-12T11:00:00Z", text: "Tranquil Tea Time" }, + { id: 3, start_date: "2025-08-15T03:00:00Z", end_date: "2025-08-15T08:00:00Z", text: "Demo and Showcase" }, +]; + +export const seedDate = Date.parse("2025-08-15T00:00:00Z"); + +export const seedView: SchedulerView = "week"; +~~~ + +:::note +配套演示还包含额外事件，以获得更丰富的视觉效果。 +::: + +## 构建控制工具栏组件 + +在这一步，我们将构建一个简单的可重用工具栏，用于控制 Scheduler 的导航与历史。 + +操作： + +- 创建 `src/components/Toolbar.tsx` +- 添加用于 **Day / Week / Month** 的按钮 +- 添加 **Prev / Today / Next** 导航按钮 +- 添加与回调绑定的 **Undo / Redo** 按钮 +- 添加一个 **Read-only** 开关 + +创建 `src/components/Toolbar.tsx`： + +~~~tsx title="src/components/Toolbar.tsx" +import { ButtonGroup, Button, Typography, Stack, FormControlLabel, Switch } from "@mui/material"; +import UndoIcon from "@mui/icons-material/Undo"; +import RedoIcon from "@mui/icons-material/Redo"; +import React from "react"; + +export interface ToolbarProps { + currentView: string; + currentDate: Date; + isReadOnly: boolean; + canUndo?: boolean; + canRedo?: boolean; + onUndo?: () => void; + onRedo?: () => void; + onNavigate?: (action: "prev" | "next" | "today") => void; + onReadOnlyChange?: (value: boolean) => void; + setView: (view: "day" | "week" | "month") => void; +} + +export default React.memo(function Toolbar({ + currentView, + currentDate, + isReadOnly, + canUndo, + canRedo, + onUndo, + onRedo, + onNavigate, + onReadOnlyChange, + setView, +}: ToolbarProps) { + return ( + + + {(["day", "week", "month"] as const).map((label) => ( + + ))} + + + + + + + onReadOnlyChange?.(e.target.checked)} + inputProps={{ "aria-label": "Toggle read-only" }} + /> + } + /> + + + + {new Date(currentDate).toLocaleDateString(undefined, { + weekday: "short", + month: "short", + day: "numeric", + })} + + + + + + + + + ); +}); +~~~ + +## 设置 MobX 存储 + +在这一步，我们将创建一个拥有 Scheduler 状态并实现基于快照的撤销/重做的 MobX 存储。 + +操作： + +- 创建 `src/store.ts` +- 将 `events`、`view`、`currentDate` 与 `config` 作为可观察状态进行存储 +- 实现 `createEvent`、`updateEvent`、`deleteEvent` 方法 +- 添加 `updateConfig` 以进行只读切换 +- 添加 `past`/`future` 历史栈及 `undo`/`redo` 操作 + +创建 `src/store.ts`： + +~~~ts title="src/store.ts" +import { makeAutoObservable } from "mobx"; +import type { SchedulerConfig } from "@dhtmlx/trial-react-scheduler"; +import { seedEvents, seedView, seedDate, type SeedEvent, type SchedulerView } from "./seed/data"; + +export interface SchedulerEvent extends SeedEvent { + /** + * 允许额外的 Scheduler 字段。 + * 该示例仅依赖 id/start_date/end_date/text。 + */ + [key: string]: unknown; +} + +interface Snapshot { + events: SchedulerEvent[]; + config: SchedulerConfig; +} + +function cloneJson(value: T): T { + return JSON.parse(JSON.stringify(value)) as T; +} + +class SchedulerStore { + events: SchedulerEvent[] = seedEvents as SchedulerEvent[]; + view: SchedulerView = seedView; + currentDate: number = seedDate; + config: SchedulerConfig = {}; + + past: Snapshot[] = []; + future: Snapshot[] = []; + maxHistory = 50; + + constructor() { + makeAutoObservable(this, {}, { autoBind: true }); + } + + get canUndo(): boolean { + return this.past.length > 0; + } + + get canRedo(): boolean { + return this.future.length > 0; + } + + private generateId(): string { + return `id_${Date.now().toString()}`; + } + + private snapshot(): Snapshot { + return { + events: cloneJson(this.events), + config: cloneJson(this.config), + }; + } + + private saveToHistory(): void { + this.past.push(this.snapshot()); + if (this.past.length > this.maxHistory) { + this.past.shift(); + } + this.future = []; + } + + private restore(snapshot: Snapshot): void { + this.events = snapshot.events; + this.config = snapshot.config; + } + + /** + * Navigation is not part of history: undo/redo in this demo is focused on event mutations. + */ + setCurrentDate(date: number): void { + this.currentDate = date; + } + + /** + * Navigation is not part of history: undo/redo in this demo is focused on event mutations. + */ + setView(view: SchedulerView): void { + this.view = view; + } + + updateConfig(partial: Partial): void { + this.saveToHistory(); + this.config = { ...this.config, ...partial }; + } + + /** + * Scheduler 的数据处理器（data.save）在创建事件时调用。 + * + * 重要：返回创建的事件并携带最终 id（模拟后端生成的 id）， + * 以便 Scheduler 能替换其临时 id，并确保后续更新能够正确工作。 + */ + createEvent(eventDraft: Partial): SchedulerEvent { + this.saveToHistory(); + + const id = this.generateId(); + const newEvent: SchedulerEvent = { + ...eventDraft, + id, + start_date: String(eventDraft.start_date ?? new Date().toISOString()), + end_date: String(eventDraft.end_date ?? new Date().toISOString()), + text: String(eventDraft.text ?? "(no title)"), + }; + + this.events = [...this.events, newEvent]; + return newEvent; + } + + updateEvent(updatedEvent: Partial & { id: string | number }): void { + this.saveToHistory(); + this.events = this.events.map((event) => { + if (String(event.id) === String(updatedEvent.id)) { + return { ...event, ...updatedEvent }; + } + return event; + }); + } + + deleteEvent(id: string | number): void { + this.saveToHistory(); + this.events = this.events.filter((event) => String(event.id) !== String(id)); + } + + undo(): void { + if (this.past.length === 0) { + return; + } + + const previous = this.past.pop(); + if (!previous) { + return; + } + + this.future.unshift(this.snapshot()); + this.restore(previous); + } + + redo(): void { + if (this.future.length === 0) { + return; + } + + const next = this.future.shift(); + if (!next) { + return; + } + + this.past.push(this.snapshot()); + this.restore(next); + } +} + +const schedulerStore = new SchedulerStore(); +export default schedulerStore; +~~~ + +## 创建主 Scheduler 组件 + +在这一步中，我们将渲染 React Scheduler 并把它连接到 MobX 存储。 + +操作： + +- 创建 `src/components/Scheduler.tsx` +- 使用 `observer` 包裹组件，使其在存储变化时重新渲染 +- 创建一个 `data.save` 桥接，在其中调用存储的创建/更新/删除操作 +- 添加 `onViewChange` 处理器，将 Scheduler 的视图变更同步到状态 +- 通过 `updateConfig` 将只读切换连通 +- 隐藏 Scheduler 自带的导航栏，改用工具栏 + +创建 `src/components/Scheduler.tsx`： + +~~~tsx title="src/components/Scheduler.tsx" +import { observer } from "mobx-react-lite"; +import ReactScheduler from "@dhtmlx/trial-react-scheduler"; +import "@dhtmlx/trial-react-scheduler/dist/react-scheduler.css"; +import Toolbar from "./Toolbar"; +import schedulerStore, { type SchedulerEvent } from "../store"; +import type { SchedulerView } from "../seed/data"; +import { useCallback, useMemo } from "react"; + +const DemoMobxScheduler = observer(() => { + const { + events, + view, + currentDate, + config, + canUndo, + canRedo, + setView, + setCurrentDate, + updateConfig, + createEvent, + updateEvent, + deleteEvent, + undo, + redo, + } = schedulerStore; + + const activeDate = useMemo(() => new Date(currentDate), [currentDate]); + + const handleDateNavigation = useCallback( + (action: "prev" | "next" | "today") => { + if (action === "today") { + setCurrentDate(Date.now()); + return; + } + + const step = action === "next" ? 1 : -1; + const date = new Date(currentDate); + + if (view === "day") { + date.setDate(date.getDate() + step); + } else if (view === "week") { + date.setDate(date.getDate() + step * 7); + } else { + date.setMonth(date.getMonth() + step); + } + + setCurrentDate(date.getTime()); + }, + [currentDate, view, setCurrentDate] + ); + + const handleViewChange = useCallback( + (mode: string, date: Date) => { + const nextView: SchedulerView = + mode === "day" || mode === "week" || mode === "month" ? mode : "month"; + setView(nextView); + setCurrentDate(date.getTime()); + }, + [setView, setCurrentDate] + ); + + const isReadOnly = Boolean((config as { readonly?: unknown }).readonly); + const handleReadOnlyChange = useCallback( + (value: boolean) => updateConfig({ readonly: value }), + [updateConfig] + ); + + type DataAction = "create" | "update" | "delete"; + + const dataBridge = useMemo( + () => ({ + save: (entity: string, action: string, payload: unknown, id: string | number) => { + if (entity !== "event") { + return; + } + + const safeAction = action as DataAction; + + if (safeAction === "update") { + return updateEvent(payload as Partial & { id: string | number }); + } + + if (safeAction === "create") { + // Important: return the created event with the final id. + // This simulates a backend-generated id and keeps subsequent updates working. + return createEvent(payload as Partial); + } + + if (safeAction === "delete") { + return deleteEvent(id); + } + + console.warn(`Unknown data.save action: ${action}`); + return; + }, + }), + [updateEvent, createEvent, deleteEvent] + ); + + const handleUndo = useCallback(() => undo(), [undo]); + const handleRedo = useCallback(() => redo(), [redo]); + + const memoizedXY = useMemo(() => ({ nav_height: 0 }), []); + + return ( +
+ + + +
+ ); +}); + +export default DemoMobxScheduler; +~~~ + +最后，更新 `src/App.tsx` 以渲染 Scheduler 组件： + +~~~tsx title="src/App.tsx" +import { useEffect } from "react"; +import Scheduler from "./components/Scheduler"; +import "./App.css"; + +function App() { + useEffect(() => { + document.title = "DHTMLX React Scheduler - MobX Demo"; + }, []); + + return ; +} + +export default App; +~~~ + +至此，你的应用应能在登录后渲染出带自定义工具栏的 Scheduler。 + +## 运行应用程序 + +在这一步，我们将运行演示并验证编辑与历史记录功能。 + +操作： + +- 启动开发服务器（若尚未在运行） +- 创建/编辑/拖动事件，确认通过 `data.save` 更新到存储 +- 使用 Undo/Redo 撤销/应用事件变更 +- 切换只读模式以锁定 Scheduler + +运行： + +~~~bash +npm run dev +~~~ + +试用： + +- 创建事件（在日历中双击或使用内置编辑器 UI） +- 编辑事件（修改文本/时间） +- 将事件拖到新的时间槽 +- 使用工具栏中的 **Undo** / **Redo** +- 切换 **Read-only**，以锁定 Scheduler 不被编辑 + +## 总结 + +在本教程中，你已经： + +- 创建了一个 Vite + React 项目 +- 添加了 React Scheduler，并将其连接到一个 MobX 存储 +- 使用 `past`/`future` 历史数组实现基于快照的撤销/重做 +- 通过可观察的 MobX 状态驱动事件、视图/日期与配置 +- 使用 `data.save` 回调，使每次 Scheduler 的改动都成为一个存储操作 +- 通过只读配置开关让你锁定 Scheduler，避免编辑 + +这使 Scheduler 组件保持完全声明性，同时所有变更逻辑与历史处理都封装在 MobX 状态中。 + +## 下一步 + +若要深入： + +- 回顾本示例背后的概念，请参阅 [Data Binding & State Management Basics](integrations/react/state/state-management-basics.md) +- 了解 Scheduler 的配置与模板选项，请参阅 [React Scheduler 概览](integrations/react/overview.md) +- 在其他状态管理器中应用相同模式： + - [使用 Redux Toolkit 的 React Scheduler](integrations/react/state/redux-toolkit.md) + - [使用 Zustand 的 React Scheduler](integrations/react/state/zustand.md) + - [使用 XState 的 React Scheduler](integrations/react/state/xstate.md) + - [使用 Jotai 的 React Scheduler](integrations/react/state/jotai.md) + - [使用 Valtio 的 React Scheduler](integrations/react/state/valtio.md) \ No newline at end of file diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/integrations/react/state/redux-toolkit.md b/i18n/zh/docusaurus-plugin-content-docs/current/integrations/react/state/redux-toolkit.md new file mode 100644 index 00000000..0816302d --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/integrations/react/state/redux-toolkit.md @@ -0,0 +1,590 @@ +--- +title: React Scheduler - Redux Toolkit 教程 +sidebar_label: Redux Toolkit +description: 学习如何将 DHTMLX React Scheduler 与 Redux Toolkit 集成，包括事件的增删改查、视图/日期同步，以及撤销/重做。 +--- + +# React Scheduler - Redux Toolkit 教程 + +本教程展示如何将 **DHTMLX React Scheduler** 连接到一个 **Redux Toolkit** 存储。你将把事件和 UI 状态（视图/日期/配置）保存在 Redux 中，通过 `data.save` 路由 Scheduler 的编辑，并通过基于快照的历史记录实现 **撤销/重做**，以及一个 **只读** 开关。 + +:::note +完整的源代码可在 [GitHub 上获取](https://github.com/DHTMLX/react-scheduler-redux-starter)。 +::: + +## 前提条件 + +- Node.js（建议使用 LTS 版本） +- React + TypeScript 基础 +- Redux 基础知识（actions、reducers、store）。如需回顾，请参阅 Redux 文档：https://redux.js.org/ + +## 快速设置 - 创建项目 + +创建一个 Vite + React + TS 项目： + +~~~bash +npm create vite@latest scheduler-redux-demo -- --template react-ts +cd scheduler-redux-demo +npm install +~~~ + +安装 Redux Toolkit + React Redux： + +~~~bash +npm install @reduxjs/toolkit react-redux +~~~ + +安装 Material UI（用于演示工具栏）： + +~~~bash +npm install @mui/material @mui/icons-material @emotion/react @emotion/styled +~~~ + +### 安装 React Scheduler + +按照 [React Scheduler 安装指南](integrations/react/installation.md) 的说明安装 React Scheduler。 + +在本教程中，我们使用评估包： + +```bash +npm install @dhtmlx/trial-react-scheduler +``` + +或 + +```bash +yarn add @dhtmlx/trial-react-scheduler +``` + +如果你已经使用 Professional 包，请在命令和导入中将 `@dhtmlx/trial-react-scheduler` 替换为 `@dhx/react-scheduler`。 + +运行开发服务器： + +~~~bash +npm run dev +~~~ + +:::note +为了让 Scheduler 占满整页，请从 `src/App.css` 中移除默认样式并添加： + +~~~css +#root { + margin: 0; + padding: 0; + height: 100%; + width: 100%; +} + +body { + margin: 0; +} +~~~ +::: + +## 配置 Redux 存储 + +创建 `src/redux/store.ts`。这里将 `scheduler` reducer 连接到 Redux 存储： + +~~~ts +import { configureStore } from "@reduxjs/toolkit"; +import schedulerReducer from "./schedulerSlice"; + +export const store = configureStore({ + reducer: { + scheduler: schedulerReducer, + }, +}); + +export type RootState = ReturnType; +export type AppDispatch = typeof store.dispatch; +~~~ + +## 定义共享类型 + +创建 `src/redux/types.ts`。这些类型在切片、动作和组件之间共用： + +~~~ts +export type SchedulerView = "day" | "week" | "month"; + +export interface SchedulerEvent { + id: string | number; + start_date: string; + end_date: string; + text: string; + + // Scheduler 可能在运行时附加额外字段（如自定义属性）。示例保持宽松。 + [key: string]: unknown; +} + +export type SchedulerConfig = Record; + +export interface SchedulerSnapshot { + events: SchedulerEvent[]; + config: SchedulerConfig; +} +~~~ + +- `SchedulerEvent` 使用索引签名，因此 Scheduler 可以在运行时附加额外字段。 +- `SchedulerSnapshot` 捕捉撤销/重做所需的数据（事件 + 配置）。 + +## 设置示例数据 + +在 `src/seed/data.ts` 中创建几个事件和初始 UI 状态。请注意 `currentDate` 以数字（时间戳）存储，以确保 Redux 状态可序列化。 + +~~~ts +export const seedEvents = [ + { id: 1, start_date: "2025-08-11T02:00:00Z", end_date: "2025-08-11T10:20:00Z", text: "Product Strategy Hike" }, + { id: 2, start_date: "2025-08-12T06:00:00Z", end_date: "2025-08-12T11:00:00Z", text: "Tranquil Tea Time" }, + { id: 3, start_date: "2025-08-15T03:00:00Z", end_date: "2025-08-15T08:00:00Z", text: "Demo and Showcase" }, +]; + +export const seedDate = Date.parse("2025-08-15T00:00:00Z"); +export const seedView = "week"; +~~~ + +:::note +配套演示包含额外的事件，以获得更丰富的视觉效果。 +::: + +## 定义 Scheduler 操作（创建/更新/删除） + +Scheduler 的编辑将通过 Redux 动作进行路由。创建 `src/redux/actions.ts`。 + +`createEvent` 操作使用一个 "prepare" 回调，从而能生成一个稳定的 ID（模拟后端生成的 ID）。我们还添加了一个小工具 (`dispatchAction`)，用于返回派发的有效载荷——这对 Scheduler 的 `data.save` 可以返回创建/更新的实体很有用。 + +~~~ts +import { createAction } from "@reduxjs/toolkit"; +import type { Dispatch } from "redux"; +import type { SchedulerEvent } from "./types"; + +// 模拟从后端接收一个 ID。 +const generateId = () => `id_${Date.now().toString()}`; + +export const createEvent = createAction( + "schedulerDomain/createEvent", + (eventData: Omit, "id">) => { + const newEvent: SchedulerEvent = { + ...(eventData as Omit), + id: generateId(), + }; + return { payload: newEvent }; + } +); + +export const deleteEvent = createAction( + "schedulerDomain/deleteEvent", + (id: SchedulerEvent["id"]) => ({ payload: id }) +); + +export const updateEvent = createAction( + "schedulerDomain/updateEvent", + (eventData: Partial & Pick) => ({ payload: eventData }) +); + +// Helper function to dispatch an action and return its payload consistently +export function dispatchAction( + dispatch: Dispatch, + actionCreator: (arg: Arg) => { type: string; payload: Payload }, + arg: Arg +): Payload { + return dispatch(actionCreator(arg)).payload; +} +~~~ + +## 创建 Redux 切片 + +现在创建 `src/redux/schedulerSlice.ts`。这份切片存储： + +- `events`（Scheduler 数据） +- `currentDate`（时间戳） +- `view` (`day | week | month`) +- `config`（Scheduler 配置对象，包括 `readonly`） +- `past` / `future`（用于撤销/重做的快照数组） + +撤销/重做直接通过包含快照的切片实现。在每个数据修改操作之前，`pushHistory` 会保存当前的事件和配置的快照。`undo` 和 `redo` reducers 会把当前状态与历史中的快照交换。 + +~~~ts +import { createSlice, type PayloadAction } from "@reduxjs/toolkit"; +import { seedEvents, seedDate, seedView } from "../seed/data"; +import { createEvent, deleteEvent, updateEvent } from "./actions"; +import type { SchedulerConfig, SchedulerEvent, SchedulerSnapshot, SchedulerView } from "./types"; + +interface SchedulerState { + events: SchedulerEvent[]; + currentDate: number; + view: SchedulerView; + config: SchedulerConfig; + + past: SchedulerSnapshot[]; + future: SchedulerSnapshot[]; + maxHistory: number; +} + +const deepCopy = (value: T): T => { + // JSON clone is sufficient for this demo: + // - events/config are plain objects + // - we want immutable snapshots for undo/redo + return JSON.parse(JSON.stringify(value)) as T; +}; + +const createSnapshot = (state: SchedulerState): SchedulerSnapshot => ({ + events: deepCopy(state.events), + config: deepCopy(state.config), +}); + +const pushHistory = (state: SchedulerState) => { + state.past.push(createSnapshot(state)); + + if (state.maxHistory > 0 && state.past.length > state.maxHistory) { + state.past.shift(); + } + + state.future = []; +}; + +const initialState: SchedulerState = { + events: seedEvents as unknown as SchedulerEvent[], + currentDate: seedDate, + view: seedView as SchedulerView, + config: {}, + + past: [], + future: [], + maxHistory: 50, +}; + +const schedulerSlice = createSlice({ + name: "scheduler", + initialState, + reducers: { + undo(state) { + if (state.past.length === 0) return; + + const previous = state.past[state.past.length - 1]; + const newFuture = createSnapshot(state as SchedulerState); + + state.events = previous.events; + state.config = previous.config; + state.past = state.past.slice(0, -1); + state.future = [newFuture, ...state.future]; + }, + redo(state) { + if (state.future.length === 0) return; + + const next = state.future[0]; + const newPast = createSnapshot(state as SchedulerState); + + state.events = next.events; + state.config = next.config; + state.future = state.future.slice(1); + state.past = [...state.past, newPast]; + }, + + // Navigation is not an undoable user action in this demo. + setCurrentDate(state, { payload }: PayloadAction) { + state.currentDate = payload; + }, + setView(state, { payload }: PayloadAction) { + state.view = payload; + }, + + updateConfig(state, { payload }: PayloadAction>) { + pushHistory(state as SchedulerState); + state.config = { ...state.config, ...payload }; + }, + }, + extraReducers: (builder) => { + builder + .addCase(createEvent, (state, action) => { + pushHistory(state as SchedulerState); + state.events.push(action.payload); + }) + .addCase(deleteEvent, (state, action) => { + pushHistory(state as SchedulerState); + state.events = state.events.filter((e) => String(e.id) !== String(action.payload)); + }) + .addCase(updateEvent, (state, action) => { + pushHistory(state as SchedulerState); + + const index = state.events.findIndex((e) => String(e.id) === String(action.payload.id)); + if (index !== -1) { + state.events[index] = { ...state.events[index], ...action.payload }; + } + }); + }, +}); + +export const { undo, redo, setCurrentDate, setView, updateConfig } = schedulerSlice.actions; +export default schedulerSlice.reducer; +~~~ + +## 构建控制工具栏组件 + +创建 `src/components/Toolbar.tsx`。这是一个简短的 MUI 工具栏，用于： + +- 切换视图（day/week/month） +- 向前/回到今天/向后导航 +- 撤销/重做 +- 开关只读模式 + +~~~tsx +import { ButtonGroup, Button, Typography, Stack, FormControlLabel, Switch } from "@mui/material"; +import UndoIcon from "@mui/icons-material/Undo"; +import RedoIcon from "@mui/icons-material/Redo"; +import React from "react"; +import type { SchedulerView } from "../redux/types"; + +export interface ToolbarProps { + currentView: SchedulerView; + currentDate: Date; + isReadOnly: boolean; + canUndo: boolean; + canRedo: boolean; + onUndo?: () => void; + onRedo?: () => void; + onNavigate?: (action: "prev" | "next" | "today") => void; + onReadOnlyChange?: (value: boolean) => void; + setView: (view: SchedulerView) => void; +} + +export default React.memo(function Toolbar({ + currentView, + currentDate, + isReadOnly, + canUndo, + canRedo, + onUndo, + onRedo, + onNavigate, + onReadOnlyChange, + setView, +}: ToolbarProps) { + return ( + + + {(["day", "week", "month"] as const).map((l) => ( + + ))} + + + + + + onReadOnlyChange?.(e.target.checked)} + inputProps={{ "aria-label": "Toggle read-only" }} + /> + } + /> + + + {new Date(currentDate)?.toLocaleDateString(undefined, { weekday: "short", month: "short", day: "numeric" })} + + + + + + + + ); +}); +~~~ + +## 将 Scheduler 连接到 Redux + +创建 `src/components/Scheduler.tsx`。该组件： + +- 从扁平化的 Redux 状态中读取 `events/view/currentDate/config` +- 暴露一个 `data.save` 回调来派发 Redux 动作 +- 从 `save` 返回创建/更新的实体，以便 Scheduler 可以同步其内部记账 +- 连接 `undo/redo` 和 `read-only` 配置开关 +- 隐藏内置导航栏，改用自定义工具栏 + +~~~tsx +import { useCallback, useMemo } from "react"; +import { useDispatch, useSelector } from "react-redux"; + +// Trial import: +// import ReactScheduler from "@dhtmlx/trial-react-scheduler"; +// import "@dhtmlx/trial-react-scheduler/dist/react-scheduler.css"; + +// Pro import: +import ReactScheduler from "@dhx/react-scheduler"; +import "@dhx/react-scheduler/dist/react-scheduler.css"; + +import Toolbar from "./Toolbar"; +import { redo, setCurrentDate, setView, undo, updateConfig } from "../redux/schedulerSlice"; +import { createEvent, updateEvent, deleteEvent, dispatchAction } from "../redux/actions"; +import type { AppDispatch, RootState } from "../redux/store"; +import type { SchedulerEvent, SchedulerView } from "../redux/types"; + +export default function ReactSchedulerReduxDemo() { + const dispatch = useDispatch(); + const { past, future, events, view, currentDate, config } = useSelector((s: RootState) => s.scheduler); + const canUndo = past.length > 0; + const canRedo = future.length > 0; + const activeDate = useMemo(() => new Date(currentDate), [currentDate]); + const isReadOnly = Boolean((config as { readonly?: unknown }).readonly); + + const handleDateNavigation = useCallback((action: "prev" | "next" | "today") => { + if (action === "today") { + dispatch(setCurrentDate(Date.now())); + return; + } + + const step = action === "next" ? 1 : -1; + const date = new Date(activeDate); + + if (view === "day") { + date.setDate(date.getDate() + step); + } else if (view === "week") { + date.setDate(date.getDate() + step * 7); + } else { + date.setMonth(date.getMonth() + step); + } + dispatch(setCurrentDate(date.getTime())); + }, [activeDate, view, dispatch]); + + // Scheduler <-> Redux data bridge + const dataBridge = useMemo(() => ({ + save: (entity: string, action: string, payload: unknown, id: unknown) => { + if (entity !== "event") return; + + switch (action) { + case "update": { + const eventData = payload && typeof payload === "object" ? (payload as Record) : {}; + const eventId = (eventData as Record).id ?? id; + if (eventId == null) { + console.warn("Update called without an id", { payload, id }); + return; + } + + const eventWithId = { ...eventData, id: eventId } as Partial & Pick; + return dispatchAction(dispatch, updateEvent, eventWithId); + } + case "create": + return dispatchAction(dispatch, createEvent, payload as Omit, "id">); + case "delete": { + const deleteId = + payload && typeof payload === "object" + ? (payload as Record).id ?? id + : payload ?? id; + if (deleteId == null) { + console.warn("Delete called without an id", { payload, id }); + return; + } + return dispatchAction(dispatch, deleteEvent, deleteId as SchedulerEvent["id"]); + } + default: + console.warn(`Unknown action: ${action}`); + return; + } + }, + }), [dispatch]); + + const handleViewChange = useCallback( + (mode: string, date: Date) => { + const nextView: SchedulerView = mode === "day" || mode === "week" || mode === "month" ? mode : "month"; + dispatch(setView(nextView)); + dispatch(setCurrentDate(date.getTime())); + }, + [dispatch] + ); + + const handleSetView = useCallback((nextView: SchedulerView) => dispatch(setView(nextView)), [dispatch]); + + const handleUndo = useCallback(() => dispatch(undo()), [dispatch]); + const handleRedo = useCallback(() => dispatch(redo()), [dispatch]); + const handleReadOnlyChange = useCallback( + (value: boolean) => dispatch(updateConfig({ readonly: value })), + [dispatch] + ); + const memoizedXY = useMemo(() => ({ nav_height: 0 }), []); + + return ( +
+ + + +
+ ); +} +~~~ + +## 将 Redux Provider 集成到应用 + +最后，用 Redux `Provider` 包装你的应用。更新 `src/App.tsx`： + +~~~tsx +import { Provider } from "react-redux"; +import { store } from "./redux/store"; +import Scheduler from "./components/Scheduler"; +import "./App.css"; + +function App() { + return ( + + + + ); +} + +export default App; +~~~ + +## 总结 + +现在你拥有一个由 Redux Toolkit 完全驱动的 React Scheduler： + +- Scheduler 从 Redux 读取 `events`、`view`、`currentDate` 和 `config` +- 用户编辑通过 `data.save` -> Redux 动作进行路由 +- UI 持续保持同步，因为 Scheduler 通过属性接收到更新的 `events` +- 撤销/重做通过直接在切片中集成的基于快照的历史实现 +- 一个只读配置开关让你锁定 Scheduler，避免编辑 + +## 接下来 + +- 回顾本示例背后的概念，参阅 [Data Binding & State Management Basics](integrations/react/state/state-management-basics.md) +- 探索 Scheduler 的配置和模板选项，参阅 [React Scheduler 概览](integrations/react/overview.md) +- 通过派发异步 thunk 并相应更新切片，添加持久化（从 API 载入/保存事件） +- 以同一模式探索其他状态管理器： + - [使用 React Scheduler 与 MobX](integrations/react/state/mobx.md) + - [使用 React Scheduler 与 XState](integrations/react/state/xstate.md) + - [使用 React Scheduler 与 Zustand](integrations/react/state/zustand.md) + - [使用 React Scheduler 与 Valtio](integrations/react/state/valtio.md) + - [使用 React Scheduler 与 Jotai](integrations/react/state/jotai.md) \ No newline at end of file diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/integrations/react/state/state-management-basics.md b/i18n/zh/docusaurus-plugin-content-docs/current/integrations/react/state/state-management-basics.md new file mode 100644 index 00000000..1112ac58 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/integrations/react/state/state-management-basics.md @@ -0,0 +1,301 @@ +--- +title: React Scheduler 数据绑定与状态管理基础 +sidebar_label: 基础 +description: "概述 React Scheduler 中的两种数据绑定模型以及 React 状态和状态管理器的基线模式。" +--- + +# React Scheduler 数据绑定与状态管理 + +React Scheduler 支持两种数据绑定模式： + +1. **以 React 状态作为数据源（推荐）**（适用于大多数 React 应用） +2. **Scheduler 作为数据源**（适用于专门的、高吞吐量场景） + +两种模型都是有效的。每个屏幕选择一个模型并保持一致。 + +如果你还没有渲染出一个基础图表，请从 [Quick Start](integrations/react/quick-start.md) 开始。 + +## 数据模型 + +### 以 React 状态为数据源（推荐） + +在这种模型中： + +- 你将 `events`（以及通常的 `view` / `date`）保存在 React 状态或状态管理器中 +- 将该状态传递给 `` 的 props +- 当用户编辑数据时，Scheduler 调用 `data.save` / `data.batchSave` +- 你更新状态，React 会用新 props 重新渲染 Scheduler + +当其他 React 组件必须与 Scheduler 数据保持同步时使用。 + +### Scheduler 作为数据源 + +在这种模型中： + +- Scheduler 在内部加载并变更数据 +- 你可选择向后端端点转发编辑 +- React 不会将每一次事件更新都镜像到状态中 + +当 React 不需要立即反映每一个 Scheduler 的改变时使用。 + +## 以 React 状态为数据源 {#reactstateasthesourceoftruth} + +### 最小示例 + +```tsx +import { useMemo, useState } from "react"; +import ReactScheduler, { type Event } from "@dhtmlx/trial-react-scheduler"; +import "@dhtmlx/trial-react-scheduler/dist/react-scheduler.css"; + +import { seedEvents } from "./seed/data"; + +export default function ReactStateScheduler() { + const [events, setEvents] = useState(seedEvents); + + const data = useMemo( + () => ({ + save: (entity: string, action: string, item: Event, id: string | number) => { + if (entity !== "event") return; + + if (action === "create") { + setEvents((prev) => [...prev, item]); + return; + } + + if (action === "update") { + setEvents((prev) => prev.map((e) => (e.id === id ? item : e))); + return; + } + + if (action === "delete") { + setEvents((prev) => prev.filter((e) => e.id !== id)); + } + }, + }), + [] + ); + + return ( +
+ +
+ ); +} +``` + +这种模式使 React 成为事件数据的权威所有者。 + +## 使用 `data.save` 处理更新 {#handlingchangeswithdatasave} + +`data.save` 会在每次用户变更时被调用： + +```ts +(entity: string, action: string, item: any, id: string | number) => void | Promise +``` + +对于 Scheduler 的事件增删改查： + +- `entity` 是 `"event"` +- `action` 是 `"create" | "update" | "delete"` +- `item` 是创建/更新/删除的事件 +- `id` 是受影响的事件 id + +### 面向后端的示例 + +```tsx +const data = { + save: async (entity: string, action: string, item: any, id: string | number) => { + if (entity !== "event") return; + + if (action === "create") { + const response = await fetch("/api/events", { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify(item), + }); + + const created = await response.json(); + return { id: created.id }; + } + + if (action === "update") { + await fetch(`/api/events/${id}`, { + method: "PUT", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify(item), + }); + return; + } + + if (action === "delete") { + await fetch(`/api/events/${id}`, { method: "DELETE" }); + } + }, +}; +``` + +如果后端在创建时替换临时 ID，请返回 `{ id: realId }`，以便 Scheduler 能够对客户端和服务器的 ID 进行对齐。 + +## 使用 `data.batchSave` 进行批量更新 + +`data.batchSave` 在短时间内发出大量变更时很有用（例如密集编辑会话）。 + +在你想要： + +- 通过分组发送变更来减少请求次数 +- 在一个 reducer/store 事务中处理更新 + +```tsx + { + await fetch("/api/events/batch", { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify(changes), + }); + }, + }} +/> +``` + +对简单的逐变更逻辑使用 `save`，对分组同步使用 `batchSave`。 + +## 将数据加载到 React 状态 + +在 React 驱动模型中，Scheduler 从 React 状态获取数据。常见来源： + +- 本地组件状态 +- 全局状态管理器（Redux Toolkit、Zustand、MobX、XState、Jotai、Valtio） +- API 调用 + +### 本地状态来源 + +```tsx +import { useState } from "react"; +import ReactScheduler, { type Event } from "@dhtmlx/trial-react-scheduler"; +import { seedEvents, seedView, seedDate } from "./seed/data"; + +export default function LocalStateExample() { + const [events] = useState(seedEvents); + + return ( + + ); +} +``` + +### 状态管理器来源 + +每个库遵循相同的流程： + +- selector/hook 读取状态 +- props 将 Scheduler 提供 +- `data.save` 派发动作/存储变更 + +```tsx +const events = useSchedulerStore((s) => s.events); +const onSave = useSchedulerStore((s) => s.handleSave); + +; +``` + +状态管理器教程： + +- [Using React Scheduler with Redux Toolkit](integrations/react/state/redux-toolkit.md) +- [Using React Scheduler with Zustand](integrations/react/state/zustand.md) +- [Using React Scheduler with MobX](integrations/react/state/mobx.md) +- [Using React Scheduler with XState](integrations/react/state/xstate.md) +- [Using React Scheduler with Jotai](integrations/react/state/jotai.md) +- [Using React Scheduler with Valtio](integrations/react/state/valtio.md) + +### API 加载来源 + +```tsx +import { useEffect, useState } from "react"; +import ReactScheduler, { type Event } from "@dhtmlx/trial-react-scheduler"; + +export default function SchedulerWithApi() { + const [events, setEvents] = useState(null); + + useEffect(() => { + let disposed = false; + + (async () => { + const response = await fetch("/api/events"); + const payload = await response.json(); + if (!disposed) setEvents(payload.events || []); + })(); + + return () => { + disposed = true; + }; + }, []); + + if (!events) return
Loading Scheduler...
; + + return ; +} +``` + +## Scheduler 作为数据源 {#schedulerasthesourceoftruth} + +在此模式下，React 渲染组件，但不持有事件的权威数据状态。 + +### URL 传输示例 + +```tsx + +``` + +### 回调传输示例 + +```tsx + { + const response = await fetch("/api/scheduler/load"); + return response.json(); + }, + save: async (entity, action, item, id) => { + await fetch("/api/scheduler/save", { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ entity, action, item, id }), + }); + }, + }} +/> +``` + +当 Scheduler 可以作为主要运行时存储，且 React 不需要渲染每一个更新时，使用这种方法。 + +## 选择合适的模型 + +使用 **React 驱动** 模型时： + +- 多个 React 组件依赖 Scheduler 数据 +- 你需要可预测的全局状态集成 +- 你希望在应用状态中实现简单的撤销/重做 + +使用 **Scheduler 驱动** 模型时： + +- React 主要是外壳/布局 +- 你偏好 Scheduler 管理的运行时变更 +- 服务器传输是主要的同步机制 + +## 下一步 + +- [React Scheduler 概览](integrations/react/overview.md#bindingdata) +- [React Scheduler 配置](integrations/react/configuration-props.md) +- [服务器集成](guides/server-integration.md) \ No newline at end of file diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/integrations/react/state/valtio.md b/i18n/zh/docusaurus-plugin-content-docs/current/integrations/react/state/valtio.md new file mode 100644 index 00000000..3e3d002f --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/integrations/react/state/valtio.md @@ -0,0 +1,587 @@ +--- +sidebar_label: Valtio +title: 使用 Valtio 的 React Scheduler +description: 使用 Valtio 代理存储管理 React Scheduler 的状态，通过 data.save 应用用户编辑，并添加基于快照的撤销/重做。 +--- + +# React Scheduler - Valtio 教程 + +本教程展示如何在一个 Vite + React + TypeScript 应用中渲染 **React Scheduler**，并使用 **Valtio** 管理其状态。你将把事件、当前日期和活动视图保存在一个 Valtio 代理存储中，然后通过 Scheduler 的 `data.save` 回调将用户编辑路由到存储处理函数。 + +到教程结束时，你将得到一个具备以下特征的 Scheduler： + +- 可复用的工具栏（视图切换、日期导航、撤销/重做、只读开关） +- 由存储驱动的事件 CRUD（创建/更新/删除） +- 基于快照的撤销/重做（事件 + 配置） + +:::note +完整的源代码可在 GitHub 上查看：[GitHub 演示仓库](https://github.com/nicetip/react-scheduler-valtio-starter)。 +::: + +## 前提条件 + +- React + TypeScript 基础 +- Vite 基础 +- 对 Valtio 的基本了解 +- 推荐：在 [React Scheduler 文档：数据绑定](integrations/react/state/state-management-basics.md) 中了解 React Scheduler 的数据绑定和 `data.save` + +## 创建一个项目 + +创建一个 Vite + React + TypeScript 项目： + +~~~bash +npm create vite@latest scheduler-valtio-demo -- --template react-ts +cd scheduler-valtio-demo +~~~ + +## 安装依赖 + +本教程使用： + +- **Valtio** 作为状态管理 +- **Material UI** 作为工具栏 UI + +安装包： + +~~~bash +npm install valtio @mui/material @mui/icons-material @emotion/react @emotion/styled +~~~ + +如果你使用 Yarn： + +~~~bash +yarn add valtio @mui/material @mui/icons-material @emotion/react @emotion/styled +~~~ + +## 安装 React Scheduler + +按照 [React Scheduler 安装指南](integrations/react/installation.md) 的说明安装 React Scheduler。 + +在本教程中我们使用评估包： + +```bash +npm install @dhtmlx/trial-react-scheduler +``` + +或 + +```bash +yarn add @dhtmlx/trial-react-scheduler +``` + +如果你已经使用 Professional 包，请在命令行和导入处将 `@dhtmlx/trial-react-scheduler` 替换为 `@dhx/react-scheduler`。 + +## 准备应用样式 + +React Scheduler 需要一个高度确定的父容器。将 `src/App.css` 的默认样式替换为： + +~~~css title="src/App.css" +#root { + margin: 0; + padding: 0; + height: 100%; + width: 100%; +} +~~~ + +## 添加种子数据 + +在 `src/seed/data.ts` 中创建一个小型数据集以及默认视图/日期： + +~~~ts title="src/seed/data.ts" +export const seedEvents = [ + { + id: 1, + start_date: "2025-08-11T02:00:00Z", + end_date: "2025-08-11T10:20:00Z", + text: "Product Strategy Hike", + }, + { + id: 2, + start_date: "2025-08-12T06:00:00Z", + end_date: "2025-08-12T11:00:00Z", + text: "Tranquil Tea Time", + }, + { + id: 3, + start_date: "2025-08-15T03:00:00Z", + end_date: "2025-08-15T08:00:00Z", + text: "Demo and Showcase", + }, + { + id: 4, + start_date: "2025-08-12T11:30:00Z", + end_date: "2025-08-12T19:00:00Z", + text: "Sprint Review and Retreat", + }, +]; + +export const seedDate = Date.parse("2025-08-15T00:00:00Z"); + +export type SchedulerView = "day" | "week" | "month"; +export const seedView: SchedulerView = "week"; +~~~ + +:::note +伴生演示包含额外的事件以实现更丰富的视觉效果。 +::: + +## 创建 Valtio 存储 + +创建 `src/store.ts`。该存储拥有： + +- `events`（传递给 Scheduler 的事件数组） +- `currentDate` 与 `view`（也作为属性传入） +- `config`（Scheduler 配置对象，包括 `readonly`） +- `_past` / `_future` 历史栈用于撤销/重做历史 + +关键之处在于 **基于快照的历史记录**：我们存放深拷贝的快照，以确保撤销/重做不会保持对可变数组的引用。导航（`setCurrentDate`/`setView`）有意设为不可撤销 — 只有修改数据的操作（CRUD、配置更改）才会推进历史栈。 + +~~~ts title="src/store.ts" +import { proxy, snapshot } from "valtio"; +import { seedEvents, seedView, seedDate, type SchedulerView } from "./seed/data"; + +export type SchedulerEvent = { + id: string | number; + start_date: string; + end_date: string; + text: string; + [key: string]: unknown; +}; + +export type SchedulerConfig = Record; + +type HistorySnapshot = { + events: SchedulerEvent[]; + config: SchedulerConfig; +}; + +const deepClone = (value: T): T => { + if (typeof structuredClone === "function") { + return structuredClone(value); + } + + return JSON.parse(JSON.stringify(value)) as T; +}; + +const normalizeId = (value: unknown) => String(value); + +export const createSchedulerStore = () => { + const state = proxy({ + events: seedEvents as SchedulerEvent[], + currentDate: seedDate as number, + view: seedView as SchedulerView, + config: {} as SchedulerConfig, + + // Undo/redo history stacks and capacity + _past: [] as HistorySnapshot[], + _future: [] as HistorySnapshot[], + _cap: 50, + }); + + const getHistorySnapshot = (): HistorySnapshot => { + const snap = snapshot(state); + + return { + events: deepClone(snap.events as SchedulerEvent[]), + config: deepClone(snap.config as SchedulerConfig), + }; + }; + + const recordHistory = () => { + const snapshotItem = getHistorySnapshot(); + + state._past = [...state._past.slice(-state._cap + 1), snapshotItem]; + state._future = []; + }; + + const actions = { + updateEvent: (payload: Partial & { id?: string | number }) => { + const payloadId = payload.id; + + if (payloadId === undefined || payloadId === null) { + return; + } + + recordHistory(); + const normalizedPayloadId = normalizeId(payloadId); + + state.events = state.events.map((eventItem) => { + if (normalizeId(eventItem.id) !== normalizedPayloadId) { + return eventItem; + } + + return { ...eventItem, ...payload, id: eventItem.id }; + }); + }, + + createEvent: (payload: Partial) => { + recordHistory(); + + const newEventId = `id_${Date.now().toString()}`; + const newEvent = { ...payload, id: newEventId } as SchedulerEvent; + + state.events = [...state.events, newEvent]; + return newEvent; + }, + + deleteEvent: (id: string | number) => { + recordHistory(); + const normalizedId = normalizeId(id); + + state.events = state.events.filter((eventItem) => { + return normalizeId(eventItem.id) !== normalizedId; + }); + }, + + // Navigation is not an undoable user action in this demo. + setCurrentDate: (date: number) => { + state.currentDate = date; + }, + + // Navigation is not an undoable user action in this demo. + setView: (view: SchedulerView) => { + state.view = view; + }, + + updateConfig: (partial: Partial) => { + recordHistory(); + state.config = { ...state.config, ...partial }; + }, + + undo: () => { + if (state._past.length === 0) return; + + const previous = state._past[state._past.length - 1]; + const current = getHistorySnapshot(); + + state._past = state._past.slice(0, -1); + state._future = [current, ...state._future]; + + state.events = previous.events; + state.config = previous.config; + }, + + redo: () => { + if (state._future.length === 0) return; + + const next = state._future[0]; + const current = getHistorySnapshot(); + + state._future = state._future.slice(1); + state._past = [...state._past.slice(-state._cap + 1), current]; + + state.events = next.events; + state.config = next.config; + }, + }; + + return { state, actions }; +}; + +export const schedulerStore = createSchedulerStore(); +export default schedulerStore; +~~~ + +## 创建一个可复用的工具栏 + +创建 `src/components/Toolbar.tsx`。这是一个小型的 MUI 工具栏，用于： + +- 切换视图（day/week/month） +- 导航上一个/当天/下一个 +- 撤销/重做 +- 切换只读模式 + +~~~tsx title="src/components/Toolbar.tsx" +import { ButtonGroup, Button, Typography, Stack, FormControlLabel, Switch } from "@mui/material"; +import UndoIcon from "@mui/icons-material/Undo"; +import RedoIcon from "@mui/icons-material/Redo"; +import React from "react"; + +import type { SchedulerView } from "../seed/data"; + +export interface ToolbarProps { + currentView: SchedulerView; + currentDate: Date; + isReadOnly: boolean; + canUndo: boolean; + canRedo: boolean; + onUndo?: () => void; + onRedo?: () => void; + onNavigate?: (action: "prev" | "next" | "today") => void; + onReadOnlyChange?: (value: boolean) => void; + setView: (view: SchedulerView) => void; +} + +export default React.memo(function Toolbar({ + currentView, + currentDate, + isReadOnly, + canUndo, + canRedo, + onUndo, + onRedo, + onNavigate, + onReadOnlyChange, + setView, +}: ToolbarProps) { + return ( + + + {(["day", "week", "month"] as const).map((l) => ( + + ))} + + + + + + onReadOnlyChange?.(e.target.checked)} + inputProps={{ "aria-label": "Toggle read-only" }} + /> + } + /> + + + {new Date(currentDate)?.toLocaleDateString(undefined, { weekday: "short", month: "short", day: "numeric" })} + + + + + + + + ); +}); +~~~ + +## 渲染 React Scheduler 并将其连接到 Valtio + +创建 `src/components/Scheduler.tsx`。该组件： + +- 通过 `useSnapshot` 订阅 Valtio 代理 +- 将 `events`、`date`、`view` 和 `config` 作为 React Scheduler 的属性传递 +- 使用带有 `switch/case` 的桥接实现 `data.save`，将变更路由到存储的动作 +- 连接 `undo/redo` 与 `read-only` 配置开关 +- 隐藏内置导航栏，改用自定义工具栏 + +~~~tsx title="src/components/Scheduler.tsx" +import { useCallback, useMemo } from "react"; + +// Trial import: +import ReactScheduler from "@dhtmlx/trial-react-scheduler"; +import "@dhtmlx/trial-react-scheduler/dist/react-scheduler.css"; + +// Pro import: +// import ReactScheduler from "@dhx/react-scheduler"; +// import "@dhx/react-scheduler/dist/react-scheduler.css"; + +import { useSnapshot } from "valtio"; + +import Toolbar from "./Toolbar"; +import schedulerStore from "../store"; +import type { SchedulerEvent } from "../store"; +import type { SchedulerView } from "../seed/data"; + +export default function DemoValtioScheduler() { + const snap = useSnapshot(schedulerStore.state); + + const canUndo = snap._past.length > 0; + const canRedo = snap._future.length > 0; + const isReadOnly = Boolean((snap.config as { readonly?: unknown }).readonly); + + const activeDate = useMemo(() => { + return new Date(snap.currentDate); + }, [snap.currentDate]); + + const handleSetCurrentDate = useCallback((date: number) => { + schedulerStore.actions.setCurrentDate(date); + }, []); + + const handleSetView = useCallback((view: SchedulerView) => { + schedulerStore.actions.setView(view); + }, []); + + const handleUndo = useCallback(() => { + schedulerStore.actions.undo(); + }, []); + + const handleRedo = useCallback(() => { + schedulerStore.actions.redo(); + }, []); + + const handleReadOnlyChange = useCallback((value: boolean) => { + schedulerStore.actions.updateConfig({ readonly: value }); + }, []); + + const handleDateNavigation = useCallback( + (action: "prev" | "next" | "today") => { + if (action === "today") { + handleSetCurrentDate(Date.now()); + return; + } + + const step = action === "next" ? 1 : -1; + const date = new Date(snap.currentDate); + + if (snap.view === "day") { + date.setDate(date.getDate() + step); + } else if (snap.view === "week") { + date.setDate(date.getDate() + step * 7); + } else { + date.setMonth(date.getMonth() + step); + } + + handleSetCurrentDate(date.getTime()); + }, + [handleSetCurrentDate, snap.currentDate, snap.view] + ); + + // Scheduler <-> Valtio data bridge + const dataBridge = useMemo(() => { + return { + save: (entity: string, action: string, payload: unknown, id: unknown) => { + if (entity !== "event") return; + + switch (action) { + case "update": { + const eventData = payload && typeof payload === "object" ? (payload as Record) : {}; + const eventId = (eventData as Record).id ?? id; + if (eventId == null) { + console.warn("Update called without an id", { payload, id }); + return; + } + + const eventWithId = { ...eventData, id: eventId } as Partial & Pick; + return schedulerStore.actions.updateEvent(eventWithId); + } + case "create": + return schedulerStore.actions.createEvent(payload as Omit, "id">); + case "delete": { + const deleteId = + payload && typeof payload === "object" + ? (payload as Record).id ?? id + : payload ?? id; + if (deleteId == null) { + console.warn("Delete called without an id", { payload, id }); + return; + } + return schedulerStore.actions.deleteEvent(deleteId as SchedulerEvent["id"]); + } + default: + console.warn(`Unknown action: ${action}`); + return; + } + }, + }; + }, []); + + const handleViewChange = useCallback( + (mode: string, date: Date) => { + const nextView: SchedulerView = mode === "day" || mode === "week" || mode === "month" ? mode : "month"; + schedulerStore.actions.setView(nextView); + schedulerStore.actions.setCurrentDate(date.getTime()); + }, + [] + ); + + const memoizedXY = useMemo(() => ({ nav_height: 0 }), []); + + return ( +
+ + + +
+ ); +} +~~~ + +## 挂载 Scheduler + +更新 `src/App.tsx`： + +~~~tsx title="src/App.tsx" +import Scheduler from "./components/Scheduler"; +import "./App.css"; + +function App() { + return ; +} + +export default App; +~~~ + +## 运行应用 + +启动开发服务器： + +~~~bash +npm run dev +~~~ + +或者： + +~~~bash +yarn dev +~~~ + +## 摘要 + +在本教程中你已经： + +- 创建了一个 Vite + React 项目 +- 在确定高度的容器中渲染 React Scheduler +- 将 `events`、`view`、`currentDate` 和 `config` 在单个 Valtio 代理存储中建模 +- 使用 `_past`/`_future` 堆栈实现基于快照的撤销/重做（事件 + 配置） +- 将所有 Scheduler 的变更通过 `data.save` 路由到存储的动作 +- 添加了一个只读开关，使 Scheduler 无法编辑 + +这使 Scheduler 组件保持声明式（state -> props），而存储拥有所有变更逻辑和历史记录。 + +## 下一步 + +- 参考 React Scheduler 文档中的 [数据绑定]（Binding Data）来了解两种受支持的数据绑定模型：[Using React Scheduler with Redux Toolkit](integrations/react/state/redux-toolkit.md)（将其替换为中文标题） +- 通过使用 `templates` 属性添加自定义模板和 UI +- 将同样的模式应用到其他状态管理器上： + - [在 Redux Toolkit 中使用 React Scheduler](integrations/react/state/redux-toolkit.md) + - [MobX 的 React Scheduler](integrations/react/state/mobx.md) -> 使用 MobX 的 React Scheduler + - [XState 的 React Scheduler](integrations/react/state/xstate.md) -> 使用 XState 的 React Scheduler + - [Zustand 的 React Scheduler](integrations/react/state/zustand.md) -> 使用 Zustand 的 React Scheduler + - [Jotai 的 React Scheduler](integrations/react/state/jotai.md) -> 使用 Jotai 的 React Scheduler \ No newline at end of file diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/integrations/react/state/xstate.md b/i18n/zh/docusaurus-plugin-content-docs/current/integrations/react/state/xstate.md new file mode 100644 index 00000000..d2b573a6 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/integrations/react/state/xstate.md @@ -0,0 +1,549 @@ +--- +title: React Scheduler - XState 教程 +sidebar_label: XState +description: "将 React Scheduler 与 XState 集成。涵盖在状态机中对调度程序状态的建模、通过 data.save 进行 CRUD 操作，以及添加撤销/重做和自定义导航。" +--- + +# React Scheduler - XState 教程 + +本教程演示如何将 **DHTMLX React Scheduler** 连接到一个 **XState** 状态机。你将把事件和 UI 状态（视图/日期/配置）保存在状态机中，通过 `data.save` 将 Scheduler 编辑路由，并添加 **撤销/重做**，采用基于快照的历史记录。 + +:::note +完整源代码可在 [GitHub 上查看](https://github.com/DHTMLX/react-scheduler-xstate-starter)。 +::: + +## 前提条件 + +- Node.js（推荐 LTS 版本） +- React + TypeScript 基础 +- XState 基础知识（状态机、事件、动作）。若需要快速回顾，请参阅 XState 文档：https://stately.ai/docs/xstate + +## 快速设置 - 创建项目 + +创建一个 Vite + React + TS 项目： + +~~~bash +npm create vite@latest scheduler-xstate-demo -- --template react-ts +cd scheduler-xstate-demo +npm install +~~~ + +安装 XState + React 绑定： + +~~~bash +npm install xstate @xstate/react +~~~ + +安装 Material UI（用于演示工具栏）： + +~~~bash +npm install @mui/material @mui/icons-material @emotion/react @emotion/styled +~~~ + +### 安装 React Scheduler + +按照 [React Scheduler 安装指南](integrations/react/installation.md) 的描述安装 React Scheduler。 + +在本教程中，我们使用评估包： + +```bash +npm install @dhtmlx/trial-react-scheduler +``` + +或者 + +```bash +yarn add @dhtmlx/trial-react-scheduler +``` + +如果你已经使用 Professional 包，请在命令和导入中把 `@dhtmlx/trial-react-scheduler` 替换为 `@dhx/react-scheduler`。 + +运行开发服务器： + +~~~bash +npm run dev +~~~ + +:::note +若希望 Scheduler 充满整页，请移除 `src/App.css` 的默认样式并添加： + +~~~css +#root { + margin: 0; + padding: 0; + height: 100%; + width: 100%; +} + +body { + margin: 0; +} +~~~ +::: + +## 设置示例数据 + +在 `src/seed/data.ts` 中创建若干事件和初始 UI 状态。请注意，`date` 以 **数字**（时间戳）存储，以确保机器上下文可序列化。 + +~~~ts title="src/seed/data.ts" +export type SchedulerView = "day" | "week" | "month"; +export type SchedulerConfig = Record; + +export interface SchedulerEvent { + id: string | number; + start_date: string; + end_date: string; + text: string; + [key: string]: unknown; +} + +export const seedEvents: SchedulerEvent[] = [ + { id: 1, classname: "blue", start_date: "2025-08-11T02:00:00Z", end_date: "2025-08-11T10:20:00Z", text: "Product Strategy Hike" }, + { id: 2, classname: "violet", start_date: "2025-08-12T06:00:00Z", end_date: "2025-08-12T11:00:00Z", text: "Tranquil Tea Time" }, + { id: 3, classname: "blue", start_date: "2025-08-15T03:00:00Z", end_date: "2025-08-15T08:00:00Z", text: "Demo and Showcase" }, +]; + +export const seedDate = Date.parse("2025-08-15T00:00:00Z"); +export const seedView: SchedulerView = "week"; +~~~ + +- `SchedulerEvent` 使用索引签名，以便 Scheduler 可以在运行时附加额外字段。 + +:::note +伴随示例演示包含带颜色类的附加事件，以获得更丰富的视觉效果。 +::: + +## 设置 XState 机器 + +创建 `src/machine.ts`。该机器存储： + +- `events`（调度数据） +- `date`（时间戳） +- `view`（`day | week | month`） +- `config`（调度配置对象） +- `past` / `future`（用于撤销/重做的快照数组） + +撤销/重做直接通过快照集成到机器中。在每次修改数据的操作之前，`saveToHistory` 会保存当前的事件、视图和日期的快照。`undo` 与 `redo` 转换会从历史记录中对当前状态进行替换。 + +~~~ts title="src/machine.ts" +import { createMachine, assign } from "xstate"; +import { + seedEvents, + seedView, + seedDate, + type SchedulerView, + type SchedulerEvent, + type SchedulerConfig, +} from "./seed/data"; + +export interface SchedulerMachineContext { + events: SchedulerEvent[]; + view: SchedulerView; + date: number; + config: SchedulerConfig; + past: SchedulerSnapshot[]; + future: SchedulerSnapshot[]; + maxHistory: number; +} + +interface SchedulerSnapshot { + events: SchedulerEvent[]; + view: SchedulerView; + date: number; +} + +type SchedulerMachineEvent = + | { type: "SET_VIEW"; view: SchedulerView } + | { type: "SET_DATE"; date: number } + | { type: "CREATE_EVENT"; event: SchedulerEvent } + | { type: "UPDATE_EVENT"; event: SchedulerEvent } + | { type: "DELETE_EVENT"; id: string | number } + | { type: "UNO" } // 这里是 UNO 还是 UNDO，请保持原文 + | { type: "REDO" }; + +const deepClone = (value: T): T => { + if (typeof structuredClone === "function") { + return structuredClone(value); + } + return JSON.parse(JSON.stringify(value)) as T; +}; + +const takeSnapshot = (ctx: SchedulerMachineContext): SchedulerSnapshot => ({ + events: deepClone(ctx.events), + view: ctx.view, + date: ctx.date, +}); + +export const schedulerMachine = createMachine({ + id: "scheduler", + types: { + context: {} as SchedulerMachineContext, + events: {} as SchedulerMachineEvent, + }, + context: { + events: seedEvents, + view: seedView, + date: seedDate, + config: {}, + past: [], + future: [], + maxHistory: 50, + }, + initial: "ready", + states: { + ready: { + on: { + SET_VIEW: { actions: ['saveToHistory', 'setView'] }, + SET_DATE: { actions: ['saveToHistory', 'setDate'] }, + CREATE_EVENT: { actions: ['saveToHistory', 'createEvent'] }, + UPDATE_EVENT: { actions: ['saveToHistory', 'updateEvent'] }, + DELETE_EVENT: { actions: ['saveToHistory', 'deleteEvent'] }, + UNDO: { + guard: ({ context }) => context.past.length > 0, + actions: ['undo'] + }, + REDO: { + guard: ({ context }) => context.future.length > 0, + actions: ['redo'] + }, + } + } + }, +}, + { + actions: { + saveToHistory: assign({ + past: ({ context }) => { + const newPast = [...context.past, takeSnapshot(context)]; + if (newPast.length > context.maxHistory) { + newPast.shift(); + } + return newPast; + }, + future: () => [], + }), + setView: assign({ + view: ({ event }) => (event as { type: "SET_VIEW"; view: SchedulerView }).view + }), + setDate: assign({ + date: ({ event }) => (event as { type: "SET_DATE"; date: number }).date + }), + createEvent: assign({ + events: ({ context, event }) => { + const newId = `id_${Date.now()}`; + const newEvent = { ...(event as { type: "CREATE_EVENT"; event: SchedulerEvent }).event, id: newId }; + return [...context.events, newEvent]; + } + }), + updateEvent: assign({ + events: ({ context, event }) => + context.events.map(ev => + String(ev.id) === String((event as { type: "UPDATE_EVENT"; event: SchedulerEvent }).event.id) + ? { ...ev, ...(event as { type: "UPDATE_EVENT"; event: SchedulerEvent }).event } + : ev + ) + }), + deleteEvent: assign({ + events: ({ context, event }) => + context.events.filter(ev => String(ev.id) !== String((event as { type: "DELETE_EVENT"; id: string | number }).id)) + }), + undo: assign(({ context }) => { + const currentState = takeSnapshot(context); + const previousState = context.past[context.past.length - 1]; + const newPast = context.past.slice(0, -1); + const newFuture = [currentState, ...context.future]; + + return { + ...previousState, + past: newPast, + future: newFuture, + }; + }), + redo: assign(({ context }) => { + const currentState = takeSnapshot(context); + const nextState = context.future[0]; + const newFuture = context.future.slice(1); + const newPast = [...context.past, currentState]; + + return { + ...nextState, + past: newPast, + future: newFuture, + }; + }) + } + } +); +~~~ + +此时，该机器提供了： + +- 用于 Scheduler 属性的单一状态来源 +- 基于快照的撤销/重做（历史记录包含拷贝而非引用） +- 一个单一的 `SET_DATE` 事件 — 导航逻辑（上一页/下一页/今天）位于组件中 + +:::tip +如果目标浏览器是现代浏览器，`deepClone()` 帮助函数已经优先使用 `structuredClone()`，并在较老的环境中回退到 JSON 克隆。 +::: + +## 构建控制工具栏组件 + +创建 `src/components/Toolbar.tsx`。这是一个小型的 MUI 工具栏，用于： + +- 切换视图（day/week/month） +- 导航 上一页/今天/下一页 +- 撤销/重做，并在历史为空时禁用 + +~~~tsx title="src/components/Toolbar.tsx" +import { ButtonGroup, Button, Typography, Stack } from '@mui/material'; +import UndoIcon from '@mui/icons-material/Undo'; +import RedoIcon from '@mui/icons-material/Redo'; +import React from 'react'; +import type { SchedulerView } from "../seed/data"; + +export interface ToolbarProps { + currentView: SchedulerView; + currentDate: Date; + canUndo: boolean; + canRedo: boolean; + onUndo?: () => void; + onRedo?: () => void; + onNavigate?: (action: 'prev' | 'next' | 'today') => void; + setView: (view: SchedulerView) => void; +} + +export default React.memo(function Toolbar({ currentView, currentDate, canUndo, canRedo, onUndo, onRedo, onNavigate, setView }: ToolbarProps) { + return ( + + + {(["day", "week", "month"] as const).map(l => ( + + ))} + + + + + + + {new Date(currentDate)?.toLocaleDateString(undefined, { weekday: "short", month: "short", day: "numeric" })} + + + + + + + + ); +}); +~~~ + +## 将 Scheduler 连接到 XState + +创建 `src/components/Scheduler.tsx`。该组件： + +- 从 XState 机器上下文读取 `events`/`view`/`date`/`config` +- 暴露一个 `data.save` 回调，将 Scheduler 的操作转换为机器事件 +- 连接 `undo/redo` 与 导航 +- 隐藏内置导航栏，使用自定义工具栏 +- 通过 `event_class` 模板将颜色类应用到事件 + +~~~tsx title="src/components/Scheduler.tsx" +import { useCallback, useMemo } from "react"; +import { useMachine } from "@xstate/react"; +import ReactScheduler from "@dhtmlx/trial-react-scheduler"; +import "@dhtmlx/trial-react-scheduler/dist/react-scheduler.css"; +import "./styles.css"; +import Toolbar from "./Toolbar"; +import { schedulerMachine } from "../machine"; +import { type SchedulerView } from "../seed/data"; + +export default function DemoXStateScheduler() { + const [state, send] = useMachine(schedulerMachine); + + const canUndo = state.context.past.length > 0; + const canRedo = state.context.future.length > 0; + const activeDate = useMemo(() => new Date(state.context.date), [state.context.date]); + + const templates = useMemo(() => ({ + event_class: (_start: Date, _end: Date, event: Record | null) => { + if (event == null) { + return ""; + } + if (typeof event.classname === "string") { + return event.classname; + } + return ""; + } + }), []); + + const data = useMemo(() => ({ + save: (entity: string, action: string, payload: Record, id: string | number) => { + if (entity !== "event") { + return; + } + switch (action) { + case "create": + send({ type: "CREATE_EVENT", event: payload as never }); + break; + case "update": + send({ type: "UPDATE_EVENT", event: payload as never }); + break; + case "delete": + send({ type: "DELETE_EVENT", id }); + break; + default: + console.warn(`Unhandled action: ${action}`); + } + } + }), [send]); + + const handleDateNavigation = useCallback((action: 'prev' | 'next' | 'today') => { + if (action === 'today') { + send({ type: "SET_DATE", date: Date.now() }) + return; + } + const step = action === 'next' ? 1 : -1; + const date = new Date(state.context.date); + + if (state.context.view === "day") { + date.setDate(date.getDate() + step); + } else if (state.context.view === "week") { + date.setDate(date.getDate() + step * 7); + } else { + date.setMonth(date.getMonth() + step); + } + send({ type: "SET_DATE", date: date.getTime() }) + }, [state.context.date, state.context.view, send]); + + const handleUndo = useCallback(() => send({ type: "UNDO" }), [send]); + const handleRedo = useCallback(() => send({ type: "REDO" }), [send]); + const handleSetView = useCallback((view: SchedulerView) => send({ type: "SET_VIEW", view: view }), [send]); + const memoizedXY = useMemo(() => ({ nav_height: 0 }), []); + + return ( +
+ + +
+ ); +} +~~~ + +一些细节需要注意： + +- 机器上下文是 `events`、`view` 和 `date` 的单一真理来源。 +- `data.save` 处理程序会将基于实体的 Scheduler 变更转换为机器事件。 +- 我们隐藏内置的 Scheduler 导航栏（`xy={{ nav_height: 0 }}`），并用自定义工具栏替代。 +- `event_class` 模板从每个事件中读取 `classname` 字段，并将其应用为 CSS 类。 + +## 事件颜色样式 + +创建 `src/components/styles.css`，其中包含与种子数据中的 `classname` 值相匹配的 CSS 类。`event_class` 模板将这些类应用到每个事件元素。 + +~~~css title="src/components/styles.css" +/* + 事件着色。 + Scheduler 将从 templates.event_class 返回的值应用到事件容器。 + 种子数据使用 `classname`，因此我们通过模板映射它并在此处样式化这些类。 +*/ + +.blue { + background: #3b82f6 !important; + border-color: #2563eb !important; + color: #ffffff !important; +} + +.green { + background: #22c55e !important; + border-color: #16a34a !important; + color: #ffffff !important; +} + +.violet { + background: #a855f7 !important; + border-color: #9333ea !important; + color: #ffffff !important; +} + +.yellow { + background: #f59e0b !important; + border-color: #d97706 !important; + color: #111827 !important; +} +~~~ + +## 将 Scheduler 集成到应用中 + +更新 `src/App.tsx` 和 `src/App.css`： + +~~~tsx title="src/App.tsx" +import Scheduler from "./components/Scheduler"; +import "./App.css"; + +function App() { + return ( + + ); +} +export default App; +~~~ + +~~~css title="src/App.css" +#root, body { + margin: 0; + padding: 0; + height: 100%; + width: 100%; +} +~~~ + +## 小结 + +现在你已经拥有一个由 XState 完全驱动的 React Scheduler： + +- Scheduler 从 XState 机器上下文读取 `events`、`view`、`date` 和 `config` +- 用户编辑通过 `data.save` 路由到 CRUD 的机器事件 +- 由于 Scheduler 通过 props 接收更新的状态，UI 保持同步 +- 撤销/重做通过带有 `guard` 条件的快照历史实现 +- 一个自定义工具栏提供视图切换、日期导航，以及带禁用状态的撤销/重做 + +## 下一步 + +- 在 [数据绑定与状态管理基础](integrations/react/state/state-management-basics.md) 中回顾本示例背后的概念 +- 在 [React Scheduler 概览](integrations/react/overview.md) 中探索 Scheduler 的配置与模板选项 +- 通过向机器派发异步事件来实现持久化（从 API 加载/保存事件） +- 将相同的模式应用到其他状态管理器： + - [在 Redux Toolkit 中使用 React Scheduler](integrations/react/state/redux-toolkit.md) + - [在 MobX 中使用 React Scheduler](integrations/react/state/mobx.md) + - [在 Zustand 中使用 React Scheduler](integrations/react/state/zustand.md) + - [在 Jotai 中使用 React Scheduler](integrations/react/state/jotai.md) + - [在 Valtio 中使用 React Scheduler](integrations/react/state/valtio.md) \ No newline at end of file diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/integrations/react/state/zustand.md b/i18n/zh/docusaurus-plugin-content-docs/current/integrations/react/state/zustand.md new file mode 100644 index 00000000..606e4099 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/integrations/react/state/zustand.md @@ -0,0 +1,503 @@ +--- +title: React Scheduler - Zustand 教程 +sidebar_label: Zustand +description: 了解如何将 DHTMLX React Scheduler 与 Zustand 集成，包括事件增删改查、视图/日期同步，以及撤销/重做。 +--- + +# React Scheduler - Zustand 教程 + +本教程演示如何将 **DHTMLX React Scheduler** 连接到一个 **Zustand** 存储。你将把事件和 UI 状态（视图/日期/配置）保存在 Zustand 中，通过 `data.save` 路由 Scheduler 编辑，并通过基于快照的历史记录实现 **撤销/重做**。 + +:::note +完整源代码可在 [GitHub 上查看](https://github.com/DHTMLX/react-scheduler-zustand-starter)。 +::: + +## 先决条件 + +- Node.js（推荐使用 LTS 版本） +- React + TypeScript 基础 +- 熟悉 Zustand 的钩子和选择器。如果需要回顾，请参阅 Zustand 文档：https://zustand.docs.pmnd.rs/ + +## 快速设置 - 创建项目 + +创建一个 Vite + React + TS 项目： + +~~~bash +npm create vite@latest scheduler-zustand-demo -- --template react-ts +cd scheduler-zustand-demo +npm install +~~~ + +安装 Zustand： + +~~~bash +npm install zustand +~~~ + +安装 Material UI（用于示例工具栏）： + +~~~bash +npm install @mui/material @mui/icons-material @emotion/react @emotion/styled +~~~ + +### 安装 React Scheduler + +按照 [React Scheduler 安装指南](integrations/react/installation.md) 的描述安装 React Scheduler。 + +在本教程中我们使用评估包： + +```bash +npm install @dhtmlx/trial-react-scheduler +``` + +或 + +```bash +yarn add @dhtmlx/trial-react-scheduler +``` + +如果你已经使用 Professional 包，请在命令和导入中把 `@dhtmlx/trial-react-scheduler` 替换为 `@dhx/react-scheduler`。 + +运行开发服务器： + +~~~bash +npm run dev +~~~ + +:::note +为了让 Scheduler 占满整页，请移除 `src/App.css` 的默认样式并添加： + +~~~css +#root { + margin: 0; + padding: 0; + height: 100%; + width: 100%; +} + +body { + margin: 0; +} +~~~ +::: + +## 定义共享类型 + +创建 `src/types.ts`。这些类型在存储和组件之间共享： + +~~~ts +export type SchedulerView = "day" | "week" | "month"; + +export interface SchedulerEvent { + id: string | number; + start_date: string; + end_date: string; + text: string; + + // Scheduler 运行时可能附加额外字段（例如自定义属性）。保持演示的宽容性。 + [key: string]: unknown; +} + +export type SchedulerConfig = Record; + +export interface SchedulerSnapshot { + events: SchedulerEvent[]; +} +~~~ + +- `SchedulerEvent` 使用索引签名，以便 Scheduler 能在运行时附加额外字段。 +- `SchedulerSnapshot` 捕获撤销/重做所需的数据（事件）。 + +## 设置示例数据 + +创建 `src/seed/data.ts`，包含若干事件和初始的 UI 状态。请注意，`currentDate` 以 **数字**（时间戳）存储，以确保存储状态可序列化。 + +~~~ts +export const seedEvents = [ + { id: 1, start_date: "2025-08-11T02:00:00Z", end_date: "2025-08-11T10:20:00Z", text: "Product Strategy Hike" }, + { id: 2, start_date: "2025-08-12T06:00:00Z", end_date: "2025-08-12T11:00:00Z", text: "Tranquil Tea Time" }, + { id: 3, start_date: "2025-08-15T03:00:00Z", end_date: "2025-08-15T08:00:00Z", text: "Demo and Showcase" }, +]; + +export const seedDate = Date.parse("2025-08-15T00:00:00Z"); +export const seedView = "week"; +~~~ + +:::note +伴随演示还包含额外事件，以获得更丰富的视觉效果。 +::: + +## 创建 Zustand 存储 + +创建 `src/store.ts`。该存储包含： + +- `events`（Scheduler 数据） +- `currentDate`（以时间戳表示） +- `view`（`day | week | month`） +- `config`（Scheduler 配置对象） +- `past` / `future`（用于撤销/重做的快照数组） + +撤销/重做直接通过快照集成到存储中。在每次修改数据的操作之前，`pushHistory` 会保存当前事件的快照。`undo` 和 `redo` 操作会将当前状态与历史中的快照进行切换。 + +~~~ts +import { create } from "zustand"; + +import { seedDate, seedEvents, seedView } from "./seed/data"; +import type { SchedulerConfig, SchedulerEvent, SchedulerSnapshot, SchedulerView } from "./types"; + +export interface SchedulerStoreState { + events: SchedulerEvent[]; + currentDate: number; + view: SchedulerView; + config: SchedulerConfig; + + past: SchedulerSnapshot[]; + future: SchedulerSnapshot[]; + maxHistory: number; + + setCurrentDate: (date: number) => void; + setView: (view: SchedulerView) => void; + + createEvent: (event: Omit & Partial>) => SchedulerEvent; + updateEvent: (event: Partial & Pick) => void; + deleteEvent: (id: SchedulerEvent["id"]) => void; + + undo: () => void; + redo: () => void; +} + +const deepCopy = (value: T): T => { + return JSON.parse(JSON.stringify(value)) as T; +}; + +const createSnapshot = (events: SchedulerEvent[]): SchedulerSnapshot => ({ + events: deepCopy(events), +}); + +// 模拟从后端接收一个 ID +const generateId = () => `id_${Date.now().toString()}`; + +export const useSchedulerStore = create((set, get) => { + const pushHistory = () => { + const { events, past, maxHistory } = get(); + const snapshot = createSnapshot(events); + + set({ + past: [...past.slice(-maxHistory + 1), snapshot], + future: [], + }); + }; + + return { + events: seedEvents as unknown as SchedulerEvent[], + currentDate: seedDate, + view: seedView as SchedulerView, + config: {}, + + past: [], + future: [], + maxHistory: 50, + + setCurrentDate: (date) => set({ currentDate: date })), + setView: (view) => set({ view }), + + createEvent: (event) => { + pushHistory(); + + const id = event.id != null ? event.id : generateId(); + const newEvent: SchedulerEvent = { ...event, id } as SchedulerEvent; + + set({ events: [...get().events, newEvent] }); + return newEvent; + }, + + updateEvent: (event) => { + const events = get().events; + const index = events.findIndex((e) => String(e.id) === String(event.id)); + if (index === -1) return; + + pushHistory(); + set({ + events: [...events.slice(0, index), { ...events[index], ...event }, ...events.slice(index + 1)], + }); + }, + + deleteEvent: (id) => { + const events = get().events; + const exists = events.some((e) => String(e.id) === String(id)); + if (!exists) return; + + pushHistory(); + set({ events: events.filter((e) => String(e.id) !== String(id)) }); + }, + + undo: () => { + const { past, future, events } = get(); + if (past.length === 0) return; + + const previous = past[past.length - 1]; + set({ + events: previous.events, + past: past.slice(0, -1), + future: [createSnapshot(events), ...future], + }); + }, + + redo: () => { + const { past, future, events } = get(); + if (future.length === 0) return; + + const next = future[0]; + set({ + events: next.events, + past: [...past, createSnapshot(events)], + future: future.slice(1), + }); + }, + }; +}); +~~~ + +## 构建控件工具栏组件 + +创建 `src/components/Toolbar.tsx`。这是一个小型的 MUI 工具栏，用于： + +- 切换视图（day/week/month） +- 导航上一个/今天/下一个 +- 撤销/重做 + +~~~tsx +import { ButtonGroup, Button, Typography, Stack } from "@mui/material"; +import UndoIcon from "@mui/icons-material/Undo"; +import RedoIcon from "@mui/icons-material/Redo"; +import React from "react"; +import type { SchedulerView } from "../types"; + +export interface ToolbarProps { + currentView: SchedulerView; + currentDate: Date; + canUndo: boolean; + canRedo: boolean; + onUndo?: () => void; + onRedo?: () => void; + onNavigate?: (action: "prev" | "next" | "today") => void; + setView: (view: SchedulerView) => void; +} + +export default React.memo(function Toolbar({ + currentView, + currentDate, + canUndo, + canRedo, + onUndo, + onRedo, + onNavigate, + setView, +}: ToolbarProps) { + return ( + + + {(["day", "week", "month"] as const).map((l) => ( + + ))} + + + + + + + {new Date(currentDate)?.toLocaleDateString(undefined, { weekday: "short", month: "short", day: "numeric" })} + + + + + + + + ); +}); +~~~ + +## 将 Scheduler 连接到 Zustand + +创建 `src/components/Scheduler.tsx`。该组件： + +- 通过选择器从 Zustand 存储读取 `events/view/currentDate/config` +- 暴露一个 `data.save` 回调，用于调用存储中的操作 +- 从 `save` 返回创建/更新的实体，以便 Scheduler 能同步其内部记账 +- 连接 `undo/redo` +- 隐藏内置导航栏，改用自定义工具栏 + +~~~tsx +import { useCallback, useMemo } from "react"; +import ReactScheduler from "@dhtmlx/trial-react-scheduler"; +import "@dhtmlx/trial-react-scheduler/dist/react-scheduler.css"; + +import Toolbar from "./Toolbar"; +import { useSchedulerStore } from "../store"; +import type { SchedulerEvent, SchedulerView } from "../types"; + +export default function DemoZustandScheduler() { + const events = useSchedulerStore((s) => s.events); + const view = useSchedulerStore((s) => s.view); + const currentDate = useSchedulerStore((s) => s.currentDate); + const config = useSchedulerStore((s) => s.config); + + const setView = useSchedulerStore((s) => s.setView); + const setCurrentDate = useSchedulerStore((s) => s.setCurrentDate); + const createEvent = useSchedulerStore((s) => s.createEvent); + const updateEvent = useSchedulerStore((s) => s.updateEvent); + const deleteEvent = useSchedulerStore((s) => s.deleteEvent); + const undo = useSchedulerStore((s) => s.undo); + const redo = useSchedulerStore((s) => s.redo); + + const canUndo = useSchedulerStore((s) => s.past.length > 0); + const canRedo = useSchedulerStore((s) => s.future.length > 0); + + const activeDate = useMemo(() => new Date(currentDate), [currentDate]); + + const handleDateNavigation = useCallback((action: "prev" | "next" | "today") => { + if (action === "today") { + setCurrentDate(Date.now()); + return; + } + + const step = action === "next" ? 1 : -1; + const date = new Date(currentDate); + + if (view === "day") { + date.setDate(date.getDate() + step); + } else if (view === "week") { + date.setDate(date.getDate() + step * 7); + } else { + date.setMonth(date.getMonth() + step); + } + setCurrentDate(date.getTime()); + }, [currentDate, view, setCurrentDate]); + + // Scheduler <-> Zustand 数据桥接（将 Scheduler 的 CRUD 事件映射到存储操作） + const dataBridge = useMemo(() => ({ + save: (entity: string, action: string, payload: unknown, id: unknown) => { + if (entity !== "event") return; + + switch (action) { + case "update": { + const eventData = payload && typeof payload === "object" ? (payload as Record) : {}; + const eventId = (eventData as Record).id ?? id; + if (eventId == null) { + console.warn("Update called without an id", { payload, id }); + return; + } + return updateEvent({ ...eventData, id: eventId } as Partial & Pick); + } + case "create": + return createEvent(payload as Omit); + case "delete": { + const deleteId = + payload && typeof payload === "object" + ? (payload as Record).id ?? id + : payload ?? id; + if (deleteId == null) { + console.warn("Delete called without an id", { payload, id }); + return; + } + return deleteEvent(deleteId as SchedulerEvent["id"]); + } + default: + console.warn(`Unknown action: ${action}`); + return; + } + }, + }), [updateEvent, createEvent, deleteEvent]); + + const handleViewChange = useCallback( + (mode: string, date: Date) => { + const nextView: SchedulerView = mode === "day" || mode === "week" || mode === "month" ? mode : "month"; + setView(nextView); + setCurrentDate(date.getTime()); + }, + [setView, setCurrentDate] + ); + + const handleSetView = useCallback((nextView: SchedulerView) => setView(nextView), [setView]); + + const handleUndo = useCallback(() => undo(), [undo]); + const handleRedo = useCallback(() => redo(), [redo]); + const memoizedXY = useMemo(() => ({ nav_height: 0 }), []); + + return ( +
+ + + +
+ ); +} +~~~ + +请注意，与 Redux Toolkit 不同，Zustand 不需要 `Provider` 包装。`useSchedulerStore` 钩子直接从存储中读取数据。 + +## 在应用中渲染 Scheduler + +更新 `src/App.tsx`： + +~~~tsx +import Scheduler from "./components/Scheduler"; +import "./App.css"; + +function App() { + return ; +} + +export default App; +~~~ + +## 总结 + +现在你已经拥有一个由 Zustand 完全驱动的 React Scheduler： + +- Zustand 将 `events`、`view`、`currentDate` 和 `config` 作为单一的事实来源 +- 用户编辑通过 `data.save` 路由到存储操作 +- 由于 Scheduler 通过属性接收更新后的 `events`，UI 保持同步 +- 撤销/重做通过基于快照的历史实现，历史栈有上限 + +## 下一步 + +- 重新查看此示例背后的概念，请参考 [数据绑定与状态管理基础]（integrations/react/state/state-management-basics.md） +- 了解 Scheduler 的配置和模板选项，请参阅 [React Scheduler 概览]（integrations/react/overview.md） +- 通过在 Zustand 动作中进行获取并更新存储，添加持久化（从 API 加载/保存事件） +- 使用同样的模式与其他状态管理器配合使用： + - [使用 Redux Toolkit 的 React Scheduler](integrations/react/state/redux-toolkit.md) + - [使用 MobX 的 React Scheduler](integrations/react/state/mobx.md) + - [使用 XState 的 React Scheduler](integrations/react/state/xstate.md) + - [使用 Valtio 的 React Scheduler](integrations/react/state/valtio.md) + - [使用 Jotai 的 React Scheduler](integrations/react/state/jotai.md) \ No newline at end of file diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/integrations/salesforce/howtostart-salesforce.md b/i18n/zh/docusaurus-plugin-content-docs/current/integrations/salesforce/howtostart-salesforce.md index be006148..5fc08772 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/integrations/salesforce/howtostart-salesforce.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/integrations/salesforce/howtostart-salesforce.md @@ -1,62 +1,66 @@ ---- -title: "dhtmlxScheduler 与 SalesForce LWC 集成指南" -sidebar_label: "dhtmlxScheduler 与 SalesForce LWC 集成指南" --- +title: "dhtmlxScheduler 与 Salesforce LWC" +sidebar_label: "Salesforce" +--- + +# dhtmlxScheduler 与 Salesforce LWC -# dhtmlxScheduler 与 SalesForce LWC 集成指南 +本教程介绍如何将 dhtmlxScheduler 集成到一个 [Salesforce Lightning Web 组件](https://developer.salesforce.com/docs/platform/lwc/guide) 中。 -本教程将指导您如何将 dhtmlxScheduler 集成到 [SalesForce Lightning Web Component](https://developer.salesforce.com/docs/platform/lwc/guide) 中。 +请查看 [在线演示](https://dhtmlx-dev-ed.develop.lightning.force.com/)（演示将 DHTMLX 组件与 Salesforce LWC 集成，登录名：*user*，密码：*demo*）。 +演示的源代码在 [GitHub 上提供](https://github.com/DHTMLX/salesforce-lwc-demo)。 -如果您使用的是其他技术，您可能需要查看以下其他集成选项: +如果你使用的是其他技术，请查看下面可用的集成变体列表： -- [dhtmlxScheduler와 ASP.NET Core](integrations/dotnet/howtostart-dotnet-core.md) -- [dhtmlxScheduler와 ASP.NET MVC](integrations/dotnet/howtostart-dotnet.md) -- [dhtmlxScheduler와 PHP](integrations/php/howtostart-plain-php.md) -- [dhtmlxScheduler와 PHP:Slim](integrations/php/howtostart-php-slim4.md) -- [dhtmlxScheduler와 PHP:Laravel 연동하기](integrations/php/howtostart-php-laravel.md) -- [dhtmlxScheduler와 Ruby on Rails 연동하기](integrations/other/howtostart-ruby.md) -- [dhtmlxScheduler와 dhtmlxConnector 연동하기](integrations/other/howtostart-connector.md) +- [dhtmlxScheduler 与 ASP.NET Core](integrations/dotnet/howtostart-dotnet-core.md) +- [dhtmlxScheduler 与 ASP.NET MVC](integrations/dotnet/howtostart-dotnet.md) +- [dhtmlxScheduler 与 PHP](integrations/php/howtostart-plain-php.md) +- [dhtmlxScheduler 与 PHP:Slim](integrations/php/howtostart-php-slim4.md) +- [dhtmlxScheduler 与 PHP:Laravel](integrations/php/howtostart-php-laravel.md) +- [dhtmlxScheduler 与 Ruby on Rails](integrations/other/howtostart-ruby.md) +- [dhtmlxScheduler 与 dhtmlxConnector](integrations/other/howtostart-connector.md) -我们将使用 [SalesForce CLI](https://developer.salesforce.com/tools/salesforcecli) 来创建 Lightning Web Component 并将其部署到您的组织。有关安装详情，请参考[此文章](https://developer.salesforce.com/docs/atlas.en-us.sfdx_setup.meta/sfdx_setup/sfdx_setup_intro.htm)。此外，您还可以为 Visual Studio Code 安装 [Salesforce Extension Pack](https://marketplace.visualstudio.com/items?itemName="salesforce.salesforcedx-vscode)，以简化开发组织的操作。" +我们将使用 [Salesforce CLI](https://developer.salesforce.com/tools/salesforcecli) 来创建 Lightning Web Component 并将其上传到一个组织（org）。有关安装指南，请参阅 [此文](https://developer.salesforce.com/docs/atlas.en-us.sfdx_setup.meta/sfdx_setup/sfdx_setup_intro.htm)。你还可以在 Visual Studio Code 中安装 [Salesforce Extension Pack](https://marketplace.visualstudio.com/items?itemName=salesforce.salesforcedx-vscode)，以便在开发组织中工作。 :::note -完整源代码可在 [GitHub](https://github.com/DHTMLX/salesforce-scheduler-demo) 获取。 +本教程中创建的演示的完整源代码 [在 GitHub 上可用](https://github.com/DHTMLX/salesforce-scheduler-demo)。 ::: -以下是一个视频教程，演示如何在 Salesforce LWC 中构建 Scheduler。 + +你也可以观看视频指南，了解如何使用 Salesforce LWC 创建 Scheduler。 -## 前置条件 +## 前提条件 -请确保已安装 [SalesForce CLI](https://developer.salesforce.com/tools/salesforcecli)。如未安装，请参考[此文章](https://developer.salesforce.com/docs/atlas.en-us.sfdx_setup.meta/sfdx_setup/sfdx_setup_intro.htm)进行设置。 +如果你还没有，请安装 [Salesforce CLI](https://developer.salesforce.com/tools/salesforcecli)。有关安装指南，请参阅 [此文](https://developer.salesforce.com/docs/atlas.en-us.sfdx_setup.meta/sfdx_setup/sfdx_setup_intro.htm)。 ## 步骤 1. 创建项目 -如果您还没有开发者账号，请[注册](https://developer.salesforce.com/)一个免费的开发者账号。[这篇文章](https://webkul.com/blog/create-free-developer-account-in-salesforce/)提供了详细的指导。 +如果你还没有免费开发者账户，请 [注册](https://developer.salesforce.com/) 一个开发者账户。有关安装指南，请参阅 [此文](https://webkul.com/blog/create-free-developer-account-in-salesforce/)。 -在左侧搜索栏中查找并选择 *Dev Hub*: +在左侧的搜索栏中，找到并选择 *Dev Hub*： -![](/img/sf_devhub.png) +![sf_devhub](/img/sf_devhub.png) -随后，在打开的设置窗口中启用 *Dev Hub*: +在新的设置窗口中，选择 *Enable Dev Hub*： -![](/img/sf_enabledh.png) +![sf_enabledh](/img/sf_enabledh.png) -接下来，为您的 Salesforce DX 项目创建一个基础文件夹: +让我们为 Salesforce DX 项目创建一个基目录： ~~~js $ mkdir ~/salesforce ~~~ -通过 CLI 生成 Salesforce DX 项目: +通过 CLI 创建一个 Salesforce DX 项目： ~~~js $ cd ~/salesforce $ sfdx project generate -n scheduler-salesforce-app target dir = C:UsersUsersalesforce create scheduler-salesforce-appconfigproject-scratch-def.json - create scheduler-salesforce-appguides/README.md + create guides/scheduler-salesforce-appREADME.md create scheduler-salesforce-appsfdx-project.json create scheduler-salesforce-app.huskypre-commit create scheduler-salesforce-app.vscodeextensions.json @@ -75,7 +79,7 @@ $ sfdx project generate -n scheduler-salesforce-app create scheduler-salesforce-apppackage.json ~~~ -进入新创建的项目文件夹: +进入创建的项目： ~~~js $ cd scheduler-salesforce-app @@ -83,7 +87,7 @@ $ cd scheduler-salesforce-app ## 步骤 2. 授权 -通过 Web Server Flow 授权您的组织，运行以下命令: +使用 Web 服务器流对 Org 进行授权： ~~~js $ sfdx org login web -d @@ -91,15 +95,16 @@ $ sfdx org login web -d Successfully authorized ...@...com with org ID ... ~~~ -接下来，更新项目配置文件（*sfdx-project.json*），将 "sfdcLoginUrl" 参数设置为您的 "My Domain URL"。您可以在组织的 "My Domain" 设置页面找到该 URL。例如: +更新你的项目配置文件 (*sfdx-project.json*)。将 "sfdcLoginUrl" 参数设置为你的 "My Domain URL"。你可以在 “My Domain” 设置页面找到你的组织的 "My Domain URL"。例如： + +![sf_mydomain](/img/sf_mydomain.png) -![](/img/sf_mydomain.png) ~~~js title="scheduler-salesforce-app/sfdx-project.json" "sfdcLoginUrl" : "https://xbs2-dev-ed.my.salesforce.com" ~~~ -使用以下命令创建 Scratch Org: +创建 Scratch Org： ~~~js $ sfdx org create scratch -f config/project-scratch-def.json -d @@ -121,85 +126,85 @@ Done Your scratch org is ready. ~~~ -## 步骤 3. 向 Salesforce 添加 Scheduler -要使用该库，需要将其作为静态资源上传到 Salesforce。通过以下命令打开您的 Scratch Org: +## 步骤 3. 将 Scheduler 添加到 Salesforce + +为了开始使用该库，我们需要将其上传到 Salesforce 作为一个静态资源（Static Resource）。因此，打开你的 scratch org： ~~~js $ sfdx org open ~~~ -然后，进入 "Static Resources" 标签页并点击 "New" 按钮: +现在，打开 “Static Resources” 标签页并点击 “New” 按钮 -![](/img/sf_staticresources.png) +![sf_staticresources](/img/sf_staticresources.png) -为资源命名（此处为 *dhtmlxscheduler*），上传包含库文件（*dhtmlxscheduler.js* 和 *dhtmlxscheduler.css*）的 ZIP 包，并将 Cache Control 设置为 "Public" 以提升性能。点击 "Save"。 +给它一个有意义的名称（我们使用 *dhtmlxscheduler*），选择包含库本身的 ZIP 压缩包（该压缩包中必须包含 *dhtmlxscheduler.js* 与 *dhtmlxscheduler.css* 文件），并选择 "Public" 缓存控制以提高性能。点击 “Save” 保存。 ![sf_load_zip](/img/sf_load_zip.png) -此时，dhtmlxScheduler 已在 Salesforce 中可用。 +现在我们在 Salesforce 内部拥有 dhtmlxScheduler。 ![sf_scheduler_in_sf](/img/sf_scheduler_in_sf.png) ## 步骤 4. 创建数据模型 -事件（Events）是 dhtmlxScheduler 的核心实体。实际应用中，管理事件的一个有效方式是将其所有属性作为纯 JSON 存储于 Salesforce。为此，需要创建一个新的 Event 对象。打开 Object Manager，选择 "Create"，然后选择 "Custom Object": +dhtmlxScheduler 的核心实体是 Events。一个好的做法是在 Salesforce 中将 dhtmlxScheduler 的所有属性以纯 JSON 的形式存储。让我们创建一个 Event 对象。打开对象管理器并选择 "Create"，然后选择 "Custom Object"： -![](/img/sf_new_object.png) +![sf_new_object](/img/sf_new_object.png) -### **事件对象** - -将事件对象命名为 *SchedulerEvent* 或 *SchedulerEvents*。 +### **Event 对象** +为事件对象命名，例如设为 *SchedulerEvent/SchedulerEvents*。 ![sf_schedulerevent](/img/sf_schedulerevent.png) :::note -请确保记录名称与对象名称一致，例如: - +记录名称必须与对象名称匹配，例如： 对象名称: SchedulerEvent => 记录名称: SchedulerEvent Name ::: -点击"保存"按钮。 +点击保存按钮。 + +对象创建后，打开 “Fields & Relationships” 标签页。点击 “New” 按钮。 -对象创建完成后，进入"字段与关系"标签页，点击"新建"按钮。 ![sf_new_field](/img/sf_new_field.png) -- **开始日期** +- **Start Date** -选择"日期/时间"作为数据类型，然后点击"下一步"。 +将数据类型选择为 “Date/Time” 并点击 “Next” 按钮。 ![sf_field_type](/img/sf_field_type.png) -将该字段命名为"开始日期"。该字段将用于存储JSON序列化的任务属性。 +将其命名为 "Start Date"。它用于存储 JSON 序列化的任务属性。 ![sf_start_date](/img/sf_start_date.png) -点击"下一步"，并保持所有默认设置，直到出现"保存并新建"按钮。 +点击 “Next” 按钮（接受所有默认设置）直到出现 “Save & New” 按钮。 -- **结束日期** +- **End Date** -添加"结束日期"字段，选择"日期/时间"作为数据类型。 +创建 “End Date” 字段。将数据类型选择为 “Date/Time”。 ![sf_end_date](/img/sf_end_date.png) -点击"下一步"，并保持默认设置，直到可以使用"保存并新建"按钮。 +点击 “Next” 按钮（接受所有默认设置）直到出现 “Save & New” 按钮。 -- **文本** +- **Text** -创建一个"文本"字段，并选择"文本"作为数据类型。 +创建一个 "Text" 字段。将数据类型选择为 “Text”。 ![sf_text](/img/sf_text.png) -点击"下一步"，并保持所有默认设置，直到"保存"按钮可用。 +点击 “Next” 按钮（接受所有默认设置）直到出现 “Save” 按钮。 -最终，字段应如下所示: +最后它应显示如下所示： ![sf_schedulerevent_fields](/img/sf_schedulerevent_fields.png) -## 第5步:创建 Lightning Web 组件 +## 步骤 5. 创建一个 Lightning Web Component -要创建 Lightning Web 组件，请使用以下命令: +要创建一个 Lightning Web Component，请运行以下命令： ~~~js $ sfdx lightning generate component --type lwc -n scheduler -d force-app/main/default/lwc @@ -211,7 +216,7 @@ target dir = C:UsersUsersourcesalesforcescheduler-salesforce-appforce-appmaindef create force-appmaindefaultlwcschedulerscheduler.js-meta.xml ~~~ -修改 *scheduler.js-meta.xml* 文件中的组件定义，以便在 Lightning App Builder 中暴露该组件: +在 *scheduler.js-meta.xml* 中修改组件定义，以便在 Lightning App Builder 中暴露它： ~~~js title="force-app/main/default/lwc/scheduler/scheduler.js-meta.xml" @@ -229,15 +234,15 @@ target dir = C:UsersUsersourcesalesforcescheduler-salesforce-appforce-appmaindef ~~~ -打开 *scheduler.html* 文件，插入以下代码: +打开 *scheduler.html* 并将以下代码添加到其中： ~~~js title="force-app/main/default/lwc/scheduler/scheduler.html" ~~~ -接下来，打开 *scheduler.js* 文件，并添加以下代码: +打开 *scheduler.js* 并将以下代码添加到其中： ~~~js title="force-app/main/default/lwc/scheduler/scheduler.js" /* eslint-disable guard-for-in */ @@ -247,10 +252,10 @@ import { ShowToastEvent } from "lightning/platformShowToastEvent"; import { loadStyle, loadScript } from "lightning/platformResourceLoader"; import { createRecord, updateRecord, deleteRecord } from "lightning/uiRecordApi"; -// Static resources +// 静态资源 import SchedulerFiles from "@salesforce/resourceUrl/dhtmlxscheduler"; -// Controllers +// 控制器 import getEvents from "@salesforce/apex/SchedulerData.getEvents"; function unwrap(fromSF) { @@ -362,9 +367,9 @@ export default class SchedulerView extends LightningElement { } ~~~ -## 第6步:创建 Apex 类 +## 步骤 6. 创建 Apex 类 -下一步是创建一个类，实现 Lightning 组件与数据模型之间的交互。 +下一步是创建一个类，使 Lightning 组件与我们的数据模型之间的交互成为可能。 ~~~js $ sfdx apex generate class -n SchedulerData -d force-app/main/default/classes @@ -374,7 +379,7 @@ target dir = C:UsersUsersalesforcescheduler-salesforce-appforce-appmaindefaultcl create force-appmaindefaultclassesSchedulerData.cls-meta.xml ~~~ -创建完成后，打开 *SchedulerData.cls* 文件，并添加如下代码: +创建后，打开 *SchedulerData.cls*，并将以下代码添加到其中： ~~~js title="force-app/main/default/classes/SchedulerData.cls" public with sharing class SchedulerData { @@ -394,67 +399,66 @@ public with sharing class SchedulerData { } ~~~ -从 Scratch Org 拉取源代码到您的项目: +从 Scratch Org 读取源码到你的项目中： ~~~js $ sfdx project retrieve start ~~~ -然后将源代码重新推送到 Scratch Org: +接着将源码推送到 Scratch Org： ~~~js $ sfdx project deploy start ~~~ -## 第7步:创建 Lightning 页面 +## 步骤 7. 创建 Lightning 页面 -打开"Lightning App Builder"，创建一个新的 Lightning 页面。 +打开“Lightning App Builder”，创建一个新的 Lightning 页面。 -![](/img/sf_lightning_app_builder.png) +![sf_lightning_app_builder](/img/sf_lightning_app_builder.png) -选择"App Page"，输入页面名称并选择布局。 +选择 "App Page"，然后是页面名称和布局。 -![](/img/sf_app_page.png) +![sf_app_page](/img/sf_app_page.png) ![sf_new_lightning_page](/img/sf_new_lightning_page.png) -![](/img/sf_page_layout.png) +![sf_page_layout](/img/sf_page_layout.png) -Scheduler 自定义组件应可用于新页面。将其添加到任意区域并保存。 +你应该会在新页面上看到 Scheduler 自定义组件。将其追加到任意区域并保存。 ![sf_scheduler](/img/sf_scheduler.png) 激活该页面。 -![](/img/sf_page_saved.png) +![sf_page_saved](/img/sf_page_saved.png) -保存更改。 +保存变更。 ![sf_activation](/img/sf_activation.png) -![](/img/sf_add_page_to_nm.png) +![sf_add_page_to_nm](/img/sf_add_page_to_nm.png) ![sf_scheduler_in_app](/img/sf_scheduler_in_app.png) -打开应用页面。在应用启动器中输入 Scheduler 即可访问。 +打开应用程序页面。若在应用启动器中单击并输入 Scheduler 应该可以访问。 ![sf_home_scheduler](/img/sf_home_scheduler.png) -如果一切设置正确，将在 Lightning 页面上显示一个简单的 Scheduler 演示。 +如果一切顺利，你应该在 Lightning 页面看到一个简单的 Scheduler 演示正在运行。 ![sf_final](/img/sf_final.png) -## 应用安全性 - -Scheduler 本身不包含针对 SQL 注入、XSS 或 CSRF 攻击等威胁的防护。确保应用安全是开发者的责任。更多详情请参见[相关文档](guides/app-security.md)。Salesforce 设计有安全功能来保护您的数据和应用，您也可以根据组织需求实施自定义安全措施。详细信息请参考 [Salesforce Security Guide](https://developer.salesforce.com/docs/atlas.en-us.securityImplGuide.meta/securityImplGuide/salesforce_security_guide.htm)。此外，[此资源](https://developer.salesforce.com/docs/atlas.en-us.secure_coding_guide.meta/secure_coding_guide/secure_coding_lightning_security.htm) 介绍了关键安全实践。 +## 应用程序安全性 -## 故障排查 +Scheduler 不提供防止应用程序受到各种威胁（如 SQL 注入、XSS 和 CSRF 攻击）的机制。保持应用程序安全的责任在于实现应用程序的开发者。请在对应的文章中了解更多细节，Salesforce 以安全性来保护你的数据和应用程序。你也可以实现你自己的安全方案，以符合你组织的结构和需要。欲了解更多信息，请参阅 Salesforce Security Guide。 [在这里](https://developer.salesforce.com/docs/atlas.en-us.secure_coding_guide.meta/secure_coding_guide/secure_coding_lightning_security.htm) 可以了解需要保持安全的要点。 -如果 Scheduler 在完成集成步骤后未显示事件，请参阅 [Troubleshooting Backend Integration Issues](guides/troubleshooting.md) 文章。该文档提供了识别和解决常见问题的指导。 +## 故障排除 -## 后续步骤 +如果你已经完成上述步骤以实现 Scheduler 与 Salesforce 的集成，但 Scheduler 在页面上没有渲染事件，请参阅 [Troubleshooting Backend Integration Issues](guides/troubleshooting.md) 文章。它描述了识别问题根源的方式。 -至此，Scheduler 已完全可用。完整代码可在 [GitHub](https://github.com/DHTMLX/salesforce-scheduler-demo) 上获取，您可以克隆或下载以用于您的项目。 +## 接下来要做什么 -您还可以查阅 [Scheduler 功能指南](/guides/) 或关于 [与其他后端框架集成的教程](/integrations/howtostart-guides/)。 +现在你已经拥有一个功能完整的 Scheduler。你可以在 [GitHub](https://github.com/DHTMLX/salesforce-scheduler-demo) 查看完整代码，克隆或下载它并将其用于你的项目。 +你也可以查看 [关于 Scheduler 的众多特性的指南](/guides/) 或关于 [Scheduler 与其他后端框架集成的教程](integrations/howtostart-guides.md)。 \ No newline at end of file diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/views/agenda-legacy.md b/i18n/zh/docusaurus-plugin-content-docs/current/views/agenda-legacy.md index f0280b8b..3c97714b 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/views/agenda-legacy.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/views/agenda-legacy.md @@ -74,11 +74,11 @@ scheduler.locale.labels.agenda_tab = "My Agenda"; 要定义议程视图中显示的日期范围，请使用 [agenda_end](api/config/agenda_end.md) 和 [agenda_start](api/config/agenda_start.md) 属性: ~~~js -//显示从 2019 年 6 月 1 日开始的日期 -scheduler.config.agenda_start = new Date(2019, 5, 1); +//显示从 2026 年 6 月 1 日开始的日期 +scheduler.config.agenda_start = new Date(2026, 5, 1); -//显示截止到 2020 年 6 月 1 日的日期 -scheduler.config.agenda_end = new Date(2020, 5, 1); +//显示截止到 2027 年 6 月 1 日的日期 +scheduler.config.agenda_end = new Date(2027, 5, 1); ~~~ ## 启用上一页/下一页/今天按钮 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/views/agenda.md b/i18n/zh/docusaurus-plugin-content-docs/current/views/agenda.md index e553cfd7..84cfe231 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/views/agenda.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/views/agenda.md @@ -93,8 +93,8 @@ scheduler.date.add_agenda = function(date, inc){ 您还可以通过设置 [agenda_end](api/config/agenda_end.md) 和 [agenda_start](api/config/agenda_start.md) 属性来固定显示的日期范围: ~~~js -scheduler.config.agenda_start = new Date(2023, 5, 1); -scheduler.config.agenda_end = new Date(2023, 6, 1); +scheduler.config.agenda_start = new Date(2027, 5, 1); +scheduler.config.agenda_end = new Date(2027, 6, 1); ~~~ ## 相关指南 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/views/day.md b/i18n/zh/docusaurus-plugin-content-docs/current/views/day.md index 416352b2..5a913a76 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/views/day.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/views/day.md @@ -16,7 +16,7 @@ sidebar_label: "日视图" ~~~js //标准初始化。日视图会自动包含 -scheduler.init('scheduler_here',new Date(2019,0,10),"week"); +scheduler.init('scheduler_here',new Date(2027,0,10),"week"); ... scheduler.load("/data/events"); ~~~ diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/views/grid.md b/i18n/zh/docusaurus-plugin-content-docs/current/views/grid.md index 0e2e0ef6..45503c94 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/views/grid.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/views/grid.md @@ -51,8 +51,8 @@ scheduler.createGridView({ {id:"date", label:'Date', sort:'date', width:'*'}, {id:"text", label:'Text', sort:'str', width:200, align:'left'} ], - from:new Date(2019, 3, 10),//允许的日期范围左边界 - to:new Date(2019, 5, 23) //允许的日期范围右边界 + from:new Date(2027, 3, 10),//允许的日期范围左边界 + to:new Date(2027, 5, 23) //允许的日期范围右边界 }); ~~~ @@ -64,15 +64,15 @@ scheduler.createGridView({ 此扩展允许你限制可用日期，用户无法超出指定的范围。 -例如，如果你想将可用日期限制在 **2010年1月1日** 到 **2011年1月1日**，你可以这样设置: +例如，如果你想将可用日期限制在 **2026年1月1日** 到 **2027年1月1日**，你可以这样设置: ~~~js scheduler.createGridView({ name:"grid", .. - from:new Date(2019, 0, 1), - to:new Date(2020, 0, 1) + from:new Date(2026, 0, 1), + to:new Date(2027, 0, 1) }); ~~~ diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/views/map.md b/i18n/zh/docusaurus-plugin-content-docs/current/views/map.md index de3e3007..e2189705 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/views/map.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/views/map.md @@ -82,7 +82,7 @@ scheduler.locale.labels.section_location = "Location"; ~~~js //'map' 是地图视图的默认名称 -scheduler.init('scheduler_here',new Date(2024,5,11),"map"); +scheduler.init('scheduler_here',new Date(2027,5,11),"map"); ~~~ @@ -113,7 +113,7 @@ scheduler.config.map_settings = { } } ... -scheduler.init('scheduler_here',new Date(2024,5,11),"map"); +scheduler.init('scheduler_here',new Date(2027,5,11),"map"); ~~~ [查看更多详情](views/map.md#maprelatedconfigurationoptions) @@ -125,7 +125,7 @@ scheduler.init('scheduler_here',new Date(2024,5,11),"map"); ~~~js scheduler.config.map_view_provider = "googleMap"; ... -scheduler.init('scheduler_here',new Date(2024,5,11),"map"); +scheduler.init('scheduler_here',new Date(2027,5,11),"map"); ~~~ 可用值有:*"googleMap", "openStreetMaps", "mapbox"*。 @@ -137,7 +137,7 @@ scheduler.config.map_settings = { view_provider: "googleMap" } ... -scheduler.init('scheduler_here',new Date(2024,5,11),"map"); +scheduler.init('scheduler_here',new Date(2027,5,11),"map"); ~~~ ## 与地图相关的配置选项 {#maprelatedconfigurationoptions} @@ -168,7 +168,7 @@ scheduler.config.map_settings = { view_provider: "googleMap" } ... -scheduler.init('scheduler_here',new Date(2024,5,11),"map"); +scheduler.init('scheduler_here',new Date(2027,5,11),"map"); ~~~ 这些属性包括: diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/views/month.md b/i18n/zh/docusaurus-plugin-content-docs/current/views/month.md index 75a2933c..db7829c0 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/views/month.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/views/month.md @@ -15,7 +15,7 @@ sidebar_label: "月视图" ~~~js // 标准初始化；月视图会自动包含 -scheduler.init('scheduler_here', new Date(2019,0,10), "month"); +scheduler.init('scheduler_here', new Date(2027,0,10), "month"); ... scheduler.load("/data/events"); ~~~ @@ -44,7 +44,7 @@ scheduler.load("/data/events"); ~~~ scheduler.config.max_month_events = 3; .. -scheduler.init('scheduler_here', new Date(2019,5,30), "month"); +scheduler.init('scheduler_here', new Date(2027,5,30), "month"); ~~~ 如果事件数量超过设定的上限，将会出现"View more"链接。点击该链接会跳转到日视图，完整显示全部事件。 @@ -89,7 +89,7 @@ scheduler.plugins({ // 点击日期时打开周视图 scheduler.config.active_link_view = "week"; ... -scheduler.init('scheduler_here', new Date(2012,7,6), "month"); +scheduler.init('scheduler_here', new Date(2027,7,6), "month"); ~~~ @@ -106,7 +106,7 @@ scheduler.init('scheduler_here', new Date(2012,7,6), "month"); // 允许通过拖拽调整多日事件大小 scheduler.config.resize_month_events = true; /*!*/ -scheduler.init('scheduler_here', new Date(2019,0,10), "month"); +scheduler.init('scheduler_here', new Date(2027,0,10), "month"); ~~~ [Resizable events in Month view](https://docs.dhtmlx.com/scheduler/samples/02_customization/32_resizable_month_events.html) @@ -118,7 +118,7 @@ scheduler.init('scheduler_here', new Date(2019,0,10), "month"); // 允许通过拖拽调整单日和多日事件大小 scheduler.config.resize_month_events = true;/*!*/ scheduler.config.resize_month_timed = true; /*!*/ -scheduler.init('scheduler_here', new Date(2019,0,10), "month"); +scheduler.init('scheduler_here', new Date(2027,0,10), "month"); ~~~ **请注意:** diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/views/timeline.md b/i18n/zh/docusaurus-plugin-content-docs/current/views/timeline.md index 6e981503..ab86ad78 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/views/timeline.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/views/timeline.md @@ -147,7 +147,7 @@ scheduler.createTimelineView({ ... }); -var timeline = scheduler.matrix.timeline; +const timeline = scheduler.matrix.timeline; ~~~ 创建后，可以使用以下方法。 @@ -157,7 +157,7 @@ var timeline = scheduler.matrix.timeline; 要获取 timeline 视图对象，请使用 [getView](api/method/getview.md) 方法。它接受视图名称作为参数。如果未传递参数，则返回当前视图。 ~~~js -var timeline = scheduler.getView(); +const timeline = scheduler.getView(); timeline.x_size = 8; scheduler.setCurrentView(); ~~~ @@ -250,7 +250,7 @@ timeline.scrollTo({left:300, top:500}); - 要获取时间刻度上某个日期的 X 坐标，使用 **posFromDate()** 并传递 Date 参数: ~~~js -var left = timeline.posFromDate(new Date()); +const left = timeline.posFromDate(new Date()); ~~~ :::note @@ -260,7 +260,7 @@ var left = timeline.posFromDate(new Date()); - 要获取某行的 Y 坐标，使用 **getSectionTop()** 并传递分区编号: ~~~js -var top = timeline.getSectionTop(section.key); +const top = timeline.getSectionTop(section.key); ~~~ :::note @@ -290,7 +290,7 @@ const top = timeline.getEventTop(scheduler.getEvent(event.id)); 要获取当前滚动条的位置，调用 **timeline.getScrollPosition()**，返回一个包含滚动坐标的对象: ~~~js -var timeline = scheduler.getView(); +const timeline = scheduler.getView(); timeline.getScrollPosition(); // { left: 0, top: 0 } ~~~ @@ -302,7 +302,7 @@ timeline.getScrollPosition(); // { left: 0, top: 0 } 你也可以使用 **onScroll** 事件监听滚动变化，该事件会接收新的 left 和 top 值: ~~~js -var timeline = scheduler.getView(); +const timeline = scheduler.getView(); timeline.attachEvent("onScroll", function(left, top){}); ~~~ @@ -328,9 +328,9 @@ timeline.attachEvent("onScroll", function(left, top){}); 此方法返回事件对象数组。 ~~~js -var timeline = scheduler.getView(); +const timeline = scheduler.getView(); -var events = timeline.selectEvents({ +const events = timeline.selectEvents({ section: section.key, date: date, selectNested: true @@ -383,11 +383,11 @@ scheduler.createTimelineView({ scheduler.init('scheduler_here'); scheduler.parse([ - {text:"Conference", start_date:"17/09/2012 12:00", end_date:"18/09/2012 21:00", + {text:"Conference", start_date:"17/09/2027 12:00", end_date:"18/09/2027 21:00", room_id:"1"}, - {text:"Meeting", start_date:"17/09/2012 09:00", end_date:"17/09/2012 21:00", + {text:"Meeting", start_date:"17/09/2027 09:00", end_date:"17/09/2027 21:00", room_id:"2"}, - {text:"Conference", start_date:"17/09/2012 15:00", end_date:"18/09/2012 15:00", + {text:"Conference", start_date:"17/09/2027 15:00", end_date:"18/09/2027 15:00", room_id:"3"} ]); ~~~ @@ -436,7 +436,7 @@ scheduler.createTimelineView({ y_property: "section_id", /*!*/ ... }); -scheduler.init('scheduler_here', new Date(2012, 5, 30), "timeline"); +scheduler.init('scheduler_here', new Date(2027, 5, 30), "timeline"); scheduler.parse([ { id:1, text:"Task A", section_id:'1', ...},/*!*/ @@ -589,9 +589,9 @@ scheduler.ignore_timeline = function(date){ // "timeline" 为视图名称 ~~~js scheduler._click.dhx_cal_next_button = function(dummy,step){ - var mode = scheduler.getState().mode; - var minDate = scheduler.getState().min_date; - var formFunc = scheduler.date.date_to_str("%D"); + const mode = scheduler.getState().mode; + const minDate = scheduler.getState().min_date; + const formFunc = scheduler.date.date_to_str("%D"); // 跳过周末 if(mode=='timeline'){ @@ -867,7 +867,7 @@ scheduler.createTimelineView({ render: "bar", scrollable: true, /*!*/ column_width: 70, /*!*/ - scroll_position:new Date(2018, 0, 15) /*!*/ + scroll_position:new Date(2027, 0, 15) /*!*/ }); ~~~ @@ -977,15 +977,15 @@ scheduler.createTimelineView({ scheduler.templates.timeline_cell_value = function (evs, date, section){ if(section.children){ - var timeline = scheduler.getView(); + const timeline = scheduler.getView(); - var events = timeline.selectEvents({ + const events = timeline.selectEvents({ section: section.key, date: date, selectNested: true }); - var className = ""; + let className = ""; if(!events.length){ className = "load-marker-no"; }else if(events.length < 3){ diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/views/units.md b/i18n/zh/docusaurus-plugin-content-docs/current/views/units.md index d2e5a4fa..0d51e427 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/views/units.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/views/units.md @@ -74,11 +74,11 @@ scheduler.createUnitsView({ scheduler.init('scheduler_here'); scheduler.parse([ - {id:1, text:"Task1", start_date:"2019-09-17 12:00", end_date:"2019-09-18 21:00", + {id:1, text:"Task1", start_date:"2027-09-17 12:00", end_date:"2027-09-18 21:00", unit_id:"1"}, - {id:2, text:"Task2", start_date:"2019-09-17 09:00", end_date:"2019-09-17 21:00", + {id:2, text:"Task2", start_date:"2027-09-17 09:00", end_date:"2027-09-17 21:00", unit_id:"3"}, - {id:3, text:"Task3", start_date:"2019-09-17 15:00", end_date:"2019-09-18 15:00", + {id:3, text:"Task3", start_date:"2027-09-17 15:00", end_date:"2027-09-18 15:00", unit_id:"2"} ]); ~~~ @@ -175,7 +175,7 @@ scheduler.createUnitsView({ property: "section_id", /*!*/ ... }); -scheduler.init('scheduler_here', new Date(2019, 5, 30), "unit"); +scheduler.init('scheduler_here', new Date(2027, 5, 30), "unit"); scheduler.parse([ { id:1, text:"Task A", section_id:'1', ...},/*!*/ @@ -236,15 +236,15 @@ scheduler.createUnitsView({ "data":[ { "id":"1", - "start_date":"2019-03-02 15:00:00", - "end_date":"2019-03-04 16:00:00", + "start_date":"2027-03-02 15:00:00", + "end_date":"2027-03-04 16:00:00", "text":"Team meeting", "type_id":"1" }, { "id":"2", - "start_date":"2019-03-02 17:00:00", - "end_date":"2019-03-04 18:00:00", + "start_date":"2027-03-02 17:00:00", + "end_date":"2027-03-04 18:00:00", "text":"Strategy meeting", "type_id":"2" } diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/views/week.md b/i18n/zh/docusaurus-plugin-content-docs/current/views/week.md index 8e218f4a..e80410fa 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/views/week.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/views/week.md @@ -16,7 +16,7 @@ sidebar_label: "周视图" ~~~js //标准初始化。周视图会自动添加 -scheduler.init('scheduler_here',new Date(2019,0,10),"week"); +scheduler.init('scheduler_here',new Date(2027,0,10),"week"); ... scheduler.load("/data/events"); ~~~ diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/whats-new.md b/i18n/zh/docusaurus-plugin-content-docs/current/whats-new.md index 83468cd8..5a105e56 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/whats-new.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/whats-new.md @@ -5,7 +5,112 @@ sidebar_label: "更新日志" # 更新日志 -如果您正在从早期版本升级 Scheduler，请参阅 [Migration From Older Versions](migration.md) 获取更多详细信息。 +如果您正在从旧版本更新 Scheduler，请查看 [从旧版本迁移](migration.md) 以了解详细信息。 + + +7.2.13 +------------- +2026年3月31日。错误修复版本 + +### 修复 + +- 修复 [React Scheduler](integrations/react/overview.md) 中的不正确的试用警告 +- 修复在 [React Scheduler](integrations/react/overview.md) 中与远程更新相关的回归问题：编辑事件时未将更改应用到现有事件 + + +7.2.12 +------------- +2026年3月23日。错误修复版本 + +### 修复 + +- 修复在使用非默认主题且启用 [cookie] 插件时，在重新加载页面时 [React Scheduler] 崩溃的问题 +- 修复在 [React Scheduler](integrations/react/overview.md) 中，`data` 属性中的 `save` URL 未正确应用的回归问题 +- 修复在“此及以下事件”模式中编辑一个非首个出现的 [重复事件] 时未应用所有 [Lightbox] 字段更改的问题 +- 修复基于事件条件动态更改 [Quick Info] 按钮时未正确更新弹出框的问题 +- 修复在“此事件及以下事件”模式中修改单个 [重复事件] 发生的文本在编辑后被后续发生覆盖的问题 +- 修复 [Quick Info] 弹出框的溢出样式，以正确处理较长的事件描述 +- 修复在 [React Scheduler](integrations/react/overview.md) 添加事件到现有数据集时，通过 `useState` 函数触发的脚本错误 + + +### 更新 + +- 新增：可以用自定义对话框替换 [recurring event confirmation modal](guides/recurring-events.md#customconfirmationmodal)。 +- 新增：可以在 [React Scheduler](integrations/react/overview.md) 中通过 modals.onRecurrenceConfirm 属性替换 [recurring event confirmation modal](integrations/react/overview.md#customizingtherecurrenceconfirmationmodal)。 + + +7.2.11 +------------- +2026年1月12日。错误修复版本 + +### 修复 + +- 修复在 [React Scheduler](integrations/react/overview.md) 中，如果 `save` 处理程序未返回新的 ID，新事件会被重复创建的问题 +- 修复在 [Timeline view](views/timeline.md) 模板未在 [React Scheduler](integrations/react/overview.md) 中应用的问题 +- 修复在 [Timeline view](views/timeline.md) 使用过滤时，事件绑定到分区的不正确问题，在 [React Scheduler](integrations/react/overview.md) 中 +- 修复在 [Agenda view](views/agenda.md) 中，当 [header configuration](guides/initialization.md#initializing-scheduler-via-header-config) 未包含 `date` 部分时的脚本错误 +- 修复在使用 [Material skin](guides/skins.md#material-skin) 时，[Year] 和 [Agenda] 视图的头部元素显示不正确的问题 +- 修复从基于插件的初始视图切换到标准视图时，在 [React Scheduler](integrations/react/overview.md) 中的布局问题 +- 修复当一个全天 [重复事件] 的持续时间恰好为 24 小时时，出现虚假事件块的问题 +- 修复在同一天通过拖拽创建多个事件时，在 [Month view] 中启用 `year_view` 插件后 [Lightbox] 无法打开的问题 + + +7.2.10 +------------- +2025年12月10日。错误修复版本 + +### 修复 + +- 修复在从最后一列拖动时，事件向左跳动的问题，这在 [multiday Units view] 中发生 +- 修复在特定月份中 [Month view] 某些日期单元格缺失的问题 +- 修复在移动设备上使用 [container_autoresize] 插件时的拖拽创建问题 +- 修复水平滚动后在 [Units view] 中通过双击创建事件时的失败问题 + + +7.2.9 +--------------- +2025年9月19日。错误修复版本 + +### 修复 + +- 修复在 [Timeline view] 中出现的内存泄漏 +- 修复 [container_autoresize] 插件与 [Week Agenda] 视图之间的兼容性问题 +- 修复 [onScaleDblClick] 未按预期触发的问题 +- 修复在处理 [重复事件] 时 [onEventSave] 与 [DataProcessor] 的行为不一致的问题 +- 修复 [React Scheduler] 中因组件的多个实例导致模板重复的问题 +- 修复在 [React Scheduler](integrations/react/overview.md) 中对 `events` prop 的变化处理不正确的问题 + + +## 7.2.8 + +2025年7月30日。错误修复版本 + +### 新增 + +- 为 [React Scheduler](integrations/react/overview.md) 添加了示例，覆盖 Commercial、Enterprise、Ultimate 以及 Evaluation 包 + +### 修复 + +- 修复在删除其后续出现项后拖动一个 [重复事件] 时行为不正确的问题 +- 确保对修改过的 [series instances]，Lightbox 的 “Repeat Event” 控件被禁用 +- 修复对 [recurring events] 的遗留标签显示不正确的问题 +- 修复 [max_month_events] 设置与 [multi-day events] 之间的冲突，这导致在 [Month view] 中事件消失或重叠 +- 确保通过 HTTPS 设置的 Scheduler cookies 现在包含 **Secure** 属性 +- 修复 [event_duration] 设置导致解析的事件数据损坏的问题 +- 修复 [time_step] 设置导致解析的事件数据损坏的问题 + + +## 7.2.6 + +2025年6月26日。错误修复版本 + +### 修复 + +- 修复事件时间的秒级精度问题 +- 修复在短月份期间 [Timeline view] 的拖拽行为不正确的问题 +- 修复 [Timeline view] 中事件的舍入不正确的问题 +- 防止 [DataProcessor] 向 [custom router] 参数添加 !nativeeditor_status 属性 + ## 7.2.5 From 968bd7e6d8fc91fbbb119627805a71e60748a4d3 Mon Sep 17 00:00:00 2001 From: Artyom Date: Mon, 11 May 2026 10:30:03 +0300 Subject: [PATCH 40/42] [dev] remove wrong active links --- docs/api/method/exporttopdf.md | 2 +- docs/api/method/exporttopng.md | 2 +- docs/export/excel.md | 10 +++++----- docs/export/pdf.md | 2 +- docs/export/png.md | 6 +++--- .../current/api/method/exporttopdf.md | 2 +- .../current/api/method/exporttopng.md | 2 +- .../current/export/excel.md | 10 +++++----- .../current/export/pdf.md | 2 +- .../current/export/png.md | 6 +++--- .../current/api/method/exporttopdf.md | 2 +- .../current/api/method/exporttopng.md | 2 +- .../current/export/excel.md | 10 +++++----- .../current/export/pdf.md | 2 +- .../current/export/png.md | 6 +++--- .../current/api/method/exporttopdf.md | 2 +- .../current/api/method/exporttopng.md | 2 +- .../current/export/excel.md | 10 +++++----- .../current/export/pdf.md | 2 +- .../current/export/png.md | 6 +++--- .../current/api/method/exporttopdf.md | 2 +- .../current/api/method/exporttopng.md | 2 +- .../current/export/excel.md | 10 +++++----- .../current/export/pdf.md | 2 +- .../current/export/png.md | 6 +++--- 25 files changed, 55 insertions(+), 55 deletions(-) diff --git a/docs/api/method/exporttopdf.md b/docs/api/method/exporttopdf.md index a79a9cba..f739af86 100644 --- a/docs/api/method/exporttopdf.md +++ b/docs/api/method/exporttopdf.md @@ -79,7 +79,7 @@ The **exportToPDF()** method takes as a parameter an object with a number of pro server - (string) sets the API endpoint for the request. Can be used with the local install of the export service. The default value is https://export.dhtmlx.com/scheduler + (string) sets the API endpoint for the request. Can be used with the local install of the export service. The default value is `https://export.dhtmlx.com/scheduler` additional_settings diff --git a/docs/api/method/exporttopng.md b/docs/api/method/exporttopng.md index 524de9b8..74a2c875 100644 --- a/docs/api/method/exporttopng.md +++ b/docs/api/method/exporttopng.md @@ -77,7 +77,7 @@ The **exportToPNG()** method takes as a parameter an object with a number of pro server - (string) sets the API endpoint for the request. Can be used with the local install of the export service. The default value is https://export.dhtmlx.com/scheduler + (string) sets the API endpoint for the request. Can be used with the local install of the export service. The default value is `https://export.dhtmlx.com/scheduler` diff --git a/docs/export/excel.md b/docs/export/excel.md index d62295a9..666a7684 100644 --- a/docs/export/excel.md +++ b/docs/export/excel.md @@ -9,14 +9,14 @@ Starting from version 4.2, dhtmlxScheduler provides a possibility to export all ## Limits on request size -There is a common API endpoint **https://export.dhtmlx.com/scheduler** which serves for export methods (*exportToPDF*, *exportToPNG*, etc.). **Max request size is 10 MB**. +There is a common API endpoint `https://export.dhtmlx.com/scheduler` which serves for export methods (*exportToPDF*, *exportToPNG*, etc.). **Max request size is 10 MB**. ## Export to Excel To export scheduler's data to an Excel document, do the following steps: -1. Include the "https://export.dhtmlx.com/scheduler/api.js" file on the page to enable the online export service: +1. Include the `https://export.dhtmlx.com/scheduler/api.js` file on the page to enable the online export service: ~~~html /*!*/ @@ -49,7 +49,7 @@ The **exportToExcel()** method takes as a parameter an object with several prope server - (string) sets the API endpoint for the request. Can be used with the local install of the export service. The default value is https://export.dhtmlx.com/scheduler + (string) sets the API endpoint for the request. Can be used with the local install of the export service. The default value is `https://export.dhtmlx.com/scheduler` start @@ -93,7 +93,7 @@ See the date format specification [here](guides/settings-format.md). To export scheduler's data to an iCal string, do the following steps: -- Include the "https://export.dhtmlx.com/scheduler/api.js" file on the page to enable the online export service: +- Include the `https://export.dhtmlx.com/scheduler/api.js` file on the page to enable the online export service: ~~~html @@ -121,7 +121,7 @@ The **exportToICal()** method takes as a parameter an object with the following server - (string) sets the API endpoint for the request. Can be used with the local install of the export service. The default value is https://export.dhtmlx.com/scheduler + (string) sets the API endpoint for the request. Can be used with the local install of the export service. The default value is `https://export.dhtmlx.com/scheduler` diff --git a/docs/export/pdf.md b/docs/export/pdf.md index db2f8c25..3a900df4 100644 --- a/docs/export/pdf.md +++ b/docs/export/pdf.md @@ -94,7 +94,7 @@ The [`exportToPDF()`](api/method/exporttopdf.md) method takes an object with a n server - (string) sets the API endpoint for the request. Can be used with the local install of the export service. The default value is https://export.dhtmlx.com/scheduler + (string) sets the API endpoint for the request. Can be used with the local install of the export service. The default value is `https://export.dhtmlx.com/scheduler` additional_settings diff --git a/docs/export/png.md b/docs/export/png.md index ddad0259..1e5ac6c9 100644 --- a/docs/export/png.md +++ b/docs/export/png.md @@ -22,7 +22,7 @@ read the [corresponding article](https://dhtmlx.com/docs/products/dhtmlxSchedule ## Limits on request size -There is a common API endpoint **https://export.dhtmlx.com/scheduler** which serves for export methods (*exportToPDF*, *exportToPNG*, etc.). **Max request size is 10 MB**. +There is a common API endpoint `https://export.dhtmlx.com/scheduler` which serves for export methods (*exportToPDF*, *exportToPNG*, etc.). **Max request size is 10 MB**. ## Default Export to PNG @@ -38,7 +38,7 @@ scheduler.plugins({ ~~~ :::note -If you use the Scheduler version older than 7.0, you need to include the **https://export.dhtmlx.com/scheduler/api.js** file on your page to enable the online export service, e.g.: +If you use the Scheduler version older than 7.0, you need to include the `https://export.dhtmlx.com/scheduler/api.js` file on your page to enable the online export service, e.g.: ~~~js @@ -86,7 +86,7 @@ The [exportToPNG()](api/method/exporttopng.md) method takes as a parameter an ob server - (string) sets the API endpoint for the request. Can be used with the local install of the export service. The default value is https://export.dhtmlx.com/scheduler + (string) sets the API endpoint for the request. Can be used with the local install of the export service. The default value is `https://export.dhtmlx.com/scheduler` diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/method/exporttopdf.md b/i18n/de/docusaurus-plugin-content-docs/current/api/method/exporttopdf.md index 87d56b93..e7dd3c33 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/api/method/exporttopdf.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/method/exporttopdf.md @@ -79,7 +79,7 @@ Die **exportToPDF()** Methode akzeptiert ein Objekt mit verschiedenen optionalen server - (string) die URL des API-Endpunkts, der die Exportanfrage verarbeitet. Dies kann auf einen lokalen Exportdienst verweisen. Standard ist https://export.dhtmlx.com/scheduler + (string) die URL des API-Endpunkts, der die Exportanfrage verarbeitet. Dies kann auf einen lokalen Exportdienst verweisen. Standard ist `https://export.dhtmlx.com/scheduler` additional_settings diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/method/exporttopng.md b/i18n/de/docusaurus-plugin-content-docs/current/api/method/exporttopng.md index 1d8bd9ef..1e45fbfe 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/api/method/exporttopng.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/method/exporttopng.md @@ -77,7 +77,7 @@ Die **exportToPNG()** Methode akzeptiert ein Objekt mit verschiedenen optionalen server - (string) der API-Endpunkt, der für die Export-Anfrage verwendet wird. Dies kann auf einen lokal installierten Export-Service zeigen. Standard ist https://export.dhtmlx.com/scheduler + (string) der API-Endpunkt, der für die Export-Anfrage verwendet wird. Dies kann auf einen lokal installierten Export-Service zeigen. Standard ist `https://export.dhtmlx.com/scheduler` diff --git a/i18n/de/docusaurus-plugin-content-docs/current/export/excel.md b/i18n/de/docusaurus-plugin-content-docs/current/export/excel.md index 5a3cf2bb..84c11b16 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/export/excel.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/export/excel.md @@ -9,14 +9,14 @@ Ab Version 4.2 ermöglicht dhtmlxScheduler das Exportieren aller Scheduler-Daten ## Beschränkungen der Anfragegröße -Es gibt einen gemeinsamen API-Endpunkt **https://export.dhtmlx.com/scheduler**, der für verschiedene Exportmethoden (*exportToPDF*, *exportToPNG*, usw.) verwendet wird. Die **maximale Anfragegröße beträgt 10 MB**. +Es gibt einen gemeinsamen API-Endpunkt `https://export.dhtmlx.com/scheduler`, der für verschiedene Exportmethoden (*exportToPDF*, *exportToPNG*, usw.) verwendet wird. Die **maximale Anfragegröße beträgt 10 MB**. ## Export nach Excel Um Scheduler-Daten in eine Excel-Datei zu exportieren, gehen Sie wie folgt vor: -1. Fügen Sie das Skript "https://export.dhtmlx.com/scheduler/api.js" auf Ihrer Seite hinzu, um den Online-Exportdienst zu aktivieren: +1. Fügen Sie das Skript `https://export.dhtmlx.com/scheduler/api.js` auf Ihrer Seite hinzu, um den Online-Exportdienst zu aktivieren: ~~~html /*!*/ @@ -49,7 +49,7 @@ Die **exportToExcel()**-Methode akzeptiert ein optionales Objekt mit mehreren Ei server - (string) Gibt den API-Endpunkt für die Exportanfrage an. Dies kann auf einen lokal installierten Exportdienst verweisen. Standard ist https://export.dhtmlx.com/scheduler + (string) Gibt den API-Endpunkt für die Exportanfrage an. Dies kann auf einen lokal installierten Exportdienst verweisen. Standard ist `https://export.dhtmlx.com/scheduler` start @@ -92,7 +92,7 @@ Weitere Details zur Datumsformatierung finden Sie in der Spezifikation [hier](gu Um Scheduler-Daten als iCal-String zu exportieren, gehen Sie wie folgt vor: -- Fügen Sie das Skript "https://export.dhtmlx.com/scheduler/api.js" ein, um den Online-Exportdienst zu aktivieren: +- Fügen Sie das Skript `https://export.dhtmlx.com/scheduler/api.js` ein, um den Online-Exportdienst zu aktivieren: ~~~html @@ -120,7 +120,7 @@ Die **exportToICal()**-Methode akzeptiert ein optionales Objekt mit folgender Ei server - (string) Gibt den API-Endpunkt für die Exportanfrage an. Dies kann auf einen lokal gehosteten Exportdienst gesetzt werden. Standard ist https://export.dhtmlx.com/scheduler + (string) Gibt den API-Endpunkt für die Exportanfrage an. Dies kann auf einen lokal gehosteten Exportdienst gesetzt werden. Standard ist `https://export.dhtmlx.com/scheduler` diff --git a/i18n/de/docusaurus-plugin-content-docs/current/export/pdf.md b/i18n/de/docusaurus-plugin-content-docs/current/export/pdf.md index b141b701..165f8006 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/export/pdf.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/export/pdf.md @@ -87,7 +87,7 @@ Die [`exportToPDF()`](api/method/exporttopdf.md) Methode nimmt ein Objekt mit me server - (string) legt den API-Endpunkt für die Anfrage fest. Kann zusammen mit der lokalen Installation des Export-Services verwendet werden. Der Standardwert ist https://export.dhtmlx.com/scheduler + (string) legt den API-Endpunkt für die Anfrage fest. Kann zusammen mit der lokalen Installation des Export-Services verwendet werden. Der Standardwert ist `https://export.dhtmlx.com/scheduler` additional_settings diff --git a/i18n/de/docusaurus-plugin-content-docs/current/export/png.md b/i18n/de/docusaurus-plugin-content-docs/current/export/png.md index 2142591f..651bc1de 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/export/png.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/export/png.md @@ -19,7 +19,7 @@ Beachten Sie, dass Exportdienste nicht im Scheduler-Paket enthalten sind. Detail ## Grenzen der Anfragegröße {#limitsonrequestsize} -Alle Exportmethoden (*exportToPDF*, *exportToPNG*, usw.) verwenden den gemeinsamen API-Endpunkt **https://export.dhtmlx.com/scheduler**. Die maximal zulässige Anfragegröße beträgt **10 MB**. +Alle Exportmethoden (*exportToPDF*, *exportToPNG*, usw.) verwenden den gemeinsamen API-Endpunkt `https://export.dhtmlx.com/scheduler`. Die maximal zulässige Anfragegröße beträgt **10 MB**. ## Standard-Export nach PNG {#defaultexporttopng} @@ -35,7 +35,7 @@ scheduler.plugins({ ~~~ :::note -Für Scheduler-Versionen älter als 7.0 müssen Sie zusätzlich das Skript **https://export.dhtmlx.com/scheduler/api.js** auf Ihrer Seite einbinden, um den Online-Exportdienst zu aktivieren, zum Beispiel: +Für Scheduler-Versionen älter als 7.0 müssen Sie zusätzlich das Skript `https://export.dhtmlx.com/scheduler/api.js` auf Ihrer Seite einbinden, um den Online-Exportdienst zu aktivieren, zum Beispiel: ~~~js @@ -85,7 +85,7 @@ Die Methode [exportToPNG()](api/method/exporttopng.md) akzeptiert ein Objekt mit server - (string) Gibt den API-Endpunkt für die Exportanfrage an. Nützlich, wenn Sie einen lokalen Exportdienst betreiben. Standard ist https://export.dhtmlx.com/scheduler + (string) Gibt den API-Endpunkt für die Exportanfrage an. Nützlich, wenn Sie einen lokalen Exportdienst betreiben. Standard ist `https://export.dhtmlx.com/scheduler` diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/method/exporttopdf.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/method/exporttopdf.md index e18deb25..86036e04 100644 --- a/i18n/ko/docusaurus-plugin-content-docs/current/api/method/exporttopdf.md +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/method/exporttopdf.md @@ -79,7 +79,7 @@ scheduler.exportToPDF({ server - (string) 내보내기 요청을 처리하는 API 엔드포인트의 URL입니다. 로컬 내보내기 서비스로도 지정할 수 있으며 기본값은 https://export.dhtmlx.com/scheduler입니다. + (string) 내보내기 요청을 처리하는 API 엔드포인트의 URL입니다. 로컬 내보내기 서비스로도 지정할 수 있으며 기본값은 `https://export.dhtmlx.com/scheduler` 입니다. additional_settings diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/method/exporttopng.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/method/exporttopng.md index 41030bd0..e50bb50e 100644 --- a/i18n/ko/docusaurus-plugin-content-docs/current/api/method/exporttopng.md +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/method/exporttopng.md @@ -77,7 +77,7 @@ scheduler.exportToPNG({ server - (string) 내보내기 요청에 사용되는 API 엔드포인트. 로컬에 설치된 export 서비스로도 지정 가능하며 기본값은 https://export.dhtmlx.com/scheduler 입니다. + (string) 내보내기 요청에 사용되는 API 엔드포인트. 로컬에 설치된 export 서비스로도 지정 가능하며 기본값은 `https://export.dhtmlx.com/scheduler` 입니다. diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/export/excel.md b/i18n/ko/docusaurus-plugin-content-docs/current/export/excel.md index a2674e99..8a2e980b 100644 --- a/i18n/ko/docusaurus-plugin-content-docs/current/export/excel.md +++ b/i18n/ko/docusaurus-plugin-content-docs/current/export/excel.md @@ -9,13 +9,13 @@ sidebar_label: "Excel 및 iCal로 내보내기" ## 요청 크기 한도 -내보내기 메서드(exportToPDF, exportToPNG 등)에 사용되는 일반 API 엔드포인트 https://export.dhtmlx.com/scheduler가 있습니다. 최대 요청 크기는 10 MB입니다. +내보내기 메서드(exportToPDF, exportToPNG 등)에 사용되는 일반 API 엔드포인트 `https://export.dhtmlx.com/scheduler` 가 있습니다. 최대 요청 크기는 10 MB입니다. ## Excel로 내보내기 스케줄러의 데이터를 Excel 문서로 내보내려면 다음 단계를 수행합니다: -1. 온라인 내보내기 서비스 기능을 활성화하려면 페이지에 "https://export.dhtmlx.com/scheduler/api.js" 파일을 포함하세요: +1. 온라인 내보내기 서비스 기능을 활성화하려면 페이지에 `https://export.dhtmlx.com/scheduler/api.js` 파일을 포함하세요: ~~~html /*!*/ @@ -47,7 +47,7 @@ The **exportToExcel()** 메서드는 매개변수로 여러 속성을 가진 객 server - (string) 요청의 API 엔드포인트를 설정합니다. 내보내기 서비스의 로컬 설치와 함께 사용할 수 있습니다. 기본 값은 https://export.dhtmlx.com/scheduler입니다 + (string) 요청의 API 엔드포인트를 설정합니다. 내보내기 서비스의 로컬 설치와 함께 사용할 수 있습니다. 기본 값은 `https://export.dhtmlx.com/scheduler` 입니다 start @@ -91,7 +91,7 @@ scheduler.templates.xml_format = scheduler.date.date_to_str("%Y-%m-%d %H:%i"); 스케줄러의 데이터를 iCal 문자열로 내보내려면 다음 단계를 수행합니다: -- 온라인 내보내기 서비스 기능을 활성화하려면 페이지에 "https://export.dhtmlx.com/scheduler/api.js" 파일을 포함하세요: +- 온라인 내보내기 서비스 기능을 활성화하려면 페이지에 `https://export.dhtmlx.com/scheduler/api.js` 파일을 포함하세요: ~~~html /*!*/ @@ -117,7 +117,7 @@ The **exportToICal()** 메서드는 다음 속성(선택 사항)을 가진 객 server - (string) 요청의 API 엔드포인트를 설정합니다. 내보내기 서비스의 로컬 설치와 함께 사용할 수 있습니다. 기본 값은 https://export.dhtmlx.com/scheduler입니다 + (string) 요청의 API 엔드포인트를 설정합니다. 내보내기 서비스의 로컬 설치와 함께 사용할 수 있습니다. 기본 값은 `https://export.dhtmlx.com/scheduler` 입니다 diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/export/pdf.md b/i18n/ko/docusaurus-plugin-content-docs/current/export/pdf.md index e15d5d08..e538a4a3 100644 --- a/i18n/ko/docusaurus-plugin-content-docs/current/export/pdf.md +++ b/i18n/ko/docusaurus-plugin-content-docs/current/export/pdf.md @@ -92,7 +92,7 @@ Scheduler 버전이 7.0 미만인 경우 온라인 내보내기 서비스를 활 server - (string) 요청의 API 엔드포인트를 설정합니다. 로컬에 설치된 내보내기 서비스와 함께 사용할 수 있습니다. 기본값은 https://export.dhtmlx.com/scheduler + (string) 요청의 API 엔드포인트를 설정합니다. 로컬에 설치된 내보내기 서비스와 함께 사용할 수 있습니다. 기본값은 `https://export.dhtmlx.com/scheduler` additional_settings diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/export/png.md b/i18n/ko/docusaurus-plugin-content-docs/current/export/png.md index 537ddb01..102226a8 100644 --- a/i18n/ko/docusaurus-plugin-content-docs/current/export/png.md +++ b/i18n/ko/docusaurus-plugin-content-docs/current/export/png.md @@ -19,7 +19,7 @@ sidebar_label: "PNG로 내보내기" ## 요청 크기 제한 -공통 API 엔드포인트 **https://export.dhtmlx.com/scheduler** 는 내보내기 방법들(exportToPDF, exportToPNG 등)을 제공합니다. **최대 요청 크기 10 MB**입니다. +공통 API 엔드포인트 `https://export.dhtmlx.com/scheduler` 는 내보내기 방법들(exportToPDF, exportToPNG 등)을 제공합니다. **최대 요청 크기 10 MB**입니다. ## 기본 PNG 내보내기 @@ -34,7 +34,7 @@ scheduler.plugins({ ~~~ :::note -Scheduler 버전이 7.0 미만인 경우, 온라인 내보내기 서비스를 활성화하려면 페이지에 https://export.dhtmlx.com/scheduler/api.js 파일을 포함해야 합니다. 예를 들면: +Scheduler 버전이 7.0 미만인 경우, 온라인 내보내기 서비스를 활성화하려면 페이지에 `https://export.dhtmlx.com/scheduler/api.js` 파일을 포함해야 합니다. 예를 들면: ~~~js @@ -80,7 +80,7 @@ Scheduler 버전이 7.0 미만인 경우, 온라인 내보내기 서비스를 server - (string) 요청의 API 엔드포인트를 설정합니다. 로컬로 내보내기 서비스를 설치한 경우에도 사용할 수 있습니다. 기본값은 https://export.dhtmlx.com/scheduler + (string) 요청의 API 엔드포인트를 설정합니다. 로컬로 내보내기 서비스를 설치한 경우에도 사용할 수 있습니다. 기본값은 `https://export.dhtmlx.com/scheduler` diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/exporttopdf.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/exporttopdf.md index c83e103b..cc36f627 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/exporttopdf.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/exporttopdf.md @@ -78,7 +78,7 @@ scheduler.exportToPDF({ server - (string) задает API endpoint для запроса. Может использоваться с локальной установкой сервиса экспорта. Значение по умолчанию https://export.dhtmlx.com/scheduler + (string) задает API endpoint для запроса. Может использоваться с локальной установкой сервиса экспорта. Значение по умолчанию `https://export.dhtmlx.com/scheduler` additional_settings diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/exporttopng.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/exporttopng.md index 45d73bf7..4919c008 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/api/method/exporttopng.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/method/exporttopng.md @@ -77,7 +77,7 @@ The **exportToPNG()** method takes as a parameter an object with a number of pro server - (string) задаёт API endpoint для запроса. Может использоваться с локальной установкой сервиса экспорта. Значение по умолчанию: https://export.dhtmlx.com/scheduler + (string) задаёт API endpoint для запроса. Может использоваться с локальной установкой сервиса экспорта. Значение по умолчанию: `https://export.dhtmlx.com/scheduler` diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/export/excel.md b/i18n/ru/docusaurus-plugin-content-docs/current/export/excel.md index a088c9bd..47cec901 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/export/excel.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/export/excel.md @@ -9,14 +9,14 @@ sidebar_label: "Экспорт в Excel и iCal" ## Ограничения на размер запроса -Существует общий API-эндпоинт **https://export.dhtmlx.com/scheduler**, используемый для различных методов экспорта (*exportToPDF*, *exportToPNG* и др.). **Максимальный размер запроса - 10 МБ**. +Существует общий API-эндпоинт `https://export.dhtmlx.com/scheduler`, используемый для различных методов экспорта (*exportToPDF*, *exportToPNG* и др.). **Максимальный размер запроса - 10 МБ**. ## Экспорт в Excel Чтобы экспортировать данные планировщика в файл Excel, выполните следующие шаги: -1. Добавьте скрипт "https://export.dhtmlx.com/scheduler/api.js" на вашу страницу для активации онлайн-сервиса экспорта: +1. Добавьте скрипт `https://export.dhtmlx.com/scheduler/api.js` на вашу страницу для активации онлайн-сервиса экспорта: ~~~html /*!*/ @@ -49,7 +49,7 @@ sidebar_label: "Экспорт в Excel и iCal" server - (string) указывает API-эндпоинт для запроса экспорта. Может указывать на локально установленный сервис экспорта. По умолчанию https://export.dhtmlx.com/scheduler + (string) указывает API-эндпоинт для запроса экспорта. Может указывать на локально установленный сервис экспорта. По умолчанию `https://export.dhtmlx.com/scheduler` start @@ -92,7 +92,7 @@ scheduler.templates.xml_format = scheduler.date.date_to_str("%Y-%m-%d %H:%i"); Чтобы экспортировать данные планировщика в строку iCal, выполните следующие шаги: -- Подключите скрипт "https://export.dhtmlx.com/scheduler/api.js" для активации онлайн-сервиса экспорта: +- Подключите скрипт `https://export.dhtmlx.com/scheduler/api.js` для активации онлайн-сервиса экспорта: ~~~html @@ -120,7 +120,7 @@ scheduler.templates.xml_format = scheduler.date.date_to_str("%Y-%m-%d %H:%i"); server - (string) указывает API-эндпоинт для запроса экспорта. Может быть настроен на локально размещённый сервис экспорта. По умолчанию https://export.dhtmlx.com/scheduler + (string) указывает API-эндпоинт для запроса экспорта. Может быть настроен на локально размещённый сервис экспорта. По умолчанию `https://export.dhtmlx.com/scheduler` diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/export/pdf.md b/i18n/ru/docusaurus-plugin-content-docs/current/export/pdf.md index 36832ecc..dd76aa3a 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/export/pdf.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/export/pdf.md @@ -91,7 +91,7 @@ scheduler.plugins({ server - (string) устанавливает API-эндпойнт для запроса. Может использоваться с локальной установкой сервиса экспорта. Значение по умолчанию: https://export.dhtmlx.com/scheduler + (string) устанавливает API-эндпойнт для запроса. Может использоваться с локальной установкой сервиса экспорта. Значение по умолчанию: `https://export.dhtmlx.com/scheduler` additional_settings diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/export/png.md b/i18n/ru/docusaurus-plugin-content-docs/current/export/png.md index 062eaa70..6c0735a4 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/export/png.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/export/png.md @@ -19,7 +19,7 @@ sidebar_label: "Экспорт в PNG" ## Ограничения на размер запроса {#limitsonrequestsize} -Все методы экспорта (*exportToPDF*, *exportToPNG* и др.) используют общий API-эндпоинт **https://export.dhtmlx.com/scheduler**. Максимально допустимый размер запроса - **10 МБ**. +Все методы экспорта (*exportToPDF*, *exportToPNG* и др.) используют общий API-эндпоинт `https://export.dhtmlx.com/scheduler`. Максимально допустимый размер запроса - **10 МБ**. ## Экспорт в PNG по умолчанию {#defaultexporttopng} @@ -35,7 +35,7 @@ scheduler.plugins({ ~~~ :::note -Для версий Scheduler младше 7.0 необходимо также добавить скрипт **https://export.dhtmlx.com/scheduler/api.js** на вашу страницу для активации онлайн-сервиса экспорта, например: +Для версий Scheduler младше 7.0 необходимо также добавить скрипт `https://export.dhtmlx.com/scheduler/api.js` на вашу страницу для активации онлайн-сервиса экспорта, например: ~~~js @@ -85,7 +85,7 @@ scheduler.plugins({ server - (string) указывает API-эндпоинт для запроса экспорта. Полезно, если вы используете локальный сервис экспорта. По умолчанию https://export.dhtmlx.com/scheduler + (string) указывает API-эндпоинт для запроса экспорта. Полезно, если вы используете локальный сервис экспорта. По умолчанию `https://export.dhtmlx.com/scheduler` diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/exporttopdf.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/exporttopdf.md index a08141a2..1f5b3612 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/exporttopdf.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/exporttopdf.md @@ -79,7 +79,7 @@ scheduler.exportToPDF({ server - (string) 处理导出请求的 API 端点 URL，可指向本地导出服务。默认值为 https://export.dhtmlx.com/scheduler + (string) 处理导出请求的 API 端点 URL，可指向本地导出服务。默认值为 `https://export.dhtmlx.com/scheduler` additional_settings diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/exporttopng.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/exporttopng.md index bac4b7a4..4978df23 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/method/exporttopng.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/method/exporttopng.md @@ -77,7 +77,7 @@ scheduler.exportToPNG({ server - (string) 用于导出请求的 API 端点。可以指向本地安装的导出服务。默认值为 https://export.dhtmlx.com/scheduler + (string) 用于导出请求的 API 端点。可以指向本地安装的导出服务。默认值为 `https://export.dhtmlx.com/scheduler` diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/export/excel.md b/i18n/zh/docusaurus-plugin-content-docs/current/export/excel.md index 64ec361c..8f71d4e6 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/export/excel.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/export/excel.md @@ -9,14 +9,14 @@ sidebar_label: "导出为 Excel 和 iCal" ## 请求大小限制 -有一个共享的 API 端点 **https://export.dhtmlx.com/scheduler**，用于多种导出方法（如 *exportToPDF*、*exportToPNG* 等）。**最大请求大小为 10 MB**。 +有一个共享的 API 端点 `https://export.dhtmlx.com/scheduler`，用于多种导出方法（如 *exportToPDF*、*exportToPNG* 等）。**最大请求大小为 10 MB**。 ## 导出为 Excel 要将调度器数据导出为 Excel 文件，请按照以下步骤操作: -1. 在页面中添加 "https://export.dhtmlx.com/scheduler/api.js" 脚本以启用在线导出服务: +1. 在页面中添加 `https://export.dhtmlx.com/scheduler/api.js` 脚本以启用在线导出服务: ~~~html /*!*/ @@ -49,7 +49,7 @@ sidebar_label: "导出为 Excel 和 iCal" server - (string) 指定导出请求的 API 端点。可以指向本地安装的导出服务。默认值为 https://export.dhtmlx.com/scheduler + (string) 指定导出请求的 API 端点。可以指向本地安装的导出服务。默认值为 `https://export.dhtmlx.com/scheduler` start @@ -92,7 +92,7 @@ scheduler.templates.xml_format = scheduler.date.date_to_str("%Y-%m-%d %H:%i"); 要将调度器数据导出为 iCal 字符串，请按照以下步骤操作: -- 引入 "https://export.dhtmlx.com/scheduler/api.js" 脚本以启用在线导出服务: +- 引入 `https://export.dhtmlx.com/scheduler/api.js` 脚本以启用在线导出服务: ~~~html @@ -120,7 +120,7 @@ scheduler.templates.xml_format = scheduler.date.date_to_str("%Y-%m-%d %H:%i"); server - (string) 指定导出请求的 API 端点。可以设置为本地部署的导出服务。默认值为 https://export.dhtmlx.com/scheduler + (string) 指定导出请求的 API 端点。可以设置为本地部署的导出服务。默认值为 `https://export.dhtmlx.com/scheduler` diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/export/pdf.md b/i18n/zh/docusaurus-plugin-content-docs/current/export/pdf.md index 0e74f8fb..dc0add12 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/export/pdf.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/export/pdf.md @@ -85,7 +85,7 @@ scheduler.plugins({ server - (string) 导出请求的 API 端点 URL。如果使用本地导出服务可设置此项。默认值为 https://export.dhtmlx.com/scheduler + (string) 导出请求的 API 端点 URL。如果使用本地导出服务可设置此项。默认值为 `https://export.dhtmlx.com/scheduler` additional_settings diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/export/png.md b/i18n/zh/docusaurus-plugin-content-docs/current/export/png.md index 86f5e687..1d803b27 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/export/png.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/export/png.md @@ -19,7 +19,7 @@ sidebar_label: "导出为 PNG" ## 请求大小限制 {#limitsonrequestsize} -所有导出方法（如 *exportToPDF*、*exportToPNG* 等）都使用统一的 API 端点 **https://export.dhtmlx.com/scheduler**。允许的最大请求大小为 **10 MB**。 +所有导出方法（如 *exportToPDF*、*exportToPNG* 等）都使用统一的 API 端点 `https://export.dhtmlx.com/scheduler`。允许的最大请求大小为 **10 MB**。 ## 默认导出为 PNG {#defaultexporttopng} @@ -35,7 +35,7 @@ scheduler.plugins({ ~~~ :::note -对于 7.0 之前的 Scheduler 版本，还需要在页面中引入 **https://export.dhtmlx.com/scheduler/api.js** 脚本以激活在线导出服务，例如: +对于 7.0 之前的 Scheduler 版本，还需要在页面中引入 `https://export.dhtmlx.com/scheduler/api.js` 脚本以激活在线导出服务，例如: ~~~js @@ -85,7 +85,7 @@ scheduler.plugins({ server - (string) 指定导出请求的 API 端点。如果您运行了本地导出服务，可用此参数。默认值为 https://export.dhtmlx.com/scheduler + (string) 指定导出请求的 API 端点。如果您运行了本地导出服务，可用此参数。默认值为 `https://export.dhtmlx.com/scheduler` From bf05deae7b344e55f880091f005054ec5113c7c2 Mon Sep 17 00:00:00 2001 From: Artyom Date: Mon, 1 Jun 2026 11:24:01 +0300 Subject: [PATCH 41/42] [upd] update article to Angular 21 --- .../angular/howtostart-angular.md | 154 ++++++++---------- 1 file changed, 64 insertions(+), 90 deletions(-) diff --git a/docs/integrations/angular/howtostart-angular.md b/docs/integrations/angular/howtostart-angular.md index 38888fc0..5e9ffa9d 100644 --- a/docs/integrations/angular/howtostart-angular.md +++ b/docs/integrations/angular/howtostart-angular.md @@ -73,33 +73,20 @@ Alternatively, since the zip-package of the library is structured as an **npm** ## Step 2. Component creation -Now we should create a component to add a Scheduler into the application. Let's create the ***scheduler*** folder in the ***src/app/*** directory, -add new files into it and call them ***scheduler.component.ts***, ***scheduler.component.css*** and ***scheduler.component.html***. +Now we should create a component to add a Scheduler into the application. Let's create the ***components*** folder in the ***src/app/*** directory with ***scheduler*** folder and add new files into it and call them ***scheduler.component.ts***, ***scheduler.component.css*** and ***scheduler.component.html***. The newly created ***scheduler.component.html*** file inside the ***scheduler*** folder will contain the template for the scheduler. Let's add the following lines of code into it: -~~~html title="scheduler/scheduler.component.html" -
-
-
-
-
-
-
-
-
-
-
-
-
+~~~html title="components/scheduler/scheduler.component.html" +
~~~ We'll declare scheduler styles in a separate file named ***scheduler.component.css***. The default styles can look like this: -~~~css title="scheduler/scheduler.component.css" +~~~css title="components/scheduler/scheduler.component.css" @import "@dhx/trial-scheduler/codebase/dhtmlxscheduler.css"; :host { display: block; @@ -156,21 +143,22 @@ In this tutorial we will use the **trial** version of Scheduler. To display Scheduler on the page, we need to set the container to render the component inside. Use the code below: -~~~js title="scheduler.component.ts" +~~~js title="components/scheduler/scheduler.component.ts" import { Scheduler, SchedulerStatic } from "@dhx/trial-scheduler"; import { Component, ElementRef, OnInit, OnDestroy, ViewChild, ViewEncapsulation } from "@angular/core"; @Component({ encapsulation: ViewEncapsulation.None, - selector: "scheduler", - styleUrls: ["./scheduler.component.css"], - templateUrl: 'scheduler.component.html' + selector: 'app-scheduler', + standalone: true, + styleUrl: './scheduler.component.css', + templateUrl: './scheduler.component.html', }) export class SchedulerComponent implements OnInit, OnDestroy { @ViewChild("scheduler_here", { static: true }) schedulerContainer!: ElementRef; - private _scheduler?: SchedulerStatic; + private scheduler?: SchedulerStatic; ngOnInit() { let scheduler = Scheduler.getSchedulerInstance(); @@ -179,11 +167,11 @@ export class SchedulerComponent implements OnInit, OnDestroy { new Date(2027, 9, 7), "week", ); - this._scheduler = scheduler; + this.scheduler = scheduler; } ngOnDestroy() { - if (this._scheduler) this._scheduler.destructor(); + this.scheduler?.destructor(); } } ~~~ @@ -193,50 +181,29 @@ contains the [**scheduler.destructor()**](api/method/destructor.md) call to clea ## Step 3. Adding Scheduler into the app -Now it's time to add the component into our app. Open ***src/app/app.component.ts*** and use the Scheduler Component instead of the default content by inserting +Now it's time to add the component into our app. Open ***src/app/app.ts*** and use the Scheduler Component instead of the default content by inserting the code below: -~~~js title="src/app/app.component.ts" +~~~js title="src/app/app.ts" import { Component } from '@angular/core'; +import { SchedulerComponent } from './components/scheduler/scheduler.component'; @Component({ selector: 'app-root', - template: ``, + standalone: true, + imports: [SchedulerComponent], + templateUrl: './app.html', + styleUrls: ['./app.css'] }) -export class AppComponent { - name = ''; -} -~~~ -Then create the ***app.module.ts*** file in the ***src/app/*** directory and insert *SchedulerComponent* as provided below: - - -~~~js title="src/app/app.module.ts" -import { NgModule } from "@angular/core"; -import { BrowserModule } from "@angular/platform-browser"; - -import { AppComponent } from "./app.component"; -import { SchedulerComponent } from "./scheduler/scheduler.component"; - -@NgModule({ - declarations: [AppComponent, SchedulerComponent], - imports: [BrowserModule], - providers: [], - bootstrap: [AppComponent], -}) -export class AppModule {} +export class App {} ~~~ -The last step is to open the ***src/main.ts*** file and replace the existing code with the following one: +Then remove the initial code from the ***app.html*** file in the ***src/app/*** directory and insert a selector as provided below: -~~~js title="src/main.ts" -import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"; -import { AppModule } from "./app/app.module"; - -platformBrowserDynamic() - .bootstrapModule(AppModule) - .catch((err) => console.error(err)); +~~~js title="src/app/app.html" + ~~~ After that, when we start the app, we should see an empty Scheduler on a page. @@ -250,17 +217,17 @@ To add data loading to the Angular Scheduler, you need to add an event service. For creating the event model, run the following command: ~~~ -ng generate class models/event --skip-tests +ng generate class models/schedulerEvent --skip-tests ~~~ -In the newly created ***event.ts*** file inside the ***models*** folder, we will add the following lines of code: +In the newly created ***scheduler-event.ts*** file inside the ***models*** folder, we will add the following lines of code: -~~~js title="models/event.ts" -export class Event { - id!: number; - start_date!: string; - end_date!: string; - text!: string; +~~~js title="models/scheduler-event.ts" +export interface SchedulerEvent { + id: number; + start_date: string; + end_date: string; + text: string; } ~~~ @@ -278,18 +245,22 @@ In the newly created ***event.service.ts*** file inside the ***services*** folde ~~~js title="services/event.service.ts" import { Injectable } from '@angular/core'; -import { Event } from "../models/event"; +import { SchedulerEvent } from "../models/scheduler-event"; @Injectable() export class EventService { - get(): Promise{ - return Promise.resolve([ - { id: 1, start_date: "2027-05-16 09:00", end_date: "2027-05-16 13:00", - text: "Event 1" }, - { id: 2, start_date: "2027-05-18 10:00", end_date: "2027-05-18 14:00", - text: "Event 2" }, - ]); - } + get(): Promise { + return Promise.resolve([ + { + id: 1, start_date: "2027-10-06 09:00", end_date: "2027-10-06 13:00", + text: "Event 1" + }, + { + id: 2, start_date: "2027-10-08 10:00", end_date: "2027-10-08 14:00", + text: "Event 2" + }, + ]); + } } ~~~ @@ -301,7 +272,7 @@ First, import the necessary module for the service in ***scheduler.component.ts* ~~~js title="scheduler.component.ts" -import {EventService} from "../services/event.service"; +import {EventService} from "../../services/event.service"; ~~~ You should also specify **EventService** as a provider in the **@Component** decorator: @@ -310,10 +281,11 @@ You should also specify **EventService** as a provider in the **@Component** dec ~~~js title="scheduler.component.ts" @Component({ encapsulation: ViewEncapsulation.None, - selector: "scheduler", + selector: 'app-scheduler', + standalone: true, providers: [EventService], - styleUrls: ["./scheduler.component.css"], - templateUrl: 'scheduler.component.html' + styleUrl: './scheduler.component.css', + templateUrl: './scheduler.component.html', }) ~~~ @@ -321,7 +293,7 @@ Now, every time a new *SchedulerComponent* is initialized, a fresh instance of t For this purpose, add the following constructor to the **SchedulerComponent** class: -~~~ title="scheduler.component.ts" +~~~js title="scheduler.component.ts" constructor(private eventService: EventService){} ~~~ @@ -345,37 +317,39 @@ The complete code of the ***scheduler.components.ts*** file will look like this: ~~~ts title="scheduler.component.ts" import { Scheduler, SchedulerStatic } from "@dhx/trial-scheduler"; -import { Component, ElementRef, OnInit, OnDestroy, - ViewChild, ViewEncapsulation } from "@angular/core"; -import {EventService} from "../services/event.service"; +import { + Component, ElementRef, OnInit, OnDestroy, + ViewChild, ViewEncapsulation +} from "@angular/core"; +import { EventService } from "../../services/event.service"; @Component({ encapsulation: ViewEncapsulation.None, - selector: "scheduler", + selector: 'app-scheduler', + standalone: true, providers: [EventService], - styleUrls: ['scheduler.component.css'], - templateUrl: 'scheduler.component.html' + styleUrl: './scheduler.component.css', + templateUrl: './scheduler.component.html', }) export class SchedulerComponent implements OnInit, OnDestroy { @ViewChild("scheduler_here", { static: true }) schedulerContainer!: ElementRef; - private _scheduler?: SchedulerStatic; + private scheduler?: SchedulerStatic; constructor(private eventService: EventService) { } ngOnInit() { let scheduler = Scheduler.getSchedulerInstance(); - scheduler.config.date_format = "%Y-%m-%d %H:%i"; scheduler.init( this.schedulerContainer.nativeElement, new Date(2027, 9, 7), - "week", + "week", ); - this.eventService.get().then((data) => {scheduler.parse(data);}); - this._scheduler = scheduler; + this.eventService.get().then((data) => { scheduler.parse(data); }); + this.scheduler = scheduler; } ngOnDestroy() { - if (this._scheduler) this._scheduler.destructor(); + this.scheduler?.destructor(); } } ~~~ From d1c627539e6274b2b1eb131d4819fc4d63e92f42 Mon Sep 17 00:00:00 2001 From: Artyom Borisevich Date: Tue, 2 Jun 2026 14:02:35 +0300 Subject: [PATCH 42/42] [upd] update js react scheduler article to TS --- docs/integrations/react/js-scheduler-react.md | 133 ++++++++++-------- 1 file changed, 78 insertions(+), 55 deletions(-) diff --git a/docs/integrations/react/js-scheduler-react.md b/docs/integrations/react/js-scheduler-react.md index 6a4b712c..e199f4f9 100644 --- a/docs/integrations/react/js-scheduler-react.md +++ b/docs/integrations/react/js-scheduler-react.md @@ -16,15 +16,15 @@ Before you start to create a new project, install [Node.js](https://nodejs.org/e You can create a basic React project using the following command: -~~~ -npx create-vite my-react-scheduler-app --template react +~~~bash +npm create vite@latest my-react-scheduler-app -- --template react-ts ~~~ ### Installation of dependencies Next you should go to the app directory. Let's call our project **my-react-scheduler-app** and run: -~~~ +~~~bash cd my-react-scheduler-app ~~~ @@ -32,14 +32,14 @@ After that you should install dependencies and start the dev server. For this, y - if you use yarn, you need to call the following commands: -~~~ -yarn install +~~~bash +yarn yarn dev ~~~ - if you use npm, you need to call the following commands: -~~~ +~~~bash npm install npm run dev ~~~ @@ -62,13 +62,13 @@ After you've got the Evaluation version of the Scheduler, you can install it wit - for npm: -~~~ +~~~bash npm install @dhx/trial-scheduler ~~~ - for yarn: -~~~ +~~~bash yarn add @dhx/trial-scheduler ~~~ @@ -78,7 +78,7 @@ Alternatively, since the zip-package of the library is structured as an **npm** ## Step 2. Component creation Now we should create a React component, to add a Scheduler into the application. Let's create the ***src/components/Scheduler*** folder. -Here we'll create the ***Scheduler.jsx***, ***Scheduler.css*** and ***index.js*** files. +Here we'll create the ***Scheduler.tsx***, ***Scheduler.css*** and ***index.ts*** files. We need to create the ***Scheduler.css*** file and add styles for the *scheduler-container*: @@ -93,19 +93,19 @@ We need to create the ***Scheduler.css*** file and add styles for the *scheduler To make the Scheduler container occupy the entire space of the body, you need to remove the default styles from the ***App.css*** file located in the ***src*** folder and add the following one: -~~~css -#root { - margin: 0; - padding: 0; - height: 100%; - width: 100%; +~~~css title="src/App.css" +#root, body { + margin: 0; + padding: 0; + height: 100%; + width: 100%; } ~~~ -And add the ***index.js*** file with the following content: +And add the ***index.ts*** file with the following content: -~~~js title="src/components/Scheduler/index.js" +~~~js title="src/components/Scheduler/index.ts" import Scheduler from './Scheduler'; import './Scheduler.css'; export default Scheduler; @@ -113,19 +113,19 @@ export default Scheduler; ### Importing source files -Open the newly created ***Scheduler.jsx*** file and import Scheduler source files. Note that: +Open the newly created ***Scheduler.tsx*** file and import Scheduler source files. Note that: - if you've installed the Scheduler package from a local folder, your import paths will look like this: -~~~js title="Scheduler.jsx" +~~~js title="Scheduler.tsx" import { Scheduler } from 'dhtmlx-scheduler'; import 'dhtmlx-scheduler/codebase/dhtmlxscheduler.css'; ~~~ - if you've chosen to install the trial version, the import paths should be as in: -~~~js title="Scheduler.jsx" +~~~js title="Scheduler.tsx" import { Scheduler } from '@dhx/trial-scheduler'; import '@dhx/trial-scheduler/codebase/dhtmlxscheduler.css'; ~~~ @@ -134,18 +134,20 @@ In this tutorial we will use the **trial** version of Scheduler. ### Setting the container and adding Scheduler -To display Scheduler on the page, we need to set the container to render the component inside. Create the ***Scheduler.jsx*** file with the following code: +To display Scheduler on the page, we need to set the container to render the component inside. Create the ***Scheduler.tsx*** file with the following code: -~~~js title="src/components/Scheduler/Scheduler.jsx" +~~~js title="src/components/Scheduler/Scheduler.tsx" import { useEffect, useRef } from "react"; import { Scheduler } from "@dhx/trial-scheduler"; import "@dhx/trial-scheduler/codebase/dhtmlxscheduler.css"; -export default function SchedulerView( ) { - let container = useRef(); +export default function SchedulerComponent() { + const containerRef = useRef(null); useEffect(() => { + if (!containerRef.current) { + return; + } let scheduler = Scheduler.getSchedulerInstance(); - scheduler.skin = "terrace"; scheduler.config.header = [ "day", "week", @@ -156,25 +158,25 @@ export default function SchedulerView( ) { "next", ]; - scheduler.init(container.current, new Date(2024, 5, 10)); + scheduler.init(containerRef.current, new Date(2027, 5, 10)); return () => { scheduler.destructor(); - container.current.innerHTML = ""; + if (containerRef.current) { + containerRef.current.innerHTML = ""; + } }; }, []); - return ( -
- ); + return
; } ~~~ ## Step 3. Adding Scheduler into the app -Now it's time to add the component into our app. Open ***src/App.jsx*** and use the *Scheduler* component instead of the default content by inserting the code below: +Now it's time to add the component into our app. Open ***src/App.tsx*** and use the *Scheduler* component instead of the default content by inserting the code below: -~~~js title="src/App.jsx" -import Scheduler from "./components/Scheduler"; +~~~js title="src/App.tsx" +import Scheduler from "./components/index"; import "./App.css"; function App() { @@ -193,44 +195,62 @@ After that, when we start the app, we should see an empty Scheduler on a page: ## Step 4. Providing Data -To add data into the Scheduler, we need to provide a data set. Let's create the ***data.js*** file in the ***src/*** directory and add some data into it: +Before adding data to the Scheduler, let's create types for scheduler events and props that Scheduler will receive: +~~~ts title="src/types.ts" +export interface SchedulerEvent { + id: string | number; + text?: string; + start_date: string | Date; + end_date: string | Date; + [key: string]: unknown; +} + +export interface SchedulerComponentProps { + events: SchedulerEvent[]; +} +~~~ + +To add data into the Scheduler, we need to provide a data set. Let's create the ***data.ts*** file in the ***src/*** directory and add some data into it: -~~~js title="src/data.js" -export function getData() { - const data = [ +~~~js title="src/data.ts" +import type { SchedulerEvent } from "./types"; + +export function getData(): SchedulerEvent[] { + const initialEvents: SchedulerEvent[] = [ { - start_date: "2024-06-10 6:00", - end_date: "2024-06-10 8:00", + start_date: "2027-06-10 6:00", + end_date: "2027-06-10 12:00", text: "Event 1", id: 1, }, { - start_date: "2024-06-13 10:00", - end_date: "2024-06-13 18:00", + start_date: "2027-06-13 10:00", + end_date: "2027-06-13 18:00", text: "Event 2", id: 2, }, ]; - return data; + return initialEvents; } ~~~ -And we should [pass props (our data)](https://react.dev/learn/passing-props-to-a-component) to a Scheduler component in ***App.jsx***: +And we should [pass props (our data)](https://react.dev/learn/passing-props-to-a-component) to a Scheduler component in ***App.tsx***: -~~~js title="App.jsx" -import { getData } from "./data.js"; -import Scheduler from "./components/Scheduler"; +~~~js title="App.tsx" +import { getData } from "./data.ts"; +import Scheduler from "./components/index"; import "./App.css"; function App() { return (
- +
); } + export default App; ~~~ @@ -241,12 +261,15 @@ And use props in the **scheduler.parse()** method in the Scheduler component: import { useEffect, useRef } from "react"; import { Scheduler } from "@dhx/trial-scheduler"; import "@dhx/trial-scheduler/codebase/dhtmlxscheduler.css"; +import type { SchedulerComponentProps } from "../types"; -export default function SchedulerView({events}) { - let container = useRef(); +export default function SchedulerComponent({events} : SchedulerComponentProps) { + const containerRef = useRef(null); useEffect(() => { + if (!containerRef.current) { + return; + } let scheduler = Scheduler.getSchedulerInstance(); - scheduler.skin = "terrace"; scheduler.config.header = [ "day", "week", @@ -257,17 +280,17 @@ export default function SchedulerView({events}) { "next", ]; - scheduler.init(container.current, new Date(2024, 5, 10)); + scheduler.init(containerRef.current, new Date(2027, 5, 10)); scheduler.parse(events); return () => { scheduler.destructor(); - container.current.innerHTML = ""; + if (containerRef.current) { + containerRef.current.innerHTML = ""; + } }; }, []); - return ( -
- ); + return
; } ~~~