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

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

首先当然要看的是效果，先看一张素颜：

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

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

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

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!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()时加上第二个参数。浓妆照的代码如下：

?
1
2
3
4
5
6
7
8
9
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"
  });

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

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

jquery网页日历显示控件calendar3.1使用详解的更多相关文章

  1. 网页日历显示控件calendar3.1

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

  2. 《Android群英传》读书笔记 (2) 第三章 控件架构与自定义控件详解 + 第四章 ListView使用技巧 + 第五章 Scroll分析

    第三章 Android控件架构与自定义控件详解 1.Android控件架构下图是UI界面架构图,每个Activity都有一个Window对象,通常是由PhoneWindow类来实现的.PhoneWin ...

  3. ASP.NET验证控件应用实例与详解。

    ASP.NET公有六种验证控件,分别如下:  控件名      功能描叙 1RequiredFieldValidator(必须字段验证)  用于检查是否有输入值 2CompareValidator(比 ...

  4. 第二章 控件架构与自定义控件详解 + ListView使用技巧 + Scroll分析

    1.Android控件架构下图是UI界面架构图,每个Activity都有一个Window对象,通常是由PhoneWindow类来实现的.PhoneWindow将DecorView作为整个应用窗口的根V ...

  5. VB6.0中WinSock控件属性和方法详解

    原文链接:http://liweibird.blog.51cto.com/631764/653134 WinSock控件能够通过UDP协议(用户数据报协议)或TCP协议(数据传输协议)连接到远程的机器 ...

  6. Android 控件架构与自定义控件详解

    架构: PhoneWindow 将一个 DecorView 设置为整个应用窗口的根 View,这里面所有 View 的监听事件,都通过 WindowManagerService 来接收.DecorVi ...

  7. Appium+python自动化（二十五）- 那些让人抓耳挠腮、揪头发和掉头发的事 - 获取控件ID（超详解）

    简介 在前边的第二十二篇文章里,已经分享了通过获取控件的坐标点来获取点击事件的所需要的点击位置,那么还有没有其他方法来获取控件点击事件所需要的点击位置呢?答案是:Yes!因为在不同的大小屏幕的手机上获 ...

  8. DevExpress控件汉化教程详解

    所有Developer Express .NET产品都有本地化资源,比如按钮属性,控件属性描述,菜单项,确认和错误的信息等等,所有这些资源字符串可以很容易地被翻译成各种语言. 先看下面汉化前后的图片: ...

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

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

随机推荐

  1. Eclipse常用20个快捷键

    Eclipse常用20个快捷键 1. Ctrl+F : 本文查找Find与替换Replace 2. Ctrl+H : 全局搜索,可按照文件类型搜索 3. Ctrl+1 : 快速修复,能快速的显示光标所 ...

  2. Javascript高级编程学习笔记（40）—— DOM（6）CDATASection、DocumentType

    CDATASection类型 CDATASection类型是只针对XML文档的类型 因为浏览器无法解析 在浏览器中创建CDATASection的函数也无法正常使用 该类型有以下属性 nodeType: ...

  3. SpringMVC框架一：搭建测试

    这里做一个Demo:展示商品列表 新建Dynamic Web Project: 导入jar包,放在lib下: 放入Lib文件夹之后,会自动build path 接下来配置web.xml: <?x ...

  4. Python 音视频方面资源大全

    自然语言处理 用来处理人类语言的库. NLTK:一个先进的平台,用以构建处理人类语言数据的 Python 程序.官网 jieba:中文分词工具.官网 langid.py:独立的语言识别系统.官网 Pa ...

  5. 异步请求中jetty处理ServletRequestListener的坑

    标题起得比较诡异,其实并不是坑,而是jetty似乎压根就没做对异步request的ServletRequestListener的特殊处理,如果文中有错误欢迎提出,可能自己有所疏漏了. 之前遇到了一个b ...

  6. 分享一个基于web的满意度调查问卷源码系统

    问卷调查系统应用于各行各业,对于企业的数据回收统计分析战略决策起到至关作用.而现有的问卷调查系统大都是在线使用并将数据保存在第三方服务器上.这种模式每年都要缴纳费用并且数据安全性得不到保证.所以说每个 ...

  7. supervisor 启动dotnet.core 报“ too many start retries too quickly”

    环境: 操作系统:Centos 7 dotnet core:2.0.0    2.1.3 问题: 在使用supervisor 配置守护进程时,启动dotnet.core程序失败,查看/tmp下supe ...

  8. Mybatis 缓存分析

    其实本来不想专门的写一篇关于mybatis缓存的博客的.在之前的博客中已经大致的把mybatis的整体流程讲了一遍.只要按照步骤一步步的点进去,关于缓存的代码很容易就能发现.但是今天在看代码的时候突然 ...

  9. poj1001

    #include <iostream> #include<iomanip> #include<cstring> using namespace std; int s ...

  10. Mysql 锁和锁算法

    相关命令: show engines;  查看数据库支持的引擎 show variables like '%storage_engine%';   查看数据库默认的引擎 select @@global ...