|
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. |
2X faster development
The ultimate Xamarin UI toolkit to boost your development speed.
This page will automatically be redirected to the sign-in page in 10 seconds.
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.
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
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