All docs
V19.1
23.2 (CTP)
The page you are viewing does not exist in version 23.2.
23.1
The page you are viewing does not exist in version 23.1.
22.2
The page you are viewing does not exist in version 22.2.
22.1
The page you are viewing does not exist in version 22.1.
21.2
The page you are viewing does not exist in version 21.2.
21.1
The page you are viewing does not exist in version 21.1.
20.2
The page you are viewing does not exist in version 20.2.
20.1
The page you are viewing does not exist in version 20.1.
19.2
The page you are viewing does not exist in version 19.2.
19.1
18.2
18.1
The page you are viewing does not exist in version 18.1.
17.2
The page you are viewing does not exist in version 17.2.
A newer version of this page is available. Switch to the current version.

DevExtreme jQuery - 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