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

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

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;

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

Agenda view mode

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;

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;

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;

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;

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

Agenda view mode