Angular Scheduler - Customize Appointment Tooltip
When a user clicks an appointment, the Scheduler shows a tooltip that can be customized. For Angular, AngularJS and Knockout apps, DevExtreme provides the dxTemplate markup component. The following code shows how to use dxTemplate to define templates for tooltips.
Angular
<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 ], // ... })
AngularJS
<div ng-controller="DemoController"> <div dx-scheduler="{ dataSource: schedulerData, appointmentTooltipTemplate: 'tooltip', currentDate: currentDate, }" dx-item-alias="model"> <div data-options="dxTemplate: { name: 'tooltip' }"> <div style="height: 100px"> <i>{{model.appointmentData.text}} ({{model.appointmentData.year}})</i> <p><img src="{{model.appointmentData.img}}" style="height: 80px"></p> </div> </div> </div> </div>
angular.module('DemoApp', ['dx']) .controller('DemoController', function DemoController($scope) { $scope.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") }, // ... ]; $scope.currentDate = new Date(2016, 4, 24); });
dx-item-alias
directive specifies the variable that is used to access the item object.Knockout
<div data-bind="dxScheduler: { dataSource: schedulerData, appointmentTooltipTemplate: 'tooltip', currentDate: currentDate }"> <div style="height: 100px" data-options="dxTemplate: { name: 'tooltip' }"> <i> <span data-bind="text: appointmentData.text"></span>(<span data-bind="text: appointmentData.year"></span>)</i> <p><img style="height: 80px" data-bind="attr: { src: appointmentData.img }" /></p> </div> </div>
var viewModel= { 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) }; ko.applyBindings(viewModel);
Vue
<template> <DxScheduler :data-source="appointments" :current-date="currentDate" appointment-tooltip-template="appointmentTooltipTemplate" > <template #appointmentTooltipTemplate="{ data }"> <div style="height: 100px"> <i>{{data.appointmentData.text}} ({{data.appointmentData.year}})</i> <p><img :src="data.appointmentData.img" style="height: 80px"></p> </div> </template> </DxScheduler> </template> <script> import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import DxScheduler from 'devextreme-vue/scheduler'; export default { components: { DxScheduler }, data() { return { currentDate: new Date(2016, 4, 25), appointments: [{ 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") }, // ... ]; } } } </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import Scheduler from 'devextreme-react/scheduler'; const appointments = [{ 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") }, // ... ]; const renderAppointmentTooltip = (model) => { return ( <div style={{height: '100px'}}> <i>{model.appointmentData.text} ({model.appointmentData.year})</i> <p><img src={model.appointmentData.img} style={{height: '80px'}}></p> </div> ); } class App extends React.Component { render() { return ( <Scheduler dataSource={appointments} defaultCurrentDate={new Date(2016, 4, 25)} appointmentTooltipRender={renderAppointmentTooltip} /> ); } } export default App;
If you use only jQuery, combine HTML markup for tooltips manually with jQuery DOM manipulation methods. To apply this markup, use the appointmentTooltipTemplate callback function as shown in the following code.
var 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") }, // ... ]; $(function () { $("#schedulerContainer").dxScheduler({ dataSource: schedulerData, currentDate: new Date(2016, 4, 24), appointmentTooltipTemplate: function (model, index, element) { element.append("<i>" + model.appointmentData.text + "(" + model.appointmentData.year + ")</i>"); element.append("<p><img style='height: 80px' src='" + model.appointmentData.img + "' /></p>"); } }); });
In addition, you can use a 3rd-party template engine to customize the UI component appearance. For more information, see the 3rd-Party Template Engines article.
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.