css - 剑道日期选择器 : changing its size or fonts inside

Question

我在 Kendo 窗口中显示了一个 Kendo Datepicker，它显示如下:

Datepicker 有点臃肿，字体和大小都比平常大。在 Kendo 窗口外，日期选择器显示正常。现在，我想知道是否可以调整日期选择器或其中字体的大小，假设缩小字体也会缩小日期选择器。

我已经尝试将它添加到 CSS 中:

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

结果很奇怪:

它只部分起作用，因为只有月份名称减少了，数字仍然很大......

主要问题是，当打开日期选择器时，它溢出到剑道窗口尺寸之外:我一直在寻找一种解决方案，可以让我缩小日期选择器的尺寸，使其适合。

编辑

我尝试添加 k-calendar 类:

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

但结果是这样的:

您可以在上图中看到输入和月份名称的大小确实减小了，但日历本身仍然臃肿。

编辑2

我了解到，如果将窗口定义为 iFrame，则内部结果可能会因 iFrame 而异，作为常规网页，需要 DOCTYPE 以及 html、head 和 body 标签。我将其添加到插入窗口的局部 View 中，结果是这样的:

因此，日历不再臃肿，但仍然溢出窗口的高度，导致出现滚动条。要访问日历的下半部分，我必须使用滚动条。如前所述，我希望日历溢出窗口，如 OnaBai 的回答所示，而不创建任何滚动条。

此外，我在 documentation 中找到了那个

从远程 URL 或最初定义的内容模板刷新窗口的内容。请注意，传递数据和非 GET 请求不能发送到 iframe，因为它们需要具有目标属性的表单。

我不确定如何解释第二句话，但它可能有助于处理这个问题。

Answer 1

使用以下 CSS 选择器/定义:

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

检查以下代码片段。

$("#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>