【回忆1314】回忆之日历

直接看效果点这里

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: [email protected]
 * @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: [email protected]
 * @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">&yen;‘+ 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;
            console.log(month);
            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);
时间： 2024-11-08 06:34:54

【回忆1314】回忆之日历的相关文章

【回忆1314】回忆之浮窗

直接看效果点这里 HTML <!DOCTYPE html> <html> <head lang="zh-CN"> <meta charset="utf-8"> <title> 浮窗 </title> <style> * { margin: 0; padding: 0; } .staff { width: 1200px; margin: 0 auto; height: 800px; l

【回忆1314】回忆之星星评分

直接看效果点这里 HTML <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title> 星星评分 </title> <link rel="stylesheet" href="star.css"/> </head> <body> <ul

【回忆1314】抽奖之大富翁

直接看效果点这里 <!doctype html> <html> <head> <meta charset="UTF-8"> <title> 大富翁 </title> <style> ul {list-style: none; } .lottery { position: relative; width: 184px; height: 184px; line-height: 58px; text-alig

【回忆1314】回忆之横竖滑动门

直接看效果点这里 HTML <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title> 横竖滑动门 </title> <link rel="stylesheet" href="sliding-door.css"/> </head> <body&g

【回忆1314】回忆之城市搜索

直接看效果点这里 HTML <!DOCTYPE html> <html> <head lang="zh-CN"> <meta charset="utf-8"> <title> 城市搜索 </title> <link rel="stylesheet" href="ui-departure.css"> </head> <body&

【回忆1314】回忆之分页

直接看效果点这里 HTML <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>分页插件</title> <link rel="stylesheet" href="page.min.css"/> </head> <body> <

【回忆1314】回忆之目的地搜索

直接看效果点这里 HTML <!DOCTYPE html> <html> <head lang="zh-CN"> <meta charset="utf-8"> <title> 目的地搜索 </title> <link rel="stylesheet" href="ui-destination.css"> <style> .city,

【回忆1314】鼠标离开方向检测

直接看效果点这里 <html> <head>鼠标离开方向检测</head> <body> <div id="msg">鼠标放到框上,然后移开.</div> <div id="wrap" style="width:200px; height: 100px; line-height:30px; margin: 100px auto; text-align: center; borde

【回忆1314】回忆之placeholder

直接看效果点这里 HTML <!DOCTYPE html> <html> <head lang="zh-CN"> <meta charset="utf-8"> <title> Placeholder </title> </head> <body> <input class="J_Placeholder" type="text"