Kendo Datepicker: changing its size or fonts inside

Question

I've got a Kendo Datepicker that I'm displaying inside a Kendo Window and it shows like this:

The Datepicker is somehow bloated, with larger than usual fonts and size. Outside the Kendo window, the datepicker displays fine. Now, I was wondering if I could resize the datepicker, or the fonts in it, assuming downsizing the font would downsize the datepicker too.

I have tried adding this to the CSS:

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

And the result was odd:

It only worked partially because only the month name was reduced, the numbers remained large...

The main issue is that when opening the datepicker, it overflows outside the kendo window dimensions: I was looking for a solution that would allow me to downsize the datepicker so it would fit.

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 this:

you can see in the above image the size of the input and month name are reduced, indeed, but the calendar itself keeps bloated.

EDIT 2

I learned that if the window is defined as an iFrame, the results inside may vary as an iFrame, as a regular webpage, requires a DOCTYPE as well as the html, head and body tags. I added this to the partial view that's inserted in the window and the result was this:

So, the calendar isn't bloated anymore but still overflows the window's height, causing a scroll bar to appear. To access the lower part of the calendar, I must use the scroll. As said before, I want the calendar to overflow outside the window, as shown in OnaBai's answer, without creating any scroll bars.

Also, 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'm not sure how to interpret the second sentence but it may help in dealing with the issue.

Answer 1

Use the following CSS selector / definition:

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

Check 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>

Answer 2

OK, so I solved my issue, the telerik support proved most valuable. They reminded me that it is not possible to have an overflowed iframe.

So, I removed my iFrame setting from the Kendo Window:

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

and removed the script and style references I had in the html page the filled the window (so they won't be loaded twice).

Bottomline is:

it is not possible to have an overflowed iframe.