jQuery支持添加事件的日历特效代码分享(3种样式)_jquery

支持添加事件jQuery日历是一款可以实时添加删除时间的jquery日历插件代码,感兴趣的朋友快来学习学习吧
运行效果图:----------------------查看效果 下载源码-----------------------

小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。
为大家分享的jQuery支持添加事件的日历特效代码如下

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>支持添加事件jQuery日历</title>
<link rel="stylesheet" href="style/documentation.css" type="text/css" />
<link rel="stylesheet" href="style/jalendar.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script><!--jQuery-->
<script type="text/javascript" src="js/jalendar.js"></script>
<script type="text/javascript">
$(function () {
 $('#myId').jalendar({
 customDay: '2017/12/01', // Format: Year/Month/Day
 color: '#ed145a', // Unlimited Colors
 lang: 'EN' // Format: English — 'EN', Türkçe — 'TR'
 });
 $('#myId2').jalendar({
 customDay: '2016/02/29',
 color: '#023447',
 lang: 'ES'
 });
 $('#myId3').jalendar();
});
</script>

</head>

<body>

<article>

 <div id="myId" class="jalendar">
 <div class="added-event" data-date="14/12/2017" data-time="Tüm Gün" data-title="WWDC 13 on San Francisco, LA"></div>
 <div class="added-event" data-date="16/12/2017" data-time="20:45" data-title="Tarkan İstanbul Concert on Harbiye Açık Hava Tiyatrosu"></div>
 <div class="added-event" data-date="17/12/2017" data-time="21:00" data-title="CodeCanyon İstanbul Meeting on Starbucks, Kadıköy"></div>
 <div class="added-event" data-date="17/12/2017" data-time="22:00" data-title="Front-End Design and Javascript Conferance on Haliç Kongre Merkezi"></div>
 <div class="added-event" data-date="17/12/2017" data-time="22:00" data-title="Lorem ipsum dolor sit amet"></div>
 </div>

<div id="myId2" class="jalendar"></div>

<div id="myId3" class="jalendar mid">
 <div class="added-event" data-date="9/8/2013" data-time="Tüm Gün" data-title="WWDC 13 on San Francisco, LA"></div>
 <div class="added-event" data-date="16/8/2013" data-time="20:45" data-title="Tarkan İstanbul Concert on Harbiye Açık Hava Tiyatrosu"></div>
 <div class="added-event" data-date="17/8/2013" data-time="21:00" data-title="CodeCanyon İstanbul Meeting on Starbucks, Kadıköy"></div>
 <div class="added-event" data-date="17/8/2013" data-time="22:00" data-title="Front-End Design and Javascript Conferance on Haliç Kongre Merkezi"></div>
 <div class="added-event" data-date="17/12/2017" data-time="22:00" data-title="Lorem ipsum dolor sit amet"></div>
</div>
</article>
<div style="text-align:center;clear:both">
</div>
</body>
</html>

以上就是为大家分享的jQuery支持添加事件的日历特效代码,希望大家可以喜欢。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索jquery
, 日历
事件
日历样式、css日历样式、html5 css3日历样式、日历特效、css列表样式 特效,以便于您获取更多的相关知识。

时间: 2024-10-29 14:02:01

jQuery支持添加事件的日历特效代码分享(3种样式)_jquery的相关文章

jquery点击缩略图切换视频播放特效代码分享_jquery

本文实例讲述了jquery点击缩略图切换视频播放特效.分享给大家供大家参考.具体如下: jquery点击缩略图切换视频播放是一款非常实用的播放代码,点击视频缩略图切换优酷视频播放的视频播放选项卡代码,支持flash视频切换选项卡. 运行效果图:      -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jquery点击缩略图切换视频播放特效代码如下 <!DOCTYPE html

jQuery UI设置固定日期选择特效代码分享_jquery

本文实例讲述了jQuery UI设置固定日期选择特效.分享给大家供大家参考.具体如下: jQuery实现UI设置固定日期选择特效是一款jQuery ui日期插件,可选固定日期及自定义日期代码. 运行效果图:                             -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jQuery UI设置固定日期选择代码如下 <head> <m

jQuery超精致图片轮播幻灯片特效代码分享_jquery

本文实例讲述了jQuery超精致图片轮播幻灯片特效.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现超精致图片轮播幻灯片特效代码,实现过程很简单. 运行效果图:                               -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. (1)在head区域引入CSS样式: <link href="styles/97zzw.css"

jquery实现叠层3D文字特效代码分享_jquery

jquery实现叠层3D文字特效是一款效果非常酷,实现代码也很简单,没有用HTML5和CSS3元素,纯粹用Jquery代码实现的. 运行效果图:------------------------------效果演示----------------------------- 为大家分享的jquery实现叠层3D文字特效代码如下 <head> <meta http-equiv="Content-Type" content="text/html; charset=u

jquery实现横向图片轮播特效代码分享_jquery

一个纯jq形式的横向轮播焦点图,可点击小圆点或者左右按钮进行切换,属于定宽类型.改成自适应宽度的也不难,将css里面的bannerCon宽度改为百分比,再在js里面将ul和li的宽度跟随父级容器的宽度变化即可,需要用到$(window).resize. 兼容到IE6+以上浏览器,有轮播速度和切换间隔两个参数可以改.效果图如下: Html代码如下: <!doctype html> <html lang="zh-CN"> <head> <meta

jQuery实现输入框下拉列表树插件特效代码分享_jquery

本文实例讲述了jQuery实现输入框下拉列表树插件.分享给大家供大家参考.具体如下: 这是一款基于jquery实现的下拉列表树插件源码,是一款实用的jquery 树形下拉框下拉树代码.点击文本框即可弹出树形下拉列表,单击列表项即可选中列表对应文字,是一款非常实用的特效源码. 运行效果图:                     -------------------查看效果 下载源码-------------------   小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的

jquery图片轮播特效代码分享_jquery

本文实例讲述了jquery图片轮播特效.分享给大家供大家参考.具体如下: 这是一款仿淘宝首页jquery轮播焦点图,基于jquery实现仿淘宝网首页正中间小焦点图特效. 运行效果图:         -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jquery图片轮播特效代码如下 <!DOCTYPE html> <head> <meta http-equiv=

jQuery实现图片轮播特效代码分享_jquery

本文实例讲述了jQuery超精致图片轮播幻灯片特效.分享给大家供大家参考.具体如下: jquery图片轮播插件PgwSlider是一款非常简单的jquery插件,它可以帮你快速创建一个垂直轮播图. 运行效果图:  小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. (1)在head区域引入CSS样式: <link href="css/pgwslider.min.css" rel="stylesheet"> (2)js代码: <script s

jquery专业的导航菜单特效代码分享_jquery

本文实例讲述了jquery专业的下拉菜单特效.分享给大家供大家参考.具体如下: 这是一款基于jquery实现的专业下拉菜单特效,蓝色风格的下拉菜单非常经典,网站是否有一个具有吸引力的导航会影响到用户停留时间的长久,就像小编编辑的文章内容影响亲们的访问时间长久一样.大家要学会如何建立一个属于自己网站风格的导航菜单. 运行效果图:-------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 关键代码: stu