jQuery Scheduler - Customize Appointment Tooltip
jQuery
When a user clicks an appointment, the Scheduler shows a tooltip that can be customized. Combine HTML markup for tooltips manually with DOM manipulation methods. To apply this markup, use the appointmentTooltipTemplate callback function as shown in the following code:
JavaScript
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>");
}
});
});Angular
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
],
// ...
})Vue
When a user clicks an appointment, the Scheduler shows a tooltip that can be customized. The following code shows how to define templates for tooltips:
App.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.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
When a user clicks an appointment, the Scheduler shows a tooltip that can be customized. The following code shows how to define a rendering function for tooltips:
App.js
import React from 'react';
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;See Also
Feedback