FlexoCalendar.js

概述

• 依賴jQuery
• 可展示日歷、周歷、月歷
• 同時提供方法輸入日期即可得知該日是該月的第幾周以及每月的天數
</ul>

使用

在html中引入jQuery.js,FlexoCalendar.js以及FlexoCalendar.css，例如

<link rel="stylesheet" href="FlexoCalendar.css">
    <script src="jq.js"></script>
    <script src="FlexoCalendar.js"></script>

調用方法

<script>
      $(function(){
        $(dom).flexoCalendar();
      })
    </script>

參數列表

type

可選參數 normal | weekly | monthly 
默認參數 normal
* normal: 日歷
* weekly: 周歷
* monthly: 月歷

id

默認參數 ''
自定義日歷的id

className

默認參數 ''
自定義日歷的樣式名

dayNames

默認參數 ['日', '一', '二', '三', '四', '五', '六']
周名

numbers

默認參數 ['一', '二', '三', '四', '五', '六']
用于周歷，修正數字顯示

today

默認參數 true
是否高亮今天，如果選擇 false 則不高亮今天
被高亮的日期會有 current-day 的樣式
如果是周歷還會擁有 current-week 的樣式
如果是月歷則還會擁有 current-month 的樣式

select

默認參數 true 
是否可選中，如果選擇 false 則不可選中日期
如果被選中會獲得樣式 selected

multi

默認參數 false
是否可多選，如果選擇 true 則日期可被多選
如果被選中會獲得樣式 selected

disOtherMonth

默認參數 false
用于日歷，是否禁用可選其他月份的日期，如果選擇 true 則禁用可選其他月份的日期

setMonth

默認參數 當前月
可初始化日歷展示月份

setYear

默認參數 當前年
可初始化日歷展示年份

selectDate

默認參數 null 
自定義高亮的日期
格式 yyyy-mm-dd | yyyy-mm | yyyy-mm-weekn
年月日均可被設為each
yyyy/mm如被設置為each則被認為是日歷展示的當前年/月
dd或weekn被設置為each則被設置1號或者第一周
例子:　$(dom).flexoCalendar({selectDate:'2014-2-5'})
       $(dom).flexoCalendar({selectDate:'2015-04-week2'})

allowDate

默認參數 null
限定日歷上下翻動的上限
格式 ['yyyy-mm','yyyy-mm']
例子: $(dom).flexoCalendar({allowDate:['2013-04','2016-07']})
**該日期為限定的日期的下一個月，和上一個月

prev

默認參數 'icon-arrow-left'
設定日歷向左翻動按鈕的樣式

next

默認參數 'icon-arrow-right'
設定日歷向右反動按鈕的樣式

onselect

默認參數 function(){}
選擇時調用的函數
傳入參數：選中日期的日期
function(date){}

ongoprev

默認參數 function(){}
日歷向后翻動時調用的函數
傳入參數：前一個日期，當前的日期
function(prevdate, currentdate){}

ongonext

默認參數 function(){}
日歷向后翻動時調用的函數
傳入參數：后一個日期，當前的日期
function(nextdate, currentdate){}

項目地址： https://github.com/EleanorMao/FlexoCalendar.js