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


Posted in Javascript onAugust 24, 2015

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

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

小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。
为大家分享的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支持添加事件的日历特效代码,希望大家可以喜欢。

Javascript 相关文章推荐
漂亮的widgets,支持换肤和后期开发新皮肤(2007-4-27已更新1.7alpha)
Apr 27 Javascript
JSON 入门指南 想了解json的朋友可以看下
Aug 26 Javascript
jquery blockUI 遮罩不能消失与不能提交的解决方法
Sep 17 Javascript
我的Node.js学习之路(四)--单元测试
Jul 06 Javascript
JavaScript中的console.group()函数详细介绍
Dec 29 Javascript
JavaScript节点及列表操作实例小结
Aug 05 Javascript
JavaScript淡入淡出渐变简单实例
Aug 06 Javascript
js replace(a,b)之替换字符串中所有指定字符的方法
Aug 17 Javascript
详解Vue.js搭建路由报错 router.map is not a function
Jun 27 Javascript
JS库之Three.js 简易入门教程(详解之一)
Sep 13 Javascript
ES6关于Promise的用法详解
May 07 Javascript
JS定时器如何实现提交成功提示功能
Jun 12 Javascript
jQuery实现的多级下拉菜单效果代码
Aug 24 #Javascript
js贪吃蛇网页版游戏特效代码分享(挑战十关)
Aug 24 #Javascript
jquery马赛克拼接翻转效果代码分享
Aug 24 #Javascript
jquery+CSS实现的水平布局多级网页菜单效果
Aug 24 #Javascript
jQuery实现的背景动态变化导航菜单效果
Aug 24 #Javascript
jquery带下拉菜单和焦点图代码分享
Aug 24 #Javascript
javascript中SetInterval与setTimeout的定时器用法
Aug 24 #Javascript
You might like
聊天室php&amp;mysql(四)
2006/10/09 PHP
推荐个功能齐全的发送PHP邮件类
2007/01/03 PHP
MySQL数据源表结构图示
2008/06/05 PHP
两级联动select刷新后其值保持不变的实现方法
2014/01/27 PHP
Windows下的PHP 5.3.x安装 Zend Guard Loader教程
2014/09/06 PHP
laravel批量生成假数据的方法
2019/10/09 PHP
Jquery UI震动效果实现原理及步骤
2013/02/04 Javascript
cookie.js 加载顺序问题怎么才有效
2013/07/31 Javascript
Bootstrap嵌入jqGrid,使你的table牛逼起来
2016/05/05 Javascript
jQuery实现背景弹性滚动的导航效果
2016/06/01 Javascript
学习JavaScript图片预加载模块
2016/11/07 Javascript
移动端web滚动分页的实现方法
2017/05/05 Javascript
Angular 向组件传递模板的两种方法
2018/02/23 Javascript
angular json对象push到数组中的方法
2018/02/27 Javascript
详解vue中localStorage的使用方法
2018/11/22 Javascript
iview的table组件自带的过滤器实现
2019/07/12 Javascript
解决一个微信号同时支持多个环境网页授权问题
2019/08/07 Javascript
解决layer 关闭当前弹窗 关闭遮罩层 input值获取不到的问题
2019/09/25 Javascript
JS数据类型STRING使用实例解析
2019/12/18 Javascript
[01:00:49]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第二场 1月31日
2021/03/11 DOTA
Python自定义函数的创建、调用和函数的参数详解
2014/03/11 Python
python函数局部变量用法实例分析
2015/08/04 Python
pyqt5 实现工具栏文字图片同时显示
2019/06/13 Python
详解python 中in 的 用法
2019/12/12 Python
pytorch之ImageFolder使用详解
2020/01/06 Python
AmazeUI 单选框和多选框的实现示例
2020/08/18 HTML / CSS
苹果香港官方商城:Apple香港
2016/09/14 全球购物
物业管理求职自荐信
2013/09/25 职场文书
车间班组长岗位职责
2013/11/13 职场文书
医生进修自我鉴定
2014/01/19 职场文书
运动会广播稿150字
2014/02/19 职场文书
不忘国耻振兴中华演讲稿
2014/05/14 职场文书
学前教育专业求职信
2014/09/02 职场文书
2014教师专业技术工作总结
2014/12/03 职场文书
小学生毕业评语
2014/12/26 职场文书
Oracle设置DB、监听和EM开机启动的方法
2021/04/25 Oracle