My goal is to retrieve a date value from the onDateClick function of fullCalendar using vue.js and then pass this data to a prop that can be stored in my backend via Laravel. However, I am encountering various undefined errors no matter how I approach the problem. Although I am able to trigger the modal popup successfully, I struggle to obtain a visible return value. I have experimented with multiple approaches but nothing seems to be effective so far. Below is some sample code that illustrates my attempts:
import { Table, TableColumn, Select, Option } from 'element-ui';
import FullCalendar from '@fullcalendar/vue';
import dayGridPlugin from '@fullcalendar/daygrid';
import Modal from '@/components/Modal'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
import BaseInput from '@/components/Inputs/BaseInput'
import flatPicker from 'vue-flatpickr-component';
import 'flatpickr/dist/flatpickr.css';
import DropzoneFileUpload from '@/components/Inputs/DropzoneFileUpload';
const today = new Date();
const y = today.getFullYear();
const m = today.getMonth();
const d = today.getDate();
export default {
name: 'CalendarForm',
components: {
FullCalendar,
Modal,
BaseInput,
flatPicker,
DropzoneFileUpload,
[TableColumn.name]: TableColumn,
[Table.name]: Table,
},
data(){
let yearAndMonth = `${y}-${m + 1}`
return {
calendarPlugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
formData: new FormData(),
tableData: [],
deleteNotice: false,
deleteId: false,
canAdd: false,
canDelete: false,
events: {
type: 'POST',
url: 'calendar/show',
failure: function(response) {
console.log(response);
},
},
header: {
left: 'title',
center: false,
right: 'prev, next today',
},
showAddModal: false,
showEditModal: false,
model: {
name: null,
className: 'bg-default',
description: null,
start: '',
end: '',
files: [],
},
eventColors: ['bg-info', 'bg-orange', 'bg-red', 'bg-green', 'bg-default', 'bg-blue', 'bg-purple', 'bg-yellow']
};
},
methods: {
created() {
this.init();
},
init() {
window.axios.post('calendar/show')
.then((response) => {
this.tableData = response.data.events.data;
this.canAdd = response.data.can_add;
this.canDelete = response.data.can_delete;
});
},
calendarApi() {
return this.$refs.fullCalendar.getApi()
},
changeView(viewType) {
this.defaultView = viewType
this.calendarApi().changeView(viewType)
},
next() {
this.calendarApi().next()
},
prev() {
this.calendarApi().prev()
},
onDateClick({ date }) {
this.showAddModal = true
this.model.start = date
this.model.end = date
},
save() {
this.formData.append('name', this.model.name);
this.formData.append('date', this.onDateClick(date));
this.formData.append('description', this.model.description);
for (var i = 0; i < this.model.files.length; i++) {
const file = this.model.files[i];
this.formData.append('files[' + i + ']', file);
}
window.axios.post(window.location.origin + '/calendar/store',
this.formData,
{
headers: {
'Content-Type': 'multipart/form-data',
},
})
.then((response) => {
this.init();
}).catch((err) => {
console.log(err);
});
},
previewFiles(val) {
this.model.files.push(val);
},
confirmDelete(id) {
this.deleteNotice = true;
this.deleteId = id;
},
handleDelete() {
window.axios.post('calendar/destroy', { id: this.deleteId })
.then((response) => {
this.deleteNotice = false;
this.deleteId = false;
this.init();
});
},
},
};
</script>