Angular Scheduler - Customize Appointment Tooltip

When a user clicks an appointment, the Scheduler shows a tooltip that can be customized. The following code shows how to use dxTemplate to define templates for tooltips:

app.component.html
app.components.ts
tooltip.component.html
tooltip.components.ts
  • <dx-scheduler
  • #targetScheduler
  • appointmentTooltipTemplate="appointmentTooltipTemplate"
  • >
  • <ng-container *dxTemplate="let data of 'appointmentTooltipTemplate'">
  •  
  • <!-- NOTE: You can use data.appointmentData.resouceId to obtain resource color -->
  • <Tooltip
  • [appointmentData]="data.appointmentData"
  • [isDeleteButtonExist]="isDeleteButtonExist(data)"
  • [markerColor]="#337ab7"
  • (onDeleteButtonClick)="onDeleteButtonClick($event, data.appointmentData)"
  • ></Tooltip>
  • </ng-container>
  • </dx-scheduler>
  • export class AppComponent {
  • @ViewChild('targetScheduler', { static: true })
  • scheduler: DxSchedulerComponent;
  •  
  • constructor(private service: Service) {}
  •  
  • onDeleteButtonClick(e: ClickEvent, appointmentData: dxSchedulerAppointment): void {
  • this.scheduler.instance.deleteAppointment(appointmentData);
  • e.event.stopPropagation();
  • this.scheduler.instance.hideAppointmentTooltip();
  • }
  •  
  • isDeleteButtonExist({ appointmentData }: { appointmentData: dxSchedulerAppointment}): boolean {
  • const schedulerInstance = this.scheduler.instance;
  • const isAppointmentDisabled = appointmentData.disabled;
  • const isDeleteAllowed = (schedulerInstance.option('editing') && schedulerInstance.option('editing.allowDeleting') === true)
  • || schedulerInstance.option('editing') === true;
  •  
  • return !isAppointmentDisabled && isDeleteAllowed;
  • }
  • }
  • <div class="dx-tooltip-appointment-item">
  • <div class="dx-tooltip-appointment-item-marker">
  • <div
  • class="dx-tooltip-appointment-item-marker-body"
  • [style.background-color]="markerColor"
  • ></div>
  • </div>
  •  
  • <div class="dx-tooltip-appointment-item-content">
  • <div class="dx-tooltip-appointment-item-content">
  • <div class="dx-tooltip-appointment-item-content-subject">
  • {{appointmentData.text}}
  • </div>
  • <div class="dx-tooltip-appointment-item-content-date">
  • {{appointmentData.startDate}}
  • </div>
  • </div>
  • </div>
  • <div
  • *ngIf="isDeleteButtonExist"
  • class="dx-tooltip-appointment-item-delete-button-container"
  • >
  • <dx-button
  • class="dx-tooltip-appointment-item-delete-button"
  • icon="trash"
  • stylingMode="text"
  • (onClick)="onDeleteButtonClick.emit($event)"
  • ></dx-button>
  • </div>
  • </div>
  • @Component({
  • selector: "Tooltip",
  • templateUrl: "./tooltip.component.html"
  • })
  •  
  • export class TooltipComponent {
  • @Input() appointmentData: dxSchedulerAppointment;
  • @Input() markerColor: string;
  • @Input() isDeleteButtonExist: boolean;
  • @Output() onDeleteButtonClick = new EventEmitter<ClickEvent>();
  • }
  •  
  • @NgModule({
  • imports: [DxButtonModule, CommonModule],
  • declarations: [TooltipComponent],
  • exports: [TooltipComponent]
  • })
  •  
  • export class TooltipModule {}

View Demo

See Also