Articles in this section
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

Calendar

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