移动端calendar日历开发＋swiper（支持左右点击，滑屏滚动）

<div class="uzai-header">
<i class="iconfont icon-back" ng-click="backpage();"></i>
<b>选择日期</b>
</div>

<div class="uzai-container">
<!--日历部分-->
<div class="uzai-calender">
<div class="red-bg">

<div class="switch-btn">
<b class="left"></b>
<b class="right"></b>
<div class="center">
<i class="circle"></i>
<p>
<span class="month"></span>
<span class="year">
<b>月</b><br />
<b></b>
</span>
</p>
<i class="circle"></i>
</div>
</div>

<i class="triangles"></i>
<!--星期-->
<div class="calendar-week">
<ul class="week-list"></ul>
</div>

</div>
<div class="container-center">
<div class="device">
<a class="arrow-left" href="#"></a>
<a class="arrow-right" href="#"></a>
<div class="swiper-container container">
<div class="swiper-wrapper box-center swiper" id="list">

</div>
</div>
<div class="pagination"></div>
</div>
<!--库存-->
<div class="stock zHide"><b class="m"></b>月<b class="d"></b>日出发仅剩<b class="nums">  </b>个余位</div>
</div>
</div>
</div>

/***
* @CreateCalendar 构造函数，统筹日历
*/
var CreateCalendar = {
create:function(){
'use strict';
var CreateCalendar ={
init:function(){    //  初始化函数
// to do ...
this.changeTitle();
this.addWeekColor();
this.getDateCur();
},
addWeekColor:function(){  //    周六日 title
var _weekList = document.getElementsByClassName('week-list')[0],
_li = _weekList.getElementsByTagName('li'),_len=_li.length;
_li[0].style.color = 'red';
_li[_len - 1].style.color = 'red';
},
getDateCur:function(){  //  添加“今天，明天，后天”
var GetDateStr = function(){
var _dd = new Date();
_dd.setDate(_dd.getDate()); //  获取
var _y = _dd.getFullYear(),_m=_dd.getMonth()+1,_d = _dd.getDate();
return _y + '-' + _m +'-' +_d;
};
var _cBox =document.getElementsByClassName('box-center')[0],
_calendars = document.getElementsByClassName('calendar-box'),
_cLens = _calendars.length,
_ul = document.getElementsByClassName('day-list');

for(var i=0;i<_ul.length;i++){
var _li = _ul[i].childNodes;
for(var j=0;j<_li.length;j++){
_li[j].setAttribute('data-index',j);
var _date = _li[j].getAttribute('data-time');
if(_date == GetDateStr(0)){
console.log('今天是：'+_li[j].getAttribute('data-time'));
if(!_li[j].className.match(new RegExp('(\\s|^)' + 'now' + '(\\s|$)'))){ //今天添加now
_li[j].className += ' '+ 'now';
}
if(_li[j].className.match(new RegExp('(\\s|^)' + 'off' + '(\\s|$)'))){
_li[j].className = _li[j].className.replace(new RegExp('(\\s|^)' + 'off' + '(\\s|$)'), '');
}
}
}
}
/**
* @_nowset class为now的日期转化为时间戳
* @_dataset    获得所有日期转化为时间戳
* @_dataset 与 _nowset  进行对比，小于_nowset的禁止用户点击
*/
var _nowset = Date.parse(new Date(document.getElementsByClassName('now')[0].dataset.time)) / 1000;  //
console.log('今天时间戳：'+_nowset);

for(var i=0;i<_ul.length;i++){
// _ul[i].index = i;
var _li = _ul[i].childNodes;
for(var j=0;j<_li.length;j++){
var _dateset = Date.parse(new Date(_li[j].dataset.time)) / 1000;
if(_li[j].dataset.time){
// var _less = _li[j].dataset.time;
if(_dateset < _nowset){
_li[j].classList.add('off');
// if(!_li[j].className.match(new RegExp('(\\s|^)' + 'over' + '(\\s|$)'))){ //今天添加now
//     _li[j].className += ' '+ 'over';
// }
_li[j].classList.add('over');   //今天之前的日期
_li[j].onclick = function(){
return false;
};
}
}

}
}

var _now = document.getElementsByClassName('now')[0];
_now.childNodes[0].innerHTML = '今天';

},
changeTitle:function(){ //点击切换左右按钮
var _switchBtn = document.getElementsByClassName('switch-btn')[0],
_left = _switchBtn.getElementsByClassName('left')[0],
_right = _switchBtn.getElementsByClassName('right')[0];
_left.onclick = functi
4000
on(){     //点击左侧月份按钮
swiper.prev();

setTimeout(function(){
changeMonth();
},500);
};
_right.onclick = function(){    //点击右侧月份按钮
swiper.next();
setTimeout(function(){
changeMonth();
},500);
};
}
};
return CreateCalendar;
}
};

var myCalendar = CreateCalendar.create();
myCalendar.init();