自定义日历控件(Calendar)
2006-09-23 15:22
387 查看
1.先写一个用户控件：
HTML：
<%@ Control Language="c#" AutoEventWireup="false" Codebehind="RhombusCalendar.ascx.cs" Inherits="Rhombus2.RhombusCalendar" TargetSchema="http://schemas.microsoft.com/intellisense/ie5" %>
<asp:Panel id="calendarPanel" Height="176px" Width="192px" runat="server" BackColor="White">
<asp:Calendar id="Calendar1" runat="server" PrevMonthText="<img src='../../image/monthleft.gif' border=0>"
NextMonthText="<img src='../../Image/monthright.gif' border=0>"></asp:Calendar>
</asp:Panel>
<script event="onclick" for="document">
var count = document.all.length;
var i;
for(i=0;i<count;i++)
{
if(document.all(i).tagName == "DIV")
{
var calendarPanelId = document.all(i).id;
if(calendarPanelId.lastIndexOf("_calendarPanel") != -1)
{
document.all(i).style.display="none";
}
}
}
</script>
.CS
namespace Rhombus2
{
using System;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using System.Xml;
/// <summary>
/// Summary description for RhombusCalendar.
/// </summary>
public class RhombusCalendar : System.Web.UI.UserControl
{
protected System.Web.UI.WebControls.Calendar Calendar1;
private static string selectedDate = "";
protected System.Web.UI.WebControls.Panel calendarPanel;
private static string inputDate;
private void Page_Load(object sender, System.EventArgs e)
{
// Put user code to initialize the page here
//if(!IsPostBack)
{
calendarPanel.Visible = false;
}
}
#region Web Form Designer generated code
override protected void OnInit(EventArgs e)
{
//
// CODEGEN: This call is required by the ASP.NET Web Form Designer.
//
InitializeComponent();
base.OnInit(e);
}
/// <summary>
/// Required method for Designer support - do not modify
/// the contents of this method with the code editor.
/// </summary>
private void InitializeComponent()
{
this.Calendar1.VisibleMonthChanged += new System.Web.UI.WebControls.MonthChangedEventHandler(this.Calendar1_VisibleMonthChanged);
this.Calendar1.SelectionChanged += new System.EventHandler(this.Calendar1_SelectionChanged);
this.Load += new System.EventHandler(this.Page_Load);
}
#endregion
private void Calendar1_SelectionChanged(object sender, System.EventArgs e)
{
string dateFormat = "yyyy-M-dd";
if(dateFormat==""||dateFormat==null ) dateFormat="yyyy-M-dd";//use default.
selectedDate = Calendar1.SelectedDate.ToString(dateFormat);
calendarPanel.Visible = false;
TextBox txtBox = (TextBox)this.Parent.FindControl(inputDate);
txtBox.Text = selectedDate;
}
public void SetTextBox(string txtBoxId)
{
inputDate = txtBoxId;
}
private void Calendar1_VisibleMonthChanged(object sender, System.Web.UI.WebControls.MonthChangedEventArgs e)
{
calendarPanel.Visible = true;
}
public bool pVisible
{
get{return calendarPanel.Visible;}
set{calendarPanel.Visible = value;}
}
public string pLayerOrder
{
set{calendarPanel.Style["z-index"] = value;}
}
public string pPosition
{
set{calendarPanel.Style["position"] = value;}
}
public string pTop
{
get{return calendarPanel.Style["top"];}
set{calendarPanel.Style["top"] = value;}
}
public string pLeft
{
get{return calendarPanel.Style["left"];}
set{calendarPanel.Style["left"] = value;}
}
}
}
2.把用户控件插入需要用的页面里面,最好放入TABLE:
HTML:
<%@ Register TagPrefix="uc1" TagName="RhombusCalendar" Src="RhombusCalendar.ascx" %>
<%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="WebApplicationTest.WebForm1" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>WebForm1</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<TABLE id="Table1" style="Z-INDEX: 103; LEFT: 176px; WIDTH: 313px; POSITION: absolute; TOP: 72px; HEIGHT: 88px"
cellSpacing="1" cellPadding="1" width="313" border="1">
<TR>
<TD>
<asp:TextBox id="txt_customerRequestDateFrom" runat="server"></asp:TextBox></TD>
<td>
<asp:Button id="btn_customerRequestDateFrom" runat="server" Text="Button"></asp:Button></td>
</TR>
<TR>
<TD align="right"></TD>
<td>
<uc1:RhombusCalendar id="CalendarCustReqDateFrom" runat="server"></uc1:RhombusCalendar></td>
</TR>
</TABLE>
</form>
</body>
</HTML>
.CS
using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using Rhombus2;
namespace WebApplicationTest
{
///<summary>
/// Summary description for WebForm1.
///</summary>
public class WebForm1 : System.Web.UI.Page
{
protected System.Web.UI.WebControls.TextBox txt_customerRequestDateFrom;
protected RhombusCalendar rhombusCalendar;
protected System.Web.UI.WebControls.Button btn_customerRequestDateFrom;
private static int i = 400;
private void Page_Load(object sender, System.EventArgs e)
{
// Put user code to initialize the page here
}
#region Web Form Designer generated code
override protected void OnInit(EventArgs e)
{
//
// CODEGEN: This call is required by the ASP.NET Web Form Designer.
//
InitializeComponent();
base.OnInit(e);
}
///<summary>
/// Required method for Designer support - do not modify
/// the contents of this method with the code editor.
///</summary>
private void InitializeComponent()
{
this.btn_customerRequestDateFrom.Click += new System.EventHandler(this.btn_customerRequestDateFrom_Click);
this.Load += new System.EventHandler(this.Page_Load);
}
#endregion
private void btn_customerRequestDateFrom_Click(object sender, System.EventArgs e)
{
rhombusCalendar = (RhombusCalendar)this.FindControl("CalendarCustReqDateFrom");
rhombusCalendar.SetTextBox(txt_customerRequestDateFrom.ID);
rhombusCalendar.pPosition = "absolute";
rhombusCalendar.pTop = "javascript:getX(btn_customerRequestDateFrom)";
rhombusCalendar.pLeft = "javascript:getY(btn_customerRequestDateFrom)";
rhombusCalendar.pLayerOrder = "auto";
rhombusCalendar.pVisible = true;
i++;
rhombusCalendar.pLayerOrder = i.ToString();
}
}
}
HTML：
<%@ Control Language="c#" AutoEventWireup="false" Codebehind="RhombusCalendar.ascx.cs" Inherits="Rhombus2.RhombusCalendar" TargetSchema="http://schemas.microsoft.com/intellisense/ie5" %>
<asp:Panel id="calendarPanel" Height="176px" Width="192px" runat="server" BackColor="White">
<asp:Calendar id="Calendar1" runat="server" PrevMonthText="<img src='../../image/monthleft.gif' border=0>"
NextMonthText="<img src='../../Image/monthright.gif' border=0>"></asp:Calendar>
</asp:Panel>
<script event="onclick" for="document">
var count = document.all.length;
var i;
for(i=0;i<count;i++)
{
if(document.all(i).tagName == "DIV")
{
var calendarPanelId = document.all(i).id;
if(calendarPanelId.lastIndexOf("_calendarPanel") != -1)
{
document.all(i).style.display="none";
}
}
}
</script>
.CS
namespace Rhombus2
{
using System;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using System.Xml;
/// <summary>
/// Summary description for RhombusCalendar.
/// </summary>
public class RhombusCalendar : System.Web.UI.UserControl
{
protected System.Web.UI.WebControls.Calendar Calendar1;
private static string selectedDate = "";
protected System.Web.UI.WebControls.Panel calendarPanel;
private static string inputDate;
private void Page_Load(object sender, System.EventArgs e)
{
// Put user code to initialize the page here
//if(!IsPostBack)
{
calendarPanel.Visible = false;
}
}
#region Web Form Designer generated code
override protected void OnInit(EventArgs e)
{
//
// CODEGEN: This call is required by the ASP.NET Web Form Designer.
//
InitializeComponent();
base.OnInit(e);
}
/// <summary>
/// Required method for Designer support - do not modify
/// the contents of this method with the code editor.
/// </summary>
private void InitializeComponent()
{
this.Calendar1.VisibleMonthChanged += new System.Web.UI.WebControls.MonthChangedEventHandler(this.Calendar1_VisibleMonthChanged);
this.Calendar1.SelectionChanged += new System.EventHandler(this.Calendar1_SelectionChanged);
this.Load += new System.EventHandler(this.Page_Load);
}
#endregion
private void Calendar1_SelectionChanged(object sender, System.EventArgs e)
{
string dateFormat = "yyyy-M-dd";
if(dateFormat==""||dateFormat==null ) dateFormat="yyyy-M-dd";//use default.
selectedDate = Calendar1.SelectedDate.ToString(dateFormat);
calendarPanel.Visible = false;
TextBox txtBox = (TextBox)this.Parent.FindControl(inputDate);
txtBox.Text = selectedDate;
}
public void SetTextBox(string txtBoxId)
{
inputDate = txtBoxId;
}
private void Calendar1_VisibleMonthChanged(object sender, System.Web.UI.WebControls.MonthChangedEventArgs e)
{
calendarPanel.Visible = true;
}
public bool pVisible
{
get{return calendarPanel.Visible;}
set{calendarPanel.Visible = value;}
}
public string pLayerOrder
{
set{calendarPanel.Style["z-index"] = value;}
}
public string pPosition
{
set{calendarPanel.Style["position"] = value;}
}
public string pTop
{
get{return calendarPanel.Style["top"];}
set{calendarPanel.Style["top"] = value;}
}
public string pLeft
{
get{return calendarPanel.Style["left"];}
set{calendarPanel.Style["left"] = value;}
}
}
}
2.把用户控件插入需要用的页面里面,最好放入TABLE:
HTML:
<%@ Register TagPrefix="uc1" TagName="RhombusCalendar" Src="RhombusCalendar.ascx" %>
<%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="WebApplicationTest.WebForm1" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>WebForm1</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<TABLE id="Table1" style="Z-INDEX: 103; LEFT: 176px; WIDTH: 313px; POSITION: absolute; TOP: 72px; HEIGHT: 88px"
cellSpacing="1" cellPadding="1" width="313" border="1">
<TR>
<TD>
<asp:TextBox id="txt_customerRequestDateFrom" runat="server"></asp:TextBox></TD>
<td>
<asp:Button id="btn_customerRequestDateFrom" runat="server" Text="Button"></asp:Button></td>
</TR>
<TR>
<TD align="right"></TD>
<td>
<uc1:RhombusCalendar id="CalendarCustReqDateFrom" runat="server"></uc1:RhombusCalendar></td>
</TR>
</TABLE>
</form>
</body>
</HTML>
.CS
using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using Rhombus2;
namespace WebApplicationTest
{
///<summary>
/// Summary description for WebForm1.
///</summary>
public class WebForm1 : System.Web.UI.Page
{
protected System.Web.UI.WebControls.TextBox txt_customerRequestDateFrom;
protected RhombusCalendar rhombusCalendar;
protected System.Web.UI.WebControls.Button btn_customerRequestDateFrom;
private static int i = 400;
private void Page_Load(object sender, System.EventArgs e)
{
// Put user code to initialize the page here
}
#region Web Form Designer generated code
override protected void OnInit(EventArgs e)
{
//
// CODEGEN: This call is required by the ASP.NET Web Form Designer.
//
InitializeComponent();
base.OnInit(e);
}
///<summary>
/// Required method for Designer support - do not modify
/// the contents of this method with the code editor.
///</summary>
private void InitializeComponent()
{
this.btn_customerRequestDateFrom.Click += new System.EventHandler(this.btn_customerRequestDateFrom_Click);
this.Load += new System.EventHandler(this.Page_Load);
}
#endregion
private void btn_customerRequestDateFrom_Click(object sender, System.EventArgs e)
{
rhombusCalendar = (RhombusCalendar)this.FindControl("CalendarCustReqDateFrom");
rhombusCalendar.SetTextBox(txt_customerRequestDateFrom.ID);
rhombusCalendar.pPosition = "absolute";
rhombusCalendar.pTop = "javascript:getX(btn_customerRequestDateFrom)";
rhombusCalendar.pLeft = "javascript:getY(btn_customerRequestDateFrom)";
rhombusCalendar.pLayerOrder = "auto";
rhombusCalendar.pVisible = true;
i++;
rhombusCalendar.pLayerOrder = i.ToString();
}
}
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Calendar 自定义日历控件
- 自定义.NET Calarder日历控件(实现博客园日历)
- 日历控件推介之：Dynarch.com Calendar
- altas(ajax)控件(五)：日历控件Calendar
- #371 – 指定日历控件显示的日期时间（Specifying a Default Date for a Calendar Control to Display）
- 大量JavaScript日历控件（some free Calendar control by JS），转载别人的
- 自定义的日历控件--CKCalendar
- ASP.NET Calendar日历(日期)控件使用方法
- AjaxControlToolKit CalendarExtender(日历扩展控件)的使用方法
- 自定义日历控件CalendarView
- fullcalendar日历控件知识点集合
- Calendar自己编写日历控件 并且能编写自己日程。
- 大量JavaScript日历控件（some free Calendar control by JS）
- FullCalendar日历控件使用小结
- Android 自定义日历控件
- WPF自定义控件与样式(5)-Calendar/DatePicker日期控件自定义样式及扩展(转)
- .net3.5 和vs2008中Ajax控件的使用--Calendar(日历)控件
- fullcalendar日历控件知识点集合
- 高度自定义，灵活配置日历控件