Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
I am using vue js with fullcalendar but now i have a problem, i cant see fetched data cuse i have changed start, end from db table and replace with event_start, event_end. Is there any option i can use to fetch this custom field and to display again my data on calendar?
data() {
return {
calendarOptions: {
plugins: [
dayGridPlugin,
interactionPlugin,
timeGridPlugin,
listPlugin,
bootstrap5Plugin
],
height: 650,
eventColor: '#695CFE',
initialView: 'dayGridMonth',
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
},
dateClick: this.handleDateClick,
navLinks: true,
dayMaxEvents: true,
editable: true,
selectable: true,
weekends: true,
allDay: true,
themeSystem: 'bootstrap5',
select: this.selectEventFunction,
eventSources: [
{
events: function(fetchInfo, successCallback, failureCallback) {
axios.get('/getEvent').then(response => {
successCallback(response.data.data)
});
}
}
]
},
}
},
You can for example use an API Resource to retrieve customized fields.
// Resource
public function toArray($request)
{
return [
'id' => $this->id,
'start' => $this->event_start,
'end' => $this->event_end,
];
}
// A method in your controller
return EventResource::collection(Event::all());
Transform the query result so the keys match whatever FullCalendar expects. A Eloquent API resource is really useful in this regard - it allows you to break the coupling of database columns and object keys
@tykus @vincent15000 it is only way to use Eloquent Api Resource. It is nothing i can do here ....
eventSources: [
{
events: function(fetchInfo, successCallback, failureCallback) {
axios.get('/getEvent').then(response => {
successCallback(response.data.data)
});
}
}
]
@Leon012 I think that changeing something in the fullcalendar code would be a long work, so the easier way to solve your problem is to change the keys of the data you send to your frontend.
FullCalendar has no possible configuration to change the keys for start or end or some other properties.
@Leon012 an Eloquent API resource is relatively easy to implement. You have complete control over the structure of the data you pass to FullCalendar regardless of any future changes to your database/model
@tykus Yeah ... since I discovered the Laravel API Resources, I use them frequently, it's very pratice to control exactly what is sent to the frontend ;). And it's nothing more that a map() over a collection.
@vincent15000 I am using eloquent api resource but i thought is more easy if i change something at fullcalendar. But thank you for this advice
@tykus @vincent15000 i tryed to use this method, but when i condole.log here
eventSources: [
{
events: function(fetchInfo, successCallback, failureCallback) {
axios.get('/getEvent').then(response => {
successCallback(response.data.data)
console.log(response.data.data)
});
}
}
]
i get null start and end
1:
end: null
id: 2
start: null
title: "JOB 1"
@Leon012 show us the API Resource class, and the Controller action that handles the request.
public function store(Request $request)
{
$validate = $request->validate([
'title' => 'required',
'start_date' => 'required',
'end_date' => 'required',
]);
$event = new EventCalendar();
$event->title = $request->title;
$event->start_date = $request->start_date;
$event->end_date = $request->end_date;
$event->save();
return response()->json([
'success' => 'Event Created!'
]);
}
public function toArray($request)
{
return [
'id' => $this->id,
'title' => $this->title,
'start' => $this->event_start,
'end' => $this->event_end,
];
}
laravel controller
public function getEvent(Request $request)
{
return EventCalendarResource::collection(EventCalendar::get());
}
sorry there was a writing mistake on me.
return [
'id' => $this->id,
'title' => $this->title,
'start' => $this->/*event_start*/start_date,
'end' => $this->/*event_end*/end_date,
];
now it work
@Leon012 Very good.
Also, this should not be in the Resource class - only in the Controller
public function getEvent(Request $request)
{
return EventCalendarResource::collection(EventCalendar::get());
}
@tykus Yes of course this is controller function, it is not on the resouce class. it is only on EventCalendarController
@Leon012 okay, but that's not how it looked in the code snippet you shared - which is why I clarified the point.
@tykus updated
Please or to participate in this conversation.