Need to increase radCalendar Title font size

[Kiran]

Hi,
I want to increase the radCalendar's title font size. Can you please provide the steps where i can do this.
I don't see any property for radCalendar to change font size.
Let me know, if you need more information.

[Ralitsa]

Hi Kiran, 

Thank you for contacting us.

The header area of the RadCalendar contains the title and the navigation buttons. In order to access the title and increase its font size, you need to use the CalendarNavigationElement. 

Here is a sample code which demonstrates how to modify the Font property:

Font font = new Font("Arial", 14f);
RadCalendarElement element = this.radCalendar1.CalendarElement;
element.CalendarNavigationElement.Font = font;

In our help you can find more information about Customizing Navigation.

I hope this will help. Do not hesitate to write back with further questions.

Regards,
Ralitsa
Telerik

[Kiran]

Hi,
This helped me exactly as expected. Appreciated for your time.

[Peter]

Is there any way to reproduce this solution for the title and navigation panel at the top of the calender drop down on the RadDateTimePicker?

I have managed to manipulate the size of the dates inside the calender, however I cannot find a way to increase the size of the navigation or title part of the drop down

Thanks in advance.

[Ralitsa]

Hi Peter,

Thank you for contacting us. 

You can change font and size of title in the RadDateTimePickerCalendar. Please take a look at the following example: 

Font font = new Font("Arial", 14f);
RadDateTimePickerCalendar calendarBehavior = this.radDateTimePicker1.DateTimePickerElement.GetCurrentBehavior() as RadDateTimePickerCalendar;
RadCalendar calendar = calendarBehavior.Calendar as RadCalendar;
RadCalendarElement element = calendar.CalendarElement;
element.CalendarNavigationElement.Font = font;

Hope this will help you. Let me know if you have any other questions.

Regards,
Ralitsa
Telerik

[pierre-jean]

Hello

I have followed the above recommendation and the font is effectively modified correctely, however, the height of the text element in the calendat component is not resized to the full height and the text is only partially visible

See the attached file as an example with a big font. How can I adjust the size of the text element?

Incidentally I have the same problem  with a radButtonTextBox

 

Thanks in advance for your recommendation

Best Regards

Pierre-Jean

[Dess | Tech Support Engineer, Principal]

Hello, Pierre-Jean,     

Indeed, in the provided screenshots the control which I believe is a RadDateTimePicker displays partially the text. However, the control seems to show the date correctly on my end with the following code snippet: 

            Font font = new Font("Arial", 18f);
            this.radDateTimePicker1.Font = font;
            this.radDateTimePicker1.Format = DateTimePickerFormat.Custom;
            this.radDateTimePicker1.CustomFormat="dd/MM/yyyy";
            RadDateTimePickerCalendar calendarBehavior = this.radDateTimePicker1.DateTimePickerElement.GetCurrentBehavior() as RadDateTimePickerCalendar;       
            RadCalendar calendar = calendarBehavior.Calendar as RadCalendar;
            RadCalendarElement element = calendar.CalendarElement;
            element.CalendarNavigationElement.Font = font;

            this.radDateTimePicker1.DateTimePickerElement.CalendarSize = new Size(400, 400);

I have attached my sample project for your reference. Am I missing something? Is the DPI scaling on your machine higher than 100%? Could you please specify the exact steps how to reproduce the problem?

Thank you in advance for your cooperation. I am looking forward to your reply.

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

[pierre-jean]

Hello Dess

Thanks for spending time to look in this problem
Indeed the problem is on a RadDateTimePicker, however it does also appear on a radbuttontextboxcontrol.

I have managed to reproduce the problem in a test application that I use to test changing control sizes related to font size and DPI scale factor. 

It appears that the problem is due to the fact that I had the property autosize set to False on the timepicker control
after changing autosize to true the problem goes away - I had set it to false to ensure that the control "fills" completely the cell of the table layout control in which it is hosted, but I can do without this feature.

Thanks again

Best Regards

Pierre-Jean

 

 

[Dess | Tech Support Engineer, Principal]

Hello, Pierre-Jean,

I am glad that the problem you were facing is now resolved. 

When you set the AutoSize property to false, make sure that you set the Size property. Thus, the control will know its size. If you intend to use a TableLayoutPanel, I would recommend you to set the Dock property to Fill for the control hosted inside the cell. Thus, you will ensure that the control will occupy the available space in the cell.

If you need any further assistance please don't hesitate to contact me.

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

[pierre-jean]

Hello

I have done additional testing and I have not completely solved my problem. For test purpose I have created a form with
a table layout control with three lines at 33% each anchored top,left,right and bottom (to have it resized with the form)
- the first line contains a radtextbox control with dock=fill autosize=false
- the secod line contains a datetimepicker with dock=fill autosize=true
- the third line contains a datetimepicker with dock=fill autosze=false

Normally I would use autosize=false in order to have the controls fill the table layout cell

I have added a button to change the font and resizes the form in proportion of the new font size
After changing the font and thus the form's size:
- the textbox control takes the new font and fills the cell
- the first datetimepicker takes the new font does not fill the cell which is normal as it hase autosize=true
- the second datetimepicker takes the new font, fills the cell but the text is vertically truncated, as if the container textboxelement was not resized properly

You will find herebelow an animated screen copy of the resulting behaviour and the code associated with the button that changes the font and resizes the form

Thanks for any advice

