Wijmo 日历插件

说明：

　　因为项目（OA）的需要，我负责开发日程的模块，相信大家用过谷歌的日历了吧，是不是觉得挺好用，但又苦于无法实现？

　　这里告诉你一个很好的插件，Wijmo，而里面有一个类似谷歌的日历事件插件，真的很好很强大，注意，我不是托。

　　当时找到这个插件的时候，真心佩服那些牛逼的外国开发员，能做到这么厉害，并且还开源了。

　　因为菜鸟，苦苦做了一个多星期才完成，个中原因能归结为：

1、没有中文的介绍和帮助，百度谷歌就是找不到很好的例子。

2、英文不行，看官网API很吃力，没有认真看官网的Demo。

3、不是很熟悉js。

技术要点：

1、基本的js、jQuery使用

2、正则表达式的使用（确实很好很强大）

3、wijmo 日历事件插件的基本使用

4、JSON的基本使用

 

废话不说，先上几张效果图，还在完善中，希望能帮到有需要的人。

我的Demo 图：

开始上代码，首先这个日历中的数据是要存到本地的，所以要创建数据库。

贴上数据库代码：代码是用SQL 2008的，里面的注释很清楚了，仅供参考。

/*********************************************************

说明：日历事件表：保存日历事件的信息

作者：Frank

2013-6-17 17:34:05

*********************************************************/

USE HFOA
IF EXISTS(SELECT * FROM dbo.sysobjects WHERE id = object_id(N'[dbo].[tsk_calendar_events]') AND OBJECTPROPERTY(id, N'IsUserTable') = 1)
	DROP TABLE [dbo].[tsk_calendar_events]
GO

CREATE TABLE [dbo].[tsk_calendar_events]
(
--除了id不是插件的关键字，所有的都是插件的关键字，都要注意转换，有些不用转，带c开头的都要转，不然插件会显示错误
	id int identity (1,1) NOT NULL,					--日历事件编号
	allday VARCHAR(10) NULL,						--是否为全天事件
	calendar VARCHAR(20) NULL,						--该事件属于哪个日程的，有 My 和 Work
	csubject VARCHAR(100) NULL,						--事件主题,显示时必须转为 subject
	color VARCHAR(20) NULL,							--该事件的重要程度，以颜色来区分
	cdescription varchar(250) NULL,					--日程事件的描述，显示时必须转为 description
	cstart VARCHAR(50) NOT NULL,					--开始时间，页面显示时必须转为 start 格式为 new Date(2013,5,17,6,0)
	cend VARCHAR(50) NOT NULL,						--结束时间，注意，页面显示到页面的时候必须把字段名改为 end ，否则该日历插件会报错 格式为 new Date(2013,5,17,6,0)
	cid	VARCHAR(50) NOT NULL,						--日历插件的 id，页面显示时必须转为 id 
	isNewEvent VARCHAR(10) NULL,					--是否为新事件
	location VARCHAR(100) NULL,						--事件地点
	recurrenceState VARCHAR(20) NULL,				--当有重复事件的时候，该事件为主事件还是派生的 重复事件
	parentRecurrenceId VARCHAR(50) NULL,			--重复事件的主事件 Id	
	
) ON [PRIMARY]

GO


EXEC sys.sp_addextendedproperty @name=N'MS_Description', @value=N'日历事件编号' ,@level0type=N'SCHEMA', @level0name=N'dbo', @level1type=N'TABLE', @level1name=N'tsk_calendar_events', @level2type=N'COLUMN', @level2name=N'id'					
GO
EXEC sys.sp_addextendedproperty @name=N'MS_Description', @value=N'是否为全天事件' ,@level0type=N'SCHEMA', @level0name=N'dbo', @level1type=N'TABLE', @level1name=N'tsk_calendar_events', @level2type=N'COLUMN', @level2name=N'allday'
GO
EXEC sys.sp_addextendedproperty @name=N'MS_Description', @value=N'该事件属于哪个日程的，有 My 和 Work' ,@level0type=N'SCHEMA', @level0name=N'dbo', @level1type=N'TABLE', @level1name=N'tsk_calendar_events', @level2type=N'COLUMN', @level2name=N'calendar'
GO
EXEC sys.sp_addextendedproperty @name=N'MS_Description', @value=N'事件主题,显示时必须转为 subject' ,@level0type=N'SCHEMA', @level0name=N'dbo', @level1type=N'TABLE', @level1name=N'tsk_calendar_events', @level2type=N'COLUMN', @level2name=N'csubject'				
GO
EXEC sys.sp_addextendedproperty @name=N'MS_Description', @value=N'该事件的重要程度，以颜色来区分' ,@level0type=N'SCHEMA', @level0name=N'dbo', @level1type=N'TABLE', @level1name=N'tsk_calendar_events', @level2type=N'COLUMN', @level2name=N'color'			
GO
EXEC sys.sp_addextendedproperty @name=N'MS_Description', @value=N'日程事件的描述，显示时必须转为 description' ,@level0type=N'SCHEMA', @level0name=N'dbo', @level1type=N'TABLE', @level1name=N'tsk_calendar_events', @level2type=N'COLUMN', @level2name=N'cdescription'
GO
EXEC sys.sp_addextendedproperty @name=N'MS_Description', @value=N'开始时间，页面显示时必须转为 start 格式为 new Date(2013,5,17,6,0)' ,@level0type=N'SCHEMA', @level0name=N'dbo', @level1type=N'TABLE', @level1name=N'tsk_calendar_events', @level2type=N'COLUMN', @level2name=N'cstart'
GO
EXEC sys.sp_addextendedproperty @name=N'MS_Description', @value=N'结束时间，注意，页面显示到页面的时候必须把字段名改为 end ，否则该日历插件会报错 格式为 new Date(2013,5,17,6,0)' ,@level0type=N'SC