脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jQuery支持添加事件的日历特效

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

 更新时间：2015年08月24日 15:07:37   投稿：lijiao  
这篇文章主要介绍了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中table数据的值拷贝和拆分

    jQuery中table数据的值拷贝和拆分

    在开发的过程中，经常会遇到弹出框显示前一页table列表的情况，这时候会有好多方法来来解决。下面小编给大家介绍怎么用jquery将值拷贝到第二页并拆分拷贝的值，需要的朋友参考下
    2017-03-03
  • jQuery大于号(>)选择器的作用解释

    jQuery大于号(>)选择器的作用解释

    这篇文章主要介绍了jQuery大于号(>)选择器的作用解释,本文用代码实例讲解jQuery大于号的作用,需要的朋友可以参考下
    2015-01-01
  • jquery+CSS实现的水平布局多级网页菜单效果

    jquery+CSS实现的水平布局多级网页菜单效果

    这篇文章主要介绍了jquery+CSS实现的水平布局多级网页菜单效果,涉及jquery页面元素属性动态变换效果实现技巧,非常具有实用价值,需要的朋友可以参考下
    2015-08-08
  • jquery插件 cluetip 关键词注释

    jquery插件 cluetip 关键词注释

    有时,要实现对于一篇文章的关键词部分的提示,想实现的效果比如是,当鼠标移动到这个关键词时,弹出相关的一段文字或图片的介绍。
    2010-01-01
  • Jquery中"$(document).ready(function(){ })"函数的使用详解

    Jquery中"$(document).ready(function(){ })"函数的使用详解

    本篇文章主要是对Jquery中"$(document).ready(function(){ })"函数的使用进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2013-12-12
  • JQuery 学习笔记 选择器之四

    JQuery 学习笔记 选择器之四

    以下是测试例子，这边测试例子不再像之前几章以显示HTML与ID的方式来查看结果，换以改变红色背景颜色来查看，应该会更直观点吧^^
    2009-07-07
  • jQuery简单实现title提示效果示例

    jQuery简单实现title提示效果示例

    这篇文章主要介绍了jQuery简单实现title提示效果的方法,结合实例形式分析了jQuery封装与使用title提示框的方法,需要的朋友可以参考下
    2016-08-08
  • jquery常用的12个小功能

    jquery常用的12个小功能

    12个jquery常用功能，极好的，分享给大家，帮助大家更好的进行jQuery开发，感兴趣的小伙伴们可以参考一下
    2016-07-07
  • jquery模拟多级复选框效果的简单实例

    jquery模拟多级复选框效果的简单实例

    下面小编就为大家带来一篇jquery模拟多级复选框效果的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • jQuery+ajax实现局部刷新的两种方法

    jQuery+ajax实现局部刷新的两种方法

    在项目中，经常会用到ajax，比如实现局部刷新，比如需要前后端交互等，这里呢分享局部刷新的两种方法，主要用的是ajax里面的.load()。感兴趣的朋友一起看看吧
    2017-06-06

最新评论