说明:
因为项目(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