DevExtreme Angular - 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:

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;
  • }

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