Wijmo 日歷插件

本文轉載自查看原文 2013-06-19 22:29 3266 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

  1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="tsk_EventsCalendar.aspx.cs"
  2     Inherits="Web.General.tsk.tsk_EventsCalendar" %>
  3 
  4 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  5 <html xmlns="http://www.w3.org/1999/xhtml">
  6 <head runat="server">
  7     <title>日歷控件</title>
  8     <!-- Theme -->
  9     <link href="../../js/Wijmo/Theme/cobalt/jquery-wijmo.css" rel="stylesheet" type="text/css" />
 10     <style type="text/css">
 11         #eventscalendar
 12         {
 13             width: 750px;
 14         }
 15     </style>
 16 </head>
 17 <body>
 18     <form id="form1" runat="server">
 19     <span id="strjson">
 20         <%=GetStringJSON()%>
 21         <!--  style="display: none;" -->
 22     </span>
 23     <div id="eventscalendar">
 24     </div>
 25     </form>
 26 </body>
 27 </html>
 28 <!-- External dependencies -->
 29 <script src="../../js/Wijmo/External/jquery-1.9.1.min.js" type="text/javascript"></script>
 30 <script src="../../js/Wijmo/External/jquery-ui-1.10.1.custom.min.js" type="text/javascript"></script>
 31 <script src="../../js/Wijmo/External/globalize.min.js" type="text/javascript"></script>
 32 <!--這個加載太大了，看看不要行不行
 33     <script src="Wijmo/External/globalize.cultures.js" type="text/javascript"></script>-->
 34 <script src="../../js/Wijmo/External/jquery.mousewheel.min.js" type="text/javascript"></script>
 35 <!-- Enable built-in datastorage -->
 36 <script src="../../js/Wijmo/datastorage/amplify.core.min.js" type="text/javascript"></script>
 37 <script src="../../js/Wijmo/datastorage/amplify.request.min.js" type="text/javascript"></script>
 38 <script src="../../js/Wijmo/datastorage/amplify.store.min.js" type="text/javascript"></script>
 39 <!-- Wijmo-Open dependencies -->
 40 <script src="../../js/Wijmo/Open/jquery.wijmo.wijutil.min.js" type="text/javascript"></script>
 41 <link href="../../js/Wijmo/Open/jquery.wijmo.wijutil.css" rel="stylesheet" type="text/css" />
 42 <script src="../../js/Wijmo/Open/jquery.wijmo.widget.min.js" type="text/javascript"></script>
 43 <script src="../../js/Wijmo/Open/jquery.wijmo.wijtouchutil.min.js" type="text/javascript"></script>
 44 <script src="../../js/Wijmo/Open/jquery.wijmo.wijcalendar.min.js" type="text/javascript"></script>
 45 <link href="../../js/Wijmo/Open/jquery.wijmo.wijcalendar.css" rel="stylesheet" type="text/css" />
 46 <script src="../../js/Wijmo/Open/jquery.wijmo.wijdropdown.min.js" type="text/javascript"></script>
 47 <link href="../../js/Wijmo/Open/jquery.wijmo.wijdropdown.css" rel="stylesheet" type="text/css" />
 48 <script src="../../js/Wijmo/Open/jquery.wijmo.wijdialog.min.js" type="text/javascript"></script>
 49 <link href="../../js/Wijmo/Open/jquery.wijmo.wijdialog.css" rel="stylesheet" type="text/css" />
 50 <script src="../../js/Wijmo/Open/jquery.wijmo.wijtextbox.min.js" type="text/javascript"></script>
 51 <link href="../../js/Wijmo/Open/jquery.wijmo.wijtextbox.css" rel="stylesheet" type="text/css" />
 52 <script src="../../js/Wijmo/Open/jquery.wijmo.wijcheckbox.min.js" type="text/javascript"></script>
 53 <link href="../../js/Wijmo/Open/jquery.wijmo.wijcheckbox.css" rel="stylesheet" type="text/css" />
 54 <script src="../../js/Wijmo/Open/jquery.wijmo.wijpopup.min.js" type="text/javascript"></script>
 55 <script src="../../js/Wijmo/Open/jquery.wijmo.wijsuperpanel.min.js" type="text/javascript"></script>
 56 <link href="../../js/Wijmo/Open/jquery.wijmo.wijsuperpanel.css" rel="stylesheet"
 57     type="text/css" />
 58 <!-- Wijmo-Pro dependencies -->
 59 <script src="../../js/Wijmo/Pro/jquery.plugin.wijtextselection.min.js" type="text/javascript"></script>
 60 <script src="../../js/Wijmo/Pro/jquery.wijmo.wijinputcore.min.js" type="text/javascript"></script>
 61 <link href="../../js/Wijmo/Pro/jquery.wijmo.wijinput.css" rel="stylesheet" type="text/css" />
 62 <script src="../../js/Wijmo/Pro/jquery.wijmo.wijinputdate.min.js" type="text/javascript"></script>
 63 <script src="../../js/Wijmo/Pro/jquery.wijmo.wijdatepager.min.js" type="text/javascript"></script>
 64 <link href="../../js/Wijmo/Pro/jquery.wijmo.wijdatepager.css" rel="stylesheet" type="text/css" />
 65 <script src="../../js/Wijmo/Pro/jquery.wijmo.wijevcal.min.js" type="text/javascript"></script>
 66 <link href="../../js/Wijmo/Pro/jquery.wijmo.wijevcal.css" rel="stylesheet" type="text/css" />
 67 <script src="../../js/Wijmo/json.js" type="text/javascript"></script>
 68 <script type="text/javascript">
 69     $(document).ready(function () {
 70 
 71         var b = eval($("#strjson").text());
 72 
 73         //獲取日歷插件里的屬性
 74         function getData2(obj) {
 75             //取得日歷的開始和結束的時間變量傳到后台，添加操作            
 76             var stime = "new Date(" + obj.start.getFullYear() + "," + obj.start.getMonth() + "," + obj.start.getDate() + "," + obj.start.getHours() + "," + obj.start.getMinutes() + ")";
 77             var etime = "new Date(" + obj.end.getFullYear() + "," + obj.end.getMonth() + "," + obj.end.getDate() + "," + obj.end.getHours() + "," + obj.end.getMinutes() + ")";
 78             //沒有重復事件時的屬性值 
 79             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;
 80 
 81             if (obj.recurrencePattern != null) {
 82                 alert(obj.recurrencePattern.endTime + "結束");
 83                 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;
 84                 return strGet2 + strGet1;
 85             } else {
 86                 return strGet1;
 87             }
 88         };
 89         $("#eventscalendar").wijevcal({
 90 
 91             visibleCalendars: ["My", "Work"],
 92             dataStorage: {
 93                 addEvent: function (obj, successCallback, errorCallback) {//添加事件
 94                     var strData = getData2(obj);
 95                     //如果是重復事件則把重復事件加進來
 96                     if (obj.recurrencePattern != null) {
 97                         $.post("tsk_EventsCalendar.aspx?dol=addmore" + strData);
 98                     }
 99                     else {
100                         $.post("tsk_EventsCalendar.aspx?dol=add" + strData);
101                     }
102                     successCallback();
103                 },
104                 updateEvent: function (obj, successCallback, errorCallback) {
105                     var strData = getData2(obj);
106                     $.post("tsk_EventsCalendar.aspx?dol=update" + strData);                
107                     successCallback();
108                 },
109                 deleteEvent: function (obj, successCallback, errorCallback) {
110                     //刪除操作
111                     $.post("tsk_EventsCalendar.aspx?dol=del" + "&strId=" + obj.id);
112                     successCallback();
113                 },
114                 loadEvents: function (visibleCalendars, successCallback, errorCallback) {
115 
116 
117                     successCallback(b);
118                 
119                 }
120             }
121         });
122 
123 
124     });
125 
126 
127 </script>

