由于最近项目中需要用到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"