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 filter the events in the Xamarin.Forms Calendar by searching the subject?

Platform: Xamarin.Forms |
Control: SfCalendar

SfCalendar allows you to filter the events in month view based on your requirement.

This article explains you how to filter the calendar events in month view using SfComboBox by searching the subject.

To filter the events by searching subject, set the DisplayMemberPath of SfComboBox as event’s subject and bind DataSource as calendar event.

 <?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:FilteringEvents"
             xmlns:combobox="clr-namespace:Syncfusion.XForms.ComboBox;assembly=Syncfusion.SfComboBox.XForms"
             xmlns:syncfusion="clr-namespace:Syncfusion.SfCalendar.XForms;assembly=Syncfusion.SfCalendar.XForms"
             x:Class="FilteringEvents.MainPage">
    <ContentPage.Behaviors>
        <local:CalendarBehavior/>
    </ContentPage.Behaviors>
    <Grid x:Name="MainLayout" Padding="0,20,0,0">
        <Grid.RowDefinitions>
            <RowDefinition Height="0.1*"/>
            <RowDefinition Height="0.9*"/>
        </Grid.RowDefinitions>
        <combobox:SfComboBox Grid.Row="0" BorderColor="Blue" ShowDropDownHeaderView="true" 
                             IsEditableMode="true" HeightRequest="40" DisplayMemberPath="Subject" x:Name="comboBox">
        </combobox:SfComboBox>
        <syncfusion:SfCalendar Grid.Row="1" x:Name="calendar">
        </syncfusion:SfCalendar>
    </Grid>
</ContentPage>

 

By using the SelectionChanged event of SfComboBox, you can set the filtered event source to SfCalendar DataSource.

namespace FilteringEvents
{
    public class CalendarBehavior: Behavior<ContentPage>
    {
        private SfCalendar calendar;
        private SfComboBox comboBox;
        private CalendarEventCollection calendarInlineEvents = new CalendarEventCollection();
        public CalendarBehavior()
        {
        }
 
        protected override void OnAttachedTo(ContentPage bindable)
        {
            var page = bindable as Page;
            calendar = page.FindByName<SfCalendar>("calendar");
            comboBox = page.FindByName<SfComboBox>("comboBox");
 
            // To display inline appointment layout.
            calendar.ShowInlineEvents = true;
            calendar.InlineViewMode = InlineViewMode.Agenda;
            var currentDay = DateTime.Now.Date;
 
            for (int i = 0; i < 10; i++)
            {
                calendarInlineEvents.Add(new CalendarInlineEvent()
                {
                    StartTime = currentDay.AddDays(i),
                    EndTime = currentDay.AddDays(i),
                    Subject = "Meeting on " + currentDay.AddDays(i).ToString("dd/MM/yy"),
                    Color = Color.Fuchsia
                });
 
                calendarInlineEvents.Add(new CalendarInlineEvent()
                {
                    StartTime = currentDay.AddDays(i),
                    EndTime = currentDay.AddDays(i),
                    Subject = "Conference on " + currentDay.AddDays(i).ToString("dd/MM/yy"),
                    Color = Color.Fuchsia
                });
            }
            // Setting data source for 3 months.
            calendar.DataSource = calendarInlineEvents;
 
            // Setting data dource for combo box
            comboBox.DataSource = calendarInlineEvents;
            // Displaying data in combo box based on subject
            comboBox.DisplayMemberPath = "Subject";
            comboBox.SelectionChanged += ComboBox_SelectionChanged;
            base.OnAttachedTo(bindable);
        }
 
        protected override void OnDetachingFrom(ContentPage bindable)
        {
            comboBox.SelectionChanged -= ComboBox_SelectionChanged;
            base.OnDetachingFrom(bindable);
        }
 
        /// <summary>
        /// Gets the appointments based on subject.
        /// </summary>
        /// <returns>The appointments.</returns>
        /// <param name="subject">Subject.</param>
        private CalendarEventCollection GetAppointments(string subject)
        {
            var data = new CalendarEventCollection();
            foreach (var item in calendarInlineEvents)
            {
                if (item.Subject == subject)
                    data.Add(item);
            }
            return data;
        }
 
        /// <summary>
        /// Combo box selection is changed.
        /// </summary>
        /// <param name="sender">Sender.</param>
        /// <param name="e">E.</param>
        private void ComboBox_SelectionChanged(object sender, Syncfusion.XForms.ComboBox.SelectionChangedEventArgs e)
        {
            // Returning when value is cleared in combo box.
            if ((e.Value as CalendarInlineEvent) == null || String.IsNullOrEmpty((e.Value as CalendarInlineEvent).Subject))
                return;
 
            // Setting calendar data source based on subject filtered data.
            calendar.DataSource = GetAppointments((e.Value as CalendarInlineEvent).Subject);
            calendar.MoveToDate = GetAppointments((e.Value as CalendarInlineEvent).Subject)[0].StartTime;
        }
    }
}

Sample Demo:  FilterCalendarEvents

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