How to change the font of telerik DateTimePicker of month select popup

2 posts, 0 answers
  1. barak
    barak avatar
    1 posts
    Member since:
    Jan 2018

    Posted 10 Jan 2018 Link to this post

    I use Telerik WinForm DateTimePicker.
    I can customize it with below code:
    Font headerFont = new Font( "Arial", 9.0f, FontStyle.Bold );Font datesFont = new Font( "Arial", 9.0f, FontStyle.Italic );RadDateTimePickerCalendar calendarBehavior = this.radDateTimePicker1.DateTimePickerElement.GetCurrentBehavior() as RadDateTimePickerCalendar;RadCalendar calendar = calendarBehavior.Calendar as RadCalendar;RadCalendarElement calendarElement = calendar.CalendarElement as RadCalendarElement; calendarElement.CalendarNavigationElement.Font = headerFont; calendarElement.CalendarNavigationElement.ForeColor = Color.Yellow; calendarElement.CalendarNavigationElement.BackColor = Color.White; calendarElement.CalendarNavigationElement.BackColor2 = Color.Gray; calendarElement.CalendarNavigationElement.BackColor3 = Color.DarkGray; calendarElement.CalendarNavigationElement.BackColor4 = Color.Gainsboro; calendarElement.CalendarNavigationElement.BorderColor = Color.DarkGray;MonthViewElement monthView = calendarBehavior.Calendar.CalendarElement.CalendarVisualElement as MonthViewElement;foreach ( RadItem item in monthView.TableElement.Children ){ item.Font = datesFont;}int outint;foreach ( CalendarCellElement cell in ( ( MonthViewElement ) calendarBehavior.Calendar.CalendarElement.Children[ 0 ].Children[ 2 ] ).TableElement.Children ){if ( !int.TryParse( cell.Text, out outint ) ){ cell.Font = new Font( this.radDateTimePicker1.Font.FontFamily, 12 );}}
    How can I change the month select font?

     

    and also i want set these customization when navigation and select month in zoom or popup

     

    Could you help me?

  2.
  3. Hristo
    Admin
    Hristo avatar
    1520 posts

    Posted 11 Jan 2018 Link to this post

    Hello Barak,

    Thank you for writing.

    You can refer to the following documentation article demonstrating how the elements in RadDateTimePicker can be customized: https://docs.telerik.com/devtools/winforms/editors/datetimepicker/customizing-appearance/customize-radcalendar-programmatically. The elements in the popup of the navigation element are created dynamically and their Font property cannot be accessed. If you set the HeaderNavigationMode to zoom you will be able to change the font of the calendar cells by handling the ZoomChanged event: 
    public partial class RadForm1 : Telerik.WinControls.UI.RadForm
    {
        public RadForm1()
        {
            InitializeComponent();
        }
     
        Font datesFont = new Font("Arial", 9.0f, FontStyle.Italic);
        protected override void OnShown(EventArgs e)
        {
            base.OnShown(e);
             
            Font headerFont = new Font("Arial", 12.0f, FontStyle.Bold);
     
            RadDateTimePickerCalendar calendarBehavior = this.radDateTimePicker1.DateTimePickerElement.GetCurrentBehavior() as RadDateTimePickerCalendar;
            RadCalendar calendar = calendarBehavior.Calendar as RadCalendar;
            RadCalendarElement calendarElement = calendar.CalendarElement as RadCalendarElement;
            calendarElement.CalendarNavigationElement.Font = headerFont;
            calendarElement.CalendarNavigationElement.ForeColor = Color.Yellow;
            calendarElement.CalendarNavigationElement.BackColor = Color.White;
            calendarElement.CalendarNavigationElement.BackColor2 = Color.Gray;
            calendarElement.CalendarNavigationElement.BackColor3 = Color.DarkGray;
            calendarElement.CalendarNavigationElement.BackColor4 = Color.Gainsboro;
            calendarElement.CalendarNavigationElement.BorderColor = Color.DarkGray;
            MonthViewElement monthView = calendarBehavior.Calendar.CalendarElement.CalendarVisualElement as MonthViewElement;
            foreach (RadItem item in monthView.TableElement.Children)
            {
                item.Font = datesFont;
            }
     
            this.radDateTimePicker1.DateTimePickerElement.Calendar.HeaderNavigationMode = HeaderNavigationMode.Zoom;
            calendar.ZoomChanged += Calendar_ZoomChanged;
        }
     
        private void Calendar_ZoomChanged(object sender, CalendarZoomChangedEventArgs e)
        {
            RadCalendar calendar = sender as RadCalendar;
     
            MonthViewElement monthView = calendar.CalendarElement.CalendarVisualElement as MonthViewElement;
            foreach (RadItem item in monthView.TableElement.Children)
            {
                item.Font = datesFont;
            }
        }
    }

    I hope this helps. Let me know if you have other questions.

    Regards,
    Hristo
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top