Best regards

Pierre-Jean

------------------------------------------------------------------------------------------------------------
Imports Telerik.WinControls
Imports Telerik.WinControls.UI

Public Class RadForm1
    Private Sub RadButton1_Click(sender As Object, e As EventArgs) Handles RadButton1.Click
        FontDialog1.ShowDialog()
        RadTextBoxControl1.Font = FontDialog1.Font
        Me.Height = 144 * (FontDialog1.Font.Size / 8.5)

        RadDateTimePicker1.Font = FontDialog1.Font
        RadDateTimePicker1.Format = DateTimePickerFormat.Custom
        RadDateTimePicker1.CustomFormat = "dd/MM/yyyy"
        Dim calendarBehavior1 As RadDateTimePickerCalendar = TryCast(RadDateTimePicker1.DateTimePickerElement.GetCurrentBehavior(), RadDateTimePickerCalendar)
        Dim calendar1 As RadCalendar = calendarBehavior1.Calendar
        Dim calendarElement1 As RadCalendarElement = calendar1.CalendarElement
        calendarElement1.Font = FontDialog1.Font
        calendarElement1.CalendarNavigationElement.Font = FontDialog1.Font
        calendarElement1.CalendarVisualElement.Font = FontDialog1.Font
        calendarElement1.CalendarStatusElement.Font = FontDialog1.Font
        Dim MonthView As MonthViewElement = TryCast(calendarBehavior1.Calendar.CalendarElement.CalendarVisualElement, MonthViewElement)
        MonthView.Font = FontDialog1.Font
        For Each item As RadItem In MonthView.TableElement.Children
            item.Font = FontDialog1.Font
        Next

        RadDateTimePicker2.Font = FontDialog1.Font
        RadDateTimePicker2.Format = DateTimePickerFormat.Custom
        RadDateTimePicker2.CustomFormat = "dd/MM/yyyy"
        Dim calendarBehavior2 As RadDateTimePickerCalendar = TryCast(RadDateTimePicker1.DateTimePickerElement.GetCurrentBehavior(), RadDateTimePickerCalendar)
        Dim calendar2 As RadCalendar = calendarBehavior2.Calendar
        Dim calendarElement2 As RadCalendarElement = calendar2.CalendarElement
        calendarElement2.Font = FontDialog1.Font
        calendarElement2.CalendarNavigationElement.Font = FontDialog1.Font
        calendarElement2.CalendarVisualElement.Font = FontDialog1.Font
        calendarElement2.CalendarStatusElement.Font = FontDialog1.Font
        Dim MonthView2 As MonthViewElement = TryCast(calendarBehavior2.Calendar.CalendarElement.CalendarVisualElement, MonthViewElement)
        MonthView2.Font = FontDialog1.Font
        For Each item As RadItem In MonthView2.TableElement.Children
            item.Font = FontDialog1.Font
        Next
    End Sub
End Class

 

[Dess | Tech Support Engineer, Principal]

Hello, Pierre-Jean, 

Following the provided information, I have prepared a sample project to text the behavior. Here is illustrated the observed result on my end:

I have attached my sample project for your reference. Please give it a try and see how it works on your end. Am I missing something? Could you please specify the exact steps how to reproduce the problem?

I am looking forward to your reply.

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

[pierre-jean]

Hello Dess

thanks for the time your spend on this problem.

It seems to me that the missing element in your sample project is the resizing of the table layout to accomodate the new size font.

I have tried two scenarios:

1. Anchoring the tablelayout to the bottom of the form (I moved the buttons to the side in order to keep them visible) This is what yo will see in the attached screencopy (Senario1) - Here it is the radcontroltextbox that shows the problem.

2. rseizing programmatically the table layoutpanel, as per the below code, and it shows the same abnormality see scenario2)

            fontDialog1.ShowDialog();
            radTextBox1.Font = fontDialog1.Font;
//            this.Height = (int)(144 * (fontDialog1.Font.Size / 8.5)) + 30;
            this.tableLayoutPanel1.Height  = (int)(144 * (fontDialog1.Font.Size / 8.5)) + 30;
            this.Height = this.tableLayoutPanel1.Height + 150;

 

While this does not completely reproduces the prolem I had (which was on the datetime picker), it does behave abnormally.
But I am possibly missing something

Thanks again

 

[Dess | Tech Support Engineer, Principal]

Hello, Pierre-Jean, 

I moved the buttons on the right and anchored the TableLayoutPanel to Bottom:

Then, clicking radButton2 leads to a different result on my end:

If you keep the Anchor set to Top, Bottom, Left, it is possible to replicate the undesired result. I confirm that this behavior is not correct. That is why I have logged it in our feedback portal by creating a public thread on your behalf. You can track its progress, subscribe for status changes and add your comments on the following link - feedback item.

I have also updated your Telerik points.

Currently, due to the specificity of the problem, the possible solution that I can suggest is to set the Multiline property to true for the text box:

this.radTextBox1.Multiline = true;
this.radDateTimePicker2.DateTimePickerElement.TextBoxElement.TextBoxItem.Multiline = true;

I believe that it would fit your scenario.

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

[pierre-jean]

Hello Dess

thanks for your feedback
I am glad to see that you could reproduce the error.
I will apply your suggested workaround awaiting an update that solves the underlying issue

Thanks again for your efforts

Best Regards

Pierre-Jean