自定義.NET Calarder日曆控制元件(實現部落格園日曆)
這幾天看了下.net 日曆控制元件,去Google了下出來很多,大家都知道.netframework版本中自帶的日曆控制元件只有日期沒有備註的,比如我在1月1日下面要顯示出‘元旦節’這三個字,那要怎麼做呢?
下面先熟悉下Calarder控制元件的常用屬性:
SelectionMode:是指定是否可選擇天、周、整月,是一個CalendarSelectionMode列舉;
SelectedDate:是得到或設定當前選擇的時間,是一個DateTime結構;
VisibleDate:是得到或設定日曆顯示的日期,是一個DateTime結構;
PrevMonthText:是切換上個月的符號,可以用‘上個月’表示,是string型別;
NextMonthText:是切換下個月的符號,可以用‘下個月’表示,是string型別;
SelectMonthText:是顯示選擇整個月的符號,可以用‘選擇整月’表示,是string型別;
SelectWeekText:是顯示選擇整個周的符號,可用‘選擇’表示,是string型別;
ShowGridLines:是否顯示出網格線,是Boolean型別;
常用事件:
SelectionChanged:當選擇一個日期時觸發;
DayRender:當在載入日曆控制元件時觸發,相當於OnRender事件;
VisibleMonthChanged:只要對月份進行操作都觸發;
下面進入正題,怎麼實現自定義日曆控制元件:
1.在Page_Init方法中例項化個String型二維陣列分別是以月份和天數做長度,再把對應日期的節日寫出來以便後面顯示,如:
private string[][] arr;
protected void Page_Init(object sender, EventArgs e)
{
arr = new string[13][] ;//分別為 月
for (int i = 0; i < 13; i++)
{
arr[i] =new string[32];//為年、月進行賦值
}
arr[1][1] = "元旦節";
arr[2][14] = "情人節";
arr[3][8] = "婦女節";
arr[3][20] = "姐姐的生日";
arr[3][12] = "植樹節";
arr[4][16] = "媽媽的生日";
arr[4][29] = "我的生日";
arr[5][1] = "勞動節";
arr[6][1] = "兒童節";
arr[7][1] = "建黨節";
arr[8][1] = "建軍節";
arr[8][10] = "爸爸的生日";
arr[9][10] = "教師節";
arr[10][1] = "國慶節";
arr[12][24] = "平安夜";
arr[12][25] = "聖誕節";
}
2.主要在DayRender事件進行操作;
protected void Calendar3_DayRender(object sender, DayRenderEventArgs e)
{
CalendarDay day = e.Day;//設定當前日期
TableCell cells = e.Cell;//設定表格
if (day.IsOtherMonth)//如果是其它月的日期就清除
{
cells.Controls.Clear();
}
else
{
try
{
string txt = arr[day.Date.Month][day.Date.Day];//得到完整的月、日與陣列進行匹配
if (!string.IsNullOrEmpty(txt))//判斷當前是否有節日
{
cells.Controls.Add(new LiteralControl(string.Format("<br><font color=red>{0}</font>", txt)));//把這個 紅色的字串 加在顯示的日期後面
}
}
catch (Exception)
{
Response.Write("<font color='red'><h1>頁面錯誤!</h1></font>");
}
}
}
到了這裡就可完成顯示了,但我們想得到部落格園那樣顯示出連結的日曆,比如:今天發了篇部落格,就要把今天的日期高亮顯示並具有超連結,那又該怎麼實現呢?第二篇部落格再講述。
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
用過部落格園的朋友都知道部落格園日曆在哪天寫過隨筆或文章時,在日曆上就會顯示出日曆的超連結。如我在2012-3-6這天寫了新隨筆,那麼在日曆中2012-3-6這一天的日期就會賦於連結,當點選日期時,就會顯示出這天發表的新隨筆,如下圖:
具體的實現思路是:
1.建立資料庫和建立資料表,id( int 主鍵 自增長),Context(next not null),Tile(char(20) not null),CreateTime(dateTime getdate())
2.在建構函式中得到資料表(dateTable)
2.實現日曆的DayRender事件;
3.在事件比較遍歷的日期與資料庫中有日期是否相等,相等就賦上鍊接,否則就正常顯示;
細節描述:
1.資料庫:
2.在建構函式中得到資料表
protected void Page_Load(object sender, EventArgs e)
{
GetDataTable();//得到資料庫表並儲存入一個數據集表中
string date = Request.QueryString["date"]; //得到傳來的引數 引數是第三個步驟傳來的
if (!string.IsNullOrEmpty(date))//引數裡面是否有值
{
string sql = string.Format("SELECT * FROM MyEditorContext where CreateTime= '{0}'",date);
Repeater1.DataSource = DBHelper.Query(sql).Tables[0];
Repeater1.DataBind();
}
}
private void GetDataTable()
{
string sql = "SELECT * FROM MyEditorContext ";
dt = DBHelper.Query(sql).Tables[0];
}
3.實現日曆的DayRender事件和較遍歷的日期與資料庫中有日期是否相等,程式碼不是很難相信大家都看得懂的
protected void Calendar1_DayRender(object sender, DayRenderEventArgs e)
{
CalendarDay day = e.Day;//設定當前日期
TableCell cells = e.Cell;//設定表格
if (day.IsOtherMonth)//如果是當月的其它日就清除當前內容
{
cells.Controls.Clear();
}
else
{
try
{
string txt = arr[day.Date.Month][day.Date.Day];//得到節日
DateTime date = day.Date;
if (!string.IsNullOrEmpty(txt))//判斷當前是否有節日
{
//為日期新增節日
cells.Controls.Add(new LiteralControl("<br>" + txt));
}
string text = ((LiteralControl)cells.Controls[0]).Text;
foreach (DataRow row in dt.Rows)
{
if (date.ToShortDateString().Equals(((DateTime)row["CreateTime"]).ToShortDateString()))//判斷它們的日期是否相等
{
cells.Controls.Clear();
cells.Controls.Add(new LiteralControl(string.Format("<a href='Default.aspx?date={0}' title='{1}' style='font-weight:bold;color:red;'>{2}</a>", row["CreateTime"], row["Title"], text)));//這裡新增一個超連結,並指向本頁,把日期傳入 當滑鼠移上去時顯示出隨筆的標題
}
}
}
catch (Exception)
{
Literal l = new Literal();
l.Text = "頁面錯誤";
cells.Controls.Add(l);
}
}
4.前臺頁面程式碼,說明下這裡用了編輯器CKEditor.NET實現隨筆的編輯,用了.NET Repeater 控制元件實現隨筆的顯示和 Calendar 控制元件實現日曆的顯示,如下s:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication_Calender1._Default" %>
<%@ Register Assembly="CKEditor.NET" Namespace="CKEditor.NET" TagPrefix="editor" %>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>模仿部落格園中日曆樣式</title>
<link href="css/Style.css" rel="stylesheet" type="text/css" />
<script src="ckeditor/ckeditor.js" type="text/javascript"></script>
<script type="text/javascript" src="js/MyJs.js"></script>
</head>
<body>
<form id="form1" runat="server">
<a href="#mydiv" class="shui" >隨筆</a><br />
<hr />
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<table width="75%" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td>
<h2 style="text-align:center;">
<%#DataBinder.Eval(Container.DataItem, "Title")%><!-- 當指定資料來源後 實現資料的繫結 -->
</h2>
</td>
</tr>
<tr>
<td>
<br /><br /><br /><%#DataBinder.Eval(Container.DataItem, "Context")%>
</td>
</tr>
<tr>
<td align="right">
<br /><br /><br /><%#DataBinder.Eval(Container.DataItem, "CreateTime")%>
</td>
</tr>
</table>
</ItemTemplate>
</asp:Repeater>
<div class="calender">
<asp:Calendar ID="Calendar1" runat="server" BackColor="White"
SelectionMode="None"
BorderColor="White" BorderWidth="1px" Font-Names="Verdana" Font-Size="9pt"
ForeColor="Black" Height="190px" NextPrevFormat="FullMonth" Width="95%"
ondayrender="Calendar1_DayRender">
<SelectedDayStyle BackColor="#333399" ForeColor="White" />
<TodayDayStyle BackColor="#CCCCCC" />
<OtherMonthDayStyle ForeColor="#999999" />
<NextPrevStyle Font-Bold="True" Font-Size="8pt" ForeColor="#333333"
VerticalAlign="Bottom" />
<DayHeaderStyle Font-Bold="True" Font-Size="8pt" />
<TitleStyle BackColor="White" BorderColor="Black" BorderWidth="4px"
Font-Bold="True" Font-Size="12pt" ForeColor="#333399" />
</asp:Calendar>
</div>
<br />
<div id="mydiv" class="mydiv" >
<table width="75%" height="538px">
<caption><h3>寫隨筆</h3></caption>
<tr>
<td>
<b>標題:</b><input type="text" runat="server" id="txtTitle" class="txtTitle"/>
</td>
</tr>
<tr>
<td width="75%">
<editor:CKEditorControl ID="editor" runat="server" Height="450px" Width="100%"></editor:CKEditorControl>
<asp:Button ID="BtnSubmit" runat="server" Text="提交" CssClass="btn"
OnClick="BtnSubmit_Click" />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
如下圖: