DevExtreme jQuery/JS - 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.

Angular
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;
}
AngularJS
HTML
JavaScript
CSS
<div ng-controller="DemoController">
    <div dx-scheduler="{
        ...
        dataSource: schedulerData,
        dropDownAppointmentTemplate: 'ddAppointment'
    }" dx-item-alias="item">
        <div data-options="dxTemplate: { name: 'ddAppointment' }">
            <div class="drop-down-appointment">
                <div class="drop-down-appointment-content">{{item.text}}</div>
                <div class="edit" dx-button="{ icon: 'event' }"></div>
            </div>
        </div>
    </div>
</div>
angular.module('DemoApp', ['dx'])
    .controller('DemoController', function DemoController($scope) {
        $scope.schedulerData = [{
            text: "Website Re-Design Plan",
            startDate: new Date(2017, 4, 22, 9, 30),
            endDate: new Date(2017, 4, 22, 11, 30)
        },
        // ...
        ];
    });
.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;
}
NOTE
The dx-item-alias directive specifies the variable that is used to access the item object.
Knockout
HTML
JavaScript
CSS
<div data-bind="dxScheduler: {
    ...
    dataSource: schedulerData,
    dropDownAppointmentTemplate: 'ddAppointment'
}">
    <div data-options="dxTemplate: { name: 'ddAppointment' }">
        <div class="drop-down-appointment">
            <div class="drop-down-appointment-content" data-bind="text: text"></div>
            <div class="edit" data-bind="dxButton: { icon: 'event' }"></div>
        </div>
    </div>
</div>
var viewModel= {
    schedulerData: [{
        text: "Website Re-Design Plan",
        startDate: new Date(2017, 4, 22, 9, 30),
        endDate: new Date(2017, 4, 22, 11, 30)
    },
    // ...
    ]
};

ko.applyBindings(viewModel);
.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