文檔維護者：孫尊路

喜好的話，記得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
});

參數申明

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庫,思緒已經有了，只不過須要一點時候舉行代碼重構，若在此之前給你帶來的不方便，還請多多見諒，畢竟優化組件確切須要消費大批時候的。