使用方法
使用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. Windows安装MongoDB

    一.简介 MongoDB 是一个基于分布式 文件存储的NoSQL数据库 由C++语言编写,运行稳定,性能高 旨在为 WEB 应用提供可扩展的高性能数据存储解决方案 查看官方网站 MongoDB特点 模 ...

  2. FCN 项目部分代码学习

    下面代码由搭档注释,保存下来用作参考. github项目地址:https://github.com/shekkizh/FCN.tensorflowfrom __future__ import prin ...

  3. Python语音识别(计算器)

    第一步关于导入模块的事,我试了好几个方法才发现在好像win7系统没有语音识别功能,我用了win10的又需要重新下载一个包 这样子,win32com.client模块就可以使用了 import win3 ...

  4. Git强制拉取覆盖本地

    1.多条执行 git fetch --all git reset --hard origin/master git pull 2.单条执行 git fetch --all && git ...

  5. zookeeper都有哪些使用场景

    分布式协调 这个其实是zk很经典的一个用法,比如,A系统发送个请求到mq,然后B拿到消息消费之后处理了.那A系统如何知道B系统的处理结果? 用zk就可以实现分布式系统之间的协调工作.A系统发送请求之后 ...

  6. python爬虫实例

    import re import requests from bs4 import BeautifulSoup # 主方法 def main(): # 给请求指定一个请求头来模拟chrome浏览器 h ...

  7. Visual stuio2015 升级 Update 3+安装.Net Core 安装包之后,无法创建Mvc项目

    原因: 怀疑是更新后缺少Web Frameworks and Tools 工具, 安装update3的时候提示异常 解决方法: 1.去微软 下载 Web Frameworks and Tools安装后 ...

  8. 一起学Hadoop——Hadoop的前世今生

    Hadoop是什么? Hadoop是一个处理海量数据的开源框架.2002年Nutch项目面世,这是一个爬取网页工具和搜索引擎系统,和其他众多的工具一样,都遇到了在处理海量数据时效率低下,无法存储爬取网 ...

  9. LNMP分离部署

    环境: Nginx+PHP:192.168.2.144 Mysql:192.168.2.151 [Nginx] yum install -y pcre-devel openssl-deve popt- ...

  10. Nginx编译安装:

    第三方模块 在nginx.org   --------  wiki  找 --add-module=   添加 Nginx编译安装: 安装开发环境 ]# yum groupinstall " ...