This example is for AJAX calendar Extender. You can make a
stylish calendar simply by editing the CSS style. Open a ASP.Net AJAX enable
page in your visual studio and paste the below code to make stylish calendar
<%@ Page Language="C#"
AutoEventWireup="true"
CodeFile="cal_extender.aspx.cs"
Inherits="_Default"
%>
<%@ Register Assembly="AjaxControlToolkit"
Namespace="AjaxControlToolkit"
TagPrefix="cc1"
%>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<style type="text/css">
/*Calendar Control CSS*/
.cal_Theme1 .ajax__calendar_container {
background-color: #DEF1F4;
border:solid 1px #77D5F7;
}
.cal_Theme1 .ajax__calendar_header {
background-color: #ffffff;
margin-bottom: 4px;
}
.cal_Theme1 .ajax__calendar_title,
.cal_Theme1 .ajax__calendar_next,
.cal_Theme1 .ajax__calendar_prev {
color: #004080;
padding-top: 3px;
}
.cal_Theme1 .ajax__calendar_body {
background-color: #ffffff;
border: solid 1px #77D5F7;
}
.cal_Theme1 .ajax__calendar_dayname {
text-align:center;
font-weight:bold;
margin-bottom: 4px;
margin-top: 2px;
color: #004080;
}
.cal_Theme1 .ajax__calendar_day {
color: #004080;
text-align:center;
}
.cal_Theme1 .ajax__calendar_hover .ajax__calendar_day,
.cal_Theme1 .ajax__calendar_hover .ajax__calendar_month,
.cal_Theme1 .ajax__calendar_hover .ajax__calendar_year,
.cal_Theme1 .ajax__calendar_active {
color: #004080;
font-weight: bold;
background-color: #DEF1F4;
}
.cal_Theme1 .ajax__calendar_today {
font-weight:bold;
}
.cal_Theme1 .ajax__calendar_other,
.cal_Theme1 .ajax__calendar_hover .ajax__calendar_today,
.cal_Theme1 .ajax__calendar_hover .ajax__calendar_title {
color: #bbbbbb;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1"
runat="server"
/>
<asp:TextBox SkinID="txtboxCustomizedMSkin" ID="tbEndDate"
runat="server"
CausesValidation="true"
ReadOnly="true"
/>
<cc1:CalendarExtender ID="CalendarExtender1"
runat="server"
TargetControlID="tbEndDate"
CssClass= " cal_Theme1" />
</form>
</body>
</html>
No comments:
Post a Comment