We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to show a custom agenda view besides the Xamarin.Forms scheduler in landscape mode

Platform: Xamarin.Forms |
Control: SfSchedule |
Published Date: April 5, 2019 |
Last Revised Date: April 5, 2019

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

2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon 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.Close Icon

Live Chat Icon For mobile