vueでカレンダーを書きます。
前に上の会社で会社員の勤務評定のものを作ったことがあります。中にはカレンダーが必要です。当時自分はvueで適当に一つ書きました。比較的簡単です。他の機能のコードを削除しました。カレンダーだけ残して、直接コードを見ます。
以上はvueを利用してカレンダーの詳細を書いています。vueカレンダーに関する資料は他の関連記事に注目してください。
<template>
<div class="lookForMonth_wrapper">
<div class="lookForMonth_top">
<div class="selectDate">
<div>{{year}} {{month}} </div>
<div class="upDownSelect">
<div class="upDownSelect_item" @click="dateUp"></div>
<div class="upDownSelect_item" @click="dateDown"></div>
</div>
</div>
</div>
<div class="calendar" :style="calendarStyle">
<div v-for="(item,index) in calendarData" class="calendar_item" :key='index' :class="{ash:item.color==='ash',date:index>6&&item.color!=='ash'}">
<p class="dateEdit">{{item.label}}<i class="el-icon-edit-outline" v-if="item.color!=='ash'&&index>=7"></i></p>
<p v-if='index>6'> </p> //
</div>
</div>
</div>
</template>
<script>
export default {
name: "lookForMonth",
data: () => {
return {
calendarData: [{label:" "},{label: " "}, {label:" "},{label: " "},{label: " "},{label: " "},{label: " "}], //
year: 0, //
month: 0, //
date: 0, //
day: -1, //
};
},
filters:{
},
computed: {
//
calendarStyle() {
if (this.calendarData.length > 42) {
return "height: 701px;";
} else {
return "height: 601px;";
}
}
},
async created(){
//
this.getNow();
//
let firstTime = +new Date(this.year,this.month-1,1,0,0,0)
this.getCalendarDate(); // calendarData
},
mounted() {
},
methods: {
//
getNow() {
let now = new Date()
this.year = +now.getFullYear()
this.month = +now.getMonth() + 1
this.date = +now.getDate()
this.day = +now.getDay()
},
//
monthDay(month) {
if ([1,3,5,7,8,10,12].includes(month)) {
return 31
} else if ([4,6,9,11].includes(month)) {
return 30
} else if (month === 2) {
//
if (
(this.year % 4 === 0 && this.year % 100 !== 0) ||
this.year % 400 === 0
) {
return 29
} else {
return 28
}
}
},
// calendarData
getCalendarDate() {
//
let firstDay = new Date(this.year + "-" + this.month + "-" + "01").getDay();
this.calendarData = [{label:" "},{label: " "}, {label:" "},{label: " "},{label: " "},{label: " "},{label: " "}];
let num = parseInt(firstDay);
let nowDays = this.monthDay(this.month);
let lastMonth = this.month - 1>0?this.month - 1:12;
let lastDays = this.monthDay(lastMonth);
//
for (let i = 0; i < num; i++) {
this.calendarData.push({label:lastDays - num + i + 1,color:'ash'});
}
//
for (let i = 0; i < nowDays; i++) {
this.calendarData.push({label:i + 1});
}
//
if (this.calendarData.length % 7 !== 0) {
let surplusDay = 7 - (this.calendarData.length % 7);
for (let i = 0; i < surplusDay; i++) {
this.calendarData.push({label:i + 1,color:'ash'});
}
}
this.loading = false
},
//
dateUp() {
this.month--;
if (this.month <= 0) {
this.year--;
this.month = 12;
}
this.getCalendarDate(); // calendarData
},
//
dateDown() {
this.month++;
if (this.month > 12) {
this.year++;
this.month = 1;
}
this.getCalendarDate(); // calendarData
},
}
};
</script>
<style lang="scss" scoped>
.lookForMonth_wrapper {
padding: 20px;
width: 701px;
margin: auto;
}
.lookForMonth_top {
margin-bottom: 20px;
overflow: hidden;
.selectTeacher {
float: left;
}
.selectDate {
height: 30px;
line-height: 30px;
float: right;
display: flex;
.upDownSelect {
display: flex;
flex-direction: column;
margin-top: -2px;
margin-left: 5px;
.upDownSelect_item {
width: 0;
height: 0;
border: 7px solid transparent;
cursor: pointer;
}
.upDownSelect_item:nth-child(1) {
border-bottom: 7px solid #666;
margin-bottom: 5px;
&:hover {
border-bottom: 7px solid skyblue;
}
}
.upDownSelect_item:nth-child(2) {
border-top: 7px solid #666;
&:hover {
border-top: 7px solid skyblue;
}
}
}
}
}
/* =======================================↓ */
.calendar {
width: 701px;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
.calendar_item {
box-sizing: border-box;
width: 100px;
height: 100px;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
&.date:hover{
background: #eee;
}
.status{
margin-top: 10px;
&.textBlue{
color: blue;
}
&.textRed{
color: brown;
}
}
.el-icon-edit-outline{
cursor: pointer;
margin-left: 7px;
}
}
.ash{
color: gainsboro;
}
.dateEdit{
margin-bottom: 10px;
}
}
</style>
効果は以下の通りです以上はvueを利用してカレンダーの詳細を書いています。vueカレンダーに関する資料は他の関連記事に注目してください。