vue日历排班组件_vue.js日历组件

直接上代码

<<

<

{{year}}年{{month}}月

>

>>

{{item.name}}

{{item2}}{{item2}}

export default {

name: "calender",

data(){

return {

year:2019, // 设置当前年份

month:8, // 设置当前月份

day:1, // 设置当前号数

all:[], // 日历表格数组

weeks:[

{id:0,name:"日"},

{id:1,name:"一"},

{id:2,name:"二"},

{id:3,name:"三"},

{id:4,name:"四"},

{id:5,name:"五"},

{id:6,name:"六"},

]

}

},

beforeMount() {

this.getMyDate();

},

methods:{

getMyDate(year=false,month=false){

let obj; // 初始化的时间对象

let first=[]; // 第1排的数据

let second=[]; // 第2-6排的数据

let firstDay; // 判断当月第一天是周几，作为日期对象的开头

if(year&&month){

// 处理月份越界问题

if(month<1){

this.year-=1;

this.month=12;

}

else if(month>12){

this.year =1;

this.month=1;

}

else {

this.month=month;

this.year=year;

}

obj=new Date(this.year,month,this.day);

this.all=[]; // 每次请求时把日期数组清空

}

else {

obj=new Date();

this.year=obj.getFullYear(); // 查询年份

this.month=obj.getMonth() 1; // 查询月份

this.day=obj.getDate(); // 查询多少号

}

let s=this.year '/' this.month '/' 1;

firstDay=new Date(s).getDay(); // 查询当月的第一天是周几

let days=new Date(this.year, this.month, 0).getDate(); // 判断当前月份有多少天

// 生成日历表格

// 生成第一排的数据

let index;

let data1=[7,1,2,3,4,5,6];

data1.forEach((i,item)=>{

if(item===firstDay){

index=i;

}

});

for(let i=0;i<7;i ){

if(i

first.push(0)

}

else {

first.push(i-index 1)

}

}

// 生成第2-6排数据

let index2=first[first.length-1];

for(let i=0;i<5;i ){

let d=[];

for(let j=1;j<8;j ){

if(i*7 index2 j>days){

d.push(0)

}

else{

d.push(i*7 index2 j)

}

}

second.push(d)

}

// 将第1排和第2-6排数据合到一起

this.all.push(first);

second.forEach(x=>this.all.push(x));

}

}

}

.calender{

width: 283px;

height: auto;

box-shadow: 0 0 1px #9E9C9C;

display: flex;

flex-flow: column;

margin-left: 10px;

}

.top{

flex: 1;

border-bottom: solid 1px #E0DEDE;

text-align: center;

line-height: 40px;

color: #696868;

display: flex;

}

.bottom{

flex: 7;

}

table{

width: 100%;

height: 100%;

}

th{

color: #6B6A6A;

font-weight: normal;

transition: all 0.5s;

border-radius: 50%;

height: 36px;

}

tbody>tr>th:hover{

background-color: #E5E6E6;

}

.active,.active:hover{

background-color: #FB4023;

color: white;

}

.top>div:nth-child(2){

width: 100px;

height: 100%;

margin: 0 auto;

}

.preDate,.nextDate{

flex: 1;

display: flex;

}

.preYear,.nextYear{

flex: 2;

}

.preMonth,.nextMonth{

flex: 1;

}

.preDate>button,.nextDate>button{

border: none;

background-color: white;

font-size: 17px;

color: #999999;

transition: color 0.8s;

font-weight: 100;

outline: none;

}

.preMonth{

text-align: left;

}

.nextMonth{

text-align: right;

}

.preMonth:hover,.nextMonth:hover,.preYear:hover,.nextYear:hover{

color: red;

cursor: pointer;

}

效果如下:

来源：https://www.icode9.com/content-4-400801.html