Recently, I have been experimenting with animating an ASP calendar using CSS and JQuery. My approach involves hiding the calendar initially with CSS and then fading it in when certain events occur. The calendar is contained within an AJAX update panel. However, I encountered a problem when clicking on a specific day in the calendar. The CSS seems to reset, causing the calendar to hide again, and the JQuery animation doesn't trigger as intended. What I'm trying to achieve is to prevent the calendar from hiding when a day is clicked. Despite trying various methods, I have not been successful so far. Here is a snippet of my code:
JavaScript:
$(document).ready(
function ()
{
...
var invoiceB = $(".invoiceBtnPos");
invoiceB.animate({ left: '92%' }, 1500,
function () {
var UserCalendarC = $("#UserCalendar");
UserCalendarC.fadeIn({ duration: 1500 });
UserCalendarC.classList.remove("DHidden");
});
});
CSS
.DHidden { display:none; }
ASPX
<asp:UpdatePanel ID="UpdateUserPanel" runat="server">
<contenttemplate>
<fieldset class="ZeroDecoration">
...
<asp:Calendar ID="UserCalendar" ClientIDMode="Static" runat="server" CssClass="Calendar DHidden" DayNameFormat="Full" ShowGridLines="True" Width="26%" Height="425px"
OnDayRender="UserCalendar_DayRender" NextMonthText="<img src='../Images/nextimg.png' border='0' width='60%' height='auto'>"
PrevMonthText="<img src='../Images/previmg.png' border='0' width='60%' height='auto'>" OnSelectionChanged="UserCalendar_SelectionChanged" >
<DayHeaderStyle CssClass="DayHeaderStyle" />
<DayStyle CssClass="DayStyle no_underline" ForeColor="White" />
<WeekendDayStyle CssClass="WeekendDayStyle no_underline" />
<NextPrevStyle CssClass="NextPrevStyle" />
<OtherMonthDayStyle CssClass="OtherMonthDayStyle no_underline" />
<SelectedDayStyle CssClass="SelectedDayStyle no_underline" />
<SelectorStyle CssClass="SelectorStyle" />
<TitleStyle CssClass="TitleStyle" />
<TodayDayStyle CssClass="TodayDayStyle no_underline" />
</asp:Calendar>
...
</fieldset>
</contenttemplate>
</asp:UpdatePanel>
CS
protected void UserCalendar_DayRender(object sender, DayRenderEventArgs e)
{
e.Cell.Text += e.Day.DayNumberText;
e.Cell.ToolTip = e.Day.Date.ToShortDateString();
e.Cell.Attributes.Add("OnClick",e.SelectUrl);
}
protected void UserCalendar_SelectionChanged(object sender, EventArgs e)
{
currentDate.Text = UserCalendar.SelectedDate.ToLongDateString();
}
In one of my attempts, I also tried setting the display property in JavaScript at the start, but the resulting behavior was undesirable (showing, then hiding, then fading in)...
window.onload = function ()
{
var calendar = $("#UserCalendar");
calendar.css("display", "none");
}
This is my first time seeking help here, so I apologize for any mistakes I might have made.