xgcalendar 簡要文檔和FAQ

xgcalendar

谷歌日曆風格的日曆控件 一個基於jQury的日曆插件，能夠幫助用戶快速的建立日程（活動），相似谷歌日曆 爲啥叫xgcalendar? X=xuanye G=Google Calendar Like

功能列表

• 支持三種視圖類型 （日,月,周）
• 支持定義一週的開始日期(週一或者週日)
• 支持無刷新獲取數據和更新數據
• 支持拖拽選擇時間段新增日程（包括單日和跨日）
• 快速刪除
• 經過拖拽方式快速修改時間
• 經過拖拽改變大小來調整日程持續時間
• 支持權限控制
• 支持多主題風格
• 優異的性能表現
• 支持多語言
• 支持的瀏覽器 IE6+,FireFox3.5+,Opera 10+,Chrome 3+

使用方法

在頁面中插入html :

<div id="xgcalendarp">這裏是日曆控件</div>

引入JS: 其中xgcalendar_lang_zh_CN.js爲本地化文件，xgcalendar支持多語言

<script src="static/js/plugin/xgcalendar_lang_zh_CN.js" type="text/javascript"></script>  
<script src="static/js/plugin/xgcalendar.js?v=1.2.0.4" type="text/javascript"></script>

調用 :

var op = {
    view: "week", //默認視圖，這裏是周視圖
    theme:1,//默認的主題風格
    autoload:true, //是否在頁面加載完畢後自動獲取當前視圖時間的數據
    showday: new Date(), //當前視圖的顯示時間
    EditCmdhandler:edit, //點擊的響應事件
    //DeleteCmdhandler:dcal, //刪除的響應事件
    ViewCmdhandler:view,    //查看的響應事件
    onWeekOrMonthToDay:wtd,//當when weekview or month switch to dayview 
    onBeforeRequestData: cal_beforerequest,
    onAfterRequestData: cal_afterrequest,
    onRequestDataError: cal_onerror, 
    url: "/calendar/query" ,  //url for get event data by ajax request(post)
    quickAddUrl: "/calendar/add" ,   //url for quick add event data by ajax request(post)
    quickUpdateUrl: "/calendar/update" ,   //url for quick update event data by ajax request(post)
    quickDeleteUrl:  "/calendar/delete"  //url for quick delete event data by ajax request(post)
};
var _MH = document.documentElement.clientHeight; //獲取頁面高度，不一樣的文檔類型須要不一樣的計算方法，注意示例中使用的doctype 用這個就搞定了
op.height = _MH-70; //container height;
op.eventItems =[]; //default event data;
$("#xgcalendarp").bcalendar(op);

參數說明

• view: 默認是周視圖 day,week,month
• weekstartday: 默認星期一開始，即爲1,若是設置爲0則爲從星期日開始
• theme: 默認使用第一套主題,可設置範圍0-21
• height: 視圖的高度，若是不設置則默認獲取所在頁面的高度
• url: 必填 請求數據的Url
• eventItems: 日程數據，是個數組，可經過此參數設置初始化數據
• method: 異步提交數據的方式，默認爲POST建議不要修改。
• showday: 顯示日期，默認爲當天
• onBeforeRequestData: 在異步調用調用開始以前執行的函數，能夠用此參數配合下面的參數完成動態提示效果
• onAfterRequestData: 異步調用完成以後
• onRequestDataError: 在異步調用發生異常時
• onWeekOrMonthToDay: 當週視圖切換到日視圖，由於在轉換在內部完成，因此公開一個入口可獲得該行爲
• quickAddHandler: 快速添加的攔截函數，該參數設置後quickAddUrl參數的設置將被忽略
• quickAddUrl: 快速添加日程響應的 Url 地址
• quickUpdateUrl: 拖拽更新時響應的 Url 地址
• quickDeleteUrl: 快速刪除日程時響應的Urk 地址
• autoload: 自動使用url參數加載數據，若是eventItems參數沒有配置，可啓用該參數，默認第一次獲取數據
• readonly: 是否只讀，某些狀況下，可設置整個視圖只讀
• extParam: 額外參數數組{name:"",value:""}，在因此異步請求中，都會附加的額外參數，可配置其餘擴展的查詢條件
• enableDrag:默認爲true，是否可拖拽,和 readonly 參數不一樣的是 只是不能拖拽。
• timeFormat:默認爲HH:mm, t表示上午下午標識,h 表示12小時制的小時，H表示24小時制的小時,m表示分鐘
• tgtimeFormat:"HH:mm" //同上

數據格式

參數列表中的eventItems參數的數據格式，若是添加新的字段儘可能日後添加

eventItems自己是個數組，數組的項自己又是個數組，結構以下所示 [主鍵,標題,開始時間,結束時間，是否全天日程，是否跨天日程,是否循環日程,顏色主題,是否有權限,地點,參與人] 對應的數據類型 [String,String,Date,Date,1/0,1/0,1/0,0-21,0/1,String,String]

