Edit Popup Customization

Updated on Aug 11, 2026

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
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 a ButtonsLayout parameter of type FormButtonsLayout that controls the horizontal alignment of the edit form buttons. The default value is End.

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"
                                    MaxHeight="99vh"
                                    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; }
    }
}

See Also

• Data Binding
• Live Demo: Appointment Editing
• Custom Edit Form