jQuery Verbose Calendar:显示整年的 jQuery 日历插件
jQuery Verbose Calendar 是一个可以把整年的日历显示在一个页面上的 jQuery 插件,加载之后,它会自动滚到今天的日期处,当你鼠标移动到日期上,可以显示今天星期几。并且这个日历插件支持 Callback 函数,当你点击某个日期的时候,你可以执行一些自定义行为,或者插入任意的 HTML 元素。
因为整年的日期都显示在一个页面上,所以这个日历用来分享事件和任务会非常方便。
jQuery Verbose Calendar 演示
jQuery Verbose Calendar 使用
先加载 CSS 文件,jQuery 和 jQuery Verbose Calendar 类库。
<link rel="stylesheet" href="http://iamjpg.github.com/jQuery-Verbose-Calendar/stylesheets/main.css" type="text/css" media="screen">
<link rel="stylesheet" href="http://iamjpg.github.com/jQuery-Verbose-Calendar/javascripts/jquery.calendar/calendar.css" type="text/css" media="screen" >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="javascripts/jquery.calendar/jquery.calendar.js" type="text/javascript" charset="utf-8"></script>
调用日历并显示:
<!-- Call the Calendar -->
<script>
$(document).ready(function() {
$("#main-container").calendar({
tipsy_gravity: 's', // How do you want to anchor the tipsy notification? (n / s / e / w)
click_callback: calendar_callback, // Callback to return the clicked date
year: "2012", // Optional, defaults to current year - pass in a year - Integer or String
scroll_to_date: true // Scroll to the current date?
});
});
// Example of callback - do something with the returned date
var calendar_callback = function(date) {
alert("Open your Javascript console to see the returned result object.");
console.log(date);
}
</script>