可用的方法

全部方法經過 $("#calendarid").functionName(params) 方式調用

• BCalSwtichview(viewtype) 切換視圖 參數 viewtype 值爲day，week，month 之一
• BCalReload 從新加載當前視圖 即刷新
• BCalGoToday(day) 將時間回到day參數所在的時間段，不切換視圖
• BCalPrev 往前一個時間段，這個時間的範圍由當前視圖決定，如周視圖即爲往前一週
• BCalNext 同上 日後一個時間段
• BcalGetOp 獲取當前參數，這個在切換視圖的時候 會獲取到某些文字提示，詳見demo
• BcalSetOp(p) 設置參數,p爲額外的參數值 ,參考{p1:p1value}，可動態設置參數

參數中的那些事件

• onBeforeRequestData(type): type爲數字，表示事件的類型（1：加載,2：新增,3：刪除,4：更新）
• onAfterRequestData(type): type同上
• onRequestDataError(type,data):type同上，data爲錯誤信息，若是存在的話
• onWeekOrMonthToDay(p): p爲當前的參數值，可從p.dayshow 獲取提示信息，詳見demo

####load時的參數說明
請求參數

showdate=2013-1-9&viewtype=month&timezone=8

其中showdate爲當前日期，viewtype爲當前視圖，timezone爲時區 後臺會根據showdate和viewtype計算出對應的開始日期和結束日期，加上時區的偏移到數據庫中檢索 實際的狀況應該根據你服務端編碼實現的狀況來處理，默承認經過request 的form中獲取上述值

請求返回

{"events":[],"issort":true,"start":"/Date(1261353600000)/","end":"/Date(1261958399000)/","error":null}

events的結構同參數eventItems的結構， issort是否已在服務端排序（請在服務端作好排序）， start和end是本次請求的開始時間和結束時間,這裏是date的json表示法 error是業務異常對象，可在服務端生成，結構爲：{ErrorCode:」」,ErrorMsg:」」} 可在onRequestDataError中捕獲，並作友好的提示。

####更新時的參數說明 請求參數

calendarId=98&CalendarStartTime=2013-1-2+00%3A00&CalendarEndTime=2013-1-2+00%3A00&timezone=8

開始時間和結束時間的格式同你的多語言配置相關

請求返回

{"IsSuccess":true,"Msg":""}

是否成功和失敗時的錯誤信息

刪除和新增雷同 不作展開說了，若是不清楚能夠經過工具看看，chrome 使用F12調出開發者工具，切換 Network選項卡，操做一邊就能夠看到。

##FAQ

• 有沒有java版本的demo

  沒有,我知道不少網友 實現了若是有願意提供的那很是歡迎

• 怎麼把時間範圍控制在8：00到下午18：00 （相似控制時間段）

  展現不提供相似功能，如你願意付費我能夠考慮幫你實現。

• 彈出層中不能經過點擊事件得到焦點，一樣不能選中文字等等問題。

這個多是由於我禁用了 彈出層的mousedown事件的冒泡 ，新的輸入框不能經過點擊得到焦點 在代碼中彈出層有以下一段代碼。 buddle.mousedown(function(e) { return false }) $(document).one("mousedown", function(){}） 主要是和這個事件衝突，你能夠把上面的mousedown事件註釋掉，而後在這個時間裏面判斷點擊的位置是否在buddle中，能夠經過判斷pos，或者eventtarget 是buddle 子元素的方式

• 我想在彈出層中新增一個字段要怎麼作?

首先你要在彈出層的html中添加對應的input或者select標籤
其次你在代碼中必須對這個元素的取值賦值進行處理，並插入到post的請求參數中，還要存放到本地緩存中。 最後可能還要修改一些小瑕疵，根據你的測試狀況，雖然我曾經幫別人實現過一次，可是時間過去的過久我已經記不得所有過程了。

• xgcalendar的版權問題，它收費嗎？可用於商業項目嘛？

xgcalendar是個開源項目，若是你把它使用到了你的商業項目中，我只要求你保留版權信息便可，不收取費用，固然你若是但願定製化的開發，那我可能會收取一些費用，視功能複雜狀況而定。

• 關於wdcalendar,我發現這個程序和你的xgcalendar很是類似？

確實我也發現了，仍是一個法國人告訴個人，wdcalendar在很早的時候就盜版了xgcalendar ，也不能說徹底一字不改把，至少註釋都改爲英文了。我強烈鄙視這種行爲，另外盜版了我一些其餘的jquery插件號稱是其做品。http://www.web-delicious.com/jquery-plugins/，上面的插件都是我寫的，這個站點也是盜版者的網站，雖然是全英文可是確實國人的，哎 受不了。

• 怎麼添加農曆？

農曆可做爲一類日程數據 在服務端生成 再在客戶端上顯示