DxScheduler.AppointmentTooltipTemplate Property
Specifies the template for an appointment tooltip.
Namespace: DevExpress.Blazor
Assembly: DevExpress.Blazor.v22.1.dll
NuGet Package: DevExpress.Blazor
Declaration
[Parameter]
public RenderFragment<SchedulerAppointmentTooltipInfo> AppointmentTooltipTemplate { 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 displays the appointment subject, start date, end date, and resource (if specified).
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"
}
};
}