前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >jQuery Verbose Calendar:显示整年的 jQuery 日历插件

jQuery Verbose Calendar:显示整年的 jQuery 日历插件

作者头像
Denis
发布2023-04-15 15:23:39
1.9K0
发布2023-04-15 15:23:39
举报
文章被收录于专栏:WordPress果酱

jQuery Verbose Calendar 是一个可以把整年的日历显示在一个页面上的 jQuery 插件,加载之后,它会自动滚到今天的日期处,当你鼠标移动到日期上,可以显示今天星期几。并且这个日历插件支持 Callback 函数,当你点击某个日期的时候,你可以执行一些自定义行为,或者插入任意的 HTML 元素。

因为整年的日期都显示在一个页面上,所以这个日历用来分享事件和任务会非常方便。

jQuery Verbose Calendar 演示

请到 http://blog.wpjam.com/m/jquery-verbose-calendar/ 查看演示。

jQuery Verbose Calendar 使用

先加载 CSS 文件,jQuery 和 jQuery Verbose Calendar 类库。

代码语言:javascript
复制
<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>

调用日历并显示:

代码语言:javascript
复制
<!-- 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


本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • jQuery Verbose Calendar 演示
  • jQuery Verbose Calendar 使用
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档