vue.js

Just a Web Code Solution

Step 1. Your question relates to:

Step 2. Type a keyword:

create calendar using vuejs

1702

Show ResultVUE.JS

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.12.0/moment.min.js"></script>
<style>
a {
padding: 10px 10px 10px 10px
}

table{
border: 1px solid black;
border-radius: 10px;
}

a.cell-selected,
a.cell-selected:focus {
background-color: #4cff00;
color: black;
border-radius: 10px;
font-weight: bold;
}

.calendar_js-days {
text-align: center;
color: white;
background-color: #4800ff;
border-radius: 10px;
}

a:hover {
background-color: yellow;
color: black;
border-radius: 10px;
font-weight: bold;
}

tr {
height: 40px;
width: 30px;
}
</style>
</head>
<body>
<div id="app">
<table>
<tr>
<th colspan="1">
<a href="#" class="prev" v-on:click="previousMonth">«</a>
</th>
<th colspan="5">
{{Current_Month_Year}}
</th>
<th colspan="1">
<a href="#" class="next" v-on:click="nextMonth">»</a>
</th>
</tr>
<tr class="calendar_js-days">
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
<th>Sun</th>
</tr>
<tr v-for="item in gridArray">
<td v-for="data in item">
<a href="#" v-on:click="setDate(data)" v-bind:class="{'cell-selected':isActive(data)}">
{{data.getDate()}}
</a>
</td>
</tr>
</table>
</div>
<script>
new Vue({
el: '#app',
data: {
filterDate: undefined,
selectedMonth: new Date(),
Current_Month_Year: 'Feb 2019'
},
methods: {
previousMonth: function() {
let tmpDate = this.selectedMonth;
let tmpMonth = tmpDate.getMonth() - 1;
this.selectedMonth = new Date(tmpDate.setMonth(tmpMonth));
this.Current_Month_Year = moment(this.selectedMonth).format('MMM YYYY');
},
nextMonth: function() {
let tmpDate = this.selectedMonth;
let tmpMonth = tmpDate.getMonth() + 1;
this.selectedMonth = new Date(tmpDate.setMonth(tmpMonth));
this.Current_Month_Year = moment(this.selectedMonth).format('MMM YYYY');
},
setDate: function(date) {
if (date == this.filterDate) {
console.log('setting undefined');
this.filterDate = undefined;
//unselected
} else {
this.filterDate = date;
}
},
isActive: function(date) {
return date === this.filterDate;
},
getCalendarMatrix: function(date) {
let calendarMatrix = []

let startDay = new Date(date.getFullYear(), date.getMonth(), 1)
let lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0)

// Modify the result of getDay so that we treat Monday = 0 instead of Sunday = 0
let startDow = (startDay.getDay() + 6) % 7;
let endDow = (lastDay.getDay() + 6) % 7;

// If the month didn't start on a Monday, start from the last Monday of the previous month
startDay.setDate(startDay.getDate() - startDow);

// If the month didn't end on a Sunday, end on the following Sunday in the next month
lastDay.setDate(lastDay.getDate() + (6 - endDow));

let week = []
while (startDay <= lastDay) {
week.push(new Date(startDay));
if (week.length === 7) {
calendarMatrix.push(week);
week = []
}
startDay.setDate(startDay.getDate() + 1)
}

return calendarMatrix;
}
},
computed: {
// a computed getter
gridArray: function() {
let grid = this.getCalendarMatrix(this.selectedMonth);
return grid;
},
formattedDate: function() {
return this.filterDate ? moment(this.filterDate).format('lll') : '';
}
}
});
</script>
</body>
</html>