Skip to main content
All docs
V25.1
  • DxScheduler.AppointmentTooltipHeaderTemplate Property

    Specifies the template for the appointment tooltip’s header.

    Namespace: DevExpress.Blazor

    Assembly: DevExpress.Blazor.v25.1.dll

    NuGet Package: DevExpress.Blazor

    Declaration

    [Parameter]
    public RenderFragment<SchedulerAppointmentTooltipInfo> AppointmentTooltipHeaderTemplate { get; set; }

    Property Value

    Type Description
    RenderFragment<SchedulerAppointmentTooltipInfo>

    The template content.

    Remarks

    The DxScheduler shows a tooltip when a user clicks an appointment. The tooltip can display the appointment subject, start date, end date, location, description, and resource (if these properties are specified).

    Scheduler - Default appointment tooltip

    You can use the AppointmentTooltipHeaderTemplate and AppointmentTooltipTemplate properties to customize the tooltip’s layout and appearance. These properties accept a SchedulerAppointmentTooltipInfo object as the context parameter. Use the context parameter to access appointment data.

    The following code snippet 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" 
                 DataStorage="@DataStorage"
                 GroupType="SchedulerGroupType.Date"
                 ShowAppointmentTooltip = "true">
        <Views>
            <DxSchedulerDayView DayCount="2" ShowWorkTimeOnly="true"/>
        </Views>
        <AppointmentTooltipHeaderTemplate>
            <div class="tooltip-text-header">@context.Appointment.Subject</div>
            @if (IsAccepted(context))
            {
                <div style="margin-right: .3em;">(Accepted)</div>
            }
            <DxSchedulerShowAppointmentCompactFormButton></DxSchedulerShowAppointmentCompactFormButton>
            <DxSchedulerDeleteAppointmentButton></DxSchedulerDeleteAppointmentButton>
            <DxSchedulerCloseAppointmentButton></DxSchedulerCloseAppointmentButton>
        </AppointmentTooltipHeaderTemplate>
        <AppointmentTooltipTemplate>
            <span style="vertical-align: middle;">
                @context.Appointment.Subject
            </span>
            @if (context.Resource != null)
            {
                <span style="vertical-align: middle;">
                    (@context.Resource.Caption)
                </span>
            }
        </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",
                    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) => 
            (bool)tooltipInfo.CustomFields["Accepted"];
    }
    
    <style>
        .tooltip-text-header {
            margin-right: auto;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
    </style>
    

    Scheduler - A custom appointment tooltip

    Run Demo: Scheduler - Appointment Tooltip Template

    See Also