Skip to main content

SchedulerAppointmentTooltipInfo Class

Stores information about the appointment tooltip.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v21.2.dll

Declaration

public class SchedulerAppointmentTooltipInfo

Remarks

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 that displays the appointment subject (context.Appointment.Subject) and resource (context.Resource.Caption).

@using Data

<DxScheduler StartDate="@DateTime.Today"
             DataStorage="@DataStorage"
             GroupType="SchedulerGroupType.Date">
    <Views>
        <DxSchedulerDayView/>
    </Views>
    <AppointmentTooltipTemplate>
        <div class="container">
            <span style="vertical-align: middle;">
                @context.Appointment.Subject
            </span>
            @if (context.Resource != null) {
                <span style="vertical-align: middle;">
                    (@context.Resource.Caption)
                </span>
            }
        </div>
    </AppointmentTooltipTemplate>
</DxScheduler>

@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"
        },
        ResourcesSource = ResourceAppointmentCollection.GetResourcesForGrouping(),
        ResourceMappings = new DxSchedulerResourceMappings() {
            Id = "Id",
            Caption = "Name",
            BackgroundCssClass = "BackgroundCss",
            TextCssClass = "TextCss"
        }
    };
}

Scheduler - A custom appointment tooltip

Run Demo: Scheduler - Appointment Tooltip Template

Inheritance

Object
SchedulerAppointmentTooltipInfo
See Also