Customization of android calendar monthview

[rincy]

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.

[Antony Jekov]

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

 

 

[rincy]

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);
        }
    }

[rincy]

Output

[Antony Jekov]

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

 

 

[rincy]

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.

[Antony Jekov]

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

 

 

[rincy]

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.

[Antony Jekov]

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

 

 

[Aditya]

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.


});

  

[Antony Jekov]

Hello ,

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