Skip to content

Commit 35ac273

Browse files
vladaskorohodovavladaskorohodova
authored
Scheduler: Update Editing and Templates demo descriptions (#31939)
1 parent 8577b9e commit 35ac273

File tree

4 files changed

+40
-22
lines changed

4 files changed

+40
-22
lines changed

‎apps/demos/Demos/Scheduler/Editing/description.md‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,20 @@
1-
Scheduler allows users to add, update, resize, drag, and delete appointments. To control these operations, specify properties in the [editing](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/editing/) object. In this demo, you can use the checkboxes below the Scheduler to toggle the edit operations.
1+
Scheduler allows users to manage CRUD operations as follows:
2+
3+
- **Edit (update) appointments**: Double-click an appointment or click an appointment tooltip to edit. Drag and drop an appointment to edit start and end times (without changing duration). Drag an appointment's edge to edit start or end times (and change the appointment's duration).
4+
- **Delete appointments**: Click the delete button within an appointment tooltip to delete.
5+
- **Create new appointments**: Double-click an empty cell to create a new appointment.
6+
7+
In this demo, checkboxes below the Scheduler enable/disable edit operations. This demo also handles events to display a toast message after each edit.
28
<!--split-->
39

4-
These operations raise events that you can handle with the following functions:
10+
To manage editing operations, configure the [editing](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/editing/) object.
11+
12+
Each operation raises corresponding events:
513

