How can I customize Calendar control in ASP.NET?

How can I customize Calendar control in ASP.NET?

1st, you're in the wrong forum. This is the Classic ASP forum.

But adding extra funcitonality to existing controls is doable. All you need to google is something like: "asp.net OVERRIDE calendar control" (without the quotes).
Here's a good overview.
http://www.4guysfromrolla.com/articles/100103-1.aspx

1.First the add an ASP.NET Calendar control with some styles applied.

<asp:Calendar ID="calDate" runat="server"
BackColor="White" BorderColor="#3366CC" CellPadding="1" DayNameFormat="Shortest"
Font-Names="Verdana" Font-Size="8pt" ForeColor="#003399" Height="200px"
Width="250px" ondayrender="calDate_DayRender">
<SelectedDayStyle BackColor="#009999" Font-Bold="True" ForeColor="#CCFF99" />
<TodayDayStyle BackColor="#99CCCC" ForeColor="White" />
<SelectorStyle BackColor="#99CCCC" ForeColor="#336666" />
<WeekendDayStyle BackColor="#CCCCFF" />
<OtherMonthDayStyle ForeColor="#999999" />
<NextPrevStyle Font-Size="8pt" ForeColor="#CCCCFF" />
<DayHeaderStyle BackColor="#99CCCC" ForeColor="#336666" Height="1px" />
<TitleStyle BackColor="#003399" BorderColor="#3366CC"
BorderWidth="1px" Font-Bold="True"
Font-Size="10pt" ForeColor="#CCCCFF" Height="25px" />
</asp:Calendar>


2.Add dropdown lists for month and year lists.

For month dropdown, hardcode the data in the Design page only; for year dropdown, bind the data in the code-behind.


<aspropDownList ID="Ddyear" runat="server" AutoPostBack="True"
onselectedindexchanged="DdyearSelectedIndexChanged">
</aspropDownList>
<aspropDownList ID="Ddmonth" runat="server" AutoPostBack="True"
onselectedindexchanged="DdmonthSelectedIndexChanged">
<asp:ListItem Value="00">*Month*</asp:ListItem>
<asp:ListItem Value="01">Jan</asp:ListItem>
<asp:ListItem Value="02">Feb</asp:ListItem>
<asp:ListItem Value="03">March</asp:ListItem>
<asp:ListItem Value="04">april</asp:ListItem>
<asp:ListItem Value="05">May</asp:ListItem>
<asp:ListItem Value="06">June</asp:ListItem>
<asp:ListItem Value="07">July</asp:ListItem>
<asp:ListItem Value="08">August</asp:ListItem>
<asp:ListItem Value="09">Sept</asp:ListItem>
<asp:ListItem Value="10">Oct</asp:ListItem>
<asp:ListItem Value="11">Nov</asp:ListItem>
<asp:ListItem Value="12">Dec</asp:ListItem>
</aspropDownList>


3.For year dropdown, data bind on the page load event:
Collapse | Copy Code

protected void Page_Load(object sender, EventArgs e)
{
if (IsPostBack) return;
else
{
var al = new ArrayList();
al.Add("*Year*");
for (var i = 1900; i <=2011; i++)
{
al.Add(i);
}
Ddyear.DataSource = al;
Ddyear.DataBind();
}
}

4.These dropdown lists will be added to the calendar header by overriding the Render method. Previous month navigation icon (i.e., ‘<’ on the left side of the calendar header) is replaced by the month dropdownlist. Next, the month navigation icon (i.e., ‘>’ on the right side of the calendar header) is replaced by the year dropdownlist. In the middle of the calendar header, the selected month name and year will be displayed (e.g.: March 1989).
Collapse | Copy Code

#region Regular expressions
private static Regex regPrevMonth = new Regex(
@"(?<PrevMonth><a.*?><</a>)",
RegexOptions.IgnoreCase
| RegexOptions.Singleline
| RegexOptions.CultureInvariant
| RegexOptions.IgnorePatternWhitespace
| RegexOptions.Compiled
);

