#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2012
    Posts
    2
    Rep Power
    0

    How can I customize Calendar control in ASP.NET?


    How can I customize Calendar control in ASP.NET?
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2007
    Location
    Charlotte
    Posts
    412
    Rep Power
    144
    Originally Posted by hireaspdevelope
    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
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2012
    Posts
    8
    Rep Power
    0
    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);
    }
  6. #4
  7. No Profile Picture
    Grumpier old Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jun 2003
    Posts
    14,443
    Rep Power
    4539
    Please use the forum CODE tags when posting code blocks, thank you.
    ======
    Doug G
    ======
    Bartender to Rene Descartes "have another beer?" Descartes: "I think not" and he vanished.
    --Alfred Bester

IMN logo majestic logo threadwatch logo seochat tools logo