Skip to main content

DxScheduler.AppointmentFormHeaderTemplate Property

Specifies the template for the extended edit form‘s header.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public RenderFragment<SchedulerAppointmentFormInfo> AppointmentFormHeaderTemplate { get; set; }

Property Value

Type Description
RenderFragment<SchedulerAppointmentFormInfo>

The template content.

Remarks

The extended form header displays the Appointment text and Save Changes and Discard Changes buttons.

Scheduler - Default Header

You can use the AppointmentFormHeaderTemplate property to customize the header’s layout and appearance. This property accepts a SchedulerAppointmentFormInfo object as the context parameter. Use the context parameter to access appointment data.

The following code snippet customizes the header of the extended edit form. The header displays an appointment subject, predefined buttons (Save Changes, Delete Appointment, and Discard Changes), and a custom Back button that invokes the compact edit form.

<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>
    <AppointmentFormHeaderTemplate>
        <div class="popup-text-header">@context.Subject</div>
        <DxSchedulerSaveAppointmentChangesButton></DxSchedulerSaveAppointmentChangesButton>
        <DxSchedulerDeleteAppointmentButton Text="@null"></DxSchedulerDeleteAppointmentButton>
        <DxSchedulerDiscardAppointmentChangesButton></DxSchedulerDiscardAppointmentChangesButton>
        <DxButton Click="@(() => Scheduler.ShowAppointmentEditFormAsync(true))"
                  Text="Back"
                  IconCssClass="btn-icon-back"
                  RenderStyle="ButtonRenderStyle.None"
                  CssClass="dxbl-btn-tool">
        </DxButton>
    </AppointmentFormHeaderTemplate>
</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;
    }
</style>

Scheduler - Edit Form Header

Run Demo: Scheduler - Custom Fields and Appointment Form

See Also