官方網站: WeekCalendar
[前言]
找了一下日曆的套件, 找到了JQuery weekCalendar這個東東, 可以用拖拉的方式建立事件, 也可以移動調整,
算起來是一個滿酷也方便的套件, 所以就鑽下去研究啦~
下載回來裡面有三個小demo加上一個full-demo範例,
前兩個很基本, 教一些設定基本參數, 第三個是event用json檔案載入.
至於full demo除了可以建立新的event, 按下去還會跳一個dialog出來, 並且變更start時間時, 會調整end的時間
[基本設定和說明]
我在這邊只列出幾個重要的囉~
var $calendar = $('#calendar').weekCalendar({ 參數們 });
//------ 下面是基本變數 ------
+ timeslotsPerHour: 將一個小時分割成幾個時段
+ firstDayOfWeek: 一個禮拜開始的日子, 0 <= 禮拜天, 1 <= 禮拜一, 以此列推 (PS: 它的英文說明是錯的XD 0 = sunday, 1 = tuesday
+ newEventText: 建立新event時出現的字樣
+ longMonths, longDays, shortMonths, shotDays: 日期的顯示, 要顯示中文就要改這禮囉 (一樣是從禮拜日開始算)
+ dateFormat: 日期顯示的格式
+ businessHours: 如果 limitDisplay設成 true, 就只會顯示在businessHours間的時段
+ allowCalEventOverlap: event是否可以重疊, 預設是false, 只要重疊, event會自動調整位子or長度 (這部份原來code有問題, 請見下方說明)
+ overlapEventsSeparate: 是否event重疊時會不會縮短寬度, 並列顯示 (前提是allowCalEventOverlap設成true囉)
+ readonly: 此日曆是否只能讀取(不能move, resize)
+ defaultEventLength: 點下去預設預訂幾個slot
PS: 在 // Refresh the displayed details of a calEvent in the calendar 可以修改時程框框上顯示的資料
//------ 接著是一些 事件函數 ------
先說明參數好了,
1. calEvent: 是event的物件, 原來預設的屬性有 id(此event的id), start(開始時間的JS Date物件), end, title(標題), body(內容)
在這邊時間主要是有兩種格式, 一個是 ISO8601 (ex. 2009-05-03T14:00:00.000+10:00), 另一個則是 timestamp(毫秒數)
JS中Date物件可以使用 .getFullYear(年), .getHours(小時), getMinutes(分鐘), getSeconds(秒), getTime(timestamp毫秒數)
所以如果要取得目前時間的timestamp的話(日期加秒數): var timestamp = (day*365+month*30+day)*86400*1000+time;
在這邊wc提供將timestamp或是ISO8601的時間轉換成輸出格式: $calendar.weekCalendar("formatDate", timestamp, 'Y-m-d H:r:s')
在這邊額外說明一下, 在php中用mktime()取得的timestamp時微秒數, 所以會差個1000倍喔!!!
至於title和body就不用多說啦.
不過這裡很重要的一點是, calEvent的屬性是可以自行增加的喔(ex. calEvent.attr = foo), 這對在控制說哪個event具有什麼屬性(可以移動或是縮放等)是很方便的.
2. $event則是DOM的物件, 可是利用此物件去修改event的css或是html資料等.
+ eventRender(calEvent, $event): 畫出event時會呼叫此函數
+ draggble(calEvent, $event): 如果event要可以動就回傳true, 反之
+ resizable(calEvent, $event): 同上 (我會依據不同calEvent設定的屬性來決定回傳什麼)
+ eventNew(calEvent, $event): 建立一個新的event時呼叫, 此時event的各個屬性就要在這邊設定囉
+ eventClick(calEvent, $event): 點選一個已建立的event時呼叫, 這邊就自行決定點下去要發生什麼事件囉
+ data(start, end, callback): 顯示落在start及end中的資料, 以及callback(event的JSON資料), 使用方式如下
$.getJSON("目標URL", {參數名稱: 參數值}, function(result) {
callback(result);
});
在這邊額外說明, 回傳的result必須符合JSON的格式, 如 {options: {日曆的參數}, events: [{"id": id, "start": start, ...}, {事件二}, ...]}
特別的是, 可以在這邊設定日曆的參數, 也就是可以設定不同data出現時日曆可以有不同的設定值, 但是當有多種設定同時出現時,
不會不同event有不同的顯示方式和設定(當然不可能同時出現一個是分割成兩個時段, 另一個是四個囉), 所以基本上要不同event有不同的設定,
只能從 render, draggble, resizable等下手啦~
//------ 再來是一些 定義好的函數 ------
$(”#calendar”).weekCalendar(”today”): 會讓日曆的時間顯示跑到今天
$('#calendar').weekCalendar('gotoWeek', new Date(Y, m, d)): 日曆時間移動到特定日期
$(”#calendar”).weekCalendar(”formatDate”, date, [format]): 依照timestamp顯示格式化的時間
[使用方式說明]
基本上已weekcalendar.html為主要html的顯示架構, 在這邊可以定義一些dialog的表單, 然後把設定日曆的JS再引入, 才不會讓檔案太複雜囉~
好像沒有什麼好說的耶XD
[OverLap的BUG修正]
我在使用 allowCalEventOverlap 這個參數時, 發現說就算設定成false, 也不會有像它說的, 在overlap時會調整event的位置以及大小,
就還是覆蓋上去, 想要把一個event移動到別天時, 只要那天已經有event了就會不能移動過去@@, 這讓我一開始用上一整個灰心啊XD
不過後來認真的去翻它的 jquery.weekcalendar.js 來看, 發現bug啦!!! 而且有兩隻~
臭蟲一號: 在 //has been dropped inside existing event with same or larger duration 這個註飾下面
if (! oldCalEvent.resizable || ... 這邊, 發現 oldCalEvent.resizable 這東西是 undefined的, 每次都會跳進來, 所以造成一整個不work.
我的解法是在 resizable 這個事件時, 就同時設定每個calEvent的resize屬性, 而到這邊就改成檢查 oldCalEvent.resize 這個flag, 科科
臭蟲二號: 一樣是在這段的判斷式(... && newCalEvent.start.getTime() >= currentCalEvent.start.getTime()) 這邊, 我發現event
移動到同樣開始時間的event上時, 還真的就給它移上去了@@, 後來發現newCalEvent和currentCalEvent的start竟然有個100毫秒的差距!!?
所以我就把判斷式修正成這樣了 (... && (newCalEvent.start.getTime() + 100 ) >= currentCalEvent.start.getTime()), 讓開始時間會一樣囉~
[結語]
一開始上手還真的有點給它霧煞煞, 再加上時間格式一值瞧不攏, 從資料庫抓出來的資料一直顯示不出來,
然後又在JSON那邊卡關了一下, 總而言之, 希望我這篇能幫有需要的大家少花些時間研究囉~
留言列表
