Calender Inline - set 24h

[Thomas]

Hi, 

 

when using InlineDisplayMode and clicking on a day, the times of the underlying appointments are displayed as AM/PM. 

How can I switch to 24h display and get rid of the AM/PM suffix ?

 

thanks

[Thomas]

Just an update, I know that this is set inside of EventsManager, but since I dont have the source I cant change it (and to be honest I don't see anywhere inside of the code a possibillity to pass some arguments and change the time display)

[Deyan]

Hi Thomas,

Thanks for writing.

I have just checked the source of RadCalendarView where inline events are managed and it seems that you cannot change this behavior. We are going to fix this by exposing API which will allow you to define the format of the date being displayed. Our future release will be mid September - is that time convenient for you or you need the bits earlier?

Thanks for your understanding.

Regards,
Deyan
Telerik by Progress

[Deyan]

Hi Thomas,

This is a quick follow-up to inform you that there is actually a way to format the events when in inline mode. You need to create a custom Adapter that is used to deliver the views for each event from the inline list of events. Here's an example:

public class CustomInlineEventsAdapter extends ArrayAdapter<EventsManager.EventInfo>{

       public CustomInlineEventsAdapter(Context context, int resource) {
           super(context, resource);
       }

       @NonNull
       @Override
       public View getView(int position, View convertView, ViewGroup parent) {
           EventsManager.EventInfo info = this.getItem(position);
           // Return a View with corresponding formats
       }
   }

The adapter is then set to the Calendar instance using the following API:

calendarView.eventsManager().setAdapter(new CustomInlineEventsAdapter(this.getContext(), 0));

The EventInfo class is the key here. You need to use it to extract the information about the event and populate the elements within the View used to visualize the event in the list of events. Here's the default source code:

@Override
        public View getView(int position, View convertView, ViewGroup parent) {
            TextView textView;
            if (convertView == null) {
                convertView = layoutInflater.inflate(R.layout.inline_event, parent, false);
                textView = (TextView) convertView.findViewById(R.id.inline_event_title);
                textView.setTextSize(owner.getAdapter().style.inlineEventTitleTextSize);

                textView = (TextView) convertView.findViewById(R.id.inline_event_start);
                textView.setTextSize(owner.getAdapter().style.inlineEventTimeStartTextSize);
                textView.setTextColor(owner.getAdapter().style.inlineEventTimeStartTextColor);

                textView = (TextView) convertView.findViewById(R.id.inline_event_end);
                textView.setTextSize(owner.getAdapter().style.inlineEventTimeEndTextSize);
                textView.setTextColor(owner.getAdapter().style.inlineEventTimeEndTextColor);
            }

            EventInfo eventInfo = getItem(position);
            textView = (TextView) convertView.findViewById(R.id.inline_event_title);
            textView.setTextColor(eventInfo.color);
            textView.setText(eventInfo.title);

            if (eventInfo.allDay) {
                textView = (TextView) convertView.findViewById(R.id.inline_event_start);
                textView.setVisibility(View.GONE);

                textView = (TextView) convertView.findViewById(R.id.inline_event_end);
                textView.setVisibility(View.GONE);
            } else {
                textView = (TextView) convertView.findViewById(R.id.inline_event_start);
                textView.setVisibility(View.VISIBLE);
                textView.setText(eventInfo.startTimeFormatted);

                textView = (TextView) convertView.findViewById(R.id.inline_event_end);
                textView.setVisibility(View.VISIBLE);
                textView.setText(eventInfo.endTimeFormatted);
            }

            return convertView;
        }

So basically, what you need to do is create a XML layout that defines how a single event from the list will look like and use the EventInfo instance to get the data and format it accordingly. In this particular case you won't be using the EventInfo.endTimeFormatted and EventInfo.startTimeFormatted values as they'll always return the AM/PM formatted values. You need to use the endTime and startTime getters which return the time in milliseconds and format them accordingly.

I hope this helps.

Regards,
Deyan
Telerik by Progress

[Thomas]

Hi Deyan, 

i am trying to implement your solution but just one more question.

You are referring to an "owner" inside your code. Is that just a reference to the calendar (that I pass to the adatper) or do I need to something more with it ?

Regards

 

 

[Thomas]

Hi Deyan,

and the following properties from EventInfo are not publi:

 int color;
 boolean allDay;
 String startTimeFormatted;
 String endTimeFormatted;

 

Regards

[Thomas]

one more note, improvement for the next release.

Maybe you should switch to interfaces for all those adapters and evetmanagers (instead of classes). In that case it would be much more easy for the user to implement additional stuff and do customization

[Deyan]

Hello Thomas,

Thanks for writing back.

The EventInfo class has public getters and setters for the corresponding properties. Here's the definition of the class:

public class EventInfo {
        int color;
        boolean allDay;

        Event originalEvent;

        String title;
        String startTimeFormatted;
        String endTimeFormatted;

        long startTime;
        long endTime;

        public String title() {
            return title;
        }

        public Event originalEvent() {
            return originalEvent;
        }

        public String startTimeFormatted() {
            return startTimeFormatted;
        }

        public String endTimeFormatted() {
            return endTimeFormatted;
        }

        public long startTime() {
            return startTime;
        }

        public long endTime() {
            return endTime;
        }

        @Override
        public String toString() {
            return title();
        }
    }

The 'owner' field is a reference to RadCalendar. It is needed to access the predefined styles from the CalendarAdapter for the inline events. YOu are not obliged to use it but you could if you need to. You just need to pass a reference to RadCalendar to your EventsAdapter and call its API.

We will consider simplifying the API here for smoother styling experience.

Let me know in case you have further questions or need assistance.

Regards,
Deyan
Telerik by Progress