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
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