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
<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
<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; }
dx-item-alias
directive specifies the variable that is used to access the item object.Knockout
<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:
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.