DxSchedulerDayViewBase.HorizontalAppointmentTemplate Property
In This Article
Specifies a template for appointments displayed horizontally in Scheduler views.
Namespace: DevExpress.Blazor.Base
Assembly: DevExpress.Blazor.v24.2.dll
NuGet Package: DevExpress.Blazor
#Declaration
C#
[Parameter]
public RenderFragment<DxSchedulerAppointmentView> HorizontalAppointmentTemplate { get; set; }
#Property Value
Type | Description |
---|---|
Render |
The template content for a Dx |
#Remarks
Use the following templates to customize appointment appearance:
HorizontalAppointmentTemplate
- applied to all-day appointments that occupy an entire day or multiple days (displayed horizontally in the all-day panel).- VerticalAppointmentTemplate - applied to other appointments (displayed vertically).
To define appointment content and appearance, use HTML markup within <HorizontalAppointmentTemplate>
and <VerticalAppointmentTemplate>
tags.
When you build a template, you can use the template’s context
parameter to access appointment data. This parameter returns a DxSchedulerAppointmentView object.
Razor
<DxScheduler StartDate="@DateTime.Today" DataStorage="@DataStorage">
<DxSchedulerDayView ShowWorkTimeOnly="true" DayCount="3">
<HorizontalAppointmentTemplate>
<div class="card p-1 @context.Label.BackgroundCssClass">@context.Appointment.Subject</div>
</HorizontalAppointmentTemplate>
<VerticalAppointmentTemplate>
<div class="card @context.Label.BackgroundCssClass" style="height: 100%; padding: 0.2em 0.5em; opacity: 0.9;">
@context.Appointment.Subject
</div>
</VerticalAppointmentTemplate>
</DxSchedulerDayView>
</DxScheduler>
See Also