ASP.NET CalendarExtender Customized Height Problems

Question

The Problem

Let me vent first, this control has got to be the worst control ever, unless you want it EXACTLY like how they customized it AWESOME, else good luck.

I have done a lot of tweaking with the CSS file and I think I have a good grasp around how everything has been set up. My problem is that I modified the height of this control and now it will show a partial amount of the day names on the bottom if you are viewing the months or years. After debugging this to find out why I have found that the control is hard coding the position of the days below the month view and since I have changed the height of the control this is off by roughly 15px. The exact markup that is causing the problem is:

style="position: absolute; left: 0px; top: 139px;"

And I have confirmed this by editing the top value to 155px and everything is great.

My question is, how can I go about to fix this?

TL;DR - How do you change the height for the CalendarExtender?

ScreenShot

Design View

<table class="DataSelection">
    <tr>
        <th class="DataSelectionTableHeader">Employee Selection</th>
        <th class="DataSelectionTableHeader">Start Date</th>
        <th class="DataSelectionTableHeader">End Date</th>
        <th class="DataSelectionTableHeader">View By</th>
        <th class="DataSelectionTableHeader">Submit</th>
    </tr>
    <tr>
        <td class="DataSelectionTableData">
            <asp:DropDownList ID="ddlEmployee" runat="server"  DataTextField="Employee_Name" DataValueField="Employee_ID" AutoPostBack="false" Width="150" />
        </td>
        <td class="DataSelectionTableData">
            <asp:TextBox ID="tbxCalExtenderStart" runat="server" Height="16" />
            <asp:CalendarExtender ID="calExtenderStart" runat="server" Animated="true" FirstDayOfWeek="Sunday" PopupPosition="BottomRight" 
                TargetControlID="tbxCalExtenderStart" CssClass="Calendar" DefaultView="Days" PopupButtonID="popupButtonStart" />
            <asp:Image ID="popupButtonStart" runat="server" src="Assets/Images/Icons/Calendar.png" height="16" width="16" CssClass="PopupImg" />
        </td>
        <td class="DataSelectionTableData">
            <asp:TextBox ID="tbxCalExtenderEnd" runat="server" Height="16" />
            <asp:CalendarExtender ID="calExtenderEnd" runat="server" Animated="true" FirstDayOfWeek="Sunday" PopupPosition="BottomRight" 
                TargetControlID="tbxCalExtenderEnd" CssClass="Calendar" DefaultView="Days" PopupButtonID="popupButtonEnd" />
            <asp:Image ID="popupButtonEnd" runat="server" src="Assets/Images/Icons/Calendar.png" height="16" width="16" CssClass="PopupImg" />
        </td>
        <td class="DataSelectionTableData">
            <asp:DropDownList ID="ddlView" runat="server"  DataTextField="View_Name" DataValueField="View_ID" AutoPostBack="false" Width="75" />
        </td>
        <td class="DataSelectionTableData">
            <asp:Button ID="btnSubmit" runat="server" Text="Submit" />
        </td>
    </tr>
</table>

CSS File

div.ajax__calendar_days table tr td {
    padding-right: 0px;
}

