关于日历插件，我做了好多次尝试，一直致力于开发一款简单易用的日历控件。我的想法是争取在引用这个控件后，用一行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. StackExchange.Redis 模糊查询和删除

    初始化连接对象 _connectionString = ConfigurationManager.ConnectionStrings["RedisConnectionString" ...

  2. Ansible工具原理一

    ansible是新出现的自动化运维工具,基于Python开发,集合了众多运维工具(puppet.cfengine.chef.func.fabric)的优点,实现了批量系统配置.批量程序部署.批量运行命 ...

  3. java中根据key获取resource下properties资源文件中对应的参数

    properties资源文件是放在resource目录下的: 新建工具类: package com.demo.utils; import java.io.InputStream; import jav ...

  4. springBoot(2)---快速创建项目，初解jackson

    快速创建项目,初解jackson 一.快速创建项目 springboot官网提供了工具类自动创建web应用:网址:http://start.spring.io/ 官网页面 1.快速创建一个 选择web ...

  5. springBoot(1)---springboot初步理解

    springboot初步理解 在没有用SpringBoot之前,我们用spring和springMVC框架,但是你要做很多比如: (1)配置web.xml,加载spring和spring mvc 2) ...

  6. [android学习]__使用百度地图开放api编写地图定位app

    前言 在前面我已经记录关于如何使用百度地图api,以及如何配置相关的androidstudio配置了,接下来将记录如何使用百度地图api开发简单的地图定位apk,我将决定不定期持续更新本篇笔记,在每个 ...

  7. Talk In Web Security（安全世界观）: Devleping a Secure WebSite

    Writer:BYSocket(泥沙砖瓦浆木匠) 微博:BYSocket 豆瓣:BYSocket Reprint it anywhere u want. Why to write about Web ...

  8. 【EF6学习笔记】（六）创建复杂的数据模型

    本篇原文地址:Creating a More Complex Data Model 本篇讲的比较碎,很多内容本人认为并不是EF的内容,既然原文讲了,那就按照原文来学习吧... 第1步:通过属性来定制化 ...

  9. 网络协议抓包分析——ARP地址解析协议

    前言 计算机之间可以相互通信的前提是要知道对方的地址,才可以发送信息给其他计算机,就像别人要联系你也得先知道你的电话号码一样.这里的地址因为网络分层的原因就包括IP地址和MAC地址(即网卡地址.硬件地 ...

  10. Nacos系列：Nacos的Java SDK使用

    Maven依赖 Nacos提供完整的Java SDK,便于配置管理和服务发现及管理,以 Nacos-0.8.0 版本为例 添加Maven依赖: <dependency> <group ...