Kendo Calendar高度设置问题：宽短样式无效或底部被截断

Let's break down why you're seeing those height problems and fix them step by step:

Why Your Current Setup Isn't Working #

1. Parent Container Height: Your .stockWindow class has height: 0px — this forces the parent container to collapse, which will truncate any child element (like your calendar) that tries to expand beyond it.
2. Direct Height Limitations: Kendo Calendar uses a table-based internal structure. Trying to set a hard height directly on the calendar element often doesn't work as expected, because the table cells and headers won't automatically adjust to fit the forced height.

Step-by-Step Solution #

1. Fix the Parent Container CSS

First, remove the problematic height: 0px from .stockWindow — we'll adjust it to properly center your calendar without restricting its height:

.stockWindow { 
    align-items: center; 
    display: flex; /* Enable flexbox for proper centering */
    justify-content: center;
    min-height: 220px; /* Optional: Set a minimum height to avoid container collapse */
}

2. Update the Calendar HTML

Add a custom class (like compact-calendar) to your Kendo Calendar to target it specifically, and set the width to 100% of its parent (since your parent uses col-lg-12):

<div id="calendar" class="col-lg-12 is-hidden stockWindow" align="center" hidden>
    @(Html.Kendo().Calendar()
        .Name("WeekPicker")
        .Events(e => { e.Change("cal"); })
        .Footer(false)
        .HtmlAttributes(new { style= "width: 100%;", @class = "compact-calendar" })
    )
</div>

3. Style the Compact Calendar

Instead of forcing a height on the entire calendar, we'll shrink internal elements (padding, font size, line height) to create a shorter, wide layout without truncation:

/* Base calendar styling */
.compact-calendar.k-calendar {
    height: auto; /* Let the calendar adapt to internal elements */
    max-width: 800px; /* Optional: Limit maximum width if needed */
}

/* Shrink padding around the month view */
.compact-calendar .k-calendar-view {
    padding: 6px 0; /* Reduce top/bottom padding from default ~16px */
}

/* Reduce padding and font size for date cells */
.compact-calendar .k-calendar-cell {
    padding: 5px 8px; /* Shrink cell padding */
    font-size: 0.9em; /* Optional: Smaller font to save space */
    line-height: 1.2; /* Tighten line height */
}

/* Adjust weekday header height */
.compact-calendar .k-calendar-header th {
    padding: 3px 8px;
    font-size: 0.85em;
    line-height: 1.1;
}

4. Optional: Fixed Height Layout

If you need an exact fixed height, use flexbox to make internal elements adapt to the set height without truncation:

.compact-calendar.k-calendar {
    height: 180px; /* Exact fixed height */
    width: 100%;
}

.compact-calendar .k-calendar-view {
    height: calc(100% - 35px); /* Subtract header height */
    display: flex;
    flex-direction: column;
}

.compact-calendar .k-calendar-table {
    flex: 1; /* Let the table take remaining space */
}

.compact-calendar .k-calendar-cell {
    padding: 4px 6px;
    font-size: 0.85em;
}

Key Takeaways #

• Never set height: 0px on a parent container that holds a Kendo component — it will always truncate content.
• Avoid hardcoding height directly on the Kendo Calendar. Instead, adjust internal padding, font sizes, and line heights to achieve your desired compact layout.
• Use custom classes to target your calendar specifically, so you don't affect other Kendo components on the page.

内容的提问来源于stack exchange，提问作者GeorgeB