All docs
V19.2
19.2
19.1
18.2
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.
17.1
The page you are viewing does not exist in version 17.1. This link will take you to the root page.
16.2
The page you are viewing does not exist in version 16.2. This link will take you to the root page.

Appointment Collector

Appointments are aggregated in an appointment collector when the limit of full-sized appointments per cell is exceeded. Users should click on it to open a drop-down list of appointments.

Scheduler Appointment Collector and Drop-Down List

Use the appointmentCollectorTemplate and dropDownAppointmentTemplate options to customize the elements.

In the following code, the compact and non-compact appointment collectors have different texts, and a custom button that opens a details form is added near each appointment:

jQuery
JavaScript
CSS
$(function () {
    $("#schedulerContainer").dxScheduler({
        // ...
        dropDownAppointmentTemplate: function (data, index, element) {
            var container = $("<div>" + data.text + "</div>");
            var button = $("<span class='edit'>").dxButton({ icon: "event" });
            element.append(container.append(button));
        },
        appointmentCollectorTemplate: function(data, element) {
            if(data.isCompact) {
                element[0].innerText = data.appointmentCount;
            } else {
                element[0].innerText = "Total: " + data.appointmentCount;
            }
            element.addClass("collector");
        }
    });
});
.edit{
    margin-left: 10px;
}
.collector {
    font-style: italic;
    color: aliceblue;
}
Angular
HTML
TypeScript
CSS
<dx-scheduler  ...
    dropDownAppointmentTemplate="ddAppointment"
    appointmentCollectorTemplate="collectorTemplate">
    <div *dxTemplate="let item of 'ddAppointment'">
        <div>
            {{item.text}}
            <span class="edit"><dx-button icon="event"></dx-button></span>
        </div>
    </div>
    <div *dxTemplate="let data of 'collectorTemplate'" class="collector">
        <div *ngIf="data.isCompact">{{data.appointmentCount}}</div>
        <div *ngIf="!data.isCompact">Total: {{data.appointmentCount}}</div>
    </div>
</dx-scheduler>
import { DxSchedulerModule, DxButtonModule } from "devextreme-angular";
// ...
export class AppComponent  {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxSchedulerModule,
        DxButtonModule
    ],
    // ...
})
::ng-deep .edit {
    margin-left: 10px;
}
::ng-deep .collector {
    font-style: italic;
    color: aliceblue;
}
AngularJS
HTML
JavaScript
CSS
<div ng-controller="DemoController">
    <div dx-scheduler="{
        ...
        dropDownAppointmentTemplate: 'ddAppointment',
        appointmentCollectorTemplate: 'collectorTemplate'
    }" dx-item-alias="item">
        <div data-options="dxTemplate: { name: 'ddAppointment' }">
            <div>
                {{item.text}}
                <span class="edit" dx-button="{ icon: 'event' }</span>
            </div>
        </div>
        <div data-options="dxTemplate: { name: 'collectorTemplate' }" class="collector">
            <div ng-if="item.isCompact">{{item.appointmentCount}}</div>
            <div ng-if="!item.isCompact">Total: {{item.appointmentCount}}</div>
        </div>
    </div>
</div>
angular.module('DemoApp', ['dx'])
    .controller('DemoController', function DemoController($scope) {
        // ...
    });
.edit {
    margin-left: 10px;
}
.collector {
    font-style: italic;
    color: aliceblue;
}
NOTE
The dx-item-alias directive specifies the variable that is used to access the item object.
Knockout
HTML
CSS
<div data-bind="dxScheduler: {
    ...
    dropDownAppointmentTemplate: 'ddAppointment',
    appointmentCollectorTemplate: 'collectorTemplate'
}">
    <div data-options="dxTemplate: { name: 'ddAppointment' }">
        <div>
            <span data-bind="text: text"></span>
            <span class="edit" data-bind="dxButton: { icon: 'event' }"></span>
        </div>
    </div>
    <div data-options="dxTemplate: { name: 'collectorTemplate' }" class="collector">
            <div data-bind="if: isCompact">
                <span data-bind="text: appointmentCount"></span>
            </div>
            <div data-bind="if: !isCompact">
                Total: <span data-bind="text: appointmentCount"></span>
            </div>
    </div>
</div>
.edit {
    margin-left: 10px;
}
.collector {
    font-style: italic;
    color: aliceblue;
}

In case of jQuery, you can also use a 3rd-party template engine to customize the widget's appearance. See the 3rd-Party Template Engines article for more information.

See Also