4 question to change appearance of RadDateTimePicker

[Philip]

#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.

 

[Dess | Tech Support Engineer, Principal]

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

[Ras Ran]

hii Dess,

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

Thanks And Regards,

Ras Ran

[Dess | Tech Support Engineer, Principal]

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

[Ras Ran]

Thank you so much Dess, its worked