blazor-devexpress-dot-blazor-dot-dxscheduler-dot-showappointmenteditformasync-x28-system-dot-boolean-devexpress-dot-blazor-dot-dxschedulerappointmentitem-x29.md
Shows the appointment’s edit form.
Namespace : DevExpress.Blazor
Assembly : DevExpress.Blazor.v25.2.dll
NuGet Package : DevExpress.Blazor
public Task ShowAppointmentEditFormAsync(
bool compactEditForm,
DxSchedulerAppointmentItem appointment = null
)
| Name | Type | Description |
|---|---|---|
| compactEditForm | Boolean |
Specifies whether to show the compact edit form.
|
| Name | Type | Default | Description |
|---|---|---|---|
| appointment | DxSchedulerAppointmentItem | null |
The appointment for which to show the edit form. null to pass the selected appointment.
|
| Type | Description |
|---|---|
| Task |
The task that is completed when the appointment edit form is shown.
|
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"
}
};
}
.popup-text-header {
margin-right: auto;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
using System;
namespace Scheduler.Data
{
public class Appointment {
public Appointment() { }
public int AppointmentType { get; set; }
public DateTime StartDate { get; set; }
public DateTime EndDate { get; set; }
public string Caption { get; set; }
public string Description { get; set; }
public string Location { get; set; }
public int? Label { get; set; }
public int Status { get; set; }
public bool AllDay { get; set; }
public string Recurrence { get; set; }
public int? ResourceId { get; set; }
public bool Accepted { get; set; }
}
}
using System;
using System.Collections.Generic;
using System.Globalization;
namespace Scheduler.Data
{
public static partial class AppointmentCollection {
public static List<Appointment> GetAppointments()
{
DateTime date = DateTime.Today;
var dataSource = new List<Appointment>() {
new Appointment {
Caption = "Upgrade Personal Computers",
StartDate = date + (new TimeSpan(0, 14, 0, 0)),
EndDate = date + (new TimeSpan(0, 16, 30, 0)),
Label = 1,
Status = 1
},
new Appointment {
Caption = "Install New Router in Dev Room",
StartDate = date + (new TimeSpan(0, 11, 30, 0)),
EndDate = date + (new TimeSpan(0, 13, 30, 0)),
Label = 6,
Status = 1
},
new Appointment {
Caption = "New Brochures",
StartDate = date + (new TimeSpan(1, 15, 00, 0)),
EndDate = date + (new TimeSpan(1, 16, 45, 0)),
Label = 8,
Status = 1
},
new Appointment {
Caption = "Approve Personal Computer Upgrade Plan",
StartDate = date + (new TimeSpan(3, 13, 30, 0)),
EndDate = date + (new TimeSpan(3, 16, 0, 0)),
Label = 1,
Status = 1
},
new Appointment {
Caption = "Customer Workshop",
StartDate = date + (new TimeSpan(4, 11, 0, 0)),
EndDate = date + (new TimeSpan(4, 12, 0, 0)),
AllDay = true,
Label = 8,
Status = 1
},
new Appointment {
Caption = "Upgrade Server Hardware",
StartDate = date + (new TimeSpan(6, 11, 0, 0)),
EndDate = date + (new TimeSpan(6, 13, 30, 0)),
Label = 6,
Status = 1
},
new Appointment {
AppointmentType = 1,
Caption = "Daily Meeting",
StartDate = date + (new TimeSpan(0, 9, 00, 0)),
EndDate = date + (new TimeSpan(0, 10, 00, 0)),
Label = 10,
Status = 1,
Recurrence = string.Format("<RecurrenceInfo Type=\"0\" Start=\"{0}\" Range=\"1\" OccurrenceCount=\"10\" Frequency =\"1\" Id=\"72e3db8f-cdb6-4aaa-afe1-e3c6b80ce995\"/>", ToString(date + (new TimeSpan(0, 9, 00, 0))))
}
};
return dataSource;
}
private static string ToString(DateTime dateTime) {
return dateTime.ToString(CultureInfo.InvariantCulture);
}
}
}
Run Demo: Scheduler - Custom Fields and Appointment Form
ShowAppointmentEditFormAsync(Boolean, DxSchedulerAppointmentItem)
See Also