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'SCHEMA', @level0name=N'dbo', @level1type=N'TABLE', @level1name=N'tsk_calendar_events', @level2type=N'COLUMN', @level2name=N'cend'
GO
EXEC sys.sp_addextendedproperty @name=N'MS_Description', @value=N'日历插件的 id，页面显示时必须转为 id ' ,@level0type=N'SCHEMA', @level0name=N'dbo', @level1type=N'TABLE', @level1name=N'tsk_calendar_events', @level2type=N'COLUMN', @level2name=N'cid'
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'isNewEvent'
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'location'
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'recurrenceState'
GO
EXEC sys.sp_addextendedproperty @name=N'MS_Description', @value=N'重复事件的主事件 Id' ,@level0type=N'SCHEMA', @level0name=N'dbo', @level1type=N'TABLE', @level1name=N'tsk_calendar_events', @level2type=N'COLUMN', @level2name=N'parentRecurrenceId'
GO /********************************************************* 说明：日历事件重复表：保存日历事件重复的信息 作者：Frank 2013-6-17 17:34:05 *********************************************************/ USE HFOA
IF EXISTS(SELECT * FROM dbo.sysobjects WHERE id = object_id(N'[dbo].[tsk_calendar_recu]') AND OBJECTPROPERTY(id, N'IsUserTable') = 1)
DROP TABLE [dbo].[tsk_calendar_recu]
GO CREATE TABLE [dbo].[tsk_calendar_recu]
(
id int identity (1,1) NOT NULL, --重复事件的id
startTime VARCHAR(50) NULL, --开始时间 格式为 Date(2013,5,17,6,0)
endTime VARCHAR(50) NULL, --结束时间 格式为 Date(2013,5,17,6,0)
parentRecurrenceId VARCHAR(50) NULL, --重复事件的主事件 Id
recurrenceType VARCHAR(20) NULL, --事件重复的类型，有每天、每周等
patternStartDate VARCHAR(50) NULL, --主事件的开始时间 格式为 new Date(2013,5,17,6,0)
event_id int NOT NULL, --日历主表主键 Id ) ON [PRIMARY] GO
EXEC sys.sp_addextendedproperty @name=N'MS_Description', @value=N'重复事件的id' ,@level0type=N'SCHEMA', @level0name=N'dbo', @level1type=N'TABLE', @level1name=N'tsk_calendar_recu', @level2type=N'COLUMN', @level2name=N'id'
GO
EXEC sys.sp_addextendedproperty @name=N'MS_Description', @value=N'开始时间 格式为 Wed Jun 19 2013 20:30:00' ,@level0type=N'SCHEMA', @level0name=N'dbo', @level1type=N'TABLE', @level1name=N'tsk_calendar_recu', @level2type=N'COLUMN', @level2name=N'startTime'
GO
EXEC sys.sp_addextendedproperty @name=N'MS_Description', @value=N'结束时间 格式为 Wed Jun 19 2013 20:30:00' ,@level0type=N'SCHEMA', @level0name=N'dbo', @level1type=N'TABLE', @level1name=N'tsk_calendar_recu', @level2type=N'COLUMN', @level2name=N'endTime'
GO
EXEC sys.sp_addextendedproperty @name=N'MS_Description', @value=N'重复事件的主事件 Id' ,@level0type=N'SCHEMA', @level0name=N'dbo', @level1type=N'TABLE', @level1name=N'tsk_calendar_recu', @level2type=N'COLUMN', @level2name=N'parentRecurrenceId'
GO
EXEC sys.sp_addextendedproperty @name=N'MS_Description', @value=N'事件重复的类型，有每天、每周等' ,@level0type=N'SCHEMA', @level0name=N'dbo', @level1type=N'TABLE', @level1name=N'tsk_calendar_recu', @level2type=N'COLUMN', @level2name=N'recurrenceType'
GO
EXEC sys.sp_addextendedproperty @name=N'MS_Description', @value=N'主事件的开始时间 格式为 Wed Jun 19 2013 20:30:00' ,@level0type=N'SCHEMA', @level0name=N'dbo', @level1type=N'TABLE', @level1name=N'tsk_calendar_recu', @level2type=N'COLUMN', @level2name=N'patternStartDate'
GO
EXEC sys.sp_addextendedproperty @name=N'MS_Description', @value=N'日历主表主键 Id' ,@level0type=N'SCHEMA', @level0name=N'dbo', @level1type=N'TABLE', @level1name=N'tsk_calendar_recu', @level2type=N'COLUMN', @level2name=N'event_id'
GO
好了，最重要的数据库咱们已经设计好了，现在就来执行代码实施吧！
注意，涉及到2个表，一个是日历主事件表，一个是用来记录重复事件的表。
代码实施：
页面有2个：
1. tsk_EventsCalendar.aspx
2. tsk_EventsCalendar.aspx.cs
没错，就是用C#来写的，哈哈，被你发现了！不过原理都差不多的，我之前搞SSH，无奈公司不用Java开发，只好学学 ASP.NET 了。
1. tsk_EventsCalendar.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="tsk_EventsCalendar.aspx.cs"
Inherits="Web.General.tsk.tsk_EventsCalendar" %> <!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>
<!-- Theme -->
<link href="../../js/Wijmo/Theme/cobalt/jquery-wijmo.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#eventscalendar
{
width: 750px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<span id="strjson">
<%=GetStringJSON()%>
<!-- style="display: none;" -->
</span>
<div id="eventscalendar">
</div>
</form>
</body>
</html>
<!-- External dependencies -->
<script src="../../js/Wijmo/External/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="../../js/Wijmo/External/jquery-ui-1.10.1.custom.min.js" type="text/javascript"></script>
<script src="../../js/Wijmo/External/globalize.min.js" type="text/javascript"></script>
<!--这个加载太大了，看看不要行不行
<script src="Wijmo/External/globalize.cultures.js" type="text/javascript"></script>-->
<script src="../../js/Wijmo/External/jquery.mousewheel.min.js" type="text/javascript"></script>
<!-- Enable built-in datastorage -->
<script src="../../js/Wijmo/datastorage/amplify.core.min.js" type="text/javascript"></script>
<script src="../../js/Wijmo/datastorage/amplify.request.min.js" type="text/javascript"></script>
<script src="../../js/Wijmo/datastorage/amplify.store.min.js" type="text/javascript"></script>
<!-- Wijmo-Open dependencies -->
<script src="../../js/Wijmo/Open/jquery.wijmo.wijutil.min.js" type="text/javascript"></script>
<link href="../../js/Wijmo/Open/jquery.wijmo.wijutil.css" rel="stylesheet" type="text/css" />
<script src="../../js/Wijmo/Open/jquery.wijmo.widget.min.js" type="text/javascript"></script>
<script src="../../js/Wijmo/Open/jquery.wijmo.wijtouchutil.min.js" type="text/javascript"></script>
<script src="../../js/Wijmo/Open/jquery.wijmo.wijcalendar.min.js" type="text/javascript"></script>
<link href="../../js/Wijmo/Open/jquery.wijmo.wijcalendar.css" rel="stylesheet" type="text/css" />
<script src="../../js/Wijmo/Open/jquery.wijmo.wijdropdown.min.js" type="text/javascript"></script>
<link href="../../js/Wijmo/Open/jquery.wijmo.wijdropdown.css" rel="stylesheet" type="text/css" />
<script src="../../js/Wijmo/Open/jquery.wijmo.wijdialog.min.js" type="text/javascript"></script>
<link href="../../js/Wijmo/Open/jquery.wijmo.wijdialog.css" rel="stylesheet" type="text/css" />
<script src="../../js/Wijmo/Open/jquery.wijmo.wijtextbox.min.js" type="text/javascript"></script>
<link href="../../js/Wijmo/Open/jquery.wijmo.wijtextbox.css" rel="stylesheet" type="text/css" />
<script src="../../js/Wijmo/Open/jquery.wijmo.wijcheckbox.min.js" type="text/javascript"></script>
<link href="../../js/Wijmo/Open/jquery.wijmo.wijcheckbox.css" rel="stylesheet" type="text/css" />
<script src="../../js/Wijmo/Open/jquery.wijmo.wijpopup.min.js" type="text/javascript"></script>
<script src="../../js/Wijmo/Open/jquery.wijmo.wijsuperpanel.min.js" type="text/javascript"></script>
<link href="../../js/Wijmo/Open/jquery.wijmo.wijsuperpanel.css" rel="stylesheet"
type="text/css" />
<!-- Wijmo-Pro dependencies -->
<script src="../../js/Wijmo/Pro/jquery.plugin.wijtextselection.min.js" type="text/javascript"></script>
<script src="../../js/Wijmo/Pro/jquery.wijmo.wijinputcore.min.js" type="text/javascript"></script>
<link href="../../js/Wijmo/Pro/jquery.wijmo.wijinput.css" rel="stylesheet" type="text/css" />
<script src="../../js/Wijmo/Pro/jquery.wijmo.wijinputdate.min.js" type="text/javascript"></script>
<script src="../../js/Wijmo/Pro/jquery.wijmo.wijdatepager.min.js" type="text/javascript"></script>
<link href="../../js/Wijmo/Pro/jquery.wijmo.wijdatepager.css" rel="stylesheet" type="text/css" />
<script src="../../js/Wijmo/Pro/jquery.wijmo.wijevcal.min.js" type="text/javascript"></script>
<link href="../../js/Wijmo/Pro/jquery.wijmo.wijevcal.css" rel="stylesheet" type="text/css" />
<script src="../../js/Wijmo/json.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () { var b = eval($("#strjson").text()); //获取日历插件里的属性
function getData2(obj) {
//取得日历的开始和结束的时间变量传到后台，添加操作
var stime = "new Date(" + obj.start.getFullYear() + "," + obj.start.getMonth() + "," + obj.start.getDate() + "," + obj.start.getHours() + "," + obj.start.getMinutes() + ")";
var etime = "new Date(" + obj.end.getFullYear() + "," + obj.end.getMonth() + "," + obj.end.getDate() + "," + obj.end.getHours() + "," + obj.end.getMinutes() + ")";
//没有重复事件时的属性值
var strGet1 = "&strId=" + obj.id + "&strDes=" + obj.description + "&strEnd=" + etime + "&strLocation=" + obj.location + "&strStart=" + stime + "&strSubject=" + obj.subject + "&strColor=" + obj.color + "&strAllday=" + obj.allday + "&strCalendar=" + obj.calendar + "&strisNewEvent=" + obj.isNewEvent; if (obj.recurrencePattern != null) {
alert(obj.recurrencePattern.endTime + "结束");
var strGet2 = "&strrecurrenceState=" + obj.recurrenceState + "&strendTime=" + obj.recurrencePattern.endTime + "&strpatternStartDate=" + obj.recurrencePattern.patternStartDate + "&strRecurrenceId=" + obj.recurrencePattern.parentRecurrenceId + "&strrecurrenceType=" + obj.recurrencePattern.recurrenceType + "&strstartTime=" + obj.recurrencePattern.startTime;
return strGet2 + strGet1;
} else {
return strGet1;
}
};
$("#eventscalendar").wijevcal({ visibleCalendars: ["My", "Work"],
dataStorage: {
addEvent: function (obj, successCallback, errorCallback) {//添加事件
var strData = getData2(obj);
//如果是重复事件则把重复事件加进来
if (obj.recurrencePattern != null) {
$.post("tsk_EventsCalendar.aspx?dol=addmore" + strData);
}
else {
$.post("tsk_EventsCalendar.aspx?dol=add" + strData);
}
successCallback();
},
updateEvent: function (obj, successCallback, errorCallback) {
var strData = getData2(obj);
$.post("tsk_EventsCalendar.aspx?dol=update" + strData);
successCallback();
},
deleteEvent: function (obj, successCallback, errorCallback) {
//删除操作
$.post("tsk_EventsCalendar.aspx?dol=del" + "&strId=" + obj.id);
successCallback();
},
loadEvents: function (visibleCalendars, successCallback, errorCallback) { successCallback(b); }
}
}); }); </script>
2. tsk_EventsCalendar.aspx.cs
using System;
using System.Collections.Generic;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using DBUtility;
using Tools;
using Entity;
using System.Data;
using Newtonsoft.Json;
using System.Text.RegularExpressions; namespace Web.General.tsk
{
public partial class tsk_EventsCalendar : BLL.BasePage
{
//创建一个日历对象
tsk_calendar_eventsBean entity = new tsk_calendar_eventsBean();
protected int id;
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
string ss = Get<string>("dol");
entity.cid = Get<string>("strId");
entity.cdescription = Get<string>("strDes");
entity.cend = Get<string>("strEnd");
entity.location = Get<string>("strLocation");
entity.cstart = Get<string>("strStart");
entity.csubject = Get<string>("strSubject");
entity.cdescription = Get<string>("strDes");
entity.color = Get<string>("strColor");
entity.allday = Get<string>("strAllday");
entity.calendar = Get<string>("strCalendar");
entity.isNewEvent = Get<string>("strisNewEvent"); if (ss == "add")
{
addEvents();
}
if (ss == "addmore")
{
addEventsMore();
}
if (ss == "del")
{
deleteEvents();
}
if (ss == "update")
{
updateEvents();
}
}
} //添加数据,没有重复的事件
protected void addEvents()
{
Factory<tsk_calendar_eventsBean>.Instance.Insert(entity);
} //添加数据，日历被定为重复的事件
protected void addEventsMore()
{
//该事件的姿态，主 或 从
entity.recurrenceState = Get<string>("strrecurrenceState");
//重复事件的对象
tsk_calendar_recuBean entity2 = new tsk_calendar_recuBean();
entity2.endTime = Get<string>("strendTime");
entity2.patternStartDate = Get<string>("strpatternStartDate");
entity2.parentRecurrenceId = Get<string>("strRecurrenceId");
entity2.recurrenceType = Get<string>("strrecurrenceType");
entity2.startTime = Get<string>("strstartTime");
Factory<tsk_calendar_eventsBean>.Instance.Insert(entity);
//把主表的 id 设置为重复表的 外键 id
entity2.event_id = entity.id;
Factory<tsk_calendar_recuBean>.Instance.Insert(entity2);
} //删除数据
protected void deleteEvents()
{
string strd = Get<string>("strId"); if (strd.Length >= )
{
entity.cid = Get<string>("strId");
entity = Factory<tsk_calendar_eventsBean>.Instance.Select("cid='" + strd + "'");
}
else
{
entity.id = Convert.ToInt32(strd);
}
Factory<tsk_calendar_eventsBean>.Instance.Delete(entity.id);
} //修改数据
protected void updateEvents()
{
string strd = Get<string>("strId"); if (strd.Length >= )
{
entity.cid = Get<string>("strId");
entity = Factory<tsk_calendar_eventsBean>.Instance.Select("cid='" + strd + "'");
}
else
{
entity.id = Convert.ToInt32(strd);
}
Factory<tsk_calendar_eventsBean>.Instance.Update(entity);
} protected string GetStringJSON()
{
int count;
DataTable table = Factory<vw_tsk_calendar_eventsBean>.Instance.SelectDataTable(, , GetSearchWhere() + "order by id desc", out count);
string strJSON = JsonConvert.SerializeObject(table); //先去掉空的重复事件
string strReg = ",\"recurrenceState\":null,\"endTime\":null,\"event_id\":null,\"cuId\":null,\"parentRecurrenceId\":null,\"patternStartDate\":null,\"recurrenceType\":null,\"startTime\":null";
Regex rx = new Regex(strReg);
strJSON = rx.Replace(strJSON, ""); ////去掉关键字前的c 和 时间的引号和 GMT 0800
strReg = "(\\w)(description)|(\\w)(start)|(\\w)(subject)|(\")(\\w)(end)(\")|\"(new [^\"]*)\"| GMT 0800";
rx = new Regex(strReg);
strJSON = rx.Replace(strJSON, @"$2$4$6$9$11"); strReg = "(\"startTime\":\"[^\"]*\")";
rx = new Regex(strReg);
strJSON = rx.Replace(strJSON, "$1}"); //////把重复事件的对象加上去
strReg = "\"endTime";
rx = new Regex(strReg);
strJSON = rx.Replace(strJSON, "\"recurrencePattern\":{\"endTime");
return strJSON;
}
} }
页面代码说明：
1、首先我知道js样式调用那样写是不符合规范的，不建议大家像我这样，我这样写是因为框架（整个ＯＡ）的框架搭建问题，只有这样写才能生效，就整个问题我也纠结了好一会。
2、代码不是很规范，效率有点低，希望各位看官将就着看。
入题：
1、初始化日历控件：
a：引包，注意顺着不能乱（页面加载顺序有关），不然，出事你负责。。。。。。我已经深受其害了。
b：初始化静态的日历控件（不好意思啊，最近在做 ASP.NET ，经常控件控件这样叫的，望大家理解理解。。。)
放置一个div，用来初始化日历的
<div id="eventscalendar"> </div>
用js来添加日历
<script type="text/javascript">
$(document).ready(function () {
$("#eventscalendar").wijevcal({
visibleCalendars: ["My", "Work"],
dataStorage: {
addEvent: function (obj, successCallback, errorCallback) {
successCallback();
},
updateEvent: function (obj, successCallback, errorCallback) {
successCallback();
},
deleteEvent: function (obj, successCallback, errorCallback) {
successCallback();
},
loadEvents: function (visibleCalendars, successCallback, errorCallback) {
successCallback(); }
}
});
});
</script>
好了，一个静态的页面已经弄好了，这里为了大家能看到效果，给大家一个静态数据的 Demo，大家在页面中下载吧。
2、获取数据，并把数据提交到数据库。
封装一个获取数据的方法：
//获取日历插件里的属性
function getData2(obj) {
//取得日历的开始和结束的时间变量传到后台，添加操作
var stime = "new Date(" + obj.start.getFullYear() + "," + obj.start.getMonth() + "," + obj.start.getDate() + "," + obj.start.getHours() + "," + obj.start.getMinutes() + ")";
var etime = "new Date(" + obj.end.getFullYear() + "," + obj.end.getMonth() + "," + obj.end.getDate() + "," + obj.end.getHours() + "," + obj.end.getMinutes() + ")";
//没有重复事件时的属性值
var strGet1 = "&strId=" + obj.id + "&strDes=" + obj.description + "&strEnd=" + etime + "&strLocation=" + obj.location + "&strStart=" + stime + "&strSubject=" + obj.subject + "&strColor=" + obj.color + "&strAllday=" + obj.allday + "&strCalendar=" + obj.calendar + "&strisNewEvent=" + obj.isNewEvent; if (obj.recurrencePattern != null) {
alert(obj.recurrencePattern.endTime + "结束");
var strGet2 = "&strrecurrenceState=" + obj.recurrenceState + "&strendTime=" + obj.recurrencePattern.endTime + "&strpatternStartDate=" + obj.recurrencePattern.patternStartDate + "&strRecurrenceId=" + obj.recurrencePattern.parentRecurrenceId + "&strrecurrenceType=" + obj.recurrencePattern.recurrenceType + "&strstartTime=" + obj.recurrencePattern.startTime;
return strGet2 + strGet1;
} else {
return strGet1;
}
};
到此，能够获取到数据，相信你应该知道怎么做了吧。。。。哈哈我就不多说了，大家看后台代码吧，
不过有些方法你不能直接写的，比如：Factory<tsk_calendar_eventsBean>.Instance.Update(entity);
因为这些是我们框架封装好的方法，^_^，是不是羡慕嫉妒恨？。。。 --！
注：
1、Newtonsoft.Json.Net20.dll 为引用，可以转换 JSON格式。
2、善用正则表达式，提高效率，把数据转为日历所需的格式。
3、注意有了重复事件（数据表2）的处理，这个表是日历主表的附属表，是 obj里的子对象。 obj.recurrencePattern，如果没有创建重复事件，是没有 recurrencePattern的对象的。
4、别把这个东西看太难了，我当时百度谷歌找不到教程，这不，一个星期也研究些皮毛了，大家加油啊！
5、数据库设计，因为这个日历有他的 Id，但是我们可以用自增的Id，只做一些处理就好了。
6、字段设计最好跟日历的属性对应，个别的处理一下，在显示的时候用 正则表达式处理就可以了。
7、学会用火狐调试，断点调试，可以看出有什么对象，有什么属性。
最后几点建议：
1、有官网API，即使是英文的，也尽量去看，因为官网是最全面的，谁叫他是开发者，难道官网会比一个经过自己学习后翻译出来的差吗？
2、多看官网的Demo ，对了 Wijmo 还有很多 jQuery 特效，都不错的。
3、学会用狐火的FireBug，这样才能调试程序，知道有什么对象，有什么属性！
4、多写博客，多与人分享交流，那么这个世界就会更加美好了！
5、代码注意注释和风格，最好一屏能读完，提高可读性，方便维护！
6、多上博客园(没有打广告的嫌疑），真的，即使你不是学习，也能了解到很多东西，最重要的是有很多妹子图 ^.^!
以下附上源代码，大家快来拍砖！。。。
下载地址：http://download.csdn.net/detail/hyd8480188/5614657
要一分，给我挣挣分好吗，没有分了。
如果你也没有分，给我邮箱我给你发。
Wijmo 日历插件的更多相关文章
- 被逼着写的jquery工作日管理日历插件
因为工作原因,在我刚进入新公司之后,立马要求让我做一个jquery的插件demo.我的天,我面试的可是.net工程师啊.虽然以前接触过js,jquery,但也只是接触过一丢丢啊,没办法,只好硬着头皮上 ...
- 日历插件FullCalendar应用：(二)数据增删改
接上一篇 日历插件FullCalendar应用:(一)数据展现. 这一篇主要讲使用fullcalendar插件如何做数据的增删改,用到了art.dialog web对话框组件,上一篇用到的webFor ...
- 一款基于jQuery日历插件的开发过程
这个插件的设置选项,所有样式都设置成自定义,提供回调函数,方便在外部进行扩展 css设置是可变的 也就是说 日历的样式是定制的: /******************************** ...
- 一款简洁大气的jquery日期日历插件
本jquery插件名为manhuaDate,暂时只支持jquery 1.9.0以下版本,比如jquery-1.8.3.min.js 查看效果网址:http://keleyi.com/a/bjad/em ...
- 【UI插件】简单的日历插件（下）—— 学习MVC思想
前言 我们上次写了一个简单的日历插件,但是只是一个半成品,而且做完后发现一些问题,于是我们今天尝试来解决这些问题 PS:距离上次貌似很久了 上次,我们大概遇到哪些问题呢: ① 既然想做一套UI库,那么 ...
- 【UI插件】开发一个简单日历插件（上）
前言 最近开始整理我们的单页应用框架了,虽然可能比不上MVVM模式的开发效率,也可能没有Backbone框架模块清晰,但是好歹也是自己开发出来 而且也用于了这么多频道的东西,如果没有总结,没有整理,没 ...
- Jquery中的日历插件
这个插件很简单:只需要在HTML代码中引入插件如下,CLASS名和click事件函数固定! <!doctype html> <html lang="en"> ...
- 仿iphone日历插件(beta)
前言 小伙伴们好,很久不见了.最近工作进入正常期了,所以慢慢的悠闲的时间久没有了,所以不能每天水一篇了. 最近也在听师傅(http://home.cnblogs.com/u/aaronjs/)的教导开 ...
- js日历插件 中文、英文日历
日历插件 来源网站:http://www.cnblogs.com/yank/archive/2008/08/14/1267746.html 六款英文日历 http://www.bobd.cn/desi ...
随机推荐
- @Index用法——javax.persistence.Index
package com.springup.utiku.model; import java.io.Serializable; import javax.persistence.Entity; impo ...
- win10 64bit 安装scrapy-1.1
0.环境说明 win10 64bit,电脑也是64bit的处理器,电脑装有vs2010 64bit,但是为了保险起见,只试验了32位的安装,等有时间了,再试下64位的安装.如无特殊说明,一切操作都是在 ...
- 看源码之Adapter和AdapterView之间的关系
总述 Android中"列表"的实现其实一个典型的MVC模式,其实中AdapterView相当于是View,负责视图的绘制以及视图的事件响应,Adapter相当于是Controll ...
- hdu1405 第六周J题（质因数分解）
J - 数论,质因数分解 Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u Desc ...
- MVC 用法小语法摘录
1.类排除列
- 多线程 Worker Thread 模式
Worker是“工人”的意思,worker thread pattern中,工人线程(worker thread)会一次抓一件工作来处理,当没有工作可做时,工人线程会停下来等待心得工作过来. Work ...
- ehci符合USB2.0，uhci，ohci，
uhci ohci ehci他们都是主机控制器的规格,OHCI主要为非PC系统上以及带有SiShe ALi芯片组的 PC主板上的USB芯片,UHCI大多为Intel和Via主板上的USB控制器 ...
- POJ1062 昂贵的聘礼(最短路)
题目链接. 分析: 一开始以为简单的DFS,直接做,MLE了. 本体应该用最短路径(Dijkstra算法)做. 此题的关键在于等级限制的处理,采用枚举,即假设酋长等级为5,等级限制为2,那么需要枚举等 ...
- 主席树套树状数组 动态区间第k小
先打上代码以后更新解释 #include <cstdio> #include <iostream> #include <algorithm> #include &l ...
- 【转】byte[]数组比较（内容比较）--不错
原文网址:http://amanda.blog.51cto.com/7238262/1215118 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责 ...