DayPilot 学习之旅

由于最近项目中需要用到DayPilot控件，但是之前都是了解，没有深入的学习编写，从网络上找到的资料也很有限，所以想自己从今天开始，写一些学习DayPilot 的心得或者入门教程。

 

从网络上找到的链接

 

DayPilotCalendar：像OutLook一样的 计划任务日程表 控件，for asp.net2.0

http://www.cnblogs.com/dlwang2002/archive/2008/12/15/741208.html

 

控件可以到相应的网站下载：http://www.daypilot.org/

 

加载控件以后，基本动作就省略掉了，直接进入主题

 

数据库或者数据结构准备：

 

 

CREATE TABLE [dbo].[tb_Calendar](
	[pk_ID] [int] IDENTITY(1,1) NOT NULL,--主键 唯一自增
	[startTime] [datetime] NULL,--开始时间
	[endTime] [datetime] NULL,--结束时间
	[Contents] [varchar](1000) NULL,--事件内容
	[createTime] [datetime] NULL,--事件创建时间
	[createman] [varchar](10) NULL,--创建人
	[modifytime] [datetime] NULL,--最近修改时间
	[modifyman] [varchar](10) NULL,--最近修改人
 CONSTRAINT [PK_tb_Calendar] PRIMARY KEY CLUSTERED 
(
	[pk_ID] ASC
)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]
) ON [PRIMARY]

主要字段 ：id,startTime,endTime,Contents 不可少

数据大致如下：

<TestingData>
  <Event Name="Event #1" Start="2010-01-01T12:45:00" End="2010-01-01T13:10:00" Id="1" />
  <Event Name="Event #2" Start="2010-01-01T12:30:00" End="2010-01-01T14:25:00" Id="2" />
  <Event Name="Event #3" Start="2010-01-01T09:30:00" End="2010-01-01T10:00:00" Id="3"/>
  <Event Name="Event #4" Start="2010-01-01T18:35:00" End="2010-01-01T18:40:00" Id="4" />
  <Event Name="Event #5" Start="2010-01-02T12:15:00" End="2010-01-02T14:40:00" Id="5" />
  <Event Name="Event #6" Start="2010-01-03T00:00:00" End="2010-01-03T01:00:00" Id="6" />
</TestingData>

当然可以创建内存数据

