DxScheduler.RecurrenceSettingsFormHeaderTemplate Property
Specifies the template for the recurrence settings form’s header.
Namespace: DevExpress.Blazor
Assembly: DevExpress.Blazor.v24.2.dll
NuGet Package: DevExpress.Blazor
Declaration
[Parameter]
public RenderFragment<SchedulerAppointmentFormInfo> RecurrenceSettingsFormHeaderTemplate { get; set; }
Property Value
Type | Description |
---|---|
RenderFragment<SchedulerAppointmentFormInfo> | The template content. |
Remarks
You can use the RecurrenceSettingsFormHeaderTemplate
property to customize the header of the recurrence settings form. This property accepts a SchedulerAppointmentFormInfo object as the context
parameter. Use the context
parameter to access appointment data.
The following code snippet customizes the recurrence settings form’s header. The header displays the appointment’s subject, start date, and a custom Close button that closes the 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>
<RecurrenceSettingsFormHeaderTemplate>
<div class="popup-text-header">@context.Subject @context.StartTime</div>
<DxButton Click="@(() => Scheduler.CloseRecurrenceSettingsFormAsync())"
Text="Close"
IconCssClass="btn-icon-close"
RenderStyle="ButtonRenderStyle.None"
CssClass="custom-button">
</DxButton>
</RecurrenceSettingsFormHeaderTemplate>
</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>
See Also