jQuery Verbose Calendar 是一款jquery全屏日历插件,整个日历的颜色是黑白,大气美观。但是官方并没有作过多的介绍,几天我就在这里给大家介绍一下这款插件。由于原插件式英文的日期显示,本站已经修改JS文件汉化了,可以到 网盘下载
1、引入以下的js和css文件
<link rel="stylesheet" href="stylesheets/main.css" type="text/css"media="screen" title="no title" charset="utf-8"> <link rel="stylesheet" href="javascripts/jquery.calendar/calendar.css"type="text/css" media="screen" title="no title" charset="utf-8"> <script src="javascripts/jquery-1.7.1.min.js" type="text/javascript"></script> <script src="javascripts/jquery.calendar/jquery.calendar.js"type="text/javascript" charset="utf-8"></script>
2、在head标签中加入以下js代码
<script> var myDate = new Date(); var y=myDate.getFullYear(); $(document).ready(function() { $("#main-container").calendar({ tipsy_gravity: 's', click_callback: calendar_callback, year: y, scroll_to_date: false }); }); var calendar_callback = function(date) { alert(date.day); } </script>
3、在body标签中加入以下格式的html代码
<div id="main-container"> </div>
参数名 参数取值 参数介绍
tipsy_gravity ‘n’ / ‘s’ / ‘e’ / ‘w’ 但鼠标移动到某个日期上时在哪个方向(东南西北)显示星期几
click_callback 函数 点击某个日期的回调函数
year 整数或字符串 当前选中的日期,默认为当前日期
scroll_to_date 布尔值 初始化时是否滑动到当前日期