摘录实例

  public static DataTable GetData()
    {
        DataTable dt;
        dt = new DataTable();
        dt.Columns.Add("start", typeof(DateTime));
        dt.Columns.Add("end", typeof(DateTime));
        dt.Columns.Add("name", typeof(string));
        dt.Columns.Add("id", typeof(string));
        dt.Columns.Add("column", typeof(string));
        dt.Columns.Add("allday", typeof(bool));
        dt.Columns.Add("color", typeof (string));

        DataRow dr;

        dr = dt.NewRow();
        dr["id"] = 1;
        dr["start"] = Convert.ToDateTime("15:00");
        dr["end"] = Convert.ToDateTime("15:00");
        dr["name"] = "Event 1 (backslash test: TEST\\jname)";
        dr["column"] = "A";
        dt.Rows.Add(dr);
        
        dr = dt.NewRow();
        dr["id"] = 2;
        dr["start"] = Convert.ToDateTime("16:00");
        dr["end"] = Convert.ToDateTime("17:00");
        dr["name"] = "Event 2";
        dr["column"] = "A";
        dr["color"] = "green";
        dt.Rows.Add(dr);

        dr = dt.NewRow();
        dr["id"] = 3;
        dr["start"] = Convert.ToDateTime("14:15").AddDays(1);
        dr["end"] = Convert.ToDateTime("18:45").AddDays(1);
        dr["name"] = "Event 3";
        dr["column"] = "A";
        dt.Rows.Add(dr);

        dr = dt.NewRow();
        dr["id"] = 4;
        dr["start"] = Convert.ToDateTime("16:30");
        dr["end"] = Convert.ToDateTime("17:30");
        dr["name"] = "Sales Dept. Meeting Once Again";
        dr["column"] = "B";
        dt.Rows.Add(dr);

        dr = dt.NewRow();
        dr["id"] = 5;
        dr["start"] = Convert.ToDateTime("8:00");
        dr["end"] = Convert.ToDateTime("9:00");
        dr["name"] = "Event 4";
        dr["column"] = "B";
        dt.Rows.Add(dr);

        dr = dt.NewRow();
        dr["id"] = 6;
        dr["start"] = Convert.ToDateTime("14:00");
        dr["end"] = Convert.ToDateTime("20:00");
        dr["name"] = "Event 6";
        dr["column"] = "C";
        dt.Rows.Add(dr);


        dr = dt.NewRow();
        dr["id"] = 7;
        dr["start"] = Convert.ToDateTime("11:00");
        dr["end"] = Convert.ToDateTime("13:14");
        dr["name"] = "Unicode test: 公曆 (requires Unicode fonts on the client side)";
        dr["color"] = "red";
        dt.Rows.Add(dr);

        dr = dt.NewRow();
        dr["id"] = 8;
        dr["start"] = Convert.ToDateTime("13:14").AddDays(-1);
        dr["end"] = Convert.ToDateTime("14:05").AddDays(-1);
        dr["name"] = "Event 8";
        dr["column"] = "C";
        dt.Rows.Add(dr);  
        
        
        dr = dt.NewRow();
        dr["id"] = 9;
        dr["start"] = Convert.ToDateTime("13:14").AddDays(7);
        dr["end"] = Convert.ToDateTime("14:05").AddDays(7);
        dr["name"] = "Event 9";
        dr["column"] = "C";
        dt.Rows.Add(dr);

        dr = dt.NewRow();
        dr["id"] = 10;
        dr["start"] = Convert.ToDateTime("13:14").AddDays(-7);
        dr["end"] = Convert.ToDateTime("14:05").AddDays(-7);
        dr["name"] = "Event 10";
        dt.Rows.Add(dr);

        dr = dt.NewRow();
        dr["id"] = 11;
        dr["start"] = Convert.ToDateTime("00:00").AddDays(8);
        dr["end"] = Convert.ToDateTime("00:00").AddDays(15);
        dr["name"] = "Event 11";
        dr["column"] = "D";
        dr["allday"] = true;
        dt.Rows.Add(dr);

        dr = dt.NewRow();
        dr["id"] = 12;
        dr["start"] = Convert.ToDateTime("00:00").AddDays(-2);
        dr["end"] = Convert.ToDateTime("00:00").AddDays(-1);
        dr["name"] = "Event 12";
        dr["column"] = "D";
        dr["allday"] = true;
        dt.Rows.Add(dr);

        dr = dt.NewRow();
        dr["id"] = 13;
        dr["start"] = DateTime.Now.AddDays(-7);
        dr["end"] = DateTime.Now.AddDays(14);
        dr["name"] = "Event 13";
        dr["column"] = "B";
        dr["allday"] = true;
        dt.Rows.Add(dr);

        dr = dt.NewRow();
        dr["id"] = 14;
        dr["start"] = Convert.ToDateTime("7:45:00");
        dr["end"] = Convert.ToDateTime("8:30:00");
        dr["name"] = "Event 14";
        dr["column"] = "D";
        dt.Rows.Add(dr);

        dr = dt.NewRow();
        dr["id"] = 15;
        dr["start"] = Convert.ToDateTime("23:30:00");
        dr["end"] = Convert.ToDateTime("00:15:00").AddDays(2);
        dr["name"] = "Event 15";
        dr["column"] = "D";
        dt.Rows.Add(dr);
        
        dr = dt.NewRow();
        dr["id"] = 16;
        dr["start"] = Convert.ToDateTime("8:30:00").AddDays(1);
        dr["end"] = Convert.ToDateTime("9:00:00").AddDays(1);
        dr["name"] = "Event 16";
        dr["column"] = "D";
        dt.Rows.Add(dr);


        dr = dt.NewRow();
        dr["id"] = 17;
        dr["start"] = Convert.ToDateTime("8:00:00").AddDays(1);
        dr["end"] = Convert.ToDateTime("8:00:01").AddDays(1);
        dr["name"] = "Event 17";
        dr["column"] = "D";
        dt.Rows.Add(dr);

        for (int i = 0; i < 10; i++ )
        {
            dr = dt.NewRow();
            dr["id"] = 1000 + i;
            dr["start"] = Convert.ToDateTime("2009-12-30T08:00:00");
            dr["end"] = Convert.ToDateTime("2009-12-30T19:00:00");
            dr["name"] = "Event " + (1000 + i);
            dr["column"] = "D";
            dt.Rows.Add(dr);
            
        }

        dt.PrimaryKey = new DataColumn[] { dt.Columns["id"] };

        return dt;

    }

 

 准备工作完成，大家一试身手

 

新建页面，向页面拖放一个控件DayPilotCalendar，在CodeBehind里面编写数据绑定代码。

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using DayPilot.Web.Ui.Events;
using DayPilot.Web.Ui.Events.Bubble;

namespace WebTest
{
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                
                this.DayPilotCalendar1.DataSource = DataGenerator.GetData();
                DataBind();
                DayPilotCalendar1.UpdateWithMessage("页面加载后重要事情提示！");
            }
        }
    }
}

 页面代码：

 <div>
        <DayPilot:DayPilotCalendar ID="DayPilotCalendar1" runat="server" 
            DataEndField="end" DataStartField="start" DataTextField="name" 
            DataValueField="id" AllDayEnd="DateTime">
        </DayPilot:DayPilotCalendar>
    </div>

 

运行结果：

 

 

大家应该知道效果了吧。

 

接下来将深入学习每一个控件

 

几个重要属性的介绍

ContextMenuID="DayPilotMenu1" //上下文菜单的ID
DataEndField="end" //日期结束的字段
DataStartField="start" //日期时间开始的字段
DataTextField="name"//要在界面上显示的字段
DataValueField="id"//要绑定的值的字段。和DropDownList相像
Days="7" //这个比较重要。是现实几天数据的。这里设置的就是显示一周的数据。
//事件处理的方式
EventClickHandling="Edit"
EventEditHandling="CallBack" 
EventMoveHandling="CallBack"
EventResizeHandling="CallBack"
EventEditHandling=“CallBack”；
EventMoveHandling=“CallBack”；
EventResizeHandling="CallBack"
//事件处理
OnEventClick="DayPilotCalendar1_EventClick"
OnEventEdit="DayPilotCalendar1_EventEdit"
OnEventMenuClick="DayPilotCalendar1_EventMenuClick"
OnEventMove="DayPilotCalendar1_EventMove"
OnEventResize="DayPilotCalendar1_EventResize"
OnTimeRangeSelected="DayPilotCalendar1_TimeRangeSelected"