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 the calendar agenda view events using SfDataGrid in Xamarin.Forms?

Platform: Xamarin.Forms |
Control: SfCalendar

SfCalendar allows you to display the calendar events in AgendaView by adding custom view on it.

 

This article explains you how to display the events in AgendaView by using custom SfDataGrid.

 

Step 1: Create a data model for SfDataGrid with required data fields to display the details of event.

public class Model
{
    private int no;
    private string subject;
    private string starttime;
    private string endtime;
 
    public int No
    {
        get { return no; }
        set { this.no = value; }
    }
 
    public string Subject
    {
        get { return subject; }
        set { this.subject = value; }
    }
 
    public string StartTime
    {
        get { return starttime; }
        set { this.starttime = value; }
    }
 
    public string EndTime
    {
        get { return this.endtime; }
        set { this.endtime = value; }
    }
 
    public Model(int no, string subject, string starttime, string endtime)
    {
        this.No = no;
        this.Subject = subject;
        this.StartTime = starttime;
        this.EndTime = endtime;
    }
}

Step 2: Create an items collection for displaying the calendar events in data grid, and bind it to ItemSource of SfDataGrid.

public class ViewModel
{
    private ObservableCollection<Model> eventCollection = new ObservableCollection<Model>();
    public ViewModel()
    {
    }
 
    /// <summary>
    /// Gets or sets the event collection.
    /// </summary>
    /// <value>The event collection.</value>
    public ObservableCollection<Model> EventCollection
    {
        get { return eventCollection; }
        set { this.eventCollection = value; }
    }
}

 

<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             xmlns:syncfusion="clr-namespace:Syncfusion.SfDataGrid.XForms;assembly=Syncfusion.SfDataGrid.XForms" 
             x:Class="CustomSfDataGridAgendaView.DataGrid">
    <syncfusion:SfDataGrid x:Name="dataGrid" 
                             HorizontalOptions="FillAndExpand" 
                             VerticalOptions="FillAndExpand"
                             ItemsSource="{Binding EventCollection}"
                            >
    </syncfusion:SfDataGrid>
</ContentView>

Step 3: Create an events collection for the calendar, and set it as SfCalendar DataSource; it will help you to show the appointments on scheduled dates.

/// <summary>
/// Adds the appointment details.
/// </summary>
private void AddAppointmentDetails()
{
    meetingSubjectCollection = new ObservableCollection<string>();
    meetingSubjectCollection.Add("General Meeting");
    meetingSubjectCollection.Add("Plan Execution");
    meetingSubjectCollection.Add("Project Plan");
    meetingSubjectCollection.Add("Consulting");
    meetingSubjectCollection.Add("Support");
    meetingSubjectCollection.Add("Development Meeting");
    meetingSubjectCollection.Add("Scrum");
    meetingSubjectCollection.Add("Project Completion");
    meetingSubjectCollection.Add("Release updates");
    meetingSubjectCollection.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"));
}
 
/// <summary>
/// Adds the appointments.
/// </summary>
private void AddAppointments()
{
    var today = DateTime.Now.Date;
    var random = new Random();
    for (int month = -1; month < 2; month++)
    {
        for (int day = -5; day < 5; day++)
        {
            for (int count = 0; count < 2; count++)
            {
                var appointment = new CalendarInlineEvent();
                appointment.Subject = meetingSubjectCollection[random.Next(7)];
                appointment.Color = colorCollection[random.Next(10)];
                appointment.StartTime = today.AddMonths(month).AddDays(random.Next(1, 28)).AddHours(random.Next(9, 18));
                appointment.EndTime = appointment.StartTime.AddHours(2);
                this.calendarInlineEvents.Add(appointment);
            }
        }
    }
}

 

// Set CalendarInlineEvents collection as SfCalendar DataSource
calendar.DataSource = calendarInlineEvents;

Step 4: Set InlineViewMode as Agenda, and set ShowInlineEvents to true for displaying events.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:CustomSfDataGridAgendaView"
             xmlns:syncfusion="clr-namespace:Syncfusion.SfCalendar.XForms;assembly=Syncfusion.SfCalendar.XForms" 
             x:Class="CustomSfDataGridAgendaView.MainPage">
    <ContentPage.Behaviors>
        <local:ContentPageBehavior/>
    </ContentPage.Behaviors>
    <Grid Padding="0,30,0,0">
        <syncfusion:SfCalendar x:Name="Calendar" ShowInlineEvents="true" InlineViewMode="Agenda" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"/>
    </Grid>
</ContentPage>

Step 5: You can use the OnlineLoaded event of SfCalendar to add the custom agenda view as SfDataGrid and set SfDataGrid ItemSource as event collection based on selected date.

/// <summary>
/// Calendars the on inline loaded.
/// </summary>
/// <param name="sender">Sender.</param>
/// <param name="args">Arguments.</param>
void Calendar_OnInlineLoaded(object sender, InlineEventArgs args)
{
    ViewModel viewModel = new ViewModel();
 
    for (int i = 0; i < args.Appointments.Count; i++)
    {
        viewModel.EventCollection.Add(new Model(i + 1, args.Appointments[i].Subject, args.Appointments[i].StartTime.ToString("hh:mm tt"), args.Appointments[i].EndTime.ToString("hh:mm tt")));
    }
    if (args.Appointments.Count != 0)
    {
        args.View = new DataGrid() { BindingContext = viewModel };
    }
    else
    {
        var label = new Label();
        label.Text = "No Appointments";
        label.VerticalTextAlignment = TextAlignment.Start;
        label.HorizontalTextAlignment = TextAlignment.Start;
        label.HorizontalOptions = LayoutOptions.FillAndExpand;
        label.VerticalOptions = LayoutOptions.FillAndExpand;
        args.View = label;
    }
}

Sample Demo: CustomSfDataGridAgendaView

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