Calendar Size

[Paul]

Hi

 

I may well be missing the obvious but how do you resize the calendar?

[Dimiter Topalov]

Hi Paul,

Indeed, customizing the Calendar width and height is not as straight-forward as for most of the other Kendo UI for Angular components (that require simply adding an inline style or binding the style.styling-property-name property).

Due to the complex rendering of the Calendar, one can set a width to the wrapper, but will also need to cater for the inner elements so that the day indicators and the actual dates from the table stay in sync, e.g.:

https://stackblitz.com/edit/angular-np87kc?file=app/app.component.ts

Alternatively, you can scale the component by an arbitrary factor:

https://stackblitz.com/edit/angular-np87kc-mb9pwb?file=app/app.component.ts

I hope this helps, but please note that these approaches (and resizing the Calendar in general) are not officially supported and one should use them at their own discretion.

Regards,
Dimiter Topalov
Progress Telerik

[Eddie]

So to clarify, there is no way to make to look smaller than the native size.

Scaling it makes it blurry, does not keep it aligned to the container, and in result unusable.

Going into each element inside the calendar to adjust to a desirable size is not feasible either. Making it larger as shown above is do able because your not limiting the size of the navigation bar, once you limit the total width of the calendar to hinder the size of the navigation the work is increased exponentially.

 

Would you agree with these statements?

[Svet]

Hi Paul,

Indeed, I have to admit that your statements are valid.

What else I can suggest as workaround in order to change the size of the Calendar is to adjust its font size using some custom CSS. Please check the following example demonstrating such approach:

https://stackblitz.com/edit/angular-gubhco-epw6jc?file=app/app.component.ts

import { Component } from '@angular/core';
 
@Component({
selector: 'my-app',
styles: [ '.k-calendar { font-size: 10px; }' ],
template: `
<kendo-calendar></kendo-calendar>
`
})
export class AppComponent {}

Unfortunately, at the moment there is no other option that can be used to control the size of the Calendar. Let us know in case any further assistance is required for this or any other Kendo UI for Angular related topic.

Regards,
Svetlin
Progress Telerik

[J]

Hi,
after one and half year, is there any proper solution of resizing DatePicker? I'm struggling with this problem in my website quite much. I want to fit the picker popup into mobile resolution (i.e. width cca 350 px).
I tried scaling as you suggested and the popup is smaller, but as the picker textbox is not centered and so the picker popup is originally shifted to the left side and off the left edge, it does not fit into screen and is still off the left edge (even it is smaller). And the other tip to reduce font-size is useless for me in sense that the font is smaller but the spacing is the same so the popup size is the same as well.
Thanks for any advice.
J