Kendo Datepicker：改变其内部的大小或字体

Question

我有一个Kendo Datepicker，我在Kendo Window中显示，它显示如下：

Datepicker以某种方式膨胀，比通常的字体和大小更大。在Kendo窗口之外，日期选择器显示正常。现在，我想知道我是否可以调整日期选择器或其中的字体，假设缩小字体也会缩小日期选择器的尺寸。

我尝试将其添加到CSS：

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

结果很奇怪：

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

主要问题是，当打开日期选择器时，它会溢出kendo窗口维度之外：我正在寻找一种解决方案，可以让我缩小日期选择器的尺寸以适应它。

修改

我尝试添加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标记。我将此添加到窗口中插入的部分视图中，结果如下：

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

另外，我在documentation中找到了

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.

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

Answer 1

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

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

检查以下代码段。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

好的，所以我解决了我的问题，Telerik支持被证明是最有价值的。他们提醒我不可能有溢出的iframe 。

所以，我从Kendo Window中删除了我的iFrame设置：

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

并删除了我在html页面中填充窗口的脚本和样式引用（因此它们不会被加载两次）。

底线是：

无法拥有溢出的iframe 。