Telerik Forums / UI for WinForms
This is a migrated thread and some comments may be shown as answers.

4 question to change appearance of RadDateTimePicker

4 Answers 542 Views
Calendar, DateTimePicker, TimePicker and Clock
This is a migrated thread and some comments may be shown as answers.
Philip
Top achievements
Rank 1
Philip asked on 07 Aug 2013, 08:40 PM
#1
How do I change the appearance of each of these: date of current value, today's date, special days, date under cursor as it moves, etc..  For example, I may want the current value's date to be an outline only, special days to be green with no border, today to be white font on black, etc.?

#2
when I set this.ShowUpDown = true; in a custom control VS can no longer draw the UI of any form that uses the control and when the app is run the next line of code (RadDateTimePickerCalendar calendarBehavior = (this.DateTimePickerElement.GetCurrentBehavior() as RadDateTimePickerCalendar);) returns calendarBehavior as a null value.  Is ShowUpDown deprecated or is this a bug?

#3
I tried to follow this http://www.telerik.com/community/forums/winforms/calendar-and-datetimepicker/disable-future-dates-on-datetimepicker-calender-element.aspx but the disabling only happens when the calendar is initially drawn ... (does not refresh when moving to other months) ... I fixed it by subscribing to the events for <, >, <<, >> buttons ... is this the best approach or is there one event for when the calendar changes?

#4
How do I change the image (from the combobox default to my calendar.png)?
I tried this (that I found on the forums) 

RadDateTimePickerArrowButtonElement button = (RadDateTimePickerArrowButtonElement)this.DateTimePickerElement.ArrowButton.Children[1].Children[1];

((ImagePrimitive)button.Children[4]).Image = ImageLibrary.Calendar;

which failed because the first Children[1] did not have any children resulting in a null reference.

I also tried this which looked obvious ...

this.DateTimePickerElement.ArrowButton.Image = ImageLibrary

.Calendar;
but the appearance of the control did not change.

#5
When my custom control sets

this.Format = DateTimePickerFormat.Custom;

this.CustomFormat = "MM/dd/yyyy - ddd";

these properties are ignored and must be explicitly set for each control where implemented.  Other values like

this.NullText are inherited from my controls as expected.

 

4 Answers, 1 is accepted

Sort by
0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 12 Aug 2013, 01:08 PM
calendarButton.png
formatCells.png
Hello Philip,

Thank you for contacting Telerik Support.

#1
RadDateTimePicker can customize its calendar cells as the RadCalendar does. Here is an example:
public partial class Form1 : Form
   {
       Font newFont = new Font("Arial", 10.0f, FontStyle.Italic);
       Font datesFont = new Font("Arial", 9.0f, FontStyle.Bold);
       Font defaultFont;
 
       public Form1()
       {
           InitializeComponent();
 
           MyDateTimePicker dtp = new MyDateTimePicker();
           dtp.Format = DateTimePickerFormat.Custom;
           dtp.CustomFormat = "MM/dd/yyyy - ddd";
           dtp.NullText = "My null text";
           this.Controls.Add(dtp);
 
           //this.radDateTimePicker1.ShowUpDown = true;
 
           RadDateTimePickerCalendar calendarBehavior = this.radDateTimePicker1.DateTimePickerElement.GetCurrentBehavior() as RadDateTimePickerCalendar;
           RadCalendar calendar = calendarBehavior.Calendar as RadCalendar;
           defaultFont = calendar.Font;
           calendar.SpecialDays.Add(new RadCalendarDay(new DateTime(2013, 08, 16)));
           calendar.SpecialDays.Add(new RadCalendarDay(new DateTime(2013, 08, 21)));
 
           calendar.SelectionChanged += calendar_SelectionChanged;
           FormatCells();
 
           ImagePrimitive imagePrimitive = this.radDateTimePicker1.DateTimePickerElement.ArrowButton.Children[4] as ImagePrimitive;
           if (imagePrimitive != null)
           {
               imagePrimitive.Image = Properties.Resources.calendar;
           }
       }
  
       private void FormatCells()
       {
           RadDateTimePickerCalendar calendarBehavior = this.radDateTimePicker1.DateTimePickerElement.GetCurrentBehavior() as RadDateTimePickerCalendar;
           RadCalendar calendar = calendarBehavior.Calendar as RadCalendar;
           MonthViewElement monthView = calendarBehavior.Calendar.CalendarElement.CalendarVisualElement as MonthViewElement;
           RadCalendarDay[] specialDays = calendar.SpecialDays.ToArray();
           List<DateTime> dates = ExtractSpecialdates(specialDays);
 
           foreach (CalendarCellElement cell in monthView.TableElement.Children)
           {
               cell.MouseHover += cell_MouseHover;
               cell.MouseLeave += cell_MouseLeave;
 
               if (cell.Today)
               {
                   cell.BorderBoxStyle = BorderBoxStyle.FourBorders;
                   cell.BorderColor = Color.Gray;
                   cell.BackColor = Color.Black;
                   cell.BackColor2 = Color.Black;
                   cell.ForeColor = Color.White;
               }
               else if (cell.Selected)
               {
                   cell.BackColor = Color.LightBlue;
                   cell.BackColor2 = Color.LightBlue;
               }
               else if (dates.Contains(cell.Date))
               {
                   cell.Font = datesFont;
                   cell.BackColor = Color.Green;   
                   cell.BorderBoxStyle = BorderBoxStyle.FourBorders;
                   cell.BorderWidth = 0;
               }
               else
               {
                   cell.Font = calendar.Font;
                   cell.BackColor = calendar.BackColor;
                   cell.BorderBoxStyle = BorderBoxStyle.SingleBorder;
                   cell.BorderWidth = 1;
               }
           }
       }
 
       private void calendar_SelectionChanged(object sender, EventArgs e)
       {
           FormatCells();
       }
 
       private void cell_MouseLeave(object sender, EventArgs e)
       {
           CalendarVisualElement el = sender as CalendarCellElement;
           el.Font = defaultFont;
           el.ForeColor = Color.Black;
       }
 
       private void cell_MouseHover(object sender, EventArgs e)
       {
           CalendarVisualElement el = sender as CalendarCellElement;
           el.Font = newFont;
           el.ForeColor = Color.Red;
       }
 
       private List<DateTime> ExtractSpecialdates(RadCalendarDay[] specialDays)
       {
           List<DateTime> dates = new List<DateTime>();
 
           foreach (RadCalendarDay day in specialDays)
           {
               dates.Add(day.Date);
           }
 
           return dates;
       }
   }
 
   public class MyDateTimePicker : RadDateTimePicker
   {
   }

