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>
- import { DxSchedulerTypes } from "devextreme-angular/ui/scheduler";
- import { DxButtonTypes } from "devextreme-angular/ui/button";
- export class AppComponent {
- @ViewChild('targetScheduler', { static: true })
- scheduler: DxSchedulerComponent;
- constructor(private service: Service) {}
- onDeleteButtonClick(e: DxButtonTypes.ClickEvent, appointmentData: DxSchedulerTypes.Appointment): void {
- this.scheduler.instance.deleteAppointment(appointmentData);
- e.event.stopPropagation();
- this.scheduler.instance.hideAppointmentTooltip();
- }
- isDeleteButtonExist({ appointmentData }: { appointmentData: DxSchedulerTypes.Appointment }): 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>
- import { DxSchedulerTypes } from "devextreme-angular/ui/scheduler";
- import { DxButtonTypes } from "devextreme-angular/ui/button";
- @Component({
- selector: "Tooltip",
- templateUrl: "./tooltip.component.html"
- })
- export class TooltipComponent {
- @Input() appointmentData: DxSchedulerTypes.Appointment
- @Input() markerColor: string;
- @Input() isDeleteButtonExist: boolean;
- @Output() onDeleteButtonClick = new EventEmitter<DxButtonTypes.ClickEvent>();
- }
- @NgModule({
- imports: [DxButtonModule, CommonModule],
- declarations: [TooltipComponent],
- exports: [TooltipComponent]
- })
- export class TooltipModule {}
See Also
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.