private static Regex regNextMonth = new Regex(
@"(?<NextMonth><a.*?>></a>)",
RegexOptions.IgnoreCase
| RegexOptions.Singleline
| RegexOptions.CultureInvariant
| RegexOptions.IgnorePatternWhitespace
| RegexOptions.Compiled
);
#endregion

protected override void Render(HtmlTextWriter writer)
{
// turn user control to html code
string output = CalControl1.RenderToString(calDate);

MatchEvaluator mevm = new MatchEvaluator(AppendMonth);
output = regPrevMonth.Replace(output, mevm);

MatchEvaluator mevb = new MatchEvaluator(AppendYear);
output = regNextMonth.Replace(output, mevb);
// output the modified code
writer.Write(output);
}

public static string RenderToString(Control c)
{
bool previousVisibility = c.Visible;
c.Visible = true; // make visible if not

// get html code for control
System.IO.StringWriter sw = new System.IO.StringWriter();
HtmlTextWriter localWriter = new HtmlTextWriter(sw);
c.RenderControl(localWriter);
string output = sw.ToString();

// restore visibility
c.Visible = previousVisibility;

return output;
}

private string AppendMonth(Match m)
{
return CalControl1.RenderToString(Ddmonth) + " " ;
}

private string AppendYear(Match m)
{
return " " + CalControl1.RenderToString(Ddyear);
}

5.Initially, the calendar shows the current date, and then it displays whichever date you select.

The code to set the current date to show initially is as below:
Collapse | Copy Code

public DateTime? SelectedDate
{
get
{
// null date stored or not set
if (ViewState["SelectedDate"] == null)
{
return null;
}
return (DateTime)ViewState["SelectedDate"];
}
set
{
ViewState["SelectedDate"] = value;
if (value != null)
{
calDate.SelectedDate = (DateTime)value;
calDate.VisibleDate = (DateTime)value;
}
else
{
calDate.SelectedDate = new DateTime(0);
calDate.VisibleDate = DateTime.Now.Date;
}
}
}

6.Finally, the event handler code for DayRender, DdmonthSelectedIndexChanged, and DdyearSelectedIndexChanged are as follows:
Collapse | Copy Code

protected void calDate_DayRender(object sender, DayRenderEventArgs e)
{
HyperLink hlnk = new HyperLink();
hlnk.Text = ((LiteralControl)e.Cell.Controls[0]).Text;
hlnk.Attributes.Add("href", "javascript:SetDate('" +
e.Day.Date.ToString("dd/MM/yyyy") + "')");
e.Cell.Controls.Clear();
e.Cell.Controls.Add(hlnk);
}

protected void DdyearSelectedIndexChanged(object sender, EventArgs e)
{
var syear = DateTime.Now.Year;
var smonth = DateTime.Now.Month;
if (Ddmonth.SelectedValue != "00")
{
smonth = Convert.ToInt32(Ddmonth.SelectedValue);
}
if (Ddyear.SelectedValue!="*Year*")
{
syear = Convert.ToInt32(Ddyear.SelectedValue);
}
var date = smonth + "/" + DateTime.Now.Day + "/" +syear;
var dateTime = Convert.ToDateTime(date);
calDate.VisibleDate = dateTime;
}

protected void DdmonthSelectedIndexChanged(object sender, EventArgs e)
{
var smonth = DateTime.Now.Month;
var year = DateTime.Now.Year;
if (Ddyear.SelectedValue != "*Year*")
{
year = Convert.ToInt32(Ddyear.SelectedValue);
}
if (Ddmonth.SelectedValue != "00")
{
smonth = Convert.ToInt32(Ddmonth.SelectedValue);
}
var sdate = smonth + "/" + DateTime.Now.Day + "/" + year;
calDate.VisibleDate = Convert.ToDateTime(sdate);
}

Please use the forum CODE tags when posting code blocks, thank you.

Hello,

Thanks you have shared good source for calendar control.