Я написал календарь с отображением событий и теперь хочу сделать возможность добавления события в определенный день. При нажатии на кнопку добавления у меня срабатывает функция
openAddEvent() в компоненте EventsDays в которой bus передаёт текущий день, месяц и год в компонент ModalWindowAdd в функцию addEvent. Я попробовал вывести в консоль все данные, которые я передал и у меня показало, что этих данных нету. И из-за этого я не могу в правильную дату добавить новосозданное событие. Подскажите, где я сделал ошибку в передаче информации в шине событий.
Полный код на ГитХаб
Скриншот консоли, которая показывает что передалось в функцию addEvent:
Компонент где лежат события, откуда отсылаются данные в функцию addEvent.
<template>
<transition :name="nameOfClass" >
<div :key="currentPage" class="fade_wrapper">
<div v-for="(week, i) in getCalendar" class="d_day">
<li v-for="day in week"
class="li_day"
v-bind:class="{ 'currentDay': currentDayOnCalendar(i, day), }" >
<img src="src/assets/plus.png"
width="16px"
height="16px"
v-show="addPlus(i, day)"
v-on:click="openAddEvent(day)">
<div class="day"
v-bind:class="{ 'grey': isAnotherMonth(i, day),
'red': weekEndDayFunction(i, day) }">{{ day }}</div>
<div v-for="event in buildEvents(i, day)"
class="event"
v-bind:class="{ 'eventBrown': eventBrown(event),
'eventPurple': eventPurple(event),
'eventOrange': eventOrange(event),
'eventBlue': eventBlue(event) }"
v-on:click="openModalDetail(event)">{{ event }}
</div>
</li>
</div>
</div>
</transition>
</template>
<script>
import { bus } from './../main.js'
export default {
data(){
return{
date: new Date(),
isActive: true,
options: [
{ text: 'Встреча', value: '8' },
{ text: 'День Рождения', value: '4' },
{ text: 'Праздник', value: '1' },
{ text: 'Другое', value: '16' }
],
year: Number,
currentPage: Number,
nameOfClass: '',
modalWindowAdd: false,
}
},
created(){
this.year = this.date.getFullYear();
this.currentPage = this.date.getMonth();
bus.$on('sendYear', data => {
this.year = data
});
bus.$on('sendMonth', data => {
this.currentPage = data
});
bus.$on('sendNameOfClass', data => {
this.nameOfClass = data
});
},
computed: {
getCalendar(){
return this.buildCalendar();
},
eventsData() {
return this.$store.state.eventData;
}
},
methods: {
openAddEvent(dayNumber){
this.modalWindowAdd = true;
bus.$emit('changeModalWindowAdd', this.modalWindowAdd);
bus.$emit('sendDayWhenAddEvent', dayNumber);
bus.$emit('sendYear', this.year);
bus.$emit('sendMonth', this.currentPage);
},
buildEvents(weekIndex, dayNumber){
let arrOfEvents = this.eventsData.events;
const events = [];
for(let z = 0; z < arrOfEvents.length; z++){
let dataStartOfEvent = arrOfEvents[z].starts_at;
let getStartDataOfEvent = new Date(dataStartOfEvent);
let dataEndOfEvent = arrOfEvents[z].ends_at;
let getEndDataOfEvent = new Date(dataEndOfEvent);
let memo = arrOfEvents[z].memo;
if(getStartDataOfEvent.getDate() == getEndDataOfEvent.getDate()){
if(dayNumber == getStartDataOfEvent.getDate() &&
this.currentPage == getStartDataOfEvent.getMonth() &&
this.year == getStartDataOfEvent.getFullYear() &&
!this.isAnotherMonth(weekIndex, dayNumber)){
events.push(memo);
continue;
}
}else if(getStartDataOfEvent.getDate() != getEndDataOfEvent.getDate() &&
!this.isAnotherMonth(weekIndex, dayNumber)){
for(let b = getStartDataOfEvent.getDate(); b <= this.getLastDayOfMonth(getStartDataOfEvent.getMonth()); b++){
if(dayNumber === b &&
this.currentPage == getStartDataOfEvent.getMonth() &&
this.year == getStartDataOfEvent.getFullYear()){
events.push(memo);
continue;
}
}
for(let b = 0; b <= getEndDataOfEvent.getDate(); b++){
if(dayNumber === b &&
this.currentPage == getEndDataOfEvent.getMonth() &&
this.year == getEndDataOfEvent.getFullYear()){
events.push(memo);
continue;
}
}
}
}
return events;
},
}
};
</script>
Компонент где лежит функция addEvent.
<template>
<div class="underModalWindow">
<div class="modalWindow">
<img src="src/assets/x.png" width="20px" height="20px" @click="closeModalAdd">
<div class="modalWindow_order">Укажите событие которое хотите добавить на выбраную вами дату.</div>
<div class="modalWindow-input_select">
<input type="text" placeholder="Место для вашего события" v-model="inputInAddEvent">
<div>
<select v-model="selected">
<option disabled value="">Тип события</option>
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
</div>
</div>
<div v-if="textOfError" class="textOfError">Вы обязательно должны указать событие и тип события</div>
<button v-on:click="addEvent(inputInAddEvent)">Добавить событие</button>
</div>
</div>
</template>
<script>
import { mapState } from "vuex";
import { bus } from './../main.js'
export default {
data(){
return{
date: new Date(),
inputInAddEvent: '',
options: [
{ text: 'Встреча', value: '8' },
{ text: 'День Рождения', value: '4' },
{ text: 'Праздник', value: '1' },
{ text: 'Другое', value: '16' }
],
selected: '',
textOfError: false,
dayWhenAddEvent: Number,
year: Number,
currentPage: Number
}
},
computed: {
eventsData() {
return this.$store.state.eventData;
}
},
methods: {
addEvent(text){
bus.$on('sendDayWhenAddEvent', data => {
this.dayWhenAddEvent = data;
});
bus.$on('sendYear', data => {
this.year = data
});
bus.$on('sendMonth', data => {
this.currentPage = data
});
console.log(this.dayWhenAddEvent)
console.log(this.year)
console.log(this.currentPage)
if(this.selected == '' || text == ''){
this.textOfError = true;
}else if(text != ''){
this.modalWindowAdd = false;
bus.$emit('changeModalWindowAdd', this.modalWindowAdd)
let arrOfEvents = this.eventsData.events;
let eventObj = {
"id": Date.now(),
"starts_at": new Date(this.year, this.currentPage, this.dayWhenAddEvent),
"ends_at": new Date(this.year, this.currentPage, this.dayWhenAddEvent),
"memo": text,
"type": +this.selected
};
arrOfEvents.push(eventObj);
console.log(arrOfEvents[9].ends_at) // дата добавления последнего события
this.inputInAddEvent = '';
}
},
closeModalAdd(){
this.modalWindowAdd = false;
bus.$emit('changeModalWindowAdd', this.modalWindowAdd)
}
}
};
</script>
