• Now Online : 61
  • admin@codemyne.net

Introduction

Calender control in Asp.Net is used to display a single month on a web page. This control allows you to select dates and move to the next or previous month. This Calendar control supports all the System.Globalization.Calendar types in the System.Globalization namespace .Now we see about customization of calender control here.

Calender to display an Occassion below the date:

To display custom text below the date in Calender, Calendar.DayRender Event is used. When the cell is created to display with in calender ,day render event of calender control will be executed. This event will provide access to date and cell. You can control the contents and formatting of a date cell when it is created by providing code in the event handler for the DayRender event

Note: Because the DayRender event is raised while the Calendar control is being rendered, you cannot add a control that can also raise an event, such as LinkButton. You can only add static controls, such as System.Web.UI.LiteralControl, Label, Image, and HyperLink.

The following example reads holiday information from a string array and displays below the dates of a calender.


<%@ Page Language="C#"
     AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Custom Calender by codemyne</title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />
            <asp:LinkButton ID="LinkButton1" runat="server" onclick="LinkButton1_Click">Show Calender</asp:LinkButton><br />
            <asp:Calendar ID="Calendar1" runat="server" ondayrender="Calendar1_DayRender" 
                onselectionchanged="Calendar1_SelectionChanged" Visible="False"></asp:Calendar>
        </div>
       
        </form>
    </body>
    </html>
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    public partial class _Default : System.Web.UI.Page 
    {
        string[,] holidays = new string[12, 31];
        // to store occassions into string array
        protected void Page_Load(object sender, EventArgs e)
        {
            //Storing occassions into string array
            holidays[0, 0] = "New Year";
            holidays[0, 25] = "Republic Day";
            holidays[7, 14] = "Independence Day";
            holidays[9, 16] = "Dussehra";
            holidays[10, 4] = "Diwali";
            holidays[11, 24] = "Christmas";
        }
        protected void Calendar1_DayRender(object sender, DayRenderEventArgs e)
        {
            // It will be executed towards each cell creation for displaying date
            string s = "";
            s = holidays[e.Day.Date.Month - 1, e.Day.Date.Day - 1];
          
            if (s != "")
            { 
                // Date is having particular occassion, the occassion text will be placed in cell using literal control
                e.Cell.Controls.Add(new LiteralControl("<br><font color=red><b>" + s + "</b></font>"));
                // Literal control will display occassion text with Red color with cell below the date
               
            }
        }
            protected void LinkButton1_Click(object sender, EventArgs e)
        {
            Calendar1.Visible = true;
        }
            protected void Calendar1_SelectionChanged(object sender, EventArgs e)
        {
            //This will executed when user selects a Date
            TextBox1.Text = Calendar1.SelectedDate.Date.ToString();
            Calendar1.Visible = false;
        }
    }
    

Happy coding.!

Comments Post a Comment