Skip to content

Commit 303b065

Browse files
aleksei-semikozovaleksei-semikozov
authored
Rewrite Customization/Templates demo (#31738)
1 parent 6311023 commit 303b065

22 files changed

+1215
-650
lines changed

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

Lines changed: 67 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,88 @@
1+
::ng-deep .dx-scheduler-work-space-week .dx-scheduler-date-table {
2+
width: 3500px;
3+
}
4+
5+
::ng-deep .dx-scheduler-timeline-day .dx-scheduler-date-table {
6+
width: 3500px;
7+
}
8+
19
::ng-deep .dx-tooltip-wrapper .dx-overlay-content .dx-popup-content {
2-
padding: 14px;
10+
padding: 12px;
311
}
412

5-
::ng-deep .showtime-preview > div:first-child {
6-
font-size: 12px;
7-
white-space: normal;
13+
::ng-deep .movie-preview-image {
14+
max-height: 80px;
15+
max-width: 80px;
16+
min-height: 60px;
17+
min-width: 60px;
18+
border-radius: 2px;
19+
overflow: hidden;
820
}
921

10-
::ng-deep .showtime-preview > div:not(:first-child) {
11-
font-size: 11px;
22+
::ng-deep .movie-preview-image img {
23+
width: 100%;
24+
position: relative;
25+
top: -25%;
26+
pointer-events: none;
27+
}
28+
29+
::ng-deep .movie-preview {
30+
display: flex;
31+
gap: 8px;
32+
max-height: 100%;
1233
white-space: normal;
1334
}
1435

15-
::ng-deep .movie-tooltip .movie-info {
16-
display: inline-block;
17-
margin-left: 10px;
18-
vertical-align: top;
36+
::ng-deep .movie-preview > .movie-details {
37+
font-size: 12px;
38+
color: #242424;
39+
}
40+
41+
::ng-deep .movie-preview > .movie-details > .title {
42+
font-weight: 600;
43+
font-size: 14px;
44+
margin-bottom: 4px;
45+
}
46+
47+
::ng-deep .movie-info-container {
48+
border-radius: 8px;
49+
padding-bottom: 8px;
50+
}
51+
52+
::ng-deep .movie-info {
53+
display: flex;
54+
gap: 12px;
55+
}
56+
57+
::ng-deep .dx-theme-material .movie-info {
58+
gap: 16px;
59+
}
60+
61+
::ng-deep .movie-info .movie-preview-image {
62+
border: 1px solid var(--dx-color-border);
63+
}
64+
65+
::ng-deep .movie-info .movie-details {
1966
text-align: left;
2067
}
2168

22-
::ng-deep .movie-tooltip img {
23-
height: 80px;
24-
margin-bottom: 10px;
69+
::ng-deep .movie-info .movie-details > .title {
70+
font-weight: 600;
71+
font-size: 14px;
72+
margin-bottom: 8px;
2573
}
2674

27-
::ng-deep .movie-tooltip .movie-title {
28-
font-size: 1.5em;
29-
line-height: 40px;
75+
::ng-deep .dx-scheduler-form-end-date-group.dx-field-item {
76+
padding-bottom: 12px;
3077
}
3178

3279
::ng-deep .long-title h3 {
33-
font-family: 'Segoe UI Light', 'Helvetica Neue Light', 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;
3480
font-weight: 200;
3581
font-size: 28px;
3682
text-align: center;
3783
margin-bottom: 20px;
3884
}
85+
86+
::ng-deep .dx-scheduler-appointment::before {
87+
opacity: 0.26 !important;
88+
}

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

Lines changed: 115 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -3,73 +3,156 @@ <h3>DXCinema Show Times</h3>
33
</div>
44
<dx-scheduler
55
timeZone="America/Los_Angeles"
6-
id="scheduler"
76
[dataSource]="data"
87
[views]="['day', 'week', 'timelineDay']"
98
currentView="day"
9+
[currentDate]="currentDate"
1010
[firstDayOfWeek]="0"
1111
[startDayHour]="9"
1212
[endDayHour]="23"
1313
[showAllDayPanel]="false"
14+
[height]="600"
1415
[groups]="['theatreId']"
15-
[currentDate]="currentDate"
1616
[crossScrollingEnabled]="true"
1717
[cellDuration]="20"
18-
[height]="600"
1918
appointmentTemplate="appointment-template"
2019
appointmentTooltipTemplate="tooltip-template"
21-
(onAppointmentFormOpening)="onAppointmentFormOpening($event)"
2220
>
23-
<dxo-scheduler-editing [allowAdding]="false"></dxo-scheduler-editing>
24-
2521
<dxi-scheduler-resource
2622
fieldExpr="movieId"
27-
[useColorAsDefault]="true"
2823
[dataSource]="moviesData"
24+
[useColorAsDefault]="true"
2925
>
3026
</dxi-scheduler-resource>
3127

3228
<dxi-scheduler-resource fieldExpr="theatreId" [dataSource]="theatreData">
3329
</dxi-scheduler-resource>
3430

35-
<div *dxTemplate="let model of 'appointment-template'">
36-
<div class="showtime-preview">
37-
<div>{{
38-
(getMovieById | apply : model.appointmentData.movieId : this).text
39-
}}</div>
40-
<div
41-
>Ticket Price:
42-
<strong>{{ "$" + model.targetedAppointmentData.price }}</strong>
31+
<dxo-scheduler-editing
32+
[allowAdding]="false"
33+
[popup]="{
34+
maxWidth: 440,
35+
onOptionChanged: onPopupOptionChanged
36+
}"
37+
>
38+
<dxo-scheduler-form [onInitialized]="onFormInitialized">
39+
<dxi-scheduler-item
40+
template="movie-info-form-template"
41+
></dxi-scheduler-item>
42+
43+
<dxi-scheduler-item
44+
itemType="group"
45+
[colCount]="2"
46+
[colCountByScreen]="{ xs: 2 }"
47+
>
48+
<dxi-scheduler-item
49+
dataField="movieId"
50+
editorType="dxSelectBox"
51+
[label]="{ text: 'Movie' }"
52+
[colSpan]="1"
53+
[editorOptions]="{
54+
items: moviesData,
55+
displayExpr: 'text',
56+
valueExpr: 'id',
57+
stylingMode: getEditorStylingMode(),
58+
onValueChanged: onMovieValueChanged,
59+
onContentReady: onMovieEditorContentReady
60+
}"
61+
>
62+
</dxi-scheduler-item>
63+
64+
<dxi-scheduler-item
65+
dataField="price"
66+
editorType="dxSelectBox"
67+
[label]="{ text: 'Price' }"
68+
[colSpan]="1"
69+
[editorOptions]="{
70+
items: [5, 10, 15, 20],
71+
displayExpr: priceDisplayExpr,
72+
stylingMode: getEditorStylingMode(),
73+
onContentReady: onPriceEditorContentReady
74+
}"
75+
>
76+
</dxi-scheduler-item>
77+
</dxi-scheduler-item>
78+
79+
<dxi-scheduler-item name="startDateGroup"></dxi-scheduler-item>
80+
81+
<dxi-scheduler-item
82+
name="endDateGroup"
83+
[disabled]="true"
84+
></dxi-scheduler-item>
85+
</dxo-scheduler-form>
86+
</dxo-scheduler-editing>
87+
88+
<div
89+
*dxTemplate="let data of 'movie-info-form-template'"
90+
class="movie-info-container"
91+
>
92+
<ng-container *ngIf="currentSelectedMovie as movie; else noMovieSelected">
93+
<div class="movie-info">
94+
<div class="movie-preview-image">
95+
<img [src]="movie.image" [alt]="movie.text" />
96+
</div>
97+
<div class="movie-details">
98+
<div class="title">{{ movie.text }} ({{ movie.year }})</div>
99+
<div>Director: {{ movie.director }}</div>
100+
<div>Duration: {{ movie.duration }} minutes</div>
101+
</div>
43102
</div>
44-
<div class="dropdown-appointment-dates">
45-
{{
46-
(model.targetedAppointmentData.displayStartDate
47-
| date : "shortTime") +
48-
" - " +
49-
(model.targetedAppointmentData.displayEndDate | date : "shortTime")
50-
}}
103+
</ng-container>
104+
<ng-template #noMovieSelected>
105+
<div class="movie-info">
106+
<div class="movie-preview-image"></div>
107+
<div class="movie-details">
108+
<div class="title">Select a movie</div>
109+
</div>
51110
</div>
52-
</div>
111+
</ng-template>
53112
</div>
54113

55-
<div *dxTemplate="let model of 'tooltip-template'">
114+
<div *dxTemplate="let model of 'appointment-template'">
56115
<ng-container
57116
*ngIf="getMovieById | apply : model.appointmentData.movieId as movie"
58117
>
59-
<div class="movie-tooltip">
60-
<img [src]="movie.image" />
61-
<div class="movie-info">
62-
<div class="movie-title">
63-
{{ movie.text + " (" + movie.year + ")" }}
64-
</div>
118+
<div class="movie-preview">
119+
<div class="movie-preview-image">
120+
<img [src]="movie.image" [alt]="movie.text" />
121+
</div>
122+
<div class="movie-details">
123+
<div class="title">{{ movie.text }}</div>
65124
<div>
66-
{{ "Director: " + movie.director }}
125+
Ticket Price:
126+
<strong>${{ model.targetedAppointmentData.price }}</strong>
67127
</div>
68128
<div>
69-
{{ "Duration: " + movie.duration + " minutes" }}
129+
{{
130+
(model.targetedAppointmentData.displayStartDate
131+
| date : "shortTime") +
132+
" - " +
133+
(model.targetedAppointmentData.displayEndDate
134+
| date : "shortTime")
135+
}}
70136
</div>
71137
</div>
72138
</div>
73139
</ng-container>
74140
</div>
141+
142+
<div *dxTemplate="let model of 'tooltip-template'">
143+
<ng-container
144+
*ngIf="getMovieById | apply : model.appointmentData.movieId as movie"
145+
>
146+
<div class="movie-info">
147+
<div class="movie-preview-image">
148+
<img [src]="movie.image" [alt]="movie.text" />
149+
</div>
150+
<div class="movie-details">
151+
<div class="title">{{ movie.text + " (" + movie.year + ")" }}</div>
152+
<div>Director: {{ movie.director }}</div>
153+
<div>Duration: {{ movie.duration }} minutes</div>
154+
</div>
155+
</div>
156+
</ng-container>
157+
</div>
75158
</dx-scheduler>

0 commit comments

Comments
 (0)