Hi,
If you want to achieve Calendar animation(fading in/fading out), you can try the below code:
<head runat="server">
<title>Untitled Page</title>
<style type="text/css" >
.ajax__calendar .ajax__calendar_container {padding:4px;position:absolute;cursor:default;width:170px;font-size:11px;text-align:center;font-family:tahoma,verdana,helvetica;FILTER: alpha(opacity=0);}
.ajax__calendar .ajax__calendar_body {height:139px;width:170px;position:relative;overflow:hidden;margin:auto;}
.ajax__calendar .ajax__calendar_days, .ajax__calendar_months, .ajax__calendar_years {top:0px;left:0px;height:139px;width:170px;position:absolute;text-align:center;margin:auto;}
.ajax__calendar .ajax__calendar_container TABLE {font-size:11px;}
.ajax__calendar .ajax__calendar_header {height:20px;width:100%;}
.ajax__calendar .ajax__calendar_prev {cursor:pointer;width:15px;height:15px;float:left;background-repeat:no-repeat;background-position:50% 50%;background-image:url( images/arrow-left.gif");}
.ajax__calendar .ajax__calendar_next {cursor:pointer;width:15px;height:15px;float:right;background-repeat:no-repeat;background-position:50% 50%;background-image:url(images/arrow-right.gif");}
.ajax__calendar .ajax__calendar_title {cursor:pointer;font-weight:bold;}
.ajax__calendar .ajax__calendar_footer {height:15px;}
.ajax__calendar .ajax__calendar_today {cursor:pointer;padding-top:3px;}
.ajax__calendar .ajax__calendar_dayname {height:17px;width:17px;text-align:right;padding:0 2px;}
.ajax__calendar .ajax__calendar_day {height:17px;width:18px;text-align:right;padding:0 2px;cursor:pointer;}
.ajax__calendar .ajax__calendar_month {height:44px;width:40px;text-align:center;cursor:pointer;overflow:hidden;}
.ajax__calendar .ajax__calendar_year {height:44px;width:40px;text-align:center;cursor:pointer;overflow:hidden;}
.ajax__calendar .ajax__calendar_container {border:1px solid #646464;background-color:#ffffff;color:#000000;}
.ajax__calendar .ajax__calendar_footer {border-top:1px solid #f5f5f5;}
.ajax__calendar .ajax__calendar_dayname {border-bottom:1px solid #f5f5f5;}
.ajax__calendar .ajax__calendar_day {border:1px solid #ffffff;}
.ajax__calendar .ajax__calendar_month {border:1px solid #ffffff;}
.ajax__calendar .ajax__calendar_year {border:1px solid #ffffff;}
.ajax__calendar .ajax__calendar_active .ajax__calendar_day {background-color:#edf9ff;border-color:#0066cc;color:#0066cc;}
.ajax__calendar .ajax__calendar_active .ajax__calendar_month {background-color:#edf9ff;border-color:#0066cc;color:#0066cc;}
.ajax__calendar .ajax__calendar_active .ajax__calendar_year {background-color:#edf9ff;border-color:#0066cc;color:#0066cc;}
.ajax__calendar .ajax__calendar_other .ajax__calendar_day {background-color:#ffffff;border-color:#ffffff;color:#646464;}
.ajax__calendar .ajax__calendar_other .ajax__calendar_year {background-color:#ffffff;border-color:#ffffff;color:#646464;}
.ajax__calendar .ajax__calendar_hover .ajax__calendar_day {background-color:#edf9ff;border-color:#daf2fc;color:#0066cc;}
.ajax__calendar .ajax__calendar_hover .ajax__calendar_month {background-color:#edf9ff;border-color:#daf2fc;color:#0066cc;}
.ajax__calendar .ajax__calendar_hover .ajax__calendar_year {background-color:#edf9ff;border-color:#daf2fc;color:#0066cc;}
.ajax__calendar .ajax__calendar_hover .ajax__calendar_title {color:#0066cc;}
.ajax__calendar .ajax__calendar_hover .ajax__calendar_today {color:#0066cc;}
}
</style>
</head>
<script type="text/javascript">
function dropFadeIn(target_controlid)
{
var obj=document.getElementById(target_controlid);
obj.style.display="block";
if(obj.filters.alpha.opacity<100)
{
obj.filters.alpha.opacity += 10;
fadeTimer=setTimeout("dropFadeIn('"+target_controlid+"')",100);
}
else
{
dropShow=true;
clearTimeout(fadeTimer);
}
}
function dropFadeOut(target_controlid)
{
var obj=document.getElementById(target_controlid);
obj.filters.alpha.opacity = 0;
clearTimeout(fadeTimer);
dropShow=false;
obj.style.display="block";
}
function calendarhidden(obj)
{
var calendarBehavior=$find("Calendar1");
var popupdiv=calendarBehavior._popupDiv;
dropFadeOut(popupdiv.id);
}
function calendarshowing(obj)
{
var calendarBehavior=$find("Calendar1");
var popupdiv=calendarBehavior._popupDiv;
dropFadeIn(popupdiv.id);
}
body>
<form id="form1" runat="server">
<div id="div1"></div>
<ajaxToolkit:ToolkitScriptManager runat="Server" EnablePartialRendering="true" ID="ScriptManager1" />
<ajaxToolkit:CalendarExtender ID="calendar1" CssClass="ajax__calendar" runat="Server" BehaviorID="Calendar1" TargetControlID="TextBox1" OnClientShowing="calendarshowing" OnClientHidden="calendarhidden" />
<asp:TextBox ID="TextBox1" runat="server" autocomplete="off" ></asp:TextBox>
<br />
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
</form>
<script type="text/javascript">
</script>
</body>
The main properties of ToolKit controls are listed in sample pages. Many properties are inherited from "WebControl" class. You can see these properties from the below reference:
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.webcontrol_properties(VS.71).aspx