关于日历控件,我做了好多次尝试,一直致力于开发一款简单易用的日历控件。我的想法是争取在引用这个控件后,用一行js代码就能做出一个日历,若在加点参数,就能自定义外观和功能丰富多彩的日历。Calendar 3.1是我初步满意的一个作品。

日历的常用场景有两种,一种是用在日期选择器里面,比如某个位置需要输入日期,点一下输入框会弹出一个日历以供选择日期;另一种是单纯的显示作用,在页面某个地方显示日历,一般起装饰作用,很多博客首页都会有这种日历。我前面的随笔介绍的都是第一种日历,而今天要介绍的Calendar 3.1是第二种日历。有兴趣的朋友可以去我的github主页上查看,https://github.com/dige1993/calendar.git

首先当然要看的是效果,先看一张素颜:

然后在调用过程中指定若干参数,可以定义出比较漂亮的日历,这里仅仅是演示,上一张红绿配的丑照:

在区域宽度小于200px的时候,会提示无法正常显示日历:

接下来看下这款控件的用法。

首先照例是引用jquery库和calendar-3.1-js,然后准备一个width>=200px的div,高度最好自适应内容,如果这个div的id为test,则只要一句calendar_init($("#test"));就能在div内显示日历了。代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Calendar 3.1</title>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/calendar-3.1.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
    calendar_init($("#test"));//在id=test的DIV中显示日历
});
</script>

<style>
#test {
    width:200px;
    height:auto;
    overflow:hidden;
    border:solid 1px;
    margin-bottom:20px;
}
</style>
</head>

<body>
    <div id="test"></div>
</body>
</html>

以上就是素颜效果的代码,如果还想自定义UI,可以在调用calendar_init()时加上第二个参数。浓妆照的代码如下:

calendar_init($("#test"),{
        title_color:"yellow",
        title_bg_color:"red",
        day_color:"brown",
        day_bg_color:"green",
        date_bg_color:"pink",
        date_color:"blue",
        date_active_color:"red"
    });

calendar_init函数的第二个参数是可选项,类型是包含键值对的对象,下面用表格介绍下这个参数的每个键的含义及其取值:

参数 含义及取值
title_bg_color 年月区域的背景颜色,取值遵循web色彩取值规范,默认透明
title_color 年月区域的字体颜色,包括那几个按钮的前景色,取值遵循web色彩取值规范,默认透明
line_style 年月区域与星期区域的分隔线的style,取值遵循css边框取值规范,默认值:solid 1px
day_bg_color 星期区域的背景颜色,取值遵循web色彩取值规范,默认透明
day_color 星期区域的字体颜色,取值遵循web色彩取值规范,默认透明
date_bg_color 日期区域的背景颜色,取值遵循web色彩取值规范,默认透明
date_color 日期区域的字体颜色,取值遵循web色彩取值规范,默认透明
date_active_color 当前日期的背景颜色,取值遵循web色彩取值规范,默认透明
line_height 行高,默认30px

calendar_init函数的第一个参数是必需项,用于指示在哪个容器里面显示日历。如果容器的宽度小于200px, 还会出现上面第3张图里面的错误提示。更多内容呢,请访问我的github主页:https://github.com/dige1993/calendar.git

