Skip to content

Commit 9c64a68

Browse files
GoodDayForSurfGoodDayForSurf
authored
Merge branch '26_1' into 26_1_global_format
2 parents a58d9ee + a165032 commit 9c64a68

128 files changed

Lines changed: 1331 additions & 9590 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
1-
This example prevents appointment time conflicts in DevExtreme Scheduler. Use the **Allow Overlapping Appointments** select-box to select a time conflict resolution mode.
1+
This example addresses appointment time conflicts when using the DevExtreme Scheduler. Use the **Allow Overlapping Appointments** select-box to select a desired time conflict resolution mode.
22
<!--split-->
33

44
### Detect Conflicts
55

6-
Handle the [onAppointmentAdding](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#onAppointmentAdding) and [onAppointmentUpdating](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#onAppointmentUpdating) events to check if a new or updated appointment creates a time conflict. Set `e.cancel = true` to block the operation if necessary.
6+
Handle the [onAppointmentAdding](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#onAppointmentAdding) and [onAppointmentUpdating](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#onAppointmentUpdating) events to check if a new or updated appointment creates a time conflict. Set `e.cancel = true` to block the operation when necessary.
77

8-
Call [getOccurrences](/Documentation/ApiReference/UI_Components/dxScheduler/Methods/#getOccurrences) to expand [recurring appointments](/Documentation/Guide/UI_Components/Scheduler/Appointments/Appointment_Types/#Recurring_Appointments) into individual occurrences within the target range. Check for overlapping time ranges.
8+
Call [getOccurrences](/Documentation/ApiReference/UI_Components/dxScheduler/Methods/#getOccurrences) to expand [recurring appointments](/Documentation/Guide/UI_Components/Scheduler/Appointments/Appointment_Types/#Recurring_Appointments) into individual occurrences within the target range. Check for overlapping time range values.
99

1010
### Conflict Detection Modes
1111

12-
The demo supports two modes:
12+
The demo implements the following detection modes:
1313

1414
- **Different Resources**: appointments assigned to different resources (assignees) can overlap.
1515
- **Never**: overlapping appointments are not allowed, regardless of resource assignment.
@@ -18,9 +18,9 @@ To implement resource-aware checks, access appointments and compare their `assig
1818

1919
### Display Errors
2020

21-
When a conflict is detected, the demo displays the error in the following ways:
21+
When a conflict is detected, the demo displays the error as follows:
2222

2323
- A message box.
2424
- An inline validation message (if an appointment edit form is active).
2525

26-
To display inline validation, configure a custom form item inside [editing.form](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/editing/form/) and use the `customizeItem` function to attach custom `validationRules` to the time editors.
26+
To display inline validation, configure a custom form item inside [editing.form](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/editing/form/) and use the `customizeItem` function to attach custom `validationRules` to time editors.

‎apps/demos/Demos/Scheduler/Timelines/Angular/app/app.component.css‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,17 @@
22
::ng-deep .dx-scheduler-timeline-week .dx-scheduler-cell-sizes-horizontal,
33
::ng-deep .dx-scheduler-timeline-work-week .dx-scheduler-cell-sizes-horizontal {
44
width: 100px;
5+
}
6+
7+
.options {
8+
padding: 20px;
9+
background-color: rgba(191, 191, 191, 0.15);
10+
margin-top: 20px;
11+
}
12+
13+
.option {
14+
margin-top: 10px;
15+
display: flex;
16+
align-items: center;
17+
gap: 10px;
518
}

‎apps/demos/Demos/Scheduler/Timelines/Angular/app/app.component.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
[groups]="['priority']"
1111
[currentDate]="currentDate"
1212
[height]="580"
13+
[snapToCellsMode]="snapToCellsMode"
1314
>
1415
<dxi-scheduler-resource
1516
fieldExpr="ownerId"
@@ -27,3 +28,15 @@
2728
icon="tags"
2829
></dxi-scheduler-resource>
2930
</dx-scheduler>
31+
<div class="options">
32+
<div class="option">
33+
<span>Snap to Cells Mode:</span>
34+
<dx-select-box
35+
[items]="snapToCellsModeItems"
36+
valueExpr="value"
37+
displayExpr="text"
38+
[value]="snapToCellsMode"
39+
(onValueChanged)="onSnapToCellsModeChanged($event)"
40+
></dx-select-box>
41+
</div>
42+
</div>

‎apps/demos/Demos/Scheduler/Timelines/Angular/app/app.component.ts‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import { bootstrapApplication } from '@angular/platform-browser';
22
import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
3-
import { DxSchedulerModule } from 'devextreme-angular';
3+
import { DxSchedulerModule, DxSelectBoxModule } from 'devextreme-angular';
4+
import type { DxSchedulerTypes } from 'devextreme-angular/ui/scheduler';
5+
import type { DxSelectBoxTypes } from 'devextreme-angular/ui/select-box';
46
import {
57
Priority, Resource, Appointment, Service,
68
} from './app.service';
@@ -22,6 +24,7 @@ if (window && window.config?.packageConfigPaths) {
2224
providers: [Service],
2325
imports: [
2426
DxSchedulerModule,
27+
DxSelectBoxModule,
2528
],
2629
})
2730
export class AppComponent {
@@ -33,11 +36,23 @@ export class AppComponent {
3336

3437
currentDate: Date = new Date(2021, 1, 2);
3538

39+
snapToCellsMode: DxSchedulerTypes.SnapToCellsMode = 'always';
40+
41+
snapToCellsModeItems = [
42+
{ value: 'auto', text: 'Auto' },
43+
{ value: 'always', text: 'Always' },
44+
{ value: 'never', text: 'Never' },
45+
];
46+
3647
constructor(service: Service) {
3748
this.appointmentsData = service.getAppointments();
3849
this.resourcesData = service.getResources();
3950
this.prioritiesData = service.getPriorities();
4051
}
52+
53+
onSnapToCellsModeChanged(e: DxSelectBoxTypes.ValueChangedEvent): void {
54+
this.snapToCellsMode = e.value;
55+
}
4156
}
4257

4358
bootstrapApplication(AppComponent, {

‎apps/demos/Demos/Scheduler/Timelines/React/App.tsx‎

Lines changed: 63 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,77 @@
1-
import React from 'react';
1+
import React, { useCallback, useState } from 'react';
22

33
import Scheduler, {
44
Resource,
55
type SchedulerTypes,
66
} from 'devextreme-react/scheduler';
7+
import SelectBox from 'devextreme-react/select-box';
8+
import type { SelectBoxTypes } from 'devextreme-react/select-box';
79

810
import { data, resourcesData, priorityData } from './data.ts';
911

1012
const currentDate = new Date(2021, 1, 2);
1113
const views: SchedulerTypes.ViewType[] = ['timelineDay', 'timelineWeek', 'timelineWorkWeek', 'timelineMonth'];
1214
const groups = ['priority'];
1315

14-
const App = () => (
15-
<Scheduler
16-
timeZone="America/Los_Angeles"
17-
dataSource={data}
18-
views={views}
19-
defaultCurrentView="timelineMonth"
20-
defaultCurrentDate={currentDate}
21-
height={580}
22-
groups={groups}
23-
cellDuration={60}
24-
firstDayOfWeek={0}
25-
startDayHour={8}
26-
endDayHour={20}
27-
>
28-
<Resource
29-
fieldExpr="ownerId"
30-
allowMultiple={true}
31-
dataSource={resourcesData}
32-
label="Owner"
33-
useColorAsDefault={true}
34-
icon="user"
35-
/>
36-
<Resource
37-
fieldExpr="priority"
38-
allowMultiple={false}
39-
dataSource={priorityData}
40-
label="Priority"
41-
icon="tags"
42-
/>
43-
</Scheduler>
44-
);
16+
const snapToCellsModeItems: { value: SchedulerTypes.SnapToCellsMode; text: string }[] = [
17+
{ value: 'auto', text: 'Auto' },
18+
{ value: 'always', text: 'Always' },
19+
{ value: 'never', text: 'Never' },
20+
];
21+
22+
const App = () => {
23+
const [snapToCellsMode, setSnapToCellsMode] = useState<SchedulerTypes.SnapToCellsMode>('always');
24+
25+
const onSnapToCellsModeChanged = useCallback((e: SelectBoxTypes.ValueChangedEvent) => {
26+
setSnapToCellsMode(e.value);
27+
}, []);
28+
29+
return (
30+
<>
31+
<Scheduler
32+
timeZone="America/Los_Angeles"
33+
dataSource={data}
34+
views={views}
35+
defaultCurrentView="timelineMonth"
36+
defaultCurrentDate={currentDate}
37+
height={580}
38+
groups={groups}
39+
cellDuration={60}
40+
firstDayOfWeek={0}
41+
startDayHour={8}
42+
endDayHour={20}
43+
snapToCellsMode={snapToCellsMode}
44+
>
45+
<Resource
46+
fieldExpr="ownerId"
47+
allowMultiple={true}
48+
dataSource={resourcesData}
49+
label="Owner"
50+
useColorAsDefault={true}
51+
icon="user"
52+
/>
53+
<Resource
54+
fieldExpr="priority"
55+
allowMultiple={false}
56+
dataSource={priorityData}
57+
label="Priority"
58+
icon="tags"
59+
/>
60+
</Scheduler>
61+
<div className="options">
62+
<div className="option">
63+
<span>Snap to Cells Mode:</span>
64+
<SelectBox
65+
items={snapToCellsModeItems}
66+
valueExpr="value"
67+
displayExpr="text"
68+
value={snapToCellsMode}
69+
onValueChanged={onSnapToCellsModeChanged}
70+
/>
71+
</div>
72+
</div>
73+
</>
74+
);
75+
};
4576

4677
export default App;

‎apps/demos/Demos/Scheduler/Timelines/React/styles.css‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,16 @@
33
.dx-scheduler-timeline-work-week .dx-scheduler-cell-sizes-horizontal {
44
width: 100px;
55
}
6+
7+
.options {
8+
padding: 20px;
9+
background-color: rgba(191, 191, 191, 0.15);
10+
margin-top: 20px;
11+
}
12+
13+
.option {
14+
margin-top: 10px;
15+
display: flex;
16+
align-items: center;
17+
gap: 10px;
18+
}

‎apps/demos/Demos/Scheduler/Timelines/ReactJs/App.js‎

Lines changed: 59 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,66 @@
1-
import React from 'react';
1+
import React, { useCallback, useState } from 'react';
22
import Scheduler, { Resource } from 'devextreme-react/scheduler';
3+
import SelectBox from 'devextreme-react/select-box';
34
import { data, resourcesData, priorityData } from './data.js';
45

56
const currentDate = new Date(2021, 1, 2);
67
const views = ['timelineDay', 'timelineWeek', 'timelineWorkWeek', 'timelineMonth'];
78
const groups = ['priority'];
8-
const App = () => (
9-
<Scheduler
10-
timeZone="America/Los_Angeles"
11-
dataSource={data}
12-
views={views}
13-
defaultCurrentView="timelineMonth"
14-
defaultCurrentDate={currentDate}
15-
height={580}
16-
groups={groups}
17-
cellDuration={60}
18-
firstDayOfWeek={0}
19-
startDayHour={8}
20-
endDayHour={20}
21-
>
22-
<Resource
23-
fieldExpr="ownerId"
24-
allowMultiple={true}
25-
dataSource={resourcesData}
26-
label="Owner"
27-
useColorAsDefault={true}
28-
icon="user"
29-
/>
30-
<Resource
31-
fieldExpr="priority"
32-
allowMultiple={false}
33-
dataSource={priorityData}
34-
label="Priority"
35-
icon="tags"
36-
/>
37-
</Scheduler>
38-
);
9+
const snapToCellsModeItems = [
10+
{ value: 'auto', text: 'Auto' },
11+
{ value: 'always', text: 'Always' },
12+
{ value: 'never', text: 'Never' },
13+
];
14+
const App = () => {
15+
const [snapToCellsMode, setSnapToCellsMode] = useState('always');
16+
const onSnapToCellsModeChanged = useCallback((e) => {
17+
setSnapToCellsMode(e.value);
18+
}, []);
19+
return (
20+
<>
21+
<Scheduler
22+
timeZone="America/Los_Angeles"
23+
dataSource={data}
24+
views={views}
25+
defaultCurrentView="timelineMonth"
26+
defaultCurrentDate={currentDate}
27+
height={580}
28+
groups={groups}
29+
cellDuration={60}
30+
firstDayOfWeek={0}
31+
startDayHour={8}
32+
endDayHour={20}
33+
snapToCellsMode={snapToCellsMode}
34+
>
35+
<Resource
36+
fieldExpr="ownerId"
37+
allowMultiple={true}
38+
dataSource={resourcesData}
39+
label="Owner"
40+
useColorAsDefault={true}
41+
icon="user"
42+
/>
43+
<Resource
44+
fieldExpr="priority"
45+
allowMultiple={false}
46+
dataSource={priorityData}
47+
label="Priority"
48+
icon="tags"
49+
/>
50+
</Scheduler>
51+
<div className="options">
52+
<div className="option">
53+
<span>Snap to Cells Mode:</span>
54+
<SelectBox
55+
items={snapToCellsModeItems}
56+
valueExpr="value"
57+
displayExpr="text"
58+
value={snapToCellsMode}
59+
onValueChanged={onSnapToCellsModeChanged}
60+
/>
61+
</div>
62+
</div>
63+
</>
64+
);
65+
};
3966
export default App;

‎apps/demos/Demos/Scheduler/Timelines/ReactJs/styles.css‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,16 @@
33
.dx-scheduler-timeline-work-week .dx-scheduler-cell-sizes-horizontal {
44
width: 100px;
55
}
6+
7+
.options {
8+
padding: 20px;
9+
background-color: rgba(191, 191, 191, 0.15);
10+
margin-top: 20px;
11+
}
12+
13+
.option {
14+
margin-top: 10px;
15+
display: flex;
16+
align-items: center;
17+
gap: 10px;
18+
}

0 commit comments

Comments
 (0)