Articles in this section
Category / Section

How to design and configure your custom appointment editor ?

2 mins read

 

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

 

XAML

    
    <Grid x:Name="grid_layout">
          <schedule:SfSchedule WidthRequest = "600"
            x:Name="schedule" ScheduleView="DayView" 
             DataSource="{Binding ListOfMeeting}"
             HorizontalOptions="FillAndExpand" ShowAppointmentsInline="True"
              VerticalOptions="FillAndExpand" >
          <schedule:SfSchedule.AppointmentMapping>
               <schedule:ScheduleAppointmentMapping
                    SubjectMapping="EventName"
                    ColorMapping="color"
                    StartTimeMapping="From"
                    EndTimeMapping="To" >
              </schedule:ScheduleAppointmentMapping>
           </schedule:SfSchedule.AppointmentMapping>
           <schedule:SfSchedule.BindingContext>
            <local:AppointmentEditorViewModel/>
            </schedule:SfSchedule.BindingContext>
         </schedule:SfSchedule>
     <local:EditorLayout  x:Name="editorLayout" IsVisible="False"/>
    </Grid> 

 

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.

 

C#

        
        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;
            }
           else
           {
              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;
              }
              else
              {
                   //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.

 

C#

     
      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;
           }
           else
           {
                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;
            }
       }
       else
       {
          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.

 

Editor.jpg

TimePicker.jpg

DatePicker.jpg

 

 

 

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

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments
Please  to leave a comment
Access denied
Access denied