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): 日期范围的结束日期。
bootstrap-year-calendar全年日历插件的更多相关文章
- Bootstrap日期/日历插件Datepicker 时间加标记
由于工作需要,项目中使用了Bootstrap日期/日历插件Datepicker,根据需求需要在其中添加日期标记,实现效果图如下: 特此记录此次解决方案: 1.首先分析了功能的DOM元素(如下图),可以 ...
- Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
Bootstrap时间日历插件bootstrap-datetimepicker配置与应用小结 by:授客 QQ:1033553122 1. 测试环境 win7 JQuery-3.2.1.min ...
- EasyUI Calendar 日历插件,只显示年月。
从别人的博客园搬过来的,放在这里只是为了方便自己用.已经注明原文出处,尊重别人的劳动成果. 原文地址:http://www.cnblogs.com/hmYao/p/5779463.html 此日历插件 ...
- 【UI插件】简单的日历插件(下)—— 学习MVC思想
前言 我们上次写了一个简单的日历插件,但是只是一个半成品,而且做完后发现一些问题,于是我们今天尝试来解决这些问题 PS:距离上次貌似很久了 上次,我们大概遇到哪些问题呢: ① 既然想做一套UI库,那么 ...
- fullcalendar日历插件的使用并动态增删改查
我上个项目是做了一个关于教育方面的web端页面,其中的课程表就要用到fullcalendar日历插件,刚开始也是不会用,因为以前也没用过,后面也是看官方文档,问同事,最后完成了这个课程表,个人感觉fu ...
- php使用fullcalendar日历插件
最近做课程表的项目,找了好多个插件感觉都不好用,无意间看到了fullcalendar,还挺简单的,很方便,先贴一张项目页面 <!DOCTYPE html> <html> < ...
- jquery双日历日期选择器bootstrap-daterangepicker日历插件
这个插件既可以作为双日历也可以作为单日历插件(jquery的插件在jquery插件库中http://www.jq22.com/下载很方便,在CSDN下载真麻烦) 引用 <meta http-eq ...
- 被逼着写的jquery工作日管理日历插件
因为工作原因,在我刚进入新公司之后,立马要求让我做一个jquery的插件demo.我的天,我面试的可是.net工程师啊.虽然以前接触过js,jquery,但也只是接触过一丢丢啊,没办法,只好硬着头皮上 ...
- 日历插件FullCalendar应用:(二)数据增删改
接上一篇 日历插件FullCalendar应用:(一)数据展现. 这一篇主要讲使用fullcalendar插件如何做数据的增删改,用到了art.dialog web对话框组件,上一篇用到的webFor ...
随机推荐
- Windows安装MongoDB
一.简介 MongoDB 是一个基于分布式 文件存储的NoSQL数据库 由C++语言编写,运行稳定,性能高 旨在为 WEB 应用提供可扩展的高性能数据存储解决方案 查看官方网站 MongoDB特点 模 ...
- FCN 项目部分代码学习
下面代码由搭档注释,保存下来用作参考. github项目地址:https://github.com/shekkizh/FCN.tensorflowfrom __future__ import prin ...
- Python语音识别(计算器)
第一步关于导入模块的事,我试了好几个方法才发现在好像win7系统没有语音识别功能,我用了win10的又需要重新下载一个包 这样子,win32com.client模块就可以使用了 import win3 ...
- Git强制拉取覆盖本地
1.多条执行 git fetch --all git reset --hard origin/master git pull 2.单条执行 git fetch --all && git ...
- zookeeper都有哪些使用场景
分布式协调 这个其实是zk很经典的一个用法,比如,A系统发送个请求到mq,然后B拿到消息消费之后处理了.那A系统如何知道B系统的处理结果? 用zk就可以实现分布式系统之间的协调工作.A系统发送请求之后 ...
- python爬虫实例
import re import requests from bs4 import BeautifulSoup # 主方法 def main(): # 给请求指定一个请求头来模拟chrome浏览器 h ...
- Visual stuio2015 升级 Update 3+安装.Net Core 安装包之后,无法创建Mvc项目
原因: 怀疑是更新后缺少Web Frameworks and Tools 工具, 安装update3的时候提示异常 解决方法: 1.去微软 下载 Web Frameworks and Tools安装后 ...
- 一起学Hadoop——Hadoop的前世今生
Hadoop是什么? Hadoop是一个处理海量数据的开源框架.2002年Nutch项目面世,这是一个爬取网页工具和搜索引擎系统,和其他众多的工具一样,都遇到了在处理海量数据时效率低下,无法存储爬取网 ...
- LNMP分离部署
环境: Nginx+PHP:192.168.2.144 Mysql:192.168.2.151 [Nginx] yum install -y pcre-devel openssl-deve popt- ...
- Nginx编译安装:
第三方模块 在nginx.org -------- wiki 找 --add-module= 添加 Nginx编译安装: 安装开发环境 ]# yum groupinstall " ...