JavaScript/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;

View Demo

See Also