11个实用jQuery日历插件

1. FullCalendar

FullCalendar是很出名的jQuery日历插件,它支持拖拽等功能,整合了Google Calendar,而且可以通过JSON来绑定事件,设计师可以轻松地自定义日历样式,工程师则利用它提供的接口来处理用户触发事件。


FullCalendar

 

2. Astonishing iCal-like Calendar

这里是一篇教程,教你如何利用jQuery和CSS制作一个模仿iphone样式的日历控件。

 

Astonishing iCal-like Calendar

 

3. jQuery UI Datepicker

jQuery UI Datepicker 是一个提供了很多配置项的日历插件,你可以自定义日期的格式和语言,可通过按钮限制可选的日期范围,也可轻松地添加其他功能的按钮。

 

jQuery UI Datepicker

 

4. jMonthCalendar

jMonthCalendar支持没个月份里的所有天数添加内容,本身可以应用到开发工作中。

 

jMonthCalendar

 

5. Date Picker

Date Picker 遵循MIT & GPL发布.,有着很多的配置项和特性,例如你可以同时打开多个日期选择器,轻松地通过修改css来自定义样式,支持多种日期选择模式。

 

Date Picker

 

6. jQuery Week Calendar

jQuery Week Calendar 是一个在web应用中显示一周情况的插件,可以通过数据或者JSON来绑定相应的触发事件,而且这些事件都可以拖拽、缩放,而且还有很多选项和事件回调函 数可以使用在应用中,具体的可以参考官方文档。

 

jQuery Week Calendar

 

7. Simple jQuery Date-picker Plugin

这是一个很简洁的日期选择器,但是提供了很多实用功能。

 

Simple jQuery Date-picker Plugin

 

8. jQuery Date Picker Plugin

跟上面介绍的类似,在显示风格上略有区别。


jQuery Date Picker Plugin

 

9. jQuery Interactive Date Range Picker

这个强大的日历控件时jQqueryUI中日历组建的改良版,它有十分平滑的显示过渡效果,最新版使用的是jQuery UI 1.7 一级 jQuery UI CSS 框架,你可以通过jQuery UI来修改出自己期望的效果.


jQuery Interactive Date Range Picker

 

10. jMonthCalendar

 

jMonthCalendar是一个jQuery插件用于创建以月视图显示的事件日历表(event calendar)。jMonthCalendar支持跨天的事件和通过拖放操作更新事件数据。
jMonthCalendar.jpg

 

主页:http://www.bytecyclist.com/projects/jmonthcalendar/ 
下载:http://code.google.com/p/jmonthcalendar/downloads/list 
DEMO:http://www.bytecyclist.com/SourceCode/jMonthCalendar/1.3.0-beta/Demo.html

 

 

11. jquery week-calendar

 

这是一个周日历jQuery插件。能够在周日历网格中显示事件。日历事件可以从数组,URL或JSON取得。日历事件可以被随意拖曳,调整占用区域的大 小。在该插件初始化时会自动滚动到当前时间所在的单元格。可以自定义各种事件的回调操作比如:drag、drop、resize、mouseover、 click等。可以按自己需求扩展该插件的核心日历事件数据结构。
jquery_week-calendar.jpg

 

