vue 自定义日历组件

 

<template>

<div class="">

<div class="calendarTraffic" name="CalendarTraffic">

<!-- 年份/月份 流量查询-->

<div class="monthHeader">

<!--绑定click事件，点击按钮；重新刷新当前日期-->

<button class="lf oprButton oprButton-bg ml5"

@click="pickPre(currentYear, currentMonth)">❮上月</button>

<span class="lf oprButton title-data">{{ nowFullYear }}/{{ nowMonth }}/{{ nowDay }}</span>

<button class="lf oprButton oprButton-bg"

@click="pickNext(currentYear,currentMonth)">下月❯</button>

<button class="lf oprButton oprButton-bg ml5"

@click="pickToday(currentYear,currentMonth)">今天</button>

<button class="rt oprButton oprButton-bg mr10">流量查询</button>

</div>

<!-- 日历 -->

<div class="calendar-list calendar-date">

<!-- 星期 -->

<ul class="calendar-weekadys clearfix">

<li class="weekadys-item">一</li>

<li class="weekadys-item">二</li>

<li class="weekadys-item">三</li>

<li class="weekadys-item">四</li>

<li class="weekadys-item">五</li>

<li class="weekadys-item">六</li>

<li class="weekadys-item">日</li>

</ul>

<!-- 日期 -->

<ul class="calendar-days clearfix">

<!-- 核心 v-for循环 每一次循环用<li>标签创建一天 -->

<li class="daysList" v-for="(dayobject,inedx) in days" :key="dayobject.id">

<!--本月-->

<!--如果不是本月 改变类名加灰色-->

<div class="daysList-cont daysList-invalid"

v-if="dayobject.day.getMonth()+1 != currentMonth">

<div class="daysList-mid">

<p class="daysList-item"> {{ dayobject.day.getDate() }}</p>

<p class="daysList-item">{{ dayobject.parccent}}</p>

</div>

</div>

<!-- 如果是本月 判断是不是该月第一天-->

<div class="daysList-cont daysList-normal"

:class="{active:inedx==number}"

v-else-if="dayobject.day.getFullYear() == currentYear && //当前年份

((dayobject.day.getMonth()+1 == currentMonth &&//本月且不是系统月份

dayobject.day.getMonth() != new Date().getMonth())&&

dayobject.day.getDate() == currentDay)||

(dayobject.day.getMonth() == new Date().getMonth() &&//当前系统时间

dayobject.day.getDate() ==new Date().getDate())"

@click="pickDays(currentYear,currentMonth,dayobject.day.getDate(),inedx)">

<div class="daysList-mid">

<p class="daysList-item">{{ dayobject.day.getDate() }}</p>

<p class="daysList-item">{{ dayobject.parccent}}</p>

</div>

</div>

<!-- 如果是本月-->

<div class="daysList-cont daysList-normal" v-else

:class="{active:inedx==number}"

@click="pickDays(currentYear,currentMonth,dayobject.day.getDate(),inedx)">

<div class="daysList-mid">

<p class="daysList-item">{{ dayobject.day.getDate() }}</p>

<p class="daysList-item">{{ dayobject.parccent}}</p>

</div>

</div>

</li>

</ul>

</div>

</div>

</div>

</template>

 

<script>

export default {

name: "CalendarTraffic",

data(){

return{

number:0,//active样式索引

currentDay: 1,//当前日

currentMonth: 1,//当前月份

currentYear: 1970,//当前年份

currentWeek: 1,//前星期X

nowFullYear:1970,//中间显示当前年

nowMonth:1,//中间显示当前月

nowDay:1,//中间显示当前日

days: []

}

},

created() {

//在vue初始化时调用

this.initData(null);

},

methods: {

initData(cur) {

let date;

if (cur) {

date = new Date(cur);

} else {

const now = new Date();

const d = new Date(this.formatDate(now.getFullYear(), now.getMonth(), 1));

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.nowDay = new Date().getDate();

this.nowFullYear = date.getFullYear();

this.nowMonth = date.getMonth() + 1;

 

this.currentWeek = date.getDay(); //获取当前星期X(0-6,0代表星期天)

if (this.currentWeek == 0) {

this.currentWeek = 7;

}

const str = this.formatDate(

this.currentYear,

this.currentMonth,

this.currentDay,

);

this.days.length = 0;

// 例今天是周五，放在第一行第5个位置，前面4个上个月的

//初始化本周

for (let i = this.currentWeek - 1; i >= 0; i--) {

const d = new Date(str);

d.setDate(d.getDate() - i);

const dayobject = {}; //用一个对象包装Date对象 以便为以后预定功能添加属性

dayobject.day = d;

dayobject.parccent = '100%';

this.days.push(dayobject);//将日期放入data 中的days数组 供页面渲染使用

}

 

//this.nowDay-1（今天几号索引）this.currentWeek-1（当月第一天周几索引）

//得到今天的索引值 初始化active样式

this.number=this.nowDay+this.currentWeek-2;

 

//列表显示的天数6*7减去前星期X

for (let i = 1; i <= 42 - this.currentWeek; i++) {

const d = new Date(str);

d.setDate(d.getDate() + i);

const dayobject = {};

dayobject.day = d;

dayobject.parccent = '100%';

this.days.push(dayobject);

}

//console.log(this.days)

},

//上个月

pickPre(year, month) {

// setDate(0); 上月最后一天

// setDate(-1); 上月倒数第二天

// setDate(dx) 参数dx为 上月最后一天的前后dx天

const d = new Date(this.formatDate(year, month, 1));

d.setDate(0);

this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));

this.nowDay=1;

this.number=this.currentWeek-1;//active样式

},

//下个月

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));

