手機端簡潔日曆控件iantoo.week()

原文連接

使用

引入文件:

./build/css/iantooweek.css
./build/js/iantooweek.js

並在頁面上調用:

iantoo.week()

詳細使用方法見page/iantooweek/index.html

兼容性

ios 8.0+
Android 4.0+

預覽

GitHub

API

el

非必填、 string,默認會直接插入到 body中。

指定日曆模塊所渲染的element,傳入格式入'.className'或#idName,最終會經過querySelector方法進行查找。

date

非必填、默認值：系統的當前時間，即： new Date()獲得的時間。 、 type:string

默認初始化的時間,格式必須爲「YYYY-MM-DD HH:MM:SS」 或 「YYYY-MM-DD」。

setSystemDate

type:string 默認 系統時間 YYYY-MM-DD HH:MM:SS | YYYY-MM-DD | 時間戳

手動設置系統時間,一般狀況不適用該功能。
主要是爲了不用戶修改了手機日曆以後，獲取的本地與服務器時間不統一,能夠經過獲取服務器時間進行手動設置。將不在獲取本地時間

showWeek

非必填、 boolean,默認 true。

是否顯示星期欄,默認顯示。

sign

非必填、 array,默認 []。

用於標示某一天提醒,被標記的某一天下面會生成一個圓點提示。傳入格式如：「['2018-06-5','2018-6-23']」

RootNoScroll

非必填 、 boolean,默認 true可滾動。

false時禁止左右滾動,禁止滾動以後不會在左右滑動,將不會觸發scroll、touchStartFun 和 touchEndFun方法。只有在兼容部分機型的時候纔會調用。

theme

主題顏色

theme.selectGB

非必填、 string,默認:會隨着版本的不一樣而變化

被選擇的某一天的背景色,可傳入顏色值的方式可分爲16進制、RGB、RGBA等顏色模式,最終以element.style.background = color的形式賦值。

theme.selectFontColor

非必填、 string,默認: '#ffffff'

被選中的某一天的文字顏色,格式同theme.selectGB

theme.systemBG

非必填、 string,默認:會隨着版本的不一樣而變化

系統時間的背景顏色,當系統的當前時間被選中時,會以theme.selectGB的顏色優先顯示。格式同theme.selectGB

theme.systemFontColor

非必填、 string,默認:會隨着版本的不一樣而變化

系統時間的文字顏色,被點擊時會以theme.selectFontColor顏色優先顯示。格式同theme.selectGB

clickDate

非必填、 function。

當點擊某一天的時候會回調該方法。以下

iantoo.week({
    clickDate:function(date){
        console.info(date)         //{year: 2018, month: 6, day: 29}
    }
})

返回對應的當天的年月日時間

render

非必填、 function。

日曆在調用時渲染完成以後自動觸發該方法,示例:

iantoo.week({
    render:function(data,systemDate){

    }
})

data返回的是當前頁面渲染的星期的時間數組列表
systemDate返回當前電腦系統對應的時間年月日

updataRender

非必填、 function。

日曆控件更新以後哦調用,只有在調用了iantoo.week.update()的時候纔會被觸發

scroll

非必填、 function。

每次滑動以後調用的方法,返回當前顯示的七天的日期。

touchStartFun

非必填、 function。

滑動開始觸發的方法。

touchEndFun

非必填、 function。

滑動結束觸發的方法

注： touchStartFun 和 touchEndFun方法對應的則是 touchstart和 touchend,一般用在安卓設備上。當打開一個 activity的之後，若是有原生的橫向滑動方法,須要原生支持方來來禁止滾動,則能夠經過這兩個方法來控制是否禁止原生的滑動。對於 IOS設備已經經過阻止冒泡事件進行控制,不須要再作控制。