Kendo Datepicker: Resizing or Fonts Inside

Question

I have a Kendo Datepicker that I am showing inside a Kendo window, and it looks like this:

Datepicker is somehow inflated, with large fonts and size. Outside the Kendo window, the finisher displays a penalty. Now I was wondering if I can resize the datepicker or the fonts in it, assuming that decreasing the font size will also reduce the datepicker value.

I tried to add this to CSS:

.k-popup .k-calendar { font-size: 10px !important; } 

And the result was odd:

It worked only partially, because only the name of the month decreased, the numbers remained large ...

The main problem is that when opening the datepicker it overflows beyond the size of the kendo window: I was looking for a solution that would allow me to reduce the size of the datepicker so that it matches.

EDIT

I tried to add the k-calendar class:

 @(Html.Kendo().DatePicker() .Name("concessionTOD") .Start(CalendarView.Month) .Value(DateTime.Now) .Format("yyyy-MM-dd") .Culture("pt-PT") .HtmlAttributes(new { @class = "k-calendar" }) ) 

but the result was the following:

you can see in the image above the input size and the name of the month, really, but the calendar itself continues to bloat.

EDIT 2

I found out that if a window is defined as an iFrame, the results inside can change, since an iFrame, like a regular web page, requires DOCTYPE, as well as html, head and body tags. I added this to the partial view that was inserted into the window, and the result was as follows:

So, the calendar no longer inflates, but still overflows the height of the window, causing the appearance of a scroll bar. To access the bottom of the calendar, I have to use a scroll. As stated earlier, I want the calendar to overflow outside the window, as shown in OnaBai's answer, without creating any scrollbars.

In addition, I found in the documentation that

Refreshes the content of a Window from a remote URL or the initially defined content template. Note that passing data and non-GET requests cannot be sent to an iframe, as they require a form with a target attribute.

I am not sure how to interpret the second sentence, but it can help in solving this problem.

Answer 1

OK, so I solved my problem, telerik support was the most valuable. They reminded me that it is impossible to have an overflowed iframe.

So, I removed the iFrame setting from the Kendo window:

 @(Html.Kendo().Window() .Name("addConcessionWindow") .Modal(true) //.Iframe(true) .Visible(false) ) 

and deleted the script and style links that I had on the html page, filled the window (so that they would not load twice).

Bottom line:

It is impossible to have a crowded iframe .

Answer 2

Use the following CSS selector / definition:

 .k-calendar { font-size: 10px; } 

Check out the following code snippet.

 $("#datepicker").kendoDatePicker(); $("#win").kendoWindow({ title: "window with datepicker" }); 

 .k-calendar { font-size: 10px; } 

 <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" /> <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css" /> <script src="http://cdn.kendostatic.com/2014.3.1119/js/jquery.min.js"></script> <script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script> <div id="win"> <input id="datepicker" value="10/10/2011"/> </div>