网页日历显示控件calendar3.1的更多相关文章

  1. ASP.NET MVC显示WebForm网页或UserControl控件

    ASP.NET MVC显示WebForm网页或UserControl控件 学习与使用ASP.NET MVC这样久,还是对asp.net念念不忘.能否在asp.net mvc去显示aspx或是user ...

  2. 转网页WB.ExecWB控件打印方法

    网页WB.ExecWB控件打印方法 2010-02-01 12:48 代码: <table width="100%" cellpadding="1" on ...

  3. [习题]日历(Calendar)控件的障眼法(.Visible属性),使用时才出现?不用就消失?

    原文出處  http://www.dotblogs.com.tw/mis2000lab/archive/2013/09/02/calendar_icon_visible.aspx [习题]日历(Cal ...

  4. 抽屉显示控件SlidingDrawer入门

    SlidingDrawer是一个抽屉控件,代码具体路径为:android.widget.SlidingDrawer,该控件从API  Level3引入,在API 17及之后的版本将不再被支持.具体效果 ...

  5. 网页WEB打印控件

    网页WEB打印控件制作 在WEB系统中,打印的确是比较烦人的问题,如果我们能制作一个属于自己的自定义的打印插件,那么我们在后续自定义打印的时候能随心所欲的控制打印,这样的效果对于程序员来说是非常开心的 ...

  6. 网页WEB打印控件制作-开放源码

    在WEB系统中,打印的确是比较烦人的问题,如果我们能制作一个属于自己的自定义的打印插件,那么我们在后续自定义打印的时候能随心所欲的控制打印,这样的效果对于程序员来说是非常开心的一件事件,本文将自己开发 ...

  7. WPF 动画显示控件

    当我们要显示一个控件的时候,不仅仅要显示这个控件,还要有动画的效果. 主要用到了DoubleAnimation类. public static void ShowAnimation(object co ...

  8. 网页版电子表格控件tmlxSpreadsheet免费下载地址

    tmlxSpreadsheet 是一个由JavaScript 和 PHP 写成的电子表格控件(包含WP插件, Joomla插件等等).. 程序员可以容易的添加一个类似Excel功能的,可编辑的表格功能 ...

  9. IOS 使用CoreText实现表情文本URL等混合显示控件

    实现了一个富文本视图控件.主要针对表情图片,文本字符,URL,等这种类型的文本进行显示. 源码地址 https://github.com/TinyQ/TQRichTextView 实现的效果如下图. ...

随机推荐

  1. eclipse 快捷键大全(转载)

    Ctrl+1 快速修复(最经典的快捷键,就不用多说了)Ctrl+D: 删除当前行 Ctrl+Alt+↓ 复制当前行到下一行(复制增加)Ctrl+Alt+↑ 复制当前行到上一行(复制增加)Alt+↓ 当 ...

  2. PE440

    一些证明,推荐复制入atom观看 首先我们考虑这个T(n)是什么,我们可以列出递归式: (definition:T) T(0) = 1 T(1) = 10 T(n) = 10*T(n-1) + T(n ...

  3. Eclipse右下角一直提示Computing additional info解决办法

    今天不知道按了什么,发现Eclipse右下角一直提示computing additional info,打开progress,里面同时有好几条一样的信息,但是一直也执行不完,上网查找方案,发现原来是用 ...

  4. adeng朝花夕拾

    ============================C/C++基础拾遗===================================== 1.指针: 函数指针做函数参数 回调函数 语法现象 ...

  5. 安卓工程 Installation error:INSTALL_PARSE_FAILED_MANIFEST_MALFORMED的解决办法

    解决办法:把包名首字母改成小写就好了.

  6. Varnish简介

    Varnish介绍: Varnish是一个反向HTTP代理,有时也被称为HTTP的加速器或网络加速器:它存在于真实服务器的前面(可能有多级代理),将来自于客户端的请求中的部分内容存储在自身的内存中,以 ...

  7. A trip through the Graphics Pipeline 2011_08_Pixel processing – “fork phase”

    In this part, I’ll be dealing with the first half of pixel processing: dispatch and actual pixel sha ...

  8. NodeJs http.get 方法请求时间过长问题处理!

    NodeJs 获取网页内容 http.get 默认请求超时过长了,程序要卡死好一会. 根据网上资料现改造了一个带超时设置的获取网页内容方法. 主要方法使用 setTimeout 来超时, 代码如下: ...

  9. hibernate的like用法(用占位符解决)

    原本我的写法:Query repeatClientQuery=querysession.createQuery("from ClientInfo as a " +"whe ...

  10. GATK3.2.2小结(转载)

    http://blog.csdn.net/skenoy/article/details/38346489 经过几天的摸索和网上资料的查询对GATK软件有点小心得,现总结如下: 1. fasta文件最好 ...