Uncategorized

Laravel – Fullcalendar with Dynamic Data Working Example

Laravel – Fullcalendar with Dynamic Data Working Example

How to Include Full calendar in Angular 6?
276Views

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.

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

 

 

Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am full stack developer. I love coding. I know Wordpress, Core php, Angularjs, Angular 2, Angular 6, Angular 7, laravel, Codeigniter, Shopify, Squarespace, Jquery, Google Map Api, Vuejs, Reactjs, Bigcommerce etc.

Leave a Reply

Positive SSL