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.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Calendar</title> </head> <body>
<form id="form1" runat="server"> <div>
<asp:Calendar ID="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
DayNameForm
at các giá trị: FirstLetter, FirstTwoLetters, Full, Short, và Shortest.Cho phép bạn chỉ rõ sự xuất hiện các ngày của tuần, có thể là
NextMonthText Chỉ định Text xuất hiện cho liên kết tháng tiếp theo
NextPrevForma
t đó, nó có thể là các giá trị: CustomText, FullMonth, và ShortMonth.Cho phép bạn chỉ rõ định dạng tháng tiếp theo và tháng trước
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.
SelectMonthTe xt
Cho phép hiển thị Text cho 1 tháng được chọn SelectWeekTex
t Cho phép hiển thị Text cho 1 tuần được chọn
ShowdayHeade r
ShowNextPrev Month
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.
TodaysDate Cho phép bạn chỉ rõ ngày hiện tại mặc định lấy ngày hiện tại
trên Server.
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
<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="Calendarmultiselect.aspx.cs" Inherits="Calendarmultiselect" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server">
<title>Multi select date</title> </head>
<body>
<form id="form1" runat="server"> <div>
<asp:Calendar ID="calendar1" SelectionMode="DayWeekMonth"
runat="server" SelectedDate="2008-04-18" TitleFormat="Month"></asp:Calendar> <br />
<asp:Button ID="btnSubmit" runat="server" OnClick="btnSubmit_Click" Text="Submit"
Width="83px" /><br /> <hr />
</div>
<asp:BulletedList ID="bllresult" runat="server" DataTextFormatString="{0:d}">
</asp:BulletedList> </form>
</body> </html>
Code 3b. Calendarmultiselect.aspx.cs using System;
public partial class Calendarmultiselect : System.Web.UI.Page {
protected void Page_Load(object sender, EventArgs e) {
}
protected void 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:
Code 4. popupdatepicker.aspx <%@ Page Language="C#" %> <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 = "Bạn chọn: " + txtEventDate.Text; }
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server">
<title>Pop-up Date Picker</title> <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-color:white; } .content {
width:400px; background-color:white; margin:auto; padding:10px; } html { background-color:silver; } </style> </head> <body>
<form id="form1" runat="server">
<div class="content">
<asp:Label id="lblEventDate" Text="Nhập ngày:" Runat="server" /> <asp:TextBox id="txtEventDate" Runat="server" />
<img src="img.gif" alt="" onclick="displayCalendar()" /> <div id="datePicker">
<asp:Calendar id="calEventDate"
OnSelectionChanged="calEventDate_SelectionChanged" Runat="server" /> </div>
<br />
<asp:Button id="btnSubmit" Text="Submit" Runat="server" OnClick="btnSubmit_Click" />
<hr />
<asp:Label id="lblResult" runat="server" /> </div>
</form> </body> </html>
