Tuesday, June 24, 2008

Custom calendar control with next and prev year button

Hi,
This document contains the Technical detail of custom control with possibility on enhancement in part A and how we can use use it is explained in part B.

functionality :-

Clicking on the calendar control brings the user to today’s date
Clicking on a single forward or backward arrow takes the user forward or backward one month
Clicking on a double forward or backward arrow takes the user forward or backward one year

Limitations :-

1) No designing property for page level programmer .
2)No return value from control.
3) Required more work on designing.

But easily we give property code is commented properly for remove this limitations.

Technical details of control. With commented coding.

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Text.RegularExpressions;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Drawing;
namespace CalenderControl
{

public class CalenderControl : Control, INamingContainer
{
//-//////////////////////////////////////////////////////////////////////
// Control Deising
//-\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\


protected override void Render(HtmlTextWriter writer)
{
/// We can pass color type with property. That give page level programer to ability of desing the
/// control

style.BackColor = Color.LightYellow;



//-//////////////////////////////////////////////////////////////////////
// Previous Month / Year Button
//-\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

#region prevMonth/Year

//-//////////////////////////////////////////////////////////////////////
//-\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\


#region prevYear
writer.EnterStyle(style);
writer.RenderBeginTag(HtmlTextWriterTag.Tr);

/// Render Password Previous year calender
writer.RenderBeginTag(HtmlTextWriterTag.Td);
writer.AddAttribute(HtmlTextWriterAttribute.For, btnPrevYear.ClientID);

writer.RenderEndTag(); // TD

// Render Button previous year
writer.RenderBeginTag(HtmlTextWriterTag.Td);
btnPrevYear.RenderControl(writer);
writer.RenderEndTag(); // TD

writer.RenderEndTag(); // TR

#endregion prevYear

//-//////////////////////////////////////////////////////////////////////
//-\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

#region Space
writer.RenderBeginTag(HtmlTextWriterTag.Tr);

///Render Label for spacing which width space we have to calculae dynamicly
/// for example if use short date value is 9/20/2007 and if dates value is changed
/// to 10/20/2007 means we have to calculate spacing for this date.
writer.RenderBeginTag(HtmlTextWriterTag.Td);
writer.AddAttribute(HtmlTextWriterAttribute.For, lblForSpacingBetweenConrols2.ClientID);
writer.RenderEndTag();
writer.RenderEndTag();
writer.RenderBeginTag(HtmlTextWriterTag.Td);
///Render Label for spacing
lblForSpacingBetweenConrols2.RenderControl(writer);
writer.RenderEndTag();



#endregion Space

//-//////////////////////////////////////////////////////////////////////
//-\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

#region prevMonth
writer.EnterStyle(style);
writer.RenderBeginTag(HtmlTextWriterTag.Tr);

/// Render Previous year calender
writer.RenderBeginTag(HtmlTextWriterTag.Td);

writer.AddAttribute(HtmlTextWriterAttribute.For, btnPrevMonth.ClientID);
writer.RenderEndTag(); // Button Previous year calender
writer.RenderEndTag(); // TD
writer.RenderBeginTag(HtmlTextWriterTag.Td);
btnPrevMonth.RenderControl(writer); /// Render Previous year calender
writer.RenderEndTag(); // TD

// writer.RenderEndTag();

#endregion prevMonth

#endregion prevMonth/Year

//-//////////////////////////////////////////////////////////////////////
// Calenders Date
//-\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

#region lblHiglited date

writer.RenderBeginTag(HtmlTextWriterTag.Tr);

/// Render calander Date lable
writer.RenderBeginTag(HtmlTextWriterTag.Td);
writer.AddAttribute(HtmlTextWriterAttribute.For, lblSelectedDate.ClientID);
writer.RenderEndTag(); // Label
writer.RenderEndTag(); // TD

/// Render calander Date lable
writer.RenderBeginTag(HtmlTextWriterTag.Td);
lblSelectedDate.RenderControl(writer);
writer.RenderEndTag(); // TD

#endregion lblHiglited date


//-//////////////////////////////////////////////////////////////////////
// Next Month / Year Button
//-\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

#region nextMonth/Year

#region nxtMonth

writer.EnterStyle(style);

writer.RenderBeginTag(HtmlTextWriterTag.Tr);

/// Render next month button
writer.RenderBeginTag(HtmlTextWriterTag.Td);
writer.AddAttribute(HtmlTextWriterAttribute.For, lnkBtnNextMonth.ClientID);
writer.RenderEndTag(); // Button
writer.RenderEndTag(); // TD
/// Render next month button
writer.RenderBeginTag(HtmlTextWriterTag.Td);
lnkBtnNextMonth.RenderControl(writer);
writer.RenderEndTag(); // TD

#endregion nxtMonth

#region Space
writer.RenderBeginTag(HtmlTextWriterTag.Tr);

/// Render Label for spacing
writer.RenderBeginTag(HtmlTextWriterTag.Td);
writer.AddAttribute(HtmlTextWriterAttribute.For, lblForSpacingBetweenConrols2.ClientID);
writer.RenderEndTag(); // Label
writer.RenderEndTag(); // TD

/// Render Label for spacing
writer.RenderBeginTag(HtmlTextWriterTag.Td);
lblForSpacingBetweenConrols2.RenderControl(writer);
writer.RenderEndTag(); // TD

#endregion Space

#region nxtYear
writer.RenderBeginTag(HtmlTextWriterTag.Tr);


/// Render next Year button
writer.RenderBeginTag(HtmlTextWriterTag.Td);
writer.AddAttribute(HtmlTextWriterAttribute.For, btnNextYear.ClientID);
writer.RenderEndTag(); // Button
writer.RenderEndTag(); // TD
/// Render next Year button
writer.RenderBeginTag(HtmlTextWriterTag.Td);
btnNextYear.RenderControl(writer);
writer.RenderEndTag(); // TD
#endregion nxtYear

#endregion nextMonth/Year




//-//////////////////////////////////////////////////////////////////////
// Calaender
//-\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

#region calender

/// We can pass color type with different property name like heder color. That give page level programer
/// ability of desing the header with diffenet type color.
///
/// Same we can give different styles to button, lable, calender, heder lable, forecolor, width etc
/// each n every control


style.BackColor = Color.LightSkyBlue;

writer.EnterStyle(style);

writer.RenderBeginTag(HtmlTextWriterTag.Tr);

/// Render calender
writer.RenderBeginTag(HtmlTextWriterTag.Td);

writer.AddAttribute(HtmlTextWriterAttribute.For, zimsCalendar.ClientID);

writer.RenderEndTag(); // Calender
writer.RenderEndTag(); // TD

/// Render calender
writer.RenderBeginTag(HtmlTextWriterTag.Td);
zimsCalendar.RenderControl(writer);
writer.RenderEndTag(); // TD

#endregion calender

}

//-//////////////////////////////////////////////////////////////////////
// Property and Varialbes
//-\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

#region property and variables


bool handled = false;



public event EventHandler NextMonth;
public event EventHandler NextYear;

public event EventHandler PrevMonth;
public event EventHandler PrevYear;

Button btnNextMonth = new Button();
LinkButton lnkBtnNextMonth = new LinkButton();
LinkButton btnNextYear = new LinkButton();
Calendar zimsCalendar = new Calendar();
LinkButton btnPrevMonth = new LinkButton();
LinkButton btnPrevYear = new LinkButton();
Label lblSelectedDate = new Label();

Label lblForSpacingBetweenConrols = new Label();
Label lblForSpacingBetweenConrols2 = new Label();

Style style = new Style();


#endregion property and variables

//-//////////////////////////////////////////////////////////////////////
// Create and Add controls
//-\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

#region Create design view of control

protected override void CreateChildControls()///Called by the ASP.NET page framework to notify server controls
/// that use composition-based implementation to create any child
/// controls they contain in preparation for posting back or
/// rendering
{
#region Add controls for
//---------------------------------------

// Add link button for next month
lnkBtnNextMonth.Text = "]";
lnkBtnNextMonth.CommandName = "NextMonth";
lnkBtnNextMonth.ToolTip = "Next Month";
// lnkBtnNextMonth.BackColor = Color.Maroon;
///We can assigned its color by property which able programmer.
///here we commented this code line.
Controls.Add(lnkBtnNextMonth);



//----------------------------------------
lblForSpacingBetweenConrols2.Text = " ";
lblForSpacingBetweenConrols2.Width = 50;
Controls.Add(lblForSpacingBetweenConrols2);
//---------------------------------------

btnNextYear.Text = "]]";
btnNextYear.ToolTip = "Next Year";
// btnNextYear.BackColor = Color.Maroon;
///We can assigned its color by property which able programmer.
///here we commented this code line.
btnNextYear.CommandName = "NextYear";
Controls.Add(btnNextYear);
//----------------------------------------


lblSelectedDate.Text = "  " + zimsCalendar.TodaysDate.ToShortDateString() + "  ";

Controls.Add(lblSelectedDate);



/*//////////////////////////////////////////////*/



zimsCalendar.ID = "zimsCalendar";
zimsCalendar.ShowTitle = false;
zimsCalendar.TodaysDate = DateTime.Now;
zimsCalendar.TodayDayStyle.BackColor = Color.LightSlateGray;

///We can assigned its color by property which able programmer.

zimsCalendar.ShowNextPrevMonth = false;
Controls.Add(zimsCalendar);








/*\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/

//---------------------------------------

btnPrevMonth.Text = "[";
// btnPrevMonth.BackColor = Color.Maroon;
///We can assigned its color by property which able programmer.
///here we commented this code line.
btnPrevMonth.ToolTip = " Previous Month";
btnPrevMonth.CommandName = "PrevMonth";
Controls.Add(btnPrevMonth);

//----------------------------------------


lblForSpacingBetweenConrols2.Text = " ";
lblForSpacingBetweenConrols2.Width = 50;
lblForSpacingBetweenConrols2.BorderColor = Color.Magenta;
// lblForSpacingBetweenConrols2.BackColor = Color.Maroon;


Controls.Add(lblForSpacingBetweenConrols);

//---------------------------------------

btnPrevYear.Text = "[[";
btnPrevYear.ToolTip = "Previous Year";
// btnPrevYear.BackColor = Color.Maroon;
btnPrevYear.CommandName = "PrevYear";
Controls.Add(btnPrevYear);

//----------------------------------------


#endregion Create design view of control
}

#endregion Create design view of control


//-//////////////////////////////////////////////////////////////////////
// Handling Events
//-\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

#region override BubbleEvent
protected override bool OnBubbleEvent(object Source, EventArgs Sender)///These methods are OnBubbleEvent and
///RaiseBubbleEvent. We will be using the OnBubbleEvent for our event handling.
///So here is the code for the method that we override for usage within our own class.
{
#region virtual bubleEvent


//$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

/// For code optimizing we must have to use case statement

//$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

if (Sender is CommandEventArgs)
{

CommandEventArgs ce = (CommandEventArgs)Sender;

if (ce.CommandName == "NextMonth") /// if we contain two button on composite then we determine to fire it
/// delepending on its command name on button
{

onNextMonth(ce);
handled = true;
}
//-----------------------------------------------------------------

if (ce.CommandName == "NextYear") /// if we contain two button on composite then we determine to fire it
/// delepending on its command name on button
{

onNextYear(ce);
handled = true;
}
//-------------------------------------------------------------------

if (ce.CommandName == "PrevMonth") /// if we contain two button on composite then we determine to fire it
/// delepending on its command name on button
{

onPrevMonth(ce);
handled = true;
}
//--------------------------------------------------------------------

if (ce.CommandName == "PrevYear") /// if we contain two button on composite then we determine to fire it
/// delepending on its command name on button
{

onPrevMonth(ce);
handled = true;
}


}

return handled;

#endregion virtual bubleEvent

}

#endregion override BubbleEvent

//-//////////////////////////////////////////////////////////////////////
// Create Functions for event
//-\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

#region function for bubble Event

protected virtual void onNextMonth(EventArgs Sender)
{
#region onNextMonth
if (NextMonth != null)
{

zimsCalendar.TodaysDate = zimsCalendar.TodaysDate.AddMonths(1);

lblSelectedDate.Text = zimsCalendarTodaysDate();
// lblSelectedDate.BackColor = Color.Maroon;

///We can return the selected To Days date by property


}
#endregion onNextYear
}




protected virtual void onNextYear(EventArgs Sender)
{
#region onNextYear
if (NextYear != null)
{


zimsCalendar.TodaysDate = zimsCalendar.TodaysDate.AddYears(1);
lblSelectedDate.Text = zimsCalendarTodaysDate();
// lblSelectedDate.BackColor = Color.Maroon;

///We can return the selected To Days date by property




}
#endregion onNextYear
}




protected virtual void onPrevMonth(EventArgs Sender)
{
#region onPrevMonth
if (PrevMonth != null)
{


zimsCalendar.TodaysDate = zimsCalendar.TodaysDate.AddMonths(-1);

lblSelectedDate.Text = zimsCalendarTodaysDate(); /
// lblSelectedDate.BackColor = Color.Maroon;

///We can return the selected To Days date by property


}
#endregion onPrevMonth
}



protected virtual void onPrevYear(EventArgs Sender)
{
#region onPrevYear
if (PrevYear != null)
{


zimsCalendar.TodaysDate = zimsCalendar.TodaysDate.AddYears(-1);


lblSelectedDate.Text = zimsCalendarTodaysDate();

///We can return the selected To Days date by property



}
#endregion onPrevYear
}

#endregion function for bubble Event


//-//////////////////////////////////////////////////////////////////////
// Set Date on lable
//-\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

#region Set Date on Lable
/// [summary]
/// Thsi function set Todays date of prev/next month/year.
/// [/summary]
/// [returns] string [/returns]
private string zimsCalendarTodaysDate()
{

return ( "  " + zimsCalendar.TodaysDate.ToShortDateString() + "  ");
}

#endregion Set Date on Lable

}
}

Part B

Before start code on application.
We have to add dll references . Second step is Add control toolbox.
Right click on tool Box -] choose items -] browse and locate custom calender dll.
Drag control on page.

This part contains the details how to use this control.

[cc1:CalenderControl ID="CalenderControl1" OnNextYear="NY" OnNextMonth ="NM" OnPrevMonth ="PM" OnPrevYear = "PY" runat="server"]
[/cc1:CalenderControl]

protected void NY(object sender, EventArgs e)
{
// Here we can get values from cliked event
}



protected void NM(object sender, EventArgs e)
{
// Here we can get values from cliked event

}

protected void PM(object sender, EventArgs e)
{
// Here we can get values from cliked event

}



protected void PY(object sender, EventArgs e)
{
// Here we can get values from cliked event

}
Thanks.

Mahesh K. Sharma

No comments: