jQuery全屏日历插件js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery全屏日历插件js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>jQuery全屏日历插件</title>

	<!-- Simple CSS file for HTML page -->
	<link rel="stylesheet" href="stylesheets/main.css" type="text/css" media="screen" title="no title" charset="utf-8">

	<!-- jCalendar CSS - Contains Tipsy CSS - Delete as needed -->
	<link rel="stylesheet" href="javascripts/jquery.calendar/calendar.css" type="text/css" media="screen" title="no title" charset="utf-8">

	<!-- Source jQuery -->
	<script src="javascripts/jquery-1.7.1.min.js" type="text/javascript"></script>

	<!-- Source CalendarJS - Contains Tipsy jQuery Plugin - Delete as needed -->
	<script src="javascripts/jquery.calendar/jquery.calendar.js" type="text/javascript" charset="utf-8"></script>

	<!-- Call the Calendar -->
	<script>
	    var myDate = new Date();
	    var y=myDate.getFullYear();
		$(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: y, // Optional, defaults to current year - pass in a year - Integer or String
				scroll_to_date: false // Scroll to the current date?
			});
		});

		//
		// Example of callback - do something with the returned date
		var calendar_callback = function(date) {
			
			//
			// Returned date is a date object containing the day, month, and year.
			// date.day = day; date.month = month; date.year = year;
		    alert(date.day);
			console.log(date);
		}
	</script>
</head>
<body>
	<div id="main-container">
	</div>
</body>
</html>

CSS代码(main.css):

body{margin:0;padding:0;font-family:Helvetica,Arial,sans-serif;background:url('../images/bg-body.gif');}
#header{height:34px;color:#FFF;padding:16px 0 0 20px;background-color:#2C2C2C;background-image:-moz-linear-gradient(top,#333,#222);background-image:-ms-linear-gradient(top,#333,#222);background-image:-webkit-gradient(linear,0 0,0 100%,from(#333),to(#222));background-image:-webkit-linear-gradient(top,#333,#222);background-image:-o-linear-gradient(top,#333,#222);background-image:linear-gradient(top,#333,#222);background-repeat:repeat-x;filter:progid:dximagetransform.microsoft.gradient(startColorstr='#333333',endColorstr='#222222',GradientType=0);-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.25),inset 0 -1px 0 rgba(0,0,0,0.1);-moz-box-shadow:0 1px 3px rgba(0,0,0,0.25),inset 0 -1px 0 rgba(0,0,0,0.1);box-shadow:0 1px 3px rgba(0,0,0,0.25),inset 0 -1px 0 rgba(0,0,0,0.1);}
#main-container{margin:0 0 0 0;}
a{color:#00a2ff;text-decoration:none;}
a:hover{text-decoration:underline;}

附件:下载该文件资源,减少时间成本(增值服务)