关于日历控件，我做了好多次尝试，一直致力于开发一款简单易用的日历控件。我的想法是争取在引用这个控件后，用一行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. jquery网页日历显示控件calendar3.1使用详解

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

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

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

  3. 日历时间选择控件---3(支持ie、火狐)

    效果展示:  源代码: <script language=javascript ><!--/* 调用方法:不能用onfocus,要用onclick  <input onclic ...

  4. Ti IPNC Web网页之ActiveX控件

    Ti IPNC Web网页之ActiveX控件 本篇介绍关于TI IPNC网页中播放器相关的东西. gStudio工程中添加播放器并控制播放器 打开IPNC网页时首先会自动下载ActiveX控件并安装 ...

  5. [习题]输入自己的生日（年/月/日）#2 -- 日历(Calendar)控件的时光跳跃，一次跳回五年、十年前？--TodaysDate属性、VisibleDate属性

    原文出處  http://www.dotblogs.com.tw/mis2000lab/archive/2013/06/10/calendar_visibledate_birthday_dropdow ...

  6. 移动端日历选择控件（支持Zepto和JQuery）

    移动端日历选择控件(支持Zepto和JQuery) <!DOCTYPE html> <html> <head> <meta charset="utf ...

  7. 《手把手教你》系列技巧篇（三十七）-java+ selenium自动化测试-日历时间控件-上篇（详解教程）

    1.简介 我们在实际工作中,有可能遇到有些web产品,网页上有一些时间选择,然后支持按照不同时间段范围去筛选数据.网页上日历控件一般,是一个文本输入框,鼠标点击,就会弹出日历界面,可以选择具体日期.这 ...

  8. 《手把手教你》系列技巧篇（三十八）-java+ selenium自动化测试-日历时间控件-下篇（详解教程）

    1.简介 理想很丰满现实很骨感,在应用selenium实现web自动化时,经常会遇到处理日期控件点击问题,手工很简单,可以一个个点击日期控件选择需要的日期,但自动化执行过程中,完全复制手工这样的操作就 ...

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

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

随机推荐

  1. WCF学习之旅—第三个示例之五（三十一）

       上接WCF学习之旅—第三个示例之一(二十七)               WCF学习之旅—第三个示例之二(二十八)              WCF学习之旅—第三个示例之三(二十九) WCF学习 ...

  2. 基于Caffe的DeepID2实现（上）

    小喵的唠叨话:小喵最近在做人脸识别的工作,打算将汤晓鸥前辈的DeepID,DeepID2等算法进行实验和复现.DeepID的方法最简单,而DeepID2的实现却略微复杂,并且互联网上也没有比较好的资源 ...

  3. 解析大型.NET ERP系统 分布式应用模式设计与实现

    C/S架构的应用程序,将一些复杂的计算逻辑由客户端转移到服务器端可以改善性能,同时也为了其它方面的控制..NET Remoting在局域网内调用的性能相当不错.ERP系统中基于.NET Remotin ...

  4. SQL Server 系列文章快速导航（SWF版）

    一.前言 在博客园写博客不自不觉已经有5个年头了,一开始只是为了记录工作中遇到的问题和解决办法,后来写的文章不自不觉的侧重在SQL Server方面的技术文章,在2014年1月终于鼓起勇气申请了微软S ...

  5. cookies如何成为全局变量以及设置，删除，获取

    (一)cookie机制将信息存储于用户硬盘,因此可以作为全局变量 (1)保存用户登录状态.例如将用户id存储于一个cookie内,这样当用户下次访问该页面时就不需要重新登录了,现在很多论坛和社区都提供 ...

  6. MVC5 网站开发之二 创建项目

    昨天对项目的思路大致理了一下,今天先把解决方案建立起来.整个解决包含Ninesky.Web.Ninesky.Core,Ninesky.DataLibrary等3个项目.Ninesky.Web是web应 ...

  7. 计算机程序的思维逻辑 (8) - char的真正含义

    看似简单的char 通过前两节,我们应该对字符和文本的编码和乱码有了一个清晰的认识,但前两节都是与编程语言无关的,我们还是不知道怎么在程序中处理字符和文本. 本节讨论在Java中进行字符处理的基础 - ...

  8. 学习总结 之 WebApi服务监控 log4net记录监控日志

    在请求WebApi 的时候,我们更想知道在请求数据的时候,调用了哪个接口传了什么参数过来,调用这个Action花了多少时间,有没有人恶意请求.我们可以通过记录日志,对Action进行优化,可以通过日志 ...

  9. SSRS ----环境配置，没有 ReportServer DB 怎么办？

    今天项目进入报表开发阶段,按照习惯,打开报表管理器,发现提示下面的错误: 错误:报表服务器无法打开与报表服务器数据库的连接.所有请求和处理都要求与数据库建立连接. 这是怎么回事儿呢,经过排查,发现数据 ...

  10. .NET缓存框架CacheManager在混合式开发框架中的应用（1）-CacheManager的介绍和使用

    在我们开发的很多分布式项目里面(如基于WCF服务.Web API服务方式),由于数据提供涉及到数据库的相关操作,如果客户端的并发数量超过一定的数量,那么数据库的请求处理则以爆发式增长,如果数据库服务器 ...