一款基于jQuery带事件记录的日历插件

之前我们也已经分享过不少jQuery日历插件,有些应用了CSS3的特性,外观就特别漂亮。今天要分享的这款jQuery日历插件不仅有着绚丽的外观,而且带有日期事件记录功能,点击日期即可展开事件记录窗口,你可以设置事件的描述以及提醒的时间,是一款相对实用的jQuery日历插件。

在线预览   源码下载

接下来我们一起来看看实现这款jQuery带事件记录功能的日历插件的实现过程及源码,代码主要由HTML、CSS和jQuery组成。

HTML代码:

<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>

CSS代码:

.jalendar {
    position: relative;
    width: 300px;
    margin: 30px auto;
}
.jalendar .left {
    float: left;
}
.jalendar .clear {
    clear: both;
}
.jalendar.mid {
    width: 420px;
}
.jalendar .added-event {
    display: none;
}
.jalendar-wood {
    position: relative;
    background: url(‘../images/jalendar-wood-bg.png‘) left top;
    border-radius: 10px;
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.7), inset 0 -2px 10px rgba(255,255,255,0.3);
    padding: 15px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    border-top: 1px solid #e1bf89;
    border-right: 1px solid #b4925d;
    border-left: 1px solid #b4925d;
    display: inline-block;
    z-index: 2;
}

jQuery代码:

$(function () {
    $(‘#myId‘).jalendar({
        customDay: ‘2017/12/01‘,  // Format: Year/Month/Day
        color: ‘#ed145a‘, // Unlimited Colors
        lang: ‘EN‘ // Format: English — ‘EN‘, Türkçe — ‘TR‘
    });
});

via:http://www.w2bc.com/Article/12683

时间: 2024-10-22 09:06:31

一款基于jQuery带事件记录的日历插件的相关文章

一款基于jquery带百分比的响应式进度加载条

今天要给大家带来一款基于jquery带百分比的响应式进度加载条.这款加载条非常漂亮,而且带有进度的百度比,且在不同的百分比用的是不同的颜色.而且这款加载条采用了响应式设计,在不同的分辨率的显示器下完美支持.一起看下效果图吧. 在线预览   源码下载 实现的代码. html代码: <h1> Battle.net <b>style progress bar</b></h1> <div class="progress"> <b

推荐20款基于 jQuery &amp; CSS 的文本效果插件

jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQuery 插件. 所以今天我们将展示一些很酷的文本效果插件,将帮助你为你的 Web 页面创建一些很酷的和动态的东西.这里是20个基于 jQuery & CSS 的文本效果插件. 您可能感兴趣的相关文章 12款经典的白富美型 jQuery 图片轮播插件 让网站动起来!12款优秀的 jQuery 动画插件

基于jQuery带标题的图片3D切换焦点图

今天给大家分享一款基于jQuery带标题的图片3D切换焦点图.这款焦点图适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 在线预览   源码下载 实现的代码. html代码: <div id="wowslider-container"> <div class="ws_images"> <ul> <li><a href="#"> &

基于jQuery带备忘录功能的日期选择器

今天给大家分享一款基于jQuery带备忘录功能的日期选择器.这款日期控制带有备记忘录功能.有备忘录的日期有一个圆圈,单击圆圈显示备忘录.该实例适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8及以下浏览器.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="container"> <header class="htmleaf-header">

基于jQuery带动画的超炫酷弹出对话框

这是一款基于jQuery的弹出对话框插件,这个jQuery对话框插件的最大特点是弹出和关闭都带有非常炫酷的动画特效,比如旋转飞入.上下抖动飞入等.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="container"> <h1>jQuery gDialog Plugin Exampels</h1> <button class="btn demo-1">Alert Dialog

基于jQuery超级酷动画滑动插件

分享一款基于jQuery超级酷动画滑动插件.这是一款基于jquery.pogo-slider插件实现的多个滑块切换特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="pogoSlider" id="js-main-slider"> <div class="pogoSlider-slide" data-transition="slideOverLeft" data-

10款基于jQuery打造的大屏带导航焦点图

1.纯CSS3实现3D效果iPhone 6动画 iPhone 6刚发布不久,今天我们就用纯CSS3来把iPhone 6的外观简单地绘制出来,记得是用纯CSS3实现的哦,没有用一张图片.由于CSS3特性的运用,整个iPhone 6手机边框带有阴影,很有立体3D的视觉效果. 在线演示 源码下载 2.纯CSS3天气动画图标 这是一款基于纯CSS3的天气动画图标,利用CSS3特性,我们在这里绘制了7个关于天气的图标,并且每一个图标都有一套代表当前天气的动画特效,比如下雨天气,就会有下雨的动画,下雪也是如

一款基于jQuery的带Tooltip表单验证的注册表单

今天给大家分享一款基于jQuery的注册表单,这款注册表单的特点是确认提交注册信息时,表单会自动验证所填写的信息,如果信息填写有误,即会在相应的字段内以Tooltip提示框的形式显示错误信息.这款jQuery表单实现非常简单,使用起来相对比较轻巧. 在线预览   源码下载 这款插件js要引用jquery.js库,还有一个easyform.js 库. html代码部分如下: <div class="form-div"> <form id="reg-form&q

一款基于jQuery外观优雅带遮罩弹出层对话框

今天我们要来分享一款基于jQuery的弹出层对话框插件,该插件包含多种对话框类型,比如提示框.确认框等.更为实用的是,这款jQuery对话框中的按钮事件也可以被我们所捕获,从而相应对话框按钮的各种事件,用起来非常方便. 在线预览   源码下载 实现的代码. html代码: <center class="demo"> <button onclick="payment();">缴费提示层</button> <button onc