Calender Inline - set 24h

8 posts, 0 answers
  1. Thomas
    Thomas avatar
    27 posts
    Member since:
    Jul 2016

    Posted 16 Aug Link to this post

    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

  2. Thomas
    Thomas avatar
    27 posts
    Member since:
    Jul 2016

    Posted 16 Aug in reply to Thomas Link to this post

    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)
  3. DevCraft banner
  4. Deyan
    Admin
    Deyan avatar
    2039 posts

    Posted 17 Aug Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  5. Deyan
    Admin
    Deyan avatar
    2039 posts

    Posted 17 Aug Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  6. Thomas
    Thomas avatar
    27 posts
    Member since:
    Jul 2016

    Posted 19 Aug in reply to Deyan Link to this post

    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

     

     

  7. Thomas
    Thomas avatar
    27 posts
    Member since:
    Jul 2016

    Posted 19 Aug in reply to Thomas Link to this post

    Hi Deyan,

    and the following properties from EventInfo are not publi:

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

     

    Regards

  8. Thomas
    Thomas avatar
    27 posts
    Member since:
    Jul 2016

    Posted 19 Aug in reply to Thomas Link to this post

    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

  9. Deyan
    Admin
    Deyan avatar
    2039 posts

    Posted 22 Aug Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
DevCraft banner