The Calendar Control and the DayRender Event in ASP.Net

原创 2004年10月06日 14:12:00
In this article, we will use the Calendar control and DataGrid controls to display a calendar of events. The calendar will display small icons and highlight each day where an event occurs. When the user selects a date, the grid will show additional details for the events of selected day. A screen shot of the running web form is shown below.


We will first need a source of data. In this example we will use a DataTable, but you should pick what works best for your application. Our web form simulates a database query by populating a DataTable programmatically.

// to simulate a database query
socialEvents = new DataTable();
socialEvents.Columns.Add(new DataColumn("Date", typeof(DateTime)));
socialEvents.Columns.Add(new DataColumn("Description", typeof(string)));
socialEvents.Columns.Add(new DataColumn("Url", typeof(string)));

DataRow row;
row = socialEvents.NewRow();
row["Date"] = DateTime.Now.AddDays(-5);
row["Description"] = "Poker game at Scott's";
row["Url"] = "";
// add more rows… 

Unlike the DataGrid, the Calendar control has no built in ability to data bind, but the control does allow us to modify the format and content rendered by catching the DayRender event.

The DayRender event fires each time the calendar creates a table cell for the calendar table. The event has an argument of type DayRenderEventArgs. The argument has two properties, one property to represent the date for the cell, and one to represent the TableCell control. Let’s take a look at the event handler for the DayRender event.

private void Calendar1_DayRender(object sender, DayRenderEventArgs e)
   DataRow[] rows = socialEvents.Select(
            "Date >= #{0}# AND Date < #{1}#", 

   foreach(DataRow row in rows)
      System.Web.UI.WebControls.Image image;
      image = new System.Web.UI.WebControls.Image();
      image.ImageUrl = "dot.gif";
      image.ToolTip = row["Description"].ToString();
      e.Cell.BackColor = Color.Firebrick;

Our first step is to find out if there are any events for the current date. In the above code we are using the DataTable Select method to find matching records, but again you’ll have to adjust the algorithm to suit your application’s performance and scalability requirements. Depending on the size of the data and the number of users you need to support, the Select method may not be the best fit, but it is easy to use for this example.

We need to build a string for the Select expression that will look like the following.

			"Date >= #8/24/2004# AND Date < #8/25/2004#".

ADO.NET expressions require dates enclosed within # characters. Comparing dates can be a tricky problem, particularly when the underlying type, like the .NET DateTime type, includes time information. To truncate the time, we use the ToShortDateString method of the DateTime class.

Once we have found valid events, the next step is to modify the appearance of the cell containing the Calendar day. We will add a small icon (dot.gif) for each event by creating an Image control and adding the control to the Cell object’s Controls collection. You can only add static controls, like an Image or HyperLink to the cell, nut not dynamic event raising controls like a DropDownList or Button. We also change the background color of the cell to draw more attention to the date.

When a user selects a date in the Calendar by clicking on a day, the Calendar contol will fire the SelectionChanged event. We can catch this event in our code and display more details for the date selected.

private void Calendar1_SelectionChanged(object sender, System.EventArgs e)
   System.Data.DataView view = socialEvents.DefaultView;
   view.RowFilter = String.Format(
                     "Date >= #{0}# AND Date < #{1}#", 
   if(view.Count > 0)
      DataGrid1.Visible = true;
      DataGrid1.DataSource = view;
      DataGrid1.Visible = false;

In the code above, we again build an expression, but this time for the DataView Filter property. By setting the proper filter expression we can see only those rows in the DataTable matching the selected date. Simple binding this new view of the DataTable to the DataGrid will give us all the details of our events. In the ASPX page we set the DataGrid Visible property to false, and override this property in code only if there are events to display. The columns of the grid are defined as follows.

	<asp:BoundColumn DataField="Description" HeaderText="Description" />
	<asp:HyperLinkColumn DataTextField="Url" HeaderText="Link" NavigateUrl="Url" />

The files Socials.aspx and Socials.aspx.cs are available to download. To experiment with these files, create a new web project in Visual Studio. Right click on the project in the Solution Explorer window and select “Add Existing Item”. Browse to the Socials.aspx file to import the form into the project. This code should give you the basics to try your own calendar control experiments.


Calendar控件之DayRender事件    DayRender是Calendar控件的一个相对重要的事件.它可以用来在Calendar控件中所有日期的”长相”.这个事件使用了一个DayRend...
  • St0ne82
  • St0ne82
  • 2004年11月04日 22:27
  • 6700


1.new一个email的时候可以用word来打开,用表格会方便些    Tools->Options->Mail Format    2.发送出去后发现有错,可以recall this me...
  • sui84
  • sui84
  • 2013年04月07日 14:02
  • 583


  • bigstoneasd
  • bigstoneasd
  • 2008年02月01日 09:19
  • 5320 Calendar 控件

Calendar 控件介绍 在浏览器中显示日历   Caption 日历的标题 CaptionAlign 日历标题文本的对齐方式 CellPadding 单元格边框与内容之间的空白,以像素计...
  • caishu1995
  • caishu1995
  • 2016年07月04日 21:51
  • 313

MFC Month Calendar Control 控件使用

在上层软件编程中,往往需要提供一个月历控件让用户选择相应日期或者用此月历控件来强调特定的一天。MFC的 Month Calendar Control 控件自系统升级到 Windows 7 之后,对于日...
  • oHanTanYanYing
  • oHanTanYanYing
  • 2014年06月05日 16:35
  • 2790

MFC控件(11):Month Calendar Control

这个控件跟Date Time Picker控件蛮类似.实际应该是Date Time Picker把它整合进去了,只有当点一下才出来.而 Month control直接显示在页面上.当然了它还有其他一些...
  • weiwenhp
  • weiwenhp
  • 2013年07月22日 11:45
  • 4554

FullCalendar – jQuery Event Calendar in ASP.NET ...
  • geovindu
  • geovindu
  • 2017年04月17日 21:25
  • 265

Event Calendar [ ASP.NET 2.0 / C# ] CalendarDefault.aspx@ Page Language="C#" Auto...
  • study1014
  • study1014
  • 2007年01月04日 15:26
  • 1029


  • yangmingxing980
  • yangmingxing980
  • 2014年02月28日 15:16
  • 1630


Calendar Web控件是日期选择器控件,用来以月历的形式显示日期。 1、在表单上添加一个标签,ID值:LBL_DATE,Text属性为:“请选择日期”,一个文本框,ID值:TXT_DATE, ...
  • passionboyxie
  • passionboyxie
  • 2014年10月25日 16:48
  • 2600
您举报文章:The Calendar Control and the DayRender Event in ASP.Net