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

页面导航:首页 > 网络编程 > JavaScript > 一款基于jQuery带事件记录的日历插件

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

来源: 作者: 时间:2016-02-05 11:06 【

之前我们也已经分享过不少jQuery日历插件,有些应用了CSS3的特性,外观就特别漂亮。今天要分享的这款jQuery日历插件不仅有着绚丽的外观,而且带有日期事件记录功能,点击日期即可展

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

jquery-calendar-with-event

在线预览 源码

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

HTML代码:

复制代码

 
 
 
 
 
复制代码

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'
    });
});

Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<