Ajax calendar extender not showing all days

Question

1.00/5 (1 vote)

See more:

i am using ajaxToolkit:CalendarExtender in my appliction. now the problem is that it is not showing all the dates,dates after 20 is not visible. i don't know what is the problem,is any css problem or something else.

kindly help me to overcome from this problem. thanks in advance. my html code is

ASP.NET

<body>
<form id="form1" runat="server">
    <ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1"  runat="server"></ajaxToolkit:ToolkitScriptManager>
    <div>
        <span style="font-family: Segoe UI Light; font-size: 26pt;">Consolidated Trial Balance</span>
        <div class="body">
            <div>
                <ul style="list-style: none;">
                    <li>
                        <div class="col1">
                            <span>From Date</span>
                        </div>
                    </li>
                    <li>
                        <div class="col2">
                            <asp:TextBox ID="txtFromDate" runat="server" Width="130"></asp:TextBox>
<asp:ImageButton ID="imgbtnFromDate" runat="server" Height="25" Width="25" ImageUrl="~/images/Calendar_scheduleHS.png" Style="position: relative; left: 10px; bottom: -8px;" />
                            <ajaxToolkit:CalendarExtender ID="CalendarExtender1"
                                PopupButtonID="imgbtnFromDate"
                                TargetControlID="txtFromDate"
                                Format="dd/MM/yyyy"
                                 runat="server"
                                CssClass="calender">
                            </ajaxToolkit:CalendarExtender>

                        </div>
                    </li>
<li>

                        <div class="col1">
                            <span>To Date</span>
                        </div>
                    </li>
<li>
                        <asp:TextBox ID="txtToDate" runat="server" Width="130"></asp:TextBox>
 <asp:ImageButton ID="imgbtnToDAte" runat="server" Height="25" Width="25" ImageUrl="~/images/Calendar_scheduleHS.png" Style="position: relative; left: 10px; bottom: -8px;" />
                        <ajaxToolkit:CalendarExtender ID="CalendarExtender2"
                            PopupButtonID="imgbtnToDAte"
                            TargetControlID="txtToDate"
                            Format="dd/MM/yyyy"
                             runat="server"
                            CssClass="calender">
                        </ajaxToolkit:CalendarExtender>

                    </li>
                </ul>

            </div>
 <div style="margin-removed 450px; margin-removed 40px;">
                <ul style="list-style: none;">
                    <li>
                        <asp:Button ID="btnCancel" runat="server" CssClass="button" Text="Cancel" />
                    </li>
                    <li>
                        <asp:Button ID="btnReset" runat="server" CssClass="button" Text="Reset" OnClick="btnReset_Click" />
                    </li>
                    <li>
                        <asp:Button ID="btnGenerate" runat="server" CssClass="button" Text="Generate" OnClientClick="if(!CompareDates()) return false;" OnClick="btnGenerate_Click" />
                    </li>
                </ul>
            </div>
</div>

    </div>
</form>

and my css is like

CSS

body {
       font-family: 'Segoe UI';
       color: #444;
   }

   .body {
       width: auto;
       margin-top: 50px;
   }

   ul li {
       display: inline-block;
       margin-left: 10px;
   }

   .button {
       width: 80px;
       height: 30px;
   }
.col1 {
       width: 80px;
   }

   .col2 {
       width: 300px;
   }

Posted 29-Jan-14 18:35pm

Amit Kumar143

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Aravindba · Answer 1 · 2014-01-29T22:43:00

Solution 1

Hai
Pls try in different browser,may below control hide that dates,try to test in sample page only calender extender.

I have test ur html code in my system,i am get whole date in each month,pls check calender separately and reply .

Posted 29-Jan-14 22:43pm

Aravindba

Updated 29-Jan-14 23:02pm

v2

Amit Kumar143 · Answer 2 · 2014-01-30T02:20:00

i added simple css and its running well.

CSS

.MyCalendar .ajax__calendar_container {
            border: 1px solid #646464;
            background-color: lemonchiffon;
            color: red;
        }

            .MyCalendar .ajax__calendar_container th {
                padding: 0px;
            }

            .MyCalendar .ajax__calendar_container td {
                background-color: lemonchiffon;
                padding: 0px;
            }

        .MyCalendar .ajax__calendar_other .ajax__calendar_day, .MyCalendar .ajax__calendar_other .ajax__calendar_year {
            color: black;
        }

        .MyCalendar .ajax__calendar_hover .ajax__calendar_day, .MyCalendar .ajax__calendar_hover .ajax__calendar_month, .MyCalendar .ajax__calendar_hover .ajax__calendar_year {
            color: black;
        }

        .MyCalendar .ajax__calendar_active .ajax__calendar_day, .MyCalendar .ajax__calendar_active .ajax__calendar_month, .MyCalendar .ajax__calendar_active .ajax__calendar_year {
            color: black;
            font-weight: bold;
        }