Bạn có thể hiển thị một lịch trên trang web của mình với điều khiển Calendar Ví dụ sau sẽ trình bày một Calendar đơn giản
Code 2.
<%@PageLanguage="C#"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml"> <headrunat="server">
<title>Calendar</title> </head>
<body>
<div>
<asp:CalendarID="Calendar1"runat="server"></asp:Calendar>
</div>
</form> </body> </html>
Kết xuât của nó sẽ như sau:
Các thuộc tính:
Thuộc tính Ý nghĩa
DayNameFormat Cho phép bạn chỉ rõ sự xuất hiện các ngày của tuần, có thể là các giá trị: FirstLetter, FirstTwoLetters, Full, Short, và Shortest.
NextMonthText Chỉ định Text xuất hiện cho liên kết tháng tiếp theo
NextPrevFormat Cho phép bạn chỉ rõ định dạng tháng tiếp theo và tháng trước đó, nó có thể là các giá trị: CustomText, FullMonth, và ShortMonth.
PreMonthText Cho phép bạn chỉ định hiển thị text cho liên kế tháng trước đó SelectedDate Cho phép bạn lấy về hoặc thiết đặt cho ngày lựa chọn
SelectedDates Cho phép bạn gán hoặc lấy về một tập các ngày được lựa chọn
SelectionMode Cho phép chỉ định các ngày được lựa chọn có giá trị như thế nào, nó có thể là các giá trị sau: Day, DayWeek, DayWeekMonth, và none.
SelectMonthText Cho phép hiển thị Text cho 1 tháng được chọn SelectWeekText Cho phép hiển thị Text cho 1 tuần được chọn
ShowdayHeader Cho phép hiển thị tên ngày hay không trên đỉnh của điều khiển.
ShowNextPrevMonth Cho phép hiển thị hay không liên kết đến tháng tiếp theo hoặc tháng trước đó. ShowTitle Cho phép bạn ẩn hay hiện Text trên thanh tiêu đề của điều khiển Calendar. TitleFormat Cho phép định dang text trên thanh tiêu đề, các giá trị của nó có thể là Month và
MonthYear.
Các Sự kiện.
• DayRender: Raised as each day is rendered.
• SelectionChanged: Xảy ra khi một ngày mới, tuần mới hay tháng mới được lựa chọn.
• VisibleMonthChanged: xảy ra khi liên kết đến tháng tiếp theo hoặc tháng trước đó được nhấn. Ví dụ sau sẽ trình bày cách lấy thông tin khi chúng ta lựa chọn nhiều ngày trên đối tượng Calendar.
Code 3a. Calendarmultiselect.aspx
<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Calendarmultiselect.aspx.cs" Inherits="Calendarmultiselect" %>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml"> <headrunat="server">
<title>Multi select date</title> </head>
<body>
<formid="form1"runat="server">
<div>
<asp:CalendarID="calendar1"SelectionMode="DayWeekMonth"runat="server" SelectedDate="2008-04-18"TitleFormat="Month"></asp:Calendar>
<br/>
<asp:ButtonID="btnSubmit"runat="server"OnClick="btnSubmit_Click"Text="Submit"
Width="83px"/><br/>
<hr/>
</div>
<asp:BulletedListID="bllresult"runat="server"DataTextFormatString="{0:d}">
</asp:BulletedList> </form> </body> </html> Code 3b. Calendarmultiselect.aspx.cs using System;
publicpartialclassCalendarmultiselect : System.Web.UI.Page {
protectedvoid Page_Load(object sender, EventArgs e) {
}
protectedvoid btnSubmit_Click(object sender, EventArgs e) {
bllresult.DataSource = calendar1.SelectedDates; bllresult.DataBind();
} }
Kết xuất của ví dụ 3
Tạo một Popup Datepicker
Trong phần này bạn sẽ học cách sử dụng điều khiển Calendar kết hợp với Javacript để tạo một Pop- up Date picker như trong hình dưới đây:
<%@PageLanguage="C#" %>
<scriptrunat="server">
protectedvoid calEventDate_SelectionChanged(object sender, EventArgs e) {
txtEventDate.Text = calEventDate.SelectedDate.ToString("d"); }
protectedvoid btnSubmit_Click(object sender, EventArgs e) {
lblResult.Text = "Bạn chọn: " + txtEventDate.Text; }
</script>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml"> <headrunat="server">
<title>Pop-up Date Picker</title>
<scripttype="text/javascript">
function displayCalendar() {
var datePicker = document.getElementById('datePicker'); datePicker.style.display = 'block'; } </script> <styletype="text/css"> #datePicker { display:none; position:absolute; border:solid2pxblack; background-color:white; } .content { width:400px; background-color:white; margin:auto; padding:10px; } html { background-color:silver; } </style> </head> <body>
<formid="form1"runat="server">
<divclass="content">
<asp:Labelid="lblEventDate"Text="Nhập ngày:"Runat="server"/>
<asp:TextBoxid="txtEventDate"Runat="server"/>
<imgsrc="img.gif"alt=""onclick="displayCalendar()"/>
<divid="datePicker">
<asp:Calendarid="calEventDate"OnSelectionChanged="calEventDate_SelectionChanged" Runat="server"/>
</div>
<br/>
<asp:Buttonid="btnSubmit"Text="Submit"Runat="server"OnClick="btnSubmit_Click"/>
<hr/>
<asp:Labelid="lblResult"runat="server"/> </div>
</form> </body> </html>