maddhatter/laravel-fullcalendar Laravel 10; in this tutorial, you will learn from scratch on how to integrate fullcalendar in Laravel 10 using “maddhatter/laravel-fullcalendar” package for this example.
Basically, you can use fullcalendear in your laravel app for appointment booking, event scheduling, task management.
maddhatter/laravel-fullcalendar Laravel 10
- Step 1 – Install Laravel App
- Step 2 – Connecting App to Database
- Step 3 – Build Migration & Model
- Step 4 – Install maddhatter/laravel-fullcalendar and Build Routes
- Step 5 – Create Controller Using Artisan Command
- Step 6 – Create Blade View
- Step 7 – Run Development Server
- Step 8 – Test This App
Step 1 – Install Laravel App
First of all, start your terminal to download or install Laravel 10 new setup. Run the following commands in it to install the new Laravel 10 app on your system:
composer create-project --prefer-dist laravel/laravel blog
Step 2 – Connecting App to Database
In this step, open .env and configure database details for connecting app to database:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=here your database name here
DB_USERNAME=here database username here
DB_PASSWORD=here database password here
Step 3 – Build Migration & Model
In this step, execute the following command on terminal to create book model and migration file:
php artisan make:model Book -m
This command will create one model name Book and also create one migration file for the Events table.
After successfully run the command, Navigate to database/migrations folder and open create_books_table.php file. Then update the following code into create_books_table.php file, as follow:
<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateBookingsTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('bookings', function (Blueprint $table) {
$table->bigIncrements('id');
$table->string('title');
$table->date('start');
$table->date('end');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('bookings');
}
}
?>
The visit app/models and open Book.php file and add the following code into it:
<?php
namespace App/Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Booking extends Model
{
use HasFactory;
protected $fillable = ['title','start','end'];
}
?>
Now, execute the following command on terminal to create the tables into database:
php artisan migrate
Step 4 – Install maddhatter/laravel-fullcalendar and Build Routes
Open your terminal and execute the following command on it:
composer require maddhatter/laravel-fullcalendar
Then visit “config/app.php” file and register this package, as shown below:
'providers' => [
....
MaddHatter\LaravelFullcalendar\ServiceProvider::class,
],
'aliases' => [
....
'Calendar' => MaddHatter\LaravelFullcalendar\Facades\Calendar::class,
]
In this step, Create two routes and add in web.php file. So, visit /routes directory and open web.php file. Then add the following routes into it:
use App\Http\Controllers\FullCalendarController;
Route::get('/booking',[FullCalendarController::class, 'index']);
Step 5 – Create Controller Using Artisan Command
In this step, execute the following command on terminal to create a controller name FullCalendarController.php file:
php artisan make:controller FullCalendarController
After successfully create controller, visit app/http/controllers directory and open FullCalendarController.php file.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Booking;
use Redirect,Response;
class FullCalendarController extends Controller
{
public function index()
{
$events = [];
$data = Booking::all();
if($data->count()){
foreach ($data as $key => $value) {
$events[] = Calendar::event(
$value->title,
true,
new \DateTime($value->start),
new \DateTime($value->end.' +1 day')
);
}
}
$calendar = Calendar::addEvents($events);
return view('fullcalendar', compact('calendar'));
}
}
?>
Step 6 – Create Blade view
In this step, Visit the resources/views directory and create a blade view file named calendar.blade.php. And add the following code into it:
<!doctype html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.7/fullcalendar.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.7/fullcalendar.min.css"/>
</head>
<body>
<div class="container">
<div class="panel panel-primary">
<div class="panel-heading">
MY Calender - Tutsmake.com
</div>
<div class="panel-body" >
{!! $calendar->calendar() !!}
{!! $calendar->script() !!}
</div>
</div>
</div>
</body>
</html>
Step 7 – Run Development Server
In this step, execute the following command on terminal to start development server:
php artisan serve
If you want to run the project diffrent port so use this below command
php artisan serve --port=8080
Step 8 – Test This App
Now, open browser and hit the following url on it:
http://localhost:8000/booking
If you want to remove public or public/index.php from URL In laravel, Click Me
Conclusion
Laravel 10 fullcalendar tutorial, You have successfully learned how to integrate the fullcalendar in Laravel 10 app. As well as how to show, add, update, and delete events on fullcalendar in Laravel 10 app.
Recommended Laravel Posts
If you have any questions or thoughts to share, use the comment form below to reach us.
