JavaScript/jQuery Scheduler - Customize Appointment Tooltip
When a user clicks an appointment, the Scheduler shows a tooltip that can be customized. Combine HTML markup for tooltips with DOM methods. To apply this markup, use the appointmentTooltipTemplate callback function as shown in the following code:
JavaScript
- $(() => {
- const scheduler = $('#schedulerContainer').dxScheduler({
- appointmentTooltipTemplate(data, cell) {
- const tooltip = $('<div class="dx-tooltip-appointment-item">');
- // NOTE: You can use data.appointmentData.resouceId to obtain resource color
- const markerColor = '#337ab7';
- const markerBody = $('<div class="dx-tooltip-appointment-item-marker-body">').css('background', markerColor);
- const marker = $('<div class="dx-tooltip-appointment-item-marker">').append(markerBody);
- const content = $('<div class="dx-tooltip-appointment-item-content">')
- .append($('<div class="dx-tooltip-appointment-item-content-subject">').text(data.appointmentData.text))
- .append($('<div class="dx-tooltip-appointment-item-content-date">').text(data.appointmentData.startDate));
- tooltip.append(marker);
- tooltip.append(content);
- const isAppointmentDisabled = data.appointmentData.disabled;
- const isDeleteAllowed = (scheduler.option('editing') && scheduler.option('editing.allowDeleting') === true)
- || scheduler.option('editing') === true;
- if (!isAppointmentDisabled && isDeleteAllowed) {
- const buttonContainer = $('<div class="dx-tooltip-appointment-item-delete-button-container">');
- const button = $('<div class="dx-tooltip-appointment-item-delete-button">').dxButton({
- icon: 'trash',
- stylingMode: 'text',
- onClick(e) {
- scheduler.deleteAppointment(data.appointmentData);
- e.event.stopPropagation();
- scheduler.hideAppointmentTooltip();
- }
- });
- buttonContainer.append(button);
- tooltip.append(buttonContainer);
- }
- return tooltip;
- },
- }).dxScheduler('instance');
- });
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.