Customizing Display of Inline Events

[Trey]

Going off of the information from http://docs.telerik.com/devtools/android/controls/calendar/calendar-displaying-events, I was wondering if the inclusion of the EventsManager() for customizing the display of events allows us to add more fields to the inline event display to include fields other than start time, end time, and subject? And if so, can anyone provide an example?

[Todor]

Hi Trey,

Yes, you can add custom information to your events and show it with inline events mode. Here's how:

1. Extend the Event class to include your custom information:

public class ExtendedEvent : Event {

    public ExtendedEvent(String title, String content, long start, long end) :
            base(title, start, end) {
        this.Content = content;
    }

    public String Content {
        get;
        set;
    }
}

2. Add a layout file that describe the template for the extended event:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_vertical"
    android:padding="12dp">

    <TextView
        android:id="@+id/event_start"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:minEms="4" />

    <TextView
        android:id="@+id/event_end"
        android:layout_below="@id/event_start"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:minEms="4" />

    <TextView
        android:id="@+id/event_title"
        android:layout_toRightOf="@id/event_start"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="20sp" />

    <TextView
        android:id="@+id/event_content"
        android:layout_toRightOf="@id/event_end"
        android:layout_below="@id/event_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

</RelativeLayout>

3. Extend ArrayAdapter to actually inflate your layout resource file:

public class MyAdapter : ArrayAdapter<Com.Telerik.Widget.Calendar.EventsManager.EventInfo> {
    public MyAdapter(Context context, int resource)
        : base(context, resource) {
    }

    public override View GetView (int position, View convertView, ViewGroup parent)
    {
        View view = convertView;
        if(view == null) {
            view = LayoutInflater.From (Context).Inflate (Resource.Layout.event_layout, parent, false);
        }
        Com.Telerik.Widget.Calendar.EventsManager.EventInfo eventInfo = GetItem (position);
        ((TextView)view.FindViewById (Resource.Id.event_start)).Text = eventInfo.StartTimeFormatted ();
        ((TextView)view.FindViewById (Resource.Id.event_end)).Text = eventInfo.EndTimeFormatted ();
        ((TextView)view.FindViewById (Resource.Id.event_title)).Text = eventInfo.Title ();
        ((TextView)view.FindViewById (Resource.Id.event_content)).Text = ((ExtendedEvent)eventInfo.OriginalEvent ()).Content;
        return view;
    }
}

4. Create a few events and set an instance of the new adapter to the events manager:

List<Event> events = new List<Event>();
Calendar calendar = Calendar.Instance;
events.Add(new ExtendedEvent("Test1", "Content1", calendar.TimeInMillis, calendar.TimeInMillis));
events.Add(new ExtendedEvent("Test2", "Content2", calendar.TimeInMillis, calendar.TimeInMillis));
calendarView.EventAdapter.Events = events;

calendarView.EventsManager().Adapter = new MyAdapter(Context, Resource.Layout.event_layout);

I hope this information helps.

Regards,
Todor
Telerik