diff --git a/api-reference/10 UI Components/dxScheduler/1 Configuration/onAppointmentFormOpening.md b/api-reference/10 UI Components/dxScheduler/1 Configuration/onAppointmentFormOpening.md index 483a51dbc3..41b388cebd 100644 --- a/api-reference/10 UI Components/dxScheduler/1 Configuration/onAppointmentFormOpening.md +++ b/api-reference/10 UI Components/dxScheduler/1 Configuration/onAppointmentFormOpening.md @@ -5,16 +5,16 @@ default: null --- --- ##### shortDescription -A function that is executed before an appointment edit form appears. Use this function to customize the form. +A function that is executed before Scheduler displays the appointment edit form. ##### param(e): ui/scheduler:AppointmentFormOpeningEvent Information about the event. ##### field(e.appointmentData): dxSchedulerAppointment -The data of the appointment for which a form is opened. +Data of the appointment edit form's target appointment. ##### field(e.cancel): Boolean -If **true**, prevents the user from opening the appointment edit form. +Allows you to cancel appointment edit form opening. ##### field(e.component): {WidgetName} The UI component's instance. @@ -23,302 +23,20 @@ The UI component's instance. #include common-ref-elementparam with { element: "UI component" } ##### field(e.form): dxForm -The form's instance; created only once - when the function is executed for the first time. +Instance of the appointment edit form's Form component. ##### field(e.popup): dxPopup -The instance of the popup that contains the form. +Instance of the appointment edit form's Popup component. --- -The Scheduler displays the appointment edit form inside a popup. The elements inside the form are the [Form](/api-reference/10%20UI%20Components/dxForm '/Documentation/ApiReference/UI_Components/dxForm/') and [Popup](/concepts/05%20UI%20Components/Popup/00%20Getting%20Started%20with%20Popup '/Documentation/Guide/UI_Components/Popup/Getting_Started_with_popup/') UI components. Use the **onAppointmentFormOpening** function's **form** and **popup** fields and the [Form](/api-reference/10%20UI%20Components/dxForm/1%20Configuration '/Documentation/ApiReference/UI_Components/dxForm/Configuration/') and [Popup API](/api-reference/10%20UI%20Components/dxPopup/1%20Configuration '/Documentation/ApiReference/UI_Components/dxPopup/Configuration/') to access and customize the corresponding UI component. -The form organizes its items into two groups: - - - - - - - - - - - - - -
Group nameDescription
mainGroupContains form fields that define main appointment parameters (for example, subject, and description).
recurrenceGroupContains form fields that define appointment recurrence parameters.
-The table below lists 'mainGroup' editor names: - - - - - - - - - - - - - - - - - - - - - - - - - - -
Editor Caption on a FormEditor Name
Subject'text'. Corresponds to the SchedulerAppointment.text property.
Start Date'startDate'. Corresponds to the SchedulerAppointment.startDate property.
End Date'endDate'. Corresponds to the SchedulerAppointment.endDate property.
All Day'allDay'. Corresponds to the SchedulerAppointment.allDay property.
Description'description'. Corresponds to the SchedulerAppointment.description property.
- -You can add a custom item to any group or create an ungrouped item and display it under the groups. If you use the **[fieldName]Expr** properties to map custom items to data fields, use these property values to access the items on the appointment form. - -![DevExtreme Scheduler onAppointmentFormOpening](/images/UiWidgets/Scheduler_onAppointmentFormOpening.png) - -The code below adds a new form item (`phone`) to the `mainGroup` and creates an ungrouped item (`location`). Check the array of [form items](/api-reference/10%20UI%20Components/dxForm/1%20Configuration/items.md '/Documentation/ApiReference/UI_Components/dxForm/Configuration/#items') to ensure that it does not contain an item with the same data field. - -The `mainGroup` consists of two columns. A custom item's [colSpan](/api-reference/10%20UI%20Components/dxForm/5%20Item%20Types/SimpleItem/colSpan.md '/Documentation/ApiReference/UI_Components/dxForm/Item_Types/SimpleItem/#colSpan') property value is 2. This means that the custom item spans two columns. - ---- -##### jQuery - - - $(function() { - $("#schedulerContainer").dxScheduler({ - dataSource: [{ - text: "Attend the conference", - startDate: new Date(2020, 4, 24, 9, 10), - endDate: new Date(2020, 4, 24, 11, 20), - }], - currentDate: new Date(2020, 4, 24), - - onAppointmentFormOpening: function(e) { - e.popup.option('showTitle', true); - e.popup.option('title', e.appointmentData.text ? - e.appointmentData.text : - 'Create a new appointment'); - - const form = e.form; - let mainGroupItems = form.itemOption('mainGroup').items; - if (!mainGroupItems.find(function(i) { return i.dataField === "phone" })) { - mainGroupItems.push({ - colSpan: 2, - label: { text: "Phone Number" }, - editorType: "dxTextBox", - dataField: "phone" - }); - form.itemOption('mainGroup', 'items', mainGroupItems); - } - - let formItems = form.option("items"); - if (!formItems.find(function(i) { return i.dataField === "location" })) { - formItems.push({ - colSpan: 2, - label: { text: "Location" }, - editorType: "dxTextBox", - dataField: "location" - }); - form.option("items", formItems); - } - } - }); - }); - -##### Angular - - - - - - - import { DxSchedulerModule } from "devextreme-angular"; - // ... - export class AppComponent { - schedulerData = [{ - text: "Attend the conference", - startDate: new Date(2020, 4, 24, 9, 10), - endDate: new Date(2020, 4, 24, 11, 20), - }]; - currentDate = new Date(2020, 4, 24); - - onAppointmentFormOpening(e) { - e.popup.option('showTitle', true); - e.popup.option('title', e.appointmentData.text ? - e.appointmentData.text : - 'Create a new appointment'); - - const form = e.form; - let mainGroupItems = form.itemOption('mainGroup').items; - if (!mainGroupItems.find(function(i) { return i.dataField === "phone" })) { - mainGroupItems.push({ - colSpan: 2, - label: { text: "Phone Number" }, - editorType: "dxTextBox", - dataField: "phone" - }); - form.itemOption('mainGroup', 'items', mainGroupItems); - } - - let formItems = form.option("items"); - if (!formItems.find(function(i) { return i.dataField === "location" })) { - formItems.push({ - colSpan: 2, - label: { text: "Location" }, - editorType: "dxTextBox", - dataField: "location" - }); - form.option("items", formItems); - } - } - } - @NgModule({ - imports: [ - // ... - DxSchedulerModule - ], - // ... - }) - -##### Vue - - - - - - -##### React - - - import React from 'react'; - - import 'devextreme/dist/css/dx.light.css'; - import Scheduler from 'devextreme-react/scheduler'; - - const dataSource = [{ - text: "Attend the conference", - startDate: new Date(2020, 4, 24, 9, 10), - endDate: new Date(2020, 4, 24, 11, 20), - }]; - - class App extends React.Component { - currentDate = new Date(2020, 4, 24); - - onAppointmentFormOpening(e) { - e.popup.option('showTitle', true); - e.popup.option('title', e.appointmentData.text ? - e.appointmentData.text : - 'Create a new appointment'); - - const form = e.form; - let mainGroupItems = form.itemOption('mainGroup').items; - if (!mainGroupItems.find(function(i) { return i.dataField === "phone" })) { - mainGroupItems.push({ - colSpan: 2, - label: { text: "Phone Number" }, - editorType: "dxTextBox", - dataField: "phone" - }); - form.itemOption('mainGroup', 'items', mainGroupItems); - } - - let formItems = form.option("items"); - if (!formItems.find(function(i) { return i.dataField === "location" })) { - formItems.push({ - colSpan: 2, - label: { text: "Location" }, - editorType: "dxTextBox", - dataField: "location" - }); - form.option("items", formItems); - } - } - - render() { - return ( - - ); - } - } - export default App; - ---- - -#include btn-open-demo with { - href: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/Scheduler/TimeZonesSupport/" -} +// TBD?? #include btn-open-github with { href: "https://github.com/DevExpress-Examples/devextreme-scheduler-create-custom-editing-form" } #####See Also##### +- TBA - [Form - Change Properties at Runtime](/concepts/05%20UI%20Components/Form/20%20Change%20Properties%20at%20Runtime/05%20Form%20Properties.md '/Documentation/Guide/UI_Components/Form/Change_Properties_at_Runtime/Form_Properties/') diff --git a/concepts/05 UI Components/Scheduler/030 Appointments/070 Appointment Edit Form/00 Appointment Edit Form.md b/concepts/05 UI Components/Scheduler/030 Appointments/070 Appointment Edit Form/00 Appointment Edit Form.md new file mode 100644 index 0000000000..c637214229 --- /dev/null +++ b/concepts/05 UI Components/Scheduler/030 Appointments/070 Appointment Edit Form/00 Appointment Edit Form.md @@ -0,0 +1 @@ +The appointment edit form allows users to modify or add appointments in the Scheduler data source. The form contains two groups: the general information group (`mainGroup`) and the recurrence settings group (`recurrenceGroup`). Scheduler initially displays `mainGroup` and switches to the `recurrenceGroup` when users modify the "Repeat" drop-down value. \ No newline at end of file diff --git a/concepts/05 UI Components/Scheduler/030 Appointments/070 Appointment Edit Form/05 Rearrange Form Items.md b/concepts/05 UI Components/Scheduler/030 Appointments/070 Appointment Edit Form/05 Rearrange Form Items.md new file mode 100644 index 0000000000..a0b07ea285 --- /dev/null +++ b/concepts/05 UI Components/Scheduler/030 Appointments/070 Appointment Edit Form/05 Rearrange Form Items.md @@ -0,0 +1,196 @@ +Configure **editing**.**form**.[items[]](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/editing/form/#items) to customize the appointment edit form layout. To preserve the form's switching functionality between `mainGroup` and `recurrenceGroup`, add the groups as [group items](/Documentation/ApiReference/UI_Components/dxForm/Item_Types/GroupItem/) in the **items[]** root: + +--- + +##### jQuery + + + $('#scheduler').dxScheduler({ + editing: { + form: { + items: [{ + name: 'mainGroup', + itemType: 'group', + }, { + name: 'recurrenceGroup', + itemType: 'group', + }], + }, + }, + }); + +##### Angular + + + + + + + + + + + +##### Vue + + + + + + +##### React + + + import { Scheduler, Editing, Form, Item } from 'devextreme-react/scheduler'; + + function App() { + return ( + + +
+ + + +
+ + ); + }; + +--- + +To add resource field editors to **items[]**, use resource labels in item names as follows: + +--- + +##### jQuery + + + $('#scheduler').dxScheduler({ + resources: [{ + label: 'Priority' + }], + editing: { + form: { + items: [{ + name: 'mainGroup', + itemType: 'group', + items: [{ + name: 'PriorityGroup', + itemType: 'group', + items: ['PriorityIcon', 'PriorityEditor'] + }], + }, ... ], + }, + }, + }); + +##### Angular + + + + + + + + + + + + + + + +##### Vue + + + + + + +##### React + + + import { Scheduler, Editing, Form, Item } from 'devextreme-react/scheduler'; + + function App() { + return ( + + +
+ + + + + + + +
+ + ); + }; + +--- diff --git a/concepts/05 UI Components/Scheduler/030 Appointments/070 Appointment Edit Form/10 Customize the Appointment Edit Form.md b/concepts/05 UI Components/Scheduler/030 Appointments/070 Appointment Edit Form/10 Customize the Appointment Edit Form.md new file mode 100644 index 0000000000..b4ca2b3c6e --- /dev/null +++ b/concepts/05 UI Components/Scheduler/030 Appointments/070 Appointment Edit Form/10 Customize the Appointment Edit Form.md @@ -0,0 +1,66 @@ +To customize the appointment edit form further, specify the **editing**.[form]() and **editing**.[popup]() configuration objects. These objects configure the appointment edit form's Popup and Form components. The following code snippet implements an increased width for the Popup and the "static" label mode for the Form: + +--- + +##### jQuery + + + $('#scheduler').dxScheduler({ + editing: { + popup: { + width: '50vw', + }, + form: { + labelMode: 'static', + }, + }, + }); + +##### Angular + + + + + + + + + +##### Vue + + + + + + +##### React + + + import { Scheduler, Editing, Form, Popup } from 'devextreme-react/scheduler'; + + function App() { + return ( + + +
+ + + + ); + }; + +--- diff --git a/concepts/05 UI Components/Scheduler/030 Appointments/070 Appointment Edit Form/15 Predefined Items.md b/concepts/05 UI Components/Scheduler/030 Appointments/070 Appointment Edit Form/15 Predefined Items.md new file mode 100644 index 0000000000..59a6b7002b --- /dev/null +++ b/concepts/05 UI Components/Scheduler/030 Appointments/070 Appointment Edit Form/15 Predefined Items.md @@ -0,0 +1,199 @@ +The appointment edit form includes multiple predefined items. To integrate these, assign predefined item names to [SimpleItem](/Documentation/ApiReference/UI_Components/dxForm/Item_Types/SimpleItem/)/[GroupItem](/Documentation/ApiReference/UI_Components/dxForm/Item_Types/GroupItem/) objects in the **editing**.**form**.[items](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/editing/form/#items) array. You can customize predefined items in their **SimpleItem**/**GroupItem** objects. To integrate predefined items without customization, add item names as strings. + +The following predefined items are available: + + editing.form.items + ├─ mainGroup + | ├─ subjectGroup + | │ ├─ subjectIcon + | │ └─ subjectEditor + | ├─ dateGroup + | │ ├─ dateIcon + | | └─ dateOptionsGroup + | │ ├─ allDayEditor + | │ ├─ startDateGroup + | │ │ ├─ startDateTimeGroup + | │ │ │ ├─ startDateEditor + | │ │ │ └─ startTimeEditor + | │ │ └─ startDateTimezoneEditor + | │ └─ endDateGroup + | │ ├─ endDateTimeGroup + | │ │ ├─ endDateEditor + | │ │ └─ endTimeEditor + | │ └─ endDateTimezoneEditor + | ├─ repeatGroup + | │ ├─ repeatIcon + | │ └─ repeatEditor + | ├─ resourcesGroup + | │ └─ ... + | └─ descriptionGroup + | ├─ descriptionIcon + | └─ descriptionEditor + └─ recurrenceGroup + ├─ recurrenceStartDateGroup + │ ├─ recurrenceStartDateIcon + │ └─ recurrenceStartDateEditor + ├─ recurrenceRuleGroup + │ ├─ recurrenceRuleIcon + │ └─ recurrencePatternGroup + │ ├─ recurrenceRuleRepeatGroup + │ | ├─ recurrenceCountEditor + │ | └─ recurrencePeriodEditor + │ └─ recurrenceDayOfYearGroup — recurrenceDaysOfWeekEditor — recurrenceDayOfMonthEditor + │ ├─ recurrenceDayOfYearMonthEditor + │ └─ recurrenceDayOfYearDayEditor + └─ recurrenceEndGroup + ├─ recurrenceEndIcon + └─ recurrenceEndEditor + ├─ recurrenceRepeatEndEditor + └─ recurrenceEndEditorsGroup + ├─ recurrenceEndSpacer + ├─ recurrenceEndUntilEditor + └─ recurrenceEndCountEditor + +Items within `resourcesGroup` depend on resource [fieldExpr](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/resources/#fieldExpr) and [icon](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/resources/#icon) properties. Scheduler uses resource field expressions (for instance, "roomId") in item names as follows: + + ... + └─ resourcesGroup + └─ roomIdGroup + ├─ roomIdIcon + └─ roomIdEditor + +If no resource has an icon assigned, `resourcesGroup` contains the following items: + + ... + └─ resourcesGroup + ├─ resourcesGroupIcon + └─ resourceEditorsGroup + ├─ roomIdEditor + ├─ priorityIdEditor + ├─ assigneeIdEditor + └─ ... + +#include btn-open-demo with { + href: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/Scheduler/Resources/" +} + +Below is a list of images that demonstrate predefined items within each available group. + +### General Appointment Details + +General appointment details are available in the `mainGroup`: + +Scheduler appointment edit form, main group + +1. `mainGroup` + +### Appointment Recurrence Settings + +Appointment recurrence settings are available in the `recurrenceGroup`: + +Scheduler appointment edit form, recurrence group + +1. `recurrenceGroup` + +### Subject + +Scheduler appointment edit form, subject group items + +1. `dateGroup` +2. `dateIcon` +3. `dateOptionsGroup` +4. `allDayEditor` +5. `startDateGroup` +6. `endDateGroup` + +### Recurrence + +Scheduler appointment edit form, repeat group items + +1. `repeatGroup` +2. `repeatIcon` +3. `repeatEditor` + +### Description + +Scheduler appointment edit form, description group items + +1. `descriptionGroup` +2. `descriptionIcon` +3. `descriptionEditor` + +### Start Date + +Scheduler appointment edit form, start date group items + +1. `startDateGroup` +2. `startDateTimeGroup` +3. `startDateTimezoneEditor` +4. `startDateEditor` +5. `startTimeEditor` + +### End Date + +Scheduler appointment edit form, end date group items + +1. `endDateGroup` +2. `endDateTimeGroup` +3. `endDateTimezoneEditor` +4. `endDateEditor` +5. `endTimeEditor` + +### Recurrence Start Date + +Scheduler appointment edit form, recurrence start date group items + +1. `recurrenceStartDateGroup` +2. `recurrenceStartDateIcon` +2. `recurrenceStartDateEditor` + +### Recurrence Rules - Common Items + +The following image demonstrates `recurrenceRuleGroup` items that are displayed in all recurrence modes: + +Scheduler appointment edit form, recurrence rule group items displayed in all recurrence modes + +1. `recurrenceRuleGroup` +2. `recurrenceRuleIcon` +3. `recurrencePatternGroup` + └─ `recurrenceRuleRepeatGroup` +4. `recurrenceCountEditor` + +[note] `recurrenceCountEditor` is nested within `recurrenceRuleRepeatGroup`. + +### Recurrence Rules - Mode-Specific Options + +The following image demonstrates `recurrenceRuleGroup` items specific to each recurrence mode: + +Scheduler appointment edit form, recurrence rule group items specific to each recurrence mode + +1. `recurrencePeriodEditor` - Daily Recurrence + ㅤ +2. `recurrencePeriodEditor` - Weekly Recurrence +3. `recurrenceDaysOfWeekEditor` + ㅤ +4. `recurrencePeriodEditor` - Monthly Recurrence +5. `recurrenceDayOfMonthEditor` + ㅤ +6. `recurrencePeriodEditor` - Yearly Recurrence +7. `recurrenceDayOfYearGroup` +8. `recurrenceDayOfYearMonthEditor` +9. `recurrenceDayOfYearDayEditor` + +[note] All items except `recurrencePeriodEditor` are nested within `recurrencePatternGroup`. + +### Recurrence End Date + +Scheduler appointment edit form, recurrence end date group items + +1. `recurrenceEndGroup` +2. `recurrenceEndIcon` +3. `recurrenceEndEditor` diff --git a/concepts/05 UI Components/Scheduler/030 Appointments/070 Customize Appointment Details Form.md b/concepts/05 UI Components/Scheduler/030 Appointments/070 Customize Appointment Details Form.md deleted file mode 100644 index 8706f10bb7..0000000000 --- a/concepts/05 UI Components/Scheduler/030 Appointments/070 Customize Appointment Details Form.md +++ /dev/null @@ -1,12 +0,0 @@ -Use the [onAppointmentFormOpening](/api-reference/10%20UI%20Components/dxScheduler/1%20Configuration/onAppointmentFormOpening.md '/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#onAppointmentFormOpening') function to customize the appointment edit form. Refer to the function's description for an example. - -#include btn-open-demo with { - href: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/Scheduler/CustomTemplates/" -} - -#####See Also##### -- [Scheduler - Customize Appointment](/concepts/05%20UI%20Components/Scheduler/030%20Appointments/050%20Customize%20Appointment.md '/Documentation/Guide/UI_Components/Scheduler/Appointments/Customize_Appointment/') -- [Scheduler - Customize Appointment Tooltip](/concepts/05%20UI%20Components/Scheduler/030%20Appointments/060%20Customize%20Appointment%20Tooltip.md '/Documentation/Guide/UI_Components/Scheduler/Appointments/Customize_Appointment_Tooltip/') -- [Scheduler API Reference](/api-reference/10%20UI%20Components/dxScheduler '/Documentation/ApiReference/UI_Components/dxScheduler/') - -[tags]scheduler, appointment edit form, customize edit form, onAppointmentFormCreated diff --git a/images/Scheduler/appointment-edit-form/items/1-mainGroup.png b/images/Scheduler/appointment-edit-form/items/1-mainGroup.png new file mode 100644 index 0000000000..2882814fc2 Binary files /dev/null and b/images/Scheduler/appointment-edit-form/items/1-mainGroup.png differ diff --git a/images/Scheduler/appointment-edit-form/items/10-recurrenceRuleGroup.png b/images/Scheduler/appointment-edit-form/items/10-recurrenceRuleGroup.png new file mode 100644 index 0000000000..cf0debe229 Binary files /dev/null and b/images/Scheduler/appointment-edit-form/items/10-recurrenceRuleGroup.png differ diff --git a/images/Scheduler/appointment-edit-form/items/11-recurrenceRuleOptions.png b/images/Scheduler/appointment-edit-form/items/11-recurrenceRuleOptions.png new file mode 100644 index 0000000000..50acfe9c53 Binary files /dev/null and b/images/Scheduler/appointment-edit-form/items/11-recurrenceRuleOptions.png differ diff --git a/images/Scheduler/appointment-edit-form/items/12-recurrenceEndGroup.png b/images/Scheduler/appointment-edit-form/items/12-recurrenceEndGroup.png new file mode 100644 index 0000000000..7895d60250 Binary files /dev/null and b/images/Scheduler/appointment-edit-form/items/12-recurrenceEndGroup.png differ diff --git a/images/Scheduler/appointment-edit-form/items/2-recurrenceGroup.png b/images/Scheduler/appointment-edit-form/items/2-recurrenceGroup.png new file mode 100644 index 0000000000..b2bf626a81 Binary files /dev/null and b/images/Scheduler/appointment-edit-form/items/2-recurrenceGroup.png differ diff --git a/images/Scheduler/appointment-edit-form/items/3-subjectGroup.png b/images/Scheduler/appointment-edit-form/items/3-subjectGroup.png new file mode 100644 index 0000000000..8152c361ea Binary files /dev/null and b/images/Scheduler/appointment-edit-form/items/3-subjectGroup.png differ diff --git a/images/Scheduler/appointment-edit-form/items/4-dateGroup.png b/images/Scheduler/appointment-edit-form/items/4-dateGroup.png new file mode 100644 index 0000000000..86da1001f5 Binary files /dev/null and b/images/Scheduler/appointment-edit-form/items/4-dateGroup.png differ diff --git a/images/Scheduler/appointment-edit-form/items/5-repeatGroup.png b/images/Scheduler/appointment-edit-form/items/5-repeatGroup.png new file mode 100644 index 0000000000..db6cb4909f Binary files /dev/null and b/images/Scheduler/appointment-edit-form/items/5-repeatGroup.png differ diff --git a/images/Scheduler/appointment-edit-form/items/6-descriptionGroup.png b/images/Scheduler/appointment-edit-form/items/6-descriptionGroup.png new file mode 100644 index 0000000000..cbaf2c21dd Binary files /dev/null and b/images/Scheduler/appointment-edit-form/items/6-descriptionGroup.png differ diff --git a/images/Scheduler/appointment-edit-form/items/7-startDateGroup.png b/images/Scheduler/appointment-edit-form/items/7-startDateGroup.png new file mode 100644 index 0000000000..330aea59ff Binary files /dev/null and b/images/Scheduler/appointment-edit-form/items/7-startDateGroup.png differ diff --git a/images/Scheduler/appointment-edit-form/items/8-endDateGroup.png b/images/Scheduler/appointment-edit-form/items/8-endDateGroup.png new file mode 100644 index 0000000000..7402e095b9 Binary files /dev/null and b/images/Scheduler/appointment-edit-form/items/8-endDateGroup.png differ diff --git a/images/Scheduler/appointment-edit-form/items/9-recurrenceStartDateGroup.png b/images/Scheduler/appointment-edit-form/items/9-recurrenceStartDateGroup.png new file mode 100644 index 0000000000..003f35d1f5 Binary files /dev/null and b/images/Scheduler/appointment-edit-form/items/9-recurrenceStartDateGroup.png differ