JavaScript/jQuery 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.
- 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.