Skip to main content

DxScheduler.ShowAppointmentTooltipAsync(DxSchedulerAppointmentItem) Method

Shows an appointment tooltip.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

public Task ShowAppointmentTooltipAsync(
    DxSchedulerAppointmentItem appointment = null
)

Optional Parameters

Name Type Default Description
appointment DxSchedulerAppointmentItem null

The appointment for which to show the tooltip. null to pass the selected appointment.

Returns

Type Description
Task

The task that is completed when an appointment tooltip is shown.

Remarks

You can use the ShowAppointmentTooltipAsync method to show an appointment’s tooltip in code.

The following code snippet customizes the header of the extended edit form (AppointmentFormHeaderTemplate). The header displays the following elements:

  • The appointment’s subject.
  • A custom Appointment Tooltip button. The Click event handler uses ShowAppointmentTooltipAsync method to show an appointment’s tooltip.
<DxScheduler StartDate="@DateTime.Today"
             DataStorage="@DataStorage"
             @ref="Scheduler">
    <Views>
        <DxSchedulerWeekView ShowWorkTimeOnly="false"
                             TimeIndicatorVisibility="SchedulerTimeIndicatorVisibility.Never"
                             TimeScale="@(new TimeSpan(0,15,0))"
                             WorkTime="@(new DxSchedulerTimeSpanRange(TimeSpan.FromHours(9), TimeSpan.FromHours(18)))"
                             VisibleTime="@(new DxSchedulerTimeSpanRange(TimeSpan.FromHours(8), TimeSpan.FromHours(19)))">
        </DxSchedulerWeekView>
    </Views>
    <AppointmentCompactFormHeaderTemplate>
        <div class="popup-text-header">@context.Subject</div>
        <DxButton Click="@(() => Scheduler.ShowAppointmentTooltipAsync())"
                  Text="Show Tooltip"
                  IconCssClass="oi oi-browser"
                  RenderStyle="ButtonRenderStyle.None"
                  CssClass="custom-button">
        </DxButton>
    </AppointmentCompactFormHeaderTemplate>
</DxScheduler>

@code {
    ISchedulerAppointmentActions Scheduler { get; set; }

    DxSchedulerDataStorage DataStorage = new DxSchedulerDataStorage() {
        AppointmentsSource = AppointmentCollection.GetAppointments(),
        AppointmentMappings = new DxSchedulerAppointmentMappings() {
            Type = "AppointmentType",
            Start = "StartDate",
            End = "EndDate",
            Subject = "Caption",
            AllDay = "AllDay",
            Location = "Location",
            Description = "Description",
            LabelId = "Label",
            StatusId = "Status",
            RecurrenceInfo = "Recurrence"
        }
    };
}

<style>
    .popup-text-header {
        margin-right: auto;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }

    .custom-button {
        color: white
    }
</style>

Scheduler - Edit Form Header

See Also