abu abu
abu abu

Reputation: 7028

Initialization of FullCalendar in Laravel

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)

enter image description here

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://www.laravelcode.com/post/laravel-full-calendar-tutorial-example-using-maddhatter-laravel-fullcalendar

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

Answers (1)

James Clark
James Clark

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

Related Questions