A tiny calendar component

Calendar.vue

// Requires datejs
// https://github.com/datejs/Datejs

<template>
	<div id="calendar">
		<nav class="calendar--nav">
			<a @click="decMonth" class="calendar--nav--chevron">
				<i class="fa fa-chevron-left" aria-hidden="true"></i>
			</a>
			<b>{{ monthArray[month] }}</b>
			<b>{{ year}}</b>
			<a @click="incMonth" class="calendar--nav--chevron">
				<i class="fa fa-chevron-right" aria-hidden="true"></i>
			</a>
		</nav>
		<div class="labels">
			<span class="calendar--label" v-for="label in dayLabels">{{ label }} </span>
		</div>
		<div class="calendar--month">
			<div v-for="week in weeks">
				<span class="calendar--day" v-for="day in week" v-bind:class="[selectedClass(day), dayClass(day)]" @click="select(day)">
					<span v-if="day.date">
						{{ day.date }}
					</span>
				</span>
			</div>
		</div>
	</div>
</template>
<style>
.calendar--nav,
.calendar--day,
.calendar--label
{
	user-select: none;
}
a.calendar--nav--chevron {
  display: inline-block;
  padding: 10px 15px;
  background: #2ecc71;
  color: #fff;
  vertical-align: middle;
  line-height: 20px;
  height: 40px;
}

span.calendar--label, span.calendar--day {
  display: inline-block;
  width: 70px;
  padding: 10px 5px;
  box-sizing: border-box;
  overflow: hidden;
  text-align: center;
}
span.calendar--label.day, span.calendar--day.day {
  cursor: pointer;
}
span.calendar--day.selected {
  background: #2ecc71;
  color: #fff;
  font-weight: bold;
}

</style>


<script>
module.exports = {
	'data': function(){ 
		return {
			dayLabels: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
			month: Date.today().getMonth(),
			year: Date.today().getYear() + 1900,
			monthArray: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
			selected : {
				day : false,
				month : false,
				year : false
			}
		}
	},
	'computed': {
		firstDate: function() {
			return new Date(this.year, this.month, 1);
		},
		daysInMonth: function() {
			return Date.getDaysInMonth(this.year, this.month);
		},
		firstDayIndex: function() {
			return this.firstDate.getDay();
		},
		lastDate: function() {
			return this.firstDayIndex + this.daysInMonth;
		},
		weeks: function() {
			var squareIndex = 0;
			var dateOfMonth = 1;
			var weeks = [];
			while (squareIndex < (this.lastDate)) {
				var week = [];
				for (var d = 0; d < 7; d++) {
					if (squareIndex < this.firstDayIndex || squareIndex >= (this.lastDate)) {
						week.push({ date : false });
					} else {
						week.push({
							date : dateOfMonth, 
							data : {
								day : dateOfMonth,
								month : this.month,
								year : this.year
							}
						});
						dateOfMonth++;
					}
					squareIndex++;
				}
				weeks.push(week);
			}
			return weeks;
		}
	},
	methods: {
		incMonth: function() {
			if (this.month == 11) {
				this.year++;
				this.month = 0;
				return true;
			}
			this.month++;
		},
		decMonth: function() {
			if (this.month == 0) {
				this.year--;
				this.month = 11;
				return true;
			}
			this.month--;
		},
		select : function(day){
			if(this.isSelected(day)){
				this.selected = {
					day : false,
					month : false,
					year : false 
				};
				return true;
			}
			return this.selected = {
				day : day.data.day,
				month : day.data.month,
				year : day.data.year 
			};
			
		},
		isSelected : function(day){
			if(day.date === false){
				return false;
			}
			if(
				this.selected.year == day.data.year && 
				this.selected.month == day.data.month &&
				this.selected.day == day.data.day){
				return true;
			}
			return false;
		},
		selectedClass : function(day){
			if(this.isSelected(day)){
				return 'selected';
			}
			return '';
		},
		dayClass : function(day){
			if(this.isDay(day)){
				return 'day';
			}
			return '';
		},
		isDay : function(day){
			return day.date !== false;
		}
	}
};
</script>