DevExtreme Angular - Customize Drop-Down List
When the full-sized appointment limit per cell is exceeded, appointments are aggregated in an appointment collector. Clicking it displays a customizable drop-down list with appointments. Use the dxTemplate markup component to customize this list in Angular, AngularJS and Knockout apps.
- <dx-scheduler ...
- [dataSource]="schedulerData"
- dropDownAppointmentTemplate="ddAppointment">
- <div *dxTemplate="let item of 'ddAppointment'">
- <div class="drop-down-appointment">
- <div class="drop-down-appointment-content">{{item.text}}</div>
- <div class="edit"><dx-button icon="event"></dx-button></div>
- </div>
- </div>
- </dx-scheduler>
- import { DxSchedulerModule, DxButtonModule } from "devextreme-angular";
- // ...
- export class AppComponent {
- schedulerData = [{
- text: "Website Re-Design Plan",
- startDate: new Date(2017, 4, 22, 9, 30),
- endDate: new Date(2017, 4, 22, 11, 30)
- },
- // ...
- ];
- }
- @NgModule({
- imports: [
- // ...
- DxSchedulerModule,
- DxButtonModule
- ],
- // ...
- })
- .drop-down-appointment {
- border-bottom: 1px solid lightsteelblue;
- display: flex;
- padding: 10px;
- width: 300px
- }
- .drop-down-appointment-content {
- vertical-align: middle;
- margin: 8px;
- }
- .edit {
- float: right;
- height: 35px;
- position: absolute;
- right: 10px;
- }
If you use only jQuery, manually combine HTML markup for the drop-down list using jQuery DOM manipulation methods. To apply this markup, use the dropDownAppointmentTemplate callback function as shown in the following code:
- var schedulerData = [{
- text: "Website Re-Design Plan",
- startDate: new Date(2017, 4, 22, 9, 30),
- endDate: new Date(2017, 4, 22, 11, 30)
- },
- // ...
- ];
- $(function () {
- $("#schedulerContainer").dxScheduler({
- dataSource: [{
- text: "Website Re-Design Plan",
- startDate: new Date(2017, 4, 22, 9, 30),
- endDate: new Date(2017, 4, 22, 11, 30)
- },
- // ...
- ],
- dropDownAppointmentTemplate: function (data, index, element) {
- var markup = $("<div class='drop-down-appointment'>" +
- "<div class='drop-down-appointment-content'>" + data.text + "</div>" +
- "<div class='edit'></div>" +
- "</div>");
- markup.find(".edit").dxButton({ icon: "event" });
- return markup;
- }
- });
- });
- .drop-down-appointment {
- border-bottom: 1px solid lightsteelblue;
- display: flex;
- padding: 10px;
- width: 300px
- }
- .drop-down-appointment-content {
- vertical-align: middle;
- margin: 8px;
- }
- .edit {
- float: right;
- height: 35px;
- position: absolute;
- right: 10px;
- }
You can also use a 3rd-party template engine to customize the widget appearance. See the 3rd-Party Template Engines article for more information.
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.