I'm using vForm with FullCalendar, And I'm using a bootstrap modal to edit an event on the calendar. when I'm clicking an event on the calendar it's opening the modal with the form and it's input's and I'm sending the data's to the vForm from Fullcalendar eventclick() method but it's not showing in the form and the form inputs are empty. here's what I tried so far which none of them works and I added comments to make things more clear:
FAILURE 1:
<script>
import "fullcalendar/dist/fullcalendar.min.js";
import "fullcalendar/dist/fullcalendar.min.css";
import { Form, HasError, AlertError } from "vform";
Vue.component(HasError.name, HasError);
Vue.component(AlertError.name, AlertError);
var editTitle = "";
var editStart = "";
var editEnd = "";
var editdesc = "";
export default {
props: ["workingHours"],
mounted() {
const date = new Date();
const d = date.getDate();
const m = date.getMonth();
const y = date.getFullYear();
const events = this.workingHours;
$("#full-calendar").fullCalendar({
events,
height: 800,
header: {
left: "month,agendaWeek,agendaDay",
center: "title",
right: "today prev,next"
},
eventClick: function(calEvent, jsEvent, view) {
editStart = calEvent.start.format("MM/DD/YYYY, h:mm a");
editEnd = calEvent.end.format("MM/DD/YYYY, h:mm a");
editTitle = calEvent.title;
editdesc = calEvent.desc;
var xpos = jsEvent.pageX;
var ypos = jsEvent.pageY;
$("#calendar-edit").modal("show");
console.log(editTitle); //at this stage the editTitle variable is updated with the new value but down in the form the title is not updated with the new value
return false;
}
});
},
data() {
return {
// Create a new form instance
form: new Form({
title: editTitle, //here the value is not updated with the new value so the input in the form is empty
start: editStart,
end: editEnd,
desc: editdesc
})
};
},
methods: {
updateEvent() {
// Submit the form via a PUT request
this.form.put("/api/workinghours/update/" + 1).then(({ data }) => { //don't worry about the plus one i'm using it for testing purpose
console.log(data);
});
}
}
};
</script>
FAILURE 2:
<script>
import "fullcalendar/dist/fullcalendar.min.js";
import "fullcalendar/dist/fullcalendar.min.css";
import { Form, HasError, AlertError } from "vform";
Vue.component(HasError.name, HasError);
Vue.component(AlertError.name, AlertError);
export default {
props: ["workingHours"],
mounted() {
const date = new Date();
const d = date.getDate();
const m = date.getMonth();
const y = date.getFullYear();
const events = this.workingHours;
$("#full-calendar").fullCalendar({
events,
height: 800,
header: {
left: "month,agendaWeek,agendaDay",
center: "title",
right: "today prev,next"
},
eventClick: function(calEvent, jsEvent, view) {
this.form.start = calEvent.start.format("MM/DD/YYYY, h:mm a");
this.form.end = calEvent.end.format("MM/DD/YYYY, h:mm a");
this.form.title = calEvent.title; //So for this I'm using the Vform's API to update the values but it gives error that the title is not defined
this.form.desc = calEvent.desc;
var xpos = jsEvent.pageX;
var ypos = jsEvent.pageY;
$("#calendar-edit").modal("show");
return false;
}
});
},
data() {
return {
// Create a new form instance
form: new Form({
title: "", //here the value still is not updated with the new value so the input in the form is empty
start: "",
end: "",
desc: ""
})
};
},
methods: {
updateEvent() {
// Submit the form via a PUT request
this.form.put("/api/workinghours/update/" + 1).then(({ data }) => { //don't worry about the plus one i'm using it for testing purpose
console.log(data);
});
}
}
};
</script>
So with the help of @ADyson I could make it work thanks to him, I have been using an old version first and updated to the latest version and changed the Fullcalendar library to VUE version. so now the event click is triggered is changing the input values of the vForm I will add the entire code below trying to add comments too. the only issue now is beside using vForm and Fullcalendar libraries I'm using vue-datetime and when sending the values to the form the component input value is empty I think the issue is more related to the datetime format in javascript, So I have tricked to add badge over the datetime components to show the old values. I know it's not the right way of doing it but for now it's good
<script>
import FullCalendar from "@fullcalendar/vue";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction";
var eventID = 0;
export default {
props: ["workingHours"],
components: {
FullCalendar // make the <FullCalendar> tag available
},
data: function() {
return {
calendarPlugins: [
// plugins must be defined in the JS
dayGridPlugin,
timeGridPlugin,
interactionPlugin // needed for dateClick
],
calendarWeekends: true,
form: new Form({
title: "",
start: "",
end: "",
desc: ""
})
};
},
methods: {
handleDateClick(info) {
eventID = info.event.id;
const startTime = moment(info.event.start).format('yyyy-MM-DD hh:MM:SS');
const endTime = moment(info.event.end).format('yyyy-MM-DD hh:MM:SS');
this.form.title = info.event.title;
this.form.start = startTime;
this.form.end = endTime;
this.form.desc = info.event.extendedProps.desc;
$("#disabledStart").html(startTime);
$("#disabledEnd").html(endTime);
$("#calendar-edit").modal("show");
console.log(info.event.start);
console.log(startTime);
console.log(info.event.id);
},
updateEvent() {
// Submit the form via a PUT request
this.form.put("/api/workinghours/update/" + eventID).then(({ data }) => {
console.log(data);
$("#calendar-edit").modal("hide");
});
}
}
};
</script>