Customization of android calendar monthview

11 posts, 0 answers
  1. rincy
    rincy avatar
    14 posts
    Member since:
    Nov 2014

    Posted 27 Jan 2015 Link to this post

    Hi,

    1.I want to customize day name row text.Now its showing the day name as MON,TUE WED etc,I want to make it as M, T,W etc 
    2.I am trying to change selected cell background color,but when i select today,am not able to change background color.(if i select other days, background color is changing )

    Please give a reply on this.
  2. Antony Jekov
    Admin
    Antony Jekov avatar
    88 posts

    Posted 27 Jan 2015 Link to this post

    Hello Rincy,

    The selection of the today date is something we decided to include in the upcoming release in February. However I am offering you a workaround for the time being.  I am giving you the modified code including your previous ticket and this one as well:
    private RadCalendarView calendarView;
     
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
     
            this.calendarView = new RadCalendarView(this);
            this.calendarView.setAdapter(new CustomCalendarAdapter(this.calendarView));
            this.calendarView.getEventAdapter().setRenderer(new CustomEventRenderer(this));
     
            List<Event> events = new ArrayList<>();
            events.add(new Event("Event", Calendar.getInstance().getTimeInMillis(), Calendar.getInstance().getTimeInMillis() + 1));
            this.calendarView.getEventAdapter().setEvents(events);
     
            this.calendarView.getAdapter().setStyle(CalendarStyles.light(this));
            setContentView(this.calendarView);
        }
     
        private static class CustomCalendarAdapter extends CalendarAdapter {
     
            public CustomCalendarAdapter(RadCalendarView owner) {
                super(owner);
            }
     
            @Override
            protected CalendarDayCell generateCalendarDayCell() {
                return new CustomCalendarDayCell(this.owner);
            }
     
            @Override
            public void updateDayNameCell(CalendarCell convertCell, int index) {
                super.updateDayNameCell(convertCell, index);
                convertCell.setText(convertCell.getText().substring(0, 1));
            }
        }
     
        private static class CustomCalendarDayCell extends CalendarDayCell {
     
            private static final int SELECTED_COLOR = Color.parseColor("#38b4db");
            private static final int IDLE_COLOR = Color.parseColor("#ffffff");
     
            public CustomCalendarDayCell(RadCalendarView owner) {
                super(owner);
            }
     
            @Override
            protected void drawEvents(Canvas canvas) {
                if (this.getEvents() != null && this.getEvents().size() > 0)
                    this.owner.getEventAdapter().getRenderer().renderEvents(canvas, this);
            }
     
            @Override
            protected void updateBackgroundColor() {
                if (this.isSelected())
                    setBackgroundColor(SELECTED_COLOR);
                else
                    setBackgroundColor(IDLE_COLOR);
            }
        }
     
        private static class CustomEventRenderer extends EventRenderer {
     
            private static final int COLOR_IDLE = Color.parseColor("#38b4db");
            private static final int COLOR_SELECTED = Color.parseColor("#ffffff");
     
            private float size;
            private Paint paint;
     
            public CustomEventRenderer(Context context) {
                super(context);
     
                this.size = Util.getDimen(TypedValue.COMPLEX_UNIT_DIP, 20);
                this.paint = new Paint(Paint.ANTI_ALIAS_FLAG);
            }
     
            @Override
            public void renderEvents(Canvas canvas, CalendarDayCell cell) {
                Path path = new Path();
                path.moveTo(cell.getRight() - this.size, cell.getBottom());
                path.lineTo(cell.getRight(), cell.getBottom());
                path.lineTo(cell.getRight(), cell.getBottom() - this.size);
                path.close();
     
                if (cell.isSelected())
                    this.paint.setColor(COLOR_SELECTED);
                else
                    this.paint.setColor(COLOR_IDLE);
     
                canvas.drawPath(path, this.paint);
            }
        }

    Please let me know if this works for you.

    Regards,
    Antony Jekov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. DevCraft banner
  4. rincy
    rincy avatar
    14 posts
    Member since:
    Nov 2014

    Posted 28 Jan 2015 in reply to Antony Jekov Link to this post

    Hi Antony,
    Thank you so much for your fast reply.It worked for me!

    But when am trying to change date text color,Day name text color also changing. I.I tried with setdayNametextColor(Color.Red),but its not working.output screenshot attached.(date and day name header showing in same color,i want day name as different color)

    here is my code

    @Override
        public View onCreateView(LayoutInflater inflater, final ViewGroup container, Bundle savedInstanceState) {
            final View objView = inflater.inflate(R.layout.fragment_month_job_list, container, false);
            // Get ListView Id to render Job List
            jobListView = (ListView) objView.findViewById(R.id.listViewMonthJob);
            calendarView = (RadCalendarView) objView.findViewById(R.id.calendarView);

            calendarView.setAdapter(new CustomCalendarAdapter(this.calendarView));
            calendarView.getEventAdapter().setRenderer(new CustomEventRenderer(getActivity()));
            calendarView.getAdapter().setDayNameTextColor(Color.RED);
            calendarView.getAdapter().setDateCellBackgroundColor(Color.WHITE,Color.GRAY);
            calendarView.getAdapter().setDateTextColor(Color.parseColor("#00BFFF"), Color.BLACK);
            calendarView.getAdapter().setDayNameTextColor(Color.RED);
            calendarView.getAdapter().setSelectedCellBackgroundColor(Color.parseColor("#00BFFF"));
            calendarView.setShowTitle(false);
            calendarView.setHorizontalScroll(true);
            calendarView.setSelectionMode(CalendarSelectionMode.Single);
            calendarView.getEventAdapter().getRenderer().setEventRenderMode(EventRenderMode.Shape);
            mJobMonthListIntentFilter = new IntentFilter(DataService.JOB_DATE_LIST);
            calendarView.setWeekNumbersDisplayMode(WeekNumbersDisplayMode.None);

            mJobMonthListReceiver = new BroadcastReceiver() {
                @Override
                public void onReceive(Context context, Intent intent) {
                    jsonJobList = intent.getStringExtra(DataTransportService.MESSAGE_RESPONSE);
                    if (jsonJobList != null)
                        MonthJobListFragment.this.ShowJobs(jsonJobList, calendarView);
                }
            };
            //set header
            headerText = (TextView) objView.findViewById(R.id.day_calendarHeader);
            footerText = (TextView) objView.findViewById(R.id.day_calendarFooter);
            final Calendar cal = Calendar.getInstance();
            selectedDate = cal;

            //click event for header
            headerText.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    DatePickerDialog dialog = new DatePickerDialog(getActivity(), datePickerListener, cal.get(Calendar.YEAR), cal.get(Calendar.MONTH), cal.get(Calendar.DAY_OF_MONTH));
                    dialog.show();
                }
            });
            calendarView.setOnDisplayDateChangedListener(new RadCalendarView.OnDisplayDateChangedListener() {
                @Override
                public void onDisplayDateChanged(long l, long l2) {
                    Date date = new Date(l2);
                    selectedDate.setTime(date);
                    SetHeaderFooterText();
                }
            });
            //previous
            ImageButton prevButton = (ImageButton) objView.findViewById(R.id.day_Previous);
            prevButton.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    selectedDate.add(Calendar.MONTH, -1);
                    GoToDate(selectedDate);
                }
            });
            //Next
            ImageButton nextButton = (ImageButton) objView.findViewById(R.id.day_Next);
            nextButton.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    selectedDate.add(Calendar.MONTH, 1);
                    GoToDate(selectedDate);

                }
            });
            calendarView.setOnSelectedDatesChangedListener(new RadCalendarView.
                    OnSelectedDatesChangedListener() {
                @Override
                public void onSelectedDatesChanged(final RadCalendarView.SelectionContext context) {
                    final Date date1 = new Date(context.newSelection().get(0));
                    selectedDate.setTime(date1);
                    SetHeaderFooterText();
                    ShowSelectedDayJobs();
                }
            });
            SetHeaderFooterText();
            return objView;
        }
        private static class CustomCalendarDayCell extends CalendarDayCell {

            private static final int SELECTED_COLOR = Color.parseColor("#38b4db");
            private static final int IDLE_COLOR = Color.parseColor("#ffffff");

            public CustomCalendarDayCell(RadCalendarView owner) {
                super(owner);
            }

            @Override
            protected void drawEvents(Canvas canvas) {
                if (this.getEvents() != null && this.getEvents().size() > 0)
                    this.owner.getEventAdapter().getRenderer().renderEvents(canvas, this);
            }

            @Override
            protected void updateBackgroundColor() {
                if(this.isEnabled())
                    setBackgroundColor(Color.WHITE);
                else
                    setBackgroundColor(Color.GRAY);
                if (this.isSelected()) {
                    setBackgroundColor(SELECTED_COLOR);
                    setTextColor(Color.WHITE);
                }
                else {
                    setBackgroundColor(IDLE_COLOR);
                    setTextColor(Color.parseColor("#00BFFF"));
                }
            }
        }
        private static class CustomCalendarAdapter extends CalendarAdapter {

            public CustomCalendarAdapter(RadCalendarView owner) {
                super(owner);
            }

            @Override
            protected CalendarDayCell generateCalendarDayCell() {
                setDayNameTextColor(Color.RED);
                return new CustomCalendarDayCell(this.owner);
            }
            @Override
            public void updateDayNameCell(CalendarCell convertCell, int index) {
                super.updateDayNameCell(convertCell, index);
                convertCell.setText(convertCell.getText().substring(0, 1));
                setDayNameTextColor(Color.RED);
            }
            @Override
            public void updateDayNameCellStyle(CalendarCell dayNameCell) {
                super.updateDayNameCellStyle(dayNameCell);
                dayNameCell.setTextColor(Color.RED);
            }
        }

        private static class CustomEventRenderer extends EventRenderer {

            private static final int COLOR_IDLE = Color.parseColor("#38b4db");
            private static final int COLOR_SELECTED = Color.parseColor("#ffffff");

            private float size;
            private Paint paint;

            public CustomEventRenderer(Context context) {
                super(context);

                this.size = Util.getDimen(TypedValue.COMPLEX_UNIT_DIP, 10);
                this.paint = new Paint(Paint.ANTI_ALIAS_FLAG);
            }

            @Override
            public void renderEvents(Canvas canvas, CalendarDayCell cell) {
                Path path = new Path();
                path.moveTo(cell.getRight() - this.size, cell.getBottom());
                path.lineTo(cell.getRight(), cell.getBottom());
                path.lineTo(cell.getRight(), cell.getBottom() - this.size);
                path.close();

                if (cell.isSelected())
                    this.paint.setColor(COLOR_SELECTED);
                else
                    this.paint.setColor(COLOR_IDLE);

                canvas.drawPath(path, this.paint);
            }
        }
  5. rincy
    rincy avatar
    14 posts
    Member since:
    Nov 2014

    Posted 28 Jan 2015 in reply to rincy Link to this post

    Output
  6. Antony Jekov
    Admin
    Antony Jekov avatar
    88 posts

    Posted 29 Jan 2015 Link to this post

    Hello Rincy,

    I see you have tried setting the color to red at multiple places in the code. I am sorry if you struggled with this problem.

    The first call at the beginning should work fine and the color for the dates set to the adapter doesn't override the color of the day names. However when using a custom day cell you are overriding both the day name cells and the date cells. If you want to have different day names you should update your code as follows:
    @Override
    protected void updateBackgroundColor() {
        if (this.cellType == CalendarCellType.Date) {
            if (this.isEnabled())
                setBackgroundColor(Color.WHITE);
            else
                setBackgroundColor(Color.GRAY);
            if (this.isSelected()) {
                setBackgroundColor(SELECTED_COLOR);
                setTextColor(Color.WHITE);
            } else {
                setBackgroundColor(IDLE_COLOR);
                setTextColor(Color.parseColor("#00BFFF"));
            }
        } else {
            super.updateBackgroundColor();
        }
    }

    This will leave the behavior of the day names intact. It works as expected on my side.

    Please let me know if this worked for you.

    Regards,
    Antony Jekov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  7. rincy
    rincy avatar
    14 posts
    Member since:
    Nov 2014

    Posted 30 Jan 2015 in reply to Antony Jekov Link to this post

    Hi,

    Its working perfect :) ! I tried so many ways to make it but failed,thank you so much for your valuable reply.

    I have one more query,when i double click on monthview its going to year mode,How can i prevent that?I don't want year mode.

    Thanks & Regards,
    Rincy.
  8. Antony Jekov
    Admin
    Antony Jekov avatar
    88 posts

    Posted 30 Jan 2015 Link to this post

    Hello Rincy,

    I am glad I was able to help with the colors.

    Regarding the gestures - the user can change the display mode by either double tapping or pinching out of the month display mode. To disable both you can use the following code:
    calendarView.getGestureManager().setDoubleTapToChangeDisplayMode(false);
    calendarView.getGestureManager().setPinchCloseToChangeDisplayMode(false);

    Unfortunately I discovered a problem with this scenario, where after pinching out of month display mode, the scrolling is disabled. It is enabled once the user pinches back in, which in this scenario makes no sense. I tried to provide a workaround for you, but currently there is nothing I can do.

    I have logged this issue and it will be fixed and available as a hotfix at Monday.

    I am very sorry if this is a major problem for your project. Please let me know if you need the fix sooner, so I can provide you with a private build.


    Regards,
    Antony Jekov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  9. rincy
    rincy avatar
    14 posts
    Member since:
    Nov 2014

    Posted 02 Feb 2015 in reply to Antony Jekov Link to this post

    Hi Antony,

    Now we are using trial version.We will be getting the licensed version in one week since scroll issue is not a big issue, hope it will get fix in our licensed version.

    Thank you so much for your support and help .Everything is working fine!

    Thanks & Regards,
    Rincy Rose.
  10. Antony Jekov
    Admin
    Antony Jekov avatar
    88 posts

    Posted 02 Feb 2015 Link to this post

    Hi Rincy,

    The hotfix will be available for both trial and dev versions after today. I am glad you have no issues with this and I am glad I was able to be of help to your project.

    I will proceed and close this ticket. Please feel free to reopen it or post a new one if you need any further assistance.

    Thank you for your time and all best!

    Regards,
    Antony Jekov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  11. Aditya
    Aditya avatar
    1 posts
    Member since:
    Mar 2015

    Posted 22 Mar 2015 in reply to Antony Jekov Link to this post

    hii there,

    I too was lokking for a way to color only the selected dates by using


    for (int i = 0; i < holidayList.size(); i++) {

    month = holidayList.get(i).get("leaveDate")
    .substring(5, 7);
    day = holidayList.get(i).get("leaveDate")
    .substring(8, 10);
     calendar1 = Calendar.getInstance();

      
     
     
     
     
     calendarView.setDateToColor(new Function<Long, Integer>() {
    @Override
    public Integer apply(Long argument) {
    // Calendar calendar = Calendar.getInstance();

    calendar1.setTimeInMillis(argument);


    if (calendar1.get(Calendar.DATE)==Integer.parseInt(day) && calendar1.get(Calendar.MONTH) == Integer.parseInt(month) - 1)

    return Color.RED;



    return null;
    }

    holidaylist is a arraylist containing the dates which are to be colored red.
    But with this code only the last date in the list is getting colored but the rest are having no change in color.
    I m having trouble understanding the working of setdatetoColor method as it check the whole calender or just a few dates.


    });

      

  12. Antony Jekov
    Admin
    Antony Jekov avatar
    88 posts

    Posted 24 Mar 2015 Link to this post

    Hello Rincy,

    Here is an example of how you would use the date-to-color feature:
    @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            final RadCalendarView calendarView = new RadCalendarView(this);
     
            final List<Long> holidays = new ArrayList<>();
            final Calendar calendar = Calendar.getInstance();
            for (int i = 0; i < 10; i++) {
                calendar.add(Calendar.DATE, 1);
                holidays.add(CalendarTools.getDateStart(calendar.getTimeInMillis()));
            }
     
            calendarView.setDateToColor(new Function<Long, Integer>() {
                @Override
                public Integer apply(Long argument) {
                    if (holidays.contains(argument))
                        return Color.RED;
     
                    return null;
                }
            });
     
            setContentView(calendarView);
        }

    The dates of the cells are set so that they are at midnight, at the very beginning of the day. That is why you must use CalendarTools.getDateStart();

    I hope this helps. Let me know if you need some other scenario and you are struggling to get it working.

    Thank you for your time and all best!

    Regards,
    Antony Jekov
    Telerik
     

    See What's Next in App Development. Register for TelerikNEXT.

     
Back to Top
DevCraft banner