Skip to content

Commit 1c18d71

Browse files
authored
Scheduler - Appointments Refactoring - Rendering (#33014)
1 parent b60da63 commit 1c18d71

34 files changed

Lines changed: 2931 additions & 51 deletions
Loading
-2 Bytes
Loading
Loading
Loading
-2 Bytes
Loading
Loading

packages/devextreme-scss/scss/widgets/fluent/scheduler/_index.scss

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -209,25 +209,25 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px;
209209

210210
&.dx-scheduler-appointment-recurrence {
211211
@container (max-height: #{$fluent-scheduler-appointment-15min-height}) {
212-
.dx-item-content.dx-scheduler-appointment-content {
212+
.dx-scheduler-appointment-content {
213213
padding-right: $fluent-scheduler-appointment-10min-recurrence-padding-right;
214214
}
215215
}
216216

217217
@container (min-height: #{$fluent-scheduler-appointment-15min-height}) and (max-height: #{$fluent-scheduler-appointment-20min-height}) {
218-
.dx-item-content.dx-scheduler-appointment-content {
218+
.dx-scheduler-appointment-content {
219219
padding-right: $fluent-scheduler-appointment-15min-recurrence-padding-right;
220220
}
221221
}
222222

223223
@container (min-height: #{$fluent-scheduler-appointment-20min-height}) and (max-height: #{$fluent-scheduler-appointment-25min-height}) {
224-
.dx-item-content.dx-scheduler-appointment-content {
224+
.dx-scheduler-appointment-content {
225225
padding-right: $fluent-scheduler-appointment-20min-recurrence-padding-right;
226226
}
227227
}
228228
}
229229

230-
.dx-item-content.dx-scheduler-appointment-content {
230+
.dx-scheduler-appointment-content {
231231
@container (max-height: #{$fluent-scheduler-appointment-25min-height}) {
232232
display: flex;
233233
align-items: center;
@@ -245,7 +245,7 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px;
245245
}
246246

247247
@container (max-height: #{$fluent-scheduler-appointment-15min-height}) {
248-
.dx-item-content.dx-scheduler-appointment-content {
248+
.dx-scheduler-appointment-content {
249249
.dx-scheduler-appointment-title {
250250
font-size: $fluent-scheduler-appointment-10min-title-font-size;
251251
line-height: $fluent-scheduler-appointment-10min-title-line-height;
@@ -259,7 +259,7 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px;
259259
}
260260

261261
@container (min-height: #{$fluent-scheduler-appointment-15min-height}) and (max-height: #{$fluent-scheduler-appointment-20min-height}) {
262-
.dx-item-content.dx-scheduler-appointment-content {
262+
.dx-scheduler-appointment-content {
263263
.dx-scheduler-appointment-title {
264264
font-size: $fluent-scheduler-appointment-15min-title-font-size;
265265
line-height: $fluent-scheduler-appointment-15min-title-line-height;
@@ -273,7 +273,7 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px;
273273
}
274274

275275
@container (min-height: #{$fluent-scheduler-appointment-20min-height}) and (max-height: #{$fluent-scheduler-appointment-25min-height}) {
276-
.dx-item-content.dx-scheduler-appointment-content {
276+
.dx-scheduler-appointment-content {
277277
.dx-scheduler-appointment-recurrence-icon {
278278
right: $fluent-scheduler-appointment-20min-icon-right;
279279
}

packages/devextreme-scss/scss/widgets/generic/scheduler/_index.scss

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -587,25 +587,25 @@ $generic-scheduler-agenda-group-header-padding: $generic-scheduler-agenda-time-c
587587

588588
&.dx-scheduler-appointment-recurrence {
589589
@container (max-height: #{$generic-scheduler-appointment-15min-height}) {
590-
.dx-item-content.dx-scheduler-appointment-content {
590+
.dx-scheduler-appointment-content {
591591
padding-right: $generic-scheduler-appointment-10min-recurrence-padding-right;
592592
}
593593
}
594594

595595
@container (min-height: #{$generic-scheduler-appointment-15min-height}) and (max-height: #{$generic-scheduler-appointment-20min-height}) {
596-
.dx-item-content.dx-scheduler-appointment-content {
596+
.dx-scheduler-appointment-content {
597597
padding-right: $generic-scheduler-appointment-15min-recurrence-padding-right;
598598
}
599599
}
600600

601601
@container (min-height: #{$generic-scheduler-appointment-20min-height}) and (max-height: #{$generic-scheduler-appointment-25min-height}) {
602-
.dx-item-content.dx-scheduler-appointment-content {
602+
.dx-scheduler-appointment-content {
603603
padding-right: $generic-scheduler-appointment-20min-recurrence-padding-right;
604604
}
605605
}
606606
}
607607

608-
.dx-item-content.dx-scheduler-appointment-content {
608+
.dx-scheduler-appointment-content {
609609
@container (max-height: #{$generic-scheduler-appointment-25min-height}) {
610610
display: flex;
611611
align-items: center;
@@ -623,7 +623,7 @@ $generic-scheduler-agenda-group-header-padding: $generic-scheduler-agenda-time-c
623623
}
624624

625625
@container (max-height: #{$generic-scheduler-appointment-15min-height}) {
626-
.dx-item-content.dx-scheduler-appointment-content {
626+
.dx-scheduler-appointment-content {
627627
.dx-scheduler-appointment-title {
628628
font-size: $generic-scheduler-appointment-10min-title-font-size;
629629
line-height: $generic-scheduler-appointment-10min-title-line-height;
@@ -637,7 +637,7 @@ $generic-scheduler-agenda-group-header-padding: $generic-scheduler-agenda-time-c
637637
}
638638

639639
@container (min-height: #{$generic-scheduler-appointment-15min-height}) and (max-height: #{$generic-scheduler-appointment-20min-height}) {
640-
.dx-item-content.dx-scheduler-appointment-content {
640+
.dx-scheduler-appointment-content {
641641
.dx-scheduler-appointment-title {
642642
font-size: $generic-scheduler-appointment-15min-title-font-size;
643643
line-height: $generic-scheduler-appointment-15min-title-line-height;
@@ -652,7 +652,7 @@ $generic-scheduler-agenda-group-header-padding: $generic-scheduler-agenda-time-c
652652

653653
@if $size == "compact" {
654654
@container (max-height: #{$generic-scheduler-appointment-10min-height}) {
655-
.dx-item-content.dx-scheduler-appointment-content {
655+
.dx-scheduler-appointment-content {
656656
display: none;
657657
}
658658
}

packages/devextreme-scss/scss/widgets/material/scheduler/_index.scss

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -182,25 +182,25 @@ $material-scheduler-agenda-time-panel-cell-padding: 8px;
182182

183183
&.dx-scheduler-appointment-recurrence {
184184
@container (max-height: #{$material-scheduler-appointment-15min-height}) {
185-
.dx-item-content.dx-scheduler-appointment-content {
185+
.dx-scheduler-appointment-content {
186186
padding-right: $material-scheduler-appointment-10min-recurrence-padding-right;
187187
}
188188
}
189189

190190
@container (min-height: #{$material-scheduler-appointment-15min-height}) and (max-height: #{$material-scheduler-appointment-20min-height}) {
191-
.dx-item-content.dx-scheduler-appointment-content {
191+
.dx-scheduler-appointment-content {
192192
padding-right: $material-scheduler-appointment-15min-recurrence-padding-right;
193193
}
194194
}
195195

196196
@container (min-height: #{$material-scheduler-appointment-20min-height}) and (max-height: #{$material-scheduler-appointment-25min-height}) {
197-
.dx-item-content.dx-scheduler-appointment-content {
197+
.dx-scheduler-appointment-content {
198198
padding-right: $material-scheduler-appointment-20min-recurrence-padding-right;
199199
}
200200
}
201201
}
202202

203-
.dx-item-content.dx-scheduler-appointment-content {
203+
.dx-scheduler-appointment-content {
204204
@container (max-height: #{$material-scheduler-appointment-25min-height}) {
205205
display: flex;
206206
align-items: center;
@@ -218,7 +218,7 @@ $material-scheduler-agenda-time-panel-cell-padding: 8px;
218218
}
219219

220220
@container (max-height: #{$material-scheduler-appointment-15min-height}) {
221-
.dx-item-content.dx-scheduler-appointment-content {
221+
.dx-scheduler-appointment-content {
222222
.dx-scheduler-appointment-title {
223223
font-size: $material-scheduler-appointment-10min-title-font-size;
224224
line-height: $material-scheduler-appointment-10min-title-line-height;
@@ -232,7 +232,7 @@ $material-scheduler-agenda-time-panel-cell-padding: 8px;
232232
}
233233

234234
@container (min-height: #{$material-scheduler-appointment-15min-height}) and (max-height: #{$material-scheduler-appointment-20min-height}) {
235-
.dx-item-content.dx-scheduler-appointment-content {
235+
.dx-scheduler-appointment-content {
236236
.dx-scheduler-appointment-title {
237237
font-size: $material-scheduler-appointment-15min-title-font-size;
238238
line-height: $material-scheduler-appointment-15min-title-line-height;
@@ -246,7 +246,7 @@ $material-scheduler-agenda-time-panel-cell-padding: 8px;
246246
}
247247

248248
@container (min-height: #{$material-scheduler-appointment-20min-height}) and (max-height: #{$material-scheduler-appointment-25min-height}) {
249-
.dx-item-content.dx-scheduler-appointment-content {
249+
.dx-scheduler-appointment-content {
250250
.dx-scheduler-appointment-recurrence-icon {
251251
right: $material-scheduler-appointment-20min-icon-right;
252252
}
Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { EmptyTemplate } from '@ts/core/templates/m_empty_template';
2+
import { mockAppointmentDataAccessor } from '@ts/scheduler/__mock__/appointment_data_accessor.mock';
3+
import type { SafeAppointment, TargetedAppointment } from '@ts/scheduler/types';
4+
import type { AppointmentDataAccessor } from '@ts/scheduler/utils/data_accessor/appointment_data_accessor';
5+
6+
import type { BaseAppointmentViewProperties } from '../appointment/base_appointment';
7+
8+
export const getBaseAppointmentProperties = (
9+
appointmentData: SafeAppointment,
10+
targetedAppointmentData?: TargetedAppointment,
11+
): BaseAppointmentViewProperties => {
12+
const normalizedTargetedAppointmentData = targetedAppointmentData ?? {
13+
...appointmentData,
14+
displayStartDate: appointmentData.startDate as Date,
15+
displayEndDate: appointmentData.endDate as Date,
16+
};
17+
18+
const config: BaseAppointmentViewProperties = {
19+
appointmentData,
20+
targetedAppointmentData: normalizedTargetedAppointmentData,
21+
appointmentTemplate: new EmptyTemplate(),
22+
onAppointmentRendered: () => {},
23+
getDataAccessor: (): AppointmentDataAccessor => mockAppointmentDataAccessor,
24+
getResourceColor: (): Promise<string | undefined> => Promise.resolve(undefined),
25+
};
26+
27+
return config;
28+
};

0 commit comments

Comments
 (0)