Skip to main content

SchedulerAppointmentTooltipInfo Class

Stores information about the appointment tooltip.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.1.dll

NuGet Package: DevExpress.Blazor


public class SchedulerAppointmentTooltipInfo


The DxScheduler shows a tooltip when a user clicks an appointment. TThe tooltip displays the appointment subject, start date, end date, and resource (if specified).

Scheduler - Default appointment tooltip

You can use the AppointmentTooltipTemplate property to customize the tooltip’s layout and appearance. The property accepts a SchedulerAppointmentTooltipInfo object as the context parameter. Use the context parameter to access appointment data.

The code below creates a custom tooltip. The tooltip header displays the appointment’s subject (context.Appointment.Subject), the accepted status if it’s true, and predefined buttons. The tooltip body displays the appointment’s subject (context.Appointment.Subject) and resource (context.Resource.Caption).

@using Data

<DxScheduler StartDate="@DateTime.Today" 
             ShowAppointmentTooltip = "true">
        <DxSchedulerDayView DayCount="2" ShowWorkTimeOnly="true"/>
        <div class="tooltip-text-header">@context.Appointment.Subject</div>
        @if (IsAccepted(context))
            <div style="margin-right: .3em;">(Accepted)</div>
        <span style="vertical-align: middle;">
        @if (context.Resource != null)
            <span style="vertical-align: middle;">

@code {
    DxSchedulerDataStorage DataStorage = new DxSchedulerDataStorage() {
            AppointmentsSource = ResourceAppointmentCollection.GetAppointments(),
            AppointmentMappings = new DxSchedulerAppointmentMappings() {
                Type = "AppointmentType",
                Start = "StartDate",
                End = "EndDate",
                Subject = "Caption",
                AllDay = "AllDay",
                Location = "Location",
                Description = "Description",
                LabelId = "Label",
                StatusId = "Status",
                RecurrenceInfo = "Recurrence",
                ResourceId = "ResourceId",
                CustomFieldMappings = new List<DxSchedulerCustomFieldMapping> {
                new DxSchedulerCustomFieldMapping{ Name = "Accepted", Mapping = "Accepted" }
            ResourcesSource = ResourceAppointmentCollection.GetResourcesForGrouping(),
            ResourceMappings = new DxSchedulerResourceMappings() {
                Id = "Id",
                Caption = "Name",
                BackgroundCssClass = "BackgroundCss",
                TextCssClass = "TextCss"
    bool IsAccepted(SchedulerAppointmentTooltipInfo tooltipInfo) => 

    .tooltip-text-header {
        margin-right: auto;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;

Scheduler - A custom appointment tooltip

Run Demo: Scheduler - Appointment Tooltip Template


See Also