網頁

2016年12月20日 星期二

JavaScript Events Calendar component

最近工作上寫的,目的是想弄個功能接近Google Calendar的東西
原本想拿個開源的專案回來改,不過查了比較流行的幾個專案都是用jQuery、react來寫的
而且坦白說都還滿大包的,好幾個複合需求湊起來就是這樣的大小
反而沒有看到單純用JavaScript刻的 Events Calendar
這下只好自己動手做了
gist link

See the Pen VmRZJo by veni (@veni_vi) on CodePen.

不是什麼了不起的code,不過寫起來也花了一些時間
雖然說大部分的時間可能在觀察Google Calendar的行為(笑
使用上應該還算好拿來改的

CalendarEvent 依照自己的需求決定要多帶哪些數據
至少要有個顯示的內容跟一個日期

EventCalendar.requireEventData([{
"content": "test2",
"date_init": "2016/12/16 11:30:00",
"info": "test 2"                 // 這是示範用來作客製化行為的額外資料
}
]);

EventCalendar.setEventRenderFunction、EventCalendar.setEventMoreFunction可自訂事件處理

如果想做其它天期的顯示模式則可以參考 CalendarView 的繼承寫法自行撰寫

var calendar = EventCalendar.render();  // 畫出calendar

接著把畫完的calendar貼到想用的地方就可以了

歡迎改寫跟回報bug

沒有留言:

張貼留言