this.nowDay=1;

// console.log(this.currentWeek)

this.number=this.currentWeek-1;//active样式

// console.log(this.number)

//console.log(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))

},

//今天

pickToday(year, month) {

const d = new Date();

this.initData(this.formatDate(d.getFullYear(), d.getMonth()+1, 1));

//this.number=this.currentWeek-1;//active样式

//console.log(this.formatDate(d.getFullYear(), d.getMonth()+1, d.getDate()))

},

pickYear(year, month) {

//alert(year + "," + month);

},

//当前日历时间点击

pickDays(year, month,clickCurrentDay,index){

const d = new Date();

const day=clickCurrentDay;

//active样式的更改

this.number=index;

// 年月日更改

this.nowFullYear= year;

this.nowMonth= month;

this.nowDay= clickCurrentDay;

// console.log(year,month,clickCurrentDay);

},

// 格式化日期

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="scss" scoped>

@import '../../../common/css/common.scss';

//定义基本长度

$line10:10px;

$lf:left;

$rt:right;

 

$color-fff:#ffffff;

//按钮背景颜色

$button-bg:#314D68;

//正文颜色

$text-color:#B8C9DA;

//hover蓝色

$table-deepBlue:#0c8ceb;

$table-blue:#289cf4;

//失效颜色

$invalid-color:#2F3F53;

$item-color:#B8C9DA;

$item-invalid-color:#77899c;

//字体居中

$text-center:center;

button {

outline: none;

border: none;

}

ul li{

list-style: none;

}

.lf{

float: $lf;

}

.rt{

float: $rt;

}

.topWrap{

height: $line10*33.5;

}

//清楚浮动

.clearfix {

zoom: 1;

}

.clearfix:after {

content: '';

display: block;

height: 0;

font-size: 0;

clear: both;

overflow: hidden;

}

//日历表头按钮

.calendarTraffic{

width: 100%;

height: 100%;

}

//日历表头

.monthHeader{

height:$line10*3.6;

padding-top: $line10*0.6;

//按钮样式

.oprButton{

height: $line10*2.5;

padding: 0 $line10;

border-radius:$line10/2;

color: $color-fff;

line-height: $line10*2.5;

cursor: pointer;

}

.oprButton-bg{

background-color: $button-bg

}

.title-data{

text-align: $text-center;

width: $line10*10;

}

.ml5{

margin-left: $line10/2;

}

.mr10{

margin-right: $line10;

}

}

 

//日历

.calendar-list{

color:$text-color;

//日历星期头

.calendar-weekadys{

width: 100%;

}

.calendar-weekadys .weekadys-item{

height: $line10*2.4;

line-height: $line10*2.4;

}

.calendar-weekadys .weekadys-item,

.calendar-days .daysList{

width: 14%;

float: $lf;

text-align: $text-center;

color:$text-color;

margin-right: $line10*0.1;

}

.calendar-days .daysList{

cursor: pointer;

height: $line10*4.5;

color: $item-color;

.daysList-cont{

width: 100%;

float: $lf;

}

}

.calendar-days .daysList-normal .daysList-item:nth-child(2n){

color: $item-invalid-color;

}

.calendar-days .daysList-normal .daysList-item:nth-child(2n+1){

color: $item-color;

}

.calendar-days .daysList-mid{

height: $line10*3.4;

margin: $line10*0.4;

}

.calendar-days .daysList-cont.daysList-normal:hover,

.daysList-normal.active{

border-radius:$line10/2;

background-color: $table-deepBlue;

}

.calendar-days .daysList-cont.daysList-normal:hover .daysList-mid,

.daysList-normal.active .daysList-mid{

background-color: $table-blue;

}

.calendar-days .daysList-cont.daysList-normal:hover p,

.daysList-normal.active p{

color: $color-fff !important;

}

.daysList-item{

height: $line10*1.6;

}

// 上个月或者下个月

.daysList-invalid{

background-color: $invalid-color;

border-radius:$line10/2;

}

.daysList-invalid .daysList-item{

color:$item-invalid-color;

}

}

</style>