View Code

2. tsk_EventsCalendar.aspx.cs

  1 using System;
  2 using System.Collections.Generic;
  3 using System.Configuration;
  4 using System.Collections;
  5 using System.Web;
  6 using System.Web.Security;
  7 using System.Web.UI;
  8 using System.Web.UI.WebControls;
  9 using System.Web.UI.WebControls.WebParts;
 10 using System.Web.UI.HtmlControls;
 11 using DBUtility;
 12 using Tools;
 13 using Entity;
 14 using System.Data;
 15 using Newtonsoft.Json;
 16 using System.Text.RegularExpressions;
 17 
 18 namespace Web.General.tsk
 19 {
 20     public partial class tsk_EventsCalendar : BLL.BasePage
 21     {
 22         //創建一個日歷對象
 23         tsk_calendar_eventsBean entity = new tsk_calendar_eventsBean();
 24         protected int id;
 25         protected void Page_Load(object sender, EventArgs e)
 26         {
 27             if (!Page.IsPostBack)
 28             {
 29                 string ss = Get<string>("dol");
 30                 entity.cid = Get<string>("strId");
 31                 entity.cdescription = Get<string>("strDes");
 32                 entity.cend = Get<string>("strEnd");
 33                 entity.location = Get<string>("strLocation");
 34                 entity.cstart = Get<string>("strStart");
 35                 entity.csubject = Get<string>("strSubject");
 36                 entity.cdescription = Get<string>("strDes");
 37                 entity.color = Get<string>("strColor");
 38                 entity.allday = Get<string>("strAllday");
 39                 entity.calendar = Get<string>("strCalendar");
 40                 entity.isNewEvent = Get<string>("strisNewEvent");
 41 
 42                 if (ss == "add")
 43                 {
 44                     addEvents();
 45                 }
 46                 if (ss == "addmore")
 47                 {
 48                     addEventsMore();
 49                 }
 50                 if (ss == "del")
 51                 {
 52                     deleteEvents();
 53                 }
 54                 if (ss == "update")
 55                 {
 56                     updateEvents();
 57                 }
 58             }
 59         }
 60 
 61         //添加數據,沒有重復的事件
 62         protected void addEvents()
 63         {
 64             Factory<tsk_calendar_eventsBean>.Instance.Insert(entity);
 65         }
 66 
 67         //添加數據，日歷被定為重復的事件
 68         protected void addEventsMore()
 69         {
 70             //該事件的姿態，主 或 從
 71             entity.recurrenceState = Get<string>("strrecurrenceState");
 72             //重復事件的對象
 73             tsk_calendar_recuBean entity2 = new tsk_calendar_recuBean();
 74             entity2.endTime = Get<string>("strendTime");
 75             entity2.patternStartDate = Get<string>("strpatternStartDate");
 76             entity2.parentRecurrenceId = Get<string>("strRecurrenceId");
 77             entity2.recurrenceType = Get<string>("strrecurrenceType");
 78             entity2.startTime = Get<string>("strstartTime");
 79             Factory<tsk_calendar_eventsBean>.Instance.Insert(entity);
 80             //把主表的 id 設置為重復表的 外鍵 id
 81             entity2.event_id = entity.id;
 82             Factory<tsk_calendar_recuBean>.Instance.Insert(entity2);
 83         }
 84 
 85         //刪除數據
 86         protected void deleteEvents()
 87         {
 88             string strd = Get<string>("strId");
 89 
 90             if (strd.Length >= 35)
 91             {
 92                 entity.cid = Get<string>("strId");
 93                 entity = Factory<tsk_calendar_eventsBean>.Instance.Select("cid='" + strd + "'");
 94             }
 95             else
 96             {
 97                 entity.id = Convert.ToInt32(strd);
 98             }
 99             Factory<tsk_calendar_eventsBean>.Instance.Delete(entity.id);
100         }
101 
102         //修改數據
103         protected void updateEvents()
104         {
105             string strd = Get<string>("strId");
106 
107             if (strd.Length >= 35)
108             {
109                 entity.cid = Get<string>("strId");
110                 entity = Factory<tsk_calendar_eventsBean>.Instance.Select("cid='" + strd + "'");
111             }
112             else
113             {
114                 entity.id = Convert.ToInt32(strd);
115             }
116             Factory<tsk_calendar_eventsBean>.Instance.Update(entity);
117         }
118 
119         protected string GetStringJSON()
120         {
121             int count;
122             DataTable table = Factory<vw_tsk_calendar_eventsBean>.Instance.SelectDataTable(0, 0, GetSearchWhere() + "order by id desc", out count);
123             string strJSON = JsonConvert.SerializeObject(table);
124 
125             //先去掉空的重復事件
126             string strReg = ",\"recurrenceState\":null,\"endTime\":null,\"event_id\":null,\"cuId\":null,\"parentRecurrenceId\":null,\"patternStartDate\":null,\"recurrenceType\":null,\"startTime\":null";
127             Regex rx = new Regex(strReg);
128             strJSON = rx.Replace(strJSON, "");
129 
130             ////去掉關鍵字前的c 和 時間的引號和 GMT 0800
131             strReg = "(\\w)(description)|(\\w)(start)|(\\w)(subject)|(\")(\\w)(end)(\")|\"(new [^\"]*)\"| GMT 0800";
132             rx = new Regex(strReg);
133             strJSON = rx.Replace(strJSON, @"$2$4$6$9$11");
134 
135             strReg = "(\"startTime\":\"[^\"]*\")";
136             rx = new Regex(strReg);
137             strJSON = rx.Replace(strJSON, "$1}");
138 
139             //////把重復事件的對象加上去
140             strReg = "\"endTime";
141             rx = new Regex(strReg);
142             strJSON = rx.Replace(strJSON, "\"recurrencePattern\":{\"endTime");
143             return strJSON;
144         }
145     }
146 
147 }

