VUE.JS create calendar vuejs - Net-Raft.com

Welcome aboard! We are happy you are here and wish you good net-raft!




Just a Web Code Solution

create calendar using vuejs


 763

Show ResultVUE.JS


2

<!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>


By     Created   
The power of the user (%)
5%



The most helpful VUE.JS solutions

get ip address using vuejsget ip address using vuejsVUE.JS

Click to see more ...

  2.1K     69

get client city using vuejsget client city using vuejsVUE.JS

Click to see more ...

  420     41

parse json url using vuejsparse json url using vuejsVUE.JS

Click to see more ...

  225     36

create calendar using vuejscreate calendar using vuejsVUE.JS

Click to see more ...

  763     16

get country using vuejsget country using vuejsVUE.JS

Click to see more ...

  166     11

get client timezone using vuejsget client timezone using vuejsVUE.JS

Click to see more ...

  88     8

get client region name using vuejsget client region name using vuejsVUE.JS

Click to see more ...

  90     7

get client latitude longitude using vuejsget client latitude longitude using vuejsVUE.JS

Click to see more ...

  95     3