614
* [onAppointmentAdding](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#onAppointmentAdding) / [onAppointmentAdded](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#onAppointmentAdded)
715

816
* [onAppointmentDeleting](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#onAppointmentDeleting) / [onAppointmentDeleted](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#onAppointmentDeleted)
917

1018
* [onAppointmentUpdating](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#onAppointmentUpdating) / [onAppointmentUpdated](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#onAppointmentUpdated)
1119

12-
In this demo, we configured the handlers to display a toast message after a user performs an edit operation.
13-
14-
Users can edit appointment data in the appointment details form. To open it, they need to double-click the appointment. You can use the [onAppointmentFormOpening](https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#onAppointmentFormOpening) function to customize the form.
20+
You can customize the appointment edit form, specify popup settings, and rearrange form items as needed. For additional information, review [Appointment Edit Form](/Documentation/Guide/UI_Components/Scheduler/Appointment/Appointment_Edit_Form/).

‎apps/demos/Demos/Scheduler/Templates/React/description.md‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,14 @@
1-
The following DevExtreme Scheduler properties can be used to specify custom templates (both globally and for individual views):
1+
You can double-click a DevExtreme Scheduler appointment or an empty cell to open an edit form from the UI. Scheduler allows you to customize the form: rearrange items, create custom fields, and specify popup settings.
22

3-
* Appointment rectangle: [appointmentComponent](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#appointmentComponent) / **views[]**.[appointmentComponent](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/views/#appointmentComponent)
3+
The form includes two groups: `mainGroup` (general information) and `recurrenceGroup` (recurrence settings). Scheduler displays `mainGroup` first and switches to `recurrenceGroup` when users change the "Repeat" drop-down. Configure **editing**.[form](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/editing/form/) to customize the form layout and **editing**.[popup](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/editing/popup/) to customize the dialog window. This demo configures these objects to add custom fields (**movieId** and **price**) to the edit form.
44

5-
* Tooltip: [appointmentTooltipComponent](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#appointmentTooltipComponent) / **views[]**.[appointmentTooltipComponent](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/views/#appointmentTooltipComponent).
5+
For additional information, refer to the following help topic: [Appointment Edit Form](/Documentation/Guide/UI_Components/Scheduler/Appointment/Appointment_Edit_Form/).
6+
<!--split-->
67

7-
To customize our built-in Appointment Detail form, use the [onAppointmentFormOpening](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#onAppointmentFormOpening) handler. In this demo, this handler adds custom fields to the Appointment Detail form.
8+
You can customize the following DevExtreme Scheduler elements using custom templates (globally and for individual views):
89

9-
Image Source: **Wikimedia Commons**
10-
<!--split-->
10+
* Appointment rectangle: [appointmentRender](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#appointmentRender)/[appointmentComponent](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#appointmentComponent) / **views[]**.[appointmentRender](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/views/#appointmentRender)/**views[]**.[appointmentComponent](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/views/#appointmentComponent)
11+
12+
* Tooltip: [appointmentTooltipRender](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#appointmentTooltipRender)/[appointmentTooltipComponent](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#appointmentTooltipComponent) / **views[]**.[appointmentTooltipRender](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/views/#appointmentTooltipRender)/**views[]**.[appointmentTooltipComponent](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/views/#appointmentTooltipComponent).
13+
14+
[note] Image Source: **Wikimedia Commons**

‎apps/demos/Demos/Scheduler/Templates/ReactJs/description.md‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,14 @@
1-
The following DevExtreme Scheduler properties can be used to specify custom templates (both globally and for individual views):
1+
You can double-click a DevExtreme Scheduler appointment or an empty cell to open an edit form from the UI. Scheduler allows you to customize the form: rearrange items, create custom fields, and specify popup settings.
22

3-
* Appointment rectangle: [appointmentComponent](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#appointmentComponent) / **views[]**.[appointmentComponent](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/views/#appointmentComponent)
3+
The form includes two groups: `mainGroup` (general information) and `recurrenceGroup` (recurrence settings). Scheduler displays `mainGroup` first and switches to `recurrenceGroup` when users change the "Repeat" drop-down. Configure **editing**.[form](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/editing/form/) to customize the form layout and **editing**.[popup](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/editing/popup/) to customize the dialog window. This demo configures these objects to add custom fields (**movieId** and **price**) to the edit form.
44

5-
* Tooltip: [appointmentTooltipComponent](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#appointmentTooltipComponent) / **views[]**.[appointmentTooltipComponent](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/views/#appointmentTooltipComponent).
5+
For additional information, refer to the following help topic: [Appointment Edit Form](/Documentation/Guide/UI_Components/Scheduler/Appointment/Appointment_Edit_Form/).
6+
<!--split-->
67

7-
To customize our built-in Appointment Detail form, use the [onAppointmentFormOpening](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#onAppointmentFormOpening) handler. In this demo, this handler adds custom fields to the Appointment Detail form.
8+
You can customize the following DevExtreme Scheduler elements using custom templates (globally and for individual views):
89

9-
Image Source: **Wikimedia Commons**
10-
<!--split-->
10+
* Appointment rectangle: [appointmentRender](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#appointmentRender)/[appointmentComponent](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#appointmentComponent) / **views[]**.[appointmentRender](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/views/#appointmentRender)/**views[]**.[appointmentComponent](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/views/#appointmentComponent)
11+
12+
* Tooltip: [appointmentTooltipRender](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#appointmentTooltipRender)/[appointmentTooltipComponent](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#appointmentTooltipComponent) / **views[]**.[appointmentTooltipRender](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/views/#appointmentTooltipRender)/**views[]**.[appointmentTooltipComponent](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/views/#appointmentTooltipComponent).
13+
14+
[note] Image Source: **Wikimedia Commons**

‎apps/demos/Demos/Scheduler/Templates/description.md‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,14 @@
1-
The following DevExtreme Scheduler properties can be used to specify custom templates (both globally and for individual views):
1+
You can double-click a DevExtreme Scheduler appointment or an empty cell to open an edit form from the UI. Scheduler allows you to customize the form: rearrange items, create custom fields, and specify popup settings.
2+
3+
The form includes two groups: `mainGroup` (general information) and `recurrenceGroup` (recurrence settings). Scheduler displays `mainGroup` first and switches to `recurrenceGroup` when users change the "Repeat" drop-down. Configure **editing**.[form](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/editing/form/) to customize the form layout and **editing**.[popup](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/editing/popup/) to customize the dialog window. This demo configures these objects to add custom fields (**movieId** and **price**) to the edit form.
4+
5+
For additional information, refer to the following help topic: [Appointment Edit Form](/Documentation/Guide/UI_Components/Scheduler/Appointment/Appointment_Edit_Form/).
6+
<!--split-->
7+
8+
You can customize the following DevExtreme Scheduler elements using custom templates (globally and for individual views):
29

310
* Appointment rectangle: [appointmentTemplate](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#appointmentTemplate) / **views[]**.[appointmentTemplate](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/views/#appointmentTemplate)
411

512
* Tooltip: [appointmentTooltipTemplate](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#appointmentTooltipTemplate) / **views[]**.[appointmentTooltipTemplate](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/views/#appointmentTooltipTemplate).
613

7-
To customize our built-in Appointment Detail form, use the [onAppointmentFormOpening](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#onAppointmentFormOpening) handler. In this demo, this handler adds custom fields to the Appointment Detail form.
8-
9-
Image Source: **Wikimedia Commons**
10-
<!--split-->
14+
[note] Image Source: **Wikimedia Commons**

0 commit comments

Comments
 (0)