自定义.NET Calarder日历控件2(实现博客园日历)

用过博客园的朋友都知道博客园日历在哪天写过随笔或文章时,在日历上就会显示出日历的超链接。如我在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" %>

<!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>模仿博客园中日历样式</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>

如下图:

posted @ 2012-03-06 18:14  青蘋果  阅读(1721)  评论(2编辑  收藏  举报