Home Laravel Laravel – Fullcalendar with Dynamic Data Working Example

Laravel – Fullcalendar with Dynamic Data Working Example

by therichpost
Published: Last Updated on 9 comments
How to Include Full calendar in Angular 6?

Hello to all, welcome to therichpost.com. In this post, I will tell you, Laravel – Fullcalendar with Dynamic Data Working Example.

In this post, I will get events data from Laravel controller and show events to Laravel blade template.

Guys this will also work with Laravel 8 and Laravel 9.

Laravel – Fullcalendar with Dynamic Data Working Example

Here is the working code snippets, you need to follow:

1. Very First, we need to add to code in laravel HomeController.php file:

In this, I made custom events with php array for fullcalendar:

public function Chartjs(){
        $Events = array
                    "0" => array
                               "title" => "Event One",
                               "start" => "2018-10-31",
                    "1" => array
                                "title" => "Event Two",
                                "start" => "2018-11-01",
        return view('fullcalendar',['Events' => $Events]);

2. Here is the code, you need to add laravel routes/web.php file:

Route::get("/fullcalendar", "HomeController@Chartjs");

3. Finally, here is the code for laravel blade template file fullcalendar.blade.php:

I made laravel controller array data into json format for fullcalendar events data:

<!DOCTYPE html>
<meta charset='utf-8' />
<link href='https://fullcalendar.io/releases/fullcalendar/3.9.0/fullcalendar.min.css' rel='stylesheet' />
<link href='https://fullcalendar.io/releases/fullcalendar/3.9.0/fullcalendar.print.min.css' rel='stylesheet' media='print' />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src='https://fullcalendar.io/releases/fullcalendar/3.9.0/lib/moment.min.js'></script>
<script src='https://fullcalendar.io/releases/fullcalendar/3.9.0/lib/jquery.min.js'></script>
<script src='https://fullcalendar.io/releases/fullcalendar/3.9.0/fullcalendar.min.js'></script>

  $(document).ready(function() {
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,basicWeek,basicDay'
      navLinks: true, // can click day/week names to navigate views
      editable: true,
      eventLimit: true, // allow "more" link when too many events

           events: <?php echo json_encode($Events); ?>



  <div id='calendar'></div>


In the end run the laravel project:


This is the code and if you have any query related to this post, then do comment below or ask question.

Thank you,

Jatt Da Muqabla,


You may also like


Toan April 1, 2020 - 7:14 am

It’s working for me! Thank you so much.

Ajay Malhotra April 1, 2020 - 7:23 am


amina August 15, 2020 - 4:14 pm

hello i’m working on fullcalender event project with laravel 7 and angular 9 please can you help me in fuction addEvent in the backEnd

Ajay Malhotra August 15, 2020 - 4:16 pm

Yes sure.

amina August 15, 2020 - 4:36 pm

i send to you an email

Ahmad February 12, 2022 - 11:37 pm

nice tutorial
I’m used in my project with Laravel 8


Ajay Malhotra February 13, 2022 - 4:02 am

Great to hear this. Welcome

navi September 26, 2022 - 4:25 am

Great ?

therichpost September 26, 2022 - 6:17 am



Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.