968
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.
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
9 comments
It’s working for me! Thank you so much.
Great!!
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
Yes sure.
i send to you an email
nice tutorial
I’m used in my project with Laravel 8
Thanks
Great to hear this. Welcome
Great 🥳
Thanks