-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.js
111 lines (105 loc) · 2.9 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
import {data} from './data.js';
$(() => {
const filterTextBoxSettings = {
dataField: 'text',
editorType: 'dxTextBox',
label: {
text: 'Text',
location: 'left',
},
value: '',
editorOptions: {
placeholder: 'Filter...',
onKeyUp: (e) => {
filterAppointments(
e.component.option('text'),
form.getEditor('startDate').option('value'),
form.getEditor('endDate').option('value')
);
}
}
};
const startDateSettings = {
dataField: 'startDate',
editorType: 'dxDateBox',
value: new Date(2022, 9, 1),
label: {
text: 'Start Date',
location: 'left',
},
editorOptions: {
type: 'date',
onValueChanged: () => {
filterAppointments(
form.getEditor('text').option('value'),
form.getEditor('startDate').option('value'),
form.getEditor('endDate').option('value')
);
}
},
};
const endDateSettings = {
dataField: 'endDate',
editorType: 'dxDateBox',
value: new Date(2022, 9, 28),
label: {
text: 'End Date',
location: 'left',
},
editorOptions: {
type: 'date',
onValueChanged: () => {
filterAppointments(
form.getEditor('text').option('value'),
form.getEditor('startDate').option('value'),
form.getEditor('endDate').option('value')
);
}
},
};
const form = $('#form').dxForm({
formData: defaultFormData,
colCount: 1,
labelMode: 'outside',
items: [{
itemType: 'group',
caption: 'Filtering appointments',
items: [
filterTextBoxSettings,
startDateSettings,
endDateSettings
],
}],
}).dxForm('instance');
$('#scheduler').dxScheduler({
dataSource: filterDataSource,
views: [{
type: 'month'
}],
width: '80%',
currentView: 'month',
currentDate: new Date(2022, 9, 1),
}).dxScheduler('instance');
});
const filterAppointments = (filterValue, startDate, endDate) => {
filterDataSource.filter([
['text', 'contains', filterValue],
'and',
['startDate', '>=', startDate],
'and',
['endDate', '<=', endDate]
])
filterDataSource.load()
};
const defaultFormData = {
text: '',
startDate: new Date(2022, 9, 1),
endDate: new Date(2022, 9, 28),
};
const filterDataSource = new DevExpress.data.DataSource({
store: {
type: 'array',
data: data,
},
paginate: false,
})