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

水深无声 2022-08-06 02:24 200阅读 0赞

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

![jquery-calendar-with-event][]

[在线预览][Link 1]   [源码下载][Link 2]

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

HTML代码：

![复制代码][copycode.gif]

![复制代码][copycode.gif]

CSS代码：

![复制代码][copycode.gif]

.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;
    }

![复制代码][copycode.gif]

jQuery代码：

![复制代码][copycode.gif]

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

![复制代码][copycode.gif]

via:[http://www.w2bc.com/Article/12683][http_www.w2bc.com_Article_12683]

[![041405283617635.gif][]][041405283617635.gif 1]

[萌萌的IT人][IT]

[jquery-calendar-with-event]: /images/20220806/fcba4a89bc2c4191b7ec9774d04e516f.png
[Link 1]: http://www.w2bc.com/demo/2014-12-15-jquery-calendar-with-event/index.html
[Link 2]: http://www.w2bc.com/article/12683
[copycode.gif]: /images/20220806/16111d598a2e4cde955430ccb31896cf.png
[http_www.w2bc.com_Article_12683]: http://www.w2bc.com/Article/12683
[041405283617635.gif]: /images/20220806/e9eca5adfc084e3ba7135a549441406b.png
[041405283617635.gif 1]: http://www.itmmd.com/boke.html
[IT]: http://www.itmmd.com