Skip to content

Commit 4adaf36

Browse files
TucchhaaTucchhaa
committed
implement
1 parent 78baf11 commit 4adaf36

File tree

6 files changed

+186
-133
lines changed

6 files changed

+186
-133
lines changed

‎apps/demos/Demos/Scheduler/Templates/jQuery/data.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,47 +5,47 @@ const moviesData = [{
55
year: 1940,
66
image: '../../../../images/movies/HisGirlFriday.jpg',
77
duration: 92,
8-
color: '#cb6bb2',
8+
color: '#9FD89F',
99
}, {
1010
id: 2,
1111
text: 'Royal Wedding',
1212
director: 'Stanley Donen',
1313
year: 1951,
1414
image: '../../../../images/movies/RoyalWedding.jpg',
1515
duration: 93,
16-
color: '#56ca85',
16+
color: '#F1BBBC',
1717
}, {
1818
id: 3,
1919
text: 'A Star Is Born',
2020
director: 'William A. Wellman',
2121
year: 1937,
2222
image: '../../../../images/movies/AStartIsBorn.jpg',
2323
duration: 111,
24-
color: '#1e90ff',
24+
color: '#F9E2AE',
2525
}, {
2626
id: 4,
2727
text: 'The Screaming Skull',
2828
director: 'Alex Nicol',
2929
year: 1958,
3030
image: '../../../../images/movies/ScreamingSkull.jpg',
3131
duration: 68,
32-
color: '#ff9747',
32+
color: '#EDBBE7',
3333
}, {
3434
id: 5,
3535
text: "It's a Wonderful Life",
3636
director: 'Frank Capra',
3737
year: 1946,
3838
image: '../../../../images/movies/ItsAWonderfulLife.jpg',
3939
duration: 130,
40-
color: '#f05797',
40+
color: '#B4D6FA',
4141
}, {
4242
id: 6,
4343
text: 'City Lights',
4444
director: 'Charlie Chaplin',
4545
year: 1931,
4646
image: '../../../../images/movies/CityLights.jpg',
4747
duration: 87,
48-
color: '#2a9010',
48+
color: '#C6B1DE',
4949
}];
5050

