Category / Section
How to show a custom agenda view besides the Xamarin.Forms scheduler in landscape mode
4 mins read
SfSchedule allows you show the month view appointments in custom AgendaView. This article explains how to show a custom AgendaView besides the schedule in landscape mode to show the month view appointments.
Step 1: Create a custom appointment details for scheduling the appointment.
public class Meeting
{
public string EventName { get; set; }
public string Organizer { get; set; }
public string ContactID { get; set; }
public int Capacity { get; set; }
public DateTime From { get; set; }
public DateTime To { get; set; }
public Color color { get; set; }
public double MinimumHeight { get; set; }
public bool IsAllDay { get; set; }
}
Step 2: Create a custom appointment collection for displaying the appointments in SfSchedule, and bind it to DataSource of SfSchedule.
public class ViewModel : INotifyPropertyChanged
{
private int scheduleRowValue;
private int scheduleColumnValue;
private int scheduleRowSpan;
private int scheduleColumnSpan;
private int listViewRowValue;
private int listViewColumnValue;
public int listViewRowSpan;
private int listViewColumnSpan;
private ObservableCollection<Meeting> meetings;
private ObservableCollection<Meeting> selectedDateMeetings;
private ObservableCollection<string> subjectCollection;
private ObservableCollection<Color> colorCollection;
private string selectedDate;
public ViewModel()
{
Meetings = new ObservableCollection<Meeting>();
AddAppointmentDetails();
AddAppointments();
this.SetGridValue();
}
public int ScheduleRowValue
{
get
{
return scheduleRowValue;
}
set
{
scheduleRowValue = value;
RaiseOnPropertyChanged("ScheduleRowValue");
}
}
public int ScheduleColumnValue
{
get
{
return scheduleColumnValue;
}
set
{
scheduleColumnValue = value;
RaiseOnPropertyChanged("ScheduleColumnValue");
}
}
public int ScheduleRowSpan
{
get
{
return scheduleRowSpan;
}
set
{
scheduleRowSpan = value;
RaiseOnPropertyChanged("ScheduleRowSpan");
}
}
public int ScheduleColumnSpan
{
get
{
return scheduleColumnSpan;
}
set
{
scheduleColumnSpan = value;
RaiseOnPropertyChanged("ScheduleColumnSpan");
}
}
public int ListViewRowValue
{
get
{
return listViewRowValue;
}
set
{
listViewRowValue = value;
RaiseOnPropertyChanged("ListViewRowValue");
}
}
public int ListViewColumnValue
{
get
{
return listViewColumnValue;
}
set
{
listViewColumnValue = value;
RaiseOnPropertyChanged("ListViewColumnValue");
}
}
public int ListViewRowSpan
{
get
{
return listViewRowSpan;
}
set
{
listViewRowSpan = value;
RaiseOnPropertyChanged("ListViewRowSpan");
}
}
public int ListViewColumnSpan
{
get
{
return listViewColumnSpan;
}
set
{
listViewColumnSpan = value;
RaiseOnPropertyChanged("ListViewColumnSpan");
}
}
public ObservableCollection<Meeting> Meetings
{
get { return meetings; }
set
{
meetings = value;
RaiseOnPropertyChanged("Meetings");
}
}
public ObservableCollection<Meeting> SelectedDateMeetings
{
get { return selectedDateMeetings; }
set
{
selectedDateMeetings = value;
RaiseOnPropertyChanged("SelectedDateMeetings");
}
}
public string SelectedDate
{
get { return selectedDate; }
set
{
selectedDate = value;
RaiseOnPropertyChanged("SelectedDate");
}
}
private void AddAppointmentDetails()
{
subjectCollection = new ObservableCollection<string>();
subjectCollection.Add("General Meeting");
subjectCollection.Add("Plan Execution");
subjectCollection.Add("Project Plan");
subjectCollection.Add("Consulting");
subjectCollection.Add("Support");
subjectCollection.Add("Development Meeting");
subjectCollection.Add("Scrum");
subjectCollection.Add("Project Completion");
subjectCollection.Add("Release updates");
subjectCollection.Add("Performance Check");
colorCollection = new ObservableCollection<Color>();
colorCollection.Add(Color.FromHex("#FFA2C139"));
colorCollection.Add(Color.FromHex("#FFD80073"));
colorCollection.Add(Color.FromHex("#FF1BA1E2"));
colorCollection.Add(Color.FromHex("#FFE671B8"));
colorCollection.Add(Color.FromHex("#FFF09609"));
colorCollection.Add(Color.FromHex("#FF339933"));
colorCollection.Add(Color.FromHex("#FF00ABA9"));
colorCollection.Add(Color.FromHex("#FFE671B8"));
colorCollection.Add(Color.FromHex("#FF1BA1E2"));
colorCollection.Add(Color.FromHex("#FFD80073"));
colorCollection.Add(Color.FromHex("#FFA2C139"));
colorCollection.Add(Color.FromHex("#FFA2C139"));
colorCollection.Add(Color.FromHex("#FFD80073"));
colorCollection.Add(Color.FromHex("#FF339933"));
colorCollection.Add(Color.FromHex("#FFE671B8"));
colorCollection.Add(Color.FromHex("#FF00ABA9"));
}
private void AddAppointments()
{
var today = DateTime.Now.Date;
var random = new Random();
for (int month = -1; month <= 1; month++)
{
for (int i = -3; i <= 3; i++)
{
for (int j = 0; j < 2; j++)
{
var appointment = new Meeting();
appointment.EventName = subjectCollection[random.Next(3)];
appointment.From = today.AddMonths(month).AddDays(random.Next(1, 28)).AddHours(random.Next(9, 18));
appointment.To = appointment.From.AddHours(2);
appointment.color = colorCollection[random.Next(11)];
appointment.IsAllDay = false;
this.Meetings.Add(appointment);
}
}
}
}
private void SetGridValue()
{
this.scheduleRowValue = 0;
this.listViewRowValue = 1;
this.scheduleColumnValue = 0;
this.listViewColumnValue = 0;
this.scheduleRowSpan = 1;
this.listViewRowSpan = 1;
this.scheduleColumnSpan = 2;
this.listViewColumnSpan = 2;
}
public event PropertyChangedEventHandler PropertyChanged;
private void RaiseOnPropertyChanged(string propertyName)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
Step 3: Map the custom appointments to StartTimeMapping, EndTimeMapping, ColorMapping, SubjectMapping, and IsAllDayMapping of AppointmentMapping to display the custom appointments in schedule.
<schedule:SfSchedule x:Name="schedule"
Grid.Row="{Binding ScheduleRowValue}"
Grid.Column="{Binding ScheduleColumnValue}"
Grid.RowSpan="{Binding ScheduleRowSpan}"
Grid.ColumnSpan="{Binding ScheduleColumnSpan}"
ViewHeaderHeight="40"
ScheduleView="MonthView"
DataSource="{Binding Meetings}">
<schedule:SfSchedule.AppointmentMapping>
<schedule:ScheduleAppointmentMapping
StartTimeMapping="From"
EndTimeMapping="To"
SubjectMapping="EventName"
ColorMapping="color">
</schedule:ScheduleAppointmentMapping>
</schedule:SfSchedule.AppointmentMapping>
</schedule:SfSchedule>
Step 4: Add SfListView as custom agenda view in landscape mode for schedule month view. To display the schedule appointments details in custom agenda SfListView view, use the CellTapped event of SfSchedule to bind the appointments to SfListView ItemSource based on the date selected.
void Schedule_CellTapped(object sender, CellTappedEventArgs e)
{
var viewModel = (this.schedule.BindingContext as ViewModel);
viewModel.SelectedDate = e.Datetime.Date.ToString("MMMM dd yyyy");
viewModel.SelectedDateMeetings = new ObservableCollection<Meeting>();
if (e.Appointments != null)
{
foreach (var item in e.Appointments)
{
viewModel.SelectedDateMeetings.Add(item as Meeting);
}
}
}
<listview:SfListView ItemsSource="{Binding SelectedDateMeetings}" ItemSize="40" SelectionMode="None">
<listview:SfListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid Margin="2,1,1,1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.02*"/>
<ColumnDefinition Width="0.78*"/>
<ColumnDefinition Width="0.2*"/>
</Grid.ColumnDefinitions>
<Grid
BackgroundColor="{Binding color}"
Grid.Column="0" >
</Grid>
<Label
Text="{Binding EventName}"
Grid.Column="1"
VerticalOptions="Center"
LineBreakMode="TailTruncation"
TextColor="Black" >
</Label>
<Grid
Margin="2"
Grid.Column="2">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Label
Text="{Binding From, StringFormat='{}{0:hh:mm tt}'}}"
Grid.Row="0"
VerticalOptions="Center"
FontSize="10"
TextColor="Black" >
</Label>
<Label
Text="{Binding To, StringFormat='{}{0:hh:mm tt}'}}"
Grid.Row="1"
VerticalOptions="Center"
FontSize="10"
TextColor="Black">
</Label>
</Grid>
</Grid>
</ViewCell>
</DataTemplate>
</listview:SfListView.ItemTemplate>
</listview:SfListView>
Step 5: Set the position of custom agenda SfListView using the SizeChanged event of SfSchedule based on the orientation changes.
void Schedule_SizeChanged(object sender, EventArgs e)
{
var viewModel = (gridView.BindingContext as ViewModel);
if (viewModel == null)
return;
if ((sender as SfSchedule).Height > (sender as SfSchedule).Width && Device.RuntimePlatform != "UWP")
{
viewModel.ScheduleRowValue = 0;
viewModel.ListViewRowValue = 1;
viewModel.ScheduleColumnValue = 0;
viewModel.ListViewColumnValue = 0;
viewModel.ScheduleRowSpan = 1;
viewModel.ListViewRowSpan = 1;
viewModel.ScheduleColumnSpan = 2;
viewModel.ListViewColumnSpan = 2;
}
else
{
viewModel.ScheduleRowValue = 0;
viewModel.ListViewRowValue = 0;
viewModel.ScheduleColumnValue = 0;
viewModel.ListViewColumnValue = 1;
viewModel.ScheduleRowSpan = 2;
viewModel.ListViewRowSpan = 2;
viewModel.ScheduleColumnSpan = 1;
viewModel.ListViewColumnSpan = 1;
}
}
Sample Demo: CustomAgendaViewOnLandscape
