Level 54
How is your controller endpoint at /event-calendar handling the request?
The json data being sent in that POST request doesn't have keys, which may be responsible for the disconnect between the frontend and the backend.
Oct 6, 2022
7
Level 4
Vuejs 2 how to create an event on fullcalendar
Hello, I'm having some problems with creating places in fullcalendar, I'm using vue js for this but it's the first time I'm working with vue js and fullcalendar. And my problem is that I can create events in the calendar, but the event is not created on the date I click, but on today's date. And I have the impression that I didn't do something right, since the event creation method uses javascript and not vue. So can someone help me with the right way how to create events?
<div class="schedule-calendar bg-light card p-5">
<FullCalendar :options="calendarOptions" />
</div>
.....
select: this.selectEventFunction,
eventSources: [
{
events: function(fetchInfo, successCallback, failureCallback) {
axios.get('/getEvent').then(response => {
successCallback(response.data.data)
});
}
}
]
created method
methods: {
selectEventFunction: function(start,end,allDays) {
// console.log(start);
$('#addEventCalendar').modal('toggle');
$('#createEvent').click(function () {
var title = $('#title').val();
var start = moment(start).format('YYYY-MM-DD');
var end = moment(end).format('YYYY-MM-DD');
// console.log(start);
$.ajax({
url: "/event-calendar",
type: "POST",
dataType: 'json',
data: {
title,
start,
end
},
success: function(response)
{
console.log(response)
},
error:function(error)
{
console.log(error)
},
});
});
},
},
Level 4
public function store(Request $request)
{
// $event = EventCalendar::create($request->all());
$validate = $request->validate([
'title' => 'required',
'start' => 'required',
'end' => 'required',
]);
$event = new EventCalendar();
$event->title = $request->title;
$event->start = $request->start;
$event->end = $request->end;
$event->save();
// dump($event);
return response()->json([
'success' => 'Event Created!'
]);
}
This is the store function controller.
The json data being sent in that POST request doesn't have keys, which may be responsible for the disconnect between the frontend and the backend.
I can save data on db, i know this is not the right way. But i dont know any other method how to pass this data using fullcalendar with vue js
Level 54
What do you see when you dd($request->all()) before validation?
Is the event title making it to the DB but just the date is incorrect?
Level 4
@vybeauregardyes the title is okay, data wrong
Level 54
@Leon012 The date could be coming from any number of places, e.g. database default, JS formatting the wrong string, etc.
Trace the date throughout the lifecycle of the request using console.log() on the JS end and dump() on the php end and try to determine where it's getting set to today's date.
Level 4
@vybeauregard i know the data problems come from this line
var start = moment(start).format('YYYY-MM-DD');
But if i try console.log(start) here i can get exactly selected date
methods: {
selectEventFunction: function(start,end,allDays) {
console.log(start)
.....
Level 4
[Sloved]
The problem was here
selectEventFunction: function(selectionInfo) {
console.log(selectionInfo.startStr);
Datatable does not usestart,end,allDay as i tryed before
Please or to participate in this conversation.