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.
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:
- <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
If you have technical questions, please create a support ticket in the DevExpress Support Center.