Edit Popup Customization
The Scheduler allows customization of the edit popup and its form. You can define your desired configuration in the SchedulerPopupEditSettings and SchedulerPopupEditFormSettings tags under the SchedulerSettings tag.
Popup Customization
The SchedulerPopupEditSettings nested tag exposes the following parameters to allow popup customization:
| Parameter | Type | Description |
|---|---|---|
Class |
string |
The CSS class of the edit popup |
Title |
string |
The title of the edit popup |
ThemeColor |
string |
The color scheme of the window. Use the available members of the static class ThemeConstants.Window.ThemeColor. |
Width |
string |
The Width of the edit popup |
MaxWidth |
string |
The maximum width of the window |
MinWidth |
string |
The minimum width of the window |
Height |
string |
The height of edit popup |
MaxHeight |
string |
The maximum height of the window |
MinHeight |
string |
The minimum height of the window |
The min/max options for the width and height apply to the initial rendering of the window and not browser resizing.
Edit Form Customization
The SchedulerPopupEditFormSettings nested tag exposes the following parameters to allow edit form customization:
| Parameter | Type and Default Value | Description |
|---|---|---|
ButtonsLayout |
FormButtonsLayout ( End) |
The horizontal alignment of the buttons. Takes a member of the FormButtonsLayout enum: - Start - End - Center - Stretch
|
Columns |
int |
The number of the form columns |
ColumnSpacing |
int |
The column spacing |
Orientation |
FormOrientation ( Vertical) |
The orientation of the form. Takes a member of the FormOrientation enum: - Horizontal - Vertical
|
Customize the popup edit form
@*The snippet focuses on the popup edit form customization. CRUD events are not handled for brevity*@
<TelerikScheduler Data="@Appointments"
@bind-Date="@StartDate"
@bind-View="@CurrView"
AllowCreate="true"
AllowUpdate="true"
Height="600px"
Width="800px">
<SchedulerSettings>
<SchedulerPopupEditSettings Width="600px"
MinWidth="500px"
Title="Edit Event"
Class="custom-popup">
</SchedulerPopupEditSettings>
<SchedulerPopupEditFormSettings ButtonsLayout="FormButtonsLayout.Stretch">
</SchedulerPopupEditFormSettings>
</SchedulerSettings>
<SchedulerViews>
<SchedulerWeekView StartTime="@DayStart" />
</SchedulerViews>
</TelerikScheduler>
@code {
public DateTime StartDate { get; set; } = new DateTime(2019, 11, 29);
public SchedulerView CurrView { get; set; } = SchedulerView.Week;
public DateTime DayStart { get; set; } = new DateTime(2000, 1, 1, 8, 0, 0);//the time portion is important
List<SchedulerAppointment> Appointments = new List<SchedulerAppointment>()
{
new SchedulerAppointment
{
Title = "Vet visit",
Description = "The cat needs vaccinations and her teeth checked.",
Start = new DateTime(2019, 11, 26, 11, 30, 0),
End = new DateTime(2019, 11, 26, 12, 0, 0)
},
new SchedulerAppointment
{
Title = "Planning meeting",
Description = "Kick off the new project.",
Start = new DateTime(2019, 11, 25, 9, 30, 0),
End = new DateTime(2019, 11, 25, 12, 45, 0)
},
new SchedulerAppointment
{
Title = "Trip to Hawaii",
Description = "An unforgettable holiday!",
IsAllDay = true,
Start = new DateTime(2019, 11, 27),
End = new DateTime(2019, 12, 07)
}
};
public class SchedulerAppointment
{
public string Title { get; set; }
public string Description { get; set; }
public DateTime Start { get; set; }
public DateTime End { get; set; }
public bool IsAllDay { get; set; }
}
}