jquery网页日历显示控件calendar3.1使用详解

关于日历控件，我做了好多次尝试，一直致力于开发一款简单易用的日历控件。我的想法是争取在引用这个控件后，用一行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函数的第二个参数是可选项，类型是包含键值对的对象，下面用表格介绍下这个参数的每个键的含义及其取值：

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

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

赞 (0)

相关推荐

  • jQuery日程管理插件fullcalendar使用详解

    FullCalendar用来做日程管理功能非常强大,但是唯一不足的地方是没有将中国农历历法加进去,今天我将结合实例和大家分享如何将中国农历中的节气和节日整合到FullCalendar中,从而增强其实用性. HTML 首先是要载入jQuery库和fullcalendar插件. <script src='js/jquery-1.9.1.min.js'></script> <script src='js/fullcalendar.min.js'></script>

  • asp.net中日历函数Calendar的使用方法

    今天介绍的是微软提供的ajax calendar控件.这个控件使用了ajax的效果,并通过前台js和style设置事件和效果.功能丰富.样式自有,实为网站设计.mis开发之必备控件. 按照惯例,现在该贴代码了: <asp教程:textbox runat="server" id="txtcalendar" width="150" /> <ajaxtoolkit:calendarextender runat="server

  • AjaxControlToolKit CalendarExtender(日历扩展控件)的使用方法

    例子:只需要设置CalendarExtender的TargetControlID为需要显示日期的TextBox的ID即可以,textBox控件的readOnly属性设置为 false 主要代码: 复制代码 代码如下: <asp:ScriptManager ID="ScriptManager1" runat="server" EnableScriptGlobalization="True" EnableScriptLocalization=&

  • Java中的日期和时间类以及Calendar类用法详解

    Java中的日期和时间类以及Calendar类用法详解

    Java日期和时间类简介 Java 的日期和时间类位于 java.util 包中.利用日期时间类提供的方法,可以获取当前的日期和时间,创建日期和时间参数,计算和比较时间. Date 类 Date 类是 Java 中的日期时间类,其构造方法比较多,下面是常用的两个: Date():使用当前的日期和时间初始化一个对象. Date(long millisec):从1970年01月01日00时(格林威治时间)开始以毫秒计算时间,计算 millisec 毫秒.如果运行 Java 程序的本地时区是北京时区(

  • jQuery EasyUI API 中文文档 - Calendar日历使用

    jQuery EasyUI API 中文文档 - Calendar日历使用

    用 $.fn.calendar.defaults 重写了 defaults. 用法 复制代码 代码如下: <div id="cc" style="width:180px;height:180px;"></div> 复制代码 代码如下: $('#cc').calendar({ width:600, height:600, current:new Date() }); 特性 名称 类型 说明 默认值 width number 日历组件的宽度. 1

  • Java中Date,Calendar,Timestamp的区别以及相互转换与使用

    1 Java.util.Date包含年.月.日.时.分.秒信息. 复制代码 代码如下: // String转换为DateString dateStr="2013-8-13 23:23:23";String pattern="yyyy-MM-dd HH:mm:ss";DateFormate dateFormat=new SimpleDateFormat(pattern);Date date=dateFormat.parse(dateStr);date=dateForm

  • jquery日历插件e-calendar升级版

    jquery日历插件e-calendar升级版

    jQuery事件日历插件e-calendar,支持针对指定日期自定义日程安排(无条数限制),设置过日程的日期会高亮显示,兼容IE7+主流浏览器. 原版使用方法及演示地址:e-calendar原版 (鼠标移动到天显示当天的日程安排) 升级版介绍: 1.同一天可存在多个事件交集 2.点击天在日历下方出现日程列表 3.点击日程列表可添加其事件 . 4.添加item-grid的显示和隐藏 5.Events中数组集合可添加id,type等元素(区分日程类型:任务类型或日程类型) 6.增加年份选择,月份选择

  • FullCalendar日历插件应用之数据展现(一)

    FullCalendar日历插件应用之数据展现(一)

    开发者可以使用FullCalendar创建强大的日历日程应用,FullCalendar提供了丰富的选项设置和方法调用,使得开发者可以轻松的创建各种功能的日历程序. 由于项目需求,需要通过日历的方式展现某些数据,在网上搜索了很多日历的插件,觉得比较好用的还是fullCalendar,下面是我写的一个简单Demo,如有不足,请多多指正!!! 一.引入必要的文件: <link href="Scripts/Plugins/fullcalendar.css" rel="style

  • 修改js Calendar日历控件 兼容IE9/谷歌/火狐

    修改Calendar日历控件 兼容IE9,谷歌,火狐. 只是能用,出现的位置有所不同,希望有高手再帮我改改吧,谢谢 一. 复制代码 代码如下: this.iframe = window.frames("meizzCalendarIframe"); 修改为 复制代码 代码如下: this.iframe = window.frames["meizzCalendarIframe"]; 二. 复制代码 代码如下: var a = (arguments.length==0)

  • 轻量级的原生js日历插件calendar.js使用指南

    使用说明: 需要引入插件calendar.js/calendar.min.js 须要引入calendar.css 样式表,可以自定义自己想要的皮肤 本日历插件支持cmd模块化 如下调用: 复制代码 代码如下: xvDate({ 'targetId':'date1',//时间写入对象的id 'triggerId':['date1','dateBtn1'],//触发事件的对象id 'alignId':'datesWrap1',//日历对齐对象 'format':'-',//时间格式 默认'YYYY-

随机推荐