关于日历控件，我尝试过很多次，一直在努力开发一个好用的日历控件。我的想法是在引用这个控件之后，用一行js代码创建一个日历。如果添加一些参数，可以定制外观和功能丰富的日历。日历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 htmlheartheta charset=' utf-8 ' title calendar 3.1/title script src=' http : js/jquery-2 . 1 . 1 . min . js '/script script src=' http : js/calendar-3.1 . js '/script script type=' text/JavaScript ' $(文档)。ready(函数(e){ calendar _ init($(' # test ')))；//在DIV中显示日历，id=test })；/script style # test { width :200 px；height:auto飞越：隐藏；border:solid 1px边距-底部：20 px；}/style/head body div id=' test '/div/body/html以上是效果平平的代码。如果要自定义UI，可以在调用calendar_init()时添加第二个参数。浓妆照片代码如下：

calendar_init($('#test ')，{ title_color: '黄色'、title_bg_color: '红色'、day_color: '棕色'、day_bg_color: '绿色'、date_bg_color: '粉色'、date_color: '蓝色'、date_active_color: '红色' })；calendar_init函数的第二个参数是可选的，它的类型是一个包含键值对的对象。下表介绍了该参数每个键的含义和值：

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

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。