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.

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