5151
const theatreData = [{

‎apps/demos/Demos/Scheduler/Templates/jQuery/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
<script src="../../../../node_modules/cldrjs/dist/cldr/event.js"></script>
1111
<script src="../../../../node_modules/cldrjs/dist/cldr/supplemental.js"></script>
1212
<script src="../../../../node_modules/cldrjs/dist/cldr/unresolved.js"></script>
13-
<link rel="stylesheet" type="text/css" href="../../../../node_modules/devextreme-dist/css/dx.light.css" />
13+
<link rel="stylesheet" type="text/css" href="../../../../node_modules/devextreme-dist/css/dx.material.blue.dark.css" />
1414
<script src="../../../../node_modules/devextreme-dist/js/dx.all.js"></script>
1515
<script src="data.js"></script>
1616
<link rel="stylesheet" type="text/css" href="styles.css" />

‎apps/demos/Demos/Scheduler/Templates/jQuery/index.js‎

Lines changed: 122 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
$(() => {
2+
let form;
3+
let $movieInfoContainer;
4+
25
$('#scheduler').dxScheduler({
36
timeZone: 'America/Los_Angeles',
47
dataSource: data,
@@ -12,10 +15,8 @@ $(() => {
1215
height: 600,
1316
groups: ['theatreId'],
1417
crossScrollingEnabled: true,
18+
maxAppointmentsPerCell: 1,
1519
cellDuration: 20,
16-
editing: {
17-
allowAdding: false,
18-
},
1920
resources: [{
2021
fieldExpr: 'movieId',
2122
dataSource: moviesData,
@@ -24,85 +25,88 @@ $(() => {
2425
fieldExpr: 'theatreId',
2526
dataSource: theatreData,
2627
}],
27-
appointmentTooltipTemplate(model) {
28-
return getTooltipTemplate(getMovieById(model.targetedAppointmentData.movieId));
28+
appointmentTemplate,
29+
appointmentTooltipTemplate: (model) => {
30+
const movie = getMovieById(model.targetedAppointmentData.movieId);
31+
return movieInfoTemplate(movie);
2932
},
30-
appointmentTemplate(model) {
31-
const movieInfo = getMovieById(model.targetedAppointmentData.movieId) || {};
33+
onAppointmentFormOpening(e) {
34+
form = e.form;
35+
window.x = form;
3236

33-
return $(`${"<div class='showtime-preview'>"
34-
+ '<div>'}${movieInfo.text}</div>`
35-
+ `<div>Ticket Price: <strong>$${model.targetedAppointmentData.price}</strong>`
36-
+ '</div>'
37-
+ `<div>${DevExpress.localization.formatDate(model.targetedAppointmentData.displayStartDate, 'shortTime')
38-
} - ${DevExpress.localization.formatDate(model.targetedAppointmentData.displayEndDate, 'shortTime')
39-
}</div>`
40-
+ '</div>');
37+
form.on('fieldDataChanged', (e) => {
38+
if (e.dataField === 'startDate') {
39+
const movie = getMovieById(form.option('formData').movieId);
40+
updateEndDate(form, movie);
41+
}
42+
});
4143
},
42-
onAppointmentFormOpening(data) {
43-
const { form } = data;
44-
let movieInfo = getMovieById(data.appointmentData.movieId) || {};
45-
let { startDate } = data.appointmentData;
44+
editing: {
45+
allowAdding: false,
46+
form: {
47+
items: [
48+
{
49+
template: () => {
50+
$movieInfoContainer = $('<div class="movie-info-container">');
51+
return $movieInfoContainer;
52+
},
53+
},
54+
{
55+
itemType: 'group',
56+
colCount: 2,
57+
colCountByScreen: { xs: 2 },
58+
items: [
59+
{
60+
label: { text: 'Movie' },
61+
colSpan: 1,
62+
editorType: 'dxSelectBox',
63+
dataField: 'movieId',
64+
editorOptions: {
65+
items: moviesData,
66+
displayExpr: 'text',
67+
valueExpr: 'id',
68+
stylingMode: getEditorStylingMode(),
69+
onValueChanged(e) {
70+
const movie = getMovieById(e.value);
4671

47-
form.option('items', [{
48-
label: {
49-
text: 'Movie',
50-
},
51-
editorType: 'dxSelectBox',
52-
dataField: 'movieId',
53-
editorOptions: {
54-
items: moviesData,
55-
displayExpr: 'text',
56-
valueExpr: 'id',
57-
onValueChanged(args) {
58-
movieInfo = getMovieById(args.value);
72+
const $movieInfo = movieInfoTemplate(movie);
73+
$movieInfoContainer.empty().append($movieInfo);
5974

60-
form.updateData('director', movieInfo.director);
61-
form.updateData('endDate', new Date(startDate.getTime() + 60 * 1000 * movieInfo.duration));
62-
},
63-
},
64-
}, {
65-
label: {
66-
text: 'Director',
67-
},
68-
name: 'director',
69-
editorType: 'dxTextBox',
70-
editorOptions: {
71-
value: movieInfo.director,
72-
readOnly: true,
73-
},
74-
}, {
75-
dataField: 'startDate',
76-
editorType: 'dxDateBox',
77-
editorOptions: {
78-
width: '100%',
79-
type: 'datetime',
80-
onValueChanged(args) {
81-
startDate = args.value;
75+
if (!form) {
76+
return;
77+
}
8278

83-
form.updateData('endDate', new Date(startDate.getTime() + 60 * 1000 * movieInfo.duration));
79+
form.updateData('director', movie.director);
80+
updateEndDate(form, movie);
81+
},
82+
onContentReady: (e) => {
83+
e.component.option('stylingMode', getEditorStylingMode());
84+
},
85+
},
86+
},
87+
{
88+
label: { text: 'Price' },
89+
colSpan: 1,
90+
editorType: 'dxSelectBox',
91+
dataField: 'price',
92+
editorOptions: {
93+
items: [5, 10, 15, 20],
94+
displayExpr: (value) => `$${value}`,
95+
stylingMode: getEditorStylingMode(),
96+
onContentReady: (e) => {
97+
e.component.option('stylingMode', getEditorStylingMode());
98+
},
99+
},
100+
},
101+
],
84102
},
85-
},
86-
}, {
87-
name: 'endDate',
88-
dataField: 'endDate',
89-
editorType: 'dxDateBox',
90-
editorOptions: {
91-
width: '100%',
92-
type: 'datetime',
93-
readOnly: true,
94-
},
95-
}, {
96-
dataField: 'price',
97-
editorType: 'dxRadioGroup',
98-
editorOptions: {
99-
dataSource: [5, 10, 15, 20],
100-
itemTemplate(itemData) {
101-
return `$${itemData}`;
103+
'startDateGroup',
104+
{
105+
name: 'endDateGroup',
106+
disabled: true,
102107
},
103-
},
108+
],
104109
},
105-
]);
106110
},
107111
}).dxScheduler('instance');
108112

@@ -112,20 +116,50 @@ $(() => {
112116
.toArray()[0];
113117
}
114118

115-
function getTooltipTemplate(movieData) {
116-
return $(`${"<div class='movie-tooltip'>"
117-
+ "<img src='"}${movieData.image}' />`
118-
+ '<div class=\'movie-info\'>'
119-
+ `<div class='movie-title'>${
120-
movieData.text} (${movieData.year})`
121-
+ '</div>'
122-
+ '<div>'
123-
+ `Director: ${movieData.director
124-
}</div>`
125-
+ '<div>'
126-
+ `Duration: ${movieData.duration} minutes`
127-
+ '</div>'
128-
+ '</div>'
129-
+ '</div>');
119+
function updateEndDate(form, movie) {
120+
const { startDate } = form.option('formData');
121+
const newEndDate = new Date(startDate.getTime() + 60 * 1000 * movie.duration);
122+
123+
form.updateData('endDate', newEndDate);
124+
}
125+
126+
function appointmentTemplate(model) {
127+
const { movieId, displayStartDate, displayEndDate, price } = model.targetedAppointmentData;
128+
const movie = getMovieById(movieId) || {};
129+
130+
return $(`
131+
<div class='movie-preview'>
132+
<div class='movie-preview-image'>
133+
<img src='${movie.image}' />
134+
</div>
135+
<div class='movie-details'>
136+
<div class='title'>${movie.text}</div>
137+
<div>Ticket Price: <b>$${price}</b></div>
138+
<div>
139+
${DevExpress.localization.formatDate(displayStartDate, 'shortTime')}
140+
- ${DevExpress.localization.formatDate(displayEndDate, 'shortTime')}
141+
</div>
142+
</div>
143+
</div>
144+
`);
145+
}
146+
147+
function movieInfoTemplate(movie) {
148+
return $(`
149+
<div class='movie-info'>
150+
<div class='movie-preview-image'>
151+
<img src='${movie.image}' />
152+
</div>
153+
<div class='movie-details'>
154+
<div class='title'>${movie.text} (${movie.year})</div>
155+
<div>Director: ${movie.director}</div>
156+
<div>Duration: ${movie.duration} minutes</div>
157+
</div>
158+
</div>
159+
`);
160+
}
161+
162+
function getEditorStylingMode() {
163+
return $('.dx-theme-fluent, .dx-theme-material').length > 0 ? 'filled' : 'outlined';
130164
}
131165
});

‎apps/demos/Demos/Scheduler/Templates/jQuery/styles.css‎

Lines changed: 41 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,56 @@
11
.dx-tooltip-wrapper .dx-overlay-content .dx-popup-content {
2-
padding: 14px;
2+
padding: 12px;
33
}
44

5-
.showtime-preview > div:first-child {
5+
.dx-scheduler-appointment-popup .dx-overlay-content {
6+
max-width: 440px !important;
7+
}
8+
9+
.movie-preview-image {
10+
height: 80px;
11+
width: 80px;
12+
border-radius: 2px;
13+
overflow: hidden;
14+
}
15+
16+
.movie-preview-image img {
17+
width: 100%;
18+
position: relative;
19+
top: -25%;
20+
}
21+
22+
.movie-preview {
23+
display: flex;
24+
gap: 8px;
25+
}
26+
27+
.movie-preview > .movie-details {
628
font-size: 12px;
7-
white-space: normal;
29+
color: #242424;
830
}
931

10-
.showtime-preview > div:not(:first-child) {
11-
font-size: 11px;
12-
white-space: normal;
32+
.movie-preview > .movie-details > .title {
33+
font-weight: 600;
34+
font-size: 14px;
35+
margin-bottom: 4px;
1336
}
1437

15-
.movie-tooltip .movie-info {
16-
display: inline-block;
17-
margin-left: 10px;
18-
vertical-align: top;
19-
text-align: left;
38+
.movie-info-container {
39+
border-radius: 8px;
40+
padding: 8px;
2041
}
2142

22-
.movie-tooltip img {
23-
height: 80px;
24-
margin-bottom: 10px;
43+
.movie-info {
44+
display: flex;
45+
gap: 12px;
2546
}
2647

27-
.movie-tooltip .movie-title {
28-
font-size: 1.5em;
29-
line-height: 40px;
48+
.movie-info .movie-details {
49+
text-align: left;
3050
}
3151

32-
.long-title h3 {
33-
font-family: 'Segoe UI Light', 'Helvetica Neue Light', 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;
34-
font-weight: 200;
35-
font-size: 28px;
36-
text-align: center;
37-
margin-bottom: 20px;
52+
.movie-info .movie-details > .title {
53+
font-weight: 600;
54+
font-size: 14px;
55+
margin-bottom: 8px;
3856
}

0 commit comments

Comments
 (0)