直接看效果点这里
HTML
<!DOCTYPE html> <html> <head lang="zh-CN"> <meta charset="utf-8"> <title> 简易多栏日历 </title> <link rel="stylesheet" href="calendar.css"> </head> <body> <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> <script src="jquery.calendar.js"></script> <script> var data = {"2015-01":{"05":{"id":18076,"price":970,"count":8},"11":{"id":18076,"price":970,"count":10},"12":{"id":18075,"price":970,"count":10},"17":{"id":18073,"price":970,"count":10},"30":{"id":18074,"price":970,"count":10},"15":{"id":18077,"price":970,"count":10}},"2014-12":{"11":{"id":18076,"price":970,"count":10},"12":{"id":18075,"price":970,"count":10},"17":{"id":18073,"price":970,"count":10},"30":{"id":18074,"price":970,"count":10},"15":{"id":18077,"price":970,"count":10}}}; // 两个日历 $.calendar({ 'isDisableMonth': true, 'col': 2, 'data': data, 'callback': function(target){ alert(target.data('date')); } }); </script> </body> </html>
CSS
/** * @description: 旅游简洁版日历组件 * @author: jununx@gmail.com * @update: 2014/11/7 */ /* calendar reset */ .ui-calendar a { text-decoration: none; } .ui-calendar ul { margin: 0; padding: 0; } .ui-calendar li { list-style: none; } .ui-calendar { position: relative; float: left; font-family: arial, 'microsoft yahei', simsun, 'sans-serif'; font-size: 12px; overflow: hidden; clear: both; } .ui-calendar-col { float: left; width: 364px; margin-right: 10px; display: inline; } .ui-calendar-title, .ui-calendar-week { color: #fff; background-color: #669acc; } .ui-calendar-bd, .ui-calendar-bd { background-color: #fff; } /* ui-calendar-title */ .ui-calendar-title { height: 35px; line-height: 35px; font-weight: 700; text-align: center; } .ui-calendar-arr { position: absolute; top: 10px; width: 15px; height: 15px; overflow: hidden; text-indent: -999em; } .ui-calendar-arr-l { left: 6px; } .ui-calendar-arr-r { right: 16px; } .ui-calendar-arr i { position: absolute; top: 1px; width: 0; height: 0; font-size: 0; line-height: 0; border-width: 6px; cursor: pointer; } .ui-calendar-arr-l i { left: -1px; border-style: dashed solid dashed dashed; border-top-color: transparent; border-right-color: #d5ecff; border-bottom-color: transparent; border-left-color: transparent; } .ui-calendar-arr-r i { right: -2px; border-style: dashed dashed dashed solid; border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; border-left-color: #d5ecff; } /* ui-calendar-week */ .ui-calendar-week { height: 25px; line-height: 25px; text-align: center; overflow: hidden; } .ui-calendar-week li { float: left; width: 50px; } /* ui-calendar-bd */ .ui-calendar-bd { overflow: hidden; border: 1px #99c9f1 solid; } .ui-calendar-bd-inner { margin: 0 -1px -1px; overflow: hidden; } .ui-calendar-item { color: #333; } .ui-calendar-item,.ui-calendar-disable { float: left; width: 51px; height: 51px; border-right: 1px #ccc solid; border-bottom: 1px #ccc solid; } .ui-calendar-item:hover { background-color: #f4fcff; } .ui-calendar-date,.ui-calendar-count,.ui-calendar-price { display: block; line-height: 14px; height: 14px; overflow: hidden; } .ui-calendar-date { margin: 5px 0 0 5px; color: #666; } .ui-calendar-count,.ui-calendar-price { text-align: right; padding-right: 4px; } .ui-calendar-count { line-height: 16px; height: 16px; color: #46b528; } .ui-calendar-price { color: #ff9933; } .ui-calendar-disable { cursor: default; background-color: #f6f6f6; } .ui-calendar-disable .ui-calendar-date { color: #acacac; } .ui-calendar-selected { background-color: #e5f7fd; }
JS
/** * @description: 旅游简洁版日历组件，基于jquery 1.7.2开发 * @author: jununx@gmail.com * @update: 2014/11/7 * * @param wrap{object} 要把日历放在哪个盒子里，默认$('body') * @param date{object} 指定日期，默认当天，例如：new Date('2014-11-07') * @param data{object} 要传入的数据，格式{'年-月': {'日': [余量, 金额]}} * @param isDisableMonth{boolean} 日历空白处是否填充上一月/下一月日期 * @param col{number} 这个日历显示几栏 * @param callback{function} 点击可选日期执行的函数，有一个参数，参数返回这个对象 */ ;(function($){ var methods = { init: function(opts){ this.createCalendar(opts); }, createCalendar: function(opts, isPrevMonth){ var that = this, changeDate = null, isExist = $('#J_Cal_'+ opts.ID).length, tpl = '<a class="ui-calendar-arr ui-calendar-arr-l" href="javascript:;"><i></i></a><a class="ui-calendar-arr ui-calendar-arr-r" href="javascript:;"><i></i></a>'; for(var i = 0; i < opts.col; i++){ changeDate = new Date(opts.date.getFullYear(), isPrevMonth ? opts.date.getMonth() + 1 - (opts.col - i) : opts.date.getMonth() + i); tpl += '<div class="ui-calendar-col"><div class="ui-calendar-title">'+ (this.getYearMonthDay(changeDate)) +'</div><ul class="ui-calendar-week"><li>日</li><li>一</li><li>二</li><li>三</li><li>四</li><li>五</li><li>六</li></ul><div class="ui-calendar-bd"><div class="ui-calendar-bd-inner">' + this.createDateItem(changeDate, opts) + '</div></div></div>'; } !isExist && ( opts.box = $('<div class="ui-calendar" id="J_Cal_'+ opts.ID +'"></div>') ); opts.box.html(tpl).find('.ui-calendar-item').on('click', function(){ opts.callback($(this)); }).end() .find('.ui-calendar-arr-l').on('click', function(){ that.chengeMonth(opts, true); }).end() .find('.ui-calendar-arr-r').on('click', function(){ that.chengeMonth(opts, false); }); !isExist && opts.wrap.append(opts.box); }, // 生成日历列表内容 createDateItem: function(date, opts){ var resDateItem = [], firstDateDay = this.getFirstDateInMonth(date).getDay(), endDate = this.getLastDateInMonth(date).getDate(), nextMonthEndDate = this.getLastDateInMonth(date, -1).getDate(), searchKey = date.getFullYear() + '-' + this.fillZero(date.getMonth() + 1), searchVal = opts.data[searchKey], searchDate = [], searchDateInfo = []; for(var i = 0; i < 42; i++){ if(i < firstDateDay || i >= firstDateDay + endDate){ if(opts.isDisableMonth){ if(i < firstDateDay){ resDateItem.push('<a class="ui-calendar-disable"><span class="ui-calendar-date">'+ (nextMonthEndDate - firstDateDay + 1 + i) +'</span></a>'); }else{ resDateItem.push('<a class="ui-calendar-disable"><span class="ui-calendar-date">'+ (i - endDate - firstDateDay + 1) +'</span></a>'); } }else{ resDateItem.push('<a class="ui-calendar-disable"></a>'); } }else{ searchDate = this.fillZero(i - firstDateDay + 1); searchDateInfo = searchVal && searchVal[searchDate]; if(searchDateInfo){ resDateItem.push('<a data-id="'+searchDateInfo['id']+'" data-date="'+ searchKey + '-' + searchDate +'" class="ui-calendar-item ui-calendar-selected" href="javascript:;"><span class="ui-calendar-date">'+ searchDate +'</span><span class="ui-calendar-count">余'+ (searchDateInfo['count'] > 9 ? '>9' : searchDateInfo['count']) +'</span><span class="ui-calendar-price">¥'+ searchDateInfo['price'] +'</span></a>'); }else{ resDateItem.push('<a data-date="'+ searchKey + '-' + searchDate +'" class="ui-calendar-item" href="javascript:;"><span class="ui-calendar-date">'+ searchDate +'</span></a>'); } } } return resDateItem.join(''); }, // 当前时间对象 getNowDate: function(){ return new Date(); }, // 当月第一天 getFirstDateInMonth: function (date){ return new Date(date.getFullYear(), date.getMonth(), 1); }, // 当月最后一天 getLastDateInMonth: function (date, nextMonthNum){ return new Date(date.getFullYear(), date.getMonth() + 1 + (nextMonthNum || 0), 0); }, // return xxxx年xx月 getYearMonthDay: function(date){ return (date.getFullYear() + '年' + this.fillZero(date.getMonth() + 1) + '月'); }, // 个位补0 fillZero: function(v){ return v.toString().replace(/^(d)$/, '0$1'); }, /** * 切换月份 * @param opts{object} 传入日历的参数 * @param isPrevMonth{boolean} 是否是上一个月 */ chengeMonth: function(opts, isPrevMonth){ var month = isPrevMonth ? opts.date.getMonth() - 1 : opts.date.getMonth() + 1; opts.date = new Date(opts.date.getFullYear(), month); this.createCalendar(opts, isPrevMonth); } }; $.calendar = $.fn.calendar = function(opts){ opts = $.extend({ 'wrap': $('body'), 'ID': Math.floor(methods.getNowDate().getTime()), 'date': methods.getNowDate(), 'col': 1, 'isDisableMonth': false, 'data': {}, 'callback': function(){} }, opts || {}); methods.init(opts); return this; }; })(jQuery);