2X faster development
The ultimate Xamarin UI toolkit to boost your development speed.
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.
This page will automatically be redirected to the sign-in page in 10 seconds.