This is a migrated thread and some comments may be shown as answers.

Customization of android calendar monthview

10 Answers 367 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
rincy
Top achievements
Rank 1
rincy asked on 27 Jan 2015, 09:43 AM
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.

10 Answers, 1 is accepted

Sort by
0
Antony Jekov
Telerik team
answered on 27 Jan 2015, 02:32 PM
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.

 
0
rincy
Top achievements
Rank 1
answered on 28 Jan 2015, 12:26 PM
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);
        }
    }
0
rincy
Top achievements
Rank 1
answered on 28 Jan 2015, 12:27 PM
Output
0
Antony Jekov
Telerik team
answered on 29 Jan 2015, 09:50 AM
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.

 
0
rincy
Top achievements
Rank 1
answered on 30 Jan 2015, 11:53 AM
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.
0
Antony Jekov
Telerik team
answered on 30 Jan 2015, 04:18 PM
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.

 
0
rincy
Top achievements
Rank 1
answered on 02 Feb 2015, 11:11 AM
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.
0
Antony Jekov
Telerik team
answered on 02 Feb 2015, 12:12 PM
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.

 
0
Aditya
Top achievements
Rank 1
answered on 22 Mar 2015, 06:19 PM
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.


});

  

0
Antony Jekov
Telerik team
answered on 24 Mar 2015, 09:40 AM
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
 

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

 
Tags
Calendar
Asked by
rincy
Top achievements
Rank 1
Answers by
Antony Jekov
Telerik team
rincy
Top achievements
Rank 1
Aditya
Top achievements
Rank 1
Share this question
or