.Calendar .ajax__calendar_container {
    border: 1px solid #E0E0E0;
    background-color: #FAFAFA;
    width: 175px;
}
.Calendar .ajax__calendar_header {
    font-family: Tahoma, Calibri, sans-serif;
    font-size: 12px;
    text-align: center;
    color: #9F9F9F;
    font-weight: normal;
    text-shadow: 0px 0px 2px #D3D3D3;
    height: 20px;
} 
.Calendar .ajax__calendar_title,
.Calendar .ajax__calendar_next,
.Calendar .ajax__calendar_prev {color: #004080;}
.Calendar .ajax__calendar_body {
    width: 175px;
    height: 150px;
    position: relative;
}
.Calendar .ajax__calendar_dayname {
    font-family: Tahoma, Calibri, sans-serif;
    font-size: 10px;
    text-align: center;
    color: #FA9900;
    font-weight: bold;
    text-shadow: 0px 0px 2px #D3D3D3;
    text-align: center !important;
    background-color: #EDEDED;
    border: solid 1px #D3D3D3;
    text-transform: uppercase;
    margin: 1px;
} 
.Calendar .ajax__calendar_day {
    font-family: Tahoma, Calibri, sans-serif;
    font-size: 10px;
    text-align: center;
    font-weight: bold;
    text-shadow: 0px 0px 2px #D3D3D3;
    text-align: center !important;
    border: solid 1px #E0E0E0;
    text-transform: uppercase;
    margin: 1px;
    width: 17px !important;
    color: #9F9F9F;
}
.Calendar .ajax__calendar_hover .ajax__calendar_day,
.Calendar .ajax__calendar_hover .ajax__calendar_month,
.Calendar .ajax__calendar_hover .ajax__calendar_year,
.Calendar .ajax__calendar_active {
    color: red; 
    font-weight: bold; 
    background-color: #ffffff;
}
.Calendar .ajax__calendar_year {
    border: solid 1px #E0E0E0;
    font-family: Tahoma, Calibri, sans-serif;
    font-size: 10px;
    text-align: center;
    font-weight: bold;
    text-shadow: 0px 0px 2px #D3D3D3;
    text-align: center !important;
    vertical-align: middle;
    margin: 1px;
}

.Calendar .ajax__calendar_month {
    border: solid 1px #E0E0E0;
    font-family: Tahoma, Calibri, sans-serif;
    font-size: 10px;
    text-align: center;
    font-weight: bold;
    text-shadow: 0px 0px 2px #D3D3D3;
    text-align: center !important;
    vertical-align: middle;
    margin: 1px;
}

.Calendar .ajax__calendar_today {
    font-family: Tahoma, Calibri, sans-serif;
    font-size: 10px;
    text-align: center;
    font-weight: bold;
    text-shadow: 0px 0px 2px #D3D3D3;
    text-align: center !important;
    text-transform: uppercase;
    margin: 1px;
    color: #6B6B6B;
}
.Calendar .ajax__calendar_other {
    background-color: #E0E0E0;
    margin: 1px;
    width: 17px;
}
.Calendar .ajax__calendar_hover .ajax__calendar_today,
.Calendar .ajax__calendar_hover .ajax__calendar_title {

}
.Calendar .ajax__calendar_footer {
    width: 175px;
    border: none;
    height: 20px;
    vertical-align: middle;
    color: #6B6B6B;
}

img.PopupImg {
    vertical-align: middle;
    padding: 0px;
    margin: 0px;
    border: none;
}

Output Chrome Inspection

<div class="ajax__calendar_days" id="calExtenderStart_days" style=
"position: absolute; left: 0px; top: 139px;">
    <table border="0" cellpadding="0" cellspacing="0" id=
    "calExtenderStart_daysTable" style="margin: auto;">
        <thead id="calExtenderStart_daysTableHeader">
            <tr id="calExtenderStart_daysTableHeaderRow">
                <td>
                    <div class="ajax__calendar_dayname">
                        Su
                    </div>
                </td>

                <td>
                    <div class="ajax__calendar_dayname">
                        Mo
                    </div>
                </td>

                <td>
                    <div class="ajax__calendar_dayname">
                        Tu
                    </div>
                </td>

                <td>
                    <div class="ajax__calendar_dayname">
                        We
                    </div>
                </td>

                <td>
                    <div class="ajax__calendar_dayname">
                        Th
                    </div>
                </td>

                <td>
                    <div class="ajax__calendar_dayname">
                        Fr
                    </div>
                </td>

                <td>
                    <div class="ajax__calendar_dayname">
                        Sa
                    </div>
                </td>
            </tr>
        </thead>

        <tbody id="calExtenderStart_daysBody">
            <tr>
                <td class="ajax__calendar_other">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_0_0" title=
                    "Sunday, January 26, 2014">
                        26
                    </div>
                </td>

                <td class="ajax__calendar_other">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_0_1" title=
                    "Monday, January 27, 2014">
                        27
                    </div>
                </td>

                <td class="ajax__calendar_other">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_0_2" title=
                    "Tuesday, January 28, 2014">
                        28
                    </div>
                </td>

                <td class="ajax__calendar_other">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_0_3" title=
                    "Wednesday, January 29, 2014">
                        29
                    </div>
                </td>

                <td class="ajax__calendar_other">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_0_4" title=
                    "Thursday, January 30, 2014">
                        30
                    </div>
                </td>

                <td class="ajax__calendar_other">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_0_5" title=
                    "Friday, January 31, 2014">
                        31
                    </div>
                </td>

                <td class="">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_0_6" title=
                    "Saturday, February 01, 2014">
                        1
                    </div>
                </td>
            </tr>

            <tr>
                <td class="">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_1_0" title=
                    "Sunday, February 02, 2014">
                        2
                    </div>
                </td>

                <td class="">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_1_1" title=
                    "Monday, February 03, 2014">
                        3
                    </div>
                </td>

                <td class="">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_1_2" title=
                    "Tuesday, February 04, 2014">
                        4
                    </div>
                </td>

                <td class="">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_1_3" title=
                    "Wednesday, February 05, 2014">
                        5
                    </div>
                </td>

                <td class="">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_1_4" title=
                    "Thursday, February 06, 2014">
                        6
                    </div>
                </td>

                <td class="">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_1_5" title=
                    "Friday, February 07, 2014">
                        7
                    </div>
                </td>

                <td class="">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_1_6" title=
                    "Saturday, February 08, 2014">
                        8
                    </div>
                </td>
            </tr>

            <tr>
                <td class="">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_2_0" title=
                    "Sunday, February 09, 2014">
                        9
                    </div>
                </td>

                <td class="">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_2_1" title=
                    "Monday, February 10, 2014">
                        10
                    </div>
                </td>

                <td class="">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_2_2" title=
                    "Tuesday, February 11, 2014">
                        11
                    </div>
                </td>

                <td class="">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_2_3" title=
                    "Wednesday, February 12, 2014">
                        12
                    </div>
                </td>

                <td class="">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_2_4" title=
                    "Thursday, February 13, 2014">
                        13
                    </div>
                </td>

                <td class="ajax__calendar_today">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_2_5" title=
                    "Friday, February 14, 2014">
                        14
                    </div>
                </td>

                <td class="">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_2_6" title=
                    "Saturday, February 15, 2014">
                        15
                    </div>
                </td>
            </tr>

            <tr>
                <td class="">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_3_0" title=
                    "Sunday, February 16, 2014">
                        16
                    </div>
                </td>

                <td class="">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_3_1" title=
                    "Monday, February 17, 2014">
                        17
                    </div>
                </td>

                <td class="">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_3_2" title=
                    "Tuesday, February 18, 2014">
                        18
                    </div>
                </td>

                <td class="">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_3_3" title=
                    "Wednesday, February 19, 2014">
                        19
                    </div>
                </td>

                <td class="">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_3_4" title=
                    "Thursday, February 20, 2014">
                        20
                    </div>
                </td>

                <td class="">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_3_5" title=
                    "Friday, February 21, 2014">
                        21
                    </div>
                </td>

                <td class="">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_3_6" title=
                    "Saturday, February 22, 2014">
                        22
                    </div>
                </td>
            </tr>

            <tr>
                <td class="">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_4_0" title=
                    "Sunday, February 23, 2014">
                        23
                    </div>
                </td>

                <td class="">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_4_1" title=
                    "Monday, February 24, 2014">
                        24
                    </div>
                </td>

                <td class="">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_4_2" title=
                    "Tuesday, February 25, 2014">
                        25
                    </div>
                </td>

                <td class="">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_4_3" title=
                    "Wednesday, February 26, 2014">
                        26
                    </div>
                </td>

                <td class="">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_4_4" title=
                    "Thursday, February 27, 2014">
                        27
                    </div>
                </td>

                <td class="">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_4_5" title=
                    "Friday, February 28, 2014">
                        28
                    </div>
                </td>

                <td class="ajax__calendar_other">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_4_6" title=
                    "Saturday, March 01, 2014">
                        1
                    </div>
                </td>
            </tr>

            <tr>
                <td class="ajax__calendar_other">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_5_0" title=
                    "Sunday, March 02, 2014">
                        2
                    </div>
                </td>

                <td class="ajax__calendar_other">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_5_1" title=
                    "Monday, March 03, 2014">
                        3
                    </div>
                </td>

                <td class="ajax__calendar_other">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_5_2" title=
                    "Tuesday, March 04, 2014">
                        4
                    </div>
                </td>

                <td class="ajax__calendar_other">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_5_3" title=
                    "Wednesday, March 05, 2014">
                        5
                    </div>
                </td>

                <td class="ajax__calendar_other">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_5_4" title=
                    "Thursday, March 06, 2014">
                        6
                    </div>
                </td>

                <td class="ajax__calendar_other">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_5_5" title=
                    "Friday, March 07, 2014">
                        7
                    </div>
                </td>

                <td class="ajax__calendar_other">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_5_6" title=
                    "Saturday, March 08, 2014">
                        8
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Answer 1

A quick fix to get it working (if keeping the height at 150px is not as important). After modifying your css I got the following below.

Here's what I changed.

• ajax__calendar_body: Modified height to be 139px
• ajax__calendar_day: Added height of 15px
• ajax__calendar_year: Added height of 40px
• ajax__calendar_month: Added height of 40px

Why change the height of the body to be 139px (default)? Well, it's kinda hard to explain in words but basically if you modify the height to be anything other than 139, you will have issues of seeing other views.

For example, all three views (years, months, days) are on the form but only one is visible at any given moment. The view that is visible will have the top style set to 0px. The other two views are either -139px or 139px. Since you set the height to be 150px, it won't display properly. How do you change this behaviour? No idea, maybe someone can enlighten us.

For your reference the elements in questions are calExtenderEnd_days, calExtenderEnd_months and calExtenderEnd_years.

So what I did instead was modify your css so that the body height stays at 139px. The other styles were changed to reduce the heights so they fit vertically as some of the styles you applied increased the overall height (padding and what not). The day style was changed to 15px (17 default), same with the 40px (44 default) of the year and month. You can play with those values as you need.

Hopefully this is okay with you.

Below are the ones I modified.

    .Calendar .ajax__calendar_body
    {
        width: 175px;
        height: 139px; /* modified */
        position: relative;
    }

    .Calendar .ajax__calendar_day
    {
        font-family: Tahoma, Calibri, sans-serif;
        font-size: 10px;
        text-align: center;
        font-weight: bold;
        text-shadow: 0px 0px 2px #D3D3D3;
        text-align: center !important;
        border: solid 1px #E0E0E0;
        text-transform: uppercase;
        margin: 1px;
        width: 17px !important;
        color: #9F9F9F;
        height: 15px; /* added */
    }

    .Calendar .ajax__calendar_year
    {
        border: solid 1px #E0E0E0;
        font-family: Tahoma, Calibri, sans-serif;
        font-size: 10px;
        text-align: center;
        font-weight: bold;
        text-shadow: 0px 0px 2px #D3D3D3;
        text-align: center !important;
        vertical-align: middle;
        margin: 1px;
        height: 40px; /* added */
    }

    .Calendar .ajax__calendar_month
    {
        border: solid 1px #E0E0E0;
        font-family: Tahoma, Calibri, sans-serif;
        font-size: 10px;
        text-align: center;
        font-weight: bold;
        text-shadow: 0px 0px 2px #D3D3D3;
        text-align: center !important;
        vertical-align: middle;
        margin: 1px;
        height: 40px; /* added */
    }

---

UPDATE

So I took a look at the source code of the calendar behaviour. Now my javascript is not the greatest but looks like the 139px is hard-coded?

You can see the code here and just search for 139: http://ajaxcontroltoolkit.codeplex.com/SourceControl/latest#Client/MicrosoftAjax.Extended/Calendar/CalendarBehavior.pre.js

I noticed these on different lines:

this._height = 139;
$common.setLocation(newElement, { x: 0, y: -this._height });
$common.setLocation(oldElement, { x: 0, y: 0 });
$common.setLocation(newElement, { x: 0, y: 139 });