In this example code we will see how to use a calender control from the ASP.NET tool set to create a fancy box effect. That is, we will make the calender control pop out from no where on the click of the calender icon besides the text box. On selecting of any date the calender will disappear again and the text box will be filled with the selected date.
FancyCalender box

I have tried to comment the code in detail for your better understanding. If you are still finding problems in understanding please feel free to comment. I will keep improving the code as well as the article.

Add a form to the website names CalenderPopUp.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CalenderPopUp.aspx.cs" Inherits="CalenderPopUp" %>

<%@ Import Namespace="System.IO" %>

//
<%– On click of the selected date Showdate JS function will be executed –%>
<%– The division in which the date picker is stored and which we will be manipulating on click of the icon –%>

Now use the F7 key to go to the code behind file and add the following code to the file CalenderPopUp.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class CalenderPopUp : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    //This function will be called when you make a change in the date of calender selection 
    protected void calSelectDate_SelectionChanged(object sender,EventArgs e)
    {
        //When you make a change in the calender selection
        //The calender control disappers and the text box is filled with 
        //current selected Date
        //The to string is used to convert the date object into strin 
        //before storing it into the txtDate TextBox
        txtDate.Text = calSelectDate.SelectedDate.ToString();
    }
}

Please feel free to comment and appreciate the efforts 🙂