前言:
在需要一个移动端的日历效果时,找了很多资料,这里分享下我找的两个资料,一个是使用了插件 vue-hash-calendar ,还有一个是自己封装的组件。
我这边最终实现效果:
一、vue-hash-calendar使用教程:github地址入口
1、npm装插件
cnpm i vue-hash-calendar
2、main.js中配置
// 在入口文件中(main.js),导入组件库
import vueHashCalendar from 'vue-hash-calendar'
// 引入组件CSS样式
import 'vue-hash-calendar/lib/vue-hash-calendar.css'
// 注册组件库
Vue.use(vueHashCalendar)
3、在页面组件中使用,注意这里有坑,操作不当容易出现空白出不来情况,我这里是用的他的弹框属性
template里面直接使用标签:
<vue-hash-calendar
:visible.sync="isShowCalendar"
model="dialog"
format="YY-MM-DD"
@confirm="changeTime"
:disabled-date="disabledDate"
></vue-hash-calendar>
data里面定义:
data () {
return {
/**
* 日历弹框
* */
isShowCalendar:false,//日历组件
};
},
methods里面定义他的禁用方法和点击确定事件
methods: {
/**
* 改变时间
* */
changeTime(data){
this.showDate = data;//改变页面展示的时间
this.initPageData();// 初始化更新页面数据
this.getBarData();//刷新柱图数据
},
/**
* 禁用今天以后的日期
* */
disabledDate(date) {
let timestamp = date.getTime();
if (timestamp > new Date().getTime()) {
return true
}
return false
}
}
二、自己封装的移动端日历组件(入口)
源码:
<template>
<div id="calendar" :class="{'change':isChange}">
<!-- 年份 月份 -->
<div class="year-month">
<div class="year-month_left">
<span class="top-time">{{currentMonth}}月</span>
<ul>
<li>周{{weekdays[newWeek]}}</li>
<li>{{currentYear}}年</li>
</ul>
</div>
<div class="year-month_right"><x-icon @click="addSchedule" type="ios-plus-empty" size="30" class="i-plus-empty"></x-icon></div>
</div>
<!-- 星期 -->
<ul class="weekdays">
<li v-for="(vo,index) in weekdays" v-text="vo" :key="index"></li>
</ul>
<!-- 日期 -->
<ul
class="days"
:class="{'fadeOut':fadeOut,'fadeIn':fadeIn,'fadeOutR':fadeOutR,'fadeInR':fadeInR}"
@touchstart="allTouchStart"
@touchend="allTouchEnd"
@touchstart.stop="touchStart"
@touchend.stop="touchEnd"
>
<!-- 核心 v-for循环 每一次循环用<li>标签创建一天 -->
<li
v-for="(dayobject,index) in days"
:class="{'weekend':(index%7 === 0)||((index+1)%7 === 0)}"
:key="index"
>
<!--本月-->
<!--如果不是本月 改变类名加灰色-->
<div
v-if="dayobject.day.getMonth()+1 !== currentMonth"
@click="otherMonth(dayobject.day.getDate())"
class="other-month"
>{{ dayobject.day.getDate() }}</div>
<!--如果是本月 还需要判断是不是这一天-->
<div v-else class="everyDay">
<!--今天 同年同月同日-->
<div
@click="getDayMessage(currentYear,currentMonth,dayobject.day.getDate())"
v-if="dayobject.day.getFullYear() === new Date().getFullYear() && dayobject.day.getMonth() === new Date().getMonth() && dayobject.day.getDate() === new Date().getDate()"
class="active"
>{{ dayobject.day.getDate() }}</div>
<div
:class="{'otherday':dayobject.day.getDate() === otherDay}"
v-else
@click="getDayMessage(currentYear,currentMonth,dayobject.day.getDate())"
>{{ dayobject.day.getDate() }}</div>
<div :class="{'circle':dayobject.status==='3','o':dayobject.status==='2'}"></div>
</div>
</li>
</ul>
<!--背景色-->
<div class="background" :class="{'change':isChange}">
<div v-for="(value,index) in 5" :class="{'dbg':(index%2===0),'lbg':(index%2!==0)}" :key="index"></div>
</div>
</div>
</template>
<script>
export default {
name: 'Calendar',
data() {
return {
currentDay: 1,
currentMonth: 1,
currentYear: 1970,
currentWeek: 1,
newWeek:1,
days: [],
weekdays:['日', '一', '二', '三', '四', '五', '六'],
// 上下滑动的鼠标位置
positionSX: "",
positionEX: "",
positionSY: "",
positionEY: "",
isChange: false,
// 左右滑动动画的初始状态
show: true,
fadeOut: false,
fadeIn: false,
fadeOutR: false,
fadeInR: false,
monthList: [],
status: "",
otherDay: ""
};
},
created() {
this.initData(null);
},
mounted() {},
methods: {
getDayMessage(y, m, d) {
this.getCurrentWeek(y, m, d);
const str = this.formatDate(y, m, d);
this.$emit("change", str, m, d);
this.otherDay = d;
},
getCurrentWeek(y, m, d){
const w=`${y}-${m}-${d}`
const weekArr=w.split('-');
const weeks=new Date(weekArr[0], parseInt(weekArr[1] - 1), weekArr[2]);
this.newWeek=weeks.getDay();
},
otherMonth(day){
if(day<15){
this.rightSliding()
}else if(day>15){
this.leftSliding()
}
},
addSchedule(){
this.$emit('add')
},
//向下滑监听坐标
allTouchStart(e) {
//开始x轴坐标
this.positionSX = e.changedTouches[0].clientX;
//开始y轴坐标
this.positionSY = e.changedTouches[0].clientY;
},
allTouchEnd(e) {
//结束x轴坐标
this.positionEX = e.changedTouches[0].clientX;
//结束y轴坐标
this.positionEY = e.changedTouches[0].clientY;
const distanceY = this.positionEY - this.positionSY;
const distanceX = this.positionSX - this.positionEX;
//判断滑动的方向
if (distanceY < -30 && Math.abs(distanceY) > Math.abs(distanceX)) {
this.isChange = true;
}
if (distanceY > 30 && Math.abs(distanceY) > Math.abs(distanceX)) {
this.isChange = false;
}
},
//监听左右滑动坐标
touchStart(e) {
//开始x轴坐标
this.positionSX = e.changedTouches[0].clientX;
//开始y轴坐标
this.positionSY = e.changedTouches[0].clientY;
},
touchEnd(e) {
this.show = !this.show;
//结束x轴坐标
this.positionEX = e.changedTouches[0].clientX;
//结束y轴坐标
this.positionEY = e.changedTouches[0].clientY;
const distanceY = this.positionEY - this.positionSY;
const distanceX = this.positionSX - this.positionEX;
//判断滑动 的方向
if (distanceX > 30 && Math.abs(distanceY) < Math.abs(distanceX)) {
this.rightSliding()
}
if (distanceX < -30 && Math.abs(distanceY) < Math.abs(distanceX)) {
this.leftSliding()
}
},
//向右滑动
rightSliding(){
const self = this;
self.pickNext(self.currentYear, self.currentMonth);
self.fadeOut = true;
self.fadeIn = false;
self.fadeInR = false;
self.fadeOutR = false;
setTimeout(function() {
self.fadeIn = true;
self.fadeOut = false;
self.fadeOutR = false;
self.fadeInR = false;
}, 300);
},
//向左滑动
leftSliding(){
const self = this;
self.pickPre(self.currentYear, self.currentMonth);
self.fadeOutR = true;
self.fadeInR = false;
self.fadeOut = false;
self.fadeIn = false;
setTimeout(function() {
self.fadeInR = true;
self.fadeOutR = false;
self.fadeOut = false;
self.fadeIn = false;
}, 300);
},
initData(cur) {
let date;
if (cur) {
date = new Date(cur);
} else {
const now = new Date();
const t = this.formatDate(now.getFullYear(), now.getMonth(), 1);
const d = new Date(t);
d.setDate(35);
date = new Date(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
}
this.currentDay = date.getDate();
this.currentYear = date.getFullYear();
this.currentMonth = date.getMonth() + 1;
this.currentWeek = date.getDay();
if(!cur || !this.otherDay){
this.otherDay= new Date().getDate();
}
const str = this.formatDate(
this.currentYear,
this.currentMonth,
this.currentDay
);
this.days.length = 0;
//初始化本周
for (let i = this.currentWeek; i >= 0; i--) {
const d = new Date(str);
d.setDate(d.getDate() - i);
const dayobject = {}; //用一个对象包装Date对象 以便为以后预定功能添加属性
dayobject.day = d;
dayobject.status = "";
this.days.push(dayobject); //将日期放入data 中的days数组 供页面渲染使用
}
//其他周
for (let i = 1; i <= 34 - this.currentWeek; i++) {
const d = new Date(str);
d.setDate(d.getDate() + i);
const dayobject = {};
dayobject.day = d;
dayobject.status = "";
this.days.push(dayobject);
}
//选中日期在其他月份是否超出最大日期判断
const arr=[]
for(let j=0, length=this.days.length; j<length; j++){
if(this.days[j].day.getMonth() + 1 === this.currentMonth){
arr.push(this.days[j].day.getDate())
}
}
const maxDate=Math.max.apply(null, arr);
if(this.otherDay > maxDate){
this.otherDay=maxDate
}
this.getDayMessage( this.currentYear, this.currentMonth, this.otherDay)
},
// 上个月信息
pickPre(year, month) {
const d = new Date(this.formatDate(year, month, 1));
d.setDate(0);
this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
},
// 下个月信息
pickNext(year, month) {
const d = new Date(this.formatDate(year, month, 1));
d.setDate(35);
this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
},
// 补零处理
formatDate(year, month, day) {
let y = year;
let m = month;
if (m < 10) m = "0" + m;
let d = day;
if (d < 10) d = "0" + d;
return y + "-" + m + "-" + d;
}
}
};
</script>
<style lang="less" scoped>
#calendar {
width: 100%;
height:auto;
margin: 0 auto;
transition: all 0.5s;
overflow: hidden;
background: #fafafa;
.change {
height: 250px !important;
}
.year-month {
height:80px;
width: 100%;
display: flex;
align-items: center;
justify-content: space-around;
.year-month_left{
height:100%;
width:80%;
padding-left: 25px;
display: flex;
align-items: center;
.top-time {
color:#333;
font-size:26px;
font-weight:500;
margin-right: 15px;
}
ul{
display:flex;
flex-direction:column;
li{
color:#444;
font-size:16px;
}
}
}
.year-month_right{
height:100%;
width:20%;
display: flex;
align-items: center;
justify-content: flex-end;
padding-right: 12px;
.i-plus-empty{
fill: #f18d2f;
}
}
}
.weekdays {
margin: 0;
height: 40px;
font-size: 15px;
display: flex;
flex-wrap: wrap;
color: #666;
justify-content: space-around;
li{
display: inline-block;
width: 13.6%;
text-align: center;
display:flex;
justify-content:center;
align-items:center;
}
}
.days {
height: 210px;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
overflow: hidden;
position: relative;
li{
list-style-type: none;
display: inline-block;
height: 42px;
width: 13.4%;
text-align: center;
font-size: 14px;
color: #000;
position: relative;
.active{
border-radius: 50%;
background: #3a8fea;
color: #fff;
width: 40px;
height: 40px;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
}
.other-month{
width: 40px;
height: 40px;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
color: #a2a2a2;
}
.everyDay {
width: 40px;
height: 40px;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
}
.circle {
width: 4px;
height: 4px;
border-radius: 50%;
background-color: #f2553d;
position: absolute;
bottom: 6px;
left: 48%;
}
.o {
width: 4px;
height: 4px;
border-radius: 50%;
border: 1px solid #f2553d;
position: absolute;
bottom: 1px;
left: 49%;
}
.otherday {
width: 38px;
height: 38px;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
border:1px solid #b2b2b2;
}
}
}
.fadeOut {
animation-name: fadeOut;
animation-duration: 0.5s;
animation-timing-function: ease-in-out;
}
.fadeOutR {
animation-name: fadeOutR;
animation-duration: 0.5s;
animation-timing-function: ease-in-out;
}
.fadeIn {
animation-name: fadeIn;
animation-duration: 0.5s;
animation-timing-function: ease-in-out;
}
.fadeInR {
animation-name: fadeInR;
animation-duration: 0.5s;
animation-timing-function: ease-in-out;
}
.background {
position: absolute;
top: 100px;
height: 211px;
width: 100%;
z-index: -1;
overflow: hidden;
transition: all 0.5s;
.dbg {
background-color: #e1e1e1;
height: 42.2px;
}
.lbg {
background-color: #d5d5d5;
height: 42.2px;
}
}
}
@keyframes fadeOut {
0% {
transform: translateX(0);
opacity: 1;
}
100% {
transform: translateX(-100%);
opacity: 0;
}
}
@keyframes fadeIn {
0% {
transform: translateX(100%);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
@keyframes fadeOutR {
0% {
transform: translateX(0);
opacity: 1;
}
100% {
transform: translateX(100%);
opacity: 0;
}
}
@keyframes fadeInR {
0% {
transform: translateX(-100%);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
</style>