Populating Events with Xamarin.Android Calendar (SfCalendar)

27 Feb 20236 minutes to read

The SfCalendar control has a built-in capability to display the events based on the calendar events collection provided to the DataSource property. For events to be listed for a particular day, enable the inline feature in the month view cell.

The default UI of the inline view with events will be like list of events with a Gray background

Inline Events in Xamarin.Android Calendar

Default UI of the inline view without events will be hinting No Events available on a particular day.

No events in Xamarin.Android Calendar

Inline event support can be toggled on / off with ShowEventsInline property.

  • C#
  • SfCalendar sfCalendar = new SfCalendar(this);
    sfcalendar.ShowEventsInline=true;

    NOTE

    The Inline function will be available only in MonthView with Single selection mode.

    Adding events using Collection

    Calendar Events collection can be provided to SfCalendar by following these steps. The CalendarEventCollection is a class, which holds the details about the events to be rendered in SfCalendar.

    CalendarInlineEvent has some basic properties such as StartTime, EndTime, Subject and Color

  • C#
  • SfCalendar sfCalendar = new SfCalendar(this);
    
    CalendarEventCollection eventsCollection = new CalendarEventCollection();
    CalendarInlineEvent events = new CalendarInlineEvent();
    
    //starting date of event
    Calendar startEventDate = Calendar.Instance;
    startEventDate.Set(2015, 9, 26, 10, 0, 0);
    events.StartTime = startEventDate;
    
    //ending date of event
    Calendar endEventDate = Calendar.Instance;
    endEventDate.Set(2015, 9, 26, 12, 0, 0);
    events.EndTime = endEventDate;
    
    //subject which will be going to add as content in Inline event appointments
    events.Subject = "Business Meeting";
    
    //Indicator color in appointments
    events.Color = Android.Graphics.Color.Red;
    
    eventsCollection.Add(events);
    
    //Add collection of events as source of SfCalendar
    
    sfCalendar.DataSource = eventsCollection;
    
    SetContentView(sfCalendar);

    Create the collection of the calendar events by setting required details using above mentioned properties for each events.

  • C#
  • eventsCollection.Add(events);

    Assign the created collection to the DataSource property of SfCalendar

  • C#
  • sfCalendar.DataSource = eventsCollection;

    Inline Events in Xamarin.Android Calendar

    NOTE

    By default, the SfCalendar manipulation is based on Java.Util.Calendar date settings. In Android Calendar Month, January starts from Zero. So, When you set a date you need to pass the actual number compare to the Android Calendar.

    Customize inline/agenda view appearance

    You can customize the inline item view by using the OnInlineItemLoaded event in SfCalendar and you can get the details of appointment from the CalendarInlineEvent property, the custom view can be set to the View property of the InlineItemLoadedEventArgs argument.

  • C#
  • calendar.InlineItemLoaded += Calendar_InlineItemLoaded; 
    
    	.....
    
    	void Calendar_InlineItemLoaded(object sender, InlineItemLoadedEventArgs e)
    	{
    		var appointment = e.CalendarInlineEvent;
    		Button button = new Button(this);
    		button.Text = "Appointment :" + appointment.Subject;
    		button.SetBackgroundColor(Color.Blue);
    		button.SetTextColor(Color.White);
    		e.View = button;
    	}

    Inline view mode

    Calendar Inline Events

    Agenda view mode

    Calendar Inline Events

    InlineAppointmentTextSize

    By using the InlineAppointmentTextSize property from the MonthViewSettings class of SfCalendar control, you can customize the text size for the appointment details text in inline and agenda view.

    The following code explains how to customize the InlineAppointmentTextSize in Calendar InlineView.

  • C#
  • SfCalendar sfCalendar = new SfCalendar(this);
        sfCalendar.MonthViewSettings.InlineAppointmentTextSize = 20;    
        sfCalendar.ShowEventsInline = true;
    	sfCalendar.InlineViewMode = InlineViewMode.Inline;

    InlineView with InlineAppointmentTextSize in Xamarin.Android Calendar

    The following code explains how to customize the InlineAppointmentTextSize in Calendar AgendaView.

  • C#
  • SfCalendar sfCalendar = new SfCalendar(this);
        sfCalendar.MonthViewSettings.InlineAppointmentTextSize = 20;
    	sfCalendar.InlineViewMode = InlineViewMode.Agenda;
        sfCalendar.ShowEventsInline = true;

    AgendaView with InlineAppointmentTextSize in Xamarin.Android Calendar

    InlineAppointmentTimeTextSize

    By using the InlineAppointmentTimeTextSize property from the MonthViewSettings class of SfCalendar control, you can customize the time text size for the appointment details time in both inline and agenda view.

    The following code explains how to customize the InlineAppointmentTimeTextSize in Calendar InlineView.

  • C#
  • SfCalendar sfCalendar = new SfCalendar(this);
        sfCalendar.MonthViewSettings.InlineAppointmentTimeTextSize = 20;    
        sfCalendar.ShowEventsInline = true;
    	sfCalendar.InlineViewMode = InlineViewMode.Inline;

    InlineView with InlineAppointmentTimeTextSize in Xamarin.Android Calendar

    The following code explains how to customize the InlineAppointmentTimeTextSize in Calendar AgendaView.

  • C#
  • SfCalendar sfCalendar = new SfCalendar(this);
        sfCalendar.MonthViewSettings.InlineAppointmentTimeTextSize = 20;
    	sfCalendar.InlineViewMode = InlineViewMode.Agenda;  
        sfCalendar.ShowEventsInline = true;

    AgendaView with InlineAppointmentTimeTextSize in Xamarin.Android Calendar

    Getting inline/agenda view appointment details

    Using InlineEvent property from the InlineItemTappedEventArgs argument of InlineItemTapped event, you can get the month inline/agenda appointments details while tapping the specific appointment in inline/agenda view.

  • C#
  • calendar.InlineItemTapped+= Calendar_InlineItemTapped; 
    
    private void Calendar_InlineItemTapped(object sender, InlineItemTappedEventArgs e)
        {
            var appointment = e.InlineEvent;
            Toast.MakeText(this, appointment.Subject + " * " + appointment.StartTime.Time.ToString(), ToastLength.Long).Show(); 
        }

    Inline view mode

    Calendar Inline Events

    Agenda view mode

    Calendar Inline Events