Lesson 3: Enable the Edit Appointment Form

• May 24, 2019
• 2 minutes 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.

   XAML

   <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.

      • AppointmentEditPage(SchedulerView, DateTime, DateTime, Boolean) - accepts the scheduler and an initial time interval if you create a new appointment.
      • AppointmentEditPage(SchedulerView, AppointmentItem) - accepts the scheduler and an appointment if you edit the existing appointment.

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

      C#

      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):

   C#

   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.

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