A newer version of this page is available. Switch to the current version.

Lesson 3: Enable the Edit Appointment Form

  • 2 min to read

SchedulerView's Edit Appointment Page allows users to edit appointments. You can specify a gesture (for example, tap or double tap) that invokes it.

Open the solution created in Lesson 2 and perform the following steps to set up the scheduler to show the Edit Appointment form when users tap an appointment:

  1. Subscribe to the SchedulerView.Tap event.

    <dxsch:SchedulerView x:Name="scheduler"
                        Start="{Binding StartDate}"
                        FirstDayOfWeek="Monday" 
                        WorkDays="Monday,Tuesday,Wednesday,Friday" 
                        WorkTime="7:00:00-19:00:00"
                        Tap="Scheduler_Tap">
        <!-- ... -->
    </dxsch:SchedulerView>
    
  2. In the event handler:

    1. Create an AppointmentEditPage instance using one of the following constructors.

    2. Call the Navigation.PushAsync method and pass the created page as a parameter.

      using Xamarin.Forms;
      using DevExpress.XamarinForms.Scheduler;
      
      namespace SchedulerExample {
          public partial class MainPage : ContentPage {
              public MainPage() {
                  InitializeComponent();
              }
      
              private void Scheduler_Tap(object sender, SchedulerGestureEventArgs e) {
                  if (e.AppointmentInfo == null) {
                      ShowNewAppointmentEditPage(e.IntervalInfo)
                      return;
                  }
                  AppointmentItem appointment = e.AppointmentInfo.Appointment;
                  ShowAppointmentEditPage(appointment);
              }
      
              private void ShowAppointmentEditPage(AppointmentItem appointment) {
                  AppointmentEditPage appEditPage = new AppointmentEditPage(this.scheduler, appointment);
                  Navigation.PushAsync(appEditPage);
              }
      
              private void ShowNewAppointmentEditPage(IntervalInfo info) {
                  AppointmentEditPage appEditPage = new AppointmentEditPage(this.scheduler, info.Start, info.End, info.AllDay);
                  Navigation.PushAsync(appEditPage);
              }
          }
      }
      
      Note

      The SchedulerGestureEventArgs.AppointmentInfo.Appointment returns an appointment that has a visual representation (an appointment with Type set to Normal, Occurrence, ChangedOccurrence, DeletedOccurrence). Obtain the occurrence's pattern using the GetPattern method if you want to edit all occurrences in a recurrence chain.

  3. In the App.xaml.cs file, assign a NavigationPage instance to the Application.MainPage property and add the MainPage content page to the navigation stack (the application's root page):

    namespace SchedulerExample {
        public partial class App : Application {
            public App() {
                InitializeComponent();
    
                // MainPage = new MainPage();
                MainPage = new NavigationPage(new MainPage());
            }
    
            // ...
        }
    }
    

The scheduler now displays the Edit Appointment form when users tap an appointment.

Edit Appointment Form

The next lesson explains how to specify custom labels for appointments.