How to design and configure your custom appointment editor ?
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.
|
|
|
You can download the source code for entire demo of custom appointment editor from here, CustomAppointmentEditor.
