移動端H5周曆組件

文檔維護者：孫尊路

喜歡的話，記得star 一下噢！

適用場景

• 前些陣子，寫了一篇《日曆組件實現》的使用在線文檔，遇到一個需求：實現一個H5周從來填寫每週的工做日誌，去網上查閱資料，發現不少示例也沒有一個標準的使用文檔，感受用起來也吃力，因而乎，本身造了一個周曆組件，文章下面有很詳細的使用說明。 本篇結合了實際的項目應用需求整理出來的，該文檔後面會持續優化更新。如有不足，也請你們多多指教，小編會及時更正！

實例展現

• 周曆示例演示，支持上一週、下一週切換等效果 注：按F12可在瀏覽器預覽
• 示例demo源代碼(H5)：點擊此處進行下載

典型項目應用案例

• 【移動OA類】 個人日誌

依賴資源

• libs/calendar_base_week.js 周曆組件基類js庫，能夠根據業務需求，任意個性化，從而達到設計視覺效果

配置和使用方法

DOM結構

一個div便可

<div id="weekcalendar"></div>

初始化

如下代碼是最簡單的用法，更多複雜用法請參考calendarweek_showcase源碼下載

var weekcalendar = new CalendarWeek({
    // 默認周曆組件容器
    "container": "#weekcalendar",
    // 點擊日期事件
    "onItemClick": function(item) {
        console.log(item.date + " " + item.week);
    },
    isDebug: false
});

參數說明

參數	參數類型	說明
container	string或HTMLElement	必選 Calendar容器的css選擇器，例如「#calendar」。默認爲#calendar
pre	string或HTMLElement	可選 前一週按鈕的css選擇器或HTML元素。默認.pre
next	string或HTMLElement	可選後一週按鈕的css選擇器或HTML元素。默認.next
dataRequest	Function	可選 回調函數，綁定業務數據。例如：某天有日程，則會在對應日期上標識出一個小紅點或者其餘標識，默認傳入數據格式：data=[{"date":"2018-04-18"},{"date":"2018-04-17"},{"date":"2018-04-16"}]
onItemClick	Function	必選 回調函數，當你點擊或輕觸某日期 300ms後執行。回調日期結果：2018-04-07
template	Function或String	可選，元素渲染的模板，能夠是一個模板字符串，也能夠是一個函數，爲函數時，確保返回模板字符串，默認組件內置模板
isDebug	Boolean	可選是否開啓調試模式，默認false

API

生成的weekcalendar對象能夠調用以下API

var weekcalendar = new CalendarWeek(...);

refresh()

外部刷新方法，重洗渲染當前周的列表數據。

weekcalendar.refresh();

slidePrev()

切換爲上一週，與組件內部傳入參數pre做用同樣，該API支持Promise異步成功回調裏處理本身的業務邏輯。

weekcalendar.slidePrev().then(...).then(...);

slideNext()

切換爲下一週，與組件內部傳入參數next做用同樣，該API支持Promise異步成功回調裏處理本身的業務邏輯。

weekcalendar.slideNext().then(...).then(...);

優勢和好處

可以極大方便實際項目上開發人員的上手使用，並且版本是不斷根據實際項目上的需求進行優化升級的，開放源碼可讓特殊需求的項目開發人員進行修改、補充和完善。

存在的不足之處

目前依賴js庫有多個（mustache.min.js、mui.min.js）主要是一些經常使用的移動端js庫（無可厚非），包含組件的核心庫，或許有人認爲影響加載速度之類的，其實已經有不少項目在應用效果還能夠，固然了小編也正在努力剝離第三方js庫,思路已經有了，只不過須要一點時間進行代碼重構，若在此以前給你帶來的不便，還請多多包涵，畢竟優化組件確實須要花費大量時間的。