View Code

頁面代碼說明：

1、首先我知道js樣式調用那樣寫是不符合規范的，不建議大家像我這樣，我這樣寫是因為框架（整個ＯＡ）的框架搭建問題，只有這樣寫才能生效，就整個問題我也糾結了好一會。

2、代碼不是很規范，效率有點低，希望各位看官將就着看。

入題：

1、初始化日歷控件：

　　a：引包，注意順着不能亂（頁面加載順序有關），不然，出事你負責。。。。。。我已經深受其害了。

　　b：初始化靜態的日歷控件（不好意思啊，最近在做 ASP.NET ，經常控件控件這樣叫的，望大家理解理解。。。)

　放置一個div，用來初始化日歷的　　　

<div id="eventscalendar">

</div>

用js來添加日歷

 1 <script type="text/javascript">
 2     $(document).ready(function () {
 3         $("#eventscalendar").wijevcal({
 4             visibleCalendars: ["My", "Work"],
 5             dataStorage: {
 6                 addEvent: function (obj, successCallback, errorCallback) {
 7                     successCallback();
 8                 },
 9                 updateEvent: function (obj, successCallback, errorCallback) {                              
10                     successCallback();
11                 },
12                 deleteEvent: function (obj, successCallback, errorCallback) {
13                     successCallback();
14                 },
15                 loadEvents: function (visibleCalendars, successCallback, errorCallback) {
16                     successCallback();
17                 
18                 }
19             }
20         });
21     });
22 </script>

