使用方法
使用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): 日期范围的结束日期。

bootstrap-year-calendar全年日历插件的更多相关文章

  1. Bootstrap日期/日历插件Datepicker 时间加标记

    由于工作需要,项目中使用了Bootstrap日期/日历插件Datepicker,根据需求需要在其中添加日期标记,实现效果图如下: 特此记录此次解决方案: 1.首先分析了功能的DOM元素(如下图),可以 ...

  2. Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结

    Bootstrap时间日历插件bootstrap-datetimepicker配置与应用小结   by:授客 QQ:1033553122 1.   测试环境 win7 JQuery-3.2.1.min ...

  3. EasyUI Calendar 日历插件,只显示年月。

    从别人的博客园搬过来的,放在这里只是为了方便自己用.已经注明原文出处,尊重别人的劳动成果. 原文地址:http://www.cnblogs.com/hmYao/p/5779463.html 此日历插件 ...

  4. 【UI插件】简单的日历插件(下)—— 学习MVC思想

    前言 我们上次写了一个简单的日历插件,但是只是一个半成品,而且做完后发现一些问题,于是我们今天尝试来解决这些问题 PS:距离上次貌似很久了 上次,我们大概遇到哪些问题呢: ① 既然想做一套UI库,那么 ...

  5. fullcalendar日历插件的使用并动态增删改查

    我上个项目是做了一个关于教育方面的web端页面,其中的课程表就要用到fullcalendar日历插件,刚开始也是不会用,因为以前也没用过,后面也是看官方文档,问同事,最后完成了这个课程表,个人感觉fu ...

  6. php使用fullcalendar日历插件

    最近做课程表的项目,找了好多个插件感觉都不好用,无意间看到了fullcalendar,还挺简单的,很方便,先贴一张项目页面 <!DOCTYPE html> <html> < ...

  7. jquery双日历日期选择器bootstrap-daterangepicker日历插件

    这个插件既可以作为双日历也可以作为单日历插件(jquery的插件在jquery插件库中http://www.jq22.com/下载很方便,在CSDN下载真麻烦) 引用 <meta http-eq ...

  8. 被逼着写的jquery工作日管理日历插件

    因为工作原因,在我刚进入新公司之后,立马要求让我做一个jquery的插件demo.我的天,我面试的可是.net工程师啊.虽然以前接触过js,jquery,但也只是接触过一丢丢啊,没办法,只好硬着头皮上 ...

  9. 日历插件FullCalendar应用:(二)数据增删改

    接上一篇 日历插件FullCalendar应用:(一)数据展现. 这一篇主要讲使用fullcalendar插件如何做数据的增删改,用到了art.dialog web对话框组件,上一篇用到的webFor ...

随机推荐

  1. K8s-Pod控制器

      在K8s-Pod文档中我们创建的Pod是非托管的Pod,因为Pod被设计为用后就弃的对象,如果Pod正常关闭,K8s会将该Pod清除,它没有自愈的能力.Pod控制器是用来保持Pod状态的一种对象资 ...

  2. 51 Nod 1240 莫比乌斯函数

    1240 莫比乌斯函数  基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题  收藏  关注 莫比乌斯函数,由德国数学家和天文学家莫比乌斯提出.梅滕斯(Mertens)首先使 ...

  3. linux系统(CentOS7)虚拟机上安装oracle 11g,解决oracle图形界面卡住无法点击next问题

    https://www.cnblogs.com/nichoc/p/6416475.html

  4. snmp v3的安全配置 snmp认证与加密配置(53)

    http://www.ttlsa.com/zabbix/snmp-v3-configuration/

  5. IIS异常

    http 错误 500.19 - internal server error 今天发布wcf到本地的IIS上,访问时出现了500.19错误.有效解决办法:是因为IIS没有安装完全,把能勾选的全部勾选上 ...

  6. mysql排序(四)

    MySQL 排序 我们知道从 MySQL 表中使用 SQL SELECT 语句来读取数据. 如果我们需要对读取的数据进行排序,我们就可以使用 MySQL 的 ORDER BY 子句来设定你想按哪个字段 ...

  7. 【转】如何向Android模拟器打电话发短信

    转载地址:http://hi.baidu.com/jeremylai/item/420f9c9fe4881fccb62531f7 1. 启动Android Emulator, 查看标题栏找出端口.一般 ...

  8. 批处理打开关闭服务(ArcSDE+Oracle92的)

    转自:http://crmhf.blog.163.com/blog/static/7707820320097199560516/ 批处理打开服务:echo offnet start "Arc ...

  9. java 防止xss攻击

    http://blog.csdn.net/zhengbo0/article/details/40507519 http://blog.csdn.net/ghsau/article/details/17 ...

  10. Codechef CHSIGN Change the Signs(May Challenge 2018) 动态规划

    原文链接http://www.cnblogs.com/zhouzhendong/p/9004583.html 题目传送门 - Codechef CHSIGN 题意 第一行,一个数$T$,表示数据组数. ...