#2
When you click on the drop down, a calendar control would always be shown. You can modify this behavior by setting the date time picker to work in a date time format and have spin buttons instead of the drop down which activates the calendar. To activate the spin mode, use the ShowUpDown property of RadDateTimePicker. That is why in activated ShowUpDown the calendar behaviour is null.

#3
Calendar cells are reusable visual elements. Every time you navigate through next/previous buttons the visual cell elements are the same but the data behind them is changed, that is why you need to refresh cells when navigating.

#4
In order to change the image of the arrow button you should use:
ImagePrimitive imagePrimitive = this.radDateTimePicker1.DateTimePickerElement.ArrowButton.Children[4] as ImagePrimitive;
           if (imagePrimitive != null)
           {
               imagePrimitive.Image = Properties.Resources.calendar;
           }

#5
As to the custom formatting of an instance of custom date time picker, on my end everything seems to be OK. Please see the attached file. If you still experience issues, please get back to me with a sample where I can reproduce it and I will gladly help you with it.

I hope this information helps. Should you have further questions, I would be glad to help.

Regards,
Desislava
Telerik
TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WINFORMS.
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>
0
Ras Ran
Top achievements
Rank 2
Iron
Veteran
Iron
answered on 20 Apr 2021, 11:48 AM

hii Dess,

How to Change RadDateTimePicker Popup format to Month And Year Only  ???

Thanks And Regards,

Ras Ran

0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 21 Apr 2021, 05:43 AM
MonthYearSelection.gif
Hello, Ras Ran, 
  
In order to achieve only month-year selection in the RadDateTimePicker's popup, you can benefit the zoom navigation mode. Please refer to the following code snippet which result is illustrated in the attached gif file:
        public RadForm1()
        {
            InitializeComponent();

            this.radDateTimePicker1.Format = DateTimePickerFormat.Custom;
            this.radDateTimePicker1.CustomFormat = "MM/yyyy";

            this.radDateTimePicker1.DateTimePickerElement.Calendar.HeaderNavigationMode = HeaderNavigationMode.Zoom;
            this.radDateTimePicker1.DateTimePickerElement.Calendar.ZoomLevel = ZoomLevel.Months;
            this.radDateTimePicker1.DateTimePickerElement.Calendar.ZoomChanging+=Calendar_ZoomChanging;
        }

        private void Calendar_ZoomChanging(object sender, CalendarZoomChangingEventArgs e)
        {
            if (e.Direction== DrillDirection.Down&&this.radDateTimePicker1.DateTimePickerElement.Calendar.ZoomLevel == ZoomLevel.Months )
            {
                e.Cancel = true;
            }
        }
I hope this information helps. If you need any further assistance please don't hesitate to contact me.

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Ras Ran
Top achievements
Rank 2
Iron
Veteran
Iron
answered on 21 Apr 2021, 11:46 AM
Thank you so much Dess, its worked 
Tags
Calendar, DateTimePicker, TimePicker and Clock
Asked by
Philip
Top achievements
Rank 1
Answers by
Dess | Tech Support Engineer, Principal
Telerik team
Ras Ran
Top achievements
Rank 2
Iron
Veteran
Iron
Share this question
or