New to Telerik UI for Blazor? Download free 30-day trial

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.

The SchedulerPopupEditSettings nested tag exposes the following parameters to allow popup customization:

Parameter Type Description
Class string 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 the following parameters to allow edit form customization:

Parameter Type Description
ButtonsLayout FormButtonsLayout
(End)
The horizontal alignment of the buttons. Takes a member of the FormButtonsLayout enum:
- Start
- End
- Center
- Stretched
Columns int The count of the 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.Stretched">
        </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

In this article