bootstrap-year-calendar全年日历插件

使用方法
使用bootstrap-year-calendar插件需要引入jQuery、Bootstap3的相关依赖文件和插件本身需要的js和css文件。

<link rel="stylesheet" type="text/css" href="bootstrap-3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap-year-calendar.min.css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="bootstrap-3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap-datepicker.min.js"></script>
<script type="text/javascript" src="js/bootstrap-year-calendar.min.js"></script>
<script type="text/javascript" src="js/bootstrap-popover.js"></script>         

HTML结构
该Bootstrap3带记事功能的全年日历插件最简单的HTML结构是使用一个空的<div>作为日历的容器。

<div id="calendar"></div>  

初始化插件
在页面DOM元素加载完毕之后，可以通过下面的方法来初始化该日历插件。

$('.calendar').calendar()   

或者在初始化插件的时候设置一些配置参数：

$('.calendar').calendar(options)

也可以直接在HTML元素上使用data-provide属性来初始化插件。

<div data-provide="calendar"></div>

配置参数

bootstrap-year-calendar全年日历插件的可用配置参数有：

allowOverlap：类型：Boolean；默认值：true；指定用户是否可以选择一个在DataSource中于其它元素范围重叠的日期范围。

Get/Set方法：getAllowOverlap(), setAllowOverlap()
contextMenuItems：类型： Array of: { text: String, click: function(dataSourceElement), subMenu: [] }；默认值：false；指定上下文菜单的默认项。

Get/Set方法：getContextMenuItems(), setContextMenuItems()
dataSource：类型：Array of: { startDate: Date, endDate: Date, name: String, ... }；默认值：[]；显示在日历中的日期元素。

Get/Set方法：getDataSource(), setDataSource()
disableDays：类型：Array of Date；默认值：[]；不可用的日期。

Get/Set方法：getDisableDays(), setDisableDays()
displayWeekNumber：类型：Boolean；默认值：false；是否显示星期的序号。

Get/Set方法：getDisplayWeekNumber(), setDisplayWeekNumber()
enableContextMenu：类型：Boolean；默认值：false；是否在右键点击一个日期时显示上下文菜单。

Get/Set方法：getEnableContextMenu(), setEnableContextMenu()
enableRangeSelection：类型：Boolean；默认值：false；用户是否可以选择一个日期范围。

Get/Set方法：getEnableRangeSelection(), setEnableRangeSelection()
language：类型：String；默认值：en；当前日历的语言，目前只支持英语和法语。

Get/Set方法：getLanguage(), setLanguage()
maxDate：类型：Date；默认值：null；最大的日期时间，用户不能设置最大日期之后的备忘录。

Get/Set方法：getMaxDate(), getMaxDate()
minDate：类型：Date；默认值：null；最小的日期时间，用户不能设置最小日期之前的备忘录。

Get/Set方法：getMaxDate(), getMaxDate()
startYear：类型：Number；默认值：当期年份；日历打开时显示的年份。

Get/Set方法：getYear(), setYear()
style：类型：String；默认值：'border'；指定备忘录日期的样式。

Get/Set方法：getStyle(), setStyle()

事件
你可以在初始化的时候为一个日历绑定事件：

$('#element').calendar({
    clickDay: function(e) { ... }
});   

或者使用jQuery方法来绑定日历事件：

$('#element').clickDay(function(e){ ... });  

或者：

$('#element').bind('clickDay', function(e){ ... }); 

clickDay：当某个日期被点击时触发。

事件参数：
    element (DOM element)：被点击日期的HTML元素。
    date (Date)：被点击日期的日期。
    which (Number)：The number of the button used for clicking (from the original click event)。
    events (Array of data source element)：被点击日期的数据源。
dayContextMenu：当一个日期被右键点击的时候触发。

事件参数：
    element (DOM element)：被点击日期的HTML元素。
    date (Date)：被点击日期的日期。
    events (Array of data source element)：被点击日期的数据源。
mouseOnDay：当鼠标进入某个日期时触发。

事件参数：
    element (DOM element)：被点击日期的HTML元素。
    date (Date)：被点击日期的日期。
    events (Array of data source element)：被点击日期的数据源。
mouseOutDay：：当鼠标离开某个日期时触发。

事件参数：
    element (DOM element)：被点击日期的HTML元素。
    date (Date)：被点击日期的日期。
    events (Array of data source element)：被点击日期的数据源。
renderDay：当渲染某个日期时触发。

事件参数：
    element (DOM element)：被点击日期的HTML元素。
    date (Date)：被渲染的日期。
renderEnd：当一个日期渲染结束时候触发。

事件参数：
    currentYear(Number)：日历上显示的年份。
selectRange：当一个日期范围被选择的时候触发。

事件参数：
    startDate (Date): 日期范围的开始日期。
    endDate (Date): 日期范围的结束日期。

转载于:https://www.cnblogs.com/xiaofengfree/p/10448906.html