DevExtreme Vue - 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.

HTML
TypeScript
CSS
  • <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:

JavaScript
CSS
  • 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