移动端旅游报价日历插件

最新推荐文章于 2022-03-24 12:03:07 发布

原创

最新推荐文章于 2022-03-24 12:03:07 发布 · 2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#日历插件

首先声明，此插件为我同事所写，所以此篇博客为转载类型，但因没有选择转载类型时需要的链接，才选择原创类型，如有同行需要请标明出处：（作者：lus）
预览效果：

此插件当 arrayJSON 为空时，加载的月份为当前月，月份个数由 index 控制。

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" href="common.css">
    <style>
    	/* 没有 common.css 文件，添加以下注释 css*/
    	/*
	html {font-size:62.5%;}
	body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {margin:0; padding:0;}
	.fs10 {font-size:1.0rem;}
	*/

        .ZYCalender .dateZone{
            width: 100%;
            margin: auto;
            background: #f5f5f5;
            color:#666;
            position: -webkit-sticky;
            position: sticky;
            top: 0;
            z-index: 999;
        }
        .ZYCalender .tbody{
            background: #f3f3f3;
            padding-bottom: 4.5rem;
        }
        .ZYCalender .tbody td{
            background: #fff;
            text-align: center;
            height: 4.4rem;
            font-size: 1.4rem;
            color: #666;
            width: 14.2%;
            border: 2px solid #fff;
        }
        .ZYCalender .tbody td .con{
            height: 4.4rem;
            font-size: 1.4rem;
        }
        .ZYCalender .tbody td p{
            line-height: 14px;
        }
        .ZYCalender .tbody .sel{
            background: #cab970;
            border-radius: 5px;
        }
        .ZYCalender .tbody tr{
            vertical-align: top;
        }
        .ZYCalender .dateZone td{
            background: #f5f5f5;
            width: 14.2%;
            font-size: 1.4rem;
            text-align: center;
            height: 45px;
        }
        .ZYCalender .dateZone .colo{
            color: #ffd101;
        }
        .ZYCalender .dateTable{
            width: 100%;
            margin: auto;
        }
        .ZYCalender .tbody .itemMonth{
            margin-bottom: 10px;
            background: #fff;
            padding: 10px 5px;
        }
        .ZYCalender .tbody .month{
            width: 100%;
            text-align: center;
            padding: 8px 0;
            font-size: 1.6rem;
        }
        .ZYCalender .hover{
            font-size: 1.2rem;
            display: inline-block;
            width: 60%;
            background: #ffd101;
            color: #ba0003;
            text-align: center;
            border-radius: 5px;
        }
        .confirm{
            width: 100%;
            height: 4.0rem;
            background: #eb8300;
            position: fixed;
            bottom: 0;
            z-index: 999;
            text-align: center;
            font-size: 1.8rem;
            color: #fff;
            line-height: 4.0rem;
        }
    </style>
</head>
<body>
	<div class="ZYCalender"></div>
	<div class="confirm">提交</div>
</body>
<script src="calender.js"></script>
<script>
    var arrayJSON = [
        {
            id: '0',
            date: '2017-12-29',
            price: '￥ 123',
            number: '>9人'
        },
        {
            id: '1',
            date: '2017-12-30',
            price: '￥ 123',
            number: '>9人'
        },
        {
            id: '2',
            date: '2017-12-31',
            price: '￥ 123',
            number: '>9人'
        },
        {
            id: '3',
            date: '2018-02-01',
            price: '￥ 123',
            number: '>9人'
        },
        {
            id: '4',
            date: '2018-02-02',
            price: '￥ 123',
            number: '>9人'
        },
        {
            id: '5',
            date: '2018-02-03',
            price: '￥ 123',
            number: '>9人'
        },
        {
            id: '6',
            date: '2018-02-04',
            price: '￥ 123',
            number: '>9人'
        },
        {
            id: '7',
            date: '2018-02-05',
            price: '￥ 123',
            number: '>9人'
        },
        {
            id: '8',
            date: '2018-02-06',
            price: '￥ 123',
            number: '>9人'
        },
        {
            id: '9',
            date: '2018-02-07',
            price: '￥ 123',
            number: '>9人'
        },
        {
            id: '10',
            date: '2018-02-08',
            price: '￥ 123',
            number: '>9人'
        },
        {
            id: '11',
            date: '2018-02-09',
            price: '￥ 123',
            number: '>9人'
        }
    ];
    new ZYCalender({
        element: document.querySelector('.ZYCalender'),
        color: '#fff',
        arrayJSON: arrayJSON,
        confirmBtn: document.querySelector('.confirm'),
        callback: function (e) {
            console.log(e)
        }
    })
</script>
</html>

JS:

/*
 *   by lus
 *   luszy.com
 * */
(function (window, undefined) {
    "use strict";
    var ZYCalender = function(params){
        this.extend(this.params, params);
        this.init();
    };
    ZYCalender.prototype = {
        params: {
            element: false,
            index : 4,                   // 展示的月份个数
            bgColor : "#f5f5f5",         // 开始结束中间颜色
            color: '#ffd101',            // 选中的文字颜色
            arrayJSON: '',
            confirmBtn: '',
            callback: function () { }
        },
        init: function () {
            var self = this,
                ii,
                tHTML,
                currentYear,
                currentMonth,
                setCurrentDate,
                firstDay,
                month,
                DaysInMonth = [],
                Ntd,
                Ntr,
                createTd,
                anyTd,
                p;
            self.element = this.params.element;
            self.index = this.params.index;
            self.confirm = this.params.confirmBtn;
            self.arrayJSON = this.params.arrayJSON;