DxSchedulerDayViewBase.HorizontalAppointmentTemplate Property

Specifies a template for appointments displayed horizontally in Scheduler views.

Namespace: DevExpress.Blazor.Base

Assembly: DevExpress.Blazor.v21.1.dll

Declaration

[Parameter]
public RenderFragment<DxSchedulerAppointmentView> HorizontalAppointmentTemplate { get; set; }

Property Value

Type Description
RenderFragment<DxSchedulerAppointmentView>

The template content for a DxSchedulerAppointmentView object.

Remarks

<DxScheduler> allows you to use templates to customize appointment appearance:

To define appointment content and appearance, use HTML markup within the <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.

<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>

Appointment Templates

Run Demo: Scheduler - Appointment Templates

Watch Video: Scheduler - Customization

See Also