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:

HTML
TypeScript
  • <dx-scheduler
  • [dataSource]="schedulerData"
  • appointmentTooltipTemplate="tooltipTemplate"
  • [currentDate]="currentDate">
  • <div *dxTemplate="let model of 'tooltipTemplate'">
  • <i>{{model.appointmentData.text}} ({{model.appointmentData.year}})</i>
  • <p><img src="{{model.appointmentData.img}}" style="height: 80px"></p>
  • </div>
  • </dx-scheduler>
  • import { DxSchedulerModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • schedulerData = [{
  • text: "His Girl Friday",
  • year: 1940,
  • img: "images/movies/HisGirlFriday.jpg",
  • startDate: new Date("2016-04-24T09:10:00.000Z"),
  • endDate: new Date("2016-04-24T11:20:00.000Z")
  • },
  • // ...
  • ];
  • currentDate = new Date(2016, 4, 24);
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxSchedulerModule
  • ],
  • // ...
  • })

View Demo

See Also