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
bootstrap-year-calendar全年日历插件相关推荐
- vue中引入全年日历插件calendar.js
针对依赖amazeui的全年日历插件在vue项目中的问题 cnpm i jquery cnpm i amazeui 在当前vue中引入jquery .amazeui及相关css或这全局引入(看其他是否 ...
- Bootstrap全年日历插件带记事功能
下载地址 实用的Bootstrap3带记事功能的全年日历插件.该日历插件使用简单,可以动态在某个日期上设置备忘录,可以自定义高亮日期样式和选择最大日期和最小日期范围等. dd:
- 日历插件(项目总结)(包括mobiscroll.js LCalendar 和Calendar这三个日历插件)
日历插件的总结,由于在项目中经常用到日历,所以需要总结一下日历插件的用法 日历初始化 var date = new Date(); var today = dateUtil.dateFormat(da ...
- 年季度月周日控件html,基于bootstrap按年、季度、年月、年月日的日历插件(原创)...
插件描述:基于bootstrap按年.季度.年月.年月日的日历插件,作为bootstrapdatetimepicker的扩展 更新时间:2020-07-02 22:02:19 更新说明:修改yk-da ...
- php日期控件calendar.js,轻量级的原生js日历插件calendar.js使用指南
使用说明: 需要引入插件calendar.js/calendar.min.js 须要引入calendar.css 样式表,可以自定义自己想要的皮肤 本日历插件支持cmd模块化 如下调用:xvDate( ...
- python输出日期语句_python使用calendar输出指定年份全年日历的方法
python使用calendar输出指定年份全年日历的方法 本文实例讲述了python使用calendar输出指定年份全年日历的方法.分享给大家供大家参考.具体实现方法如下: import calen ...
- 前端ui组件(1):日程排班—11个优秀JavaScript 日历插件
日历是我们生活中重要的一部分.在当今世界,人们大多使用网络或移动日历.它们随处可见,包括在各种软件中:预订应用.旅行软件.项目管理.管理面板等. 出于多种原因,用户可能需要在网站上使用日历.用户需要容 ...
- fullcalendar日历插件的使用并实现增删改查
我上个项目是做了一个关于教育方面的web端页面,其中的课程表就要用到fullcalendar日历插件,刚开始也是不会用,因为以前也没用过,后面也是看官方文档,问同事,最后完成了这个课程表,个人感觉fu ...
- fullcalendar日历插件的使用并动态增删改查
我上个项目是做了一个关于教育方面的web端页面,其中的课程表就要用到fullcalendar日历插件,刚开始也是不会用,因为以前也没用过,后面也是看官方文档,问同事,最后完成了这个课程表,个人感觉fu ...
最新文章
- PowerBI从SCCM数据库中分析数据和KPI展现
- mini-caffe
- 线性代数之相似矩阵与二次型基础点
- Android @id和@+id区别
- git安装【Windows】
- Android闹钟动画,学习Android闹钟源代码(三)-AlarmClock类分析(part1)
- STM32 基于正电原子开发板,改换芯片为STM32F103R6,Proteus仿真的一些问题
- Spring中bean的五个作用域简介(转载)
- 网站维护404页面带音乐源码CSS本地化
- C语言-apache mod(模块开发)-采用apxs开发实战(centos7.2 linux篇)
- pb调用java webservice_PB调用各类WebService或c#程序
- 灵眸action_DJI OSMO Action 灵眸运动相机
- 将日期转换成大写例如:二零一三年十二月
- 2021年信息学部物联网工程学院学生科协第一次Office大培训
- 快速打造 Android 自定义表情库
- 1156 十个成绩排序
- 教你分析快递揽收后,第二条物流是否超过12小时
- 国家天地图API 创建面 覆盖物
- 1998年图灵奖--詹姆斯·格雷简介
- 【论文解读 ICEIT2022】Heterogeneous Graph Based Knowledge Tracing基于异构图的知识追踪