主页:http://www.redredred.com.au/projects/jquery-week-calendar/ 
下载:http://code.google.com/p/jquery-week-calendar/ 
DEMO:http://www.redredred.com.au/wp-content/uploads/2009/05/weekcalendar.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
之前在网上想找一个简单易用的周日历选择插件,发现这种前端周日历插件很少,而且很多文章写的周的算法都不是统一的,所以自己实现了一个基于jquery的周日历插件(还支持跳转到指定年份和周哦)。 插件中周的算法:每周以周日为起始,第一周以每年第一个星期四所在的周为第一周(网上找的好像这个算法比较正规) 实现的效果是在手机端,也可以在PC端用,毕竟功能才是主要的。如果觉得样式不入眼可以自行随意修改。 //调用周日历方法 var weekfn = new jcalendar_week({ element: "#jcalendar_week",//填充日历的dom元素 dayaddclass:function(date){ //添加某天时给添加类名(参数:1.日期)(返回类名字符串,多个以空格分开) return ""; }, dayclick:function(date,obj){ //day点击事件(参数:1.日期,2.所点击DOM元素) $(obj).addClass("calendar_day_act").siblings().removeClass("calendar_day_act"); } }); 点击上方显示当前年份和周的DOM部分可选择并跳转到指定年份和周。 插件提供的方法: //获取周第一天方法weekfirstdate(),传入年份和周数 console.log(weekfn.weekfirstdate(2018,36)); //获取传入日期为当年第几周getweeknum(),传入年,月,日(注:这里的月份从0开始) console.log(weekfn.getweeknum(2018,0,16)); //跳转到指定周confirmweek(),传入年份和周数 weekfn.confirmweek(getyear,getweek); //跳转到本周nowweek() weekfn.nowweek();
### 回答1: jQuery日历签到插件是一种使用jQuery框架开发的日历插件,它可以帮助开发者在网站或应用中快速添加日历签到功能。通常,这类插件可以让用户在日历中点击签到,并在签到后标记已签到的日期。有很多jQuery日历签到插件可供选择,例如:jquery-simple-datetimepicker,jQuery UI Datepicker 等。 ### 回答2: jQuery日历签到插件是一种用于在网页上创建并管理签到功能的插件。它基于最流行的JavaScriptjQuery开发,具有使用方便、功能强大的特点。 使用jQuery日历签到插件,我们可以轻松地在网站或应用中添加一个日历,让用户进行签到。用户可以通过点击日历中的日期来实现签到操作。插件会自动记录用户的签到历史,让用户可以随时查看过去签到的日期。 该插件提供了丰富的定制化选项,可以根据需求设置签到的样式、颜色、日期格式等。我们可以自定义插件的外观,使其与网站的整体风格保持一致。 在签到过程中,插件会根据用户的签到情况进行更新,例如标记已签到的日期、显示签到天数等。用户可以在日历上清晰地看到自己的签到进度,从而激励自己保持连续签到的动力。 除了基本的签到功能外,该插件还提供了一些有用的扩展功能,例如签到排名、分享到社交媒体等。这些功能可以增加用户的参与度和互动性,使签到活动更加有趣和吸引人。 总之,jQuery日历签到插件是一款方便实用的工具,能够轻松地在网页上添加签到功能,增强用户的参与度和互动性。无论是个人博客、在线商城还是社区论坛,都可以通过该插件为用户提供方便快捷的签到体验。 ### 回答3: jQuery日历签到插件是一种基于jQuery库开发的插件,用于在网站或应用程序中实现日历式的签到功能。这个插件可以方便地帮助用户记录自己的签到情况,并且可以显示签到的日期、统计签到次数等信息。 这个插件具有以下特点: 1. 界面美观:插件提供了精美的界面设计,用户可以直观地看到自己的签到情况。 2. 签到操作简单:用户可以通过点击日历来进行签到操作,无需繁琐的操作步骤。 3. 签到状态显示:已签到的日期会有特殊的标记,用户可以一目了然地知道哪些日期已经签到。 4. 签到记录统计:插件提供了签到次数的统计功能,用户可以知道自己的签到情况和坚持程度。 5. 可定制性强:插件提供了丰富的配置选项,用户可以根据自己的需求进行自定义设置,比如自定义签到图标、签到规则等。 使用这个插件,网站或应用程序可以方便地实现签到功能,提升用户的参与度和黏性。无论是健身签到、学习签到还是其他类型的签到,这个插件都能满足用户的需求。同时,由于基于jQuery开发,插件具有良好的兼容性和扩展性,可以与其他jQuery插件或功能进行集成。 综上所述,jQuery日历签到插件是一款功能强大、操作简单、界面美观的插件,适用于各种类型的签到应用。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值