table.calendar-table
thead
tr
th(@click="prevMonth").prev.available.v-drp__css-icon-wrapper
i.arrow-left.v-drp__css-icon
th(colspan="5").month
| {{ monthName }}
// select year
select(v-if="showYearSelect" v-model="year").yearselect
option(v-for="(item, index) in years" :value="item" :key="index") {{ item }}
span(v-else style="margin-left: 5px") {{ year }}
th(@click="nextMonth").next.available.v-drp__css-icon-wrapper
i.arrow-right.v-drp__css-icon
tbody
tr
th(v-for="(weekDay, dayIndex) in daysOfWeek" :key="dayIndex")
| {{ weekDay }}
tr(v-for="(dateRow, rowIndex) in calendar" :key="rowIndex")
td(
v-for="(date, dateIndex) in dateRow"
:key="dateIndex"
:class="dayClass(date)"
@click="selectDate(date)"
@mouseover="hoverDate(date)"
).calendar-cell
div.calendar-cell__content {{ date | dateNum }}