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>
<html>
<head>
<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>
<script>

  $(document).ready(function() {
    $('#calendar').fullCalendar({
      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); ?>
    });

  });

</script>
</head>
<body>

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

</body>
</html>

In the end run the laravel project:

localhost/laravelproject/public/fullcalendar

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,

TheRichPost

You may also like

9 comments

Toan April 1, 2020 - 7:14 am

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

Reply
Ajay Malhotra April 1, 2020 - 7:23 am

Great!!

Reply
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

Reply
Ajay Malhotra August 15, 2020 - 4:16 pm

Yes sure.

Reply
amina August 15, 2020 - 4:36 pm

i send to you an email

Reply
Ahmad February 12, 2022 - 11:37 pm

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

Thanks

Reply
Ajay Malhotra February 13, 2022 - 4:02 am

Great to hear this. Welcome

Reply
navi September 26, 2022 - 4:25 am

Great ?

Reply
therichpost September 26, 2022 - 6:17 am

Thanks

Reply

Leave a Comment

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