ASP.NET初學筆記:Calendar控件

Calendar控件用來顯示月曆，可以把月曆當作日期選擇器來使用或用來顯示預定事件清單。

1. 選擇多個日期

Calendar控件SelectionMode屬性可以改變Calendar的行為，使你不僅可以選擇日，也可以選擇周或月。下面代碼示範如何聯合SelectionMode和SelectedDates屬性來選擇多個日期。

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

protected void btn_Click(object sender, EventArgs e)

{

BulletedList1.DataSource = Calendar1.SelectedDates;

BulletedList1.DataBind();

}

</script>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>無标題頁</title>

</head>

<body>

<form id="form1" runat="server">

<div>

<asp:Calendar ID="Calendar1" runat="server" SelectionMode="DayWeekMonth"></asp:Calendar><br />

<asp:Button ID="btn" runat="server" Text="Submit" OnClick="btn_Click" /><hr />

<asp:BulletedList ID="BulletedList1" runat="server" DataTextFormatString="{0:d}">

</asp:BulletedList>



</div>

</form>

</body>

</html> 效果：

ASP.NET初學筆記:Calendar控件

2. 建立彈出式日期選擇器

很簡單，看代碼和效果：<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

protected void calEventDate_SelectionChanged(object sender, EventArgs e)

{

txtEventDate.Text = calEventDate.SelectedDate.ToString("d");

}

protected void btnSubmit_Click(object sender, EventArgs e)

{

lblResult.Text = "You picked: " + txtEventDate.Text;

}

</script>

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

<script type="text/javascript">

function displayCalendar()

{

var datePicker=document.getElementById('datePicker');

datePicker.style.display='block';

}

</script>

<style type="text/css">

#datePicker

{

display:none;

position:absolute;

border:solid 2px black;

background:white;

}

</style>

<title>無标題頁</title>

</head>

<body>

<form id="form1" runat="server">

<div>

<asp:Label ID="lblEventDate" runat="server" Text="Label"></asp:Label>

<asp:TextBox ID="txtEventDate" runat="server"></asp:TextBox>

<img src="Calendar.gif" mce_src="Calendar.gif" οnclick="displayCalendar()" />

<div id="datePicker">

<asp:Calendar ID="calEventDate" OnSelectionChanged="calEventDate_SelectionChanged" runat="server" />

</div>

<br />

<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" /><hr />

<asp:Label ID="lblResult" runat="server"></asp:Label>

</div>

</form>

</body>

</html>

ASP.NET初學筆記:Calendar控件

3. 根據資料庫表呈現月曆

我們可以使用Calendar控件在月曆中顯示事件。下面代碼建構了一個簡單的日程應用程式，可以插入、更新和删除月曆條目，第個日程條目都突出顯示。看下面代碼和效果。<%@ Page Language="C#" ValidateRequest="false" %>

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

DataView schedule = new DataView();

void Page_Load()

{

if (calSchedule.SelectedDate == DateTime.MinValue)

//DateTime.MinValue字段,此常數的值等效于0001年1月1日00:00:00.0000000。

calSchedule.SelectedDate = calSchedule.TodaysDate;

}//判斷目前選擇的日期是否是最小的時期，如果是，則把今天的日期設為被選中日期。

void Page_PreRender()

{

schedule = (DataView)srcCalendar.Select(DataSourceSelectArguments.Empty);

//SqlDataSource.Select方法使用SelectCommand SQL字元串以及SelectParameters集合中的所有參數從基礎資料庫中檢索資料。

//DataSourceSelectArguments提供一種機制，資料綁定控件可使用這種機制向資料源控件請求在檢索資料之後執行與資料相關的操作。

//資料綁定控件使用 DataSourceSelectArguments 類請求資料源控件對結果集執行與資料相關的附加操作（如對資料排序或傳回資料的特定子集）。

//DataSourceSelectArguments.Empty屬性,擷取一個排序表達式設定為 Empty 的 DataSourceSelectArguments 對象。

//如果不使用任何附加參數調用資料源視圖類的Select方法，則可以使用 Empty 屬性。

schedule.Sort = "EntryDate";

}

protected void calSchedule_DayRender(object sender, DayRenderEventArgs e)

{

if (schedule.FindRows(e.Day.Date).Length > 0)

//Day，擷取表示呈現在Calendar控件中的日期的CalendarDay對象。一個CalendarDay類的對象，它表示Calendar控件中的日期。Date擷取由此類的執行個體表示的日期

//可以在DayRender事件處理程式中使用此類以程式設計方式通路在Calendar控件上呈現的日期的屬性。這使您可以确定日的屬性（例如日期是可選的還是標明的）并以程式設計方式控制日的外觀或行為。

/*可以使用 DataView 的 Find 和 FindRows 方法，根據排序關鍵字值搜尋行。

* Find 和 FindRows 方法中的搜尋值是否區分大小寫取決于基礎 DataTable 的 CaseSensitive 屬性。搜尋值必須完全比對現有排序關鍵字值才能傳回結果。

* Find 方法傳回一個整數，該整數表示比對搜尋條件的 DataRowView 的索引。如果多個行比對搜尋條件，則隻傳回第一個比對 DataRowView 的索引。如果未找到比對項，Find 将傳回 -1。

* 若要傳回比對多個行的搜尋結果，可以使用 FindRows 方法。 FindRows 的工作方式與 Find 方法類似，不同的隻是前者傳回引用 DataView 中所有比對行的 DataRowView 數組。如果未找到比對項，DataRowView 數組将為空。

* 若要使用 Find 或 FindRows 方法，必須通過将 ApplyDefaultSort 設定為 true 或通過使用 Sort 屬性來指定排序順序。如果未指定排序順序，則将引發異常。

* Find 和 FindRows 方法将一個值數組用作輸入，該數組的長度與排序順序所包含的列數相比對。在對單個列進行排序的情況下，可以傳遞單個值。對于包含多個列的排序順序，可傳遞一個對象數組。

* 請注意，當對多個列進行排序時，對象數組中的值必須比對在 DataView 的 Sort 屬性中指定的列的順序。

*/

e.Cell.BackColor = System.Drawing.Color.Yellow;

}

