0👍
✅
I managed to do it with 2 modifications:
first I added the v-bind:class to your HTML to add the class based on a method of the component
<div v-for="(week, i) in getCalendar" class="d_day">
<div v-for="day in week" class="day" v-bind:class="{ grey: isAnotherMonth(i, day) }">{{ day }}</div>
</div>
then I created the method with the condition
if it’s the first week of the display and the daynumber is >15 it is the end of last month, the same goes for the last week (I chose 15 because it is half a month but anything between 8 and 20(for february) would do the job)
isAnotherMonth(weekIndex, dayNumber) {
return weekIndex === 0 && dayNumber > 15 || weekIndex === 4 && dayNumber < 15
},
as asked in comments here a more readable version using if
isAnotherMonth(weekIndex, dayNumber) {
if(weekIndex === 0 && dayNumber > 15) {
// first week and number > 15
return true
}
if (weekIndex === 4 && dayNumber < 15) {
// last week and number < 15
return true
}
// day belong to current month
return false
},
and finally a snippets, it have problems with your css but it is still understandable
Vue.component("test-calendar", {
template: `
<div class="all">
<div class="allсalendar">
<div class="pagination">
<div @click="prevPage"
><</div>
<p>{{ nameOfOneMonth }} {{ year }}</p>
<div @click="nextPage"
>></div>
</div>
<div class="calendar">
<div class="d_nameOfDays">
<li v-for="day in nameOfDays" class="nameOfDays">{{ day }}</li>
</div>
<div v-for="(week, i) in getCalendar" class="d_day">
<div v-for="day in week" class="day" v-bind:class="{ grey: isAnotherMonth(i, day) }">{{ day }}</div>
</div>
</div>
</div>
</div>`,
data(){
return{
currentPage: 0,
namesOfMonths: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
nameOfOneMonth: '',
nameOfDays: ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'],
date: new Date(),
year: ''
}
},
computed: {
getCalendar(){
return this.buildCalendar();
}
},
mounted(){
this.year = this.date.getFullYear();
this.currentPage = this.date.getMonth();
this.nameOfOneMonth = this.namesOfMonths[this.currentPage];
},
methods: {
isAnotherMonth(weekIndex, dayNumber) {
return weekIndex === 0 && dayNumber > 15 || weekIndex === 4 && dayNumber < 15
},
prevPage(){
if (this.currentPage === 0) {
this.currentPage = 12;
this.year--;
}
this.currentPage--;
this.nameOfOneMonth = this.namesOfMonths[this.currentPage];
},
nextPage(){
if (this.currentPage === 11) {
this.currentPage = -1;
this.year++;
}
this.currentPage++;
this.nameOfOneMonth = this.namesOfMonths[this.currentPage];
},
getYear(){
this.year = this.date.getFullYear();
},
getLastDayOfMonth(month) { // нахождение числа последнего дня в месяце
let dateDaysInMonth = new Date(this.year, month + 1, 0);
return dateDaysInMonth.getDate();
},
getNumberOfFirstDayInMonth(month){ //нахождение номера первого дня в месяце
let dateFirstDayInMonth = new Date(this.year, month, 1);
return dateFirstDayInMonth.getDay();
},
buildCalendar(){
let massOfMonth = [];
for (let months = 0; months < 12; months++){
massOfMonth.push(months);
massOfMonth[months] = [];
for ( let daysInMonth = 1; daysInMonth <= this.getLastDayOfMonth(months); daysInMonth++){
massOfMonth[months].push(daysInMonth);
}
// Заполняем начало каждого месяца числами из прошлого месяца
if(this.getNumberOfFirstDayInMonth(months) > 0){
let t = this.getLastDayOfMonth(months-1) + 1;
for(let b = 0; b <= this.getNumberOfFirstDayInMonth(months) - 2; b++){
t--;
massOfMonth[months].unshift(t)
}
}else if(this.getNumberOfFirstDayInMonth(months) === 0){
let t = this.getLastDayOfMonth(months-1) + 1;
for(let nulldays = 0; nulldays <= 5; nulldays++){
t--;
massOfMonth[months].unshift(t);
}
}
//Заполняем конец каждого месяца числами из будущего месяца
if(this.getNumberOfFirstDayInMonth(months + 1) > 1){
let t = 0;
for(let q = this.getNumberOfFirstDayInMonth(months + 1); q <= 7; q++){
t++;
massOfMonth[months].push(t);
}
} else if(this.getNumberOfFirstDayInMonth(months + 1) === 0){
massOfMonth[months].push(1);
}
}
// разбиение большого массива месяц на
// меньшие массивы которые имеют по 7 элементов
var longArray = massOfMonth[this.currentPage];
var size = 7;
var newArray = new Array(Math.ceil(longArray.length / size)).fill("")
.map(function() {
return this.splice(0, size)
}, longArray.slice());
//--------------------------------------------------
return newArray; // вывод самого календаря
}
}
});
new Vue({el:"#vue"}) body{
background-color: #FAFAFA;
}
.allсalendar{
background-color: white;
margin-left: 30px;
margin-right: 80%
}
.pagination{
justify-content: space-between;
}
.pagination, .nameOfDays{
display: flex;
}
.nameOfDays{
font-size: 20px;
}
.pagination div{
width: 30px;
height: 30px;
padding-top: 8px;
margin-bottom: -5px;
text-align: center;
font-size: 20px;
font-weight: bold;
cursor: pointer;
}
.pagination div:active{
color: #9D9D9D;
}
.pagination div:hover{
color: white;
background-color: #DEDEDE;
}
.pagination p{
margin: 10px auto 5px auto;
text-align: center;
font-weight: bold;
font-size: 18px;
}
.d_nameOfDays{
margin: 5px auto 5px auto;
padding-left: 10px;
background-color: #DEDEDE;
}
.nameOfDays, .day{
list-style-type: none;
text-align: center;
cursor: pointer;
}
.d_day, .d_nameOfDays{
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
.day{
font-size: 18px;
}
.day:hover {
background: #16B9DE;
color: white;
border-radius: 10%;
}
.grey{
color: red;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="vue">
<test-calendar></test-calendar>
</div>Source:stackexchange.com