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

See Also

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