Skip to main content
All docs
V25.1
  • DxScheduler.ShowAppointmentEditFormAsync(Boolean, DxSchedulerAppointmentItem) Method

    Shows the appointment’s edit form.

    Namespace: DevExpress.Blazor

    Assembly: DevExpress.Blazor.v25.1.dll

    NuGet Package: DevExpress.Blazor

    Declaration

    public Task ShowAppointmentEditFormAsync(
        bool compactEditForm,
        DxSchedulerAppointmentItem appointment = null
    )

    Parameters

    Name Type Description
    compactEditForm Boolean

    Specifies whether to show the compact edit form.

    Optional Parameters

    Name Type Default Description
    appointment DxSchedulerAppointmentItem null

    The appointment for which to show the edit form. null to pass the selected appointment.

    Returns

    Type Description
    Task

    The task that is completed when the appointment edit form is shown.

    Remarks

    You can use the ShowAppointmentEditFormAsync method to invoke an appointment’s edit form (detailed or compact) in code. Note that the method does not show the edit form if the processed appointment is out of the current view’s range.

    The following code snippet customizes the header of the extended edit form (AppointmentFormHeaderTemplate). The header displays the following elements:

    • An appointment subject.
    • Predefined buttons: Save Changes, Delete Appointment, and Discard Changes.
    • A custom Back button. The Click event handler uses ShowAppointmentEditFormAsync method to invoke an appointment’s compact edit 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>
        <AppointmentFormHeaderTemplate>
            <div class="popup-text-header">@context.Subject</div>
            <DxSchedulerSaveAppointmentChangesButton></DxSchedulerSaveAppointmentChangesButton>
            <DxSchedulerDeleteAppointmentButton Text="@null"></DxSchedulerDeleteAppointmentButton>
            <DxSchedulerDiscardAppointmentChangesButton></DxSchedulerDiscardAppointmentChangesButton>
            <DxButton Click="@(() => Scheduler.ShowAppointmentEditFormAsync(true))"
                      Text="Back"
                      IconCssClass="btn-icon-back"
                      RenderStyle="ButtonRenderStyle.None"
                      CssClass="dxbl-btn-tool">
            </DxButton>
        </AppointmentFormHeaderTemplate>
    </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;
        }
    </style>
    

    Scheduler - Edit Form Header

    Run Demo: Scheduler - Custom Fields and Appointment Form

    See Also