We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to design and configure your custom appointment editor ?

Platform: Xamarin.Forms |
Control: SfSchedule


SfSchedule allows you to add and edit appointments based on the requirement by using CellTapped event in schedule.



    <Grid x:Name="grid_layout">
          <schedule:SfSchedule WidthRequest = "600"
            x:Name="schedule" ScheduleView="DayView" 
             DataSource="{Binding ListOfMeeting}"
             HorizontalOptions="FillAndExpand" ShowAppointmentsInline="True"
              VerticalOptions="FillAndExpand" >
                    EndTimeMapping="To" >
     <local:EditorLayout  x:Name="editorLayout" IsVisible="False"/>


In this custom appointment editor, there are options to add/edit appointments. Date pickers and Time pickers are used in order to display the Date and Time of the selected cell in Schedule.

According to various platform’s, editor layout can be designed. You can display your own Appointment editor in this CellTapped event by setting the required data to your control from the appointment information in the argument of the event.



        schedule.CellTapped += CellTappedEventHandler;
        private void CellTappedEventHandler(object sender, CellTappedEventArgs e)
            schedule.IsVisible = false;
            editorLayout.IsVisible = true;
            if (schedule.ScheduleView == ScheduleView.MonthView)
               //create Apppointment
               editorLayout.OpenEditor(null, e.Datetime);
               isNewAppointment = true;
              if (e.Appointment != null)
                    ObservableCollection<Meeting> appointment = new ObservableCollection<Meeting>();
                    appointment = (ObservableCollection<Meeting>)schedule.DataSource;
                    indexOfAppointment = appointment.IndexOf((Meeting)e.Appointment);
                    editorLayout.OpenEditor((Meeting)e.Appointment, e.Datetime);
                    isNewAppointment = false;
                   //create Apppointment
                   editorLayout.OpenEditor(null, e.Datetime);
                   isNewAppointment = true;

If the selected appointment is not equal to null, the appointment’s details such as subject, Location (If available), start date, end date are shown in the editor layout. Else, appointment in the argument will be null.



      if (selectedAppointment != null)
            eventNameText.Text = selectedAppointment.EventName.ToString();
            organizerText.Text = selectedAppointment.Organizer;
            startDate_picker.Date = selectedAppointment.From;
            endDate_picker.Date = selectedAppointment.To;
           if (!selectedAppointment.IsAllDay)
              startTime_picker.Time = new TimeSpan(selectedAppointment.From.Hour, selectedAppointment.From.Minute, selectedAppointment.From.Second);
              endTime_picker.Time = new TimeSpan(selectedAppointment.To.Hour, selectedAppointment.To.Minute, selectedAppointment.To.Second);
               switchAllDay.IsToggled = false;
                startTime_picker.Time = new TimeSpan(12, 0, 0);
                startTime_picker.IsEnabled = false;
                endTime_picker.Time = new TimeSpan(12, 0, 0);
                endTime_picker.IsEnabled = false;
                switchAllDay.IsToggled = true;
          eventNameText.Text = "";
          organizerText.Text = "";
          switchAllDay.IsToggled = false;
          startDate_picker.Date = selectedDate;
          startTime_picker.Time = new TimeSpan(selectedDate.Hour, selectedDate.Minute, selectedDate.Second);
           endDate_picker.Date = selectedDate;
           endTime_picker.Time = new TimeSpan(selectedDate.Hour + 1, selectedDate.Minute, selectedDate.Second);



The following screenshot displays the custom appointment editor.








You can download the source code for entire demo of custom appointment editor from here, CustomAppointmentEditor.

2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
You must log in to leave a comment
Jon Lacey
Nov 30, 2017

I am looking to add a custom editor to my schedule but see above that the code is incomplete. The code references editor_main_layout but doesn't show it being created.

Is the full code available for this example?

Jon L

kevin deery
Sep 17, 2018

For those who come across the same issue, i found the sample app a little confusing.

All you need to do is navigate to an new page, i used Navigation.PushModalAsync(Your custom page here); because it doesnt have a back button.

Add the fields you need and control navigation via buttons on the bottom of the page. Save Cancel etc

Hope this helps someone 

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile