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>

下载:jQuery Verbose Calendar

标签:

热门文章