How to show the calendar agenda view events using SfDataGrid in Xamarin.Forms?
Xamarin Calendar 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
Conclusion
I hope you enjoyed learning about how to show the calendar agenda view events using SfDataGrid in Xamarin.Forms.
You can refer to our Xamarin.Forms Calendar feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
