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
- ],
- // ...
- })
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.