View Code

好了，一個靜態的頁面已經弄好了，這里為了大家能看到效果，給大家一個靜態數據的 Demo，大家在頁面中下載吧。

2、獲取數據，並把數據提交到數據庫。

封裝一個獲取數據的方法：

 1  //獲取日歷插件里的屬性
 2         function getData2(obj) {
 3             //取得日歷的開始和結束的時間變量傳到后台，添加操作            
 4             var stime = "new Date(" + obj.start.getFullYear() + "," + obj.start.getMonth() + "," + obj.start.getDate() + "," + obj.start.getHours() + "," + obj.start.getMinutes() + ")";
 5             var etime = "new Date(" + obj.end.getFullYear() + "," + obj.end.getMonth() + "," + obj.end.getDate() + "," + obj.end.getHours() + "," + obj.end.getMinutes() + ")";
 6             //沒有重復事件時的屬性值 
 7             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;
 8 
 9             if (obj.recurrencePattern != null) {
10                 alert(obj.recurrencePattern.endTime + "結束");
11                 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;
12                 return strGet2 + strGet1;
13             } else {
14                 return strGet1;
15             }
16         };

View Code

到此，能夠獲取到數據，相信你應該知道怎么做了吧。。。。哈哈我就不多說了，大家看后台代碼吧，

不過有些方法你不能直接寫的，比如：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

要一分，給我掙掙分好嗎，沒有分了。

如果你也沒有分，給我郵箱我給你發。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 不得不愛開源 Wijmo jQuery 插件集（9）-【日歷】(附頁面展示和源碼) javascript日歷插件 JQuery日歷插件前端日歷插件 fullcalendar 日歷插件的使用 ionic日歷插件 jquery 日歷插件的引用純js日歷插件日歷插件的詳解 SimpleCalendar日歷插件改版