<template>
<div class="calendar">
<div class="calendar-header bold">
<i class="material-icons" @click="prevMonth">keyboard_arrow_left</i>
{{ getFullMonth }}
<i class="material-icons" @click="nextMonth">keyboard_arrow_right</i>
</div>
<div class="calendar-body">
<div class="week bold">
<div class="dayOfWeek">ПН</div>
<div class="dayOfWeek">ВТ</div>
<div class="dayOfWeek">СР</div>
<div class="dayOfWeek">ЧТ</div>
<div class="dayOfWeek">ПТ</div>
<div class="dayOfWeek">СБ</div>
<div class="dayOfWeek">ВС</div>
</div>
<div class="week" v-for="date in getDate">
<div
v-for="item in date"
:ref="`${year}-${month}-${item.date}`"
:class="{ 'week-day': true, 'active-day': selected[item.date] }"
@click="onSelect(item.date);"
>
{{ selected[item.date] }}
<span :class="{ active: item.today }">{{ item.date }}</span>
<div v-for="shedule in item.shedule" class="week-day_time">
{{ shedule }}
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import calendarDate from "../class/calendar";
import moment from "moment";
import dateCalendar from "../data/date_calendar.json";
import axios from "axios";
export default {
name: "full-calendar",
data() {
return {
year: null,
month: null,
shedules: [],
selected: []
};
},
computed: {
getFullMonth() {
let date = dateCalendar.month[this.month];
return `${date} ${this.year} г.`;
},
getDate() {
let dataCalendar = new calendarDate(
this.year,
this.month
).getCalendarWeek();
let dateMonthCalendar = null;
let arrRes = [];
for (let i = 0; i < this.shedules.length; i++) {
let shedule = this.shedules[i];
let dateStart = moment(shedule.start);
let dateEnd = moment(shedule.end);
if (dateStart.month() === this.month) {
for (let n = 0; n < dataCalendar.length; n++) {
for (let key in dataCalendar[n]) {
arrRes[dateStart.date()] = arrRes[dateStart.date()] || [];
if (dataCalendar[n][key].date === parseInt(dateStart.date())) {
dateMonthCalendar = dataCalendar[n][key];
arrRes[dateStart.date()].push(
`${dateStart.format("HH:mm")}-${dateEnd.format("HH-mm")}`
);
}
}
}
dateMonthCalendar.shedule = arrRes[dateStart.date()];
}
}
return dataCalendar;
}
},
methods: {
nextMonth() {
let month = `${this.year}-${this.month + 1}`;
let next = moment(month, "YYYY-MM").add(1, "month");
this.month = next.month();
this.year = next.year();
},
prevMonth() {
let month = `${this.year}-${this.month + 1}`;
let next = moment(month, "YYYY-MM").add(-1, "month");
this.month = next.month();
this.year = next.year();
},
onSelect(day) {
console.log(this.selected);
this.selected[day] = !this.selected[day];
}
},
created() {
let date = moment();
this.year = date.year();
this.month = date.month();
for (
let i = 1;
i < moment(`${this.year}-${this.month + 1}`, "YYYY-MM").daysInMonth() + 1;
i++
) {
this.selected[i] = false;
}
axios.get("../data/data_shift.json").then(res => {
this.shedules = res.data;
});
}
};
</script>
<style lang="scss">
.calendar {
.calendar-header {
display: flex;
align-items: center;
}
.calendar-body {
display: flex;
flex-direction: column;
.week {
display: flex;
flex-direction: row;
justify-content: flex-start;
.dayOfWeek {
text-align: center;
height: 35px;
line-height: 35px;
}
div {
display: inline-block;
text-align: right;
width: 14%;
border: 1px solid #e6e6e6;
height: 100px;
span {
padding-right: 5px;
}
}
}
}
}
</style>
