Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

Appointment Edit Form in DevExpress Scheduler for .NET MAUI

  • 2 minutes to read

Edit Appointment Page allows users to schedule new events or edit existing appointments. You can specify a gesture (for example, tap or double tap) that invokes this form.

Follow the steps below to set up the scheduler so that is displays the Edit Appointment form when a user taps an appointment or empty cell within the work week view.

  1. Subscribe to the view’s Tap event.

    <dxsch:WorkWeekView Start="{Binding StartDate}"
                        FirstDayOfWeek="Monday"
                        WorkDays="Monday,Tuesday,Wednesday,Friday" 
                        WorkTime="7:00:00-19:00:00"
                        ShowWorkTimeOnly="True"
                        TimeScaleInterval="01:00:00"
                        TimeScaleSlotCount="4"
                        SnapToCellsMode="Never"
                        Tap="WorkWeekView_Tap">
        <dxsch:WorkWeekView.DataStorage>
            <dxsch:SchedulerDataStorage x:Name="storage">
                <!-- ... -->
            </dxsch:SchedulerDataStorage>
        </dxsch:>
    </dxsch:WorkWeekView>
    
  2. In the event handler:

    1. Create an AppointmentEditPage instance. Use one of the following constructors:

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

      using System.ComponentModel;
      using DevExpress.Maui.Scheduler;
      
      namespace Scheduler_GettingStarted {
          public partial class MainPage : ContentPage {
              public MainPage() {
                  InitializeComponent();
              }
      
              private void WorkWeekView_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(appointment, this.storage);
                  Navigation.PushAsync(appEditPage);
              }
      
              private void ShowNewAppointmentEditPage(IntervalInfo info) {
                  AppointmentEditPage appEditPage = new AppointmentEditPage(info.Start, info.End, 
                                                                           info.AllDay, this.storage);
                  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). To edit all occurrences in a recurrence chain, use the GetPattern method to obtain the occurrence pattern.

  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 Scheduler_GettingStarted {
        public partial class App : Application {
            public App() {
                InitializeComponent();
    
                MainPage = new NavigationPage(new MainPage());
            }
    
            // ...
        }
    }
    

The scheduler now displays the Edit Appointment form when a user taps an appointment or empty cell within the work week view.

Edit Appointment Form