Reputation: 7028
I am trying to implement FullCalendar in Laravel. In this regard my controller is like below
<?php
namespace App\Http\Controllers;
use Illuminate\Routing\Controller as BaseController;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use Calendar;
use App\Event;
class HomeController extends BaseController
{
public function calendar() {
$events = [];
$data = Event::all();
if($data->count()) {
foreach ($data as $key => $value) {
$events[] = Calendar::event(
$value->title,
true,
new \DateTime($value->start_date),
new \DateTime($value->end_date.' +1 day'),
null,
// Add color and link on event
[
'color' => '#f05050',
'url' => 'pass here url and any route',
]
);
}
}
$calendar = Calendar::addEvents($events);
return view('welcome', compact('calendar'));
}
}
My View file is like below
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="{{ asset('/css/main.css')}}" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/main.min.js" crossorigin="anonymous"></script>
<style>
body {
margin: 40px 10px;
padding: 0;
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
font-size: 14px;
}
#calendar {
max-width: 1100px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="container">
<div class="panel panel-primary">
<div class="panel-heading">MY Calender</div>
<div class="panel-body">
{!! $calendar->calendar() !!}
{!! $calendar->script() !!}
</div>
</div>
</div>
</body>
</html>
My output is like below (I am getting blank white screen)
I found that I have to initialize FullCalendar. How can I initialize FullCalender ?
I am trying to follow below tutorials. But I didn't find any initialization there.
https://github.com/acaronlex/laravel-calendar
https://github.com/maddhatter/laravel-fullcalendar
https://hdtuto.com/article/laravel-full-calendar-tutorial-example-from-scratch
I am confused. What should I do ?
Upvotes: 0
Views: 1162
Reputation: 1325
It looks like you are calling {!! $calendar->script() !!}
outside of a script tag.
Try <script> {!! $calendar->script() !!} </script>
instead
The example shows that within a script tag, which suggests it likely loads javascript assets involved in rendering the calendar.
Upvotes: 1