</script>

<html xmlns="http://www.w3.org/1999/xhtml" >

<head id="Head1" runat="server">

<title>Calendar Database</title>

</head>

<body>

<form id="form1" runat="server">

<div>

<asp:Calendar

id="calSchedule"

OnDayRender="calSchedule_DayRender"

Runat="server" />

<br />

<asp:FormView

id="frmSchedule"

AllowPaging="True"

DataKeyNames="EntryDate"

DataSourceID="srcSchedule"

Runat="server">

<EmptyDataTemplate>

<asp:LinkButton

id="btnNew"

Text="Add Entry"

CommandName="New"

Runat="server" />

</EmptyDataTemplate>

<ItemTemplate>

<h1><%# Eval("EntryDate", "{0:D}") %></h1>

<%# Eval("Entry") %>

<br /><br />

<asp:LinkButton

Id="btnEdit"

Text="Edit Entry"

CommandName="Edit"

Runat="server" />

<asp:LinkButton

Id="lnkDelete"

Text="Delete Entry"

CommandName="Delete"

OnClientClick="return confirm('Delete entry?');"

Runat="server" />

</ItemTemplate>

<EditItemTemplate>

<asp:Label

id="lblEntry"

Text="Entry:"

AssociatedControlID="txtEntry"

Runat="server" />

<br />

<asp:TextBox

id="txtEntry"

Text='<%#Bind("Entry") %>'

TextMode="MultiLine"

Columns="40"

Rows="8"

Runat="server" />

<br />

<asp:LinkButton

id="btnUpdate"

Text="Update"

CommandName="Update"

Runat="server" />

</EditItemTemplate>

<InsertItemTemplate>

<asp:Label

id="lblEntry"

Text="Entry:"

AssociatedControlID="txtEntry"

Runat="server" />

<br />

<asp:TextBox

id="txtEntry"

Text='<%#Bind("Entry") %>'

TextMode="MultiLine"

Columns="40"

Rows="8"

Runat="server" />

<br />

<asp:Button

id="btnInsert"

Text="Insert"

CommandName="Insert"

Runat="server" />

</InsertItemTemplate>

</asp:FormView>

<asp:SqlDataSource

id="srcSchedule"

ConnectionString="Server=./SQLExpress;Integrated Security=True;

AttachDbFileName=|DataDirectory|ScheduleDB.mdf;User Instance=True"

SelectCommand="SELECT EntryDate,Entry FROM Schedule WHERE EntryDate=@EntryDate"

InsertCommand="INSERT Schedule (EntryDate,Entry) VALUES (@EntryDate,@Entry)"

UpdateCommand="UPDATE Schedule SET Entry=@Entry WHERE EntryDate=@EntryDate"

DELETECommand="DELETE Schedule WHERE EntryDate=@EntryDate"

Runat="server">

<SelectParameters>

<asp:ControlParameter

Name="EntryDate"

ControlID="calSchedule"

PropertyName="SelectedDate" />

</SelectParameters>

<InsertParameters>

<asp:ControlParameter

Name="EntryDate"

ControlID="calSchedule"

PropertyName="SelectedDate" />

</InsertParameters>

</asp:SqlDataSource>

<asp:SqlDataSource

id="srcCalendar"

ConnectionString="Server=./SQLExpress;Integrated Security=True;

AttachDbFileName=|DataDirectory|ScheduleDB.mdf;User Instance=True"

SelectCommand="SELECT EntryDate FROM Schedule"

Runat="server">

</asp:SqlDataSource>

</div>

</form>

</body>

</html>

ASP.NET初學筆記:Calendar控件
上面代碼中的頁面在名為ScheduleDB的SQL Express資料庫中存儲和加載日程條目，Schedule表包含的内容定義如下：

字段名資料類型

EntryDate DateTime

Entry Nvarchar(max)

值得關注的部分是在月曆突出目前日程條目的代碼。Page_PreRender從資料庫中取出所有目前日程條目清單，并用DataView對象表示該清單。Calendar呈現每一天時都會引發DayRender事件，DayRender事件中，如果資料庫中有日程條目和所呈現的日期關聯，則該日使用黃色背景突出顯示。

ASP.NET初學筆記:Calendar控件

繼續閱讀

ASP程式設計中20個非常有用的例子

ASP程式設計中15個非常有用的例子

ASP.NET中存取圖檔到資料庫的示例(C#)

制作一個小小的遊戲

在一個非套接字上嘗試了一個操作

How run Powershell ISE on WIndows Server2008

2010年終總結--技術篇

【JAVASE學習筆記之操作時間跟日期的類】：Date類，DateFormat類，Calendar類Date類：

java 日期總結

ASP.NET大型績效考核評估系統源碼

門戶通專訪月光部落格：第一部落格是如何打造成的

如何成為一名.net 工程師?

apache httpd 配置

IE8 CSS設定DIV居中，添加“margin:0 auto”

Windows下配置Apache的SSL服務

GridView終極用法(一)

字段名	資料類型
EntryDate	DateTime
Entry	Nvarchar(max)