I am trying to implement an event calendar inside one of my vue components in Laravel but I am not able to display the events on the calendar from my SQL database. Although, I am able to view the columns of my table using my resource controller. Note:- I am using router-view to display all the content under the id content so there are no blade templates. Any help please!! Thanks in advance.
Dashboard.vue
<template>
<full-calendar :config='config'>
</full-calendar>
</template>
<script>
export default{
data() {
return {
config: {
defaultView: "month"
},
methods:{
loadEvents() {
axios.get("api/event").then(({ data }) => (this.events = data));
}
},
created(){
this.loadEvents();
}
};
</script>
Controller type:resource
public function index()
{
$events = DB::table('events')->get();
$event = [];
foreach($events as $row){
$endDate = $row->end_date."24:00:00";
$event[] = \Calendar::event(
$row->event_title,
true,
new \DateTime($row->start_date),
new \DateTime($row->end_date),
$row->id,
[
'color'=>$row->color,
]
);
}
$calendar = \Calendar::addEvents($event);
return $events;
}
class CreateEventsTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('events', function (Blueprint $table) {
$table->increments('id');
$table->integer('user_id')->unsigned();
$table->foreign('user_id')->references('id')->on('users');
$table->string('event_title');
$table->string('event_description');
$table->string('color');
$table->datetime('start_date');
$table->datetime('end_date');
$table->timestamps();
});
}
};