Mon -
Sun 8.00 AM - 8.00 PM
Laravel
)
In this tutorial we will see Laravel Fullcalendar Example.
A calendar UI component for web applications is offered by the JavaScript package called FullCalendar. A PHP web framework called Laravel makes it simple and quick for programmers to create web apps. In this tutorial, we will create a simple Laravel FullCalendar example that displays a calendar with events retrieved from a database.
Laravel Fullcalendar Example
Follow the below steps -
Step 1 - Setup Laravel first, Make sure Laravel is first installed on your PC. To install Laravel, follow the official documentation to install Laravel.
Step 2 - Using the following command, produce a new Laravel project
laravel new laravel-fullcalendar-example
Step 3 - install FullCalendar using npm
npm install @fullcalendar/core @fullcalendar/daygrid @fullcalendar/timegrid
Step 4 - Create a new migration Create a new migration to create a table for storing events using the following command
php artisan make:migration create_events_table --create=events
Then add the following code to the up method of the migration
public function up()
{
Schema::create('events', function (Blueprint $table) {
$table->id();
$table->string('title');
$table->dateTime('start');
$table->dateTime('end')->nullable();
$table->timestamps();
});
}
Step 5 - Migrate the database using the following command
php artisan migrate
Step 6 - Create a new model for the events table using below command:
php artisan make:model Event
Then add the following code to the model
class Event extends Model
{
protected $fillable = ['title', 'start', 'end'];
}
Step 7 - Create a new controller for the FullCalendar example using the below command
php artisan make:controller FullCalendarController
Then add the following code to the controller
use App\Models\Event;
class FullCalendarController extends Controller
{
public function index()
{
$events = Event::all();
$formattedEvents = $events->map(function ($event) {
return [
'title' => $event->title,
'start' => $event->start,
'end' => $event->end,
];
});
return view('fullcalendar', compact('formattedEvents'));
}
}
Step 8 - Create a new route Create a new route for the FullCalendar example in the web.php file
Route::get('/fullcalendar', [FullCalendarController::class, 'index']);
Step 9 - Create a new view Create a new view for the FullCalendar example using the following command
php artisan make:view fullcalendar
Then add the following code to the view
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<meta name='viewport' content='width=device-width, initial-scale=1' />
<title>FullCalendar Example</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.css' />
</head>
<body>
<div id='calendar'></div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.js'></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'dayGrid', 'timeGrid' ],
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
events: <?php echo json_encode($formattedEvents) ?>,
eventClick: function(info) {
console.log(info.event);
}
});
calendar.render();
});
</script>
</body>
</html>This code creates a new FullCalendar instance and sets the plugin options, header options, and event data. It also sets up an event listener for when an event is clicked.
Step 10 - Now run the application
php artisan serve
Open http://localhost:8000/fullcalendar in your browser.
Now , You have successfully created a simple Laravel FullCalendar example that displays events retrieved from a database.