Laravel 10 How to use FullCalender with Events and Links

Aug 26, 2023
Article · 3 min
627 words

Like (0)
Favorite (0)

Hello Artisan, today I'll show you how to show full calendar with events and clickable links in our Laravel application. For that we're going to use FullCalendar. So, no more talk let's see how we can easily integrate full calendar in our application.

Setup Controller
Setup View
Setup Route
Output

Setup Controller

So at first, we'll create a controller by firing the below command.

php artisan make:controller FullCalendar

It'll create a controller under app/Http/Controllers called FullCalendar, open the file and below code in your controller. Look at the below source code.

Http/Controllers/FullCalendar.php

<?php

namespace App\Http\Controllers;
class FullCalendar extends Controller
{
    public function calendar()
    {
        $events = [];

        $start_dates = ['2023-06-01','2023-06-07','2023-06-11','2023-06-12T10:30:00','2023-06-12','2023-06-12','2023-06-13','2023-06-28'];
        $end_date = ['','2023-06-10','2023-06-13','2023-06-12T12:30:00','2023-06-12T12:00:00','2023-06-12T14:30:00','2023-06-13T07:00:00',''];

        $titles = ['All Day Event','Long Event','Conference','Meeting','Lunch','Meeting','Birthday Party','Click for Google'];
        $links = ['','','','','','','','https://www.google.com/'];

        foreach ($titles as $key=> $title) {
            $events[]   = [
                'title' => $title,
                'start' => $start_dates[$key],
                'end'   => $end_date[$key],
                'url'   => $links[$key],
            ];
        }

        $data = [
            'events' => $events
        ];

        return view('fullcalendar',$data);
    }
}

Setup View

Now we need to setup the blade file, so that we can show the result in a nice way.

resources/views/fullcalendar.blade.php

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='utf-8' />
</head>
<body>
<div id='calendar'></div>
<script src='https://cdn.jsdelivr.net/npm/[email protected]/index.global.min.js'></script>
<script>

    document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
            initialView: 'dayGridMonth',
            events : @json($events)
        });
        calendar.render();
    });

</script>
</body>
</html>

Setup Route

Put the below route in the web.php file.

routes/web.php

Route::get('/fullcalendar', [\App\Http\Controllers\FullCalendar::class,'calendar'])->name('fullcalendar');

Output

Now it's the time to check the output. Go to localhost:8000/fullcalendar, and you'll find the below output.

That's it for today. I hope it'll be helpful in upcoming project. You can also download this source code from GitHub. Thanks for reading. 🙂

Laravel

#Laravel Advanced #JS #javascript #jQuery #laravel #fullcalendar