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');
  • });

View Demo

See Also